/* Estado normal do menu */
.menu-principal a,
.menu a,
.navbar a {
  color: #f5f5f5 !important; /* cor clara visível sobre o fundo marrom escuro */
}

/* ESTADO HOVER: deixa marrom escuro ao passar o mouse */
.menu-principal a:hover,
.menu a:hover,
.navbar a:hover {
  color: #543913 !important; /* marrom escuro */
}


/* Categoria ativa (selecionada) */
.sidebar-categorias .categoria-ativa {
  background-color: #8B6E3C; /* cor de fundo destacada */
  color: #FFFFFF; /* texto branco para contraste */
  font-weight: bold;
}

/* Categorias inativas */
.sidebar-categorias .categoria-inativa {
  background-color: transparent;
  color: #4A4A4A; /* cinza escuro para boa leitura */
  font-weight: normal;
}

/* Efeito hover para categorias inativas */
.sidebar-categorias .categoria-inativa:hover {
  background-color: #F5F5F5;
  color: #8B6E3C;
  cursor: pointer;
}


.categorias-lista a,
.categorias-lista a:visited {
  color: #543913 !important; /* sua cor principal, bem escura */
}

.categorias-lista a:hover,
.categorias-lista a:focus {
  color: #967036 !important; /* cor secundária para hover */
}


/* Menu superior – categorias no cabeçalho */
.menu .titulo {
  color: #543913 !important; /* cor principal escura */
}

/* Menu lateral – categorias na barra lateral */
.menu.lateral .nivel-um > li > a > .titulo {
  color: #543913 !important;
}

/* Subcategorias – se aplicável */
.menu.lateral .nivel-dois li a {
  color: #543913 !important;
}
/* Define o fundo do menu superior (opcional) */
.menu.superior {
  background-color: #543913 !important; /* cor marrom escura, se quiser manter o fundo atual */
}

/* Define a cor do texto dos itens do menu superior para branco */
.menu.superior .titulo {
  color: #FFFFFF !important;
}

/* Define a cor do texto ao passar o mouse (hover) */
.menu.superior .titulo:hover {
  color: #F5EBD8 !important; /* tom suave de bege, opcional para efeito de hover */
}

/* Ainda cobre menus suspensos (se houver submenu) */
.menu.superior .nivel-dois a {
  color: #FFFFFF !important;
}

/* Ajustes apenas para telas de até 480px */
@media (max-width: 480px) {
  .header-logo img {
    max-width: 120px; /* Reduz o logo */
    height: auto;
  }

  .search-box input {
    font-size: 14px; /* Ajusta tamanho da busca */
  }

  .product-card {
    padding: 8px; /* Espaçamento menor nos cards */
  }
}