/* =====================================================================
 *  COFFEE-BLEND-SITE — O CARTAO DA VITRINE NO PADRAO DA PAGINA DE PRODUTO
 *  ---------------------------------------------------------------------
 *  Arquivo NOSSO (prefixo cb-site-), nao faz parte do plugin original.
 *
 *  A escada de kits da `/produto/` (cb-site-oferta.css) fixou o jeito de
 *  mostrar uma oferta: UMA pastilha amarela com a porcentagem, UMA pastilha
 *  escura com o selo de carater ("Melhor por pote"), a contagem em doses de
 *  2 scoops e o total em ultimo. A vitrine (home, /kits/, cross-sell) estava
 *  com outra gramatica em cada cartao:
 *
 *    - 3 potes trazia "Mais economico", 2 potes trazia "R$ 149,80 de
 *      desconto" e 1 pote nao trazia nada: tres promessas diferentes, nenhuma
 *      comparavel, e a porcentagem — o unico numero que compara — em cinza
 *      de 11 px ao lado do riscado;
 *    - a linha de apoio dizia "R$ 172,33 por pote" em dois cartoes e "o
 *      formato do dia a dia" no terceiro, justamente o que faltava para o
 *      titulo da secao ("quanto maior o kit, menor a conta por pote") fechar;
 *    - as tres fotos eram de tres ensaios diferentes, lado a lado.
 *
 *  O que muda aqui e so a ROUPA. Preco, kit e o corpo da oferta da B4You
 *  continuam vindo de `src/lib/catalogo.ts`; quem reescreve o texto do
 *  cartao depois de pintado e `cb-site-vitrine.js`.
 * ===================================================================== */

/* ---------------------------------------------------------------------
 *  UMA REGUA SO NO CARTAO
 *  O cartao do plugin mostra duas contas: a porcao de 15 g (R$ 6,63) e a
 *  dose de 2 scoops (R$ 13,26), uma embaixo da outra. Desde 03/11/2026 a
 *  marca comunica SEMPRE a dose de 2 scoops com 20 g de proteina, entao a
 *  porcao de 15 g some — mas SO onde existe a linha da dose para ficar no
 *  lugar dela. Na caixa de saches e no Mix a porcao E o sache: ali a linha
 *  de 15 g e a unica que existe e tem que continuar aparecendo.
 *  (O JS marca `.cb-card--uma-regua`; o `:has` cobre quem esta sem JS.)
 * ------------------------------------------------------------------- */
.cb-card--uma-regua .cb-card__yield:not(.cb-card__yield--forte),
.cb-card:has(.cb-card__yield--forte) .cb-card__yield:not(.cb-card__yield--forte) {
  display: none;
}

/* ---------------------------------------------------------------------
 *  AS DUAS PASTILHAS SOBRE A FOTO (as mesmas duas da escada da /produto/)
 * ------------------------------------------------------------------- */

/* A PORCENTAGEM, amarela, no meio da divisa. Pulsa porque numa tela cheia
   de preco o desconto e o que precisa ser achado em meio segundo; 6% de
   escala e o bastante para o olho pegar o movimento sem a pagina piscar. */
@keyframes cb-off-pulso {
  0%, 100% { transform: translate(-50%, 50%) scale(1); }
  50% { transform: translate(-50%, 50%) scale(1.06); }
}

.cb-card__badge {
  animation: cb-off-pulso 1900ms ease-in-out infinite;
}

/* O selo de carater ("Melhor por pote", "Leve pra qualquer lugar") e escuro
   e fica no canto, como na escada: duas pastilhas amarelas no mesmo cartao
   brigariam entre si, e quem manda e a porcentagem. */
.cb-card__selo {
  position: absolute;
  inset-block-end: var(--cb-space-2xs);
  inset-inline-start: var(--cb-space-2xs);
  z-index: 3;
  padding: 3px 9px;
  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);
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--cb-shadow-sm);
}

/* Cartao sem desconto (o Mix) nao ganha pastilha amarela nenhuma: o selo
   escuro sobe para o meio da divisa, no lugar que seria dela, para a fileira
   nao ficar com um buraco. */
.cb-card:not(:has(.cb-card__badge)) .cb-card__selo {
  inset-block-end: 0;
  inset-inline: 50% auto;
  transform: translate(-50%, 50%);
}

/* ---------------------------------------------------------------------
 *  A LINHA DO RISCADO
 *  Agora que a porcentagem e uma pastilha, aqui fica so o preco cheio.
 * ------------------------------------------------------------------- */
.cb-card__compare s { text-decoration-thickness: from-font; }

/* A CAMPANHA PASSOU A ENTRAR NO CARTAO (Chico, 10/11/2026), revertendo o
   que estava escrito aqui. O texto antigo dizia que o cupom nao entrava
   "para nao virar um segundo desconto competindo com a porcentagem do
   kit" — e e justamente essa leitura somada que o Chico quer: a pastilha
   escura "+15% OFF" entra COLADA na amarela. A marcacao e o estilo moram
   em `cb-site-mais-off.js` e no fim do `cb-site-campanha.css`, nao aqui:
   sao da campanha e saem com ela. */

@media (prefers-reduced-motion: reduce) {
  .cb-card__badge { animation: none; transform: translate(-50%, 50%); }
}