/* Força imagem grande no tema Galeria - mobile e desktop */
.produto .foto-produto img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
}

/* Força largura do container da imagem */
.produto .foto-produto {
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
  margin-bottom: 10px !important;
}

/* Mobile: força 1 por linha e destaque na imagem */
@media only screen and (max-width: 768px) {
  .listagem .produto {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 10px !important;
  }

  .produto .foto-produto img {
    max-height: none !important;
  }
}.produto .foto-produto img {
  max-height: 300px !important;
}

/* Aumentar a imagem e centralizar */
.produto .foto-produto,
.produto .foto-produto img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 300px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 10px auto !important;
}

/* Deixa o botão mais delicado */
.botao-comprar {
  font-size: 14px !important;
  padding: 6px 16px !important;
  background-color: #222 !important;
  color: #fff !important;
  border-radius: 6px !important;
  transition: all 0.3s ease;
}
/* === 1. Imagens grandes e proporcionais === */
.produto .foto-produto,
.produto .foto-produto img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 320px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
}

/* === 2. Botão COMPRAR bem chamativo em laranja === */
.botao-comprar {
  font-size: 16px !important;
  font-weight: bold !important;
  padding: 12px 24px !important;
  background-color: #ff6600 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  transition: background-color 0.3s ease;
}

.botao-comprar:hover {
  background-color: #e05500 !important;
}

/* === 3. Categoria visível no topo como barra horizontal === */
.menu.superior {
  background-color: #ff6600 !important;
  color: white !important;
  padding: 12px 0 !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-align: center !important;
}

.menu.superior a {
  color: white !important;
  padding: 10px 0px !important;
  display: inline-block !important;
  text-decoration: none !important;
}

.menu.superior a:hover {
  background-color: #ff6a00 !important;
  border-radius: 4px !important;
}

/* Mobile: 1 produto por linha */
@media only screen and (max-width: 768px) {
  .listagem .produto {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
}
/* 🔧 Ajuste de layout para mobile */
@media only screen and (max-width: 768px) {
  .listagem .produto {
    width: 100% !important;
    display: block !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .produto .foto-produto img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  .botao-comprar {
    width: auto !important;
    font-size: 16px !important;
    padding: 12px 20px !important;
    background-color: #ff6600 !important;
    color: #fff !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
  }
}
/* Emojis automáticos nas categorias principais do menu superior */
/*.menu.superior a[href*="infantil"]::before {*/
/*  content: "🌈 ";*/
/*}*/

.menu.superior a[href*="safari"]::before {
  content: "🐘 ";
}

.menu.superior a[href*="espaco"]::before {
  content: "🚀 ";
}

.menu.superior a[href*="princesas"]::before {
  content: "👑 ";
}

.menu.superior a[href*="futebol"]::before {
  content: "⚽ ";
}

.menu.superior a[href*="mapa"]::before {
  content: "🗺️ ";
}
/* Ajusta largura e quebra de texto dos nomes de subcategorias */
.menu-lateral li a,
.menu-categorias li a,
.menu .nivel-1 a,
.menu .nivel-2 a,
.menu .nivel-3 a {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  max-width: 100% !important;
  display: block !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
}
/* Fundo azul no menu lateral de categorias */
.menu-lateral,
.menu-categorias,
.menu {
  background-color: #007BFF !important; /* Azul forte (pode trocar por outro tom) */
  padding: 10px;
}

/* Estilo dos links no menu */
.menu-lateral li a,
.menu-categorias li a,
.menu .nivel-1 a,
.menu .nivel-2 a,
.menu .nivel-3 a {
  color: #fff !important; /* Texto branco */
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  display: block !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  border-radius: 4px;
  transition: background-color 0.3s;
}

/* Hover com azul mais escuro */
.menu-lateral li a:hover,
.menu-categorias li a:hover,
.menu .nivel-1 a:hover {
  background-color: #0056b3 !important;
  color: #fff !important;
}