/*------------------------------------------------------------------------------
# Autor         : Guilherme Moles da Silva LTDA
# Data          : 27/05/2023
# Versão        : 1.0
# Função        : Estilização E-commerce Tio do Lavacar
# ----------------------------------------------------------------------------*/


/*--------------------------------- ROOT -------------------------------------*/

/*Efeito barra de rolagem*/
*::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #F6D972, #986348);
    border-radius: 10px;
    border: 2px solid #202020;
}

/*Efeito de Brilho para os Botões Dourados*/
@keyframes brilho {
    0% {
    background-position: 0 0;
    background-position-x: 0px;
    background-position-y: 0px;
    }
    100% {
    background-position: 100% 0;
    background-position-x: 100%;
    background-position-y: 0px;
    }
}

#cabecalho .main-header .conteudo-topo .carrinho .qtd-carrinho+* .cor-secundaria {
}

#corpo .listagem#listagemProdutos .titulo-categoria, #rodape .titulo, .cor-secundaria, .nome-usuario {
    background-image: linear-gradient(151deg, rgb(188 162 68) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#corpo .listagem#listagemProdutos .titulo-categoria strong {
    background-image: linear-gradient(151deg, rgb(188 162 68) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    transform: none;
    transition: all 0.0s ease 0s;
    resize: none;
    text-shadow: none;
    text-overflow: clip;
    word-wrap: normal;
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho;
    background-image: linear-gradient(45deg, #986348, #F6D972, #986348, #F6D972);
    background-size: 400% 200%;
    transition: background 5s ease, box-shadow 0.5s;
}

/*--------------------------------- CABEÇALHO---------------------------------*/

/* Altera cor do background do cabeçalho */
#cabecalho>.conteiner {
    background-color: #112d4e;
}

/* Altera cor do background do cabeçalho */
#cabecalho>.conteiner>.row-fluid {
    background-color: #112d4e;
}

/* Ajuste de Logo */
.logo a img {
    max-height: 80%;
}

#cabecalho .menu-handler {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
}

/* Altera cor da Lupa do Cabeçalho */
#cabecalho>.conteiner .main-header .conteudo-topo .busca .botao-busca {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Altera a cor da fonte do Cabeçalho */
#cabecalho>.conteiner .main-header .conteudo-topo .actions-menu li a:not(.botao) {
    color: white;
}

/* Altera a Cor de Quantidade do Carrinho*/
#cabecalho .main-header .conteudo-topo .carrinho .qtd-carrinho:before {
    background: #1a4578;
}

/* Altera a Cor de Quantidade do Carrinho Scroll*/
#cabecalho.fixed .main-header .conteudo-topo .carrinho>a .qtd-carrinho:before {
    background: #1a4578;
}

/* Altera a Cor de Quantidade do Carrinho Mobile ESSE TA CERTO NÃO MEXER */
#cabecalho>.conteiner .main-header .conteudo-topo .actions-menu .menu-carrinho .carrinho>a .qtd-carrinho {
    border-radius: 8em;
    color: white;
    background: white;
}

/* Altera a cor dos Icones do Cabeçalho */
#cabecalho>.conteiner .main-header .conteudo-topo .actions-menu li>a>i {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Altera a cor do Carrinho de Compras */
.icon-shopping-cart:before {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Altera a cor do Carrinho de Compras Scroll */
#cabecalho.fixed>.conteiner>.main-header .carrinho>a .icon-shopping-cart {
    color: #fff;
}

/* Altera a cor do Circulo do Carrinho de Compras Scroll */
#cabecalho.fixed>.conteiner>.main-header .carrinho>a {
    background-color: #112d4e;
    border-radius: 100px;
}

/* Altera a cor da fonte do SubMenu */
#cabecalho>.conteiner .main-header .conteudo-topo .actions-menu li .submenu a, #cabecalho>.conteiner .main-header .conteudo-topo .actions-menu li .submenu span {
    color: #112d4e;
}

/* Efeito dourado no botão do submenu do carrinho de compras*/
#cabecalho .main-header .conteudo-topo .carrinho .carrinho-interno-ajax .carrinho-interno .botao.principal {
    transform: none;
    transition: all 0.0s ease 0s;
    box-sizing: border-box;
    resize: none;
    text-shadow: none;
    text-overflow: clip;
    word-wrap: normal;
    box-shadow: rgba(246, 217, 114, 0.557) 0px 0px 8.329px 0.555266px;
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho;
    background-image: linear-gradient(45deg, #986348, #F6D972, #986348, #F6D972);
    background-size: 400% 200%;
    transition: background 5s ease, box-shadow 0.5s;
}

/* Efeito dourado no botão do submenu do carrinho de compras*/
#cabecalho .main-header .conteudo-topo .carrinho .carrinho-interno-ajax .carrinho-interno .botao.principal {
    background-image: #1a4578;
}

/*--------------------------------- MENNU-------------------------------------*/

/* Altera cor do background menu do Celular */
#cabecalho .menu.superior .nivel-um {
    background: none;
}    
    
/* Altera cor do background  do Menu */ 
#cabecalho .menu.superior {
    background: #1a4578;
}    

/* Altera cor do background do Menu Scroll*/
#cabecalho.fixed .menu.superior {
    background: #112d4e;
}

/* Altera cor da fonte do Menu */
#cabecalho .menu.superior .nivel-um>li>a strong {
    font-size: 18px;
    color: white;
}

/* Altera tamanho da fonte do Menu*/
#cabecalho .menu.superior .nivel-um>li>a strong {
  font-size: 16px; /* Defina o tamanho da fonte desejado */
}

/* Altera cor da fonte do menu Hover */
#cabecalho .menu.superior .nivel-um>li>a strong:hover {
    opacity: 100;
    transform: none;
    transition: all 0.0s ease 0s;
    resize: none;
    text-shadow: none;
    text-overflow: clip;
    word-wrap: normal;
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho;
    background-image: linear-gradient(45deg, #986348, #F6D972, #986348, #F6D972);
    background-size: 400% 200%;
    transition: background 5s ease, box-shadow 0.5s;
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ajuste de posição do Menu*/
#cabecalho.fixed .menu.superior .nivel-um {
    width: 100;
    max-width: 100%;
}

/*--------------------------------- BOTÕES------------------------------------*/

/*Efeito de Brilho botão Comprar*/
.botao-comprar:not([class*=icon]), .botao.comprar:not([class*=icon]) {
    transform: none;
    transition: all 0.0s ease 0s;
    box-sizing: border-box;
    resize: none;
    text-shadow: none;
    text-overflow: clip;
    word-wrap: normal;
    box-shadow: rgba(246, 217, 114, 0.557) 0px 0px 8.329px 0.555266px;
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho;
    background-image: linear-gradient(45deg, #986348, #F6D972, #986348, #F6D972);
    background-size: 400% 200%;
    transition: background 5s ease, box-shadow 0.5s;
}

/*Hover do Botão Comprar*/
.botao-comprar:not([class*=icon]):before, .botao.comprar:not([class*=icon]):before, .botao.fundo-principal:not([class*=icon]):before, .botao.fundo-secundario:not([class*=icon]):before, .botao.principal:not([class*=icon]):before {
        transform: none;
    transition: all 0.0s ease 0s;
    box-sizing: border-box;
    resize: none;
    text-shadow: none;
    text-overflow: clip;
    word-wrap: normal;
    box-shadow: rgba(246, 217, 114, 0.557) 0px 0px 8.329px 0.555266px;
    animation: 3.4s cubic-bezier(0.2, 0.5, 0.9, 0.6) 2s infinite brilho;
    background-image: linear-gradient(45deg, #986348, #F6D972, #986348, #F6D972);
    background-size: 400% 200%;
    transition: background 5s ease, box-shadow 0.5s;
    box-shadow: 0 0 15px 1px #F6D972;
}

#cabecalho.fixed>.conteiner>.main-header .conteudo-topo .actions-menu>* .carrinho>a .icon-shopping-cart:after {
    box-shadow: 0 0 15px 1px #F6D972;
    transition: all .8s;
}

#cabecalho.fixed>.conteiner>.main-header .conteudo-topo .actions-menu>* .carrinho>a .icon-shopping-cart:after:hover {
    box-shadow: 0 0 15px 1px #F6D972;
    transition: all .8s;
}


/*--------------------------------- OUTROS------------------------------------*/

/* Alteração cor icone breadcrumbs */
#corpo .breadcrumbs ul li:nth-last-child(n+2):after, .info-principal-produto .breadcrumbs ul li:nth-last-child(n+2):after {
    border-left-color: #D3B167;
}

/* Alteração cor icone home breadcrumbs */
.icon-home:before {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Alteração cor titulo barra lateral */
.secao-principal .coluna .componente .titulo {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Altera cor da barra lateral para categoria selecionada */ 
.secao-principal .coluna .menu.lateral:not(.outras) .nivel-um>li>a {
    background-image: linear-gradient(151deg, rgb(188 162 68) 0%, rgb(152, 99, 72) 100%);
}

/* Alteração cor icone de cópia */
.icon-file-text:before {
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Alteração cor icone de Envelope */
.icon-envelope-alt:before {
    content: "\f003";
    background-image: linear-gradient(151deg, rgb(188 162 68) 0%, rgb(152, 99, 72) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*--------------------------------- RODAPÉ------------------------------------*/

#barraNewsletter, #barraNewsletter .show-hide, #barraNewsletter .componente, #barraNewsletter.posicao-rodape .conteiner {
    background-color: rgba(0, 0, 0, 0);
}

/* Estilização da Barra de Newsletter */
#barraNewsletter .componente .interno-conteudo .texto-newsletter {
    font-weight: 400;
    color: white;
}

/* Estilização da Barra de Newsletter */
#barraNewsletter.posicao-rodape{    
    /* Color & Background */
    background-attachment: scroll;
    background-color: rgba(0, 0, 0, 0);
    background-image: linear-gradient(151deg, rgb(246, 217, 114) 0%, rgb(152, 99, 72) 100%);
    background-position: 0% 0%;
    background-repeat: repeat;
    color: rgb(51, 51, 51);

    /* Box */
    border: 0px none rgb(51, 51, 51);
    border-top: 0px none rgb(51, 51, 51);
    border-right: 0px none rgb(51, 51, 51);
    border-bottom: 0px none rgb(51, 51, 51);
    border-left: 0px none rgb(51, 51, 51);
    margin: 0px;
    padding: 0px 20px;
    max-height: none;
    min-height: 0px;
    max-width: 100%;
    min-width: 0px;

    /* List */
    list-style-image: none;
    list-style-type: disc;
    list-style-position: outside;

    /* Table */
    border-collapse: separate;
    border-spacing: 0px 0px;
    caption-side: top;
    empty-cells: show;
    table-layout: auto;

    /* Miscellaneous */
    overflow: visible;
    cursor: auto;
    visibility: visible;

    /* Effects */
    transform: none;
    transition: background 0.3s ease 0s, border 0.3s ease 0s, box-shadow 0.3s ease 0s, transform 0.4s ease 0s;
    box-sizing: border-box;
    resize: none;
    text-shadow: none;
    text-overflow: clip;
    word-wrap: normal;
    box-shadow: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

/* Altera cor do Rodapé */
element.style {
    background-color: #112D4E;
}
#rodape>div:last-child {
    border-top-color: #e7e7e7!important;
    background: #112D4E!important;
}