/* === FAIXA SUPERIOR (FRETE GRÁTIS) === */
/* Ícone de caminhão (SVG) com animação */
.banner-topo {
  background: linear-gradient(90deg, #003b7a, #007bff);
  display: flex;
  align-items: center;
  justify-content: center !important;
  text-align: center !important;
  padding: 10px 15px;
  position: relative;
  overflow: hidden;
  gap: 10px;
  flex-wrap: nowrap;
}

@media (min-width: 769px){
  .banner-texto {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
    position: relative;
    z-index: 2;
  }
}

.icon-frete {
  position: absolute;
  left: -80px;
  width: auto;
  height: 35px;
  opacity: 0;
  animation: caminhaoAnimado 8s ease-in-out infinite;
}

@keyframes caminhaoAnimado {
  0% { left: -80px; opacity: 0; z-index: 1; }
  10% { left: 0; opacity: 1; z-index: 1; }
  30% { left: 40%; opacity: 1; z-index: 0; }
  60% { left: 80%; opacity: 1; z-index: 1; }
  85% { left: 100%; opacity: 0.5; }
  100% { left: 120%; opacity: 0; }
}

@media screen and (max-width: 768px) {
  .banner-topo .banner-texto { display: none !important; }
  .banner-topo .icon-frete { display: none !important; }
}

@media screen and (max-width: 768px) {
  .banner-topo {
    min-height: 110px !important;
    height: auto !important;
  }
}

a.cor-secundaria[title="Mil Coisas Materiais Elétricos"] {
  position: relative;
  padding-left: 25px; /* espaço para a logo */
  background: url("https://SEU-LINK-DA-LOGO.png") no-repeat left center;
  background-size: 18px auto; /* tamanho da logo */
  display: inline-block;
  line-height: 20px;
}



/* Ocultar fundo vermelho do carrinho no mobile */
@media screen and (max-width: 768px) {
  .fundo-principal,
  .fundo-principal a {
    background: transparent !important;
    border: none !important;
  }
}


/* Remover meus pedidos */
#cabecalho .conteiner .superior .span4 { display:none; }
/* Oculta apenas o link "Meus Pedidos" */




/* Ícones redes sociais cabeçalho */
.barra-inicial .icon-facebook,
.barra-inicial .icon-instagram {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: 22px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: all 0.3s ease;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  background-color: #FFD700 !important;
}

/* Facebook */
.barra-inicial .icon-facebook {
  background-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/facebook.svg');
}
.barra-inicial .icon-facebook:hover {
  background-color: #fff !important;
  animation: pulse 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Instagram */
.barra-inicial .icon-instagram {
  background-image: url('https://cdn.jsdelivr.net/gh/simple-icons/simple-icons/icons/instagram.svg');
}
.barra-inicial .icon-instagram:hover {
  background-color: #fff !important;
  animation: pulse 0.4s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Remover ícones ::before sobrepostos das redes sociais */
.barra-inicial .icon-facebook::before,
.barra-inicial .icon-instagram::before,
#rodape .redes-sociais .icon-facebook::before,
#rodape .redes-sociais .icon-instagram::before {
  content: none !important;
  display: none !important;
}

/* Botões gerais */
.botao,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  background: linear-gradient(90deg, #003b7a, #007bff);
  color: #fff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.botao:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background: linear-gradient(90deg, #007bff, #003b7a);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

/* Menu lateral */
.menu.lateral {
  background-color: #fff !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 20px;
  text-align: center;
}

/* Primeiro item em destaque com reflexo */
.menu.lateral .nivel-um > li:first-child > a {
  position: relative;
  background: #fff !important;
  color: #003b7a !important;
  font-weight: 800;
  padding: 14px 20px;
  font-size: 17px;
  text-align: center;
  border-radius: 12px 12px 0 0;
  letter-spacing: 0.8px;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}

.menu.lateral .nivel-um > li:first-child > a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: reflexo 3s infinite;
}

@keyframes reflexo {
  0% { left: -75%; }
  100% { left: 125%; }
}

.menu.lateral .nivel-um > li:first-child > a:hover {
  background: #f8f9fa !important;
  color: #007bff !important;
  transform: scale(1.03);
  text-shadow: 0 0 7px rgba(255,255,255,0.7);
}

/* Demais itens */
.menu.lateral .nivel-um > li + li > a {
  display: block;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  transition: all 0.2s ease-in-out;
  text-align: center;
}

.menu.lateral .nivel-um > li + li > a:hover {
  background-color: #f1f7ff;
  color: #003b7a;
  transform: translateX(4px);
  font-weight: 700;
}

.menu.lateral .nivel-um > li:last-child > a {
  border-bottom: none;
  border-radius: 0 0 13px 13px;
}

/* Ícones no menu superior */
#cabecalho .menu.superior li:nth-child(1) a::before { content: "\f5e7"; }
#cabecalho .menu.superior li:nth-child(2) a::before { content: "\e4da"; }
#cabecalho .menu.superior li:nth-child(3) a::before { content: "\f6f1"; }
#cabecalho .menu.superior li:nth-child(4) a::before { content: "\f7d9"; }
#cabecalho .menu.superior li:nth-child(5) a::before { content: "\f0eb"; }
#cabecalho .menu.superior li:nth-child(6) a::before { content: "\f291"; }
#cabecalho .menu.superior li:nth-child(7) a::before { content: "\f541"; }

#cabecalho .menu.superior li a::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 10px;
  font-size: 25px;
  color: #FFD700;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  line-height: 1 !important;
  vertical-align: middle;
}

#cabecalho .menu.superior li a:hover::before {
  transform: scale(1.3);
  color: #FFA500;
}

/* Remove divisórias do menu superior */
#cabecalho .menu.superior li { border: none !important; }

/* Remover barra social rodapé */
.redes-sociais { display:none !important; }

/* Menu principal modernizado */
.menu.superior {
  background: transparent !important;
  display: flex;
  justify-content: center;
  border-bottom: 3px solid red;
  padding: 5px 0;
}

.menu.superior .nivel-um {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu.superior .nivel-um li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  text-decoration: none;
  font-weight: bold;
  color: #333;
  position: relative;
  transition: transform 0.2s ease, color 0.2s ease;
}

.menu.superior .nivel-um li a:active {
  transform: scale(0.95);
  color: #e60000;
}

.menu.superior .nivel-um li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background: #e60000;
  transition: width 0.3s ease;
}

.menu.superior .nivel-um li a:hover::after { width: 100%; }

/* Utilidades */
.hide-mobile { display: block; }

/* Menu lateral off-canvas (hamburger) */
.menu-lateral {
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100%;
  background: #003b7a;
  color: #fff;
  transition: right 0.3s ease;
  z-index: 1000;
  padding: 20px;
}
.menu-lateral ul { list-style: none; padding: 0; }
.menu-lateral li { margin-bottom: 15px; }
.menu-lateral a { color: #fff; text-decoration: none; font-size: 16px; }
.menu-lateral.aberto { right: 0; }


/* Campo busca */
.busca.borda-alpha {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-left: -20px; /* empurra 20px para a esquerda */
}

.busca input#auto-complete {
  background-color: #ffffff !important;
  border: 1px solid #ccc !important;
  border-radius: 30px !important;
  padding: 10px 15px !important;
  box-shadow: none !important;
  margin-left: -20px; /* empurra 20px para a esquerda */
}



.busca .botao-busca {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #0d6efd !important;
  font-size: 18px !important;
  padding: 0 8px !important;
  margin-left: -40px; /* empurra 40px para a esquerda */
}

.atalho-menu.visible-phone {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* Botão flutuante do WhatsApp */
.whatsapp-flutuante {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.whatsapp-flutuante:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
  animation: pulse-whatsapp 1s infinite;
}
.whatsapp-flutuante i { line-height: 1; }
@keyframes pulse-whatsapp {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(37, 211, 102, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 12px rgba(37, 211, 102, 0.7); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(37, 211, 102, 0.7); }
}


/* Avaliações no rodapé */
#rodape .avaliacoes-clientes-rodape {
  position: relative !important;
  top: -90px !important;
  margin-bottom: -90px !important;
  z-index: 2 !important;
}

/* Barras e faixas do rodapé */
.institucional.fundo-secundario {
  background-color: #004080 !important;
  background-image: none !important;
}

.pagamento-selos {
  background-color: #7f8c99 !important;
  color: #ffffff;
  padding: 20px 0;
  text-align: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  background-image: none !important;
}

.busca-mobile input {
  padding: 4px 12px;
  border-radius: 5px;
  border: none;
  font-size: 14px;
  align-items: center !important;
  margin-left: 20px; /* empurra 20px para a direita */
}


/* Ajuste campo busca no mobile */
@media (max-width: 767px) {
  .banner-topo { position: relative; }
  .span8.busca-mobile {
    position: absolute;
    bottom: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 92% !important;
    margin-top: 0 !important;
    align-items: center;
    justify-content: center;
  }
}

/* Campos de CEP */
#formCalcularCep input.input-cep {
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 8px 10px;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

#formCalcularCep button.btn {
  border-radius: 8px;
  background: linear-gradient(135deg, #a0a0a0, #6f6f6f);
  color: #fff;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}
#formCalcularCep button.btn:hover {
  background: linear-gradient(135deg, #8c8c8c, #5f5f5f);
}
#formCalcularCep .input-append.input-prepend {
  display: flex;
  gap: 8px;
}

@media screen and (max-width: 768px) {
  /* Botão Calcular Frete - mobile */
  #btn-frete {
    border-radius: 8px;
    background: #5f5f5f;
    color: #fff;
    border: none;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  #btn-frete:hover {
    background: #5f5f5f;
  }
  #btn-frete i { font-size: 14px; }

  .input-append input.input-cep {
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 8px 10px;
    font-size: 14px;
    flex: 1;
  }
  .input-append {
    display: flex;
    gap: 8px;
    width: 100%;
  }
}
@keyframes neon-glow {
  0%, 100% {
    box-shadow: 0 0 4px var(--azul-neon), 0 0 8px var(--azul-neon);
  }
  50% {
    box-shadow: 0 0 12px var(--azul-neon), 0 0 24px var(--azul-neon);
  }
}

#auto-complete:focus {
  border-color: var(--azul-neon);
  animation: neon-glow 1.5s infinite alternate;
}



/* Botão comprar - ajustes mobile */
@media (max-width: 768px) {
  a.botao-comprar.principal.grande {
    background: linear-gradient(to right, #0052cc, #3399ff);
    color: #ffffff;
    font-weight: bold;
    border-radius: 8px;
    padding: 14px 25px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-size: 18px;
    animation: pulse-btn 2s infinite;
  }
  a.botao-comprar.principal.grande i.icon-shopping-cart {
    color: #ffcc00;
    margin-right: 10px;
    font-size: 20px;
  }
  a.botao-comprar.principal.grande:hover {
    background: linear-gradient(to right, #3399ff, #0052cc);
    transform: translateY(-2px);
    box-shadow: 0 7px 12px rgba(0,0,0,0.3);
    cursor: pointer;
  }
  a.botao-comprar.principal.grande:active {
    transform: translateY(1px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  }
}
@keyframes pulse-btn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Carrossel Mobile */
@media (min-width: 769px) { #carrossel-mobile { display: none !important; } }
@media (max-width: 768px) {
  #carrossel-mobile.ready {
    display: block;
    background: #fff;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100% !important;
  }
  #carrossel-mobile .carrossel-container {
    position: relative;
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding: 0;
  }
  #carrossel-mobile .carrossel-container img {
    width: 100% !important;
    height: auto;
    border-radius: 0;
    display: block;
    transition: opacity 0.5s ease-in-out;
  }
  #carrossel-mobile .dots {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    gap: 6px;
  }
  #carrossel-mobile .dot {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
  }
  #carrossel-mobile .dot.active { background: #0077ff; }
}


/* === Carrinho modernizado - desktop (mantém seu CSS original) === */
@media screen and (min-width: 769px){
  .carrinho {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
    margin-left: 20px; /* empurra 20px para a direita */
    transition: transform 0.2s ease;
  }

  .carrinho:hover { transform: scale(1.05); }

  .carrinho i.icon-shopping-cart {
    background: none;
    color: #0077ff;
    font-size: 26px;
    padding: 0;
    position: relative;
    margin-left: 20px; /* empurra 20px para a direita */
}

  }

  .carrinho .qtd-carrinho {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff3b3b, #c40000);
    color: #fff !important;
    font-size: 12px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    margin-left: 20px; /* empurra 20px para a direita */
    top: -10px;
    right: -6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    animation: pulse 1.5s infinite;
  }


@keyframes aura {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.25);
  }
  40% { 
    box-shadow: 0 0 0 15px rgba(255, 59, 59, 0.1);
  }
  70% {
    box-shadow: 0 0 0 25px rgba(255, 59, 59, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); /* pausa invisível */
  }
}

.seu-elemento {
  animation: aura 6s ease-out infinite;
}


/* Forçar o carrinho a ser referência */
.carrinho {
  position: relative !important;
  z-index: 1000; /* só pro container */
}

/* Dropdown do carrinho sempre sobreposto */
.carrinho-interno-ajax {
  position: absolute !important;
  top: 100%;   /* abre logo abaixo do ícone carrinho */
  right: 0;    /* alinhado à direita */
  z-index: 9999 !important;
  min-width: 280px; /* garante largura mínima */
  max-width: 360px; /* não deixa estourar pra fora */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  margin-top: 8px; /* espacinho do carrinho */
}

/* Ícone do botão carrinho em amarelo */
.carrinho-rodape .botao.principal i {
  color: #FFD700 !important; /* Amarelo padrão */
  font-size: 18px;
}

  /* Botão frete premium - desktop */
  #btn-frete {
    background: linear-gradient(to right, #555555, #888888);
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  #btn-frete i.icon-truck {
    color: #ffcc00;
    margin-right: 8px;
    font-size: 18px;
  }
  #btn-frete:hover {
    background: linear-gradient(to right, #888888, #555555);
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.3);
  }
  #btn-frete:active {
    transform: translateY(1px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  }


/* Ajustes extra do botão comprar em telas menores */
@media screen and (max-width: 768px) {
  .botao-comprar.principal.grande {
    padding: 6px 12px !important;
    font-size: 14px !important;
    width: auto !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .botao-comprar.principal.grande i { font-size: 14px !important; }
}

/* Bandeiras e ações */
.acoes-produto-responsiva .titulo,
.acoes-produto-responsiva .icon-search { color: #ffcc00 !important; }
.listagem-item .tag-comprar { color: #ffcc00 !important; }
.listagem-item .icon-search { color: #ffcc00 !important; }

/* PIX - acordeão */
.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #fff7e0, #FFE680);
  border: none;
  outline: none;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 350px;
  margin: 10px 0;
}
.accordion-toggle:hover {
  background: linear-gradient(135deg, #fff3cc, #FFD233);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.accordion-toggle .text-parcelas {
  font-weight: 900;
  font-size: 1.9em;
  color: #FF0000;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
  margin-right: 16px;
}
.accordion-toggle .img-parcelas-pagali-pix { width: 60px; height: auto; }
@media (max-width: 768px) {
  .accordion-toggle { max-width: 100%; padding: 14px 16px; }
  .accordion-toggle .text-parcelas { font-size: 1.5em; }
  .accordion-toggle .img-parcelas-pagali-pix { width: 45px; }
}


/* Barra de atalhos mobile (fixa) */
.atalhos-mobile { height: 70px !important; min-height: 70px !important; }
.atalhos-mobile ul {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  height: 100% !important;
  padding: 0 10px !important;
}
.atalhos-mobile ul li { flex: 1 !important; text-align: center !important; border: none !important; }
.atalhos-mobile ul li a { font-size: 22px !important; line-height: 1 !important; color: #003366 !important; }
.atalhos-mobile ul li::before,
.atalhos-mobile ul li::after { display: none !important; content: none !important; }

/* Evita conteúdo atrás do menu */
body { padding-bottom: 80px !important; }

/* Oculta menus grandes no mobile */
@media (max-width: 768px) {
  .menu-principal,
  .menu.superior,
  .cabecalho-categorias { display: none !important; }
}

/* Ícones equilibrados no header */
ul.header-mobile li {
  flex: 1; /* todos os ícones dividem espaço */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Menu toggle NÃO deve ocupar espaço igual aos outros */
ul.header-mobile li.menu-toggle {
  flex: 0; /* só ocupa o espaço do conteúdo */
  padding: 0 8px; /* opcional, controla o respiro lateral */
}

ul.header-mobile li.menu-toggle i {
  font-size: 20px;
}


/* Dropdown de categorias */
.dropdown-categorias {
  display: none;
  position: fixed;           /* fixo na tela */
  top: 60px;                 /* altura do header */
  right: 10px;
  width: 220px;
  background: #fff;
  border: 1px solid #ddd;
  z-index: 9999;             /* acima de tudo */
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dropdown-categorias a {
  display: block;
  padding: 12px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.dropdown-categorias a:hover {
  background: #f5f5f5;
  color: #000;
}

.dropdown-categorias a:last-child {
  border-bottom: none;
}

.dropdown-categorias.ativo {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Logos no mobile/desktop */
@media only screen and (max-width: 767px) {
  /* Oculta apenas o logo antigo, não o menu */
  #cabecalho .logo img {
    display: none !important;
  }

  /* Logo flutuante mobile */
  img.logo-flutuante-mobile {
    height: 180px !important;
    max-height: 180px !important;
    width: auto !important;
    object-fit: contain !important;
    justify-content: center !important;
    display: block !important;
  }

  /* Menu flutuante sempre visível */
  #cabecalho .atalhos-mobile {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    display: flex !important;          /* garante que fique visível */
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
  }

  /* Logo dentro do menu flutuante */
  .atalhos-mobile ul li.logo-mobile {
    flex: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* Botão Ordenar */
#botaoOrdenar {
  background-color: #fff;
  color: #003b7a;
  border: 2px solid #003b7a;
  border-radius: 12px;
  padding: 8px 18px;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.3s ease;
}
#botaoOrdenar:hover { background-color: #003b7a; color: #fff; }
#botaoOrdenar i { font-size: 14px; }

.banner img {
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.bannerg:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.banner img {
  position: relative;
  transition: all 0.7s ease;
}

.banner img:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.banner {
  border-radius: 20px;   /* arredonda as bordas */
  overflow: hidden;      /* garante que o conteúdo dentro acompanha o arredondamento */
}

/* brilho passando */
.banner img:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.6) 50%,
    rgba(255,255,255,0.2) 100%
  );
  transform: skewX(-25deg);
  animation: shine 1s forwards;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}

/* Bordas arredondadas nos mini-banners */
.row-fluid.banner.mini-banner .modulo img {
  border-radius: 10px;   /* pode ajustar 10px, 15px, 30px conforme gosto */
  overflow: hidden;
  transition: transform 0.4s ease, filter 0.4s ease;
}

/* mantém o efeito no hover */
.row-fluid.banner.mini-banner .modulo img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
/* FULL BANNER DE PONTA A PONTA */
.row-fluid.banner.cheio {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw !important;
  max-width: 100vw !important;
  padding: 0 !important;
}


/* Garante que a imagem estique até a borda */
.row-fluid.banner.cheio img {
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  display: block;
  margin:  auto;
}
/* ============================= */
/* FUNDO BRANCO PARA TODO O SITE */
/* ============================= */

/* Fundo geral do site */
body, 
#main-wrapper, 
#container, 
.container, 
.main-wrapper, 
.main-content, 
.content {
    background-color: #ffffff !important;
}

/* Banners */
.banner, 
.banner-topo, 
.banner-section, 
.slider, 
.carousel {
    background-color: #ffffff !important;
}

/* Seções de produtos */
.product-list, 
.product-grid, 
.section, 
.section-content, 
.products-wrapper {
    background-color: #ffffff !important;
}

/* Cabeçalho e menu */
.header, 
.header-top, 
.header-middle, 
.header-bottom, 
#menu-superior, 
#menu-principal {
    background-color: #f8f8f8 !important;
}

/* Rodapé */
.footer, 
.footer-wrapper, 
.footer-section {
    background-color: #ffffff !important;
}

/* ============================= */
/* ESTILO BOTÃO ORDENAR - MIL COISAS */
/* ============================= */

/* Label do dropdown */
.input-append label[for="botaoOrdenar"] {
    font-weight: 600;          /* mais destaque */
    color: #003b7a;            /* azul Mil Coisas, pode ajustar */
    font-size: 14px;            /* tamanho legível */
    margin-right: 5px;           /* espaço do botão */
}

/* Botão dropdown */
#botaoOrdenar {
    background: none !important;   /* remove fundo */
    border: #fff !important;       /* remove borda */
    padding: 0 !important;         /* remove padding extra */
    box-shadow: none !important;   /* remove sombra */
    cursor: pointer;
}

/* Ícone da seta */
#botaoOrdenar i.icon-caret-down {
    color: #ffcc00;              /* amarelo padrão Mil Coisas */
    font-size: 16px;             /* deixa visível, mas discreto */
}

/* Dropdown menu */
.btn-group .dropdown-menu {
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    min-width: 180px;            /* largura mínima confortável */
}

/* Links do dropdown */
.btn-group .dropdown-menu li a {
    font-size: 14px;
    color: #003b7a;             /* azul Mil Coisas */
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

/* Ícones dentro do dropdown */
.btn-group .dropdown-menu li a i {
    color: #ffcc00;             /* amarelo Mil Coisas */
    margin-right: 8px;
}

/* Efeito hover nos itens do dropdown */
.btn-group .dropdown-menu li a:hover {
    background-color: #d8d8d8;
    color: #003b7a;
}


/* ============================= */
/* LINK PÁGINA INICIAL - MIL COISAS */
/* ============================= */

/* Ícone da casinha */
a[href$="/"] i.icon-home {
    color: #ffcc00;       /* amarelo Mil Coisas */
    font-size: 18px;      /* aumenta o tamanho do ícone */
    margin-right: 5px;    /* espaço entre ícone e texto */
}

/* Texto do link */
a[href$="/"] {
    color: #cc0000;       /* vermelho Mil Coisas */
    font-weight: 600;     /* destaca o texto */
    text-decoration: none; /* remove sublinhado */
    font-size: 14px;
}

/* Hover no link */
a[href$="/"]:hover {
    color: #ff0000;       /* vermelho mais vivo ao passar o mouse */
    text-decoration: underline;
}

/* CAMPO NEWSLETTER COM ÍCONE DENTRO - MIL COISAS */
/* ============================= */

/* Container do input e botão */
.newsletter-wrapper {
    position: relative;             /* necessário para posicionar ícone */
    display: inline-block;
    width: 100%;
}

/* Campo de email */
.newsletter-wrapper input[type="email"] {
    width: 100%;
    padding: 8px 40px 8px 10px;    /* espaço à direita para o ícone */
    border: 1px solid #fff;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

/* Botão com ícone dentro */
.botao-input.newsletter-assinar {
    position: absolute;
    top: 50%;
    right: 10px;                   /* espaço interno à direita */
    transform: translateY(-50%);
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
}


/* Ícone dentro do botão */
.botao-input.newsletter-assinar i,
.botao-input.newsletter-assinar::before {
    color: #ffcc00 !important;      /* amarelo Mil Coisas */
    font-size: 18px;
}

/* Hover do ícone */
.botao-input.newsletter-assinar:hover i,
.botao-input.newsletter-assinar:hover::before {
    color: #ff9900 !important;      /* amarelo mais vivo ao passar mouse */
}
/* Container principal */
.interno {
  background-color: #7f8c99;      /* cor existente */
  border: none;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Título da newsletter */
.interno .titulo {
  font-weight: bold;
  font-size: 1.2em;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.interno .titulo i {
  color: #E6B800;   /* ícone amarelo Mil Coisas */
  margin-right: 8px;
}

/* Conteúdo interno */
.interno-conteudo {
  margin-top: 10px;
}

/* Texto do cadastro */
.newsletter-cadastro {
  font-size: 0.95em;
  color: #555;
}

/* Remove fundo principal mantendo o resto nativo */
.componente.newsletter.borda-principal {
  background: none !important;
  border: none !important;
}

/* Textos brancos */
.componente.newsletter .titulo,
.componente.newsletter .texto-newsletter,
.componente.newsletter .newsletter-confirmacao span {
  color: white !important;
}

/* Ícone de confirmação verde com animação pulse */
.componente.newsletter .newsletter-confirmacao i.icon-ok {
  color: #28a745 !important; /* verde */
  animation: pulse 0.8s ease-in-out forwards;
}

/* Animação pulse */
@keyframes pulse {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 2; }
}

/* Remove a linha de borda do bloco de ordenação */
.span6.clearfix .input-append,
.span6.clearfix .btn-group,
#botaoOrdenar {
  border: none !important;
  box-shadow: none !important;
}

.bandeiras-produto .bandeira-promocao {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important; /* vermelho moderno em degradê */
    color: #fff !important;
    font-weight: 700;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 20px; /* pill */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    display: inline-block;
    transform: rotate(-8deg); /* inclinação estilo etiqueta */
    transform-origin: left center; /* ponto de rotação */
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

@media (max-width: 768px) {
  .bandeiras-produto .bandeira-promocao {
    background: linear-gradient(135deg, #c0392b, #e74c3c) !important; /* vermelho moderno em degradê */
  }
}


/* Destaque para qualquer categoria ativa no menu lateral */
.nivel-um li.ativo.borda-principal {
    position: relative;
    background: #f9f9f9; /* fundo suave */
    border-radius: 6px;
    padding: 6px 12px;
}

/* Barrinha colorida à esquerda */
.nivel-um li.ativo.borda-principal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #003b7a, #007bff); /* azul moderno */
    border-radius: 6px 0 0 6px;
}

/* Texto mais forte */
.nivel-um li.ativo.borda-principal .titulo {
    color: #003b7a;
    font-weight: 700;
}

label[for="botaoOrdenar"] {
    border: none !important;
    background: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-weight: 600;
    color: #003b7a; /* azul padrão */
    cursor: pointer;
}


.componente.categoria-descricao,
.componente.categoria-descricao {
    color: #ffffff !important;
}

/* ÍCONES - ALINHAMENTO E RESPONSIVIDADE */
i[class^="icon-"], i[class*=" icon-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}

/* Evitar desalinhamento vertical em botões/links com ícones */
.botao i, button i, a i {
  line-height: 1;
  vertical-align: middle;
}

/* Garantir clique confortável e centralização nos atalhos */
.atalhos-mobile ul li a {
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Escala dos ícones em telas pequenas */
@media (max-width: 480px) {
  #cabecalho .menu.superior li a::before,
  a.botao-comprar.principal.grande i.icon-shopping-cart,
  #btn-frete i.icon-truck,
  .atalhos-mobile ul li a i {
    font-size: clamp(16px, 5vw, 20px) !important;
  }
}

.filtro.lista.borda-principal {
    border-radius: 12px; /* bordas arredondadas */
    padding: 15px; /* espaçamento interno */
    border: 1px solid #ccc; /* borda suave, ajusta a cor se quiser */
    background-color: #fff; /* fundo branco */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* leve sombra opcional */
}

/* Ajuste do título para ficar harmonioso com o arredondado */
.filtro.lista.borda-principal .titulo {
    margin-bottom: 10px;
}

/* Ajuste das opções da lista para ficar melhor visualmente */
.filtro.lista.borda-principal .atributo-lista ul li {
    border-radius: 8px; /* pequenas bordas nos itens também */
    margin-bottom: 5px;
    padding: 5px 10px;
    transition: background 0.2s;
}

.filtro.lista.borda-principal .atributo-lista ul li:hover {
    background-color: #f0f0f0; /* efeito hover leve */
}

/* Botão submit ao lado do campo CEP */
button.btn[type="submit"] {
  font-size: 0 !important;         /* esconde o "OK" original */
  padding: 0 14px;      /* largura proporcional */
  height: 25px;         /* mesma altura do campo CEP (ajuste se necessário) */
  border-radius: 6px;   /* bordas arredondadas */
  line-height: 10px !important;   /* centraliza o texto */
  vertical-align: middle;
}

button.btn[type="submit"]::after {
  content: "Ir" !important;        /* novo texto */
  font-size: 14px;      /* tamanho da fonte */
  color: #fff;          /* cor do texto (ajuste conforme o estilo do botão) */
}



.busca-mobile {
  margin-right: 0 !important; /* remove espaço extra à direita */
  padding-right: 0 !important;
  width: 100%; /* garante que ocupe toda a largura disponível */
  margin-left: 15px;
}


.busca-mobile .busca {
  width: 100%; /* o formulário de busca ocupa toda a div */
}

.busca-mobile form {
  margin: 0; /* remove qualquer margem interna */
  display: flex; /* mantém o input e botão alinhados */
}

.busca-mobile input#auto-complete {
  flex: 1; /* input ocupa todo o espaço disponível */
  margin: 0;
  padding: 8px; /* ajuste do padding se quiser */
  margin-left: 15px;
}

.busca-mobile button.botao-busca {
  margin: 0;
  margin-left: -10px;
}

/*Botão Filtro */
button.btn {
    background: none !important;  /* remove qualquer fundo */
    border: none !important;      /* remove borda */
    color: #007bff !important;    /* texto azul igual ao label */
    padding: 0 !important;        /* remove padding */
    font: inherit !important;     /* mantém a mesma fonte */
    box-shadow: none !important;  /* remove sombra */
    cursor: pointer !important;   /* cursor de clique */
}

/* Remove efeitos ao passar o mouse, clicar ou focar */
button.btn:hover,
button.btn:focus,
button.btn:active {
    background: none !important;
    border: none !important;
    color: #007bff !important;
    box-shadow: none !important;
    outline: none !important;     /* remove contorno azul do foco */
}

/* Ícone ao lado do texto */
button.btn i {
    color: #f1c40f;               /* cor da seta igual ao padrão */
    margin-left: 4px;
}


/* Logo */
.logo-developer .logo-black {
  height: 30px;
  width: auto;
}

/* Texto */
.logo-developer .developer-text {
  font-size: 14px;
}

.logo-developer .developer-text strong {
  color: #888888; /* Developer em cinza */
}

.logo-developer .developer-text span {
  color: #888888; /* Nome em cinza */
}

/* Ajuste mobile */
@media only screen and (max-width: 480px) {
  .logo-developer {
    gap: 5px;
    flex-direction: column; /* logo em cima, frase embaixo */
  }
  .logo-developer .logo-black {
    height: 25px;
  }
  .logo-developer .developer-text {
    font-size: 12px;
    text-align: center;
  }
}

.banner.vitrine {
  border-radius: 20px; /* arredonda as bordas */
  overflow: hidden;    /* garante que o conteúdo dentro acompanhe o arredondamento */
}


.banner.lateral {
  border-radius: 20px;   /* arredonda as bordas */
  overflow: hidden !important;     /* garante que o conteúdo dentro acompanha o arredondamento */
 
}

/* Adiciona Melhor Envio ao lado do selo Google */
/* === Opção 1: adiciona o selo como pseudo-elemento do link do Google === */
li a[href*="google.com/safebrowsing"]::after,
a[title*="Google Safe Browsing"]::after {
  content: "";
  display: inline-block;
  width: 90px;
  height: 36px;
  margin-left: 10px;
  vertical-align: middle;
  background: url("https://cdn.awsli.com.br/2838/2838622/arquivos/melhor-envio-fw.png") no-repeat center;
  background-size: contain;
  position: relative;
  top: -4px; /* ajusta pra subir — aumenta o valor negativo se precisar */
  pointer-events: none; /* não vira link/overlay */
}
@media (max-width: 768px) {
  li a[href*="google.com/safebrowsing"]::after {
    width: 70px;
    height: 30px;
    top: -2px;
    margin-left: 8px;
  }
}

.valores-descontos .descontos.avista {
    background-color: #fff5e6; /* fundo leve chamativo */
    border: 2px solid #ff9900; /* borda laranja para destacar */
    border-radius: 8px; /* cantos arredondados */
    padding: 10px 15px;
    display: inline-block;
    margin-top: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* leve sombra */
    transition: transform 0.3s, box-shadow 0.3s;
}

.valores-descontos .descontos.avista:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.valores-descontos .descontos.avista span strong.cor-principal {
    font-size: 18px; /* valor maior */
    color: #ff6600; /* cor chamativa */
}

.valores-descontos .descontos.avista span strong + strong {
    color: #ff3300; /* destaca o texto do desconto */
    font-weight: bold;
}

/* NOSSO FAVORITO CORAÇÃO */
/* Zera estilos herdados */
.lista-favoritos {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  position: relative;
}

/* Esconde ícone/texto originais */
.lista-favoritos i,
.lista-favoritos span {
  display: none !important;
}

/* Coração SVG vazio */
.lista-favoritos::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='red' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
  transition: transform 0.3s ease;
}

/* Quando ativo → coração cheio */
.lista-favoritos.ativo::before {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='red' stroke='red' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
  animation: pop 0.4s ease;
}

/* Efeito hover */
.lista-favoritos:hover::before {
  transform: scale(1.15);
}

/* Animação estourinho */
@keyframes pop {
  0%   { transform: scale(0.6); opacity: 0.7; }
  50%  { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}


#facebook_comments {
    border-radius: 12px;       /* cantos arredondados */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* sombra suave */
    padding: 10px;             /* espaço interno */
    background-color: #f9f9f9; /* fundo clarinho */
    overflow: hidden;          /* mantém o conteúdo dentro do arredondamento */
}

/* arredondar também o iframe dentro do Facebook */
#facebook_comments iframe {
    border-radius: 12px !important;
}


.busca-wrapper {
  display: flex;
  align-items: center;
  gap: -10px; /* espaço entre busca e ícone */
}

/* Cria o ícone antes do carrinho */
.minha-conta {
  display: inline-flex;
  align-items: center;
  margin-right: 25px; /* distância do carrinho */
  font-size: 24px;
  height: 15px;
  position: relative;
  top: 34px; /* desce o ícone */

 }
 

.minha-conta a {
  color: #0077ff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;

}

.minha-conta a:hover {
  color: #f1c40f;
}

/* Só desktop */
.desktop-only {
  display: none;
}
@media (min-width: 992px) {
  .desktop-only {
    display: inline-flex;
  }
}

/* Caixa do login/cadastro */
/* Container principal */
.cadastro-logar .caixa-sombreada {
  border: none;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: #fff;
  transition: all 0.3s ease-in-out;
}
.cadastro-logar .caixa-sombreada:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* Títulos */
.cadastro-logar legend.titulo {
  font-size: 1.2rem;
  font-weight: 600;
  border: none;
  margin-bottom: 15px;
  color: #1a237e; /* Azul padrão mais moderno */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Labels */
.cadastro-logar label {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
  color: #444;
}

/* Inputs */
.cadastro-logar input[type="text"],
.cadastro-logar input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 0.95rem;
  outline: none;
  transition: all 0.3s;
  background: #fafafa;
}
.cadastro-logar input:focus {
  border-color: #2196f3;
  box-shadow: 0 0 8px rgba(33,150,243,0.4);
  background: #fff;
}

/* Botões */
.cadastro-logar .botao.principal {
  padding: 12px 25px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(135deg, #1565c0, #1e88e5);
  border: none;
  color: #fff !important;
  cursor: pointer;
  transition: all 0.3s;
}
.cadastro-logar .botao.principal:hover {
  background: linear-gradient(135deg, #0d47a1, #1565c0);
  transform: translateY(-2px);
}

/* Link de recuperar senha */
.cadastro-logar .recuperar-senha {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: #1565c0;
  text-decoration: none;
}
.cadastro-logar .recuperar-senha:hover {
  text-decoration: underline;
}

/* Ajuste do Google login */
.cadastro-logar .social-login-google {
  margin-top: 20px;
  text-align: center;
}

/* Apenas blocos de categorias */
.categoria-descricao {
  background: #fff !important;   /* fundo branco */
  box-shadow: none !important;   /* remove relevo */
  border: none !important;       /* remove borda */
  border-radius: 0 !important;   /* sem cantos arredondados */
  padding: 16px;
}

/* Título dentro das categorias */
.categoria-descricao .titulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a237e !important;     /* azul para o título */
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  background: transparent !important;
}

/* Ícone do título */
.categoria-descricao .titulo i {
  font-size: 1.3rem;
  color: #fbc02d !important;     /* amarelo */
  background: transparent !important;
}

/* Texto da descrição */
.categoria-descricao .descricao-resumida p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff !important;        /* cinza */
  margin: 0;
  background: transparent !important;
}



/* Remove espaço extra entre carrossel e banner no mobile */
@media (max-width: 767px) {
  /* Ajusta o container do carrossel */
  .carrossel-container, 
  .carousel, 
  .carousel-inner { 
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
  }

  /* Ajusta o container do banner */
  .banner-container, 
  #cabecalho { 
      margin-top: 0 !important;
      padding-top: 0 !important;
  }
}


/* Aplica só em telas mobile (até 768px) */

 /* Esconde o banner no desktop */
.row-fluid .span3 .logo.cor-secundaria {
    background-image: none;
}

/* Exibe o banner só no mobile e ajusta largura/altura */
@media (max-width: 768px) {
    .row-fluid .span3 .logo.cor-secundaria {
        background-image: url("https://cdn.awsli.com.br/2838/2838622/arquivos/banner-do-mes.png");
        background-size: cover; /* ajusta proporcionalmente */
        background-position: center;
        width: 100%;
        height: 150px; /* ajuste a altura como quiser */
        display: block;
        text-indent: -9999px; /* esconde o texto dentro do h2 */
    }
}

/* Container geral dos atributos */
.atributos {
  margin: 20px 0;
  font-family: Arial, sans-serif;
}

.atributos .atributo-comum span {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  color: #333;
}

/* Lista de opções */
.atributos .atributo-comum ul {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Estilo padrão dos botões */
.atributos .atributo-comum ul li a.atributo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: bold;
  background: #f5f5f5;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #333;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  min-width: 60px;
  text-align: center;
}

/* Hover em qualquer opção */
.atributos .atributo-comum ul li a.atributo-item:hover {
  background: #fff;
  border-color: #004aad;
  color: #004aad;
  transform: translateY(-2px);
}

/* Selecionado (caso o sistema aplique a classe) */
.atributos .atributo-comum ul li a.atributo-item.selecionado {
  background: #004aad;
  color: #fff;
  border-color: #004aad;
  box-shadow: 0 4px 10px rgba(0,74,173,0.3);
}

/* Indisponível */
.atributos .atributo-comum ul li a.atributo-item.indisponivel {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
  border: 2px solid #ccc;
  box-shadow: none;
  transform: none;
}

/* Somente no mobile */
@media (max-width: 768px) {
  .atalhos-mobile.fundo-secundario {
    background: #fff !important; /* Fundo branco */
  }

  .atalhos-mobile.fundo-secundario a,
  .atalhos-mobile.fundo-secundario i,
  .atalhos-mobile.fundo-secundario .fa 
  .atalhos-mobile.fundo-secundario texto{
    color: #003366 !important; /* Azul forte (pode trocar pelo seu tom) */
  }

  /* Se os ícones forem fontes (tipo font-awesome ou icon-*), isso cobre */
  .atalhos-mobile.fundo-secundario .icon-home:before,
  .atalhos-mobile.fundo-secundario .icon-shopping-cart:before,
  .atalhos-mobile.fundo-secundario .icon-user:before,
  .atalhos-mobile.fundo-secundario .fa-bars:before {
    color: #003366 !important;
  }
}



/* dividir 2 colunas de produtos no mobile */
@media (max-width: 768px) {
  #listagemProdutos ul li.span3 {
    width: 50% !important;   /* duas colunas */
    float: left;
    box-sizing: border-box;
    padding: 0 !important;   /* tira espaçamento interno */
    margin: 0 !important;    /* encosta um no outro */
  }

  #listagemProdutos ul {
    display: flex;
    flex-wrap: wrap;
  }
}


/*removendo efeito de transição de página/*
* {
  transition: none !important;
  animation: none !important;
}
body {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Barra da Newsletter */
#barraNewsletter {
  background: #fff; /* fundo cinza chapado */
  padding: 25px 15px;
  text-align: center;
  margin: 0;
  border-radius: 0;
  color: #fff;
  margin-left: -10px;
}

#barraNewsletter .titulo {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
  color: #fff;
}

#barraNewsletter .texto-newsletter {
  font-size: 1rem;
  margin-bottom: 20px;
  color: #fff;
}

#barraNewsletter .newsletter-cadastro {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: -10px;
}

/* Campo de email */
#barraNewsletter .newsletter-cadastro input[type="text"] {
  padding: 12px 15px;
  border: 2px solid #ccc;
  border-radius: 25px; /* bordas arredondadas */
  font-size: 1rem;
  width: 280px;
  max-width: 100%;
  background: #fff;
  color: #000;
  transition: all 0.3s ease;
}

#barraNewsletter .newsletter-cadastro input[type="text"]:focus {
  border-color: #00f; /* azul neon */
  box-shadow: 0 0 8px rgba(0, 0, 255, 0.6);
  outline: none;
}

#barraNewsletter .newsletter-cadastro input::placeholder {
  color: #666;
}

/* Botão assinar */
#barraNewsletter .newsletter-cadastro button {
  background: #FFD700; /* amarelo */
  border: none;
  padding: 12px 22px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px; /* desce o botão */
  transition: 0.3s ease;
}

/* Ícone no botão */
#barraNewsletter .newsletter-cadastro button::after {
  content: "➤"; /* ponteiro/seta */
  font-size: 1rem;
  color: #000;
}

/* Hover do botão */
#barraNewsletter .newsletter-cadastro button:hover {
  background: #e6c200; /* amarelo mais escuro */
  transform: translateY(-2px);
}

/* Tablóide de ofertas */
.caixa-sombreada img {
  display: block;
  margin: 0 auto;     /* centraliza */
  max-width: 100%;    /* nunca estoura no mobile */
  height: auto;       /* mantém proporção */
}