#header-main .element-menu-category-header #menu-category-header .menu-category-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    width: 100%;
   }
  

#header-main .element-search .search-field {
    background: rgba(0, 0, 0, 0.25);
    border: 0;
       color: #ffffff;
    font-size: 12px;
    line-height: 18px;
    padding: 18px 16px 18px 48px;
    position: relative;
}
#header-main div[class^="header"].header-1 {
    line-height: 16px;
    padding: 10px 0;
    BACKGROUND: #486788;
}
#header-main div[class^="header"] {
    padding: 13px 0;
    position: relative;
    BACKGROUND: ##fe4f02
       ;
}

/* Certifique-se de que o menu de categorias está sendo estilizado corretamente */
#nav-main .element-menu-category .menu-category-list {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 12px !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Certifique-se de que o menu de categorias está sendo estilizado corretamente */
#nav-main .element-menu-category .menu-category-list {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 12px !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Estilização dos itens do menu */
#nav-main .element-menu-category .menu-category-list li {
    text-transform: capitalize !important;
    padding: 5px 8px !important;
    position: relative !important;
}

/* Ajuste para garantir visibilidade do menu */
#nav-main .element-menu-category {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Melhorando o efeito visual ao passar o mouse */
#nav-main .element-menu-category .menu-category-list li:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 3px !important;
}

/* Estilização das subcategorias igual ao menu correto */
#nav-main .element-menu-category .menu-category-list>li>a {
    font-family: var(--font-title) !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-transform: uppercase !important;
    display: block !important;
    text-decoration: none !important;
}

#nav-main .element-menu-category .menu-category-list>li ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--menu-color) !important;
    padding: 10px 0 !important;
    list-style: none !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px !important;
    min-width: 180px !important;
    z-index: 9999 !important;
}

#nav-main .element-menu-category .menu-category-list>li:hover ul {
    display: block !important;
}

#nav-main .element-menu-category .menu-category-list>li ul li {
    padding: 8px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    display: block !important;
    text-decoration: none !important;
    color: var(--menu-text-color) !important;
}

#nav-main .element-menu-category .menu-category-list>li ul li:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Ajuste do banner para não sobrepor o menu */
.element-banner-main {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 40px !important;
}

/* Ocultando o menu de categorias no cabeçalho */
#header-main .element-menu-category-header {
    display: none !important;
}

/* Ocultando o menu de categorias no cabeçalho */
#header-main .element-menu-category-header {
    display: none !important;
}

/* Ajustando a centralização dos elementos no cabeçalho */
#header-main .container-12 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 5px 20px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Ajustando o logo */
#header-main .grid-logo {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

#header-main .grid-logo .logo img {
    max-width: 140px !important;
    height: auto !important;
}

/* Ajustando a barra de pesquisa */
#header-main .grid-search {
    flex: 3 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#header-main .grid-search .search-inner {
    width: 100% !important;
    max-width: 600px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--text-color) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    background: #fff !important;
}

#header-main .grid-search .search-field {
    width: 100% !important;
    height: 40px !important;
    font-size: 14px !important;
    border: none !important;
    outline: none !important;
    padding: 0 15px !important;
}

/* Ajustando os ícones de conta e carrinho */
#header-main .grid-shopping-cart {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 15px !important;
}

#header-main .grid-shopping-cart .list-shopping-cart {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Ajustando a tarja do topo para um visual mais fino e elegante */
#header-main .header-top-bar {
    background: var(--header-color) !important;
    color: var(--header-text-color) !important;
    font-size: 12px !important;
    text-align: center !important;
    padding: 3px 0 !important;
}

/* Ajustando o espaçamento do banner para manter harmonia */
.element-banner-main {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 2px !important;
}

#header-main div[class^="header"].header-1 {
    line-height: 10px;
    padding: 5px 0;
    BACKGROUND: #000000;
}

/* Ajustando a barra de pesquisa para centralizar e aumentar o tamanho */
#header-main .grid-search {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 2 !important;
}

#header-main .grid-search .search-inner {
    width: 100% !important;
    max-width: 700px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--text-color) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    background: transparent !important;
}

#header-main .grid-search .search-field {
    width: 100% !important;
    height: 45px !important;
    font-size: 16px !important;
    border: none !important;
    outline: none !important;
    padding: 0 15px !important;
    background: transparent !important;
}

/* Ajustando a barra de pesquisa para ficar exatamente no centro do cabeçalho */
#header-main .grid-search {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 800px !important;
}

/* Ajuste do container interno da barra de pesquisa */
#header-main .grid-search .search-inner {
    width: 100% !important;
    max-width: 700px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--text-color) !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    background: #fff !important;
}

/* Ajuste do campo de pesquisa */
#header-main .grid-search .search-field {
    width: 100% !important;
    height: 45px !important;
    font-size: 16px !important;
    border: none !important;
    outline: none !important;
    padding: 0 15px !important;
    background: transparent !important;
    text-align: center !important;
}
#header-main .grid-search .search-inner {
    width: 100% !important;
    max-width: 700px !important;
    height: 50px !important;
    display: flex !important
;
    align-items: center !important;
    border: 1px solid #fdff00 !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    background: #ffffff00 !important;
}

#nav-main .element-menu-category .menu-category-list {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 12px !important;
    gap: 8px !important;
    position: relative !important;
    z-index: 10 !important;
    font-family: 'Arial', sans-serif !important; /* Ajustado para fonte semelhante à Loja do Mecânico */
    font-weight: bold !important;
}

/* Garantindo que a aba de pesquisa sobreponha todas as camadas e tenha a mesma cor do cabeçalho */
.advanced-search {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--header-color) !important; /* Usa a mesma cor do cabeçalho */
    border: 1px solid transparent !important;
    z-index: 999999 !important; /* Certifica-se de que está acima de tudo */
    padding: 5px 0 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    color: var(--header-text-color) !important; /* Mantém a cor do texto do cabeçalho */
}

/* Garantindo que os produtos sugeridos fiquem acima de tudo */
.advanced-search-list,
.advanced-search-categories,
.advanced-search-header {
    position: relative !important;
    z-index: 999999 !important; /* Mantém os itens acima das outras camadas */
}

/* Escondendo o menu de categorias quando a pesquisa está ativa */
#nav-main .element-menu-category {
    z-index: 1 !important;
}

/* Ajustando a lista de resultados da pesquisa para sobrepor o menu */
#header-main .element-search .search-results {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background: var(--header-color) !important; /* Usa a mesma cor do cabeçalho */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 999999 !important; /* Garante que fique acima das categorias */
    border-radius: 5px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    color: var(--header-text-color) !important; /* Mantém a cor do texto do cabeçalho */
}

/* Ajuste para garantir que os itens da pesquisa não sejam escondidos */
#header-main .element-search .search-results ul {
    list-style: none !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 999999 !important; /* Garante que fique acima do menu */
}

#header-main .element-search .search-results li {
    padding: 8px 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    display: block !important;
    text-decoration: none !important;
    color: var(--header-text-color) !important; /* Mantém a cor do texto */
    position: relative !important;
    z-index: 999999 !important; /* Prioriza sobreposição */
}

/* Retornando o menu ao estado visível ao sair da pesquisa */
#header-main .element-search .search-field:not(:focus) ~ #nav-main .element-menu-category {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

#header-main .grid-search .search-inner {
    border: 1px solid #f49b07 !important;
  
}

.element-banner-shop {
    background: #ffffff;
}

body.pagina-home #vitrine div[class^="element-"].element-highlight, body.pagina-home #vitrine div[class^="element-"].element-promotion {
    background: #ffffff;
}

#footer-main .footer-main-inner div[class^="footer-"].footer-1 {
    background: #000000;
    color: var(--header-text-color);
    padding: 40px 0;
}

.element-banner-bottom {
    background: var(--title-color);
    padding: 8px 0 !important;
}

#footer-main .copyright .logo-dloja img, #footer-main .copyright .logo-loja-hostgator img {
  display: none; 
}

#footer-main .copyright .logo-dloja img, #footer-main .copyright .logo-loja-hostgator img ::after {
  content: "Desenvolvido por Brava Comunicação e Tecnologia"; 
  font-size: 14px;
  color: #666;
  text-decoration: none;
  margin-left: 5px; /* espaço entre o link e o texto */
}