/* ==========================================================================
   SEQUENCIA KIMONOS - CSS AVANCADO (arquivo unico)
   Atualizado em 20/09/2026.

   ESTE ARQUIVO E A UNICA FONTE DE ESTILO DA LOJA.
   O bloco "Codigos HTML > Cores + Tamanhos + Botao Comprar" passou a ter
   somente o <script> (a barrinha de cor e a remocao do dropdown, que CSS
   nao faz). Todo o bloco de estilo que vivia la esta agora nas secoes 5 a 9.

   Secoes:
     1 a 3 - popup, sacola lateral, carrinho/checkout e a trava do
             "Atualizar quantidade" (como ja estava)
     4     - correcoes dos botoes e da vitrine de 20/09/2026 (4.1 a 4.23)
     5 a 9 - pagina de produto: seletores de cor e tamanho, botao COMPRAR
             e o ajuste de celular (vindos do bloco HTML)
   ========================================================================== */

/* ==========================================================================
   POPUP NEWSLETTER - TEMA BLACKOUT (PRETO & BRANCO) - SEQUÊNCIA KIMONOS
   ========================================================================== */

/* 1. Fundo escuro com desfoque elegante */
.fancybox-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* 2. Container do Pop-up */
.modal-modalNewsletter,
.modal-newsletter-offline .modal-modalNewsletter {
  border-radius: 14px !important;
  overflow: visible !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

.modal-modalNewsletter .fancybox-skin {
  background: #111111 !important;
  border-radius: 14px !important;
  border: 1px solid #2d2d2d !important;
  padding: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
}

.modal-modalNewsletter .fancybox-outer,
.modal-modalNewsletter .fancybox-inner,
.modal-modalNewsletter #modalNewsletter,
.modal-modalNewsletter #modalNewsletter > .row-fluid {
  background: #111111 !important;
  border-radius: 14px !important;
}

.modal-modalNewsletter #modalNewsletter .componente {
  background: #111111 !important;
  border: none !important;
  box-shadow: none !important;
}

.modal-modalNewsletter #modalNewsletter .componente .interno {
  background: #111111 !important;
  padding: 40px 30px 35px 30px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: none !important;
}

/* 3. Título do Pop-up */
.modal-modalNewsletter #modalNewsletter .componente .titulo {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 8px !important;
  font-family: 'Roboto', -apple-system, sans-serif !important;
}

.modal-modalNewsletter #modalNewsletter .componente .titulo i {
  display: none !important;
}

/* 4. Subtítulo / Texto explicativo */
.modal-modalNewsletter #modalNewsletter .componente .texto-newsletter {
  color: #cbd5e1 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
  margin: 10px auto 22px auto !important;
  max-width: 380px !important;
}

/* 5. Campo de Input do E-mail */
.modal-modalNewsletter #modalNewsletter .newsletter-cadastro input,
.modal-modalNewsletter #modalNewsletter input[name="email"] {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #ffffff !important;
  border-radius: 8px !important;
  height: 50px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}

.modal-modalNewsletter #modalNewsletter .newsletter-cadastro input:focus {
  border-color: #38761d !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(56, 118, 29, 0.3) !important;
}

/* 6. Botão Cadastrar */
.modal-modalNewsletter #modalNewsletter .newsletter .botao,
.modal-modalNewsletter #modalNewsletter button.newsletter-assinar {
  background: #ffffff !important;
  color: #111111 !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  height: 48px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  width: 100% !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  top: 0 !important;
}

.modal-modalNewsletter #modalNewsletter .newsletter .botao:hover,
.modal-modalNewsletter #modalNewsletter button.newsletter-assinar:hover {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.modal-modalNewsletter #modalNewsletter .newsletter .botao:after {
  content: "CADASTRAR" !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: inherit !important;
}

/* 7. Botão Fechar */
.modal-modalNewsletter a.fancybox-item.fancybox-close {
  top: 18px !important;
  right: 22px !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  opacity: 0.8 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.modal-modalNewsletter a.fancybox-item.fancybox-close:hover {
  opacity: 1 !important;
  transform: scale(1.15) !important;
  background: transparent !important;
}

.modal-modalNewsletter a.fancybox-item.fancybox-close:before {
  content: "✕" !important;
  font-family: Arial, -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* ==========================================================================
   1. SACOLA LATERAL (MINHA SACOLA / MODAL AJAX) - EXCLUSIVAMENTE "IR PARA SACOLA"
   ========================================================================== */

/* Botão Principal: IR PARA SACOLA (Maior, Robusto, Verde Aceso) */
#comprar-ajax-status .sucesso .buttons a.botao.principal,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal {
  background: #15803d !important;
  background-color: #15803d !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 52px !important; /* Aumentado conforme solicitado */
  line-height: 52px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.3) !important;
  cursor: pointer !important;
  margin: 0 0 12px 0 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  font-size: 0 !important; /* BLOQUEIO ABSOLUTO: Esconde o texto nativo "Finalizar compra" */
}

#comprar-ajax-status .sucesso .buttons a.botao.principal:hover,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal:hover {
  background: #16a34a !important; /* Verde claro aceso vibrante */
  background-color: #16a34a !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.45) !important;
  opacity: 1 !important;
}

#comprar-ajax-status .sucesso .buttons a.botao.principal:active,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal:active {
  transform: scale(0.99) !important;
}

/* Injeta EXCLUSIVAMENTE o texto "IR PARA SACOLA" */
#comprar-ajax-status .sucesso .buttons a.botao.principal:before,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal:before {
  content: "IR PARA SACOLA" !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  display: block !important;
  line-height: normal !important;
}

#comprar-ajax-status .sucesso .buttons a.botao.principal:after,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal:after {
  display: none !important;
  content: none !important;
}

#comprar-ajax-status .sucesso .buttons a.botao.principal i {
  display: none !important;
}

/* Botão Secundário: CONTINUAR COMPRANDO na Sacola Lateral */
#comprar-ajax-status .sucesso .buttons a.continuar-comprando,
#comprar-ajax-status .sucesso .buttons .continuar-comprando {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 48px !important;
  line-height: 45px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  opacity: 1 !important;
  transition: all 0.2s ease !important;
}

#comprar-ajax-status .sucesso .buttons a.continuar-comprando:hover,
#comprar-ajax-status .sucesso .buttons .continuar-comprando:hover {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   2. CARRINHO DE COMPRAS E CHECKOUT - ALINHAMENTO PERFEITO E BOTÃO MAIOR
   ========================================================================== */

/* Alinhamento Lado a Lado dos Botões no Carrinho */
.finalizar-compra .acao-editar,
.pagina-carrinho .acao-editar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  margin-top: 20px !important;
  float: none !important;
  clear: both !important;
}

/* Botão Principal: FINALIZAR COMPRA (Maior, Robusto, 54px de Altura) */
button#finalizarCompra,
.pagina-carrinho .acao-editar button#finalizarCompra,
.pagina-carrinho .acao-editar button.botao.principal.grande,
.finalizar-compra .acao-editar button.botao.principal.grande,
.pagina-carrinho .concluir-compra button#finalizarCompra {
  background: #15803d !important;
  background-color: #15803d !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 54px !important; /* Aumentado conforme solicitado */
  line-height: 54px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(21, 128, 61, 0.35) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 32px !important; /* Mais espaçoso e imponente */
  text-decoration: none !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

button#finalizarCompra:hover,
.pagina-carrinho .acao-editar button#finalizarCompra:hover,
.pagina-carrinho .acao-editar button.botao.principal.grande:hover,
.finalizar-compra .acao-editar button.botao.principal.grande:hover,
.pagina-carrinho .concluir-compra button#finalizarCompra:hover {
  background: #16a34a !important; /* Verde aceso vibrante */
  background-color: #16a34a !important;
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.45) !important;
  opacity: 1 !important;
}

button#finalizarCompra:active,
.pagina-carrinho .acao-editar button#finalizarCompra:active {
  transform: scale(0.99) !important;
}

button#finalizarCompra i,
.pagina-carrinho .acao-editar button#finalizarCompra i {
  color: #ffffff !important;
  margin-right: 10px !important;
  font-size: 17px !important;
}

/* Botão Secundário: CONTINUAR COMPRANDO no Carrinho (Alinhado a 54px) */
.pagina-carrinho .acao-editar a.botao,
.pagina-carrinho .acao-editar a.botao:not(.principal),
.pagina-carrinho .acao-editar a.continuar-comprando,
.finalizar-compra .acao-editar.row-fluid a.botao[href*="http"],
.finalizar-compra .acao-editar a.botao {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 54px !important; /* Mesma altura de 54px para alinhar com precisão */
  line-height: 51px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 24px !important;
  text-decoration: none !important;
  opacity: 1 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.pagina-carrinho .acao-editar a.botao:hover,
.pagina-carrinho .acao-editar a.botao:not(.principal):hover,
.pagina-carrinho .acao-editar a.continuar-comprando:hover,
.finalizar-compra .acao-editar.row-fluid a.botao[href*="http"]:hover,
.finalizar-compra .acao-editar a.botao:hover {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

/* ==========================================================================
   3. TRAVA DE SEGURANÇA: PRESERVAÇÃO DO BOTÃO "ATUALIZAR QUANTIDADE" NA TABELA
   ========================================================================== */
.tabela-carrinho button.atualizar-quantidade,
.tabela-carrinho button.botao.principal.pequeno,
.tabela-carrinho .form-horizontal button,
table.tabela-carrinho button {
  height: 30px !important;
  line-height: 28px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 0 10px !important;
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  width: auto !important;
  margin-top: 6px !important;
  text-transform: uppercase !important;
}

.tabela-carrinho button.atualizar-quantidade:hover,
.tabela-carrinho button.botao.principal.pequeno:hover,
.tabela-carrinho .form-horizontal button:hover,
table.tabela-carrinho button:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ==========================================================================
   4. CORRECOES DOS BOTOES - 20/09/2026
   Colar no FINAL do CSS Avancado, depois dos blocos ja existentes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 SACOLA LATERAL - o rotulo "IR PARA SACOLA" saia por cima do botao
   Causa: o tema deixa o botao como flex-direction:column. O texto nativo
   ("Finalizar compra") tem font-size:0 mas mantem line-height:52px, entao ele
   e o :before empilham (52 + 22 = 74px) dentro de uma caixa de 26px e o
   conteudo estoura para cima.
   -------------------------------------------------------------------------- */
#comprar-ajax-status .sucesso .buttons a.botao.principal,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal {
  flex-direction: row !important;
  line-height: 0 !important;
  padding: 0 !important;
}

#comprar-ajax-status .sucesso .buttons a.botao.principal:before,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal:before {
  line-height: 1 !important;
}

/* --------------------------------------------------------------------------
   4.2 SACOLA LATERAL - dois botoes "IR PARA SACOLA" apareciam no celular
   Causa: o display:flex !important do bloco 1 vence o display:none que o
   Bootstrap aplica em .hidden-phone / .visible-phone.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #comprar-ajax-status .sucesso .buttons a.botao.principal.hidden-phone,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal.hidden-phone {
    display: none !important;
  }
}

@media (min-width: 768px) {
  #comprar-ajax-status .sucesso .buttons a.botao.principal.visible-phone,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal.visible-phone {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   4.3 CARRINHO / CHECKOUT - o selo SSL cobria o FINALIZAR COMPRA e roubava o
   clique. O selo e position:absolute dentro do .acao-editar; com o flex +
   justify-content:flex-end do bloco 2, os botoes foram parar embaixo dele.
   Solucao: o selo volta para o fluxo, como ultimo item da linha.
   -------------------------------------------------------------------------- */
.pagina-carrinho .acao-editar,
.finalizar-compra .acao-editar {
  align-items: center !important;
  flex-wrap: wrap !important;
}

.pagina-carrinho .acao-editar > .span12,
.finalizar-compra .acao-editar > .span12 {
  float: none !important;
  width: auto !important;
  flex: 0 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

/* Selo sai do position:absolute e vai para a ponta esquerda da mesma linha,
   ocupando o espaco que estava vazio. O margin-right:auto empurra os botoes
   para a direita. */
.pagina-carrinho .acao-editar .selo-ssl,
.finalizar-compra .acao-editar .selo-ssl {
  position: static !important;
  flex: 0 0 auto !important;
  order: -1 !important;
  margin: 0 auto 0 0 !important;
}

/* --------------------------------------------------------------------------
   4.4 CARRINHO NO CELULAR - os dois botoes ficavam colados, com larguras
   diferentes e o principal embaixo. Empilha em 100%, principal em cima.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pagina-carrinho .acao-editar > .span12,
  .finalizar-compra .acao-editar > .span12 {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .pagina-carrinho .acao-editar > .span12 > a.botao,
  .pagina-carrinho .acao-editar > .span12 > button.botao,
  .finalizar-compra .acao-editar > .span12 > a.botao,
  .finalizar-compra .acao-editar > .span12 > button.botao {
    width: 100% !important;
    padding: 0 16px !important;
  }
}

/* --------------------------------------------------------------------------
   4.5 SACOLA LATERAL NO CELULAR - o principal ia para baixo do secundario
   porque no mobile o .buttons perde o flex e vale a ordem do HTML.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #comprar-ajax-status .sucesso .buttons,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  #comprar-ajax-status .sucesso .buttons a.botao.principal.visible-phone,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal.visible-phone {
    order: -1 !important;
  }
}
/* --------------------------------------------------------------------------
   4.6 PAGINA DE PRODUTO - o COMPRAR ficava verde cheio mesmo antes de o
   cliente escolher a variacao. Agora o estado .desativo tem cara de desativado.
   O tema tira a classe .desativo sozinho quando a variacao e selecionada.
   -------------------------------------------------------------------------- */
.pagina-produto a.botao-comprar.desativo,
.pagina-produto a.botao-comprar.principal.desativo,
.acoes-produto a.botao-comprar.desativo,
.pagina-produto button.botao-comprar.desativo,
.acoes-produto button.botao-comprar.desativo {
  background: #7e7e7e !important;
  background-color: #7e7e7e !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #7e7e7e !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

.pagina-produto a.botao-comprar.desativo *,
.acoes-produto a.botao-comprar.desativo *,
.pagina-produto a.botao-comprar.desativo i,
.acoes-produto a.botao-comprar.desativo i {
  color: #ffffff !important;
  opacity: 1 !important;
}

.pagina-produto a.botao-comprar.desativo:hover,
.pagina-produto a.botao-comprar.principal.desativo:hover,
.acoes-produto a.botao-comprar.desativo:hover,
.pagina-produto button.botao-comprar.desativo:hover,
.acoes-produto button.botao-comprar.desativo:hover {
  background: #7e7e7e !important;
  background-color: #7e7e7e !important;
  color: #ffffff !important;
  border-color: #7e7e7e !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   4.7 VITRINE - card de altura padrao e a tag de desconto no rodape da foto

   Altura: o titulo ja vinha travado em 55px pelo tema; quem desalinhava os
   cards era a area de preco, que varia conforme o produto tenha parcelamento,
   "A partir de" ou so o preco (42 a 62px no desktop, 41 a 74px no celular).
   Com uma altura minima ali, os botoes COMPRAR ficam na mesma linha.
   Medido em 20/09/2026: home ia de 479-499px e passou a 503px em todos os
   196 cards; no celular ia de 346-380px e passou a 384px nos 168.

   Tag: a .bandeiras-produto e absolute ancorada no CARD inteiro, entao ficava
   sobre o rosto do modelo nas fotos de vestuario. O card vira grid so para a
   tag poder dividir a celula com a foto e encostar na base dela, sem depender
   de nenhuma medida fixa (a foto muda de altura por pagina e por breakpoint).
   -------------------------------------------------------------------------- */
.listagem-item {
  display: grid !important;
  grid-template-columns: 100% !important;
  align-content: start !important;
}

.listagem-item .imagem-produto {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

.listagem-item .bandeiras-produto {
  grid-row: 1 !important;
  grid-column: 1 !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  align-self: end !important;
  justify-self: start !important;
  margin: 0 0 12px 12px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

.listagem-item .preco-produto {
  min-height: 66px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Titulo preso em duas linhas: se um nome longo gerar a terceira, ela viraria
   reticencias em vez de empurrar o botao para baixo. */
.listagem-item .nome-produto {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .listagem-item .preco-produto {
    min-height: 78px !important;
  }

  .listagem-item .bandeiras-produto {
    margin: 0 0 8px 8px !important;
  }
}


/* --------------------------------------------------------------------------
   4.8 AJUSTES DE 20/09/2026 (segunda rodada, vistos no celular real)

   a) O "IR PARA SACOLA" encolhia quando a sacola lateral vinha cheia. Os
      botoes sao itens de um flex column com flex-shrink:1, entao, faltando
      espaco no painel, o navegador espreme a altura de 52px. Com espaco
      sobrando isso nao acontece - por isso so aparece com a sacola carregada.
   b) CALCULAR / USAR CUPOM so estavam estilizados com o prefixo
      .pagina-carrinho, e a sacola lateral nao tem essa classe no body: la os
      botoes continuavam com o desenho antigo, desalinhados do campo.
   c) No checkout o selo subia para cima dos botoes: o order:-1 da secao 4.3,
      que no carrinho o manda para a esquerda da linha, na coluna do celular
      o manda para o topo. Junto disso, o FINALIZAR ficava mais estreito que o
      CONTINUAR no celular por causa de um max-width:320px do tema no <button>.
   -------------------------------------------------------------------------- */

/* (a) altura dos botoes da sacola nao e negociavel, mesmo sem espaco */
#comprar-ajax-status .sucesso .buttons a.botao.principal,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal,
#comprar-ajax-status .sucesso .buttons a.continuar-comprando,
#comprar-ajax-status .sucesso .buttons .continuar-comprando {
  flex-shrink: 0 !important;
}

/* (b) o mesmo desenho do CALCULAR / USAR CUPOM em qualquer lugar onde eles
   aparecam - carrinho, sacola lateral ou checkout. Os ids sao unicos na
   pagina, entao nao ha risco de alcancar outro botao. */
#btn-frete,
#btn-cupom {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 40px !important;
  line-height: 37px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  vertical-align: top !important;
  margin: 0 0 0 8px !important;
  transition: all 0.2s ease !important;
}

#btn-frete:hover,
#btn-cupom:hover {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

/* O campo ao lado fecha na mesma altura de 40px.

   Mira os campos pelo ID (#usarCupom e #calcularFrete), nao pelo wrapper:
   no modal "MINHA SACOLA" o .input-append nao vem, e so a regra do wrapper
   deixava o campo com a altura do tema e o botao em 40px - os dois
   desencontrados. Pelo id vale em qualquer lugar: carrinho, modal e checkout.
   O .input-append fica como reforco para outros campos do mesmo padrao. */
.input-append input,
.input-prepend input {
  height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  vertical-align: top !important;
  margin: 0 !important;
}

/* (c) CHECKOUT / CARRINHO no celular - botoes do mesmo tamanho e selo por
   ultimo. No desktop o selo continua na ponta esquerda da linha (secao 4.3):
   .finalizar-compra existe DENTRO do carrinho tambem, entao mudar o order
   fora da media query mexeria nas duas paginas. */
@media (max-width: 767px) {
  .finalizar-compra .acao-editar,
  .pagina-carrinho .acao-editar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* max-width: 320px vem do tema e era o que deixava o FINALIZAR mais estreito
     que o CONTINUAR no celular - width:100% sozinho nao vencia. */
  .finalizar-compra .acao-editar a.botao,
  .finalizar-compra .acao-editar button.botao,
  .pagina-carrinho .acao-editar a.botao,
  .pagina-carrinho .acao-editar button.botao {
    width: 100% !important;
    max-width: none !important;
    padding: 0 16px !important;
  }

  /* selo centrado embaixo, sem disputar espaco com os botoes */
  .finalizar-compra .acao-editar .selo-ssl,
  .pagina-carrinho .acao-editar .selo-ssl {
    order: 99 !important;
    align-self: center !important;
    margin: 14px 0 0 0 !important;
  }
}


/* --------------------------------------------------------------------------
   4.9 CHECKOUT (body.carrinho-checkout) - conferido logado em 20/09/2026

   A estrutura do checkout NAO e a do carrinho: os tres elementos sao filhos
   diretos do .acao-editar (sem .span12), num container de ~374px. Como nao
   cabem lado a lado, o flex quebra linha - e o order:-1 da secao 4.3, que no
   carrinho manda o selo para a esquerda, aqui o jogava para a PRIMEIRA linha,
   acima dos botoes. O FINALIZAR saia com a largura toda e o CONTINUAR menor.

   Aqui a coluna e o certo: principal, secundario e o selo por ultimo.
   -------------------------------------------------------------------------- */
.carrinho-checkout .acao-editar {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}

.carrinho-checkout .acao-editar button.botao {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Oculta o botao CONTINUAR COMPRANDO exclusivamente na ultima etapa do checkout */
.carrinho-checkout .acao-editar a.botao,
.carrinho-checkout .acao-editar a.botao:not(.principal),
.carrinho-checkout .acao-editar a.botao.grande,
.carrinho-checkout .acao-editar a.continuar-comprando,
.carrinho-checkout .finalizar-compra a.continuar-comprando,
.carrinho-checkout .finalizar-compra a.botao {
  display: none !important;
}

.carrinho-checkout .acao-editar button.botao.principal {
  order: 1 !important;
  margin-bottom: 0 !important;
}

.carrinho-checkout .acao-editar .selo-ssl {
  order: 2 !important;
  align-self: center !important;
  margin: 4px 0 0 0 !important;
  position: static !important;
}


/* --------------------------------------------------------------------------
   4.10 SACOLA LATERAL CHEIA NO CELULAR - o CONTINUAR COMPRANDO cortava

   Com a sacola carregada o painel ocupa a tela toda e o rodape (subtotal,
   cupom e os dois botoes) ficava sem espaco. Entre o IR PARA SACOLA e o
   CONTINUAR havia 22px: a margem de 12px herdada da secao 1 SOMADA ao gap de
   10px da secao 4.5. Sem a margem e com o gap em 8px, o bloco de botoes
   encolhe 14px e sobe, sem mexer na altura de nenhum dos dois (52 e 48px).

   Nao mexer no padding do .buttons: ele muda conforme o contexto (0 no modal
   de confirmacao, 15/14/16 no painel cheio) e forcar um valor aqui aumentava
   o bloco em vez de diminuir.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #comprar-ajax-status .sucesso .buttons,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons {
    gap: 8px !important;
  }

  #comprar-ajax-status .sucesso .buttons a.botao.principal,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons a.botao.principal {
    margin: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   4.11 CARRINHO NO CELULAR - preco na mesma linha da quantidade

   No celular o tema quebra a tabela: o <tr> e cada <td> viram bloco e
   empilham, entao cada item ocupava 399px (imagem 86, info 125, quantidade
   63, preco 62 e excluir 46). Com o <tr> em flex, quantidade e preco dividem
   a mesma linha e o item cai para 337px - 62px a menos por produto.

   A trava do "Atualizar quantidade" (secao 3) continua valendo: aqui so muda
   a largura das celulas, nao o botao.

   O :not(.bg-dark) e essencial: as linhas do RESUMO (subtotal, desconto,
   frete, cupom, total) carregam .bg-dark. Sem ele, o display:flex vencia o
   .hidden-phone do tema e revelava no celular a linha do subtotal, que
   deveria ficar escondida.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .tabela-carrinho tbody tr:not(.bg-dark) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .tabela-carrinho tbody tr:not(.bg-dark) > td {
    box-sizing: border-box !important;
  }

  /* foto e descricao ocupam a linha inteira */
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(1),
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(2),
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(5) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* quantidade e preco, lado a lado */
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(3),
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(4) {
    flex: 1 1 50% !important;
    width: 50% !important;
  }

  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(3) { padding-right: 4px !important; }
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(4) { padding-left: 4px !important; }
}


/* NOTA: nao existe secao 4.12. O ajuste que levava esse numero (mirar o campo
   de cupom pelo id em vez do wrapper) foi absorvido pela 4.13 quando ela foi
   reescrita. A numeracao das secoes segue a ordem em que os defeitos foram
   encontrados, nao a ordem do arquivo. */

/* --------------------------------------------------------------------------
   4.13 CAMPOS DE FRETE E CUPOM - alinhados, do mesmo tamanho e sem "OK"

   a) O botao dentro de .input-append vem com position:absolute do tema. No
      carrinho o wrapper e largo e disfarca; no modal "MINHA SACOLA" ele
      encavalava em cima do campo. Com position:static o botao volta ao fluxo.
   b) No carrinho as linhas de frete e cupom ficavam empurradas para a direita
      por um margin-left:180px no .controls. Viram uma linha flex, encostada
      na esquerda - SEMPRE dentro de .tabela-carrinho, nunca em .form-horizontal
      solto: a tela de login do checkout usa .control-group tambem e quebrava
      na esquerda: rotulo, campo e botao.
   c) Campos e botoes com a mesma largura, para as duas linhas fecharem iguais.
   d) Na pagina de produto o botao do CEP dizia so "OK" e ficava sobreposto ao
      campo. Vira um botao de verdade, ao lado, escrito CALCULAR FRETE.
   -------------------------------------------------------------------------- */

/* (a) nenhum botao de campo fica sobreposto */
#btn-frete,
#btn-cupom,
.input-append button.btn,
.input-prepend button.btn {
  position: static !important;
  float: none !important;
}

/* (c) altura e desenho iguais em qualquer lugar; a LARGURA fica livre, para
   caber tambem dentro do modal da sacola, que e estreito. */
#usarCupom,
#calcularFrete {
  height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  vertical-align: top !important;
  margin: 0 !important;
  padding: 0 12px !important;
  line-height: 38px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#btn-frete,
#btn-cupom {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* o wrapper dos dois vira uma linha que encolhe junto com o container */
.input-append,
.input-prepend {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  flex-wrap: nowrap !important;
}

/* No CARRINHO sobra espaco, entao la as medidas sao fixas e iguais nas duas
   linhas - que e o que deixa frete e cupom fechando certinho. */
.pagina-carrinho #usarCupom,
.pagina-carrinho #calcularFrete,
.finalizar-compra #usarCupom,
.finalizar-compra #calcularFrete {
  width: 160px !important;
  flex: 0 0 160px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  height: 42px !important;
  line-height: 40px !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.pagina-carrinho #usarCupom:focus,
.pagina-carrinho #calcularFrete:focus,
.finalizar-compra #usarCupom:focus,
.finalizar-compra #calcularFrete:focus {
  background: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
  outline: none !important;
}

.pagina-carrinho #btn-frete,
.finalizar-compra #btn-frete {
  width: 140px !important;
  min-width: 140px !important;
  height: 42px !important;
  line-height: 39px !important;
  border-radius: 8px !important;
}

/* Botão USAR CUPOM com identidade sólida e elegante (preto contrastante) */
.pagina-carrinho #btn-cupom,
.finalizar-compra #btn-cupom {
  width: 140px !important;
  min-width: 140px !important;
  height: 42px !important;
  line-height: 39px !important;
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid #0f172a !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.pagina-carrinho #btn-cupom:hover,
.finalizar-compra #btn-cupom:hover {
  background: #334155 !important;
  background-color: #334155 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18) !important;
}

/* (b) rotulo, campo e botao encostados na esquerda e alinhados */
.pagina-carrinho .tabela-carrinho .control-group,
.finalizar-compra .tabela-carrinho .control-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  text-align: left !important;
  margin: 14px 0 !important;
}

/* largura fixa no rotulo: e o que faz a linha do frete e a do cupom
   comecarem no mesmo ponto. No celular elas quebram e nao precisam disso. */
.pagina-carrinho .tabela-carrinho .control-label,
.finalizar-compra .tabela-carrinho .control-label {
  width: auto !important;
  min-width: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: 0.2px !important;
}

.pagina-carrinho .tabela-carrinho .controls,
.finalizar-compra .tabela-carrinho .controls {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  .pagina-carrinho .tabela-carrinho .control-label,
  .finalizar-compra .tabela-carrinho .control-label {
    min-width: 0 !important;
  }
}

/* (d) "OK" vira CALCULAR FRETE na pagina de produto */
.pagina-produto .input-append.input-prepend button.btn {
  position: static !important;
  font-size: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 1 !important;
  min-width: 150px !important;
  padding: 0 16px !important;
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.pagina-produto .input-append.input-prepend button.btn:after {
  content: "CALCULAR FRETE" !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  color: inherit !important;
  line-height: 1 !important;
}

.pagina-produto .input-append.input-prepend button.btn:hover {
  background: #e2e8f0 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
}

.pagina-produto .input-append.input-prepend input.input-cep {
  height: 40px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  flex: 1 1 auto !important;
}

/* (e) sacola lateral: o bloco acima dos botoes nao rouba a altura deles */
@media (max-width: 767px) {
  #comprar-ajax-status .sucesso .head,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .head {
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
  }
}


/* --------------------------------------------------------------------------
   4.14 MODAL DA SACOLA - o rodape tem de caber na largura e na altura

   O modal e estreito (~540px). Com rotulo longo, campo e botao de largura
   fixa, a linha do cupom estourava e aparecia barra de rolagem horizontal.
   Aqui dentro: rotulo curto ("Cupom:"), campo que encolhe junto e botao
   compacto - tudo na mesma linha, centrado pela altura.

   E o rodape inteiro fica mais justo, para o CONTINUAR COMPRANDO nao cortar
   na base da tela.
   -------------------------------------------------------------------------- */
#comprar-ajax-status,
#comprar-ajax-status * {
  max-width: 100% !important;
}

#comprar-ajax-status .sucesso,
#comprar-ajax-status .fancybox-inner,
#comprar-ajax-status .fancybox-outer {
  overflow-x: hidden !important;
}

/* a linha do cupom dentro do modal */
#comprar-ajax-status .control-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 6px 0 !important;
  padding: 0 !important;
}

#comprar-ajax-status .control-label {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  font-size: 0 !important;
}

/* o texto original vive dentro de um <b>, que nao herda o font-size: 0 */
#comprar-ajax-status .control-label > * {
  display: none !important;
}

/* Rótulo "Cupom de desconto:" no modal da sacola */
#comprar-ajax-status .control-label[for="usarCupom"]:after {
  content: "Cupom de desconto:" !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}

#comprar-ajax-status .controls {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#comprar-ajax-status .input-append,
#comprar-ajax-status .input-prepend {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
}

#comprar-ajax-status #usarCupom {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 120px !important;
  height: 40px !important;
  line-height: 38px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 0 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  align-self: center !important;
  box-sizing: border-box !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

#comprar-ajax-status .input-append button,
#comprar-ajax-status .input-append .btn,
#comprar-ajax-status button#btn-cupom,
#comprar-ajax-status #btn-cupom {
  flex: 0 0 auto !important;
  height: 40px !important;
  line-height: 38px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1.5px solid #0f172a !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

#comprar-ajax-status .input-append button:hover,
#comprar-ajax-status .input-append .btn:hover,
#comprar-ajax-status button#btn-cupom:hover,
#comprar-ajax-status #btn-cupom:hover {
  background: #334155 !important;
  border-color: #334155 !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.18) !important;
}

/* rodape mais justo: o bloco de botoes sobe */
#comprar-ajax-status .sucesso .buttons,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons {
  gap: 6px !important;
  margin-top: 0 !important;
  padding-top: 6px !important;
}


/* --------------------------------------------------------------------------
   4.15 RESUMO DO CARRINHO E DO CHECKOUT - uma lista, nao cinco quadros

   O tema quebra a tabela no celular: cada <tr> do resumo (subtotal, desconto,
   frete, cupom, total) vira bloco com borda nos quatro lados, padding de 8px
   e margin-bottom de 20px - e cada <td> dentro repete borda e padding de 10px.
   Sao duas molduras por linha mais 20px de vao. Medido em 20/09/2026: o
   resumo ocupava 874px de altura no celular.

   Aqui vira uma lista continua, sem bordas, com um unico traco acima do
   TOTAL, que e a linha que interessa destacar.
   -------------------------------------------------------------------------- */
.tabela-carrinho tr.bg-dark {
  margin: 0 !important;
  border: 0 !important;
  padding: 2px 8px !important;
  background: transparent !important;
}

.tabela-carrinho tr.bg-dark > td {
  border: 0 !important;
  padding: 4px 10px !important;
  font-size: 15px !important;
  color: #334155 !important;
}

/* Cada papel tem seu tamanho. A regra antiga inflava TODO strong da linha do
   total - inclusive "5% de desconto" e o valor do Pix, que sao secundarios -
   e por isso a area ficava desproporcional. */

/* Escala harmoniosa do resumo (Carrinho e Checkout):
   - Rótulos intermediários (Subtotal, Desconto, Frete): 14px, peso 500, cor slate suave.
   - Valores intermediários (Subtotal, Desconto, Frete): 14.5px, peso 600 (semibold refinado, sem negrito pesado).
   - Total: rótulo 15px (peso 700), valor 22px (peso 800 verde). */
.tabela-carrinho tr.bg-dark td,
.tabela-carrinho tr.bg-dark span,
.tabela-carrinho tr.bg-dark td.text-right {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

.tabela-carrinho tr.bg-dark strong,
.tabela-carrinho tr.bg-dark td.padding-preco {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

/* O VERDE E SO DOS VALORES. Os textos de ligacao ("Total:", "via Pix por",
   "com", "ou em ate", "de") ficam em cinza. No HTML da Loja Integrada cada
   valor e um <strong> e o texto ao redor vive solto dentro do <span> - por
   isso a divisao e exatamente essa. */
.tabela-carrinho tr.bg-dark .total span,
.tabela-carrinho tr.bg-dark .descontos span,
.tabela-carrinho tr.bg-dark .valores-descontos {
  color: #64748b !important;
}

.tabela-carrinho tr.bg-dark .total span {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.tabela-carrinho tr.bg-dark .descontos,
.tabela-carrinho tr.bg-dark .descontos span {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* TOTAL: o numero principal em destaque absoluto */
.tabela-carrinho tr.bg-dark strong.valor-total,
.tabela-carrinho tr.bg-dark .total strong,
.tabela-carrinho tr.bg-dark.tr-checkout-total strong.preco-carrinho-total {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #15803d !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* valores do Pix e das parcelas: R$, o percentual e o numero de vezes */
.tabela-carrinho tr.bg-dark .descontos strong {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  white-space: nowrap !important;
}

/* DESCONTO E CUPOM: Verde sólido de economia/benefício (#15803d) em vez de vermelho de alerta/débito */
.tabela-carrinho tr.bg-dark .desconto strong,
.tabela-carrinho tr.bg-dark strong.desc,
.tabela-carrinho tr.bg-dark .desconto-valor,
.tabela-carrinho tr.bg-dark .cupom-valor strong,
.tabela-carrinho #cupom_desconto,
.tabela-carrinho #cupomResultado strong {
  color: #15803d !important;
  font-weight: 700 !important;
}

/* Adiciona o sinal negativo de desconto no checkout (onde o tema omitia o '-') */
.tabela-carrinho #cupomResultado strong:before {
  content: "- " !important;
}

/* Oculta o aviso quebrado '(frete não incluso)' e o <br> no carrinho e checkout */
.tabela-carrinho .cupom-valor small.muted,
.tabela-carrinho .cupom-valor br,
.tabela-carrinho #cupomResultado small.muted,
.tabela-carrinho .desconto small.muted {
  display: none !important;
}

/* REMOVE QUALQUER LINHA SOBRE O VALOR TOTAL (CARRINHO E CHECKOUT) */
.tabela-carrinho tr.bg-dark,
.tabela-carrinho tr.bg-dark > td,
.tabela-carrinho tr.bg-dark:last-child,
.tabela-carrinho tr.bg-dark:last-of-type,
.tabela-carrinho tr.bg-dark:last-child > td,
.tabela-carrinho tr.bg-dark:last-of-type > td,
.tabela-carrinho tr.bg-dark.tr-checkout-total > td,
.tabela-carrinho tr.bg-dark td.line-18 {
  border-top: none !important;
  border-bottom: none !important;
}

/* Espaçamento elegante para o bloco financeiro do TOTAL sem linha solta */
.tabela-carrinho tr.bg-dark:last-child > td.line-18,
.tabela-carrinho tr.bg-dark.tr-checkout-total > td {
  padding-top: 14px !important;
  margin-top: 6px !important;
}

/* TABELA DE PRODUTOS (CARRINHO E CHECKOUT):
   Borda uniforme e fina de 1px ao redor de toda a tabela (topo, laterais e fundo perfeitamente simétricos).
   Elimina o acúmulo de bordas laterais em thead, tbody, tr, th e td que deixava as laterais grossas. */
table.tabela-carrinho,
.tabela-carrinho {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
}

.tabela-carrinho thead,
.tabela-carrinho tbody,
.tabela-carrinho tr,
.tabela-carrinho thead tr,
.tabela-carrinho tbody tr,
.tabela-carrinho th,
.tabela-carrinho td {
  border-left: 0 !important;
  border-right: 0 !important;
}

.tabela-carrinho thead tr {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.tabela-carrinho th {
  border-top: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fafafa !important;
}

.tabela-carrinho td {
  border-bottom: 0 !important;
  border-top: 1px solid #f1f5f9 !important;
}

.tabela-carrinho tr.bg-dark > td {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 767px) {
  /* Cada linha do resumo vira UMA linha: rotulo a esquerda do valor, as duas
     encostadas a direita. Em bloco, o tema empilhava rotulo e valor e cada
     linha ocupava 81px.

     Os dois :not sao obrigatorios e miram coisas diferentes:
     - no <tr>, .hidden-phone e a linha do subtotal que o tema esconde;
     - no <td>, .hidden-phone e o rotulo "Total:" que existe DUAS vezes no
       HTML (um para desktop, outro para celular). Forcar display nele fazia
       "Total:" aparecer repetido. */
  .tabela-carrinho tr.bg-dark:not(.hidden-phone) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    padding: 3px 14px 3px 10px !important;
  }

  .tabela-carrinho tr.bg-dark:not(.hidden-phone) > td:not(.hidden-phone) {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  /* a celula do valor guarda rotulo e numero na mesma linha - no total o
     rotulo do celular e um <span> irmao do <div class="total"> */
  .tabela-carrinho tr.bg-dark td.padding-preco {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  .tabela-carrinho tr.bg-dark td.padding-preco > div {
    display: inline !important;
  }

  /* valor nenhum quebra no meio */
  .tabela-carrinho tr.bg-dark strong,
  .tabela-carrinho tr.bg-dark small,
  .tabela-carrinho tr.bg-dark .desconto-valor {
    white-space: nowrap !important;
  }

  /* a celula vazia de alinhamento e o rotulo duplicado somem */
  .tabela-carrinho tr.bg-dark > td:first-child,
  .tabela-carrinho tr.bg-dark > td.hidden-phone {
    display: none !important;
  }

  /* o total ganha um pouco mais de ar acima */
  .tabela-carrinho tr.bg-dark:last-of-type {
    padding-top: 8px !important;
  }
}


/* --------------------------------------------------------------------------
   4.16 MODAL DA SACOLA - a lista rola, o rodape fica no fundo

   O .sucesso ocupa 100% da altura util do modal, a lista de itens rola
   internamente (.scroll) e o rodape (subtotal, cupom e botoes) fica ancorado
   na base, eliminando o vao vazio embaixo dos botoes.
   -------------------------------------------------------------------------- */
.fancybox-inner > #comprar-ajax-status {
  height: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

#comprar-ajax-status .sucesso,
.perfil-sacola-ativado #comprar-ajax-status .sucesso {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
}

#carrinho-mini,
.perfil-sacola-ativado #carrinho-mini {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: space-between !important;
}

/* a lista de itens e o trecho que rola */
#carrinho-mini .scroll,
#comprar-ajax-status .sucesso > .produtos,
#comprar-ajax-status .sucesso > .itens,
#comprar-ajax-status .sucesso > ul,
#comprar-ajax-status .sucesso > table,
#comprar-ajax-status .sucesso > .lista {
  flex: 1 1 auto !important;
  min-height: 100px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* subtotal e cupom ficam ancorados na base da lista */
#carrinho-mini .table-footer,
#comprar-ajax-status .sucesso > .subtotal,
#comprar-ajax-status .sucesso > .total,
#comprar-ajax-status .sucesso .control-group {
  flex: 0 0 auto !important;
  margin-top: auto !important;
}

/* botoes fixados no rodape */
#comprar-ajax-status .sucesso .buttons,
.perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}


/* --------------------------------------------------------------------------
   4.17 MODAL DA SACOLA NO DESKTOP - respiro equilibrado do rodape
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  #comprar-ajax-status .control-group {
    margin: 10px 0 !important;
  }

  #comprar-ajax-status .sucesso .buttons,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .buttons {
    gap: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 14px !important;
  }

  #comprar-ajax-status .sucesso .head,
  .perfil-sacola-ativado #comprar-ajax-status .sucesso .head {
    padding-bottom: 12px !important;
    margin-bottom: 10px !important;
  }
}


/* --------------------------------------------------------------------------
   4.21 CARRINHO NO DESKTOP - opcoes de frete estruturadas em card e alinhadas
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .tabela-carrinho tr.bg-dark > td {
    vertical-align: top !important;
  }

  .tabela-carrinho tr.bg-dark .control-group {
    margin-top: 0 !important;
  }
}

/* Caixa elegante e organizada para os modelos de frete */
.tabela-carrinho .formas-envio {
  text-align: left !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
  margin: 6px 0 10px auto !important;
  max-width: 440px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.tabela-carrinho .formas-envio ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.tabela-carrinho .formas-envio li {
  margin: 0 !important;
  padding: 9px 12px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.tabela-carrinho .formas-envio li:hover {
  border-color: #94a3b8 !important;
  background: #f8fafc !important;
}

.tabela-carrinho .formas-envio li:has(input:checked) {
  border-color: #0f172a !important;
  background: #f8fafc !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08) !important;
}

.tabela-carrinho .formas-envio label.radio {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.tabela-carrinho .formas-envio label.radio input[type="radio"] {
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: #0f172a !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

.tabela-carrinho .formas-envio label.radio .nome {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  order: 2 !important;
  white-space: nowrap !important;
}

.tabela-carrinho .formas-envio label.radio .prazo {
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  order: 3 !important;
  white-space: nowrap !important;
}

.tabela-carrinho .formas-envio label.radio .prazo:before {
  content: "(" !important;
}

.tabela-carrinho .formas-envio label.radio .prazo:after {
  content: ")" !important;
}

.tabela-carrinho .formas-envio label.radio .valor,
.tabela-carrinho .formas-envio .valor,
.tabela-carrinho .formas-envio span.cor-principal {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  order: 4 !important;
}


/* --------------------------------------------------------------------------
   4.22 ALINHAMENTO DA COLUNA DE PRECOS E VALORES DO RESUMO (DESKTOP)

   Garante que o cabecalho "Preco", os precos dos produtos e as linhas de resumo
   (Subtotal, Desconto, Frete e Total) terminem rigorosamente na mesma vertical.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Cabecalho e celulas de preco dos produtos na tabela de identificacao/checkout (3 colunas) */
  .tabela-carrinho th:nth-child(3):last-child,
  .tabela-carrinho th.coluna-preco,
  .tabela-carrinho th.preco,
  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(3):last-child,
  .tabela-carrinho tbody tr:not(.bg-dark) > td.coluna-preco,
  .tabela-carrinho tbody tr:not(.bg-dark) > td.preco-produto {
    text-align: right !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .tabela-carrinho tbody tr:not(.bg-dark) > td:nth-child(3):last-child *,
  .tabela-carrinho tbody tr:not(.bg-dark) > td.coluna-preco *,
  .tabela-carrinho tbody tr:not(.bg-dark) > td.preco-produto * {
    text-align: right !important;
  }

  /* Linhas de resumo (Subtotal, Desconto, Frete e Total) */
  .tabela-carrinho tr.bg-dark > td:last-child {
    min-width: 150px !important;
    width: 150px !important;
    text-align: right !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .tabela-carrinho tr.bg-dark > td:nth-last-child(2) {
    text-align: right !important;
    padding-right: 0 !important;
  }

  /* no carrinho a linha do total e uma celula unica (.line-18) */
  .tabela-carrinho tr.bg-dark td.line-18 {
    padding-right: 14px !important;
    box-sizing: border-box !important;
  }

  .tabela-carrinho tr.bg-dark .total,
  .tabela-carrinho tr.bg-dark .subtotal,
  .tabela-carrinho tr.bg-dark .desconto,
  .tabela-carrinho tr.bg-dark .frete-preco,
  .tabela-carrinho tr.bg-dark .desconto-preco {
    text-align: right !important;
  }
}


/* --------------------------------------------------------------------------
   4.23 CHECKOUT - o CONTINUAR COMPRANDO sai da tela de pagamento

   Na ultima etapa a pessoa ja escolheu entrega e forma de pagamento; o unico
   caminho adiante e finalizar. Um botao secundario do mesmo tamanho ali
   compete com o principal e convida a abandonar o carrinho.

   Vale so no checkout (body.carrinho-checkout). No carrinho o botao continua,
   que e onde ele faz sentido.
   -------------------------------------------------------------------------- */
/* O :not(.principal) nao e enfeite: a secao 2 tem
   .pagina-carrinho .acao-editar a.botao:not(.principal) { display: inline-flex }
   e o body do checkout tambem carrega .pagina-carrinho. Sem igualar a
   especificidade, aquela regra vence e o botao continua aparecendo. */
.carrinho-checkout .acao-editar a.botao,
.carrinho-checkout .acao-editar a.botao:not(.principal),
.carrinho-checkout .acao-editar a.botao.grande,
.carrinho-checkout .acao-editar a.continuar-comprando,
.carrinho-checkout .finalizar-compra a.continuar-comprando,
.carrinho-checkout .finalizar-compra a.botao {
  display: none !important;
}

.carrinho-checkout .acao-editar button.botao.principal {
  margin-bottom: 0 !important;
}


/* ==========================================================================
   PAGINA DE PRODUTO - vindo do bloco "Codigos HTML" em 20/09/2026.
   O <script> daquele bloco continua la e ainda e necessario: e ele que
   injeta a barrinha .sq-amostra-cor e desmonta o dropdown nativo.
   ========================================================================== */

/* NOTA: os seletores de variacao usam [data-grade-nome*="Cor"] e ["Tamanho"] sem o
   flag "i" de propósito. O flag e CSS valido (Selectors Level 4) e o navegador entende,
   mas o validador do painel da Loja Integrada nao conhece e acusa "erro de sintaxe".
   Conferido em 20/09/2026 na loja no ar: o atributo vem sempre como "Cor" e "Tamanho",
   com a inicial maiuscula, em bone, faixa e kimono. Sem o flag o resultado e identico. */

/* 5. DESATIVA E DESTRÓI O SELETOR DROPDOWN DA LOJA INTEGRADA */
.atributos .wrapper-dropdown {
  position: static !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
}

.atributos .wrapper-dropdown:after {
  display: none !important; /* Esconde a setinha ▼ */
}

.atributos .wrapper-dropdown > span {
  display: none !important; /* Esconde a barra cinza "Selecione" */
}

/* Força a lista de variações a ficar SEMPRE aberta e enfileirada */
.atributos .wrapper-dropdown ul,
.atributos .wrapper-dropdown .dropdown,
.pagina-produto .atributos div ul {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
  margin: 8px 0 18px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.atributos ul li,
.atributos .wrapper-dropdown .dropdown li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Títulos dos seletores */
.atributo-comum > span {
  font-size: 14px !important;
  color: #1e293b !important;
  font-weight: 500 !important;
  display: block !important;
  margin-bottom: 3px !important;
}
.atributo-comum > span b {
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Reset de line-height do tema antigo para não cortar texto */
.pagina-produto .atributo-comum a.atributo-item span {
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  display: block !important;
  text-align: center !important;
}

/* ==========================================================
   6. BOTÕES DE COR (CARDS RETANGULARES ENFILEIRADOS)
   ========================================================== */
.atributos ul li a.atributo-item[data-grade-nome*="Cor"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 72px !important;
  height: auto !important;
  padding: 8px 12px 7px 12px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
}

.atributos ul li a.atributo-item[data-grade-nome*="Cor"]:hover {
  border-color: #000000 !important;
  background-color: #f8fafc !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transform: none !important;
}

.atributos ul li.active a.atributo-item[data-grade-nome*="Cor"] {
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}

.atributos ul li a.atributo-item[data-grade-nome*="Cor"] span {
  font-size: 13px !important;
  margin-bottom: 6px !important;
  text-transform: capitalize !important;
}

/* Amostra da cor */
.pagina-produto .sq-amostra-cor {
  display: block !important;
  width: 28px !important;
  height: 9px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  margin: 0 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================
   7. BOTÕES DE TAMANHO (MESMO PADRÃO E ALTURA ALINHADA)
   ========================================================== */
.atributos ul li a.atributo-item[data-grade-nome*="Tamanho"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 52px !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1.5px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
}

.atributos ul li a.atributo-item[data-grade-nome*="Tamanho"] span {
  font-size: 14px !important;
  line-height: 1 !important;
}

.atributos ul li a.atributo-item[data-grade-nome*="Tamanho"]:hover {
  border-color: #000000 !important;
  background-color: #f8fafc !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transform: none !important;
}

.atributos ul li.active a.atributo-item[data-grade-nome*="Tamanho"] {
  border: 2px solid #000000 !important;
  background-color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  transform: none !important;
}

/* ==========================================================
   8. BOTÃO COMPRAR - NORMAL ESCURO E HOVER CLARO/ACESO 100% SÓLIDO
   ========================================================== */
.pagina-produto .botao-comprar.principal,
.pagina-produto a.botao-comprar,
.pagina-produto button.botao-comprar,
.acoes-produto .botao-comprar {
  background: #15803d !important; /* Verde escuro elegante */
  background-color: #15803d !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: 0 3px 10px rgba(21, 128, 61, 0.25) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
}

/* HOVER: Acende para o verde claro vibrante SEM ficar opaco/esbranquiçado */
.pagina-produto .botao-comprar.principal:hover,
.pagina-produto a.botao-comprar:hover,
.pagina-produto button.botao-comprar:hover,
.acoes-produto .botao-comprar:hover {
  background: #16a34a !important; /* Verde claro aceso e vivo */
  background-color: #16a34a !important;
  background-image: none !important;
  color: #ffffff !important;
  opacity: 1 !important; /* NUNCA fica opaco ou transparente */
  filter: none !important; /* Remove filtro cinza do tema antigo */
  -webkit-filter: none !important;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.45) !important;
  transform: none !important;
}

.botao-comprar i {
  margin-right: 8px !important;
  font-size: 17px !important;
  color: #ffffff !important;
}

/* ==========================================================
   9. OTIMIZAÇÃO ESPECIAL PARA SMARTPHONES (MOBILE)
   ========================================================== */
@media (max-width: 767px) {
  .atributos .wrapper-dropdown ul,
  .atributos .wrapper-dropdown .dropdown,
  .pagina-produto .atributos div ul {
    gap: 6px !important;
    margin: 6px 0 14px 0 !important;
  }

  .atributos ul li a.atributo-item[data-grade-nome*="Cor"] {
    min-width: 66px !important;
    padding: 6px 8px 5px 8px !important;
  }

  .atributos ul li a.atributo-item[data-grade-nome*="Cor"] span {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .atributos ul li a.atributo-item[data-grade-nome*="Tamanho"] {
    min-width: 46px !important;
    height: 40px !important;
    padding: 0 10px !important;
  }

  .atributos ul li a.atributo-item[data-grade-nome*="Tamanho"] span {
    font-size: 13px !important;
  }

  .pagina-produto .botao-comprar.principal,
  .pagina-produto a.botao-comprar,
  .acoes-produto .botao-comprar {
    height: 46px !important;
    line-height: 46px !important;
    font-size: 15px !important;
  }
}