/* =====================================================================
 *  COFFEE-BLEND-SITE — A OFERTA DA GAVETA, MAIOR E DENTRO DA TELA
 *  ---------------------------------------------------------------------
 *  Arquivo NOSSO (prefixo cb-site-), nao faz parte do plugin original.
 *
 *  "O order bump dos produtos ta muito pequeno na pagina" (Wendel, reuniao
 *  de 09/11/2026). Era literal: titulo de 14 px, foto de 56 px e um bloco
 *  tracejado que se parecia mais com um aviso do que com uma oferta, logo
 *  abaixo das linhas do carrinho — zero venda em 30 dias.
 *
 *  O que muda: a oferta deixa de ser um aviso e vira um CARTAO. O degrau em
 *  reais no tamanho de manchete, fundo amarelo da marca no bump (o
 *  cross-sell fica neutro, para as duas nao brigarem) e botao cheio.
 *  Nenhuma regra nova de preco: tudo continua saindo de `catalogo.ts`.
 *
 *  SEGUNDA RODADA (09/11/2026): o cartao grande nao CABIA. Medido em 390px
 *  com 1 pote no carrinho: o corpo rolavel da gaveta tem 291px e o conteudo
 *  dava 528px — o botao "Quero mais um pote" terminava 19px ABAIXO da borda,
 *  ou seja, so aparecia para quem rolasse dentro da gaveta. Um order bump que
 *  precisa de rolagem para ser visto nao e um order bump; isso sozinho ja
 *  explica boa parte do zero.
 *
 *  A altura da gaveta nao e nossa para mexer (vem do plugin, e o rodape com
 *  subtotal/total/botao e o que mais pesa), entao o espaco veio de onde era
 *  nosso: o cartao nasce compacto no celular e so cresce a partir de 560px,
 *  e a barra de progresso do frete some depois de completa (ver no fim).
 * ===================================================================== */

/* --- O cartao, compacto no celular ----------------------------------- */
.cb-offer {
  grid-template-columns: 64px 1fr;
  gap: 10px 14px;
  padding: 12px;
  border-width: 2px;
  border-radius: var(--cb-radius-lg, 18px);
}

/* O bump e a oferta que carrega o ticket: ele ganha o amarelo da marca e
   deixa de ser tracejado. O tracejado dizia "aviso"; cheio diz "oferta". */
.cb-offer--bump {
  border-style: solid;
  border-color: var(--cb-yellow-500, #dcd24c);
  background-color: rgb(220 210 76 / 0.16);
}

.cb-offer__media {
  width: 64px;
  height: 64px;
}

/* --- O numero -------------------------------------------------------- */
/* "Leve mais um pote por R$ 139" precisa ser lido de relance: e a frase que
   o Wendel pediu e a que estava escondida em 14 px. */
.cb-offer__title {
  font-size: var(--cb-text-base, 1rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.cb-offer__text {
  margin-block-start: 3px;
  font-size: 13px;
  line-height: 1.3;
}

/* O botao do bump e solido: a decisao que a gente quer que aconteca nao
   pode parecer a secundaria da tela. 48px continua sendo o alvo de toque
   minimo — o cartao emagreceu por cima e por baixo, nunca pelo alvo. */
.cb-offer--bump .cb-offer__cta {
  min-height: 48px;
  border-color: var(--cb-coffee-600);
  background-color: var(--cb-coffee-600);
  color: var(--cb-cream-100);
}

.cb-offer--bump .cb-offer__cta:hover {
  background-color: var(--cb-coffee-700);
  border-color: var(--cb-coffee-700);
}

/* --- Da tela media para cima sobra espaco: o cartao cresce ----------- */
@media (min-width: 560px) {
  .cb-offer {
    grid-template-columns: 76px 1fr;
    gap: var(--cb-space-xs, 12px) var(--cb-space-sm, 16px);
    padding: var(--cb-space-sm, 16px);
  }

  .cb-offer__media { width: 76px; height: 76px; }

  .cb-offer__title { font-size: var(--cb-text-lg, 1.125rem); }

  .cb-offer__text { margin-block-start: 4px; font-size: var(--cb-text-sm, 0.875rem); }
}

/* --- A barra de frete depois de completa ----------------------------- */
/* O `cart-ui.js` marca `data-complete="true"` no bloco do frete quando o
   frete gratis ja foi alcancado. Dali em diante a barra cheia nao informa
   mais nada — o texto "Boa! Voce ganhou frete gratis" ja diz tudo — e ela
   custa ~20px do unico pedaco rolavel da gaveta, que e justamente onde o
   order bump mora. O texto fica; so a barra sai. */
[data-freeship][data-complete="true"] [data-freeship-bar] {
  display: none;
}