/* Categorias */
#cabecalho > .conteiner > .menu.superior .titulo {
    color: #17135E;
    font-weight: bold;
}

#cabecalho > .conteiner > .menu.superior > .nivel-um > .categoria-marcas .nivel-dois {
    color: #78bb43;
}

/*#cabecalho > .conteiner > .menu.superior > .nivel-um > .categoria-marcas .titulo {
     display: none;
}*/


/* Preco Produtos 
#cabecalho > .corpo > .conteiner > .secao-principal .row-fluid .sem-coluna > .conteudo .span12 > .row-fluid > .listagem .borda-alpha  > .listagem-linha > .preco-promocional .titulo  {
    font-size: 100px;
    font-weight: bold;
} 

.listagem .preco-produto .titulo {
font-size: 50px;
}
/*
#cabecalho > .preco-produto {
    font-size: 20px;
    font-weight: bold;
}

.produto .acoes-produto .preco-produto .titulo {
    font-size: 20px;
}

.preco-produto .destaque-parcela .preco-promocional .cor-principal .titulo{
    font-size: 50px;
}

.titulo { font-weight: 500; }
*/

/* Telefone */
#cabecalho > .conteiner > .main-header  > .conteudo-topo > .hidden-phone {
    color: #17135E;
    font-weight: bold;
}

/* Categoria Rodape */ 
#rodape .titulo, #rodape .institucional, #rodape .categorias, #rodape .titulo.cor-secundaria {
    color: #17135E; 
    font-weight: bold;
}

#rodape .links-rodape > .titulo {
    color: #17135E; 
}

#rodape .floating-whatsapp {
    display: none;
}

/* Botoes */
.botao {
    border-radius: 10px;
}

/* Marcas */
/*#corpo .marcas {
    position: absolute;
    display: block;
    width: 100%;
    height: 150%;
    top: 600px;
    margin: 0;
}*/

/* força o .marcas a seguir o fluxo normal */
.marcas {
  position: static !important;
  width: 100%       !important;
  height: auto      !important;
  margin: 2rem auto  !important; /* espaçamento acima */
}

/*lista de produtos
#corpo .listagem#listagemProdutos .titulo-categoria:first-of-type{
   margin-top: 200px;
}*/


/*Sexo*/

#id_sexo {
    display: none;
}

/*Cor*/

.produto .atributos .atributo-cor ul li a {
    overflow: hidden;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: 4px solid #fff;
    box-sizing: border-box;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    transition: .25s ease;
    transform: translateZ(0);
}

.produto .atributos .atributo-cor ul li a>span {
    margin: -6px;
    border-width: 0 0 100px 30px;
    transform: translateZ(0);
}

/*Lista Produtos Mobile

@media only screen and (max-width: 767px) {
    .listagem .listagem-linha li {
    width: 50%;
    float: left;
    padding: 0;
    margin: 0;
    }
}*/

/* 1) Fora de qualquer @media, garanta que esses dois elementos sempre virem */
div.row-fluid.banner.hidden-phone {
  display: block !important;
  visibility: visible !important;
}
.marcas.hidden-phone {
  display: block !important;
  visibility: visible !important;
}

/* 2) No mobile, ajuste a largura da imagem do tarja */
@media (max-width: 768px) {
  div.row-fluid.banner.hidden-phone .span12.banner.tarja,
  .span12.banner.tarja {
    display: block !important;
    visibility: visible !important;
  }
  .span12.banner.tarja img {
    width: 100% !important;
    height: auto   !important;
  }
}

/*Botão Compre Agora*/
.wrap-compre-agora-wpp { margin-bottom: 10px; }

/* botão cheio, bonito e mais compacto */
a.botao.principal.whatsapp-compra {
  /* ocupa toda a largura */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;           /* antes .5rem */
  width: 100% !important;
  min-height: 40px !important;     
  padding: 6px 10px !important;    

  /* tipografia */
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  text-align: center !important;

  /* visual WhatsApp */
  background: linear-gradient(90deg, #25d366, #20bd5a) !important;
  border: 1px solid #1ebe57 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}

a.botao.principal.whatsapp-compra:hover,
a.botao.principal.whatsapp-compra:focus {
  background: linear-gradient(90deg, #1ebe57, #18a64b) !important;
}

/* bloco do texto */
a.botao.principal.whatsapp-compra .wpp-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  flex-wrap: wrap !important;
}

/* "COMPRE AGORA" maior */
a.botao.principal.whatsapp-compra .wpp-text strong {
  font-size: 17px !important;      
  letter-spacing: .2px !important;
}

/* "via WhatsApp" menor */
a.botao.principal.whatsapp-compra .wpp-sub {
  font-size: 13px !important;      
  opacity: .98 !important;
}

/* ícone menor */
a.botao.principal.whatsapp-compra .wpp-icon svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
}

/* ajustes mobile (ainda mais compacto) */
@media (max-width: 768px) {
  a.botao.principal.whatsapp-compra {
    min-height: 34px !important;   
    padding: 6px 8px !important; 
    gap: .25rem !important;         /* aproxima texto do ícone */
  }
  a.botao.principal.whatsapp-compra .wpp-text strong { font-size: 14px !important; }
  a.botao.principal.whatsapp-compra .wpp-sub        { font-size: 11px !important; }
  a.botao.principal.whatsapp-compra .wpp-icon svg   { width: 18px !important; height: 18px !important; }
}

/* JANELA DO BOTÃO COMPRE AGORA*/

.wrap-compre-agora-wpp { margin-bottom: 10px; }

/* botão cheio, bonito e mais compacto */
a.botao.principal.whatsapp-compra {
  /* ocupa toda a largura */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 6px 10px !important;

  /* tipografia */
  color: #fff !important;
  text-decoration: none !important;
  line-height: 1.1 !important;
  text-align: center !important;

  /* visual WhatsApp */
  background: linear-gradient(90deg, #25d366, #20bd5a) !important;
  border: 1px solid #1ebe57 !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;
}

a.botao.principal.whatsapp-compra:hover,
a.botao.principal.whatsapp-compra:focus {
  background: linear-gradient(90deg, #1ebe57, #18a64b) !important;
}

/* bloco do texto */
a.botao.principal.whatsapp-compra .wpp-text {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem !important;
  flex-wrap: wrap !important;
}

/* "COMPRE AGORA" maior */
a.botao.principal.whatsapp-compra .wpp-text strong {
  font-size: 17px !important;
  letter-spacing: .2px !important;
}

/* "via WhatsApp" menor */
a.botao.principal.whatsapp-compra .wpp-sub {
  font-size: 13px !important;
  opacity: .98 !important;
}

/* ícone menor */
a.botao.principal.whatsapp-compra .wpp-icon svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
}

/* ajustes mobile (ainda mais compacto) */
@media (max-width: 768px) {
  a.botao.principal.whatsapp-compra {
    min-height: 34px !important;
    padding: 6px 8px !important;
    gap: .25rem !important;
  }
  a.botao.principal.whatsapp-compra .wpp-text strong { font-size: 14px !important; }
  a.botao.principal.whatsapp-compra .wpp-sub        { font-size: 11px !important; }
  a.botao.principal.whatsapp-compra .wpp-icon svg   { width: 18px !important; height: 18px !important; }
}

/* JANELA DO BOTÃO COMPRE AGORA */

/* Escopo no wrap para não interferir no botão flutuante */
.wrap-compre-agora-wpp { position: relative; }

/* container relativo para ancorar o menu acima do botão */
.wrap-compre-agora-wpp .buy-wpp-container { position: relative; }

/* Menu com as opções (igual ao flutuante) */
.wrap-compre-agora-wpp .whatsapp-options {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  z-index: 999;

  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  width: 300px;
  overflow: hidden;

  /* Transição/estado inicial igual ao flutuante */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.wrap-compre-agora-wpp .whatsapp-options.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Cada opção (igual ao flutuante) */
.wrap-compre-agora-wpp .whatsapp-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.wrap-compre-agora-wpp .whatsapp-option:last-child { border-bottom: none; }
/* Hover com fundo verde claro e texto sublinhado */
.wrap-compre-agora-wpp .whatsapp-option:hover {
  background-color: #e6f9f0; /* verde claro */
}

.wrap-compre-agora-wpp .whatsapp-option:hover .option-text strong,
.wrap-compre-agora-wpp .whatsapp-option:hover .option-text span {
  text-decoration: underline;   /* sublinhado */
  color: #128C7E;              /* verde do WhatsApp (opcional) */
}

.wrap-compre-agora-wpp .option-text strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.wrap-compre-agora-wpp .option-text span {
  font-size: 14px;
  color: #666;
}

.wrap-compre-agora-wpp .whatsapp-qr {
  width: 65px;
  height: 65px;
  margin-left: 15px;
  border-radius: 5px;
}

/* Mobile: ocupa quase a largura da tela, mantendo âncora à direita */
@media (max-width: 767px) {
  .wrap-compre-agora-wpp .whatsapp-options {
    width: min(calc(100vw - 30px), 300px);
    right: 0;
  }
}