@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

/* =========================================================
   REMOVE ESPAÇO SUPERIOR PADRÃO DA LOJA INTEGRADA
   ========================================================= */

html,
body,
body.pagina-inicial,
body.pagina-categoria,
body.tema-transparente {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* barra antiga da Loja Integrada */
.barra-inicial {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* container principal não pode criar espaço antes do header */
.conteiner-principal {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* header começa imediatamente no topo */
#cabecalho {
    margin-top: 0 !important;
}

/* =========================================================
   RESET SOMENTE DO TOPO
   ========================================================= */

#cabecalho,
#cabecalho *,
#menuCat,
#menuCat * {
    box-sizing: border-box;
}


/* =========================================================
   DESKTOP
   FIGMA 138:817
   ========================================================= */

@media screen and (min-width: 1025px) {

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

    #cabecalho {
        position: relative !important;

        width: 100% !important;
        height: 80px !important;
        min-height: 80px !important;

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

        background: #fafafa !important;

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

        z-index: 1000 !important;
    }


    #cabecalho > .conteiner {
        position: relative !important;
    
        width: 100% !important;
        max-width: 1920px !important;
        height: 80px !important;
    
        margin: 0 auto !important;
        padding: 0 120px !important;
    
        box-sizing: border-box !important;
    }


    #cabecalho > .conteiner > .row-fluid {
        position: relative !important;

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

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


    /* remove grid antigo da Loja Integrada */
    #cabecalho .span3,
    #cabecalho .span4,
    #cabecalho .span8,
    #cabecalho .span9 {
        float: none !important;
        margin-left: 0 !important;
    }


    /* =====================================================
       LOGO
       Figma 255 × 51
       ===================================================== */

    #cabecalho > .conteiner > .row-fluid > .span3 {
        position: absolute !important;

        left: 0 !important;
        top: 14px !important;

        width: 255px !important;
        height: 51px !important;

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


    #cabecalho .logo {
        display: block !important;

        width: 255px !important;
        height: 51px !important;

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


    #cabecalho .logo a {
        display: block !important;

        width: 255px !important;
        height: 51px !important;
    }


    #cabecalho .logo img {
        display: block !important;

        width: 255px !important;
        height: 51px !important;

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

        margin: 0 !important;

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


    /* =====================================================
       OCULTA LINHA SUPERIOR ANTIGA
       ===================================================== */

    #cabecalho .conteudo-topo > .superior {
        display: none !important;
    }


    /* =====================================================
   CONTEÚDO DO HEADER
   ===================================================== */

#cabecalho .conteudo-topo.span9 {
    position: static !important;

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

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

    float: none !important;
}

#cabecalho .conteudo-topo > .superior {
    display: none !important;
}

#cabecalho .conteudo-topo .inferior {
    position: static !important;

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

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

    float: none !important;
}


/* =====================================================
   BUSCA
   FIGMA:
   x 690
   y 17
   635 x 50

   O row começa depois dos 120px de padding:
   690 - 120 = 570
   ===================================================== */

#cabecalho .conteudo-topo .inferior > .busca-mobile {
    position: absolute !important;

    left: 570px !important;
    right: auto !important;

    top: 17px !important;

    width: 635px !important;
    max-width: none !important;
    height: 50px !important;

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

    float: none !important;

    z-index: 5 !important;
}


#cabecalho .busca {
    width: 635px !important;
    height: 50px !important;

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

    background: #ffffff !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


#cabecalho .busca form {
    position: relative !important;

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

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


#cabecalho .busca input,
#cabecalho .busca input#auto-complete {
    display: block !important;

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

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 0 58px 0 12px !important;

    border: 0 !important;
    border-radius: 0 !important;

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

    background: #ffffff !important;

    color: #323232 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 50px !important;
}


#cabecalho .busca input::placeholder {
    color: #323232 !important;
    opacity: 1 !important;
}


/* =====================================================
   LUPA
   ===================================================== */

#cabecalho .busca .botao-busca {
    position: absolute !important;

    top: 8px !important;
    right: 13px !important;

    display: flex !important;

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

    width: 34px !important;
    height: 34px !important;

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

    border: 0 !important;

    background: transparent !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 34px !important;

    z-index: 10 !important;
}


#cabecalho .busca .botao-busca::before {
    color: #626262 !important;

    font-size: 22px !important;
    line-height: 34px !important;
}


/* =====================================================
   ÍCONES DO HEADER - DESKTOP
   FIGMA 138:817

   Figma 1920px:
   Carrinho: x 1635
   Suporte:  x 1700
   Conta:    x 1764

   Trabalhamos pelo lado DIREITO para ficar
   mais estável também em resoluções menores.
   ===================================================== */


/* =====================================================
   CARRINHO
   ===================================================== */

#cabecalho .conteudo-topo .inferior > .span4.hidden-phone {
    position: absolute !important;

    left: auto !important;
    right: 134px !important;
    top: 26px !important;

    display: block !important;

    width: 31px !important;
    height: 31px !important;

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

    float: none !important;

    overflow: visible !important;

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

    z-index: 50 !important;
}


/* container do carrinho */
#cabecalho .carrinho {
    position: relative !important;

    display: block !important;

    width: 31px !important;
    height: 31px !important;

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

    overflow: visible !important;

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


/* link */
#cabecalho .carrinho > a {
    display: flex !important;

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

    width: 31px !important;
    height: 31px !important;

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

    text-decoration: none !important;

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


/* ÍCONE NATIVO icon-shopping-cart */
#cabecalho .carrinho > a > i.icon-shopping-cart {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

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

    background: transparent !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 31px !important;

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


/* mantém o ::before original da Loja Integrada */
#cabecalho .carrinho > a > i.icon-shopping-cart::before {
    display: inline-block !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 31px !important;

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


/* remove textos Carrinho / quantidade textual */
#cabecalho .carrinho > a > span {
    display: none !important;
}


/* =====================================================
   SUPORTE
   ===================================================== */

#cabecalho .atd-top {
    position: absolute !important;

    left: auto !important;
    right: 69px !important;
    top: 26px !important;

    display: block !important;

    width: 31px !important;
    height: 31px !important;

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

    float: none !important;

    overflow: visible !important;

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

    z-index: 60 !important;
}


#cabecalho .atd-txt {
    display: flex !important;

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

    width: 31px !important;
    height: 31px !important;

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

    /* esconde "Suporte" */
    font-size: 0 !important;

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

    cursor: pointer !important;
}


/* usa fa-question-circle já existente */
#cabecalho .atd-txt > i.fa-question-circle {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

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

    background: transparent !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 31px !important;

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


#cabecalho .atd-txt > i.fa-question-circle::before {
    display: inline-block !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 31px !important;

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


/* =====================================================
   CONTA
   ===================================================== */

#cabecalho .login-top {
    position: absolute !important;

    left: auto !important;
    right: 5px !important;
    top: 26px !important;

    display: block !important;

    width: 31px !important;
    height: 31px !important;

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

    float: none !important;

    overflow: visible !important;

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

    z-index: 60 !important;
}


#cabecalho .login-txt {
    display: flex !important;

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

    width: 31px !important;
    height: 31px !important;

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

    /* esconde "Entrar" */
    font-size: 0 !important;

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

    cursor: pointer !important;
}


/* usa fa-user já existente */
#cabecalho .login-txt > i.fa-user {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

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

    background: transparent !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 31px !important;

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


#cabecalho .login-txt > i.fa-user::before {
    display: inline-block !important;

    color: #626262 !important;

    font-size: 22px !important;
    line-height: 31px !important;

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


/* =====================================================
   DROPDOWNS
   ===================================================== */

#cabecalho .atd-top .drop-atd,
#cabecalho .login-top .drop-login {
    position: absolute !important;

    top: 31px !important;
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    z-index: 9999 !important;
}


    /* =====================================================
       ESCONDE CONTROLES MOBILE NO DESKTOP
       ===================================================== */

    #cabecalho .atalhos-mobile,
    #cabecalho .cat {
        display: none !important;
    }


    /* =====================================================
       MENU DE CATEGORIAS
       ===================================================== */

    #menuCat {
        position: relative !important;

        top: auto !important;
        left: auto !important;

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

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

        background: #ffffff !important;

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

        z-index: 900 !important;
    }


    #menuCat > .conteiner {
        width: 100% !important;
        max-width: 1920px !important;
        height: 80px !important;
    
        box-sizing: border-box !important;
    
        margin: 0 auto !important;
        padding: 0 120px !important;
    }


    #menuCat .row-fluid,
    #menuCat .menu.superior {
        width: 100% !important;
        height: 80px !important;

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


    #menuCat .menu.superior {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;
    }


    #menuCat .menu.superior > .nivel-um {
        display: flex !important;

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

        gap: clamp(24px, 2.25vw, 43px) !important;

        width: 100% !important;

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

        list-style: none !important;
    }


    #menuCat .menu.superior > .nivel-um > li {
    position: relative !important;

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

    width: auto !important;
    height: 80px !important;

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

    float: none !important;

    border: 0 !important;

    overflow: visible !important;
}


    #menuCat .menu.superior > .nivel-um > li > a {
        display: flex !important;

        align-items: center !important;

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

        background: transparent !important;

        text-decoration: none !important;
    }


    #menuCat .menu.superior > .nivel-um > li .titulo {
        font-family: "Montserrat", sans-serif !important;

        font-size: clamp(15px, 1.05vw, 20px) !important;
        font-weight: 400 !important;

        line-height: 1 !important;

        color: #000000 !important;

        text-transform: uppercase !important;

        white-space: nowrap !important;
    }


    /* o Figma desktop não mostra as setinhas */
    #menuCat .menu.superior > .nivel-um > li > a > i {
        display: none !important;
    }
    
    /* =====================================================
   SUBMENU DESKTOP
   ===================================================== */

#menuCat,
#menuCat > .conteiner,
#menuCat .row-fluid,
#menuCat .menu.superior,
#menuCat .menu.superior > .nivel-um {
    overflow: visible !important;
}


/* submenu */
#menuCat
.menu.superior
> .nivel-um
> li.com-filho
> .nivel-dois {

    position: absolute !important;

    top: 80px !important;
    left: 0 !important;

    display: block !important;

    min-width: 260px !important;
    width: max-content !important;

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

    background: #ffffff !important;

    border: 1px solid #cacaca !important;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;

    visibility: hidden !important;
    opacity: 0 !important;

    pointer-events: none !important;

    transform: none !important;

    z-index: 99999 !important;
}


/* mantém aberto ao navegar com mouse */
#menuCat
.menu.superior
> .nivel-um
> li.com-filho:hover
> .nivel-dois,

#menuCat
.menu.superior
> .nivel-um
> li.com-filho:focus-within
> .nivel-dois {

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

    pointer-events: auto !important;
}


/* itens internos */
#menuCat
.menu.superior
> .nivel-um
> li
> .nivel-dois
> li {

    display: block !important;

    width: 100% !important;

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

    float: none !important;

    background: #ffffff !important;
}


/* links do submenu */
#menuCat
.menu.superior
> .nivel-um
> li
> .nivel-dois
> li
> a {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 16px 20px !important;

    background: #ffffff !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;
}


/* hover */
#menuCat
.menu.superior
> .nivel-um
> li
> .nivel-dois
> li
> a:hover {
    background: #fafafa !important;
}
    
}


/* =========================================================
   DESKTOP MENOR / NOTEBOOK
   1025px até 1599px
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    #cabecalho > .conteiner {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }


    #cabecalho > .conteiner > .row-fluid > .span3 {
        width: 220px !important;
        height: 44px !important;

        top: 18px !important;
    }


    #cabecalho .logo,
    #cabecalho .logo a,
    #cabecalho .logo img {
        width: 220px !important;
        height: 44px !important;
    }


    /* a busca ocupa o espaço disponível entre logo e ícones */



    /* busca adaptável no notebook */
    #cabecalho .conteudo-topo .inferior > .busca-mobile {
        left: 280px !important;
        right: 230px !important;
    
        width: auto !important;
        max-width: none !important;
    }
    
    
    #cabecalho .busca {
        width: 100% !important;
    }
    
    
    /* CONTA */
    #cabecalho .login-top {
        left: auto !important;
        right: 0 !important;
    }
    
    
    /* =====================================================
       ÍCONES - NOTEBOOK
     ===================================================== */

    /* CONTA */
    #cabecalho .login-top {
        left: auto !important;
        right: 0 !important;
        top: 26px !important;
    
        display: block !important;
    }
    
    
    /* SUPORTE */
    #cabecalho .atd-top {
        left: auto !important;
        right: 55px !important;
        top: 26px !important;
    
        display: block !important;
    }
    
    
    /* CARRINHO */
    #cabecalho .conteudo-topo .inferior > .span4.hidden-phone {
        left: auto !important;
        right: 110px !important;
        top: 26px !important;
    
        display: block !important;
    }


    #menuCat > .conteiner {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }


    #menuCat .menu.superior > .nivel-um {
        gap: clamp(18px, 2vw, 32px) !important;
    }


    #menuCat .menu.superior > .nivel-um > li .titulo {
        font-size: clamp(14px, 1.2vw, 18px) !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA FECHADO: 166:1746
   FIGMA ABERTO: 166:2233
   ========================================================= */

@media screen and (max-width: 1024px) {

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

    #cabecalho {
        position: relative !important;

        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;

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

        background: #fafafa !important;

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

        z-index: 1200 !important;
    }

    #cabecalho > .conteiner {
        position: relative !important;

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

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

    #cabecalho > .conteiner > .row-fluid {
        position: relative !important;

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

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


    /* =====================================================
       SPAN3
       contém hamburger + logo + carrinho
       ===================================================== */

    #cabecalho > .conteiner > .row-fluid > .span3 {
        position: static !important;

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

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

        float: none !important;

        transform: none !important;
    }


    /* =====================================================
       LOGO
       Figma: x79 y10 200x40
       ===================================================== */

    #cabecalho .logo {
        position: absolute !important;

        left: 53% !important;
        top: 10px !important;

        transform: translateX(-50%) !important;

        display: block !important;

        width: 200px !important;
        height: 40px !important;

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

        z-index: 20 !important;
    }

    #cabecalho .logo a,
    #cabecalho .logo img {
        display: block !important;

        width: 200px !important;
        height: 40px !important;

        max-width: 200px !important;
        max-height: 40px !important;

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

    #cabecalho .logo img {
        object-fit: contain !important;
    }


    /* =====================================================
       HAMBURGER
       IMPORTANTE: .cat está DENTRO da .span3
       ===================================================== */

    #cabecalho > .conteiner > .row-fluid > .span3 > .cat {
        position: absolute !important;

        left: 14px !important;
        top: 10px !important;

        display: flex !important;

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

        width: 40px !important;
        height: 40px !important;

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

        cursor: pointer !important;

        z-index: 2000 !important;
    }

    #cabecalho
    > .conteiner
    > .row-fluid
    > .span3
    > .cat
    .category {

        display: flex !important;

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

        width: 40px !important;
        height: 40px !important;

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

        cursor: pointer !important;
    }

    #cabecalho
    > .conteiner
    > .row-fluid
    > .span3
    > .cat
    .category
    i {

        display: flex !important;

        flex-direction: column !important;
        justify-content: center !important;

        gap: 5px !important;

        width: 26px !important;
        height: 24px !important;

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

    #cabecalho
    > .conteiner
    > .row-fluid
    > .span3
    > .cat
    .hamb-1 {

        display: block !important;

        width: 26px !important;
        height: 3px !important;

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

        background: #323232 !important;

        border-radius: 1px !important;
    }


    /* =====================================================
       CARRINHO
       o HTML real já possui <li> dentro da span3
       ===================================================== */

    #cabecalho
    > .conteiner
    > .row-fluid
    > .span3
    > li {

        position: absolute !important;

        right: 12px !important;
        top: 15px !important;

        display: block !important;

        width: 30px !important;
        height: 30px !important;

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

        list-style: none !important;

        background: transparent !important;

        border: 0 !important;

        z-index: 100 !important;
    }

    #cabecalho
    > .conteiner
    > .row-fluid
    > .span3
    > li
    > a.icon-shopping-cart {

        display: flex !important;

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

        width: 30px !important;
        height: 30px !important;

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

        background: transparent !important;

        color: #626262 !important;

        font-size: 25px !important;
        line-height: 30px !important;

        text-decoration: none !important;
    }

    #cabecalho
    > .conteiner
    > .row-fluid
    > .span3
    > li
    > a.icon-shopping-cart::before {

        color: #626262 !important;

        font-size: 25px !important;
        line-height: 30px !important;
    }


    /* =====================================================
       ESCONDE ELEMENTOS ANTIGOS
       ===================================================== */

        #cabecalho .atalhos-mobile,
        #cabecalho .conteudo-topo > .superior,
        #cabecalho .atd-top,
        #cabecalho .login-top,
        #cabecalho .conteudo-topo .inferior > .span4.hidden-phone {
            display: none !important;
        }

    /* =====================================================
       CONTEUDO TOPO
       ===================================================== */

    #cabecalho .conteudo-topo,
    #cabecalho .conteudo-topo .inferior {
        position: static !important;

        display: block !important;

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

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

        float: none !important;
    }


    /* =====================================================
       BUSCA FECHADA
       NÃO PODE APARECER
       ===================================================== */

    #cabecalho .conteudo-topo .inferior > .busca-mobile,
    #cabecalho .busca-mobile {
        display: none !important;

        position: absolute !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;
    }


    /* =====================================================
       MENU FECHADO
       ===================================================== */

    #cabecalho .menu.superior {
        display: none !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;
    }


/* =====================================================
   MENU MOBILE ABERTO
   SOBRE O BANNER, MAS NÃO PRESO À TELA
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior {

    position: absolute !important;

    display: block !important;

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

    pointer-events: auto !important;

    top: 60px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    height: 547px !important;
    min-height: 547px !important;
    max-height: 547px !important;

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

    transform: none !important;

    background: #ffffff !important;

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

    overflow: hidden !important;

    z-index: 99990 !important;
}


    /* =====================================================
       CAB-NAV NATIVO
       não precisamos mostrar outro header dentro do menu
       ===================================================== */

    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    .cab-nav {

        display: none !important;
    }


/* =====================================================
   LISTA DE CATEGORIAS MOBILE ABERTA
   FIGMA 166:2233
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um {

    position: absolute !important;

    display: block !important;

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

    pointer-events: auto !important;

    /* relativo ao painel que começa em y = 60 */
    top: 109px !important;

    left: 15px !important;
    right: 15px !important;

    width: auto !important;
    height: auto !important;

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

    transform: none !important;

    float: none !important;

    list-style: none !important;

    background: #ffffff !important;

    overflow: visible !important;

    z-index: 20 !important;
}


/* =====================================================
   ESCONDE CAB-NAV QUE ESTÁ DENTRO DA UL
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> .cab-nav {

    display: none !important;
}


/* =====================================================
   CATEGORIAS
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li {

    position: relative !important;

    display: block !important;

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

    clear: both !important;

    float: none !important;

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

    transform: none !important;

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

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

    background: #ffffff !important;

    border: 0 !important;
    border-bottom: 1px solid #cacaca !important;

    overflow: hidden !important;

    list-style: none !important;

    z-index: auto !important;
}


/* último item */
body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li:last-child {

    border-bottom: 0 !important;
}


/* =====================================================
   LINK DA CATEGORIA
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li
> a {

    position: static !important;

    display: flex !important;

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

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

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

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

    float: none !important;

    transform: none !important;

    background: #ffffff !important;

    border: 0 !important;

    text-decoration: none !important;

    color: #000000 !important;
}


/* =====================================================
   TEXTO
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li
> a
> strong.titulo {

    position: static !important;

    display: block !important;

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

    width: auto !important;
    height: auto !important;

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

    transform: none !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 60px !important;

    text-align: left !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;
}


/* =====================================================
   ESCONDE SETAS
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li
> a
> i {

    display: none !important;
}


/* =====================================================
   ESCONDE SUBCATEGORIAS
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li
> .nivel-dois {

    display: none !important;

    visibility: hidden !important;
}

    /* =====================================================
       BUSCA ABERTA
       FIGMA:
       x18 y89
       330 x 50
       ===================================================== */

body.menu-mobile-aberto
#cabecalho
.conteudo-topo
.inferior
> .busca-mobile {

    position: absolute !important;

    display: block !important;

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

    pointer-events: auto !important;

    left: 18px !important;
    right: 18px !important;

    /* posição real do Figma */
    top: 89px !important;

    width: auto !important;
    height: 50px !important;

    max-width: none !important;

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

    float: none !important;

    background: transparent !important;

    z-index: 100001 !important;
}

    /* remove botão de menu antigo dentro da busca */
    body.menu-mobile-aberto
    #cabecalho
    .busca-mobile
    .atalho-menu {

        display: none !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .busca {

        position: relative !important;

        display: block !important;

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

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

        background: #ffffff !important;

        border: 1px solid #cacaca !important;
        border-radius: 0 !important;

        box-shadow: none !important;
    }

    body.menu-mobile-aberto
    #cabecalho
    .busca form {

        position: relative !important;

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

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

        background: #ffffff !important;
    }

    body.menu-mobile-aberto
    #cabecalho
    .busca input,
    body.menu-mobile-aberto
    #cabecalho
    .busca input#auto-complete {

        display: block !important;

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

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 55px 0 11px !important;

        border: 0 !important;
        border-radius: 0 !important;

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

        background: #ffffff !important;

        color: #323232 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: 48px !important;
    }

    body.menu-mobile-aberto
    #cabecalho
    .busca input::placeholder {

        color: #323232 !important;

        opacity: 1 !important;
    }


    /* texto exato do Figma */
    body.menu-mobile-aberto
    #cabecalho
    .busca input#auto-complete::placeholder {

        color: transparent !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .busca form::before {

        content: "Buscar";

        position: absolute !important;

        left: 11px !important;
        top: 0 !important;

        height: 48px !important;

        display: flex !important;

        align-items: center !important;

        color: #323232 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        pointer-events: none !important;

        z-index: 1 !important;
    }


    /* =====================================================
       LUPA
       ===================================================== */

    body.menu-mobile-aberto
    #cabecalho
    .busca
    .botao-busca {

        position: absolute !important;

        display: flex !important;

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

        right: 8px !important;
        top: 7px !important;

        width: 34px !important;
        height: 34px !important;

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

        border: 0 !important;

        background: transparent !important;

        color: #626262 !important;

        font-size: 22px !important;
        line-height: 34px !important;

        z-index: 5 !important;
    }

    body.menu-mobile-aberto
    #cabecalho
    .busca
    .botao-busca::before {

        color: #626262 !important;

        font-size: 22px !important;
        line-height: 34px !important;
    }
    
/* =====================================================
   FUNDO DO MENU ABERTO - FIGMA 166:2235
   ===================================================== */

/* somente a faixa superior de 60px */
body.menu-mobile-aberto #cabecalho > .conteiner {
    background: #fafafa !important;
}


/* =====================================================
   MENU MOBILE ABERTO - FUNDO BRANCO DEFINITIVO
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior {

    position: absolute !important;

    top: 60px !important;
    left: 0 !important;
    right: 0 !important;

    display: block !important;

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

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

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

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

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

    overflow: hidden !important;

    z-index: 99990 !important;
}


/* =====================================================
   REMOVE CAMADAS NATIVAS DA LOJA INTEGRADA
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior::before,

body.menu-mobile-aberto
#cabecalho
.menu.superior::after,

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um::before,

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um::after {

    content: none !important;

    display: none !important;

    width: 0 !important;
    height: 0 !important;

    background: transparent !important;
    background-image: none !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =====================================================
   LISTA
   deixa o próprio UL branco também
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um {

    position: absolute !important;

    top: 109px !important;
    left: 15px !important;
    right: 15px !important;

    display: block !important;

    width: auto !important;
    height: calc(547px - 109px) !important;

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

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

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

    overflow: hidden !important;

    z-index: 100000 !important;
}


/* itens */
body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li,

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li
> a {

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
}


/* =====================================================
   BUSCA ACIMA DO MENU
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.conteudo-topo
.inferior
> .busca-mobile {

    z-index: 100001 !important;
}


/* =====================================================
   CONTAINERS NÃO PODEM CRIAR FUNDO CINZA
   ===================================================== */

body.menu-mobile-aberto #cabecalho .conteudo-topo,
body.menu-mobile-aberto #cabecalho .conteudo-topo .inferior {

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* =====================================================
   REMOVE SOMBRA / OVERLAY NATIVO DA LOJA INTEGRADA
   ===================================================== */

body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um {

    /* mantém menu acima do site */
    z-index: 100000 !important;

    /* REMOVE O CINZA NATIVO */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;

    /* neutraliza propriedades do tema mobile */
    bottom: auto !important;

    border: 0 !important;

    background: #ffffff !important;
    background-color: #ffffff !important;

    opacity: 1 !important;
}

body.menu-mobile-aberto
#cabecalho
.menu.superior {

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

    background: #ffffff !important;
}


body.menu-mobile-aberto
#cabecalho
.menu.superior
> .nivel-um
> li {

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

/* =====================================================
   CORREÇÃO FINAL - REMOVE OVERLAY NATIVO MOBILE
   FIGMA 166:2233
   ===================================================== */

body.menu-mobile-aberto #cabecalho .menu.superior {
    background: #ffffff !important;
    background-color: #ffffff !important;

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

body.menu-mobile-aberto
#cabecalho
.menu.superior
> ul.nivel-um {

    position: absolute !important;

    top: 109px !important;
    left: 15px !important;
    right: 15px !important;
    bottom: auto !important;

    width: auto !important;
    height: 438px !important;

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

    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;

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

    filter: none !important;

    opacity: 1 !important;

    transform: none !important;

    border: 0 !important;

    overflow: hidden !important;
}

/* nenhuma camada do tema pode escurecer o painel */
body.menu-mobile-aberto #cabecalho::before,
body.menu-mobile-aberto #cabecalho::after,
body.menu-mobile-aberto #cabecalho .menu.superior::before,
body.menu-mobile-aberto #cabecalho .menu.superior::after,
body.menu-mobile-aberto #cabecalho .menu.superior > ul.nivel-um::before,
body.menu-mobile-aberto #cabecalho .menu.superior > ul.nivel-um::after {
    content: none !important;

    display: none !important;

    background: transparent !important;

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

}

/* =========================================================
   HERO DESKTOP FULL BLEED
   FIGMA 138:809
   ========================================================= */

@media screen and (min-width: 1025px) {

    /*
     * O container da Loja Integrada continua limitado,
     * então precisamos permitir que somente a HERO
     * extrapole esse container.
     */
    body.pagina-inicial .secao-banners,
    body.pagina-inicial .secao-banners > .conteiner {
        overflow: visible !important;
    }


/* =====================================================
   HERO DESKTOP - FULL BLEED REAL
   ===================================================== */

body.pagina-inicial
.secao-banners
> .conteiner
> .row-fluid.banner.cheio {

    position: relative !important;

    /*
     * leva o centro da hero até o centro
     * da viewport, independentemente do
     * .conteiner da Loja Integrada
     */
    left: 50% !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    transform: translateX(-50%) !important;

    overflow: hidden !important;
}


    /* remove grid Bootstrap antigo */
    body.pagina-inicial
    .secao-banners
    > .conteiner
    > .row-fluid.banner.cheio
    > .span12 {

        width: 100% !important;

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

        float: none !important;
    }


    /* slider */
    body.pagina-inicial
    .secao-banners
    .row-fluid.banner.cheio
    .flexslider,

    body.pagina-inicial
    .secao-banners
    .row-fluid.banner.cheio
    .flex-viewport,

    body.pagina-inicial
    .secao-banners
    .row-fluid.banner.cheio
    .slides {

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

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

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


    /* slide */
    body.pagina-inicial
    .secao-banners
    .row-fluid.banner.cheio
    .slides
    > li {

        width: 100% !important;

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


/* =========================================================
   HERO DESKTOP — FIGMA 138:809
   IMAGEM COMPLETA 1920 × 650
   ========================================================= */

body.pagina-inicial
.secao-banners
.row-fluid.banner.cheio
picture {

    display: block !important;

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

    /* proporção EXATA do Figma */
    aspect-ratio: 1920 / 750 !important;

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

    overflow: hidden !important;
}


body.pagina-inicial
.secao-banners
.row-fluid.banner.cheio
picture
> img {

    display: block !important;

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

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

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

    /*
     * IMPORTANTE:
     * contain mostra a imagem inteira.
     * cover estava recortando.
     */
    object-fit: contain !important;
    object-position: center center !important;
}
}

/* =========================================================
   DESTAQUES HOME
   FIGMA DESKTOP 138:788
   FIGMA MOBILE 166:1709
   ========================================================= */


/* =========================================================
   REMOVE MINI BANNERS ANTIGOS DA LOJA INTEGRADA
   ========================================================= */

.row-fluid.banner.mini-banner {
    display: none !important;
}


/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

#destaquesCategoriasHome {
    position: relative !important;

    display: block !important;

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

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

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

    background: #ffffff !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}


#destaquesCategoriasHome *,
#destaquesCategoriasHome *::before,
#destaquesCategoriasHome *::after {
    box-sizing: border-box !important;
}


/* =========================================================
   RESET DOS CARDS
   impede Bootstrap/Loja Integrada de interferir
   ========================================================= */

#destaquesCategoriasHome .destaques-grid {
    position: relative !important;

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

    margin: 0 !important;

    box-sizing: border-box !important;
}


#destaquesCategoriasHome
.destaques-grid
> .destaque-card {
    position: relative !important;

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

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

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

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    overflow: hidden !important;

    text-decoration: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;
}


/* imagem SEMPRE preenche o card */
#destaquesCategoriasHome
.destaques-grid
> .destaque-card
> img {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    display: block !important;

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

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

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

    border: 0 !important;

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

    transform: none !important;

    box-sizing: border-box !important;
}


/* =========================================================
   DESKTOP
   FIGMA 138:788

   1920 viewport
   120px margem
   1680px área
   5 cards
   aproximadamente 320 x 400
   ========================================================= */

@media screen and (min-width: 1025px) {

    #destaquesCategoriasHome {
        width: 100% !important;

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


    #destaquesCategoriasHome
    .destaques-grid {
        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        grid-auto-flow: row !important;

        /*
         * Figma:
         * 5 x ~320px
         * gaps médios ~19px
         */
        column-gap: 19px !important;
        row-gap: 0 !important;

        width: calc(100% - 240px) !important;
        max-width: 1680px !important;

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

        align-items: stretch !important;
        justify-items: stretch !important;
    }


    #destaquesCategoriasHome
    .destaques-grid
    > .destaque-card {
        display: block !important;

        grid-column: auto !important;
        grid-row: auto !important;

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

        /*
         * Figma:
         * ~320 x 400
         */
        aspect-ratio: 320 / 400 !important;

        height: auto !important;

        flex: none !important;

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


    /* todos obrigatoriamente iguais */
    #destaquesCategoriasHome
    .destaque-pendentes,

    #destaquesCategoriasHome
    .destaque-arandelas,

    #destaquesCategoriasHome
    .destaque-plafons,

    #destaquesCategoriasHome
    .destaque-abajures,

    #destaquesCategoriasHome
    .destaque-iluminacao {
        width: 100% !important;

        aspect-ratio: 320 / 400 !important;

        height: auto !important;
    }
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media screen
and (min-width: 1025px)
and (max-width: 1599px) {

    #destaquesCategoriasHome
    .destaques-grid {
        width: calc(100% - 80px) !important;
        max-width: none !important;

        column-gap: 16px !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:1709

   Figma 360:
   15px | 162px | 6px | 162px | 15px

   linha 1:
   Pendentes | Arandelas

   linha 2:
   Plafons 330 x 100.61

   linha 3:
   Abajures | + Iluminação
   ========================================================= */

@media screen and (max-width: 1024px) {

    #destaquesCategoriasHome {
        width: 100% !important;

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


    #destaquesCategoriasHome
    .destaques-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        grid-template-rows: auto auto auto !important;

        grid-auto-flow: row !important;

        column-gap: 6px !important;
        row-gap: 6px !important;

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

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

        align-items: stretch !important;
        justify-items: stretch !important;
    }


    /* =====================================================
       TODOS OS CARDS VERTICAIS
       162 x 202 no Figma
       ===================================================== */

    #destaquesCategoriasHome
    .destaques-grid
    > .destaque-card {
        display: block !important;

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

        height: auto !important;

        aspect-ratio: 162 / 202 !important;

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

        flex: none !important;
    }


    /* =====================================================
       1 - PENDENTES
       ===================================================== */

    #destaquesCategoriasHome
    .destaque-pendentes {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    /* =====================================================
       2 - ARANDELAS
       ===================================================== */

    #destaquesCategoriasHome
    .destaque-arandelas {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }


    /* =====================================================
       3 - PLAFONS
       horizontal 330 x 100.61
       ===================================================== */

    #destaquesCategoriasHome
    .destaque-plafons {
        grid-column: 1 / 3 !important;
        grid-row: 2 !important;

        width: 100% !important;

        aspect-ratio: 330 / 100.61 !important;

        height: auto !important;
    }
    
    /* =====================================================
   TEXTO PLAFONS MOBILE
   FIGMA 166:1709
   ===================================================== */

body.pagina-inicial
#destaquesCategoriasHome
.destaque-plafons::after {

    content: "Plafons\A& Plafonier" !important;

    position: absolute !important;

    left: 15px !important;
    bottom: 11px !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

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

    color: #ffffff !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    white-space: pre-line !important;

    text-align: left !important;

    pointer-events: none !important;

    z-index: 10 !important;
}


    /* =====================================================
       4 - ABAJURES
       ===================================================== */

    #destaquesCategoriasHome
    .destaque-abajures {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }


    /* =====================================================
       5 - ILUMINAÇÃO
       ===================================================== */

    #destaquesCategoriasHome
    .destaque-iluminacao {
        grid-column: 2 !important;
        grid-row: 3 !important;
    }


    /* imagens */
    #destaquesCategoriasHome
    .destaques-grid
    > .destaque-card
    > img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* =========================================================
   AJUSTE FINAL TARJA + DESTAQUES
   FIGMA DESKTOP 138:788
   FIGMA MOBILE 166:1709
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* -----------------------------------------------------
       TARJA
       quebra o limite do .conteiner da Loja Integrada
       ----------------------------------------------------- */

    body.pagina-inicial
    .secao-banners
    > .conteiner
    > .row-fluid.banner.hidden-phone {

        position: relative !important;

        left: 50% !important;

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

        margin-left: -50vw !important;
        margin-right: 0 !important;

        padding: 0 !important;

        float: none !important;

        transform: none !important;

        overflow: visible !important;
    }


    body.pagina-inicial
    .secao-banners
    > .conteiner
    > .row-fluid.banner.hidden-phone
    > .span12.banner.tarja {

        display: block !important;

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

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

        float: none !important;

        background: #ffffff !important;
    }


    body.pagina-inicial
    .span12.banner.tarja
    > img {

        display: block !important;

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

        height: auto !important;

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

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


    /* -----------------------------------------------------
       DESTAQUES
       também quebra o .conteiner
       ----------------------------------------------------- */

    body.pagina-inicial
    #destaquesCategoriasHome {

        position: relative !important;

        left: 50% !important;

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

        margin-left: -50vw !important;
        margin-right: 0 !important;

        /*
         * Espaço entre a tarja e os cards.
         * No Figma existe uma área branca grande aqui.
         */
        margin-top: 72px !important;

        padding: 0 !important;

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

        background: #ffffff !important;
    }


    body.pagina-inicial
    #destaquesCategoriasHome
    .destaques-grid {

        display: grid !important;

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        /*
         * Figma:
         * cards aproximadamente 320px
         * gaps aproximadamente 19px
         */
        column-gap: 19px !important;
        row-gap: 0 !important;

        width: calc(100vw - 240px) !important;
        max-width: 1680px !important;

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

        align-items: stretch !important;
        justify-items: stretch !important;
    }


    body.pagina-inicial
    #destaquesCategoriasHome
    .destaques-grid
    > .destaque-card {

        position: relative !important;

        display: block !important;

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

        height: auto !important;

        aspect-ratio: 320 / 400 !important;

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

        float: none !important;

        overflow: hidden !important;
    }


    body.pagina-inicial
    #destaquesCategoriasHome
    .destaques-grid
    > .destaque-card
    > img {

        position: absolute !important;

        inset: 0 !important;

        display: block !important;

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

        max-width: none !important;

        margin: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   NOTEBOOK
   1025 até 1599
   ========================================================= */

@media screen
and (min-width: 1025px)
and (max-width: 1599px) {

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaques-grid {

        /*
         * mantém 40px nas laterais,
         * igual ao restante do seu notebook
         */
        width: calc(100vw - 80px) !important;

        max-width: none !important;

        column-gap: 16px !important;
    }


    body.pagina-inicial
    #destaquesCategoriasHome {

        margin-top: 56px !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:1709
   ========================================================= */

@media screen and (max-width: 1024px) {

    /*
     * Mesmo estando dentro do .conteiner,
     * a seção passa a usar a viewport real.
     */
    body.pagina-inicial
    #destaquesCategoriasHome {

        position: relative !important;

        left: 50% !important;

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

        margin-left: -50vw !important;
        margin-right: 0 !important;

        /*
         * Espaço branco acima dos cards,
         * como no screenshot do Figma.
         */
        margin-top: 34px !important;

        padding: 0 15px !important;

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

        background: #ffffff !important;

        box-sizing: border-box !important;
    }


    body.pagina-inicial
    #destaquesCategoriasHome
    .destaques-grid {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            auto
            auto
            auto !important;

        column-gap: 6px !important;
        row-gap: 6px !important;

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

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


    /* =====================================================
       PENDENTES
       ===================================================== */

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-pendentes {

        grid-column: 1 !important;
        grid-row: 1 !important;

        width: 100% !important;

        /*
         * 162 x 202
         */
        aspect-ratio: 162 / 202 !important;

        height: auto !important;
    }


    /* =====================================================
       ARANDELAS
       ===================================================== */

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-arandelas {

        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 100% !important;

        aspect-ratio: 162 / 202 !important;

        height: auto !important;
    }


    /* =====================================================
       PLAFONS
       IMPORTANTE:
       força explicitamente a altura horizontal.
       ===================================================== */

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-plafons {

        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;

        /*
         * Não dependa apenas do aspect-ratio.
         * Forçamos a altura proporcional ao Figma.
         */
        height:
            calc(
                (100vw - 30px) *
                100.61 / 330
            ) !important;

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

        aspect-ratio: auto !important;
    }


    /* =====================================================
       ABAJURES
       ===================================================== */

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-abajures {

        grid-column: 1 !important;
        grid-row: 3 !important;

        width: 100% !important;

        aspect-ratio: 162 / 202 !important;

        height: auto !important;
    }


    /* =====================================================
       + ILUMINAÇÃO
       ===================================================== */

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-iluminacao {

        grid-column: 2 !important;
        grid-row: 3 !important;

        width: 100% !important;

        aspect-ratio: 162 / 202 !important;

        height: auto !important;
    }


    /* imagem sempre acompanha exatamente o card */
    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-card
    > img {

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;

        display: block !important;

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

        max-width: none !important;

        object-fit: cover !important;
        object-position: center center !important;
        z-index: 1 !important;
    }
}

/* =========================================================
   VITRINES HOME - CARROSSEL DEFINITIVO
   DESKTOP FIGMA 138:469
   MOBILE FIGMA 166:1539
   ========================================================= */


/* =========================================================
   FULL WIDTH
   tira a vitrine do limite do .conteiner da Loja Integrada
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem {

    position: relative !important;

    left: 50% !important;

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

    margin-left: -50vw !important;
    margin-right: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    background: #ffffff !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem * {

    box-sizing: border-box !important;
}


/* =========================================================
   HEADER DA CATEGORIA
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header {

    position: relative !important;

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

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   REMOVE COMPLETAMENTE O TÍTULO NATIVO
   linhas / centralização / uppercase
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria {

    position: static !important;

    display: flex !important;

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

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

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

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

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

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    text-align: left !important;
    text-decoration: none !important;

    text-transform: none !important;

    color: #000000 !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria::before,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria::after,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria
> strong::before,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria
> strong::after {

    content: none !important;

    display: none !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria
> strong {

    display: block !important;

    width: auto !important;
    height: auto !important;

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

    border: 0 !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;

    text-align: left !important;

    text-transform: none !important;

    white-space: nowrap !important;

    background: transparent !important;
}


/* =========================================================
   VER TODOS
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> .vitrine-ver-todos {

    position: static !important;

    display: flex !important;

    align-items: center !important;

    float: none !important;

    width: auto !important;
    height: auto !important;

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

    border: 0 !important;

    background: transparent !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;

    text-decoration: none !important;

    text-transform: capitalize !important;

    white-space: nowrap !important;
}


/* =========================================================
   SETAS
   não usa o desenho FontAwesome para não sofrer
   interferência do tema
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav {

    display: flex !important;

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

    float: none !important;

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


body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button {

    position: relative !important;

    display: flex !important;

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

    float: none !important;

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

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #323232 !important;

    cursor: pointer !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button
i {

    display: none !important;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-viewport {

    position: relative !important;

    display: block !important;

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

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =========================================================
   TRACK
   importante:
   vence ul[data-produtos-linha] da Loja Integrada
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-viewport
> ul.vitrine-carousel-track[data-produtos-linha] {

    position: relative !important;

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

    align-items: flex-start !important;
    justify-content: flex-start !important;

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

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

    height: auto !important;

    margin: 0 !important;

    list-style: none !important;

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

    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;

    scrollbar-width: none !important;

    -webkit-overflow-scrolling: touch !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-viewport
> ul.vitrine-carousel-track::-webkit-scrollbar {

    display: none !important;

    width: 0 !important;
    height: 0 !important;
}


/* =========================================================
   SLIDES
   mata definitivamente .span3 / Bootstrap
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
ul.vitrine-carousel-track
> li.span3.vitrine-slide {

    position: relative !important;

    display: block !important;

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

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

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

    height: auto !important;

    border: 0 !important;

    list-style: none !important;

    scroll-snap-align: start !important;
}


/* =========================================================
   CARD
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
> .listagem-item {

    position: relative !important;

    display: block !important;

    float: none !important;

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

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

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

    border: 0 !important;

    background: #ffffff !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   IMAGEM
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.listagem-item
.imagem-produto {

    position: relative !important;

    display: block !important;

    float: none !important;

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

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

    border: 0 !important;

    background: #f7f7f7 !important;

    overflow: hidden !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.imagem-produto
> img.imagem-principal {

    position: absolute !important;

    inset: 0 !important;

    display: block !important;

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

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

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

    object-fit: cover !important;
    object-position: center center !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.imagem-produto
> img.imagem-zoom {

    display: none !important;
}


/* =========================================================
   INFORMAÇÕES DO PRODUTO
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.info-produto {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    background: #ffffff !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.info-produto
a.nome-produto {

    position: relative !important;

    display: -webkit-box !important;

    width: 100% !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-weight: 500 !important;

    text-decoration: none !important;

    text-align: left !important;

    text-transform: none !important;

    overflow: hidden !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
}


/* =========================================================
   PREÇO
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.preco-produto {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    padding: 0 !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.preco-promocional {

    display: block !important;

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

    color: #323232 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.preco-parcela,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.desconto-a-vista {

    color: #626262 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.preco-parcela
> span {

    display: none !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.preco-parcela
strong,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
li.vitrine-slide
.desconto-a-vista
strong {

    font-weight: 600 !important;
}


/* =========================================================
   REMOVE ELEMENTOS NÃO UTILIZADOS
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.produto-sku,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.trustvox-stars,

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.bandeiras-produto {

    display: none !important;
}


/* =========================================================
   CORAÇÃO
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-coracao {

    position: absolute !important;

    right: 0 !important;
    top: 0 !important;

    display: flex !important;

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

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

    background: transparent !important;

    color: #626262 !important;

    z-index: 30 !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-coracao
i {

    display: none !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-coracao::before {

    content: "\2661";

    display: block !important;

    font-family: Arial, sans-serif !important;

    font-weight: 400 !important;

    color: #626262 !important;

    line-height: 1 !important;
}


/* =========================================================
   DESKTOP >= 1600
   FIGMA 138:469
   ========================================================= */

@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport {

        width: calc(100vw - 240px) !important;

        max-width: 1874px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* primeiro título */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header:first-child {

        margin-top: 55px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport
    + .vitrine-carousel-header {

        margin-top: 90px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: grid !important;

        grid-template-columns:
            auto
            auto
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        column-gap: 30px !important;

        min-height: 48px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria {

        grid-column: 1 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria
    > strong {

        font-size: 40px !important;
        line-height: 48px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-ver-todos {

        grid-column: 2 !important;

        font-size: 16px !important;
        line-height: 19px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {

        grid-column: 4 !important;

        gap: 12px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button {

        width: 30px !important;
        height: 30px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button::before {

        font-size: 30px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport {

        margin-top: 26px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track {

        gap: 30px !important;

        padding: 0 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track
    > li.span3.vitrine-slide {

        flex:
            0 0
            calc((100% - 90px) / 4) !important;

        width:
            calc((100% - 90px) / 4) !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .imagem-produto {

        height: auto !important;

        aspect-ratio: 445 / 556 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .info-produto {

        margin-top: 28px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .nome-produto {

        min-height: 76px !important;

        font-size: 24px !important;
        line-height: 1.06 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-produto {

        margin-top: 28px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-promocional {

        font-size: 30px !important;
        line-height: 36px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-parcela,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .desconto-a-vista {

        font-size: 20px !important;
        line-height: 33px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-coracao {

        width: 40px !important;
        height: 40px !important;

        font-size: 40px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-coracao::before {

        font-size: 40px !important;
    }


    /* =====================================================
   VER MAIS NO HOVER - CENTRALIZAÇÃO DEFINITIVA
   ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .imagem-produto
    > .acoes-produto.hidden-phone {
    
        position: absolute !important;
    
        /* centraliza o próprio container */
        top: 50% !important;
        left: 50% !important;
    
        right: auto !important;
        bottom: auto !important;
    
        /* tamanho exato do botão do Figma */
        width: 167px !important;
        height: 50px !important;
    
        margin: 0 !important;
        padding: 0 !important;
    
        transform: translate(-50%, -50%) !important;
    
        display: block !important;
    
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    
        z-index: 50 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item:hover
    .imagem-produto
    > .acoes-produto.hidden-phone {
    
        display: flex !important;
    
        align-items: center !important;
        justify-content: center !important;
    
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .imagem-produto
    .botao-comprar {

        display: flex !important;

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

        width: 167px !important;
        height: 50px !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        background: #000000 !important;

        color: #ffffff !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;

        text-transform: uppercase !important;

        text-shadow: none !important;

        box-shadow: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .imagem-produto
    .botao-comprar
    i {

        display: none !important;
    }
}


/* =========================================================
   NOTEBOOK 1025 - 1599
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport {

        width: calc(100vw - 80px) !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header:first-child {

        margin-top: 50px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport
    + .vitrine-carousel-header {

        margin-top: 75px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: grid !important;

        grid-template-columns:
            auto
            auto
            minmax(0, 1fr)
            auto !important;

        align-items: center !important;

        column-gap: 24px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria
    > strong {

        font-size: 32px !important;
        line-height: 40px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-ver-todos {

        font-size: 14px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {

        grid-column: 4 !important;

        gap: 12px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track {

        gap: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track
    > li.span3.vitrine-slide {

        flex:
            0 0
            calc((100% - 60px) / 4) !important;

        width:
            calc((100% - 60px) / 4) !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .imagem-produto {

        height: auto !important;

        aspect-ratio: 445 / 556 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .info-produto {

        margin-top: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .nome-produto {

        min-height: 62px !important;

        font-size: 18px !important;
        line-height: 1.15 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-produto {

        margin-top: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-promocional {

        font-size: 24px !important;
        line-height: 30px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-parcela,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .desconto-a-vista {

        font-size: 15px !important;
        line-height: 25px !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:1539
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem {

        overflow: hidden !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        width: calc(100vw - 30px) !important;

        margin-left: auto !important;
        margin-right: auto !important;

        min-height: 43px !important;

        align-items: start !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header:first-child {

        margin-top: 45px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport
    + .vitrine-carousel-header {

        margin-top: 70px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria
    > strong {

        font-size: 18px !important;
        line-height: 22px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-ver-todos {

        grid-column: 1 !important;
        grid-row: 2 !important;

        margin-top: 3px !important;

        font-size: 12px !important;
        line-height: 18px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {
    
        grid-column: 2 !important;
        grid-row: 1 !important;
    
        align-self: center !important;
    
        gap: 18px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button {

        width: 20px !important;
        height: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button::before {

        font-size: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport {

        width: 100vw !important;

        margin-top: 26px !important;

        overflow: hidden !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track {

        gap: 6px !important;

        padding: 0 15px !important;
    }


    /* Figma: 274px */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track
    > li.span3.vitrine-slide {

        flex: 0 0 274px !important;

        width: 274px !important;
        min-width: 274px !important;
        max-width: 274px !important;
    }


    /* Figma: 274 x 342 */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .imagem-produto {

        width: 274px !important;

        height: 342px !important;

        aspect-ratio: auto !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .info-produto {

        margin-top: 15px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .nome-produto {

        min-height: 44px !important;

        font-size: 14px !important;
        line-height: 1.05 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-produto {

        margin-top: 15px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-promocional {

        font-size: 16px !important;
        line-height: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .preco-parcela,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    li.vitrine-slide
    .desconto-a-vista {

        font-size: 12px !important;
        line-height: 18px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-coracao {

        width: 26px !important;
        height: 26px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-coracao::before {

        font-size: 26px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .acoes-produto,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .acoes-produto-responsiva {

        display: none !important;
    }
}

/* =========================================================
   SETAS CARROSSEL - USA ÍCONES NATIVOS EXISTENTES
   Desktop Figma 138:780
   Mobile Figma 166:1541
   ========================================================= */

/* remove qualquer seta criada via ::before */
body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button::before,
body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button::after {
    content: none !important;
    display: none !important;
}


/* botão */
body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button {
    position: relative !important;

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

    flex: none !important;

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

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;

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

    cursor: pointer !important;

    color: #323232 !important;
}


/* usa novamente o FontAwesome que já existe */
body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button
i.fa {
    display: block !important;

    width: auto !important;
    height: auto !important;

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

    color: #323232 !important;

    background: transparent !important;

    line-height: 1 !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    pointer-events: none !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    /*
     * título + Ver Todos + setas
     * todos ficam na mesma linha
     */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: grid !important;

        grid-template-columns:
            auto
            auto
            1fr
            auto !important;

        align-items: start !important;

        column-gap: 30px !important;

        min-height: 48px !important;
    }


    /* título */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria {
        grid-column: 1 !important;

        align-self: start !important;
    }


    /* Ver Todos logo depois do título */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-ver-todos {
        grid-column: 2 !important;

        align-self: start !important;

        margin: 0 !important;
    }


    /* setas no canto direito */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {

        grid-column: 4 !important;

        display: flex !important;

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

        align-self: center !important;

        gap: 12px !important;

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


    /*
     * Figma desktop:
     * 30 x 30
     */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button {

        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button
    i.fa {

        font-size: 25px !important;
        line-height: 30px !important;

        font-weight: 400 !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    /*
     * título / Ver Todos à esquerda
     * setas à direita
     */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        align-items: start !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .titulo-categoria {

        grid-column: 1 !important;
        grid-row: 1 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-ver-todos {

        grid-column: 1 !important;
        grid-row: 2 !important;

        margin: 3px 0 0 0 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {
    
        grid-column: 2 !important;
        grid-row: 1 !important;
    
        display: flex !important;
    
        align-items: center !important;
        justify-content: flex-end !important;
    
        align-self: center !important;
    
        gap: 18px !important;
    
        margin: 0 !important;
        padding: 0 !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button {

        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button
    i.fa {

        font-size: 17px !important;
        line-height: 20px !important;

        font-weight: 400 !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL DAS SETAS
   Figma Desktop 138:780
   Figma Mobile 166:1541
   SEM URL EXTERNA
   ========================================================= */


/* esconde definitivamente o desenho FontAwesome */
body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button
i.fa {
    display: none !important;
}


/* botão base */
body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button {
    position: relative !important;

    display: block !important;

    flex: none !important;

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

    border: 0 !important;
    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   HASTE HORIZONTAL
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button::before {
    content: "" !important;

    position: absolute !important;

    display: block !important;

    top: 50% !important;

    height: 2px !important;

    background: #323232 !important;

    border: 0 !important;

    transform: translateY(-50%) !important;

    opacity: 1 !important;
}


/* =========================================================
   CABEÇA DA SETA
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-nav
button::after {
    content: "" !important;

    position: absolute !important;

    display: block !important;

    top: 50% !important;

    background: transparent !important;

    opacity: 1 !important;
}


/* =========================================================
   SETA ESQUERDA
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-prev::before {
    left: 3px !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-prev::after {
    left: 3px !important;

    border-left: 2px solid #323232 !important;
    border-bottom: 2px solid #323232 !important;

    transform:
        translateY(-50%)
        rotate(45deg) !important;
}


/* =========================================================
   SETA DIREITA
   ========================================================= */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-next::before {
    right: 3px !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
.vitrine-carousel-next::after {
    right: 3px !important;

    border-left: 2px solid #323232 !important;
    border-bottom: 2px solid #323232 !important;

    transform:
        translateY(-50%)
        rotate(225deg) !important;
}


/* =========================================================
   DESKTOP
   Figma:
   30x30
   gap 12px
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {
        gap: 12px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button {
        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;
    }


    /* comprimento da haste */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button::before {
        width: 24px !important;
    }


    /* tamanho da ponta */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button::after {
        width: 9px !important;
        height: 9px !important;
    }
}


/* =========================================================
   MOBILE
   Figma:
   20x20
   gap 18px
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav {
        gap: 18px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button {
        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button::before {
        width: 17px !important;

        height: 1.5px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .vitrine-carousel-nav
    button::after {
        width: 6px !important;
        height: 6px !important;

        border-width: 0 0 1.5px 1.5px !important;
    }
}

/* =========================================================
   MEGA MENU FINAL
   DESKTOP FIGMA 166:1249
   MOBILE FIGMA 166:4451
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* permite posicionar o mega menu em relação ao menu inteiro */
    #menuCat {
        overflow: visible !important;
        z-index: 1500 !important;
    }

    #menuCat > .conteiner,
    #menuCat .row-fluid,
    #menuCat .menu.superior {
        overflow: visible !important;
    }


    /* =====================================================
       LINHA HORIZONTAL DO FIGMA
       aproximadamente x404 -> x1515 em 1920px
       ===================================================== */

    #menuCat
    .menu.superior
    > .nivel-um {

        position: relative !important;

        overflow: visible !important;
    }


    #menuCat
    .menu.superior
    > .nivel-um::after {

        content: "" !important;

        position: absolute !important;

        left: 50% !important;
        bottom: 7px !important;

        width: min(1111px, calc(100% - 80px)) !important;
        height: 1px !important;

        transform: translateX(-50%) !important;

        background: #cacaca !important;

        pointer-events: none !important;

        z-index: 1 !important;
    }


    /* =====================================================
       IMPORTANTE
       o LI não pode ser referência do dropdown
       ===================================================== */

    #menuCat
    .menu.superior
    > .nivel-um
    > li {

        position: static !important;

        height: 80px !important;

        overflow: visible !important;
    }


    #menuCat
    .menu.superior
    > .nivel-um
    > li
    > a {

        position: relative !important;

        display: flex !important;

        align-items: center !important;

        height: 80px !important;

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

        z-index: 2 !important;
    }


    /* =====================================================
       LINHA PRETA DA CATEGORIA ATIVA
       ===================================================== */

    #menuCat
    .menu.superior
    > .nivel-um
    > li:hover
    > a::after,

    #menuCat
    .menu.superior
    > .nivel-um
    > li:focus-within
    > a::after {

        content: "" !important;

        position: absolute !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 7px !important;

        height: 1px !important;

        background: #323232 !important;

        z-index: 5 !important;
    }


    /* =====================================================
       MEGA MENU
       ===================================================== */

    #menuCat
    .menu.superior
    > .nivel-um
    > li.com-filho
    > .nivel-dois {

        position: absolute !important;

        /*
         * começa imediatamente depois da navegação.
         * O padding superior coloca conteúdo em y≈189,
         * como no Figma.
         */
        top: 80px !important;

        left: 50% !important;
        right: auto !important;

        display: grid !important;

        grid-template-columns:
            minmax(260px, 368px)
            minmax(420px, 556px) !important;

        grid-auto-flow: row !important;

        column-gap: clamp(70px, 10vw, 191px) !important;
        row-gap: 10px !important;

        justify-content: center !important;
        align-content: start !important;

        width: 100vw !important;

        height: 392px !important;
        min-height: 392px !important;
        max-height: 392px !important;

        margin: 0 !important;

        padding:
            29px
            20px
            59px !important;

        transform: translateX(-50%) !important;

        background: #ffffff !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        list-style: none !important;

        overflow: hidden !important;

        visibility: hidden !important;
        opacity: 0 !important;

        pointer-events: none !important;

        z-index: 99999 !important;
    }


    /* =====================================================
       ABRE O MEGA MENU
       ===================================================== */

    #menuCat
    .menu.superior
    > .nivel-um
    > li.com-filho:hover
    > .nivel-dois,

    #menuCat
    .menu.superior
    > .nivel-um
    > li.com-filho:focus-within
    > .nivel-dois {

        visibility: visible !important;

        opacity: 1 !important;

        pointer-events: auto !important;
    }


    /* =====================================================
       SUBCATEGORIAS - COLUNA ESQUERDA
       ===================================================== */

    #menuCat
    .menu.superior
    > .nivel-um
    > li
    > .nivel-dois
    > li:not(.menu-mega-media) {

        position: relative !important;

        display: block !important;

        grid-column: 1 !important;

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

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

        float: none !important;

        background: transparent !important;

        border: 0 !important;

        list-style: none !important;
    }


    #menuCat
    .menu.superior
    > .nivel-um
    > li
    > .nivel-dois
    > li:not(.menu-mega-media)
    > a {

        display: block !important;

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

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

        background: transparent !important;

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 20px !important;
        font-weight: 400 !important;

        line-height: 1.4 !important;

        text-transform: capitalize !important;

        text-decoration: none !important;

        white-space: normal !important;
    }


    /* não muda fundo no hover */
    #menuCat
    .menu.superior
    > .nivel-um
    > li
    > .nivel-dois
    > li:not(.menu-mega-media)
    > a:hover {

        background: transparent !important;
    }


    /* =====================================================
       IMAGEM - COLUNA DIREITA
       FIGMA 556 x 304
       ===================================================== */

    #menuCat
    .menu-superior,
    #menuCat
    .menu.superior {

        overflow: visible !important;
    }


    #menuCat
    .nivel-dois
    > .menu-mega-media {

        position: relative !important;

        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 / span 20 !important;

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

        aspect-ratio: 556 / 304 !important;

        height: auto !important;

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

        background: transparent !important;

        border: 0 !important;

        overflow: hidden !important;

        pointer-events: none !important;

        list-style: none !important;
    }


    #menuCat
    .nivel-dois
    > .menu-mega-media
    > img {

        display: block !important;

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

        max-width: none !important;

        margin: 0 !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:4451
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* painel branco do menu */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior {

        height: 684px !important;
        min-height: 684px !important;
        max-height: 684px !important;

        background: #ffffff !important;

        overflow: hidden !important;
    }


    /* lista começa em y169:
       header 60 + 109 */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um {

        top: 109px !important;

        left: 15px !important;
        right: 12px !important;

        width: auto !important;

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

        padding: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       ITEM NORMAL
       ===================================================== */

    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 60px !important;
        min-height: 60px !important;
        max-height: none !important;

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

        background: #ffffff !important;

        border: 0 !important;
        border-bottom: 1px solid #cacaca !important;

        overflow: visible !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li
    > a {

        position: relative !important;

        display: flex !important;

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

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

        margin: 0 !important;

        /* Figma: itens fechados x25 */
        padding: 0 10px !important;

        background: #ffffff !important;

        border: 0 !important;

        color: #000000 !important;

        text-decoration: none !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li
    > a
    > strong.titulo {

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: normal !important;

        text-transform: uppercase !important;

        white-space: nowrap !important;
    }


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

    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li.menu-mobile-expandido {

        height: auto !important;
        min-height: 298px !important;

        border-bottom: 1px solid #323232 !important;
    }


    /* título ativo */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li.menu-mobile-expandido
    > a {

        /* Figma x18 */
        padding-left: 3px !important;
        padding-right: 3px !important;

        border-bottom: 1px solid #323232 !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li.menu-mobile-expandido
    > a
    > strong.titulo {

        font-weight: 600 !important;
    }


    /* =====================================================
       SUBMENU EXPANDIDO
       ===================================================== */

    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li.menu-mobile-expandido
    > .nivel-dois {

        position: relative !important;

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

        display: block !important;

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

        pointer-events: auto !important;

        width: 100% !important;

        height: auto !important;
        min-height: 238px !important;
        max-height: none !important;

        margin: 0 !important;

        /*
         * container x15
         * conteúdo x40
         * = 25px
         */
        padding:
            0
            25px
            28px !important;

        transform: none !important;

        background: #ffffff !important;

        border: 0 !important;

        box-shadow: none !important;

        overflow: visible !important;
    }


    /* subcategorias */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li.menu-mobile-expandido
    > .nivel-dois
    > li:not(.menu-mega-media) {

        display: block !important;

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

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

        background: #ffffff !important;

        border: 0 !important;

        list-style: none !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > .nivel-um
    > li.menu-mobile-expandido
    > .nivel-dois
    > li:not(.menu-mega-media)
    > a {

        display: flex !important;

        align-items: center !important;

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

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

        background: #ffffff !important;

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: normal !important;

        text-transform: capitalize !important;

        text-decoration: none !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       IMAGEM
       Figma 284 x 155.404
       ===================================================== */

    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    .nivel-dois
    > .menu-mega-media {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        aspect-ratio: 284 / 155.404 !important;

        height: auto !important;

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

        background: transparent !important;

        border: 0 !important;

        overflow: hidden !important;

        list-style: none !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    .nivel-dois
    > .menu-mega-media
    > img {

        display: block !important;

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

        max-width: none !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL MENU MOBILE
   NÃO CORTAR ABAJURES / + ILUMINAÇÃO
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* painel branco */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior {
        height: auto !important;
        min-height: 684px !important;
        max-height: none !important;

        overflow: visible !important;

        background: #ffffff !important;
    }


    /* UL principal */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um {

        /*
         * O JS também corrigirá o style inline.
         * Aqui deixamos o comportamento correto como fallback.
         */
        height: auto !important;
        min-height: 538px !important;
        max-height: none !important;

        bottom: auto !important;

        overflow: visible !important;

        background: #ffffff !important;
    }


    /* categoria aberta */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um
    > li.menu-mobile-expandido {

        height: auto !important;
        min-height: 298px !important;
        max-height: none !important;

        overflow: visible !important;
    }


    /* categorias fechadas */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um
    > li:not(.menu-mobile-expandido) {

        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;

        overflow: hidden !important;
    }


    /* garante os quatro itens depois de Pendentes */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um
    > li:not(.menu-mobile-expandido)
    > a {

        display: flex !important;

        align-items: center !important;

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

        padding: 0 10px !important;

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

        background: #ffffff !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um
    > li:not(.menu-mobile-expandido)
    > a
    > strong.titulo {

        display: block !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: normal !important;

        text-transform: uppercase !important;
    }


    /*
     * linhas entre:
     * Arandelas
     * Plafons
     * Abajures
     * + Iluminação
     */
    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um
    > li:not(.menu-mobile-expandido) {

        border-bottom: 1px solid #cacaca !important;
    }


    body.menu-mobile-aberto
    #cabecalho
    .menu.superior
    > ul.nivel-um
    > li:last-child {

        border-bottom: 0 !important;
    }
}

/* =========================================================
   NEWSLETTER DEFINITIVA
   DESKTOP FIGMA 166:887
   MOBILE FIGMA 166:1959
   ========================================================= */


/* =========================================================
   RESET GERAL
   ========================================================= */

#barraNewsletter {
    display: block !important;

    position: relative !important;

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

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

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

    background: #cacaca !important;
    background-color: #cacaca !important;
    background-image: none !important;

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

    overflow: hidden !important;

    box-sizing: border-box !important;
}


#barraNewsletter,
#barraNewsletter * {
    box-sizing: border-box !important;
}


/* =========================================================
   CONTAINERS NATIVOS
   ========================================================= */

#barraNewsletter > .conteiner,
#barraNewsletter > .conteiner > .row-fluid,
#barraNewsletter .span,
#barraNewsletter .componente.newsletter,
#barraNewsletter .newsletter > .interno {

    display: block !important;

    position: relative !important;

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

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

    float: none !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   INTERNO
   usaremos FLEX em vez de absolute
   ========================================================= */

#barraNewsletter
.newsletter
> .interno {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;
}


/* =========================================================
   TÍTULO NATIVO
   ========================================================= */

/* remove ícone */
#barraNewsletter
.newsletter
.titulo
> .icon-envelope-alt {

    display: none !important;
}


/*
 * Esconde o texto nativo "Newsletter"
 * mas mantém o elemento.
 */
#barraNewsletter
.newsletter
.titulo {

    position: static !important;

    display: block !important;

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

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

    float: none !important;

    color: #000000 !important;

    font-size: 0 !important;

    line-height: normal !important;

    text-align: center !important;

    text-transform: none !important;

    background: transparent !important;

    border: 0 !important;

    transform: none !important;
}


/* título correto */
#barraNewsletter
.newsletter
.titulo::after {

    content: "Assine nossa newsletter" !important;

    position: static !important;

    display: block !important;

    width: 100% !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    text-align: center !important;

    text-transform: none !important;

    white-space: nowrap !important;
}


/* =========================================================
   REMOVE TEXTO ANTIGO
   "Receba nossas ofertas por e-mail"
   ========================================================= */

#barraNewsletter
.texto-newsletter {

    display: none !important;
}


/* =========================================================
   CONTEÚDO
   ========================================================= */

#barraNewsletter
.newsletter
.interno-conteudo {

    position: static !important;

    display: block !important;

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

    float: none !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    transform: none !important;
}


/* =========================================================
   FORM
   ========================================================= */

#barraNewsletter
.newsletter
.newsletter-cadastro.input-conteiner {

    position: static !important;

    display: flex !important;

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

    float: none !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;
}


/* =========================================================
   INPUT
   ========================================================= */

#barraNewsletter
.newsletter
.newsletter-cadastro.input-conteiner
> input {

    position: static !important;

    display: block !important;

    height: 50px !important;

    margin: 0 !important;

    background: #ffffff !important;

    color: #323232 !important;

    border: 1px solid #cacaca !important;
    border-radius: 0 !important;

    outline: none !important;

    box-shadow: none !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;

    box-sizing: border-box !important;
}


#barraNewsletter
.newsletter
.newsletter-cadastro.input-conteiner
> input::placeholder {

    color: #323232 !important;

    opacity: 1 !important;
}


/* =========================================================
   BOTÃO
   ========================================================= */

#barraNewsletter
.newsletter
.newsletter-cadastro.input-conteiner
> button.newsletter-assinar {

    position: static !important;

    display: flex !important;

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

    height: 50px !important;

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

    float: none !important;

    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    color: #ffffff !important;

    font-size: 0 !important;

    text-indent: 0 !important;

    transform: none !important;

    cursor: pointer !important;
}


/* remove comportamento visual do chevron */
#barraNewsletter
.newsletter
.newsletter-cadastro.input-conteiner
> button.newsletter-assinar::before {

    position: static !important;

    display: flex !important;

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

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

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

    color: #ffffff !important;

    font-family: "Montserrat", sans-serif !important;

    line-height: 50px !important;

    text-align: center !important;

    transform: none !important;
}


#barraNewsletter
.newsletter
.newsletter-cadastro.input-conteiner
> button.newsletter-assinar::after {

    content: none !important;

    display: none !important;
}


/* =========================================================
   DESKTOP
   FIGMA 166:887

   total = 176px

   título:
   top 38px

   form:
   top 89px
   ========================================================= */

@media screen and (min-width: 1025px) {

    #barraNewsletter {
        display: block !important;

        height: 176px !important;
        min-height: 176px !important;
        max-height: 176px !important;

        background: #cacaca !important;
        background-color: #cacaca !important;
    }


    #barraNewsletter > .conteiner,
    #barraNewsletter > .conteiner > .row-fluid,
    #barraNewsletter .span,
    #barraNewsletter .componente.newsletter,
    #barraNewsletter .newsletter > .interno {

        height: 176px !important;
        min-height: 176px !important;

        background: transparent !important;
    }


    /* ---------------------------------------------
       INTERNO
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    > .interno {

        display: flex !important;

        flex-direction: column !important;

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

        padding-top: 38px !important;
    }


    /* ---------------------------------------------
       TÍTULO
       30px
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    .titulo {

        flex: 0 0 auto !important;

        margin: 0 0 15px 0 !important;
    }


    #barraNewsletter
    .newsletter
    .titulo::after {

        height: 36px !important;

        font-size: 30px !important;
        font-weight: 500 !important;

        line-height: 36px !important;
    }


    /* ---------------------------------------------
       CONTEÚDO
       730 = 557 + 6 + 167
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    .interno-conteudo {

        width: 730px !important;
        height: 50px !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner {

        display: flex !important;

        flex-direction: row !important;

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

        gap: 6px !important;

        width: 730px !important;
        height: 50px !important;
    }


    /* INPUT 557 × 50 */

    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > input {

        flex: 0 0 557px !important;

        width: 557px !important;
        min-width: 557px !important;
        max-width: 557px !important;

        height: 50px !important;

        padding: 0 19px !important;

        font-size: 16px !important;
        line-height: 50px !important;

        text-align: left !important;
    }


    /* BOTÃO 167 × 50 */

    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > button.newsletter-assinar {

        flex: 0 0 167px !important;

        width: 167px !important;
        min-width: 167px !important;
        max-width: 167px !important;

        height: 50px !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > button.newsletter-assinar::before {

        content: "VER MAIS" !important;

        font-size: 16px !important;
        font-weight: 600 !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:1959

   total = 216px

   15px laterais
   conteúdo = 330px em viewport 360
   ========================================================= */

@media screen and (max-width: 1024px) {

    /*
     * A Loja Integrada coloca hidden-phone
     * no próprio #barraNewsletter.
     */
    #barraNewsletter.hidden-phone,
    #barraNewsletter.hidden-phone.posicao-rodape,
    #barraNewsletter {

        display: block !important;

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

        width: 100% !important;

        height: 216px !important;
        min-height: 216px !important;
        max-height: 216px !important;

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

        background: #cacaca !important;
        background-color: #cacaca !important;

        overflow: hidden !important;
    }


    #barraNewsletter > .conteiner,
    #barraNewsletter > .conteiner > .row-fluid,
    #barraNewsletter .span,
    #barraNewsletter .componente.newsletter,
    #barraNewsletter .newsletter > .interno {

        width: 100% !important;

        height: 216px !important;
        min-height: 216px !important;

        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;

        background: transparent !important;
        background-color: transparent !important;
    }


    /* ---------------------------------------------
       INTERNO
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    > .interno {

        display: flex !important;

        flex-direction: column !important;

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

        padding-top: 29px !important;
    }


    /* ---------------------------------------------
       TÍTULO
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    .titulo {

        flex: 0 0 23px !important;

        width: calc(100% - 30px) !important;
        height: 23px !important;

        margin: 0 15px 16px 15px !important;
    }


    #barraNewsletter
    .newsletter
    .titulo::after {

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

        font-size: 18px !important;
        font-weight: 500 !important;

        line-height: 23px !important;
    }


    /* ---------------------------------------------
       FORM
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    .interno-conteudo {

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        height: 110px !important;

        margin: 0 auto !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner {

        display: flex !important;

        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        gap: 10px !important;

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

        margin: 0 !important;
    }


    /* ---------------------------------------------
       INPUT
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > input {

        flex: 0 0 50px !important;

        display: block !important;

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

        height: 50px !important;

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

        font-size: 14px !important;
        line-height: 50px !important;

        text-align: center !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > input::placeholder {

        text-align: center !important;
    }


    /* ---------------------------------------------
       BOTÃO
       --------------------------------------------- */

    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > button.newsletter-assinar {

        flex: 0 0 50px !important;

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

        height: 50px !important;

        margin: 0 !important;

        background: #000000 !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > button.newsletter-assinar::before {

        content: "ENVIAR" !important;

        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* =========================================================
   FOOTER FIGMA
   DESKTOP 166:743
   MOBILE 166:3291
   ========================================================= */


/* =========================================================
   RESET
   ========================================================= */

#rodape,
#rodape *,
#sobreLoja,
#sobreLoja * {
    box-sizing: border-box !important;
}


#rodape,
#sobreLoja {
    font-family: "Montserrat", sans-serif !important;
}


/* =========================================================
   REMOVE ESTRUTURA ANTIGA DA FAIXA INSTITUCIONAL
   somente depois que o JS terminou
   ========================================================= */

#rodape.footer-figma-pronto
.institucional
> .conteiner
> .row-fluid {

    display: none !important;
}


/* =========================================================
   FAIXA DOS LINKS
   ========================================================= */

#rodape .institucional {

    position: relative !important;

    display: block !important;

    width: 100% !important;

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

    background: rgba(202, 202, 202, 0.35) !important;
    background-color: rgba(202, 202, 202, 0.35) !important;
    background-image: none !important;

    border: 0 !important;

    box-shadow: none !important;
}


#rodape
.institucional
> .conteiner {

    position: relative !important;

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

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

    background: transparent !important;
}


/* =========================================================
   NOVO NAV
   ========================================================= */

#footerFigmaNav {

    position: relative !important;

    display: flex !important;

    width: 100% !important;

    margin: 0 auto !important;

    font-family: "Montserrat", sans-serif !important;

    background: transparent !important;
}


#footerFigmaNav
.footer-figma-links {

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


#footerFigmaNav
.footer-figma-links
a {

    display: block !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-weight: 400 !important;

    text-decoration: none !important;

    text-transform: uppercase !important;

    background: transparent !important;
}


#footerFigmaNav
.footer-figma-links
a:hover {

    color: #000000 !important;

    text-decoration: underline !important;
}


/* =========================================================
   SIGA-NOS
   ========================================================= */

.footer-figma-social {

    display: flex !important;

    align-items: center !important;

    font-family: "Montserrat", sans-serif !important;
}


.footer-figma-social-titulo {

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-weight: 500 !important;

    text-transform: lowercase !important;
}


.footer-figma-social-icones {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


.footer-figma-instagram {

    display: flex !important;

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

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

    color: #000000 !important;

    text-decoration: none !important;

    background: transparent !important;
}


.footer-figma-instagram
.icon-instagram {

    display: block !important;

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

    color: #000000 !important;

    background: transparent !important;
}


.footer-figma-instagram
.icon-instagram::before {

    color: #000000 !important;
}


/* =========================================================
   SOBRE A LOJA
   ========================================================= */

#sobreLoja {

    position: relative !important;

    display: block !important;

    width: 100% !important;

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

    background: #ffffff !important;

    border: 0 !important;
}


#sobreLoja > .conteiner {

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

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


#sobreLoja
> .conteiner
> .row-fluid {

    display: flex !important;

    flex-direction: column !important;

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

    width: 100% !important;

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


#sobreLoja
.sobreLogo {

    display: block !important;

    float: none !important;

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


#sobreLoja
.sobreLogo
.logo {

    display: block !important;

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

    border: 0 !important;
}


#sobreLoja
.sobreLogo
.logo
a {

    display: block !important;

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


#sobreLoja
.sobreLogo
.logo
img {

    display: block !important;

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

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

    margin: 0 !important;

    object-fit: contain !important;
}


#sobreLoja
.sobreLoja.span6 {

    display: block !important;

    float: none !important;

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

    color: #000000 !important;

    text-align: center !important;
}


#sobreLoja
.sobreLoja.span6
p {

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-weight: 500 !important;

    text-align: center !important;
}


#sobreLoja
.sobreFb {

    display: none !important;
}


/* =========================================================
   PAGAMENTOS E SELOS
   ========================================================= */

#rodape
.pagamento-selos {

    position: relative !important;

    display: block !important;

    width: 100% !important;

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

    background: rgba(202, 202, 202, 0.20) !important;
    background-color: rgba(202, 202, 202, 0.20) !important;
    background-image: none !important;

    border: 0 !important;
}


#rodape
.pagamento-selos
> .conteiner {

    position: relative !important;

    margin: 0 auto !important;

    padding: 0 !important;

    background: transparent !important;
}


#rodape
.pagamento-selos
.row-fluid {

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


#rodape
.pagamento-selos
.pagamento,

#rodape
.pagamento-selos
.selos {

    float: none !important;

    margin-left: 0 !important;

    background: transparent !important;
}


#rodape
.pagamento-selos
.titulo {

    display: block !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    text-align: left !important;
}


/* =========================================================
   CARTÕES
   ========================================================= */

#rodape
.bandeiras-pagamento {

    display: flex !important;

    align-items: center !important;

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

    list-style: none !important;
}


#rodape
.bandeiras-pagamento
> li {

    display: flex !important;

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

    float: none !important;

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


#rodape
.bandeiras-pagamento
.icone-pagamento {

    display: block !important;

    margin: 0 !important;
}


/* =========================================================
   BOLETO / PIX
   ========================================================= */

#rodape
.gateways-rodape {

    display: flex !important;

    align-items: center !important;

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

    list-style: none !important;
}


#rodape
.gateways-rodape
> li {

    display: flex !important;

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

    float: none !important;

    width: auto !important;

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


/* =========================================================
   SELOS
   ========================================================= */

#rodape
.selos
> ul {

    display: flex !important;

    flex-wrap: wrap !important;

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

    list-style: none !important;
}


#rodape
.selos
> ul
> li {

    float: none !important;

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

    list-style: none !important;
}


#rodape
.selos
> ul
> li:first-child {

    flex: 0 0 100% !important;

    width: 100% !important;
}


#rodape
.selos
> ul
> li:first-child
> div {

    display: flex !important;

    flex-wrap: nowrap !important;

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

    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   COPYRIGHT
   elemento imediatamente depois de .pagamento-selos
   ========================================================= */

#rodape
.pagamento-selos
+ div {

    position: relative !important;

    display: block !important;

    width: 100% !important;

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

    background: rgba(202, 202, 202, 0.10) !important;
    background-color: rgba(202, 202, 202, 0.10) !important;

    border: 0 !important;

    z-index: auto !important;
}


#rodape
.pagamento-selos
+ div
.conteiner,

#rodape
.pagamento-selos
+ div
.row-fluid {

    width: 100% !important;

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


#rodape
.assinatura {

    display: flex !important;

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

    float: none !important;

    width: 100% !important;

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


#rodape
.assinatura
.lista-redes {

    display: none !important;
}


#rodape
.assinatura
p {

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-size: 14px !important;
    font-weight: 400 !important;

    text-align: center !important;
}


#rodape
.assinatura-rodape {

    display: none !important;
}


/* =========================================================
   DESKTOP
   FIGMA 166:743
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* =====================================================
       LINKS / SOCIAL
       1920 × 80
       ===================================================== */

    #rodape
    .institucional {

        height: 80px !important;
        min-height: 80px !important;
    }


    #rodape
    .institucional
    > .conteiner {

        height: 80px !important;

        padding: 0 120px !important;
    }


    #footerFigmaNav {

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

        height: 80px !important;

        max-width: 1680px !important;
    }


    #footerFigmaNav
    .footer-figma-links {

        display: flex !important;

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

        gap: 42px !important;
    }


    #footerFigmaNav
    .footer-figma-links
    a {

        font-size: 16px !important;
        line-height: 19px !important;

        white-space: nowrap !important;
    }


    #footerFigmaNav
    .footer-figma-social {

        position: absolute !important;

        right: 0 !important;
        top: 0 !important;

        flex-direction: row !important;

        gap: 12px !important;

        height: 80px !important;
    }


    .footer-figma-social-titulo {

        font-size: 20px !important;
        line-height: 24px !important;
    }


    .footer-figma-social-icones {

        width: 36px !important;
        height: 36px !important;
    }


    .footer-figma-instagram {

        width: 36px !important;
        height: 36px !important;
    }


    .footer-figma-instagram
    .icon-instagram,

    .footer-figma-instagram
    .icon-instagram::before {

        font-size: 32px !important;
        line-height: 36px !important;
    }


    /* =====================================================
       SOBRE
       170px
       ===================================================== */

    #sobreLoja {

        height: 170px !important;
        min-height: 170px !important;
    }


    #sobreLoja
    > .conteiner
    > .row-fluid {

        height: 170px !important;

        padding-top: 30px !important;
    }


    #sobreLoja
    .sobreLogo {

        width: 255px !important;
        height: 51px !important;
    }


    #sobreLoja
    .sobreLogo
    .logo {

        width: 255px !important;
        height: 51px !important;
    }


    #sobreLoja
    .sobreLoja.span6 {

        width: 1084px !important;
        max-width: calc(100% - 240px) !important;

        margin-top: 18px !important;
    }


    #sobreLoja
    .sobreLoja.span6
    p {

        font-size: 16px !important;
        line-height: 20px !important;
    }


    /* =====================================================
       PAGAMENTOS / SELOS
       196px
       Figma começa em x405
       largura útil ≈1110
       ===================================================== */

    #rodape
    .pagamento-selos {

        height: 196px !important;
        min-height: 196px !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

        width: 1110px !important;
        max-width: calc(100% - 80px) !important;

        height: 196px !important;
    }


    #rodape
    .pagamento-selos
    .row-fluid {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 40px !important;

        width: 100% !important;
        height: 196px !important;
    }


    #rodape
    .pagamento-selos
    .pagamento,

    #rodape
    .pagamento-selos
    .selos {

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

        padding-top: 26px !important;
    }


    #rodape
    .pagamento-selos
    .titulo {

        height: 39px !important;

        font-size: 16px !important;
        line-height: 39px !important;
    }


    /* cartões */

    #rodape
    .bandeiras-pagamento {

        gap: 7px !important;

        height: 45px !important;

        margin-top: 4px !important;
    }


    #rodape
    .bandeiras-pagamento
    > li {

        width: 45px !important;
        height: 45px !important;
    }


    #rodape
    .bandeiras-pagamento
    .icone-pagamento {

        transform: scale(1.12) !important;
        transform-origin: center !important;
    }


    /* boleto / pix */

    #rodape
    .gateways-rodape {

        gap: 12px !important;

        height: 49px !important;

        margin-top: 7px !important;
    }


    #rodape
    .logo-rodape-boleto-Pagali {

        width: 48px !important;
        height: 48px !important;

        object-fit: contain !important;
    }


    #rodape
    .logo-rodape-pix-proxy-pagali-v2 {

        width: 62px !important;
        height: 40px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       SELOS DESKTOP
       ===================================================== */

    #rodape
    .selos
    > ul {

        width: 360px !important;
    }


    #rodape
    .selos
    > ul
    > li:first-child {

        height: 62px !important;

        margin-top: -11px !important;
    }


    #rodape
    .selos
    > ul
    > li:first-child
    > div {

        gap: 7px !important;

        width: 355px !important;
    }


    #rodape
    #ra-widget-verified {

        width: 123px !important;
        height: 70px !important;
    }


    #rodape
    .selos
    a[href*="consumidor"]
    img {

        width: 123px !important;
        height: 33px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    a[href*="procon"]
    img {

        width: 88px !important;
        height: 50px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2) {

        margin-top: 1px !important;
        margin-left: 3px !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(3) {

        margin-top: 1px !important;
        margin-left: 25px !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2)
    img,

    #rodape
    .selos
    > ul
    > li:nth-child(3)
    img {

        width: 62px !important;
        height: 35px !important;

        object-fit: contain !important;
    }


    /* copyright */

    #rodape
    .pagamento-selos
    + div,

    #rodape
    .pagamento-selos
    + div
    .conteiner,

    #rodape
    .pagamento-selos
    + div
    .row-fluid,

    #rodape
    .assinatura {

        height: 50px !important;
        min-height: 50px !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:3291
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* =====================================================
       LINKS + INSTAGRAM
       360 × 282
       ===================================================== */

    #rodape
    .institucional {

        display: block !important;

        height: 282px !important;
        min-height: 282px !important;

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


    #rodape
    .institucional
    > .conteiner {

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

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


    #footerFigmaNav {

        flex-direction: column !important;

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

        height: 282px !important;

        padding-top: 29px !important;
    }


    #footerFigmaNav
    .footer-figma-links {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        width: 100% !important;
        height: 120px !important;
    }


    #footerFigmaNav
    .footer-figma-links
    a {

        width: 100% !important;

        font-size: 14px !important;
        line-height: 30px !important;

        text-align: center !important;
    }


    #footerFigmaNav
    .footer-figma-social {

        position: static !important;

        flex-direction: column !important;

        gap: 0 !important;

        width: 100% !important;

        margin-top: 20px !important;
    }


    .footer-figma-social-titulo {

        height: 20px !important;

        font-size: 16px !important;
        line-height: 20px !important;

        text-align: center !important;
    }


    .footer-figma-social-icones {

        width: 58px !important;
        height: 58px !important;

        margin-top: 8px !important;
    }


    .footer-figma-instagram {

        width: 58px !important;
        height: 58px !important;
    }


    .footer-figma-instagram
    .icon-instagram,

    .footer-figma-instagram
    .icon-instagram::before {

        font-size: 52px !important;
        line-height: 58px !important;
    }


    /* =====================================================
       SOBRE
       FIGMA:
       logo 200x40
       texto 328px / 14px
       ===================================================== */

    #sobreLoja {

        height: 187px !important;
        min-height: 187px !important;
    }


    #sobreLoja
    > .conteiner
    > .row-fluid {

        height: 187px !important;

        padding-top: 20px !important;
    }


    #sobreLoja
    .sobreLogo {

        width: 200px !important;
        height: 40px !important;
    }


    #sobreLoja
    .sobreLogo
    .logo {

        width: 200px !important;
        height: 40px !important;
    }


    #sobreLoja
    .sobreLoja.span6 {

        width: calc(100% - 30px) !important;
        max-width: 328px !important;

        margin-top: 18px !important;
    }


    #sobreLoja
    .sobreLoja.span6
    p {

        font-size: 14px !important;
        line-height: 17px !important;
    }


    /* =====================================================
       PAGAMENTOS / SELOS
       404px
       ===================================================== */

    #rodape
    .pagamento-selos {

        height: 404px !important;
        min-height: 404px !important;

        padding-top: 34px !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

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

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


    #rodape
    .pagamento-selos
    .row-fluid {

        display: block !important;

        width: 100% !important;
        height: 370px !important;
    }


    /* pagamento ocupa os primeiros 202px */

    #rodape
    .pagamento-selos
    .pagamento {

        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        height: 202px !important;

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


    #rodape
    .pagamento-selos
    .titulo {

        height: 39px !important;

        font-size: 16px !important;
        line-height: 39px !important;
    }


    /* cartões */

    #rodape
    .bandeiras-pagamento {

        flex-wrap: nowrap !important;

        gap: 8px !important;

        width: 323px !important;
        height: 58px !important;

        margin: 1px 0 0 5px !important;
    }


    #rodape
    .bandeiras-pagamento
    > li {

        flex: 0 0 58px !important;

        width: 58px !important;
        height: 58px !important;
    }


    #rodape
    .bandeiras-pagamento
    .icone-pagamento {

        transform: scale(1.4) !important;
        transform-origin: center !important;
    }


    /* boleto / pix */

    #rodape
    .gateways-rodape {

        gap: 10px !important;

        width: 170px !important;
        height: 61px !important;

        margin-top: 8px !important;
    }


    #rodape
    .logo-rodape-boleto-Pagali {

        width: 61px !important;
        height: 61px !important;

        object-fit: contain !important;
    }


    #rodape
    .logo-rodape-pix-proxy-pagali-v2 {

        width: 80px !important;
        height: 48px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       SELOS MOBILE
       ===================================================== */

    #rodape
    .pagamento-selos
    .selos {

        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        height: 168px !important;

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


    #rodape
    .selos
    > ul {

        position: relative !important;

        width: 330px !important;
        height: 129px !important;
    }


    #rodape
    .selos
    > ul
    > li:first-child {

        height: 78px !important;

        margin-top: -7px !important;
    }


    #rodape
    .selos
    > ul
    > li:first-child
    > div {

        gap: 7px !important;

        width: 330px !important;
    }


    #rodape
    #ra-widget-verified {

        width: 113px !important;
        height: 64px !important;
    }


    #rodape
    .selos
    a[href*="consumidor"]
    img {

        width: 113px !important;
        height: 31px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    a[href*="procon"]
    img {

        width: 81px !important;
        height: 46px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2) {

        margin-left: 3px !important;
        margin-top: -5px !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(3) {

        margin-left: 22px !important;
        margin-top: -5px !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2)
    img,

    #rodape
    .selos
    > ul
    > li:nth-child(3)
    img {

        width: 57px !important;
        height: 32px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       COPYRIGHT
       44px
       ===================================================== */

    #rodape
    .pagamento-selos
    + div,

    #rodape
    .pagamento-selos
    + div
    .conteiner,

    #rodape
    .pagamento-selos
    + div
    .row-fluid,

    #rodape
    .assinatura {

        height: 44px !important;
        min-height: 44px !important;
    }


    #rodape
    .assinatura
    p {

        width: 100% !important;

        font-size: 14px !important;
        line-height: 44px !important;

        white-space: nowrap !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL FOOTER DESKTOP
   FIGMA 166:743
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* =====================================================
       SOBRE A LOJA
       corrige logo + distância do texto
       ===================================================== */

    #sobreLoja {
        position: relative !important;

        width: 100% !important;
        height: 170px !important;
        min-height: 170px !important;

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

        background: #ffffff !important;

        overflow: hidden !important;
    }


    #sobreLoja > .conteiner {
        position: relative !important;

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

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


    #sobreLoja
    > .conteiner
    > .row-fluid {

        position: relative !important;

        display: flex !important;
        flex-direction: column !important;

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

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

        margin: 0 !important;

        /*
         * Figma:
         * 30px da borda superior até o logo
         */
        padding: 30px 0 0 0 !important;

        transform: none !important;
    }


    /* =====================================================
       LOGO
       255 × 51
       ===================================================== */

    #sobreLoja
    .sobreLogo {

        position: static !important;

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

        display: block !important;

        flex: 0 0 51px !important;

        width: 255px !important;
        height: 51px !important;

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

        float: none !important;

        transform: none !important;

        line-height: 0 !important;
    }


    #sobreLoja
    .sobreLogo
    .logo {

        position: static !important;

        display: block !important;

        width: 255px !important;
        height: 51px !important;

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

        line-height: 0 !important;

        transform: none !important;
    }


    #sobreLoja
    .sobreLogo
    .logo
    a {

        position: static !important;

        display: block !important;

        width: 255px !important;
        height: 51px !important;

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

        line-height: 0 !important;
    }


    #sobreLoja
    .sobreLogo
    .logo
    img {

        position: static !important;

        display: block !important;

        width: 255px !important;
        height: 51px !important;

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

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

        object-fit: contain !important;

        transform: none !important;
    }


    /* =====================================================
       TEXTO SOBRE A LOJA

       Figma:
       logo termina em 6648
       texto começa em aproximadamente 6668
       gap ≈ 20px
       ===================================================== */

    #sobreLoja
    .sobreLoja.span6 {

        position: static !important;

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

        display: block !important;

        flex: 0 0 auto !important;

        width: 1084px !important;
        max-width: calc(100% - 80px) !important;

        height: auto !important;

        /*
         * ESSA É A CORREÇÃO PRINCIPAL DO TEXTO
         */
        margin: 20px 0 0 0 !important;

        padding: 0 !important;

        float: none !important;

        transform: none !important;

        text-align: center !important;
    }


    #sobreLoja
    .sobreLoja.span6
    p {

        position: static !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;

        line-height: 20px !important;

        text-align: center !important;

        transform: none !important;
    }


    #sobreLoja
    .sobreFb {

        display: none !important;
    }


    /* =====================================================
       PAGAMENTOS + SELOS
       FIGMA 166:743

       Pague com:
       x ≈ 405

       Selos:
       x ≈ 976
       ===================================================== */

    #rodape
    .pagamento-selos {

        position: relative !important;

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

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

        background: rgba(202, 202, 202, 0.20) !important;

        /*
         * impede os selos de escapar
         * para baixo do copyright
         */
        overflow: hidden !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

        position: relative !important;

        width: 1110px !important;
        max-width: calc(100% - 80px) !important;

        height: 196px !important;

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

        transform: none !important;
    }


    /*
     * Tira o grid anterior.
     * Aqui FLEX é mais seguro porque a Loja Integrada
     * trabalha com span4/bootstrap.
     */
    #rodape
    .pagamento-selos
    .row-fluid {

        position: relative !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

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

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

        overflow: visible !important;

        transform: none !important;
    }


    /* =====================================================
       PAGAMENTO — ESQUERDA
       ===================================================== */

    #rodape
    .pagamento-selos
    .pagamento {

        position: relative !important;

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

        display: block !important;

        /*
         * posição da primeira coluna do Figma
         */
        flex: 0 0 516px !important;

        width: 516px !important;
        min-width: 516px !important;
        max-width: 516px !important;

        height: 196px !important;

        /*
         * 516 + 55 = início dos selos
         */
        margin: 0 55px 0 0 !important;

        padding: 26px 0 0 0 !important;

        float: none !important;

        transform: none !important;

        background: transparent !important;
    }


    /* =====================================================
       SELOS — DIREITA
       ===================================================== */

    #rodape
    .pagamento-selos
    .selos {

        position: relative !important;

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

        display: block !important;

        /*
         * segunda coluna do Figma
         */
        flex: 0 0 531px !important;

        width: 531px !important;
        min-width: 531px !important;
        max-width: 531px !important;

        height: 196px !important;

        margin: 0 !important;

        padding: 26px 0 0 0 !important;

        float: none !important;

        clear: none !important;

        transform: none !important;

        background: transparent !important;

        overflow: visible !important;
    }


    /* =====================================================
       TÍTULOS
       ===================================================== */

    #rodape
    .pagamento-selos
    .pagamento
    > .titulo,

    #rodape
    .pagamento-selos
    .selos
    > .titulo {

        position: static !important;

        display: block !important;

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

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 39px !important;

        text-align: left !important;

        transform: none !important;
    }


    /* =====================================================
       PAGAMENTO - CONTEÚDO ALINHADO À ESQUERDA
       ===================================================== */

    #rodape
    .bandeiras-pagamento {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 7px !important;

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


    #rodape
    .gateways-rodape {

        display: flex !important;

        flex-direction: row !important;

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

        gap: 12px !important;

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


    /* =====================================================
       SELOS
       ===================================================== */

    #rodape
    .pagamento-selos
    .selos
    > ul {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 360px !important;
        height: auto !important;

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

        transform: none !important;
    }


    /*
     * O HTML possui style inline:
     * justify-content:center
     * gap:35px
     * flex-wrap:wrap
     *
     * portanto precisamos sobrescrevê-lo.
     */
    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:first-child
    > div {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 7px !important;

        width: 355px !important;
        max-width: none !important;

        margin: -11px 0 0 0 !important;
        padding: 0 !important;

        transform: none !important;
    }


    /* Site Seguro + Google embaixo */

    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:nth-child(2) {

        position: static !important;

        margin: 1px 0 0 3px !important;

        float: none !important;

        transform: none !important;
    }


    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:nth-child(3) {

        position: static !important;

        margin: 1px 0 0 25px !important;

        float: none !important;

        transform: none !important;
    }
}


/* =========================================================
   NOTEBOOK
   evita overflow entre 1025 e 1599
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    #rodape
    .pagamento-selos
    > .conteiner {

        width: calc(100% - 80px) !important;
    }


    #rodape
    .pagamento-selos
    .pagamento {

        flex: 0 0 calc(50% - 28px) !important;

        width: calc(50% - 28px) !important;
        min-width: 0 !important;
        max-width: none !important;

        margin-right: 56px !important;
    }


    #rodape
    .pagamento-selos
    .selos {

        flex: 0 0 calc(50% - 28px) !important;

        width: calc(50% - 28px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* =========================================================
   FOOTER - CORREÇÃO DEFINITIVA
   DESKTOP + MOBILE
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* -----------------------------------------------------
       PAGAMENTOS / SELOS
       não permitir que o conteúdo seja cortado
       ----------------------------------------------------- */

    #rodape .pagamento-selos {
        position: relative !important;

        width: 100% !important;

        height: 220px !important;
        min-height: 220px !important;
        max-height: none !important;

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

        overflow: visible !important;

        background: rgba(202, 202, 202, 0.20) !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

        position: relative !important;

        width: 1110px !important;
        max-width: calc(100% - 80px) !important;

        height: 220px !important;
        min-height: 220px !important;

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

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    .row-fluid {

        position: relative !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 55px !important;

        width: 100% !important;
        height: 220px !important;
        min-height: 220px !important;

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

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       PAGUE COM
       ----------------------------------------------------- */

    #rodape
    .pagamento-selos
    .pagamento {

        position: static !important;

        display: block !important;

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

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

        margin: 0 !important;

        padding: 28px 0 0 0 !important;

        float: none !important;

        transform: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       SELOS
       ----------------------------------------------------- */

    #rodape
    .pagamento-selos
    .selos {

        position: static !important;

        display: block !important;

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

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

        margin: 0 !important;

        padding: 28px 0 0 0 !important;

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

        transform: none !important;

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    .pagamento
    > .titulo,

    #rodape
    .pagamento-selos
    .selos
    > .titulo {

        position: static !important;

        display: block !important;

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

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 32px !important;

        text-align: left !important;
    }


    /* -----------------------------------------------------
       LINHA PRINCIPAL DOS SELOS
       ----------------------------------------------------- */

    #rodape
    .pagamento-selos
    .selos
    > ul {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

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

        height: auto !important;

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

        overflow: visible !important;

        list-style: none !important;
    }


    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:first-child {

        display: block !important;

        flex: 0 0 100% !important;

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

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


    /*
     * O HTML possui style inline com:
     * justify-content:center;
     * gap:35px;
     * flex-wrap:wrap;
     *
     * sobrescrevemos aqui.
     */

    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:first-child
    > div {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 14px !important;

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

        height: 82px !important;

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

        overflow: visible !important;

        transform: none !important;
    }


    /* Reclame Aqui */

    #rodape #ra-widget-verified {

        width: 110px !important;
        height: 82px !important;

        margin: 0 !important;

        overflow: hidden !important;
    }


    /* consumidor.gov */

    #rodape
    .selos
    a[href*="consumidor"]
    img {

        display: block !important;

        width: 115px !important;
        height: 55px !important;

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

        object-fit: contain !important;
    }


    /* PROCON */

    #rodape
    .selos
    a[href*="procon"]
    img {

        display: block !important;

        width: 80px !important;
        height: 62px !important;

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

        object-fit: contain !important;
    }


    /* Site protegido */

    #rodape
    .selos
    > ul
    > li:nth-child(2) {

        position: static !important;

        width: auto !important;
        height: 36px !important;

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

        float: none !important;
    }


    /* Google Safe Browsing */

    #rodape
    .selos
    > ul
    > li:nth-child(3) {

        position: static !important;

        width: auto !important;
        height: 36px !important;

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

        float: none !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2)
    img,

    #rodape
    .selos
    > ul
    > li:nth-child(3)
    img {

        display: block !important;

        width: auto !important;
        height: 34px !important;

        max-height: 34px !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* =====================================================
       PRIMEIRO: REMOVE COMPLETAMENTE O FOOTER NATIVO

       Isso remove:
       CATEGORIAS
       CONTEÚDO
       telefone
       whatsapp
       etc.
       ===================================================== */

    #rodape.footer-figma-pronto
    > .institucional
    > .conteiner
    > .row-fluid {

        display: none !important;

        visibility: hidden !important;

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

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

        overflow: hidden !important;
    }


    /* =====================================================
       NOVO MENU DO FOOTER
       ===================================================== */

    #rodape
    > .institucional {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 282px !important;

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

        overflow: visible !important;
    }


    #rodape
    > .institucional
    > .conteiner {

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 282px !important;

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

        overflow: visible !important;
    }


    #footerFigmaNav {

        position: relative !important;

        display: flex !important;

        flex-direction: column !important;

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

        width: 100% !important;

        height: auto !important;
        min-height: 282px !important;

        margin: 0 !important;

        padding: 28px 0 24px 0 !important;

        overflow: visible !important;
    }


    #footerFigmaNav
    .footer-figma-links {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 0 !important;

        width: 100% !important;

        height: auto !important;

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


    #footerFigmaNav
    .footer-figma-links
    a {

        display: block !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 32px !important;

        text-align: center !important;

        text-transform: uppercase !important;

        opacity: 1 !important;
    }


    #footerFigmaNav
    .footer-figma-social {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;

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

        gap: 12px !important;

        width: 100% !important;

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


    .footer-figma-social-titulo {

        margin: 0 !important;

        color: #000000 !important;

        font-size: 16px !important;
        font-weight: 500 !important;

        line-height: 36px !important;
    }


    .footer-figma-instagram {

        display: flex !important;

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

        width: 36px !important;
        height: 36px !important;

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


    .footer-figma-instagram
    .icon-instagram,

    .footer-figma-instagram
    .icon-instagram::before {

        color: #000000 !important;

        font-size: 32px !important;
        line-height: 36px !important;
    }


    /* =====================================================
       SOBRE A LOJA

       IMPORTANTE:
       nada de height fixo aqui
       ===================================================== */

    #sobreLoja {

        position: relative !important;

        display: block !important;

        clear: both !important;

        width: 100% !important;

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

        margin: 0 !important;

        padding: 26px 15px 30px 15px !important;

        background: #ffffff !important;

        overflow: visible !important;

        z-index: auto !important;
    }


    #sobreLoja
    > .conteiner {

        position: static !important;

        width: 100% !important;

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

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


    #sobreLoja
    > .conteiner
    > .row-fluid {

        position: static !important;

        display: flex !important;

        flex-direction: column !important;

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

        width: 100% !important;

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

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

        overflow: visible !important;

        transform: none !important;
    }


    /* logo */

    #sobreLoja
    .sobreLogo {

        position: static !important;

        display: block !important;

        flex: none !important;

        width: 200px !important;
        height: 40px !important;

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

        float: none !important;

        transform: none !important;
    }


    #sobreLoja
    .sobreLogo
    .logo,

    #sobreLoja
    .sobreLogo
    .logo
    a,

    #sobreLoja
    .sobreLogo
    .logo
    img {

        display: block !important;

        width: 200px !important;
        height: 40px !important;

        max-width: 200px !important;
        max-height: 40px !important;

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

        object-fit: contain !important;
    }


    /* texto */

    #sobreLoja
    .sobreLoja.span6 {

        position: static !important;

        display: block !important;

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

        height: auto !important;

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

        float: none !important;

        transform: none !important;

        text-align: center !important;
    }


    #sobreLoja
    .sobreLoja.span6
    p {

        display: block !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 20px !important;

        text-align: center !important;

        opacity: 1 !important;
    }


    #sobreLoja
    .sobreFb {

        display: none !important;
    }


    /* =====================================================
       PAGAMENTOS + SELOS

       sem alturas fixas
       ===================================================== */

    #rodape
    .pagamento-selos {

        position: relative !important;

        display: block !important;

        clear: both !important;

        width: 100% !important;

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

        margin: 0 !important;

        padding: 30px 15px 32px 15px !important;

        overflow: visible !important;

        background: rgba(202, 202, 202, 0.20) !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

        position: static !important;

        width: 100% !important;

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

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

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    .row-fluid {

        position: static !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 34px !important;

        width: 100% !important;

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

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

        overflow: visible !important;
    }


    /* =====================================================
       PAGUE COM
       ===================================================== */

    #rodape
    .pagamento-selos
    .pagamento {

        position: static !important;

        display: block !important;

        flex: none !important;

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

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

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

        float: none !important;

        transform: none !important;

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    .titulo {

        position: static !important;

        display: block !important;

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

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 22px !important;

        text-align: left !important;

        opacity: 1 !important;
    }


    /* cartões */

    #rodape
    .bandeiras-pagamento {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 8px !important;

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

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

        overflow: visible !important;
    }


    #rodape
    .bandeiras-pagamento
    > li {

        flex: 0 0 50px !important;

        width: 50px !important;
        height: 50px !important;

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

        float: none !important;
    }


    #rodape
    .bandeiras-pagamento
    .icone-pagamento {

        transform: scale(1.2) !important;
        transform-origin: center !important;
    }


    /* boleto + pix */

    #rodape
    .gateways-rodape {

        display: flex !important;

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

        gap: 14px !important;

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

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


    #rodape
    .logo-rodape-boleto-Pagali {

        width: 58px !important;
        height: 58px !important;

        object-fit: contain !important;
    }


    #rodape
    .logo-rodape-pix-proxy-pagali-v2 {

        width: 80px !important;
        height: 48px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       SELOS
       ===================================================== */

    #rodape
    .pagamento-selos
    .selos {

        position: static !important;

        display: block !important;

        flex: none !important;

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

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

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

        float: none !important;

        transform: none !important;

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    .selos
    > ul {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

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

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

        list-style: none !important;

        overflow: visible !important;
    }


    /* primeira linha dos três selos */

    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:first-child {

        display: block !important;

        flex: 0 0 100% !important;

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

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


    #rodape
    .pagamento-selos
    .selos
    > ul
    > li:first-child
    > div {

        position: static !important;

        display: grid !important;

        grid-template-columns:
            105px
            105px
            80px !important;

        column-gap: 10px !important;

        align-items: center !important;
        justify-content: start !important;

        width: 310px !important;
        max-width: 310px !important;
        height: 86px !important;

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

        transform: none !important;

        overflow: visible !important;
    }


    #rodape #ra-widget-verified {

        width: 105px !important;
        height: 82px !important;

        margin: 0 !important;
    }


    #rodape
    .selos
    a[href*="consumidor"]
    img {

        display: block !important;

        width: 105px !important;
        height: 60px !important;

        max-width: 105px !important;
        max-height: 60px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    a[href*="procon"]
    img {

        display: block !important;

        width: 80px !important;
        height: 64px !important;

        max-width: 80px !important;
        max-height: 64px !important;

        object-fit: contain !important;
    }


    /* segunda linha */

    #rodape
    .selos
    > ul
    > li:nth-child(2),

    #rodape
    .selos
    > ul
    > li:nth-child(3) {

        position: static !important;

        display: block !important;

        width: auto !important;
        height: 40px !important;

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

        float: none !important;

        transform: none !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2)
    img,

    #rodape
    .selos
    > ul
    > li:nth-child(3)
    img {

        display: block !important;

        width: auto !important;
        height: 36px !important;

        max-height: 36px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       COPYRIGHT
       ===================================================== */

    #rodape
    .pagamento-selos
    + div {

        position: relative !important;

        clear: both !important;

        width: 100% !important;

        height: auto !important;
        min-height: 44px !important;

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

        overflow: hidden !important;

        background: rgba(202, 202, 202, 0.10) !important;
    }


    #rodape
    .assinatura {

        display: flex !important;

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

        width: 100% !important;

        height: auto !important;
        min-height: 44px !important;

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

        overflow: hidden !important;
    }


    #rodape
    .assinatura
    .lista-redes,

    #rodape
    .assinatura-rodape {

        display: none !important;
    }


    #rodape
    .assinatura
    p {

        width: 100% !important;

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

        color: #000000 !important;

        font-size: 12px !important;
        line-height: 16px !important;

        text-align: center !important;

        white-space: normal !important;

        overflow-wrap: anywhere !important;
    }
}

/* =========================================================
   FOOTER FIGMA - OVERRIDE DEFINITIVO
   MOBILE 166:3961
   DESKTOP 166:743
   ========================================================= */


/* =========================================================
   REMOVE O FOOTER NATIVO DA LOJA INTEGRADA
   IMPORTANTE:
   NÃO depende mais de .footer-figma-pronto
   ========================================================= */

#rodape
> .institucional
> .conteiner
> .row-fluid {

    display: none !important;
    visibility: hidden !important;

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

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

    overflow: hidden !important;
}


/* =========================================================
   FOOTER FIGMA NAV
   ========================================================= */

#rodape
> .institucional {

    position: relative !important;

    display: block !important;

    width: 100% !important;

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

    background: rgba(202, 202, 202, 0.35) !important;

    border: 0 !important;

    overflow: visible !important;
}


#rodape
> .institucional
> .conteiner {

    position: relative !important;

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

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

    overflow: visible !important;
}


#footerFigmaNav {

    position: relative !important;

    display: flex !important;

    width: 100% !important;

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

    box-sizing: border-box !important;
}


#footerFigmaNav
.footer-figma-links {

    display: flex !important;

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


#footerFigmaNav
.footer-figma-links
a {

    display: block !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-weight: 400 !important;

    text-decoration: none !important;
    text-transform: uppercase !important;

    background: transparent !important;
}


#footerFigmaNav
.footer-figma-social {

    display: flex !important;

    align-items: center !important;
}


#footerFigmaNav
.footer-figma-social-titulo {

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;

    font-weight: 500 !important;

    text-transform: lowercase !important;
}


#footerFigmaNav
.footer-figma-instagram {

    display: flex !important;

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

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

    color: #000000 !important;

    background: transparent !important;

    text-decoration: none !important;
}


#footerFigmaNav
.footer-figma-instagram
.icon-instagram,

#footerFigmaNav
.footer-figma-instagram
.icon-instagram::before {

    color: #000000 !important;

    background: transparent !important;
}


/* =========================================================
   DESKTOP
   FIGMA 166:743
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* =====================================================
       FAIXA LINKS
       1920 x 80
       ===================================================== */

    #rodape
    > .institucional {

        height: 80px !important;
        min-height: 80px !important;
        max-height: 80px !important;
    }


    #rodape
    > .institucional
    > .conteiner {

        height: 80px !important;

        padding: 0 120px !important;
    }


    #footerFigmaNav {

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

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

        height: 80px !important;

        margin: 0 auto !important;
    }


    /* links */

    #footerFigmaNav
    .footer-figma-links {

        flex-direction: row !important;

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

        gap: 42px !important;

        width: auto !important;

        height: 80px !important;
    }


    #footerFigmaNav
    .footer-figma-links
    a {

        width: auto !important;

        font-size: 16px !important;

        line-height: 19px !important;

        white-space: nowrap !important;
    }


    /* siga-nos */

    #footerFigmaNav
    .footer-figma-social {

        position: absolute !important;

        right: 0 !important;
        top: 0 !important;

        flex-direction: row !important;

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

        gap: 12px !important;

        width: auto !important;
        height: 80px !important;

        margin: 0 !important;
    }


    #footerFigmaNav
    .footer-figma-social-titulo {

        font-size: 20px !important;

        line-height: 24px !important;
    }


    #footerFigmaNav
    .footer-figma-social-icones {

        display: flex !important;

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

        width: 36px !important;
        height: 36px !important;

        margin: 0 !important;
    }


    #footerFigmaNav
    .footer-figma-instagram {

        width: 36px !important;
        height: 36px !important;
    }


    #footerFigmaNav
    .footer-figma-instagram
    .icon-instagram,

    #footerFigmaNav
    .footer-figma-instagram
    .icon-instagram::before {

        font-size: 32px !important;

        line-height: 36px !important;
    }


    /* =====================================================
       SOBRE A LOJA
       170px
       ===================================================== */

    #sobreLoja {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;

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

        background: #ffffff !important;

        overflow: hidden !important;
    }


    #sobreLoja
    > .conteiner {

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

        height: 170px !important;

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


    #sobreLoja
    > .conteiner
    > .row-fluid {

        display: flex !important;

        flex-direction: column !important;

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

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

        margin: 0 !important;

        padding: 30px 0 0 0 !important;
    }


    /* logo 255x51 */

    #sobreLoja
    .sobreLogo {

        display: block !important;

        flex: none !important;

        width: 255px !important;
        height: 51px !important;

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

        float: none !important;
    }


    #sobreLoja
    .sobreLogo
    .logo,

    #sobreLoja
    .sobreLogo
    .logo
    a,

    #sobreLoja
    .sobreLogo
    .logo
    img {

        display: block !important;

        width: 255px !important;
        height: 51px !important;

        max-width: 255px !important;
        max-height: 51px !important;

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


    #sobreLoja
    .sobreLogo
    .logo
    img {

        object-fit: contain !important;
    }


    /* texto */

    #sobreLoja
    .sobreLoja.span6 {

        position: static !important;

        display: block !important;

        width: 1084px !important;
        max-width: calc(100% - 80px) !important;

        height: auto !important;

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

        float: none !important;

        text-align: center !important;
    }


    #sobreLoja
    .sobreLoja.span6
    p {

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 16px !important;
        font-weight: 500 !important;

        line-height: 20px !important;

        text-align: center !important;
    }


    #sobreLoja
    .sobreFb {

        display: none !important;
    }


    /* =====================================================
       PAGAMENTO + SELOS
       1920 x 196
       ===================================================== */

    #rodape
    .pagamento-selos {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 196px !important;
        min-height: 196px !important;
        max-height: 196px !important;

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

        background: rgba(202, 202, 202, 0.20) !important;

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

        position: relative !important;

        width: 1110px !important;
        max-width: calc(100% - 80px) !important;

        height: 196px !important;

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


    /*
     * IMPORTANTE:
     * força PAGAMENTO à esquerda e SELOS à direita
     */

    #rodape
    .pagamento-selos
    .row-fluid {

        position: relative !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

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

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

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       PAGUE COM
       x ≈ 405
       ----------------------------------------------------- */

    #rodape
    .pagamento-selos
    .pagamento {

        order: 1 !important;

        position: static !important;

        display: block !important;

        flex: 0 0 516px !important;

        width: 516px !important;
        min-width: 516px !important;
        max-width: 516px !important;

        height: 196px !important;

        margin: 0 55px 0 0 !important;

        padding: 26px 0 0 0 !important;

        float: none !important;

        transform: none !important;
    }


    /* -----------------------------------------------------
       SELOS
       x ≈ 976
       ----------------------------------------------------- */

    #rodape
    .pagamento-selos
    .selos {

        order: 2 !important;

        position: static !important;

        display: block !important;

        flex: 0 0 531px !important;

        width: 531px !important;
        min-width: 531px !important;
        max-width: 531px !important;

        height: 196px !important;

        margin: 0 !important;

        padding: 26px 0 0 0 !important;

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

        transform: none !important;

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    .pagamento
    > .titulo,

    #rodape
    .pagamento-selos
    .selos
    > .titulo {

        display: block !important;

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

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 39px !important;

        text-align: left !important;
    }


    /* cartões */

    #rodape
    .bandeiras-pagamento {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 7px !important;

        height: 45px !important;

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


    #rodape
    .bandeiras-pagamento
    > li {

        display: flex !important;

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

        flex: 0 0 45px !important;

        width: 45px !important;
        height: 45px !important;

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

        float: none !important;
    }


    #rodape
    .bandeiras-pagamento
    .icone-pagamento {

        transform: scale(1.12) !important;

        transform-origin: center !important;
    }


    /* boleto + pix */

    #rodape
    .gateways-rodape {

        display: flex !important;

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

        gap: 12px !important;

        width: auto !important;
        height: 49px !important;

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


    #rodape
    .gateways-rodape
    > li {

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

        float: none !important;
    }


    #rodape
    .logo-rodape-boleto-Pagali {

        width: 48px !important;
        height: 48px !important;

        object-fit: contain !important;
    }


    #rodape
    .logo-rodape-pix-proxy-pagali-v2 {

        width: 62px !important;
        height: 40px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       SELOS DESKTOP
       ===================================================== */

    #rodape
    .selos
    > ul {

        position: static !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 360px !important;
        height: auto !important;

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


    #rodape
    .selos
    > ul
    > li:first-child {

        display: block !important;

        flex: 0 0 100% !important;

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

        margin: -11px 0 0 0 !important;
        padding: 0 !important;
    }


    #rodape
    .selos
    > ul
    > li:first-child
    > div {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 7px !important;

        width: 355px !important;
        max-width: none !important;

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


    #rodape
    #ra-widget-verified {

        width: 123px !important;
        height: 70px !important;
    }


    #rodape
    .selos
    a[href*="consumidor"]
    img {

        width: 123px !important;
        height: 33px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    a[href*="procon"]
    img {

        width: 88px !important;
        height: 50px !important;

        object-fit: contain !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2) {

        position: static !important;

        margin: 1px 0 0 3px !important;

        float: none !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(3) {

        position: static !important;

        margin: 1px 0 0 25px !important;

        float: none !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2)
    img,

    #rodape
    .selos
    > ul
    > li:nth-child(3)
    img {

        width: 62px !important;
        height: 35px !important;

        object-fit: contain !important;
    }


    /* copyright */

    #rodape
    .pagamento-selos
    + div,

    #rodape
    .pagamento-selos
    + div
    .conteiner,

    #rodape
    .pagamento-selos
    + div
    .row-fluid,

    #rodape
    .assinatura {

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;
    }


    #rodape
    .assinatura {

        display: flex !important;

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

        width: 100% !important;

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


    #rodape
    .assinatura
    p {

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 14px !important;

        line-height: 50px !important;

        text-align: center !important;
    }


    #rodape
    .assinatura
    .lista-redes,

    #rodape
    .assinatura-rodape {

        display: none !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:3961
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* =====================================================
       FAIXA LINKS + SOCIAL
       360 x 282
       ===================================================== */

    #rodape
    > .institucional {

        width: 100% !important;

        height: 282px !important;
        min-height: 282px !important;
        max-height: 282px !important;

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


    #rodape
    > .institucional
    > .conteiner {

        width: 100% !important;

        height: 282px !important;

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


    #footerFigmaNav {

        display: flex !important;

        flex-direction: column !important;

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

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

        margin: 0 !important;

        padding: 29px 0 0 0 !important;
    }


    /* links */

    #footerFigmaNav
    .footer-figma-links {

        display: flex !important;

        flex-direction: column !important;

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

        gap: 0 !important;

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

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


    #footerFigmaNav
    .footer-figma-links
    a {

        display: block !important;

        width: 100% !important;

        height: 30px !important;

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

        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 30px !important;

        text-align: center !important;

        white-space: nowrap !important;
    }


    /* siga-nos */

    #footerFigmaNav
    .footer-figma-social {

        position: static !important;

        display: flex !important;

        flex-direction: column !important;

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

        gap: 0 !important;

        width: 100% !important;

        height: auto !important;

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


    #footerFigmaNav
    .footer-figma-social-titulo {

        display: block !important;

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

        font-size: 16px !important;

        line-height: 20px !important;

        text-align: center !important;
    }


    #footerFigmaNav
    .footer-figma-social-icones {

        display: flex !important;

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

        width: 58px !important;
        height: 58px !important;

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


    #footerFigmaNav
    .footer-figma-instagram {

        width: 58px !important;
        height: 58px !important;
    }


    #footerFigmaNav
    .footer-figma-instagram
    .icon-instagram,

    #footerFigmaNav
    .footer-figma-instagram
    .icon-instagram::before {

        font-size: 52px !important;

        line-height: 58px !important;
    }


    /* =====================================================
       SOBRE A LOJA
       187px
       ===================================================== */

    #sobreLoja {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 187px !important;
        min-height: 187px !important;
        max-height: 187px !important;

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

        background: #ffffff !important;

        overflow: hidden !important;
    }


    #sobreLoja
    > .conteiner {

        width: 100% !important;

        height: 187px !important;

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


    #sobreLoja
    > .conteiner
    > .row-fluid {

        display: flex !important;

        flex-direction: column !important;

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

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

        margin: 0 !important;

        padding: 20px 0 0 0 !important;
    }


    /* logo */

    #sobreLoja
    .sobreLogo {

        display: block !important;

        flex: none !important;

        width: 200px !important;
        height: 40px !important;

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

        float: none !important;
    }


    #sobreLoja
    .sobreLogo
    .logo,

    #sobreLoja
    .sobreLogo
    .logo
    a,

    #sobreLoja
    .sobreLogo
    .logo
    img {

        display: block !important;

        width: 200px !important;
        height: 40px !important;

        max-width: 200px !important;
        max-height: 40px !important;

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

        object-fit: contain !important;
    }


    /* texto */

    #sobreLoja
    .sobreLoja.span6 {

        position: static !important;

        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 328px !important;

        height: auto !important;

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

        float: none !important;

        text-align: center !important;
    }


    #sobreLoja
    .sobreLoja.span6
    p {

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        line-height: 17px !important;

        text-align: center !important;
    }


    #sobreLoja
    .sobreFb {

        display: none !important;
    }


    /* =====================================================
       PAGAMENTOS + SELOS
       360 x 404
       ===================================================== */

    #rodape
    .pagamento-selos {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: 404px !important;
        min-height: 404px !important;
        max-height: 404px !important;

        margin: 0 !important;

        padding: 34px 0 0 0 !important;

        background: rgba(202, 202, 202, 0.20) !important;

        overflow: visible !important;
    }


    #rodape
    .pagamento-selos
    > .conteiner {

        width: 100% !important;

        height: 370px !important;

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


    #rodape
    .pagamento-selos
    .row-fluid {

        display: block !important;

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

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


    /* =====================================================
       PAGUE COM
       ===================================================== */

    #rodape
    .pagamento-selos
    .pagamento {

        position: static !important;

        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        height: 202px !important;

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

        float: none !important;

        transform: none !important;
    }


    #rodape
    .pagamento-selos
    .pagamento
    > .titulo,

    #rodape
    .pagamento-selos
    .selos
    > .titulo {

        display: block !important;

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

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 39px !important;

        text-align: left !important;
    }


    /* cartões */

    #rodape
    .bandeiras-pagamento {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 8px !important;

        width: 323px !important;
        height: 58px !important;

        margin: 1px 0 0 5px !important;
        padding: 0 !important;
    }


    #rodape
    .bandeiras-pagamento
    > li {

        display: flex !important;

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

        flex: 0 0 58px !important;

        width: 58px !important;
        height: 58px !important;

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

        float: none !important;
    }


    #rodape
    .bandeiras-pagamento
    .icone-pagamento {

        transform: scale(1.4) !important;

        transform-origin: center !important;
    }


    /* boleto + pix */

    #rodape
    .gateways-rodape {

        display: flex !important;

        flex-direction: row !important;

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

        gap: 10px !important;

        width: 170px !important;
        height: 61px !important;

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


    #rodape
    .gateways-rodape
    > li {

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

        float: none !important;
    }


    #rodape
    .logo-rodape-boleto-Pagali {

        width: 61px !important;
        height: 61px !important;

        object-fit: contain !important;
    }


    #rodape
    .logo-rodape-pix-proxy-pagali-v2 {

        width: 80px !important;
        height: 48px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       SELOS
       ===================================================== */

    #rodape
    .pagamento-selos
    .selos {

        position: static !important;

        display: block !important;

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        height: 168px !important;

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

        float: none !important;

        transform: none !important;

        overflow: visible !important;
    }


    #rodape
    .selos
    > ul {

        position: relative !important;

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: wrap !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 330px !important;
        height: 129px !important;

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


    #rodape
    .selos
    > ul
    > li:first-child {

        display: block !important;

        flex: 0 0 100% !important;

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

        margin: -7px 0 0 0 !important;
        padding: 0 !important;
    }


    /*
     * sobrescreve o style inline do seu HTML:
     * gap:35px / justify-content:center
     */

    #rodape
    .selos
    > ul
    > li:first-child
    > div {

        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        gap: 7px !important;

        width: 330px !important;
        max-width: none !important;

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


    /* Reclame Aqui */

    #rodape
    #ra-widget-verified {

        width: 113px !important;
        height: 64px !important;
    }


    /* consumidor */

    #rodape
    .selos
    a[href*="consumidor"]
    img {

        width: 113px !important;
        height: 31px !important;

        object-fit: contain !important;
    }


    /* procon */

    #rodape
    .selos
    a[href*="procon"]
    img {

        width: 81px !important;
        height: 46px !important;

        object-fit: contain !important;
    }


    /* Site Seguro */

    #rodape
    .selos
    > ul
    > li:nth-child(2) {

        position: static !important;

        margin: -5px 0 0 3px !important;
        padding: 0 !important;

        float: none !important;
    }


    /* Google */

    #rodape
    .selos
    > ul
    > li:nth-child(3) {

        position: static !important;

        margin: -5px 0 0 22px !important;
        padding: 0 !important;

        float: none !important;
    }


    #rodape
    .selos
    > ul
    > li:nth-child(2)
    img,

    #rodape
    .selos
    > ul
    > li:nth-child(3)
    img {

        width: 57px !important;
        height: 32px !important;

        object-fit: contain !important;
    }


    /* =====================================================
       COPYRIGHT
       360 x 44
       ===================================================== */

    #rodape
    .pagamento-selos
    + div,

    #rodape
    .pagamento-selos
    + div
    .conteiner,

    #rodape
    .pagamento-selos
    + div
    .row-fluid,

    #rodape
    .assinatura {

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }


    #rodape
    .assinatura {

        display: flex !important;

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

        width: 100% !important;

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


    #rodape
    .assinatura
    .lista-redes,

    #rodape
    .assinatura-rodape {

        display: none !important;
    }


    #rodape
    .assinatura
    p {

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 44px !important;

        text-align: center !important;

        white-space: nowrap !important;
    }
}

/* =========================================================
   SIGA-NOS - INSTAGRAM + VERIFICADO
   ========================================================= */

#footerFigmaNav
.footer-figma-social-icones {

    width: auto !important;

    display: flex !important;

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

    gap: 10px !important;
}


/* selo azul */

#footerFigmaNav
.footer-figma-verificado {

    display: flex !important;

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

    flex: none !important;

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

    background: #3498db !important;

    clip-path: polygon(
        50% 0%,
        61% 10%,
        76% 7%,
        83% 21%,
        97% 26%,
        94% 41%,
        100% 50%,
        92% 61%,
        94% 76%,
        79% 82%,
        73% 96%,
        58% 92%,
        50% 100%,
        39% 91%,
        24% 94%,
        18% 80%,
        4% 74%,
        8% 59%,
        0% 50%,
        9% 39%,
        6% 24%,
        21% 18%,
        27% 4%,
        42% 8%
    ) !important;
}


#footerFigmaNav
.footer-figma-verificado
> span {

    display: block !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;

    font-weight: 700 !important;

    text-align: center !important;
}


/* DESKTOP */

@media screen and (min-width: 1025px) {

    #footerFigmaNav
    .footer-figma-social-icones {

        height: 36px !important;

        gap: 8px !important;
    }


    #footerFigmaNav
    .footer-figma-verificado {

        width: 34px !important;
        height: 34px !important;
    }


    #footerFigmaNav
    .footer-figma-verificado
    > span {

        font-size: 21px !important;
        line-height: 34px !important;
    }
}


/* MOBILE */

@media screen and (max-width: 1024px) {

    #footerFigmaNav
    .footer-figma-social-icones {

        width: auto !important;
        height: 58px !important;

        margin-top: 8px !important;

        gap: 12px !important;
    }


    #footerFigmaNav
    .footer-figma-verificado {

        width: 48px !important;
        height: 48px !important;
    }


    #footerFigmaNav
    .footer-figma-verificado
    > span {

        font-size: 29px !important;
        line-height: 48px !important;
    }
}

/* =========================================================
   CORREÇÕES FINAIS HOME - LIGHTING & CO.
   Desktop + Mobile
   ========================================================= */


/* =========================================================
   1. PREÇO À VISTA
   remove texto duplicado criado por pseudo-elementos do tema
   ========================================================= */

body.pagina-inicial
#listagemProdutos
.desconto-a-vista::after,

body.pagina-inicial
#listagemProdutos
.desconto-a-vista
strong::after {
    content: none !important;
    display: none !important;
}

body.pagina-inicial
#listagemProdutos
.desconto-a-vista {
    white-space: nowrap !important;
}

body.pagina-inicial
#listagemProdutos
.desconto-a-vista
> strong {
    margin-right: 5px !important;
}


/* =========================================================
   2. CORAÇÃO / FAVORITO
   ========================================================= */

body.pagina-inicial
#listagemProdutos
.vitrine-coracao {
    display: flex !important;

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

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

    color: #626262 !important;
    background: transparent !important;

    text-decoration: none !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    z-index: 120 !important;
}

body.pagina-inicial
#listagemProdutos
.vitrine-coracao::before {
    display: block !important;

    color: #626262 !important;

    font-family: Arial, sans-serif !important;
    font-weight: 400 !important;

    line-height: 1 !important;
}

body.pagina-inicial
#listagemProdutos
.vitrine-coracao:hover::before {
    color: #000000 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* =====================================================
       3. MENU DESKTOP
       remove linha cinza quando fechado
       e sobe a hero 8px
       ===================================================== */

    #menuCat,
    #menuCat > .conteiner,
    #menuCat .row-fluid,
    #menuCat .menu.superior {
        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        overflow: visible !important;
    }

    #menuCat
    .menu.superior
    > .nivel-um {
        height: 72px !important;

        overflow: visible !important;
    }

    /* REMOVE A LINHA CINZA DO MENU FECHADO */
    #menuCat
    .menu.superior
    > .nivel-um::after {
        content: none !important;

        display: none !important;
    }

    #menuCat
    .menu.superior
    > .nivel-um
    > li {
        height: 72px !important;
    }

    #menuCat
    .menu.superior
    > .nivel-um
    > li
    > a {
        height: 72px !important;
    }

    /*
     * linha preta fica SOMENTE
     * na categoria que está aberta/hover
     */
    #menuCat
    .menu.superior
    > .nivel-um
    > li:hover
    > a::after,

    #menuCat
    .menu.superior
    > .nivel-um
    > li:focus-within
    > a::after {
        bottom: 0 !important;
    }

    /* mega menu acompanha nova altura */
    #menuCat
    .menu.superior
    > .nivel-um
    > li.com-filho
    > .nivel-dois {
        top: 72px !important;
    }


    /* =====================================================
       4. TARJA / ÍCONES ABAIXO DA HERO
       centraliza melhor no espaço branco
       ===================================================== */

    body.pagina-inicial
    .secao-banners
    > .conteiner
    > .row-fluid.banner.hidden-phone {
        margin-top: 22px !important;
    }

    body.pagina-inicial
    .span12.banner.tarja
    > img {
        display: block !important;

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

        margin: 0 auto !important;

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

    body.pagina-inicial
    #destaquesCategoriasHome {
        margin-top: 42px !important;
    }


/* =====================================================
   5. ESPAÇAMENTO ENTRE AS VITRINES - DESKTOP
   ===================================================== */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header:first-child {
    margin-top: 72px !important;
}

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-viewport
+ .vitrine-carousel-header {
    margin-top: 110px !important;
}


    /* =====================================================
       6. CORAÇÃO DESKTOP MAIOR
       ===================================================== */

    body.pagina-inicial
    #listagemProdutos
    .vitrine-coracao {
        width: 44px !important;
        height: 44px !important;
    }

    body.pagina-inicial
    #listagemProdutos
    .vitrine-coracao::before {
        font-size: 38px !important;
    }


    /* =====================================================
       7. NEWSLETTER DESKTOP
       ===================================================== */

    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > button.newsletter-assinar::before {
        content: "ENVIAR" !important;
    }

    /*
     * não deixa o retorno AJAX quebrar a seção
     */
    #barraNewsletter {
        height: auto !important;

        min-height: 176px !important;
        max-height: none !important;

        overflow: visible !important;
    }

    #barraNewsletter > .conteiner,
    #barraNewsletter > .conteiner > .row-fluid,
    #barraNewsletter .span,
    #barraNewsletter .componente.newsletter,
    #barraNewsletter .newsletter > .interno {
        height: auto !important;

        min-height: 176px !important;
        max-height: none !important;

        overflow: visible !important;
    }

    #barraNewsletter
    .newsletter
    .interno-conteudo {
        height: auto !important;

        min-height: 50px !important;

        overflow: visible !important;
    }


    /* =====================================================
       8. FOOTER - SIGA-NOS DESKTOP
       antes o container tinha só 36px para DOIS ícones
       ===================================================== */

    #footerFigmaNav
    .footer-figma-social-icones {
        display: flex !important;

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

        width: auto !important;
        min-width: 78px !important;

        height: 36px !important;

        gap: 8px !important;

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

    #footerFigmaNav
    .footer-figma-instagram {
        flex: 0 0 36px !important;

        width: 36px !important;
        height: 36px !important;
    }

    #footerFigmaNav
    .footer-figma-verificado {
        flex: 0 0 34px !important;

        width: 34px !important;
        height: 34px !important;
    }


    /* =====================================================
       9. CONSUMIDOR.GOV DESKTOP
       ===================================================== */

    #rodape
    .selos
    a[href*="consumidor"]
    img {
        width: 123px !important;
        height: 55px !important;

        max-width: 123px !important;
        max-height: 55px !important;

        object-fit: contain !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-inicial
    .secao-banners
    > .conteiner
    > .row-fluid.banner.hidden-phone {

        display: none !important;
        visibility: hidden !important;

        width: 0 !important;
        height: 0 !important;

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

        overflow: hidden !important;
    }


    /* =====================================================
       11. PLAFONS - CROP MOBILE
       ===================================================== */

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-plafons
    > img {
        object-fit: cover !important;

        object-position: center 32% !important;
    }


    /* =====================================================
   12. HEADER DAS VITRINES MOBILE
   FIGMA:
   TÍTULO ................. SETAS
   VER TODOS
   ===================================================== */



    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        position: relative !important;

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        grid-template-rows:
            auto
            auto !important;

        grid-template-areas:
            "titulo setas"
            "todos  ." !important;

        column-gap: 16px !important;
        row-gap: 8px !important;

        align-items: center !important;

        width: calc(100vw - 40px) !important;
        max-width: none !important;

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

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    /* =====================================================
   TÍTULO MOBILE - CORREÇÃO DEFINITIVA
   ===================================================== */

body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria {

    grid-area: titulo !important;
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;

    display: flex !important;

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

    align-self: center !important;
    justify-self: stretch !important;

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

    height: 22px !important;
    min-height: 22px !important;

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

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

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

    overflow: visible !important;

    color: #000000 !important;
    background: transparent !important;

    text-decoration: none !important;

    transform: none !important;

    z-index: 2 !important;
}


body.pagina-inicial
#corpo
#listagemProdutos.listagem
> .vitrine-carousel-header
> a.titulo-categoria
> strong {

    position: static !important;

    display: block !important;

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

    width: auto !important;
    min-width: 0 !important;
    height: 22px !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;

    line-height: 22px !important;

    text-align: left !important;
    text-transform: none !important;
    text-indent: 0 !important;

    white-space: nowrap !important;

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

    transform: none !important;
}


    /* =====================================================
       SETAS
       MESMA LINHA VERTICAL DO TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        /* FORÇA AS SETAS EXCLUSIVAMENTE NA LINHA DO TÍTULO */
        grid-area: setas !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
    
        position: static !important;
    
        display: flex !important;
    
        align-items: center !important;
        justify-content: flex-end !important;
    
        /* fica no canto direito da primeira linha */
        justify-self: end !important;
        align-self: center !important;
    
        width: auto !important;
        height: 20px !important;
    
        margin: 0 !important;
        padding: 0 !important;
    
        gap: 18px !important;
    
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    
        float: none !important;
    
        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav
    > button {

        position: relative !important;

        flex: 0 0 20px !important;

        width: 20px !important;
        min-width: 20px !important;

        height: 20px !important;
        min-height: 20px !important;

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

        transform: none !important;
    }


    /* =====================================================
       VER TODOS
       ABAIXO DO TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-ver-todos {

        grid-area: todos !important;

        position: static !important;

        display: block !important;

        width: max-content !important;
        height: auto !important;

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

        align-self: start !important;

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 18px !important;

        text-decoration: none !important;

        transform: none !important;
    }



    /* =====================================================
       13. APROXIMA O HEADER DA VITRINE
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header:first-child {
        margin-top: 32px !important;
    }

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport
    + .vitrine-carousel-header {
        margin-top: 55px !important;
    }

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-viewport {
        margin-top: 18px !important;
    }


    /* =====================================================
       14. PRODUTOS MOBILE
       mais espaço na lateral
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    ul.vitrine-carousel-track {
        gap: 10px !important;

        padding-left: 20px !important;
        padding-right: 20px !important;

        scroll-padding-left: 20px !important;
    }


    /* =====================================================
       15. TEXTOS DO PRODUTO
       ===================================================== */

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .info-produto {
        width: 100% !important;

        margin-top: 14px !important;

        padding: 0 4px !important;

        text-align: left !important;
    }

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .nome-produto {
        width: 100% !important;

        margin: 0 !important;

        text-align: left !important;
    }

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-produto,

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-produto
    > div,

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-parcela,

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .desconto-a-vista {
        text-align: left !important;
    }


    /* =====================================================
       16. CORAÇÃO MOBILE
       ===================================================== */

    body.pagina-inicial
    #listagemProdutos
    .vitrine-coracao {
        width: 36px !important;
        height: 36px !important;

        right: 0 !important;
        top: -3px !important;

        cursor: pointer !important;

        pointer-events: auto !important;
    }

    body.pagina-inicial
    #listagemProdutos
    .vitrine-coracao::before {
        font-size: 32px !important;
    }


    /* =====================================================
       17. NEWSLETTER MOBILE

       não pode mais ter height fixo + overflow hidden
       ===================================================== */

    #barraNewsletter.hidden-phone,
    #barraNewsletter.hidden-phone.posicao-rodape,
    #barraNewsletter {
        display: block !important;

        width: 100% !important;

        height: auto !important;

        min-height: 216px !important;
        max-height: none !important;

        overflow: visible !important;

        padding-bottom: 24px !important;

        background: #cacaca !important;
    }


    #barraNewsletter > .conteiner,
    #barraNewsletter > .conteiner > .row-fluid,
    #barraNewsletter .span,
    #barraNewsletter .componente.newsletter,
    #barraNewsletter .newsletter > .interno {
        height: auto !important;

        min-height: 192px !important;
        max-height: none !important;

        overflow: visible !important;
    }


    #barraNewsletter
    .newsletter
    .interno-conteudo {
        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        height: auto !important;

        min-height: 110px !important;
        max-height: none !important;

        overflow: visible !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner {
        height: auto !important;

        min-height: 110px !important;
        max-height: none !important;
    }


    #barraNewsletter
    .newsletter
    .newsletter-cadastro.input-conteiner
    > button.newsletter-assinar::before {
        content: "ENVIAR" !important;
    }


    /* retorno de sucesso */
    #barraNewsletter
    .newsletter-confirmacao:not(.hide) {
        display: flex !important;

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

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

        height: auto !important;

        margin: 12px auto 0 auto !important;
        padding: 10px 12px !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 12px !important;

        line-height: 17px !important;

        text-align: left !important;

        white-space: normal !important;

        overflow: visible !important;
    }

    #barraNewsletter
    .newsletter-confirmacao.hide {
        display: none !important;
    }


    /* mensagem de erro / e-mail já cadastrado */
    #barraNewsletter
    .alert,
    #barraNewsletter
    .alert-error,
    #barraNewsletter
    .alert-danger {
        position: static !important;

        display: block !important;

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

        height: auto !important;

        margin: 10px auto !important;
        padding: 8px 10px !important;

        white-space: normal !important;

        line-height: 16px !important;

        box-sizing: border-box !important;
    }


    /*
     * garante que o bloco SOBRE A LOJA
     * não suma depois da newsletter
     */
    #sobreLoja {
        position: relative !important;

        display: block !important;

        clear: both !important;

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

        overflow: visible !important;
    }


    /* =====================================================
       18. FOOTER MOBILE
       SIGA-NOS + INSTAGRAM + SELO
       ===================================================== */

    #rodape
    > .institucional {
        height: auto !important;

        min-height: 282px !important;
        max-height: none !important;

        overflow: visible !important;
    }

    #footerFigmaNav {
        display: flex !important;

        flex-direction: column !important;

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

        width: 100% !important;

        height: auto !important;
        min-height: 282px !important;
        max-height: none !important;

        overflow: visible !important;
    }


    #footerFigmaNav
    .footer-figma-links {
        display: flex !important;

        flex-direction: column !important;

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

        width: 100% !important;

        height: auto !important;
    }


    #footerFigmaNav
    .footer-figma-links
    a {
        width: 100% !important;

        height: 30px !important;

        line-height: 30px !important;

        text-align: center !important;

        white-space: nowrap !important;
    }


    #footerFigmaNav
    .footer-figma-social {
        position: static !important;

        display: flex !important;

        flex-direction: column !important;

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

        width: 100% !important;

        height: auto !important;

        margin: 20px 0 0 0 !important;

        gap: 8px !important;
    }


    #footerFigmaNav
    .footer-figma-social-titulo {
        display: block !important;

        width: 100% !important;

        height: 20px !important;

        margin: 0 !important;

        line-height: 20px !important;

        text-align: center !important;
    }


    #footerFigmaNav
    .footer-figma-social-icones {
        display: flex !important;

        flex-direction: row !important;

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

        width: auto !important;
        min-width: 104px !important;

        height: 48px !important;

        margin: 0 !important;

        gap: 10px !important;
    }


    #footerFigmaNav
    .footer-figma-instagram {
        flex: 0 0 48px !important;

        width: 48px !important;
        height: 48px !important;
    }

    #footerFigmaNav
    .footer-figma-instagram
    .icon-instagram,

    #footerFigmaNav
    .footer-figma-instagram
    .icon-instagram::before {
        font-size: 44px !important;
        line-height: 48px !important;
    }


    #footerFigmaNav
    .footer-figma-verificado {
        flex: 0 0 46px !important;

        width: 46px !important;
        height: 46px !important;
    }


    /* =====================================================
       19. CONSUMIDOR.GOV MOBILE
       ===================================================== */

    #rodape
    .selos
    a[href*="consumidor"]
    img {
        display: block !important;

        width: 113px !important;
        height: 52px !important;

        max-width: 113px !important;
        max-height: 52px !important;

        object-fit: contain !important;
    }


    /* =====================================================
   20. WHATSAPP MOBILE
   MANTÉM O ÍCONE NATIVO DA LOJA INTEGRADA
   ===================================================== */


    .li-whatsapp
    > a {

        display: flex !important;

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

        overflow: visible !important;
    }


    .li-whatsapp
    > a
    > i.fa.fa-whatsapp {

        display: inline-block !important;

        width: auto !important;
        height: auto !important;

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

        color: #ffffff !important;

        font-size: 34px !important;
        font-style: normal !important;

        line-height: 1 !important;

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

        transform: none !important;
    }


    /*
     * IMPORTANTE:
     *
     * NÃO definir:
     * content
     * font-family
     *
     * Deixa a própria classe .fa-whatsapp
     * da Loja Integrada gerar o ícone,
     * exatamente como já acontece no desktop.
     */
    .li-whatsapp
    > a
    > i.fa.fa-whatsapp::before {

        display: inline-block !important;

        color: #ffffff !important;

        font-size: 34px !important;

        line-height: 1 !important;

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

}

/* =========================================================
   CORREÇÃO FOOTER - NOTEBOOK / DESKTOP MENOR
   MENU CENTRALIZADO + SIGA-NOS À DIREITA
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    #rodape
    > .institucional
    > .conteiner {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }


    /* =====================================================
       CONTAINER PRINCIPAL
       ===================================================== */

    #footerFigmaNav {
        position: relative !important;

        display: flex !important;

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

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

        height: 80px !important;

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


    /* =====================================================
       LINKS CENTRALIZADOS
       ===================================================== */

    #footerFigmaNav
    .footer-figma-links {
        display: flex !important;

        flex-direction: row !important;

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

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

        height: 80px !important;

        gap: clamp(16px, 1.8vw, 28px) !important;

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


    #footerFigmaNav
    .footer-figma-links
    a {
        flex: none !important;

        width: auto !important;

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

        font-size: clamp(11px, 1.05vw, 14px) !important;
        line-height: 19px !important;

        text-align: center !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       SIGA-NOS
       não ocupa uma coluna do grid
       ===================================================== */

    #footerFigmaNav
    .footer-figma-social {
        position: absolute !important;

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

        display: flex !important;

        flex-direction: row !important;

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

        width: auto !important;
        height: 80px !important;

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

        gap: 10px !important;

        white-space: nowrap !important;
    }


    #footerFigmaNav
    .footer-figma-social-titulo {
        flex: none !important;

        width: auto !important;

        margin: 0 !important;

        font-size: 16px !important;
        line-height: 20px !important;

        white-space: nowrap !important;
    }


    #footerFigmaNav
    .footer-figma-social-icones {
        display: flex !important;

        flex: none !important;

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

        width: auto !important;
        min-width: 78px !important;

        height: 36px !important;

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

        gap: 8px !important;
    }


    #footerFigmaNav
    .footer-figma-instagram {
        flex: 0 0 36px !important;

        width: 36px !important;
        height: 36px !important;
    }


    #footerFigmaNav
    .footer-figma-verificado {
        flex: 0 0 34px !important;

        width: 34px !important;
        height: 34px !important;
    }
}

/* =========================================================
   PLAFONS MOBILE - apenas reposiciona a imagem para cima
   ========================================================= */
@media screen and (max-width: 1024px) {

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-plafons {
        position: relative !important;
        overflow: hidden !important;
    }

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-plafons > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;

        object-fit: cover !important;
        object-position: center 18% !important; /* sobe a imagem */
        transform: none !important;
    }

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-plafons::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 20%,
            rgba(0, 0, 0, 0.58) 100%
        ) !important;
        pointer-events: none !important;
        z-index: 2 !important;
    }

    body.pagina-inicial
    #destaquesCategoriasHome
    .destaque-plafons::after {
        z-index: 10 !important;
    }
}

/* =========================================================
   MOBILE - CARTÃO + PIX LOGO ABAIXO DO PREÇO
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* container de preços */
    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-produto {
        position: relative !important;

        display: block !important;

        width: 100% !important;

        margin-top: 10px !important;
        padding: 0 !important;

        text-align: left !important;
    }


    /* PREÇO PRINCIPAL */
    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-promocional {
        display: block !important;

        width: 100% !important;

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

        text-align: left !important;
    }


    /* =====================================================
       PARCELAMENTO / CARTÃO
       é o segundo DIV dentro de .preco-produto
       ===================================================== */

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-produto
    > div:nth-of-type(2) {
        display: block !important;

        width: 100% !important;

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

        text-align: left !important;
    }


    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-parcela {
        display: flex !important;

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

        width: 100% !important;

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

        text-align: left !important;

        line-height: 18px !important;
    }


    /* =====================================================
       PIX / À VISTA
       ===================================================== */

    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .desconto-a-vista {
        display: flex !important;

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

        width: 100% !important;

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

        text-align: left !important;

        line-height: 18px !important;
    }


    /* impede o tema de centralizar qualquer wrapper */
    body.pagina-inicial
    #listagemProdutos
    li.vitrine-slide
    .preco-produto
    > div {
        text-align: left !important;
    }
}
/* =========================================================
   MOBILE - REMOVE ESPAÇO ACIMA DO RODAPÉ
   sobrescreve theme_custom.css
   ========================================================= */

@media screen and (max-width: 767px) {

    body.pagina-inicial #rodape,
    body.pagina-inicial #rodape.footer-figma-pronto {
        margin-top: 0 !important;
    }

    body.pagina-inicial #barraNewsletter {
        margin-bottom: 0 !important;
    }

    body.pagina-inicial #sobreLoja {
        margin-top: 0 !important;
    }
}

/* =========================================================
   HEADER DAS VITRINES - DESKTOP
   TÍTULO + VER TODOS + SETAS NA MESMA LINHA
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* HEADER COMPLETO */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: grid !important;

        grid-template-columns:
            max-content
            max-content
            minmax(0, 1fr)
            max-content !important;

        grid-template-rows: 56px !important;

        column-gap: 30px !important;
        row-gap: 0 !important;

        align-items: center !important;

        width: 100% !important;
        min-height: 56px !important;
        height: 56px !important;

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

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria {

        grid-column: 1 !important;
        grid-row: 1 !important;

        position: static !important;

        display: flex !important;

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

        align-self: center !important;
        justify-self: start !important;

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

        height: 56px !important;
        min-height: 56px !important;

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

        border: 0 !important;

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        display: block !important;

        width: auto !important;
        height: auto !important;

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

        line-height: 1.15 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       VER TODOS
       MESMA LINHA DO TÍTULO
       30px DE DISTÂNCIA
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        grid-column: 2 !important;
        grid-row: 1 !important;

        position: static !important;

        display: flex !important;

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

        align-self: center !important;
        justify-self: start !important;

        width: max-content !important;
        height: 56px !important;

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

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

        transform: none !important;

        line-height: normal !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       SETAS
       MESMA LINHA
       CANTO DIREITO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        grid-column: 4 !important;
        grid-row: 1 !important;

        position: static !important;

        display: flex !important;

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

        align-self: center !important;
        justify-self: end !important;

        width: auto !important;
        height: 56px !important;

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

        gap: 12px !important;

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

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav
    > button {

        display: flex !important;

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

        flex: 0 0 30px !important;

        width: 30px !important;
        min-width: 30px !important;

        height: 30px !important;
        min-height: 30px !important;

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


/* =========================================================
   NOTEBOOK / DESKTOP MENOR
   NÃO ALTERAR POSIÇÃO VERTICAL
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        column-gap: 24px !important;
    }


    /*
     * IMPORTANTE:
     * NÃO colocar margin-top no Ver Todos.
     */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        margin: 0 !important;

        align-self: center !important;
    }


    /*
     * IMPORTANTE:
     * NÃO deslocar as setas para baixo.
     */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        margin: 0 !important;

        align-self: center !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL HEADER VITRINES - DESKTOP
   FIGMA 166:594
   TÍTULO + VER TODOS + SETAS
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* HEADER DA VITRINE */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        position: relative !important;

        display: flex !important;
        flex-direction: row !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        column-gap: 0 !important;
        row-gap: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria {

        position: static !important;

        display: flex !important;

        flex: 0 0 auto !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: auto !important;
        height: 48px !important;

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

        /* anula grid antigo */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        align-self: flex-start !important;

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        display: block !important;

        width: auto !important;
        height: 48px !important;

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

        line-height: 48px !important;
    }


    /* =====================================================
       VER TODOS

       FIGMA:
       título termina -> 30px -> Ver Todos

       fica aproximadamente 20px abaixo
       do topo do header
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-ver-todos {

        position: static !important;

        display: block !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 19px !important;

        margin:
            20px
            0
            0
            30px !important;

        padding: 0 !important;

        font-size: 16px !important;
        line-height: 19px !important;

        /* anula grid antigo */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        align-self: flex-start !important;

        transform: none !important;
    }


    /* =====================================================
       SETAS
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        position: static !important;

        display: flex !important;

        flex: 0 0 auto !important;

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

        /* joga as setas para o canto direito */
        margin:
            9px
            0
            0
            auto !important;

        padding: 0 !important;

        width: auto !important;
        height: 30px !important;

        gap: 12px !important;

        /* anula grid antigo */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        align-self: flex-start !important;

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav
    > button {

        width: 30px !important;
        min-width: 30px !important;

        height: 30px !important;
        min-height: 30px !important;

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


/* =========================================================
   DESKTOP GRANDE
   FIGMA 1920:
   margem esquerda/direita = 120px
   ========================================================= */

@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 240px) !important;
        max-width: 1680px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================
   NOTEBOOK / DESKTOP MENOR
   mantém 40px de margem
   ========================================================= */

@media screen
and (min-width: 1025px)
and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 80px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL - ALINHAMENTO HORIZONTAL DAS VITRINES
   DESKTOP
   ========================================================= */

/* DESKTOP GRANDE - Figma */
@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 240px) !important;
        max-width: 1680px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* NOTEBOOK / DESKTOP MENOR */
@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 80px) !important;
        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* =========================================================
   VITRINES DESKTOP - HEADER DEFINITIVO
   FIGMA 138:779

   TÍTULO    VER TODOS                         SETAS
   baseline alinhada
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* =====================================================
       CONTAINER
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        position: relative !important;

        /* IMPORTANTE:
           abandonamos GRID no desktop.
           Flex é melhor aqui porque precisamos alinhar
           textos de tamanhos diferentes pela baseline. */
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: baseline !important;
        justify-content: flex-start !important;

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;

        box-sizing: border-box !important;

        /* remove qualquer resto das regras de grid */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;

        column-gap: 0 !important;
        row-gap: 0 !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria {

        position: static !important;

        display: flex !important;

        flex: 0 0 auto !important;

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

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

        align-self: baseline !important;

        /* neutraliza regras antigas de grid */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        display: block !important;

        width: auto !important;
        height: auto !important;

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

        font-family: "Montserrat", sans-serif !important;
        font-weight: 400 !important;

        color: #000000 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       VER TODOS
       Figma: 30px depois do título
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        position: static !important;

        display: block !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: auto !important;

        /* ESTE É O GAP DO FIGMA */
        margin: 0 0 0 30px !important;
        padding: 0 !important;

        align-self: baseline !important;

        /* neutraliza o grid antigo */
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;

        font-family: "Montserrat", sans-serif !important;
        font-weight: 400 !important;

        color: #000000 !important;

        text-decoration: none !important;
        text-transform: capitalize !important;

        white-space: nowrap !important;

        transform: none !important;
    }


    /* =====================================================
       SETAS
       empurra totalmente para a direita
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {
    
        position: static !important;
    
        display: flex !important;
    
        flex: 0 0 auto !important;
    
        align-items: center !important;
        justify-content: flex-end !important;
    
        /* empurra para direita E zera o margin-top antigo */
        margin: 0 0 0 auto !important;
    
        padding: 0 !important;
    
        /* mesma altura da linha do título */
        width: auto !important;
        height: 30px !important;
    
        align-self: flex-start !important;
    
        gap: 12px !important;
    
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
    
        transform: none !important;
    }
}


/* =========================================================
   DESKTOP GRANDE
   FIGMA 1920px
   x inicial = 120px
   ========================================================= */

@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 240px) !important;

        max-width: 1680px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        font-size: 40px !important;
        line-height: 48px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        font-size: 16px !important;
        line-height: 19px !important;
    }
}


/* =========================================================
   NOTEBOOK / DESKTOP MENOR
   mantém a mesma lógica
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 80px) !important;

        max-width: none !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        font-size: 32px !important;
        line-height: 40px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        font-size: 14px !important;
        line-height: 18px !important;

        margin-left: 24px !important;
    }
}

/* =========================================================
   VER MAIS PRODUTO - FIGMA 166:962
   Desktop
   ========================================================= */

@media screen and (min-width: 1025px) {
        /* overlay ocupa toda a imagem */
        body.pagina-inicial
        #corpo
        #listagemProdutos.listagem
        .listagem-item
        .imagem-produto
        > .acoes-produto.hidden-phone {
    
            position: absolute !important;
    
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;
    
            width: 100% !important;
            height: 100% !important;
    
            margin: 0 !important;
            padding: 0 !important;
    
            transform: none !important;
        }

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal {
        
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;
    
        right: auto !important;
        bottom: auto !important;
    
        transform: translate(-50%, -50%) !important;

        display: flex !important;

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

        width: 167px !important;
        min-width: 167px !important;
        max-width: 167px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

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

        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

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

        color: #ffffff !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 50px !important;

        text-align: center !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

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

        cursor: pointer !important;
    }


    /* mantém PRETO também no hover/focus */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal:hover,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal:focus {

        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;

        color: #ffffff !important;

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

        text-decoration: none !important;
    }


    /* FIGMA NÃO POSSUI LUPA */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal
    > i,

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal
    > i::before {

        display: none !important;
        content: none !important;
    }
}

/* =========================================================
   PÁGINAS INTERNAS / CATEGORIA
   MOBILE
   ORDENAÇÃO + PAGINAÇÃO
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* =====================================================
       CONTAINER SUPERIOR
       select em cima + paginação embaixo
       ===================================================== */

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo {

        position: relative !important;

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

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

        overflow: visible !important;

        border: 0 !important;

        z-index: 100 !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    > .row-fluid {

        display: flex !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

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

        gap: 12px !important;

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

        overflow: visible !important;
    }


    /* remove os 50% do Bootstrap */
    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    > .row-fluid
    > .span6 {

        display: flex !important;

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

        float: none !important;

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

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

        overflow: visible !important;
    }


    /* =====================================================
       SELECT / ORDENAÇÃO
       ===================================================== */

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append {

        position: relative !important;

        display: flex !important;

        align-items: stretch !important;
        justify-content: center !important;

        width: 230px !important;
        height: 40px !important;

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

        overflow: visible !important;

        z-index: 500 !important;
    }


    /* campo "Relevância" */
    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    > label {

        display: flex !important;

        align-items: center !important;

        flex: 1 1 auto !important;

        width: auto !important;
        height: 40px !important;

        box-sizing: border-box !important;

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

        background: #ffffff !important;

        border: 1px solid #cacaca !important;
        border-right: 0 !important;

        color: #626262 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;

        line-height: 40px !important;
    }


    /*
     * IMPORTANTE:
     * deixa o dropdown ser posicionado
     * relativamente ao .input-append inteiro
     */
    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    > .btn-group {

        position: static !important;

        flex: 0 0 52px !important;

        width: 52px !important;
        height: 40px !important;

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


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    #botaoOrdenar {

        display: flex !important;

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

        width: 52px !important;
        height: 40px !important;

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

        background: #292929 !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        cursor: pointer !important;

        position: relative !important;

        z-index: 502 !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    #botaoOrdenar
    > i {

        color: #ffffff !important;

        font-size: 14px !important;

        pointer-events: none !important;
    }


    /* =====================================================
       DROPDOWN
       ESTE É O PONTO QUE ESTÁ QUEBRADO AGORA
       ===================================================== */

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    .btn-group
    > .dropdown-menu {

        position: absolute !important;

        top: calc(100% + 2px) !important;

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

        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;

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

        background: #ffffff !important;

        border: 1px solid #cacaca !important;
        border-radius: 0 !important;

        box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;

        float: none !important;

        overflow: visible !important;

        z-index: 999999 !important;
    }


    /*
     * Bootstrap adiciona .open quando clica.
     * Quando estiver aberto, TEM que aparecer.
     */
    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    .btn-group.open
    > .dropdown-menu {

        display: block !important;

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

        pointer-events: auto !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .dropdown-menu
    > li {

        display: block !important;

        width: 100% !important;

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


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .dropdown-menu
    > li
    > a {

        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        box-sizing: border-box !important;

        padding: 10px 14px !important;

        color: #323232 !important;

        background: #ffffff !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 13px !important;

        text-decoration: none !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .dropdown-menu
    > li
    > a:hover {

        background: #f5f5f5 !important;
    }


    /* =====================================================
       BACKDROP DO BOOTSTRAP MOBILE
       ele é criado quando você clica no select.
       Não precisamos dele aqui.
       ===================================================== */

    body.pagina-categoria
    .dropdown-backdrop {

        display: none !important;

        pointer-events: none !important;
    }


    /* =====================================================
       PAGINAÇÃO
       ===================================================== */

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .pagination {

        position: static !important;

        display: flex !important;

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

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

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

        float: none !important;

        clear: both !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .pagination
    > ul {

        display: flex !important;

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

        width: auto !important;

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

        float: none !important;
    }
}

@media screen and (max-width: 1024px) {

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    .btn-group.open
    > .dropdown-menu {

        display: block !important;

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

        pointer-events: auto !important;

        transform: none !important;

        z-index: 999999 !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .dropdown-menu
    a {

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

}

@media screen and (max-width: 1024px) {

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    .btn-group:not(.open)
    > .dropdown-menu {
        display: none !important;
    }

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append
    .btn-group.open
    > .dropdown-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 999999 !important;
    }

}

@media screen and (max-width: 1024px) {

    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    #botaoOrdenar {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

}

/* =========================================================
   CORREÇÃO HITBOX HEADER x ORDENAÇÃO
   SOMENTE PÁGINAS DE CATEGORIA / MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    /*
     * Essas duas camadas do header estão cobrindo
     * a ordenação mesmo visualmente parecendo não estar.
     */
    body.pagina-categoria
    #cabecalho
    .conteudo-topo,

    body.pagina-categoria
    #cabecalho
    .conteudo-topo
    .inferior {
        pointer-events: none !important;
    }


    /*
     * Se a busca mobile estiver visível,
     * ela continua clicável.
     */
    body.pagina-categoria
    #cabecalho
    .conteudo-topo
    .busca-mobile,

    body.pagina-categoria
    #cabecalho
    .conteudo-topo
    .busca-mobile * {
        pointer-events: auto !important;
    }


    /*
     * Ordenação fica explicitamente acima
     * das áreas normais da página.
     */
    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo {
        position: relative !important;
        z-index: 1000 !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .input-append {
        position: relative !important;
        z-index: 1001 !important;
        pointer-events: auto !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    #botaoOrdenar {
        position: relative !important;
        z-index: 1002 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }


    body.pagina-categoria
    #corpo
    .ordenar-listagem.topo
    .dropdown-menu {
        z-index: 1003 !important;
    }

}

/* =========================================================
   PÁGINA DE PRODUTO
   FIGMA DESKTOP: 166:2905
   FIGMA MOBILE:  166:3192
   ========================================================= */


/* =========================================================
   BOTÃO COMPRAR
   Figma: #19CF34
   ========================================================= */

body.pagina-produto
#corpo
.acoes-produto
.comprar
> a.botao.botao-comprar.principal {

    background: #19CF34 !important;
    background-color: #19CF34 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #19CF34 !important;

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


/* mantém a mesma cor no hover/focus */
body.pagina-produto
#corpo
.acoes-produto
.comprar
> a.botao.botao-comprar.principal:hover,

body.pagina-produto
#corpo
.acoes-produto
.comprar
> a.botao.botao-comprar.principal:focus {

    background: #19CF34 !important;
    background-color: #19CF34 !important;
    background-image: none !important;

    color: #ffffff !important;

    border-color: #19CF34 !important;
}


/* ícone antigo do carrinho não aparece no Figma */
body.pagina-produto
#corpo
.acoes-produto
.comprar
> a.botao.botao-comprar.principal
> i {

    display: none !important;
}


/* =========================================================
   DESKTOP
   GALERIA VERTICAL À ESQUERDA
   ========================================================= */

@media screen and (min-width: 1025px) {

    /*
     * O primeiro span6 contém:
     *
     * .conteiner-imagem
     * .produto-thumbs
     *
     * Tornamos ele referência para posicionar
     * a galeria sem alterar a imagem principal.
     */
    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:first-child {

        position: relative !important;

        overflow: visible !important;
    }


    /*
     * Garante que nenhum ancestral corte
     * a galeria que ficará para fora da coluna.
     */
    body.pagina-produto
    #corpo,

    body.pagina-produto
    #corpo
    > .conteiner,

    body.pagina-produto
    #corpo
    .secao-principal,

    body.pagina-produto
    #corpo
    .produto,

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid {

        overflow: visible !important;
    }


    /* =====================================================
       CONTAINER DA GALERIA
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs {

        position: absolute !important;

        /*
         * coloca as miniaturas à esquerda da foto
         * sem alterar a largura da foto principal
         */
        left: -105px !important;
        top: 0 !important;

        width: 80px !important;

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

        z-index: 20 !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    #carouselImagem {

        position: relative !important;

        width: 80px !important;

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

        overflow: visible !important;
    }


    /*
     * viewport original do FlexSlider
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .flex-viewport {

        width: 80px !important;

        height: auto !important;
        max-height: 100% !important;

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

        overflow: visible !important;
    }


    /* =====================================================
       LISTA VERTICAL
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides {

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 12px !important;

        width: 80px !important;
        height: auto !important;

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

        /*
         * FlexSlider coloca transform inline.
         * Para a disposição vertical ele não é necessário.
         */
        transform: none !important;
        transition: none !important;

        list-style: none !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides
    > li {

        float: none !important;

        display: block !important;

        /*
         * NÃO alteramos width/height da imagem.
         * Apenas do LI que a envolve.
         */
        width: 80px !important;

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


    /*
     * NÃO COLOCAR width/height no img.
     *
     * Mantém exatamente as dimensões atuais
     * das miniaturas da Loja Integrada.
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides
    > li
    > a {

        display: flex !important;

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

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


    /* remove navegação horizontal antiga */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .flex-direction-nav {

        display: none !important;
    }

}


/* =========================================================
   DESKTOP MENOR
   evita a galeria sair demais da tela
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1279px) {

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs {

        left: -70px !important;

        width: 64px !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    #carouselImagem,

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .flex-viewport,

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides,

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides
    > li {

        width: 64px !important;
    }

}


/* =========================================================
   MOBILE
   imagem grande em cima
   miniaturas embaixo
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:first-child {

        position: relative !important;

        overflow: visible !important;
    }


    /*
     * Volta a galeria para o fluxo normal.
     * Assim ela aparece logo após a imagem grande.
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs {

        position: static !important;

        display: block !important;

        width: 100% !important;

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

        transform: none !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    #carouselImagem {

        width: 100% !important;

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


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .flex-viewport {

        width: 100% !important;

        height: auto !important;

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

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


    /*
     * MINIATURAS HORIZONTAIS
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides {

        display: flex !important;

        flex-direction: row !important;

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

        gap: 10px !important;

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

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

        transform: none !important;
        transition: none !important;

        list-style: none !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides
    > li {

        float: none !important;

        flex: 0 0 auto !important;

        /*
         * mantém dimensão original da miniatura
         */
        width: auto !important;

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


    /*
     * NÃO mexemos no img.
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides
    > li
    > a {

        display: block !important;

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


    /*
     * As setas horizontais antigas não são necessárias.
     * Usuário pode deslizar horizontalmente se houver
     * muitas imagens.
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .flex-direction-nav {

        display: none !important;
    }

}

/* =========================================================
   DESCRIÇÃO DO PRODUTO
   DESKTOP: FIGMA 166:2974
   MOBILE:  FIGMA 166:3290
   ========================================================= */

body.pagina-produto
#corpo
.abas-custom {

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

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

    border: 0 !important;
    background: transparent !important;

    box-shadow: none !important;

    font-family: "Montserrat", sans-serif !important;

    box-sizing: border-box !important;
}


body.pagina-produto
#corpo
.abas-custom
.tab-content {

    width: 100% !important;

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

    border: 0 !important;
    background: transparent !important;

    overflow: visible !important;
}


body.pagina-produto
#corpo
.abas-custom
#descricao {

    display: block !important;

    width: 100% !important;

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

    color: #000000 !important;

    background: transparent !important;

    border: 0 !important;

    font-family: "Montserrat", sans-serif !important;
}


/* =====================================================
   TÍTULO "DESCRIÇÃO"
   ===================================================== */

body.pagina-produto
#corpo
.descricao-figma-titulo {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

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

    border: 0 !important;
    border-bottom: 1px solid #cacaca !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 25px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: left !important;
}


/* =====================================================
   NOME DO PRODUTO DENTRO DA DESCRIÇÃO
   ===================================================== */

body.pagina-produto
#corpo
#descricao
.descricao-figma-produto {

    display: block !important;

    width: 100% !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    text-align: left !important;
}


/* =====================================================
   SUBTÍTULOS
   ===================================================== */

body.pagina-produto
#corpo
#descricao
.descricao-figma-subtitulo {

    display: block !important;

    width: 100% !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    text-align: left !important;
}


/* =====================================================
   PARÁGRAFOS
   ===================================================== */

body.pagina-produto
#corpo
#descricao
> p {

    display: block !important;

    width: 100% !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;

    text-align: left !important;

    white-space: normal !important;
}


/* =========================================================
   MOBILE - DESCRIÇÃO
   FIGMA 166:3290
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-produto
    #corpo
    .abas-custom {

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        margin: 44px auto 0 !important;

        padding: 0 !important;
    }


    body.pagina-produto
    #corpo
    .descricao-figma-titulo {

        font-size: 20px !important;
        font-weight: 600 !important;

        line-height: 29px !important;

        margin: 0 0 25px 0 !important;

        padding-bottom: 6px !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    .descricao-figma-produto {

        font-size: 18px !important;
        font-weight: 500 !important;

        line-height: 1.25 !important;

        margin: 0 0 12px 0 !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    .descricao-figma-subtitulo {

        font-size: 18px !important;
        font-weight: 500 !important;

        line-height: 1.25 !important;

        margin: 26px 0 12px 0 !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    > p {

        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: 1.28 !important;

        margin: 0 !important;
    }

}


/* =========================================================
   PRODUTOS RELACIONADOS
   DESKTOP: mantém estrutura atual
   MOBILE: FIGMA 166:3144
   ========================================================= */


/* setas que criaremos por JS */
.produtos-relacionados-nav {

    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        box-sizing: border-box !important;

        margin: 54px 0 0 0 !important;
        padding: 0 0 0 15px !important;

        border: 0 !important;

        background: #ffffff !important;

        overflow: hidden !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    > h4.titulo {

        display: block !important;

        width: auto !important;

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

        border: 0 !important;

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;

        line-height: 20px !important;

        text-transform: none !important;

        background: transparent !important;
    }


/* =====================================================
   SETAS PRODUTOS RELACIONADOS
   MESMO DESENHO DA HOME
   ===================================================== */

body.pagina-produto
#corpo
.listagem.aproveite-tambem
.produtos-relacionados-nav {

    position: absolute !important;

    top: 0 !important;
    right: 15px !important;

    display: flex !important;

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

    gap: 18px !important;

    width: auto !important;
    height: 20px !important;

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

    z-index: 30 !important;
}


/* =====================================================
   ESCONDE FONTAWESOME
   exatamente como fizemos na home
   ===================================================== */

body.pagina-produto
#corpo
.listagem.aproveite-tambem
.produtos-relacionados-nav
button
i.fa {

    display: none !important;
}


/* =====================================================
   BOTÃO BASE
   ===================================================== */

body.pagina-produto
#corpo
.listagem.aproveite-tambem
.produtos-relacionados-nav
button {

    position: relative !important;

    display: block !important;

    flex: none !important;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;
    min-height: 20px !important;

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

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;

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

    overflow: visible !important;

    cursor: pointer !important;
}


/* =====================================================
   HASTE HORIZONTAL
   ===================================================== */

body.pagina-produto
#corpo
.listagem.aproveite-tambem
.produtos-relacionados-nav
button::before {

    content: "" !important;

    position: absolute !important;

    display: block !important;

    top: 50% !important;

    width: 17px !important;
    height: 1.5px !important;

    background: #323232 !important;

    border: 0 !important;

    transform: translateY(-50%) !important;

    opacity: 1 !important;

    pointer-events: none !important;
}


/* =====================================================
   PONTA DA SETA
   ===================================================== */

body.pagina-produto
#corpo
.listagem.aproveite-tambem
.produtos-relacionados-nav
button::after {

    content: "" !important;

    position: absolute !important;

    display: block !important;

    top: 50% !important;

    width: 6px !important;
    height: 6px !important;

    background: transparent !important;

    opacity: 1 !important;

    pointer-events: none !important;
}


/* =====================================================
   ESQUERDA
   ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .produtos-relacionados-prev::before {
    
        left: 3px !important;
    }
    
    
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .produtos-relacionados-prev::after {
    
        left: 3px !important;
    
        border-left: 1.5px solid #323232 !important;
        border-bottom: 1.5px solid #323232 !important;
    
        transform:
            translateY(-50%)
            rotate(45deg) !important;
    }
    
    
    /* =====================================================
       DIREITA
       ===================================================== */
    
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .produtos-relacionados-next::before {
    
        right: 3px !important;
    }
    
    
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .produtos-relacionados-next::after {
    
        right: 3px !important;
    
        border-left: 1.5px solid #323232 !important;
        border-bottom: 1.5px solid #323232 !important;
    
        transform:
            translateY(-50%)
            rotate(225deg) !important;
    }


    /* =====================================================
       REMOVE COMPORTAMENTO GRID ANTIGO
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    > ul {

        display: block !important;

        width: 100% !important;

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

        list-style: none !important;

        overflow: visible !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    > ul
    > li.listagem-linha {

        display: block !important;

        width: 100% !important;

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

        overflow: hidden !important;

        list-style: none !important;
    }


    /* =====================================================
       TRACK HORIZONTAL
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .listagem-linha
    > ul.row-fluid {

        display: flex !important;

        flex-wrap: nowrap !important;

        align-items: flex-start !important;

        gap: 6px !important;

        width: 100% !important;

        box-sizing: border-box !important;

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

        float: none !important;

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

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .listagem-linha
    > ul.row-fluid::-webkit-scrollbar {

        display: none !important;
    }


    /* =====================================================
       CARD
       Figma:
       primeiro começa em x15
       largura 274px
       segundo começa em x295
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .listagem-linha
    > ul.row-fluid
    > li {

        display: block !important;

        flex: 0 0 274px !important;

        width: 274px !important;
        max-width: 274px !important;

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

        float: none !important;

        scroll-snap-align: start !important;

        list-style: none !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .listagem-item {

        position: relative !important;

        display: block !important;

        width: 274px !important;

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

        border: 0 !important;

        background: transparent !important;

        box-shadow: none !important;
    }


    /* =====================================================
       IMAGEM DO CARD
       FIGMA 274 × 342
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .imagem-produto {

        display: block !important;

        width: 274px !important;
        height: 342px !important;

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

        background: #f7f7f7 !important;

        overflow: hidden !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .imagem-produto
    img {

        display: block !important;

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

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

        margin: 0 !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* =====================================================
       INFORMAÇÕES
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .info-produto {

        width: 100% !important;

        box-sizing: border-box !important;

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


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .nome-produto {

        display: block !important;

        width: 100% !important;

        min-height: 44px !important;

        box-sizing: border-box !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;

        line-height: 1.2 !important;

        text-align: left !important;

        text-decoration: none !important;
    }


    /* preço */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-promocional {

        display: block !important;

        margin: 13px 0 0 0 !important;

        color: #323232 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 20px !important;
    }


    /* parcelamento */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-parcela {

        display: block !important;

        margin: 5px 0 0 15px !important;

        color: #626262 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 15px !important;
    }


    /* valor à vista */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista {

        display: block !important;

        margin: 4px 0 0 15px !important;

        color: #626262 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 15px !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista
    strong {

        color: #323232 !important;

        font-weight: 600 !important;
    }


    /*
     * O Figma mobile não mostra o botão
     * "Ver mais" abaixo de cada produto.
     */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .acoes-produto,

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .acoes-produto-responsiva {

        display: none !important;
    }

}
/* =========================================================
   CORREÇÃO FINAL - DESCRIÇÃO PRODUTO
   FIGMA 166:2974 / 166:3290
   ========================================================= */


/* usa o título nativo da área */
body.pagina-produto
#corpo
.abas-custom::before {

    content: "Descrição" !important;

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

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

    border: 0 !important;
    border-bottom: 1px solid #cacaca !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 25px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    text-align: left !important;
}


/*
 * segurança:
 * se algum elemento do JS antigo sobreviver,
 * não deixa aparecer.
 */
body.pagina-produto
#corpo
.descricao-figma-titulo,

body.pagina-produto
#corpo
.descricao-figma-produto,

body.pagina-produto
#corpo
.descricao-figma-subtitulo {

    display: none !important;
}


/* =====================================================
   NOME DO PRODUTO
   ===================================================== */

body.pagina-produto
#corpo
#descricao
> h2 {

    display: block !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;

    line-height: 1.4 !important;

    text-align: left !important;
}


/* =====================================================
   TÍTULOS DAS SEÇÕES
   ===================================================== */

body.pagina-produto
#corpo
#descricao
> h3 {

    display: block !important;

    margin: 27px 0 9px 0 !important;
    padding: 0 !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;

    line-height: 1.35 !important;

    text-align: left !important;
}


/* =====================================================
   PARÁGRAFOS
   ===================================================== */

body.pagina-produto
#corpo
#descricao
> p {

    display: block !important;

    width: 100% !important;

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;

    text-align: left !important;
}


/* =====================================================
   LISTAS
   ===================================================== */

body.pagina-produto
#corpo
#descricao
> ul {

    display: block !important;

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

    color: #000000 !important;
}


body.pagina-produto
#corpo
#descricao
> ul
> li {

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

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-produto
    #corpo
    .abas-custom::before {

        margin-bottom: 25px !important;

        padding-bottom: 6px !important;

        font-size: 20px !important;
        font-weight: 600 !important;

        line-height: 29px !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    > h2 {

        margin: 0 0 12px 0 !important;

        font-size: 18px !important;
        font-weight: 500 !important;

        line-height: 1.25 !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    > h3 {

        margin: 26px 0 12px 0 !important;

        font-size: 18px !important;
        font-weight: 500 !important;

        line-height: 1.25 !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    > p,

    body.pagina-produto
    #corpo
    #descricao
    > ul
    > li {

        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: 1.28 !important;
    }


    body.pagina-produto
    #corpo
    #descricao
    > ul {

        padding-left: 23px !important;
    }

}

/* =========================================================
   PRODUTO - OVERRIDE FINAL
   RELACIONADOS MOBILE: FIGMA 166:3151
   GALERIA DESKTOP:     FIGMA 166:2968
   ========================================================= */


/* =========================================================
   RELACIONADOS MOBILE
   FIGMA 166:3151
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* =====================================================
       CARD / INFO
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .info-produto {

        position: relative !important;

        display: block !important;

        width: 274px !important;
        max-width: 274px !important;

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

        text-align: left !important;

        overflow: visible !important;
    }


    /* =====================================================
       NOME
       Figma:
       274px largura
       44px altura
       Montserrat Medium 14
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .info-produto
    > a.nome-produto {

        position: relative !important;

        display: -webkit-box !important;

        width: 274px !important;
        max-width: 274px !important;

        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 14px !important;
        font-weight: 500 !important;

        line-height: normal !important;

        text-align: left !important;

        text-transform: none !important;
        text-decoration: none !important;

        overflow: hidden !important;

        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
    }


    /* =====================================================
       CONTAINER DO PREÇO
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-produto {

        position: relative !important;

        display: block !important;

        width: 100% !important;

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

        color: #323232 !important;

        text-align: left !important;

        overflow: visible !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-produto
    > div {

        display: block !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }


    /* =====================================================
       PREÇO PRINCIPAL
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-promocional {

        position: static !important;

        display: block !important;

        width: 100% !important;

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

        color: #323232 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 16px !important;
        font-weight: 700 !important;

        line-height: 20px !important;

        text-align: left !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       PARCELAMENTO
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-produto
    > div:nth-of-type(2) {

        margin-top: 6px !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-parcela {

        position: relative !important;

        display: flex !important;

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

        width: 100% !important;

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

        color: #626262 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 16px !important;

        text-align: left !important;

        white-space: nowrap !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-parcela
    strong {

        color: #323232 !important;

        font-weight: 600 !important;
    }


    /*
     * No Figma mobile não aparece "sem juros".
     */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-parcela
    > span {

        display: none !important;
    }


    /* espaço entre ícone de cartão e texto */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .preco-parcela::before {

        margin-right: 7px !important;
    }


    /* =====================================================
       PIX / À VISTA
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista {

        position: relative !important;

        display: flex !important;

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

        width: 100% !important;

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

        color: #626262 !important;

        font-family: "Montserrat", sans-serif !important;

        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 16px !important;

        text-align: left !important;

        white-space: nowrap !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista
    strong {

        color: #323232 !important;

        font-weight: 600 !important;

        margin-right: 3px !important;
    }


    /* espaço entre PIX e valor */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista::before {

        margin-right: 7px !important;
    }


    /*
     * Mata o "à vista" duplicado que o tema
     * pode inserir com pseudo-elemento.
     */
    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista::after,

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .desconto-a-vista
    strong::after {

        content: none !important;

        display: none !important;
    }


    /* =====================================================
       CORAÇÃO
       mesmo conceito da HOME
       ===================================================== */

    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .relacionados-coracao {

        position: absolute !important;

        top: 53px !important;
        right: 0 !important;

        display: flex !important;

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

        width: 28px !important;
        height: 28px !important;

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

        border: 0 !important;
        border-radius: 0 !important;

        outline: 0 !important;

        background: transparent !important;

        color: #626262 !important;

        text-decoration: none !important;

        box-shadow: none !important;

        cursor: pointer !important;

        z-index: 150 !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .relacionados-coracao
    > i {

        display: none !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .relacionados-coracao::before {

        content: "\2661" !important;

        display: block !important;

        color: #626262 !important;

        font-family: Arial, sans-serif !important;

        font-size: 28px !important;
        font-weight: 400 !important;

        line-height: 28px !important;

        pointer-events: none !important;
    }


    body.pagina-produto
    #corpo
    .listagem.aproveite-tambem
    .relacionados-coracao:hover::before {

        color: #000000 !important;
    }

}


/* =========================================================
   DESKTOP
   GALERIA VERTICAL - SOMENTE 4 MINIATURAS
   FIGMA 166:2968

   NÃO ALTERA WIDTH/HEIGHT DAS IMAGENS
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs {

        overflow: visible !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    #carouselImagem {

        position: relative !important;

        overflow: visible !important;
    }


    /* =====================================================
       VIEWPORT
       altura será calculada pelo JS usando
       as 4 miniaturas REAIS
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .flex-viewport {

        position: relative !important;

        height:
            var(
                --produto-thumbs-altura,
                auto
            ) !important;

        min-height: 0 !important;

        max-height:
            var(
                --produto-thumbs-altura,
                none
            ) !important;

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

        overflow: hidden !important;
    }


    /* =====================================================
       TRACK VERTICAL
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides {

        position: relative !important;

        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

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

        gap: 12px !important;

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

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

        transform:
            translateY(
                var(
                    --produto-thumbs-offset,
                    0px
                )
            ) !important;

        transition:
            transform
            .25s
            ease !important;

        will-change: transform !important;

        list-style: none !important;
    }


    /*
     * IMPORTANTE:
     * nenhuma dimensão no IMG.
     *
     * As imagens continuam exatamente
     * no tamanho que já possuem.
     */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides
    > li {

        flex: 0 0 auto !important;

        float: none !important;

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


    /* =====================================================
       SETAS
       Figma: 24 x 24
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-prev,

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-next {

        position: absolute !important;

        left: 50% !important;

        display: flex !important;

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

        width: 24px !important;
        height: 24px !important;

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

        transform:
            translateX(-50%) !important;

        border: 0 !important;
        border-radius: 0 !important;

        outline: 0 !important;

        background: transparent !important;

        color: #323232 !important;

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

        cursor: pointer !important;

        z-index: 60 !important;
    }


    /* seta superior */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-prev {

        top: -28px !important;
    }


    /* seta inferior */
    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-next {

        bottom: -28px !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-prev
    > i,

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-next
    > i {

        display: block !important;

        width: 24px !important;
        height: 24px !important;

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

        color: #323232 !important;

        background: transparent !important;

        font-size: 18px !important;

        line-height: 24px !important;

        text-align: center !important;

        pointer-events: none !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    button:disabled {

        opacity: .25 !important;

        cursor: default !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    button[hidden] {

        display: none !important;
    }

}


/* =========================================================
   MOBILE
   SEM SETAS VERTICAIS
   mantém as miniaturas horizontais embaixo
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-prev,

    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    .produto-thumbs-next {

        display: none !important;
    }


    body.pagina-produto
    #corpo
    .produto
    .produto-thumbs
    ul.miniaturas.slides {

        transform: none !important;
    }

}

/* =========================================================
   HOME DESKTOP - VER MAIS CENTRALIZADO
   CORREÇÃO DEFINITIVA PARA TODAS AS VITRINES
   inclusive + ILUMINAÇÃO
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* a imagem vira a referência exata do overlay */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .imagem-produto {

        position: relative !important;

        overflow: hidden !important;
    }


    /* =====================================================
       OVERLAY
       ocupa EXATAMENTE toda a imagem
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .imagem-produto
    > .acoes-produto.hidden-phone {

        position: absolute !important;

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

        display: flex !important;

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

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

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

        transform: none !important;

        background: transparent !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        z-index: 50 !important;
    }


    /* =====================================================
       HOVER
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item:hover
    .imagem-produto
    > .acoes-produto.hidden-phone {

        display: flex !important;

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

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

        pointer-events: auto !important;
    }


    /* =====================================================
       BOTÃO
       não usa mais top:50% / left:50%
       quem centraliza é o FLEX do overlay
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .imagem-produto
    > .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal {

        position: static !important;

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

        display: flex !important;

        flex: 0 0 167px !important;

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

        width: 167px !important;
        min-width: 167px !important;
        max-width: 167px !important;

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

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

        transform: none !important;

        background: #000000 !important;
        background-color: #000000 !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

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

        color: #ffffff !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;

        line-height: 50px !important;

        text-align: center !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        cursor: pointer !important;
    }


    /* permanece preto no hover */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .imagem-produto
    > .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal:hover {

        background: #000000 !important;
        background-color: #000000 !important;

        color: #ffffff !important;
    }


    /* remove lupa */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    .listagem-item
    .imagem-produto
    > .acoes-produto.hidden-phone
    > a.botao.botao-comprar.principal
    > i {

        display: none !important;
    }
}

/* =========================================================
   HEADER VITRINES DESKTOP
   CORREÇÃO CHROME / FIREFOX
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* TÍTULO */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria {

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

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


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        display: flex !important;

        align-items: center !important;

        height: 48px !important;

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


    /* VER TODOS */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

        margin-top: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 30px !important;

        padding: 0 !important;

        line-height: normal !important;
    }


    /* SETAS */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        height: 48px !important;

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

        padding: 0 !important;

        gap: 12px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav
    > button {

        display: flex !important;

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

        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;

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

/* DESKTOP GRANDE */
@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {
        font-size: 40px !important;
        line-height: 48px !important;
    }

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {
        font-size: 16px !important;
    }
}


/* NOTEBOOK */
@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {
        font-size: 14px !important;
        margin-left: 24px !important;
    }
}

/* =========================================================
   CORREÇÃO FINAL HEADER VITRINES
   CHROME / FIREFOX
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    /* TÍTULO */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria {

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

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


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        display: flex !important;

        align-items: center !important;

        width: auto !important;
        height: 48px !important;

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


    /* VER TODOS */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

        margin:
            0
            0
            0
            30px !important;

        padding: 0 !important;

        line-height: normal !important;
    }


    /* SETAS */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

        margin:
            0
            0
            0
            auto !important;

        padding: 0 !important;

        gap: 12px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav
    > button {

        display: flex !important;

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

        width: 30px !important;
        min-width: 30px !important;

        height: 30px !important;
        min-height: 30px !important;

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


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        font-size: 40px !important;
        line-height: 48px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        font-size: 16px !important;
    }
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        font-size: 32px !important;
        line-height: 40px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        font-size: 14px !important;
        margin-left: 24px !important;
    }
}

/* =========================================================
   HEADER VITRINES DESKTOP - ALINHAMENTO FINAL REAL
   TÍTULO + VER TODOS + SETAS
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        position: relative !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;

        column-gap: 0 !important;
        row-gap: 0 !important;

        box-sizing: border-box !important;

        overflow: visible !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria {

        position: static !important;

        display: flex !important;

        flex: 0 0 auto !important;

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

        align-self: center !important;

        width: auto !important;
        height: 48px !important;
        min-height: 48px !important;

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

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        display: block !important;

        width: auto !important;
        height: auto !important;

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

        font-family: "Montserrat", sans-serif !important;
        font-weight: 400 !important;

        color: #000000 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       VER TODOS
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        position: static !important;

        display: flex !important;

        flex: 0 0 auto !important;

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

        align-self: center !important;

        width: auto !important;
        height: 48px !important;

        /* distância horizontal do título */
        margin: 0 0 0 30px !important;

        padding: 0 !important;

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

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 19px !important;

        color: #000000 !important;

        text-decoration: none !important;

        white-space: nowrap !important;

        transform: none !important;
    }


    /* =====================================================
       SETAS
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        position: static !important;

        display: flex !important;

        flex: 0 0 auto !important;

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

        align-self: center !important;

        width: auto !important;
        height: 48px !important;

        /* empurra para o canto direito */
        margin: 0 0 0 auto !important;
        padding: 0 !important;

        gap: 12px !important;

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

        transform: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav
    > button {

        position: relative !important;

        display: block !important;

        flex: 0 0 30px !important;

        width: 30px !important;
        min-width: 30px !important;

        height: 30px !important;
        min-height: 30px !important;

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


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 240px) !important;
        max-width: 1680px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        font-size: 40px !important;
        line-height: 48px !important;
    }
}


/* =========================================================
   NOTEBOOK
   ========================================================= */

@media screen and (min-width: 1025px) and (max-width: 1599px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        width: calc(100vw - 80px) !important;
        max-width: none !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.titulo-categoria
    > strong {

        font-size: 32px !important;
        line-height: 40px !important;
    }


    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > a.vitrine-ver-todos {

        margin-left: 24px !important;

        font-size: 14px !important;
        line-height: 18px !important;
    }
}

/* =========================================================
   HOME - ALINHAMENTO DEFINITIVO
   TÍTULO + VER TODOS + SETAS
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1025px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header {

        position: relative !important;

        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

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

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       TÍTULO
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .titulo-categoria {

        position: static !important;

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 48px !important;

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

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

        transform: none !important;
    }


    /*
     * ESTA É A CORREÇÃO PRINCIPAL.
     *
     * O tema estava posicionando o strong
     * fora da caixa do link.
     */
    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .titulo-categoria
    > strong {

        position: static !important;

        display: block !important;

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

        inset: auto !important;

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

        transform: none !important;

        align-self: auto !important;
    }


    /* =====================================================
       VER TODOS
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-ver-todos {

        position: static !important;

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 40px !important;

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

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

        transform: none !important;
    }


    /* =====================================================
       SETAS
       ===================================================== */

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-carousel-nav {

        position: static !important;

        display: flex !important;

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

        align-self: center !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: 40px !important;

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

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

        transform: none !important;
    }
}


/* =========================================================
   DESKTOP GRANDE
   espaço de 30px entre título e Ver Todos
   ========================================================= */

@media screen and (min-width: 1600px) {

    body.pagina-inicial
    #corpo
    #listagemProdutos.listagem
    > .vitrine-carousel-header
    > .vitrine-ver-todos {

        margin-left: 30px !important;
    }
}

/* =========================================================
   PRODUTO - TOPO + COMPRA
   FIGMA DESKTOP: 166:2905 / 166:2969
   FIGMA MOBILE:  166:3193
   ========================================================= */


/* =========================================================
   ESTRUTURA BASE
   ========================================================= */

body.pagina-produto
#corpo
.info-principal-produto {

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    box-sizing: border-box !important;

    font-family: "Montserrat", sans-serif !important;
}


/*
 * Depois que o JS criar o novo bloco,
 * escondemos breadcrumb e código/marca nativos.
 */
body.pagina-produto.produto-figma-pronto
#corpo
.info-principal-produto
> .breadcrumbs,

body.pagina-produto.produto-figma-pronto
#corpo
.info-principal-produto
> .codigo-produto {

    display: none !important;
}


/* =========================================================
   NOVO BLOCO META
   ========================================================= */

body.pagina-produto
#corpo
.produto-meta-figma {

    display: block !important;

    width: 100% !important;

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

    box-sizing: border-box !important;
}


/* breadcrumb */

body.pagina-produto
#corpo
.produto-breadcrumb-figma {

    display: flex !important;

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

    width: 100% !important;

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

    color: #626262 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;

    white-space: nowrap !important;
}


body.pagina-produto
#corpo
.produto-breadcrumb-figma
a,

body.pagina-produto
#corpo
.produto-breadcrumb-figma
span {

    color: #626262 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;

    text-decoration: none !important;
}


body.pagina-produto
#corpo
.produto-breadcrumb-separador {

    margin: 0 8px !important;
}


/* =========================================================
   MARCA + SKU
   ========================================================= */

body.pagina-produto
#corpo
.produto-tags-figma {

    display: flex !important;

    flex-direction: row !important;
    flex-wrap: nowrap !important;

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

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

    box-sizing: border-box !important;
}


body.pagina-produto
#corpo
.produto-tag-figma {

    display: flex !important;

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

    flex: none !important;

    box-sizing: border-box !important;

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

    background: #ffffff !important;

    border: 1px solid #cacaca !important;
    border-radius: 0 !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 400 !important;

    text-align: center !important;

    white-space: nowrap !important;
}


/* =========================================================
   CORAÇÃO DO PRODUTO
   reutiliza o mesmo conceito visual dos corações da home
   ========================================================= */

body.pagina-produto
#corpo
.produto-favorito-figma {

    position: absolute !important;

    display: flex !important;

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

    width: 40px !important;
    height: 40px !important;

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

    background: transparent !important;

    border: 0 !important;

    color: #626262 !important;

    text-decoration: none !important;

    cursor: pointer !important;

    z-index: 30 !important;
}


body.pagina-produto
#corpo
.produto-favorito-figma::before {

    content: "\2661" !important;

    display: block !important;

    color: #626262 !important;

    font-family: Arial, sans-serif !important;
    font-size: 38px !important;
    font-weight: 400 !important;

    line-height: 40px !important;
}


body.pagina-produto
#corpo
.produto-favorito-figma:hover::before {

    color: #000000 !important;
}


/* =========================================================
   QUANTIDADE
   ========================================================= */

body.pagina-produto
#corpo
.produto-quantidade-figma {

    display: block !important;

    flex: none !important;

    width: 189px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


body.pagina-produto
#corpo
.produto-quantidade-label {

    display: block !important;

    width: 189px !important;

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

    color: #626262 !important;

    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;

    text-align: left !important;
}


body.pagina-produto
#corpo
.produto-quantidade-controle {

    display: grid !important;

    grid-template-columns:
        40px
        110px
        39px !important;

    grid-template-rows: 44px !important;

    width: 189px !important;
    height: 44px !important;

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

    box-sizing: border-box !important;
}


body.pagina-produto
#corpo
.produto-quantidade-controle
button {

    position: static !important;

    display: flex !important;

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

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

    box-sizing: border-box !important;

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

    background: #ffffff !important;

    border: 1px solid #cacaca !important;
    border-radius: 0 !important;

    outline: 0 !important;

    color: #323232 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;

    line-height: 44px !important;

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

    cursor: pointer !important;
}


body.pagina-produto
#corpo
.produto-quantidade-valor {

    display: flex !important;

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

    width: 110px !important;
    height: 44px !important;

    box-sizing: border-box !important;

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

    background: #ffffff !important;

    border-top: 1px solid #cacaca !important;
    border-bottom: 1px solid #cacaca !important;

    color: #000000 !important;

    font-family: "Montserrat", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;

    line-height: 44px !important;

    text-align: center !important;
}


/* =========================================================
   REMOVE OS CONTROLES QUE NÃO EXISTEM NO FIGMA
   formas de pagamento / lista desejos antiga / CEP
   ========================================================= */

body.pagina-produto.produto-figma-pronto
#corpo
#btn-forma-pagamento,

body.pagina-produto.produto-figma-pronto
#corpo
.lista-favoritos.adicionar-favorito,

body.pagina-produto.produto-figma-pronto
#corpo
.cep {

    display: none !important;
}


/* =========================================================
   DESKTOP
   FIGMA 166:2905 / 166:2969
   ========================================================= */

@media screen and (min-width: 1025px) {

    /* coluna direita vira referência do coração */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .principal {

        position: relative !important;
    }


    /* =====================================================
       META
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto-meta-figma {

        margin: 0 0 29px 0 !important;
    }


    body.pagina-produto
    #corpo
    .produto-breadcrumb-figma {

        height: 22px !important;

        font-size: 16px !important;
        line-height: 22px !important;
    }


    body.pagina-produto
    #corpo
    .produto-breadcrumb-figma
    a,

    body.pagina-produto
    #corpo
    .produto-breadcrumb-figma
    span {

        font-size: 16px !important;
        line-height: 22px !important;
    }


    body.pagina-produto
    #corpo
    .produto-tags-figma {

        gap: 9px !important;

        margin-top: 17px !important;
    }


    body.pagina-produto
    #corpo
    .produto-tag-figma {

        height: 36px !important;

        font-size: 14px !important;
        line-height: 36px !important;
    }


    body.pagina-produto
    #corpo
    .produto-marca-figma {

        width: 162px !important;
    }


    body.pagina-produto
    #corpo
    .produto-sku-figma {

        width: 129px !important;
    }


    /* =====================================================
       NOME
       ===================================================== */

    body.pagina-produto
    #corpo
    .info-principal-produto
    > h1.nome-produto {

        position: static !important;

        display: block !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 30px !important;
        font-weight: 500 !important;

        line-height: 1.17 !important;

        text-align: left !important;

        text-transform: none !important;

        transform: none !important;
    }


    /* coração */

    body.pagina-produto
    #corpo
    .produto-favorito-figma {

        top: 0 !important;
        right: 0 !important;
    }


    /* =====================================================
       ÁREA DE PREÇO
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .principal
    > .acoes-produto {

        width: 100% !important;

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


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .principal
    > .acoes-produto
    .preco-produto {

        display: block !important;

        width: 100% !important;

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

        text-align: left !important;
    }


    /* preço principal */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-promocional {

        display: block !important;

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

        color: #323232 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 35px !important;
        font-weight: 700 !important;

        line-height: 42px !important;

        text-align: left !important;
    }


    /* parcelamento */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-produto
    > div:nth-of-type(2) {

        margin-top: 4px !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-parcela {

        font-family: "Montserrat", sans-serif !important;
        font-size: 25px !important;
        font-weight: 400 !important;

        line-height: 31px !important;

        color: #626262 !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-parcela
    strong {

        color: #626262 !important;

        font-weight: 600 !important;
    }


    /* preço à vista */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .desconto-a-vista {

        font-family: "Montserrat", sans-serif !important;
        font-size: 25px !important;
        font-weight: 400 !important;

        line-height: 31px !important;
    }


    /* =====================================================
       COMPRAR
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .acoes-produto
    .comprar {

        display: flex !important;

        flex-direction: column !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        width: 100% !important;

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


    /* estoque vem primeiro */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .comprar
    > .disponibilidade-produto {

        order: 1 !important;

        position: static !important;

        display: block !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 18px !important;
        font-weight: 400 !important;

        line-height: 23px !important;

        text-align: left !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .disponibilidade-produto
    b {

        color: #000000 !important;

        font-weight: 600 !important;
    }


    /* quantidade */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .produto-quantidade-figma {

        order: 2 !important;

        margin-top: 26px !important;
    }


    body.pagina-produto
    #corpo
    .produto-quantidade-label {

        height: 19px !important;

        margin-bottom: 7px !important;

        font-size: 16px !important;
        line-height: 19px !important;
    }


    /* botão comprar */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .comprar
    > a.botao.botao-comprar.principal {

        order: 3 !important;

        position: static !important;

        display: flex !important;

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

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

        height: 50px !important;
        min-height: 50px !important;
        max-height: 50px !important;

        box-sizing: border-box !important;

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

        background: #19CF34 !important;
        background-color: #19CF34 !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        color: #ffffff !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;

        line-height: 50px !important;

        text-align: center !important;
        text-transform: uppercase !important;

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

        transform: none !important;
    }
}


/* =========================================================
   MOBILE
   FIGMA 166:3193
   ========================================================= */

@media screen and (max-width: 1024px) {

    /* =====================================================
       INFO SUPERIOR
       ===================================================== */

    body.pagina-produto
    #corpo
    .info-principal-produto {

        align-items: center !important;

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;
    }


    body.pagina-produto
    #corpo
    .produto-meta-figma {

        width: 100% !important;

        margin: 0 0 28px 0 !important;
    }


    /* breadcrumb */

    body.pagina-produto
    #corpo
    .produto-breadcrumb-figma {

        justify-content: center !important;

        height: 22px !important;

        font-size: 14px !important;
        line-height: 22px !important;

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto-breadcrumb-figma
    a,

    body.pagina-produto
    #corpo
    .produto-breadcrumb-figma
    span {

        font-size: 14px !important;
        line-height: 22px !important;
    }


    /* marca + sku */

    body.pagina-produto
    #corpo
    .produto-tags-figma {

        justify-content: center !important;

        gap: 9px !important;

        margin-top: 9px !important;
    }


    body.pagina-produto
    #corpo
    .produto-tag-figma {

        height: 30px !important;

        padding: 0 7px !important;

        font-size: 12px !important;
        line-height: 30px !important;
    }


    body.pagina-produto
    #corpo
    .produto-marca-figma {

        width: 158px !important;
    }


    body.pagina-produto
    #corpo
    .produto-sku-figma {

        width: 127px !important;
    }


    /* nome do produto */

    body.pagina-produto
    #corpo
    .info-principal-produto
    > h1.nome-produto {

        position: static !important;

        display: block !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 25px !important;
        font-weight: 500 !important;

        line-height: 1.15 !important;

        text-align: center !important;

        text-transform: none !important;

        transform: none !important;
    }


    /* coração não aparece no Figma mobile */

    body.pagina-produto
    #corpo
    .produto-favorito-figma {

        display: none !important;
    }


    /* =====================================================
       ÁREA DE PREÇO MOBILE
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .principal
    > .acoes-produto {

        width: calc(100% - 30px) !important;
        max-width: 330px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 0 !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-produto {

        width: 100% !important;

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

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-promocional {

        display: block !important;

        width: 100% !important;

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

        color: #323232 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 25px !important;
        font-weight: 700 !important;

        line-height: 30px !important;

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-produto
    > div {

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .preco-parcela {

        display: flex !important;

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

        width: 100% !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;

        line-height: 23px !important;

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .desconto-a-vista {

        display: flex !important;

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

        width: 100% !important;

        margin-top: 10px !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 15px !important;
        font-weight: 400 !important;

        line-height: 23px !important;

        text-align: center !important;
    }


    /* =====================================================
       ESTOQUE + QUANTIDADE + COMPRAR
       ===================================================== */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .comprar {

        display: flex !important;

        flex-direction: column !important;

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

        width: 100% !important;

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


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .comprar
    > .disponibilidade-produto {

        order: 1 !important;

        position: static !important;

        display: block !important;

        width: 100% !important;

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

        color: #000000 !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;

        line-height: 23px !important;

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .disponibilidade-produto
    b {

        color: #000000 !important;

        font-weight: 600 !important;
    }


    /* quantidade */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .produto-quantidade-figma {

        order: 2 !important;

        margin: 18px auto 0 auto !important;
    }


    body.pagina-produto
    #corpo
    .produto-quantidade-label {

        width: 189px !important;

        height: 19px !important;

        margin: 0 0 7px 0 !important;

        font-size: 14px !important;
        line-height: 19px !important;

        text-align: center !important;
    }


    body.pagina-produto
    #corpo
    .produto-quantidade-valor {

        font-size: 16px !important;
    }


    /* comprar */

    body.pagina-produto
    #corpo
    .produto
    > .row-fluid
    > .span6:last-child
    .comprar
    > a.botao.botao-comprar.principal {

        order: 3 !important;

        position: static !important;

        display: flex !important;

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

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

        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;

        box-sizing: border-box !important;

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

        background: #19CF34 !important;
        background-color: #19CF34 !important;
        background-image: none !important;

        border: 0 !important;
        border-radius: 0 !important;

        color: #ffffff !important;

        font-family: "Montserrat", sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;

        line-height: 40px !important;

        text-align: center !important;
        text-transform: uppercase !important;

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

        transform: none !important;
    }
}