@media screen and (max-width: 767px) {body.pagina-inicial .cheio {display: block !important;}}

.conteiner-principal {
  margin-top: 0 !important;
}

#cabecalho .conteudo-topo .inferior.row-fluid .span12 .busca.borda-alpha {
  display: flex !important;
  align-items: center;
  position: static;
  width: 233px;
  max-width: 100%;
  margin-left: 70px;
}
#cabecalho .conteudo-topo .inferior.row-fluid .span12 .busca.borda-alpha form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#cabecalho .conteudo-topo .inferior.row-fluid .span12 .busca.borda-alpha input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(149,45,61,0.28);
  border-radius: 999px;
  outline: 0;
  padding: 8px 16px;
  font-size: 11.5px;
  color: #762331;
  background: #fffaf5;
  font-family: Arial, Helvetica, sans-serif;
}
#cabecalho .conteudo-topo .inferior.row-fluid .span12 .busca.borda-alpha input[type="text"]::placeholder {
  color: rgba(118,35,49,0.5);
}
#cabecalho .conteudo-topo .inferior.row-fluid .span12 .busca.borda-alpha .botao-busca {
  position: static !important;
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23952d3d%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22m20%2020-3.5-3.5%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  cursor: pointer !important;
}

/* ===== BUSCA E ICONES MOBILE ===== */

/* Revela o campo de busca nativo do menu mobile ao clicar (o tema tem uma regra global
   que esconde .busca.borda-alpha em qualquer lugar; aqui damos prioridade para o mobile) */
#cabecalho .atalhos-mobile li.mob-busca { position: relative !important; }
#cabecalho .atalhos-mobile li.mob-busca.active .busca.borda-alpha {
  display: block !important;
  position: fixed !important;
  left: 15px !important;
  right: 15px !important;
  width: auto !important;
  top: 95px !important;
  z-index: 999 !important;
  background: #fff !important;
  padding: 12px 15px !important;
  box-sizing: border-box !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  margin: 0 !important;
  border-radius: 8px;
}
#cabecalho .atalhos-mobile li.mob-busca.active .busca.borda-alpha form {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
#cabecalho .atalhos-mobile li.mob-busca.active .busca.borda-alpha input[type="text"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 1px solid rgba(149,45,61,0.28) !important;
  border-radius: 999px !important;
  outline: 0 !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  color: #762331 !important;
  background: #fffaf5 !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
#cabecalho .atalhos-mobile li.mob-busca.active .busca.borda-alpha input[type="text"]::placeholder {
  color: rgba(118,35,49,0.5) !important;
}

/* Corrige os icones de busca e menu (hamburguer) que ficavam em branco no topo mobile
   (o icone de fonte do tema nao estava carregando o glifo) */
#cabecalho .atalhos-mobile li.mob-busca button.botao-busca {
  background-color: rgb(149,45,61) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cpath d='m20 20-3.5-3.5'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: none !important;
  color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
#cabecalho .atalhos-mobile li.mob-menu a.atalho-menu {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23952D3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 0 !important;
  color: transparent !important;
}

/* Corrige a barra mobile: fundo estava preto (variavel --cor-topo do tema
   nunca foi customizada) e a logo nao tinha limite de altura, renderizando
   no tamanho original da imagem (300x300px) e estourando o cabecalho -
   isso empurrava os icones de busca/conta/carrinho para fora da tela. */
#cabecalho .atalhos-mobile { background: rgb(244,237,229) !important; }
#cabecalho .atalhos-mobile li.mob-logo img { max-height: 70px !important; width: auto !important; height: auto !important; }


/* icones (conta/carrinho) na cor da identidade visual (estavam brancos, quase
   invisiveis no fundo claro) e a busca ja usa essa mesma cor */
#cabecalho .atalhos-mobile .icon * { fill: #952D3D !important; }
#cabecalho .atalhos-mobile .icon circle { fill: #952D3D !important; }

/* centraliza a logo mobile entre o menu e o grupo de icones da direita,
   sem estourar a altura do cabecalho */
#cabecalho .atalhos-mobile li.mob-logo img { max-height: 84px !important; width: auto !important; height: auto !important; }
#cabecalho .atalhos-mobile li.mob-logo {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 0 !important;
}

/* corrige popups (conta) que estavam esticando a altura da barra mobile
   ao inves de flutuar por cima do conteudo */
#cabecalho .atalhos-mobile .account-list,
#cabecalho .atalhos-mobile .support-items {
  position: absolute !important;
}


/* Evita que o modo escuro/forcado do Android/Chrome reescreva as cores
   dos icones e da logo mobile (bug conhecido em alguns aparelhos Android) */
#cabecalho .atalhos-mobile,
#cabecalho .atalhos-mobile * {
  forced-color-adjust: none !important;
  color-scheme: light !important;
}


/* logo do desktop no mesmo tamanho da home tambem nas paginas internas (categoria, produto, etc) - la o heading e h2 em vez de h1 */
#cabecalho.logo-centro h2.logo img,
#cabecalho.logo-centro h3.logo img {
  width: 190px !important;
  height: auto !important;
  max-height: 500% !important;
}