/* ===========================================================================
   COFFEE-BLEND-SITE — A OFERTA EM DOIS PASSOS
   ---------------------------------------------------------------------------
   Arquivo NOSSO (prefixo cb-site-), fora do plugin original.

   Tudo aqui usa os tokens de `tokens.css` — nenhuma cor, raio ou espaco
   escrito a mao. O bloco e NOVO (nao e copia do WordPress), entao segue o
   minimo da regra 11: alvo de toque de 48 px, texto corrido de 15 px e nada
   de rolagem horizontal em 390 px.
   =========================================================================== */

.cb-oferta {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-md);
}

/* --- A trilha de passos ---------------------------------------------------
   Mostra onde a pessoa esta e quantos passos faltam. Numeros, e nao so cor,
   porque "o segundo de tres" e uma informacao que nao pode depender de
   enxergar a diferenca entre dois tons. */
.cb-oferta__passos {
  display: flex;
  align-items: center;
  gap: var(--cb-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--cb-ui-label);
}

.cb-oferta__passo {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cb-fg-muted);
}

.cb-oferta__passo::before {
  content: attr(data-n);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: var(--cb-border-thin) solid currentColor;
  border-radius: 50%;
  font-size: var(--cb-text-2xs);
  font-weight: var(--cb-weight-bold);
}

.cb-oferta__passo.is-atual {
  color: var(--cb-fg);
  font-weight: var(--cb-weight-bold);
}

.cb-oferta__passo.is-atual::before {
  background-color: var(--cb-coffee-600);
  border-color: var(--cb-coffee-600);
  color: var(--cb-cream-100);
}

/* Passo ja cumprido vira visto: confirma o caminho andado sem competir com o
   passo atual. */
.cb-oferta__passo.is-feito::before {
  content: '✓';
  background-color: var(--cb-yellow-500);
  border-color: var(--cb-yellow-500);
  color: var(--cb-coffee-700);
}

.cb-oferta__passo + .cb-oferta__passo {
  margin-inline-start: var(--cb-space-2xs);
}

/* --- Passo 1: os cards de quantidade -------------------------------------
   UMA coluna no celular, com a foto ao lado do texto. Em duas colunas os tres
   kits deixam um orfao sozinho na segunda linha, e o card estreito espreme a
   linha de economia — que e justamente o numero que faz a pessoa subir de
   kit. Deitado, cada card cabe inteiro e os tres se comparam de cima a baixo. */
.cb-oferta__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cb-space-xs);
}

/* A altura do card era ditada pela FOTO, nao pelo texto: 96 px de foto
   contra 89 px de coluna de texto. Encolher so um dos dois nao adiantava —
   o outro passava a mandar. Foto em 68 px e os vaos internos menores
   derrubam o card de 132 px para ~100 px, e os tres cards de 433 px para
   ~330 px. O alvo de toque continua o card inteiro, bem acima dos 48 px. */
.cb-oferta-kit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 68px;
  grid-template-areas:
    'topo  foto'
    'linhas foto'
    'preco foto';
  align-items: start;
  gap: 5px var(--cb-space-xs);
  /* o extra embaixo e a faixa do selo "Melhor por pote" (ver `__selo`) */
  padding: var(--cb-space-xs) var(--cb-space-xs) 26px;
  border: var(--cb-border-thick) solid var(--cb-line);
  border-radius: var(--cb-radius-lg);
  background-color: var(--cb-white, #fff);
  cursor: pointer;
  transition:
    border-color var(--cb-duration-fast) var(--cb-ease-out),
    transform var(--cb-duration-fast) var(--cb-ease-out),
    box-shadow var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-oferta-kit input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cb-oferta-kit:hover { border-color: var(--cb-coffee-300); }

/* O escolhido ganha borda da marca e um leve avanco: a diferenca nao pode
   depender so da cor da borda, que some para quem nao distingue os dois
   marrons. */
.cb-oferta-kit.is-escolhido {
  border-color: var(--cb-coffee-600);
  box-shadow: 0 0 0 3px rgb(84 41 21 / 0.12);
  transform: translateY(-2px);
}

.cb-oferta-kit__topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cb-space-2xs);
}

.cb-oferta-kit__nome {
  font-size: var(--cb-ui-body);
  font-weight: var(--cb-weight-bold);
  line-height: 1.2;
}

.cb-oferta-kit__off {
  padding: 2px 8px;
  border-radius: var(--cb-radius-pill);
  background-color: var(--cb-yellow-500);
  color: var(--cb-coffee-700);
  font-size: var(--cb-text-2xs);
  font-weight: var(--cb-weight-bold);
  white-space: nowrap;
}

.cb-oferta-kit__foto {
  grid-area: foto;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: var(--cb-radius-sm);
}

/* Em linha, nao empilhado: sobrou uma informacao so (as porcoes) e, no kit
   campeao, o selo ao lado dela. */
.cb-oferta-kit__linhas {
  grid-area: linhas;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
  font-size: var(--cb-ui-label);
}

.cb-oferta-kit__doses,
.cb-oferta-kit__porpote { color: var(--cb-fg-muted); }

/* Separa "52 porções" de "R$ 179,00/pote" sem gastar um caractere de texto
   que o leitor de tela teria de soletrar. */
.cb-oferta-kit__porpote::before { content: '· '; }

/* Fora do fluxo: no meio da linha, o selo empurrava "78 porções · R$
   172,33/pote" para uma segunda linha e so o card do 3 potes ficava 18 px
   mais alto que os outros dois — desalinho que parecia defeito, nao enfase.
   Ancorado no canto de baixo ele marca o kit sem mexer na altura.

   A FAIXA DE BAIXO E RESERVADA EM TODOS OS CARDS (`--cb-selo-faixa` no
   padding de `.cb-oferta-kit`): sem ela o selo caia POR CIMA do total do
   kit campeao, que e justamente o numero mais importante do card. */
.cb-oferta-kit__selo {
  position: absolute;
  inset-block-end: var(--cb-space-2xs);
  inset-inline-end: var(--cb-space-xs);
  padding: 2px 8px;
  border-radius: var(--cb-radius-pill);
  background-color: var(--cb-coffee-600);
  color: var(--cb-cream-100);
  font-size: var(--cb-text-2xs);
  font-weight: var(--cb-weight-bold);
}

.cb-oferta-kit__preco {
  grid-area: preco;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-block-start: auto;
  padding-block-start: 5px;
  border-block-start: var(--cb-border-thin) solid var(--cb-line);
}

/* O total e o maior numero do card; o riscado e o por pote ficam em volta,
   menores e em cinza, para nao disputar com ele. */
.cb-oferta-kit__preco b { font-size: var(--cb-text-lg, 1.125rem); line-height: 1.1; }

.cb-oferta-kit__preco s,
.cb-oferta-kit__preco small {
  color: var(--cb-fg-muted);
  font-size: var(--cb-ui-caption);
}

/* --- O resumo de preco acima do botao ------------------------------------ */
.cb-oferta__resumo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--cb-space-2xs);
}

.cb-oferta__de {
  color: var(--cb-fg-muted);
  font-size: var(--cb-ui-body);
  text-decoration: line-through;
}

.cb-oferta__por {
  font-size: var(--cb-text-xl);
  font-weight: var(--cb-weight-bold);
  line-height: 1;
}

.cb-oferta__pct {
  padding: 3px 10px;
  border-radius: var(--cb-radius-pill);
  background-color: var(--cb-yellow-500);
  color: var(--cb-coffee-700);
  font-size: var(--cb-ui-label);
  font-weight: var(--cb-weight-bold);
}

.cb-oferta__dica { color: var(--cb-fg-muted); font-size: var(--cb-ui-label); }

/* --- Passo 2: a lista de sabores ----------------------------------------- */
.cb-oferta__lista {
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cb-oferta-sabor {
  display: flex;
  align-items: center;
  gap: var(--cb-space-xs);
  padding: var(--cb-space-2xs) var(--cb-space-sm);
  border: var(--cb-border-thin) solid var(--cb-line);
  border-radius: var(--cb-radius-lg);
  background-color: var(--cb-white, #fff);
  transition: border-color var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-oferta-sabor.is-escolhido { border-color: var(--cb-coffee-400); }

.cb-oferta-sabor__foto {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.cb-oferta-sabor__nome {
  flex: 1;
  min-width: 0;
  text-wrap: balance;
  font-size: var(--cb-ui-body);
  font-weight: var(--cb-weight-medium);
}

/* 48 px de alvo nos dois botoes e no "Adicionar": e o minimo da regra 11
   para o que e novo, e aqui a pessoa toca varias vezes seguidas. */
.cb-oferta-sabor__add {
  min-height: 48px;
  padding-inline: var(--cb-space-md);
  border: var(--cb-border-thick) solid var(--cb-coffee-600);
  border-radius: var(--cb-radius-pill);
  background-color: transparent;
  color: var(--cb-coffee-600);
  font-size: var(--cb-ui-label);
  font-weight: var(--cb-weight-bold);
  cursor: pointer;
  transition:
    background-color var(--cb-duration-fast) var(--cb-ease-out),
    color var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-oferta-sabor__add:hover {
  background-color: var(--cb-coffee-600);
  color: var(--cb-cream-100);
}

.cb-oferta-sabor__contador {
  display: flex;
  align-items: center;
  gap: var(--cb-space-2xs);
}

.cb-oferta-sabor__contador b {
  min-width: 1.5ch;
  font-size: var(--cb-ui-body);
  text-align: center;
}

.cb-oferta-sabor__passo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: var(--cb-border-thin) solid var(--cb-line);
  border-radius: 50%;
  background-color: var(--cb-cream-100);
  color: var(--cb-fg);
  font-size: var(--cb-ui-body);
  cursor: pointer;
  transition: background-color var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-oferta-sabor__passo:hover { background-color: var(--cb-cream-300); }

/* --- A assinatura, antes dos sabores -------------------------------------
   Fica no fluxo de propósito (quem leva tres potes e o candidato natural),
   mas APAGADA ate as vendas abrirem. Nao escondemos: quem ve agora ja sabe
   que existe, e o rotulo diz por que nao da para clicar. */
.cb-oferta__assinatura {
  display: flex;
  align-items: center;
  gap: var(--cb-space-sm);
  padding: var(--cb-space-sm);
  border: var(--cb-border-thin) dashed var(--cb-line);
  border-radius: var(--cb-radius-lg);
  opacity: 0.55;
  cursor: not-allowed;
}

.cb-oferta__assinatura b { display: block; font-size: var(--cb-ui-body); }
.cb-oferta__assinatura small { color: var(--cb-fg-muted); font-size: var(--cb-ui-label); }

.cb-oferta__assinatura-selo {
  margin-inline-start: auto;
  padding: 3px 10px;
  border-radius: var(--cb-radius-pill);
  background-color: var(--cb-cream-500);
  color: var(--cb-coffee-700);
  font-size: var(--cb-text-2xs);
  font-weight: var(--cb-weight-bold);
  letter-spacing: var(--cb-ui-tracking);
  white-space: nowrap;
}

/* --- Rodape do passo 2 ---------------------------------------------------- */
.cb-oferta__aviso {
  color: var(--cb-coffee-600);
  font-size: var(--cb-ui-label);
}

.cb-oferta__voltar {
  align-self: flex-start;
  padding: var(--cb-space-2xs) 0;
  border: 0;
  background: none;
  color: var(--cb-fg-muted);
  font-size: var(--cb-ui-label);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Movimento ------------------------------------------------------------
   A troca de passo desliza de leve e o item escolhido pulsa. O suficiente
   para confirmar o toque, pouco o bastante para nao atrasar quem ja decidiu. */
@keyframes cb-oferta-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.is-entrando { animation: cb-oferta-entra var(--cb-duration-base, 260ms) var(--cb-ease-out) both; }

@keyframes cb-oferta-pulso {
  0%   { transform: none; }
  40%  { transform: scale(1.025); }
  100% { transform: none; }
}

.cb-oferta-sabor.is-pulsando { animation: cb-oferta-pulso 320ms var(--cb-ease-out); }

/* O botao em viagem: some o rotulo e entra um giro, para o toque nao parecer
   perdido enquanto o carrinho responde. */
.cb-oferta__fechar.is-indo { opacity: 0.7; pointer-events: none; }

/* Quem pediu menos movimento no sistema continua com a troca de passo, mas
   sem deslizar nem pulsar: a informacao esta no texto, nao no movimento. */
@media (prefers-reduced-motion: reduce) {
  .is-entrando,
  .cb-oferta-sabor.is-pulsando { animation: none; }
  .cb-oferta-kit { transition: none; }
  .cb-oferta-kit.is-escolhido { transform: none; }
}

/* --- Desktop --------------------------------------------------------------
   Com largura sobrando os kits ficam lado a lado: comparar tres precos numa
   linha so e mais rapido do que em grade de dois. */
@media (min-width: 768px) {
  .cb-oferta__cards { grid-template-columns: repeat(3, 1fr); }

  /* Em tres colunas o card volta a ser vertical: a largura nao comporta a
     foto ao lado sem espremer os numeros. */
  .cb-oferta-kit {
    grid-template-columns: 1fr;
    grid-template-areas: 'topo' 'foto' 'linhas' 'preco';
  }
  .cb-oferta-kit__foto { aspect-ratio: 1 / 1; }
}

/* --- Order bump do pote avulso (11/11/2026) ---------------------------
   "Leve mais um pote por R$ 139" no passo 2, so para quem escolheu 1 pote.
   Peca NOVA: alvo de 48 px, texto de 15 px, nada de rolagem lateral em 390. */
.cb-oferta-bump {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: var(--cb-space-xs) var(--cb-space-sm);
  margin-block-start: var(--cb-space-sm);
  padding: var(--cb-space-sm);
  border-radius: var(--cb-radius-lg);
  background-color: var(--cb-yellow-500);
  color: var(--cb-coffee-700);
}

.cb-oferta-bump[hidden] { display: none; }

.cb-oferta-bump__foto {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background-color: var(--cb-cream-100);
}

.cb-oferta-bump__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cb-oferta-bump__titulo {
  font-size: 1.0625rem;
  line-height: 1.25;
  font-weight: var(--cb-weight-bold);
  color: var(--cb-coffee-600);
  text-wrap: balance;
}

.cb-oferta-bump__apoio {
  font-size: var(--cb-ui-body);
  line-height: 1.35;
}

.cb-oferta-bump__apoio s { opacity: 0.7; }

.cb-oferta-bump__sim {
  grid-column: 1 / -1;
  min-height: 48px;
  border: 0;
  border-radius: var(--cb-radius-pill);
  background-color: var(--cb-coffee-600);
  color: var(--cb-cream-100);
  font-size: var(--cb-ui-body);
  font-weight: var(--cb-weight-bold);
  cursor: pointer;
  transition: background-color var(--cb-duration-fast) var(--cb-ease-out);
}

.cb-oferta-bump__sim:hover { background-color: var(--cb-coffee-700); }

/* Aceito: vira uma linha de confirmacao discreta, com a volta visivel. */
.cb-oferta-bump.is-aceito {
  grid-template-columns: auto 1fr auto;
  padding-block: var(--cb-space-2xs);
  background-color: var(--cb-yellow-300);
}

.cb-oferta-bump__ok {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--cb-coffee-600);
  color: var(--cb-cream-100);
  font-weight: var(--cb-weight-bold);
}

.cb-oferta-bump__texto { font-size: var(--cb-ui-body); }

.cb-oferta-bump__desfazer {
  min-height: 48px;
  padding-inline: var(--cb-space-xs);
  border: 0;
  background: none;
  color: var(--cb-coffee-600);
  font-size: var(--cb-ui-body);
  font-weight: var(--cb-weight-bold);
  text-decoration: underline;
  cursor: pointer;
}

@media (min-width: 560px) {
  .cb-oferta-bump:not(.is-aceito) { grid-template-columns: 64px 1fr auto; }
  .cb-oferta-bump:not(.is-aceito) .cb-oferta-bump__foto { width: 64px; height: 64px; }
  .cb-oferta-bump__sim { grid-column: auto; padding-inline: var(--cb-space-md); }
}

/* --- Aviso de sabor (11/11/2026) --------------------------------------
   Acima da lista de sabores: o que falta escolher. Peca NOVA: texto de 15 px.
   Faixa clara com o acento da marca na borda, para ler como instrucao e nao
   como erro. */
.cb-oferta-dica {
  display: flex;
  align-items: center;
  gap: var(--cb-space-xs);
  margin: 0 0 var(--cb-space-xs);
  padding: var(--cb-space-xs) var(--cb-space-sm);
  border-left: 4px solid var(--cb-yellow-500);
  border-radius: 12px;
  background-color: var(--cb-cream-300);
  color: var(--cb-coffee-600);
  font-size: var(--cb-ui-body);
  font-weight: var(--cb-weight-bold);
  line-height: 1.35;
}

.cb-oferta-dica[hidden] { display: none; }

.cb-oferta-dica::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--cb-yellow-500);
  box-shadow: 0 0 0 3px var(--cb-coffee-600);
}