/* =====================================================================
 *  COFFEE-BLEND-SITE — CAMPANHA SAZONAL (faixa, selo e pastilha de cupom)
 *  ---------------------------------------------------------------------
 *  Arquivo NOSSO (prefixo cb-site-), nao faz parte do plugin original.
 *
 *  A faixa e PERSISTENTE: fica no topo de toda pagina da loja, nao fecha e
 *  nao depende de JavaScript para aparecer (so o botao "copiar" depende).
 *  Quem desliga tudo e `marca.promo.ativa` — num lugar so.
 *
 *  O cupom e o unico elemento desta faixa com fundo claro: ele e o que a
 *  pessoa precisa levar para o checkout, entao e o unico que compete com o
 *  preto. Tudo o mais e tipografia.
 * ===================================================================== */

.cb-promo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 12px 16px;
  background-color: #120a05;
  color: var(--cb-cream-100, #fbf6ee);
  text-align: center;
}

.cb-promo__marca {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: var(--cb-weight-bold, 800);
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* "BLACK" chapado e "NOVEMBER" no amarelo da marca: a leitura acontece em
   dois tempos mesmo de relance, que e o tempo que uma faixa tem. */
.cb-promo__fogo { color: var(--cb-yellow-500, #dcd24c); }

.cb-promo__texto {
  font-size: 13.5px;
  line-height: 1.25;
  font-weight: var(--cb-weight-medium, 500);
  color: rgb(251 246 238 / 0.82);
}

.cb-promo__texto b { color: var(--cb-cream-100, #fbf6ee); font-weight: var(--cb-weight-bold, 800); }

/* O cupom: alvo de toque de 44px, monoespacado para nao haver duvida entre
   I e l, e o aviso de copiado no lugar do proprio rotulo. */
.cb-promo__cupom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--cb-radius-pill, 999px);
  background-color: var(--cb-yellow-500, #dcd24c);
  color: #120a05;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--cb-weight-bold, 800);
  line-height: 1;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: transform 160ms var(--cb-ease-out, ease-out), box-shadow 160ms ease-out;
}

.cb-promo__cupom:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgb(220 210 76 / 0.9); }
.cb-promo__cupom:active { transform: translateY(0); }
.cb-promo__cupom:focus-visible { outline: 3px solid var(--cb-cream-100, #fbf6ee); outline-offset: 2px; }

.cb-promo__cupom svg { width: 16px; height: 16px; flex: none; }
.cb-promo__cupom.is-copiado { background-color: #4a7c28; color: #fff; }

/* Sem JS o botao continua legivel e selecionavel: vira so o codigo. */
.cb-promo__cupom[hidden] { display: none; }

@media (min-width: 768px) {
  .cb-promo { gap: 4px 16px; padding: 12px 24px; }
  .cb-promo__marca { font-size: 17px; }
  .cb-promo__texto { font-size: 14px; }
}

/* ---------------------------------------------------------------------
 *  SELO DA CAMPANHA (primeira dobra da home e cartoes de kit)
 *  O selo PULSA: numa pagina cheia de preco, o que precisa ser achado em
 *  meio segundo e o desconto. O pulso e de 5,5% — o suficiente para o olho
 *  pegar o movimento sem a pagina parecer que esta piscando.
 * ------------------------------------------------------------------- */

@keyframes cb-promo-pulso {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

.cb-promo-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--cb-radius-pill, 999px);
  background-color: #120a05;
  color: var(--cb-cream-100, #fbf6ee);
  font-size: 12.5px;
  font-weight: var(--cb-weight-bold, 800);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform-origin: left center;
  animation: cb-promo-pulso 1900ms ease-in-out infinite;
}

.cb-promo-selo b { color: var(--cb-yellow-500, #dcd24c); }

/* A linha do cupom embaixo do botao principal da home. */
.cb-promo-linha {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.35;
}

.cb-promo-linha .cb-promo__cupom { min-height: 40px; padding: 7px 13px; }

/* No meio de uma secao centrada (a vitrine, o fecho) a linha acompanha o
   alinhamento do bloco em vez de puxar o olho para a esquerda. */
.cb-promo-linha--centro { justify-content: center; margin-block-start: var(--cb-space-xs, 12px); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cb-promo-selo { animation: none; }
  .cb-promo__cupom { transition: none; }
}

/* =====================================================================
 *  O DESCONTO PULSA NA ESCADA DA PAGINA DE PRODUTO
 *  Numa tela cheia de numero, o desconto e o que precisa ser achado de
 *  relance. O pulso do cartao da vitrine mora em `cb-site-vitrine.css`
 *  (la o selo tem translate proprio e os keyframes precisam carregar ele).
 * ===================================================================== */

@keyframes cb-off-pulso-escada {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.cb-oferta-kit.is-escolhido .cb-oferta-kit__off {
  transform-origin: center;
  animation: cb-off-pulso-escada 1900ms ease-in-out infinite;
}

/* O selo "Melhor por pote" nao pulsa junto: dois pulsos no mesmo cartao
   viram ruido, e quem manda e a porcentagem. */

@media (prefers-reduced-motion: reduce) {
  .cb-oferta-kit.is-escolhido .cb-oferta-kit__off { animation: none; }
}

/* ---------------------------------------------------------------------
 *  A FAIXA EM UMA LINHA SO NO CELULAR (pedido do Chico, 09/11/2026)
 *
 *  Em 390px a faixa quebrava em duas: "Black November · 15% OFF" em cima,
 *  "em todo o site, com o cupom [BLEND15]" embaixo. Duas linhas e 66px de
 *  altura para uma informacao que cabe numa linha — e a faixa e a primeira
 *  coisa acima do cabecalho, entao ela empurra a pagina inteira para baixo.
 *
 *  O que sai e a frase do meio, que e a parte EXPLICATIVA: o selo amarelo
 *  com o icone de copiar ja se le como cupom sem precisar da legenda, e o
 *  aria-label do botao continua dizendo "Copiar o cupom BLEND15" para quem
 *  usa leitor de tela. A partir de 560px a frase volta, e ali ela sempre
 *  coube na mesma linha.
 *
 *  O alvo de toque do cupom continua em 44px: o problema era a quebra, nao
 *  a altura do botao.
 * ------------------------------------------------------------------- */
@media (max-width: 559px) {
  .cb-promo {
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px 12px;
  }

  /* "em todo o site, com o cupom" — a legenda que fazia a segunda linha. */
  .cb-promo__texto { display: none; }

  .cb-promo__marca {
    font-size: 14px;
    white-space: nowrap;
  }

  .cb-promo__cupom {
    flex: none;
    padding: 8px 12px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .cb-promo__cupom svg { width: 14px; height: 14px; }
}

/* ---------------------------------------------------------------------
 *  A PASTILHA DA CAMPANHA NA ESCOLHA DE KIT (pedido do Chico, 10/11/2026)
 *
 *  "Coloca essa tag na parte de escolha de produtos, pra dar impressao de
 *  mais 15% off." A pastilha e ESCURA com o numero em AMARELO: o mesmo par
 *  da faixa do topo, para a pessoa reconhecer que e a mesma promessa, e nao
 *  um segundo amarelo brigando com a porcentagem do kit.
 *
 *  Marcacao em `cb-site-mais-off.js`. Quando a campanha acabar, sai o bloco
 *  `.cb-promo` do `topo.html` e tudo isto para sozinho.
 * ------------------------------------------------------------------- */

/* A FILA assume o lugar que era so da pastilha amarela — o meio da divisa
   de baixo da foto — e passa a segurar as duas, lado a lado. */
.cb-card__ofertas {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, 50%);
}

/* Dentro da fila a amarela perde o posicionamento proprio (e o `translate`
   que vinha junto do pulso): quem posiciona agora e a fila. */
.cb-card__ofertas .cb-card__badge {
  position: static;
  transform: none;
  animation-name: cb-off-pulso-fila;
}

@keyframes cb-off-pulso-fila {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.cb-card__mais,
.cb-oferta-kit__mais,
.cb-oferta__mais {
  border-radius: var(--cb-radius-pill);
  background-color: var(--cb-coffee-600);
  color: var(--cb-yellow-500);
  font-weight: var(--cb-weight-bold);
  line-height: 1.3;
  white-space: nowrap;
}

.cb-card__mais {
  padding: 5px var(--cb-space-xs);
  font-size: var(--cb-ui-caption);
  box-shadow: var(--cb-shadow-sm);
}

/* Na escada o topo do card e `space-between` (nome de um lado, % do
   outro). Com a segunda pastilha o nome passa a empurrar as duas, que
   ficam juntas na direita — senao a campanha entraria ENTRE o nome e a
   porcentagem, separando justamente os dois numeros que devem ser lidos
   em sequencia. */
.cb-oferta-kit__topo:has(.cb-oferta-kit__mais) .cb-oferta-kit__nome {
  margin-inline-end: auto;
}

.cb-oferta-kit__mais,
.cb-oferta__mais {
  padding: 2px 7px;
  font-size: var(--cb-text-2xs);
}

@media (prefers-reduced-motion: reduce) {
  .cb-card__ofertas .cb-card__badge { animation: none; transform: none; }
}