/* Define a cor para o elemento com a classe .apx_widgets_worker-giftWrap */
.apx_widgets_worker-giftWrap {
    color: #3C096C;
}

/* Esconde os elementos com as classes .whats-button e .pulse-button */
.whats-button, .pulse-button {
    display: none !important;
}

/* Remove a borda e o fundo do elemento com a classe .flags */
.flags {
    border: none !important;
    background: none !important;
}

/* Remove o fundo do elemento de imagem dentro de .produto .conteiner-imagem */
.produto .conteiner-imagem img {
    background: none !important;
}

/* Altera a cor do ícone de play do YouTube */
.icon-youtube-play:before {
    color: #c4302b !important;
}

/* Define a cor do link dentro de .produto-video */
.produto-video a {
    color: #212529;
}

/* Estiliza o botão com a classe .botao.principal */
.botao.principal {
    background-color: #3C096C !important;
    box-shadow: 0 3px 9px -2px #3C096C !important;
    border: none !important;
    border-radius: 8px !important;
    color: #F8F9FA !important;
    padding: 10px 20px !important;
}

/* Esconde os elementos com as classes .scrollToTop e .float-contact */
.scrollToTop, .float-contact {
    display: none !important;
}

/* Esconde o ícone de home no cabeçalho em dispositivos móveis */
#cabecalho .atalhos-mobile > ul > li > a.icon-home {
    display: block !important;
}

/* Estiliza os elementos de atalho no cabeçalho em dispositivos móveis */
#cabecalho .atalhos-mobile > ul .li-menu .atalho-menu {
    padding: 0 !important;
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: block ;
    align-items: left;
    justify-content: left;
}

/* Remove a margem do ícone de menu no cabeçalho em dispositivos móveis */
#cabecalho .atalhos-mobile > ul .li-menu .atalho-menu .icon-reorder {
    margin: 0;
}

/* Estilos específicos para largura de tela até 768px */
@media(max-width: 768px) {
    /* Ajusta a largura do elemento com a classe .busca */
    #cabecalho .busca {
        width: 80%;
    }
    
    /* Remove o preenchimento do link de atalho em dispositivos móveis */
    #cabecalho .atalhos-mobile > ul > li > a {
        padding: 0 !important;
    }

    /* Esconde o elemento com a classe .span3 em dispositivos móveis */
    #cabecalho .conteiner > .row-fluid > .span3 {
    }
}


/* Estilos para os elementos dentro de .banner-unico */
.banner-unico {
    display: grid;
    grid-row-gap: 15px;
}

/* Estilos para partes específicas dentro de .banner-unico */
.banner-unico .part1, .banner-unico .part2 {
    display: grid;
}

/* Estilos para links e imagens dentro de partes de .banner-unico */
.banner-unico .part1 > div > a, .banner-unico .part2 > div > a, .banner-unico .part1 > div > a > img, .banner-unico .part2 > div > a > img {
    display: block;
    width: 100%;
}

/* Estilos específicos para a primeira parte de .banner-unico */
.banner-unico .part1 {
    grid-column-gap: 15px;
    grid-template-columns: 1fr max(225px);
}

/* Estilos específicos para a segunda parte de .banner-unico */
.banner-unico .part2 {
    grid-column-gap: 15px;
    grid-template-columns: max(253px) 1fr;
}

/* Esconde elementos com a classe .banner-alpha após .banner-unico */
.banner-unico + .banner-alpha {
    display: none !important;
}

/* Estilos específicos para largura de tela até 768px */
@media(max-width: 768px) {
    /* Ajusta as colunas das partes dentro de .banner-unico */
    .banner-unico .part1, .banner-unico .part2 {
        grid-template-columns: 1fr;
    }
}

/* Esconde o código do produto na página de produto */
.pagina-produto #corpo .produto .principal .info-principal-produto .codigo-produto {
    display: none;
}

/* Estilos para bandeiras de produto */
.bandeiras-produto .bandeira-flag {
    background-color: #3C096C;
    border: none;
    border-radius: 8px;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-weight: 500;
    font-size: 12px;
}

/* Ajusta a margem superior de elementos após #cabecalho com classe has-tarja-topo */
#cabecalho.has-tarja-topo + #fullbanner-mob + .secao-banners,
#cabecalho.has-tarja-topo + .secao-banners,
#cabecalho.has-tarja-topo + #corpo {
    margin-top: 195px;
}

/* Estilos para o elemento elTarjaTopo */
#elTarjaTopo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    grid-gap: 5px;
}

/* Estilos específicos para largura de tela até 767px */
@media(max-width: 767px) {
    /* Ajusta a margem superior de elementos após #cabecalho com classe has-tarja-topo */
    #cabecalho.has-tarja-topo + #fullbanner-mob,
    #cabecalho.has-tarja-topo + #fullbanner-mob + .secao-banners,
    #cabecalho.has-tarja-topo + .secao-banners,
    #cabecalho.has-tarja-topo + #corpo {
        margin-top: 195px;
    }
}

/* Estilos para ações de produtos na página de produto */
.pagina-produto #corpo .produto .principal .acoes-produto {
    position: relative;
}

/* Estilos para imagem de tarja informativa em produtos */
.pagina-produto #corpo .produto .principal .acoes-produto img.tarja-info-produto {
    float: right;
    height: 80px;
    margin: 15px 0;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: 115px;
    margin-right: 30px;
}

/* Estilos específicos para largura de tela mínima de 768px */
@media(min-width: 768px) {
    /* Ajusta a largura máxima e margens horizontais da classe .secao-banners */
    .secao-banners {
        max-width: 1250px;
        margin-left: auto;
        margin-right: auto;
    }
}