/* ==========================================================================
   Checkout de página única — Amantes de Trinca

   Arquivo estático de propósito: dentro de <style> em template Django o "&"
   das URLs vira "&amp;" e os decimais viram vírgula no locale pt-BR.

   Herda os tokens de site_publico/css/site.css, que é carregado antes. Aqui
   ficam só os tokens próprios do checkout e o layout desta tela.
   ========================================================================== */

/* ── Regra de ouro do atributo `hidden` ───────────────────────────────────
   `hidden` é só `display: none` de baixa prioridade: qualquer classe que
   declare `display` o vence, e o elemento continua na tela mesmo com
   `.hidden = true` no JavaScript.

   Foi assim que a tela do PIX ficou "carregando para sempre": o código era
   gerado, o QR aparecia embaixo, e o "Gerando seu código PIX..." — um
   `display: flex` — nunca saía. Esta regra fecha a porta para toda a família
   de bugs, não só para aquele.
   ────────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }

/* ── Tokens ───────────────────────────────────────────────────────────────
   Aqui ficam SÓ os que o `site.css` não tem. A marca — verde, cremes, amarelo,
   linha, sombra, raio — vem de lá, herdada, nunca copiada.

   Havia um bloco redefinindo tudo isto com os valores da Central, e o
   argumento era bom: a compra termina em `/central/`, então chegar lá não
   deveria parecer mudar de lugar. Só que resolvia pelo lado errado. A marca é
   do SITE; quem tem de convergir para ela é a Central, e é para lá que isto
   vai depois. Duas paletas escritas em dois arquivos são duas paletas que
   divergem — foi o que aconteceu, e o preço apareceu na cor do card.

   Regra, então: token de marca não se copia para cá. Se faltar algum, ele
   nasce no `site.css`.

   As três superfícies, e só três. Quem precisa de um quarto tratamento não
   precisa de um quarto tratamento — precisa ser um destes:

     chão      var(--cream-2)  #fffaf0   a página, vinda do `site.css`
     elevado   var(--white)  + var(--line) + var(--shadow)
     recuado   var(--cream)    #f7efdf + var(--line), SEM sombra

   O erro que isto conserta: chão e recuado tinham o mesmo valor, e o passo
   respondido sumia no fundo. E, com o chão já sendo o creme mais claro que
   existia, "elevado" não tinha para onde ir senão o branco puro — o degrau
   duro que fazia os cards parecerem fortes demais. Na paleta do site os três
   tons já existem e já estão espaçados; bastava usá-los.

   Se o card aberto parecer fraco, a saída é sombra e borda — nunca escurecer
   o chão, que é o que colide com o recuado. */
:root {
  /* Sucesso e erro: o site não os nomeia. O verde aponta para o da marca em
     vez de trazer um quarto verde para a tela. */
  --ok: var(--forest-2);
  --erro: #b42318;
  --campo-bg: #fff;

  /* Altura da barra fixa, para o conteúdo não terminar embaixo dela. */
  --ck-barra: 76px;
}


/* O chão desta tela é o do site: `body { background: var(--cream-2) }`, no
   `site.css`. Não há regra aqui de propósito — uma linha repetindo o mesmo
   valor é uma linha para esquecer de mudar no dia em que a marca mudar. */

/* ── Cabeçalho enxuto ─────────────────────────────────────────────────────
   O checkout não tem menu: cada link aqui é uma porta de saída no exato
   momento em que o cliente decidiu comprar. Fica o logo (que volta à loja se
   ele quiser mesmo) e o selo de compra segura. */
.ck-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 250, 240, .88);   /* o --cream-2 do site */
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(30, 58, 46, .08);
}
.ck-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
}
.ck-header .brand-logo { width: auto; height: 34px; }
.ck-seguro {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.ck-seguro .ico { width: 15px; height: 15px; }

/* ── Grade ────────────────────────────────────────────────────────────────
   UMA coluna, em qualquer largura. Era formulário à esquerda e resumo grudado
   à direita no desktop, empilhado no celular — dois layouts para a mesma tela,
   que é o dobro de lugares para divergir, e a divergência sempre aparece na
   tela em que ninguém olhou.

   O que a coluna dupla garantia — o total visível enquanto a pessoa digita —
   passou para a barra fixa, que antes só existia no celular e agora vale nos
   dois. Mesma garantia, um layout só.

   O resumo vem ANTES do formulário: a primeira coisa que o cliente confere é o
   que está levando e quanto custa. Só então lhe perguntamos quem ele é. */
.ck-wrap { padding: 26px 0 calc(var(--ck-barra) + 28px); }
.ck-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.ck-resumo-col {
  order: -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dois cards: a lista responde "o que estou levando", os totais respondem
   "quanto vou pagar". O card dos itens não tem cabeçalho — lista de produto com
   preço não precisa de ninguém explicando que é o pedido. */
.ck-resumo-itens { padding: 6px 20px; }
.ck-resumo-totais { padding: 20px; }

/* ── Blocos do formulário ─────────────────────────────────────────────── */
/* Sem moldura, de propósito. Card serve para separar coisas que competem
   entre si; aqui as seções são uma sequência única — 1, 2, 3, 4 — e cercar
   cada uma empilha relevo sem separar nada. O que as divide é o respiro e uma
   linha fina, que é o suficiente. */
/* ── Cards ─────────────────────────────────────────────────────────────────
   Uma família só: passos e coluna do pedido usam o MESMO card. Antes eram dois
   tratamentos — passo em creme, pedido em branco — e a tela lia como duas telas
   coladas.

   Nenhum card é branco. Branco puro sobre o creme da marca lava a tela e tira a
   identidade; aqui ele fica reservado ao que se preenche — campo, e o frete
   escolhido. O que separa o card do chão não é a cor, que é quase a mesma de
   propósito, e sim a sombra e uma borda que se enxerga. Contraste vem da
   elevação, não de bater cor com cor: é isso que deixa a tela calma. */
.ck-card,
.ck-bloco {
  padding: 24px 22px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.ck-bloco:last-of-type { margin-bottom: 0; }

/* O passo respondido recua perdendo a ELEVAÇÃO, não a borda. A versão anterior
   apagava o contorno junto e o último card sumia contra o fundo. */
.ck-bloco.feito {
  box-shadow: none;
  background: var(--cream);
  padding-top: 16px;
  padding-bottom: 16px;
}
.ck-bloco.feito .ck-bloco-titulo { margin-bottom: 6px; }
.ck-bloco[hidden] { display: none; }

.ck-bloco-titulo {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 4px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
}
/* O número do passo é decoração, não instrução: some do leitor de tela para
   não virar "um seu whatsapp". */
/* Ícone no lugar do número. O número dizia a ordem, e a ordem agora está na
   própria pilha: um card aberto, os anteriores encolhidos, os seguintes fora da
   tela. O que faltava dizer era o ASSUNTO de cada passo — e é isso que o ícone
   faz de relance, antes de o título ser lido.

   Traço do Lucide, o mesmo do ERP e o mesmo da lixeira do item. */
.ck-passo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--forest);
  color: var(--white);
}
.ck-passo svg { width: 17px; height: 17px; }

/* No passo já respondido o selo esvazia: contorno em vez de fundo cheio. É o
   mesmo recuo que o card faz ao perder a sombra — o que já foi para de puxar a
   atenção sem sumir da tela. */
.ck-bloco.feito .ck-passo {
  background: none;
  color: var(--forest);
  box-shadow: inset 0 0 0 1.5px rgba(30, 58, 46, .35);
}
.ck-bloco-ajuda {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: .9rem;
}

/* ── Campos ───────────────────────────────────────────────────────────────
   Rótulo sempre visível, nunca placeholder no lugar dele: placeholder some
   quando a pessoa digita, e aí ninguém confere o que preencheu. */
/* Um campo por linha, em qualquer largura. Campo curto ao lado de campo longo
   economiza altura e cobra em atenção: são duas colunas para os olhos lerem e
   dois alvos concorrendo no polegar. Numa tela de compra, altura é barata —
   quem chegou aqui já decidiu e rola sem reclamar. */
.ck-linha { display: grid; gap: 14px; margin-bottom: 14px; }
.ck-linha:last-child { margin-bottom: 0; }
.ck-linha-2 { grid-template-columns: 1fr 1fr; }
.ck-linha-cep { grid-template-columns: 160px 1fr; }
.ck-linha-num { grid-template-columns: 130px 1fr; }

.ck-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ck-campo > label {
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink);
}
.ck-campo > label .ck-opcional {
  font-weight: 400;
  color: var(--muted);
}
.ck-campo input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--campo-bg);
  color: var(--ink);
  /* 16px é o mínimo que impede o iOS de dar zoom ao focar o campo — abaixo
     disso a página inteira salta e o cliente perde o contexto. */
  font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.ck-campo input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(30, 58, 46, .1);
}
.ck-campo input:disabled { background: #f6f4ef; color: var(--muted); }
.ck-campo.erro input { border-color: var(--erro); }
.ck-campo.erro input:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }

.ck-erro {
  min-height: 0;
  color: var(--erro);
  font-size: .8rem;
  font-weight: 500;
}
.ck-erro:empty { display: none; }

/* Campo do WhatsApp: é o único da primeira tela, então ganha o tamanho de
   quem é o assunto da página. */
.ck-campo-destaque input {
  padding: 16px 16px;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Estado "procurando cadastro" e "achei" */
.ck-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
}
.ck-status[hidden] { display: none; }
.ck-status.ok { color: var(--ok); }
.ck-spin {
  width: 15px;
  height: 15px;
  flex: none;
  border: 2px solid var(--line);
  border-top-color: var(--forest);
  border-radius: 50%;
  animation: ck-girar .6s linear infinite;
}
@keyframes ck-girar { to { transform: rotate(360deg); } }

/* ── Cartão do endereço reconhecido ───────────────────────────────────────
   Quem já é cliente vê isto no lugar do formulário inteiro. */
.ck-endereco {
  border: 1.5px solid var(--forest);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--cream);
}
.ck-endereco p { margin: 0; font-size: .93rem; line-height: 1.5; }
.ck-endereco .ck-end-rua { font-weight: 600; }
.ck-endereco .ck-end-resto { color: var(--muted); }
.ck-endereco-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 12px;
}

/* ── Frete ────────────────────────────────────────────────────────────── */
.ck-fretes { display: grid; gap: 10px; }
.ck-frete {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.ck-frete:hover { border-color: rgba(30, 58, 46, .38); }
/* Marcada puxa o creme, e não o branco. Com o card branco por baixo, era a
   marcada que sumia e a não marcada que aparecia — o contrário do que a tela
   quer dizer. É o mesmo tratamento da lista de modalidades do carrinho. */
.ck-frete[aria-checked="true"] {
  border-color: var(--forest);
  background: var(--cream);
}
.ck-frete-radio {
  width: 19px;
  height: 19px;
  flex: none;
  border: 2px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.ck-frete[aria-checked="true"] .ck-frete-radio { border-color: var(--forest); }
.ck-frete[aria-checked="true"] .ck-frete-radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--forest);
}
.ck-frete-copy { flex: 1; min-width: 0; }
.ck-frete-nome { display: block; font-weight: 600; font-size: .95rem; }
.ck-frete-prazo { display: block; color: var(--muted); font-size: .84rem; }
.ck-frete-valor { font-weight: 700; white-space: nowrap; }
.ck-frete-valor.gratis { color: var(--ok); }

/* ── Resumo ───────────────────────────────────────────────────────────── */
/* O resumo é o único que mantém superfície: ele é o recibo, a coisa que o
   cliente confere, e precisa ler como um objeto à parte do que ele preenche. */
.ck-resumo {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: var(--shadow);
}
/* ── A lista de produtos, recolhida ──────────────────────────────────────
   A conta abaixo NÃO recolhe junto: esconde-se a vitrine, nunca o dinheiro.
   Foi por juntar as duas coisas que a gaveta de 26/08 precisou ser desfeita. */
.ck-itens-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 4px 0 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.ck-itens-toggle .ck-seta { width: 18px; height: 18px; flex: none; color: var(--muted); transition: transform .2s ease; }
.ck-itens-toggle[aria-expanded="true"] .ck-seta { transform: rotate(180deg); }
.ck-itens-resumo { min-width: 0; }

.ck-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ck-itens[hidden] { display: none; }
.ck-item {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
/* O último item não leva risco: encostado na borda do card, ele vira uma linha
   dupla. */
.ck-item:last-child { border-bottom: 0; }
/* `contain`, e não `cover`. Foto de suplemento é um pote alto sobre fundo claro:
   recortada num quadrado de 54px, ela perde a tampa e a base e vira uma faixa do
   rótulo — o cliente não reconhece o que comprou. Com `contain` o pote aparece
   inteiro, menor, dentro de uma caixa clara que faz as fotos parecerem da mesma
   família mesmo vindo com enquadramentos diferentes. */
/* Solta, sem moldura. A caixinha em volta da foto criava um card dentro do
   card e ainda roubava 10px do produto para virar borda — num item de lista, a
   moldura só repete o contorno que já existe. `contain` continua: foto de pote
   alto recortada em quadrado perde tampa e base e o cliente não reconhece o que
   comprou. */
.ck-item-foto {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: contain;
  background: none;
  mix-blend-mode: multiply;
}
.ck-item-copy { min-width: 0; }
.ck-item-nome {
  margin: 0 0 9px;
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.3;
}
.ck-item-fim {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.ck-item-total { margin: 0; font-weight: 700; font-size: 1.02rem; white-space: nowrap; }
.ck-item-remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.ck-item-remover svg { width: 19px; height: 19px; }
.ck-item-remover:hover { color: var(--erro); background: rgba(180, 35, 24, .08); }

/* Stepper de quantidade. Editar aqui dentro é o que o checkout antigo não
   deixava: para trocar a quantidade era preciso sair, e sair apagava tudo. */
/* O fundo branco fica no controle inteiro, e não em cada botão. Antes só o "−"
   e o "+" eram brancos e o número no meio herdava o creme do card: virava um
   buraco entre dois botões, exatamente onde está o dado que importa. */
.ck-qtd {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}
.ck-qtd button {
  width: 34px;
  height: 34px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.ck-qtd button:hover:not(:disabled) { background: var(--cream); }
.ck-qtd button:disabled { color: var(--muted); cursor: default; }
.ck-qtd output {
  min-width: 36px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Frete grátis, dentro do card da conta ────────────────────────────────
   O motivo de ele existir: sem esse aviso, 40 pedidos em 90 dias pagaram
   frete estando a uma unidade do grátis.

   Mora entre a linha do Frete e o Total, e não num card próprio: é a mesma
   conversa que as linhas ao redor. Sem fundo, sem borda — dentro de uma conta,
   uma caixa colorida lê como se fosse outro valor a pagar. */
.ck-gratis-aviso { padding: 10px 0 4px; }
.ck-gratis-aviso[hidden] { display: none; }
.ck-gratis-msg {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.ck-gratis-msg strong { color: var(--ink); font-weight: 700; }
.ck-gratis-link {
  margin-left: 6px;
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.ck-barra {
  height: 6px;
  border-radius: 99px;
  background: rgba(30, 58, 46, .12);
  overflow: hidden;
}
.ck-barra-preenchida {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--yellow);
  transition: width .4s ease;
}


/* ── Totais ───────────────────────────────────────────────────────────── */
.ck-totais { padding: 16px 22px 20px; border-top: 1px solid var(--line); }
.ck-total-linha[hidden] { display: none; }
.ck-total-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: .91rem;
  color: var(--muted);
}
.ck-total-linha .ck-valor { color: var(--ink); font-weight: 600; }
.ck-total-linha .ck-valor.gratis { color: var(--ok); font-weight: 700; }
/* "calculado pelo CEP" não é um valor: fica com o peso de uma nota, para não
   competir com os números que estão ao lado. */
.ck-total-linha .ck-valor.pendente { color: var(--muted); font-weight: 400; font-size: .86rem; }
.ck-total-final {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
  font-weight: 600;
}
.ck-total-final .ck-valor {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
}

/* ── Botão de fechar ──────────────────────────────────────────────────── */
/* Amarelo, como todo botão de ação do site — o verde que estava aqui era o
   da navegação, e fazia o passo final parecer menos importante que o
   "Adicionar ao carrinho" da landing. */
.ck-confirmar {
  width: 100%;
  margin-top: 16px;
  padding: 16px;
  border: 0;
  border-radius: 13px;
  background: var(--yellow);
  color: var(--forest);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.ck-confirmar:hover:not(:disabled) { filter: brightness(.96); }
.ck-confirmar:disabled { opacity: .5; cursor: not-allowed; }
.ck-confirmar-nota {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .78rem;
  text-align: center;
  line-height: 1.45;
}

.ck-erro-geral {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1.5px solid rgba(180, 35, 24, .3);
  border-radius: 11px;
  background: rgba(180, 35, 24, .05);
  color: var(--erro);
  font-size: .87rem;
  font-weight: 500;
}
.ck-erro-geral:empty { display: none; }

/* ── Botões de texto ──────────────────────────────────────────────────── */
.ck-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--forest);
  font-size: .87rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ck-link:hover { color: var(--forest-2); }

/* ── Carrinho vazio ───────────────────────────────────────────────────── */
.ck-vazio { text-align: center; padding: 80px 0 100px; }
.ck-vazio h1 {
  margin: 0 0 10px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
}
.ck-vazio p { margin: 0 0 26px; color: var(--muted); }

/* ── Overlay de confirmação ───────────────────────────────────────────── */
.ck-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: rgba(30, 58, 46, .55);
  backdrop-filter: blur(3px);
}
.ck-overlay[hidden] { display: none; }
.ck-overlay-box {
  background: var(--white);
  border-radius: 18px;
  padding: 34px 40px;
  text-align: center;
  max-width: 300px;
}
.ck-overlay-box .ck-spin {
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  border-width: 3px;
}
.ck-overlay-box p { margin: 0; font-weight: 600; }

/* ── Resumo no mobile ─────────────────────────────────────────────────────
   Vira uma gaveta no topo: fechada mostra total e contagem, aberta mostra a
   mesma lista do desktop. O botão de fechar o pedido sai daqui e vira barra
   fixa, para estar sempre a um toque. */
.ck-barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(30, 58, 46, .1);
}
/* O fundo atravessa a tela; o conteúdo fica na medida da coluna. */
.ck-barra-fixa-linha {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin-inline: auto;
}
.ck-barra-fixa-total { flex: none; line-height: 1.2; }
.ck-barra-fixa-total span { display: block; color: var(--muted); font-size: .72rem; }
.ck-barra-fixa-total strong { font-size: 1.12rem; }
.ck-barra-fixa .ck-confirmar { display: block; flex: 1; margin: 0; padding: 15px; }

/* Quem confirma é o botão da BARRA FIXA. O "Finalizar pedido" de dentro do card
   de totais some daqui — com os dois na tela, o cliente vê o mesmo botão duas
   vezes e não sabe se são a mesma coisa.

   [26/08] Esconder pela CLASSE era largo demais. `.ck-confirmar` também veste os
   botões "Enviar código" e "Entrar" do bloco de login, que ficam FORA da barra
   fixa — e os dois sumiram da tela em toda largura: quem escolhia "já sou
   cliente" digitava o WhatsApp e não tinha em que clicar. A porta inteira estava
   morta em produção.

   Agora a regra nomeia o botão que ela quer esconder. É a terceira vez que um
   seletor amplo demais neste projeto derruba um elemento que nasceu depois
   dele — ver as notas sobre `details`/`summary` e sobre `[hidden]`. */
#btnConfirmar,
.ck-confirmar-nota { display: none; }

/* A coluna do conteúdo, na medida do carrinho. Sem isto, uma coluna só num
   monitor de 1280px vira uma linha de texto de ponta a ponta. */
.ck-grade { max-width: 560px; margin-inline: auto; }

/* O que continua sendo só de tela estreita: aperto de recuo e campos curtos
   que deixam de caber lado a lado. */
@media (max-width: 620px) {
  .ck-bloco { padding: 20px 18px; border-radius: 16px; }
  /* CEP e número seguem lado a lado: são curtos, e empilhá-los só alonga a
     página sem facilitar nada. */
  .ck-linha-2 { grid-template-columns: 1fr; }
  .ck-linha-cep { grid-template-columns: 150px 1fr; }
  .ck-linha-num { grid-template-columns: 110px 1fr; }
}

@media (max-width: 460px) {
  .ck-linha-cep, .ck-linha-num { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  /* Encolhe, mas pouco. Esta regra vinha de quando a foto tinha moldura e o
     item era compacto; com 44px o produto virava um selo ilegível justo no
     celular, que é onde a maioria compra. */
  .ck-item { grid-template-columns: 76px 1fr auto; gap: 12px; }
  .ck-item-foto { width: 76px; height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-barra-preenchida, .ck-seta, .ck-campo input { transition: none; }
  .ck-spin { animation-duration: 1.6s; }
}

/* ── As duas portas ───────────────────────────────────────────────────────
   Primeira coisa da tela. Existem porque quem sabe se já é cliente é o
   cliente — antes disso o checkout adivinhava pelo telefone, e adivinhar
   obriga a mascarar tudo por precaução. */
.ck-portas { padding: 8px 0 30px; }
.ck-portas[hidden] { display: none; }
.ck-portas-titulo {
  margin: 0 0 18px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 600;
}
.ck-portas-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Sugestões para fechar a cota ─────────────────────────────────────────
   Entram no card do frete grátis, e só enquanto ainda falta. Faltando muito,
   isto vira catálogo no meio do checkout; com a cota batida, é oferta a quem
   já ganhou o que ia ganhar. */

/* ── Destino, antes das portas ────────────────────────────────────────────
   Um card só com o CEP, acima da pergunta de identidade. Ele existe para o
   cliente saber o preço da entrega ANTES de se comprometer — pedir quem-é-você
   antes de dizer quanto custa é o que faz a pessoa sair "para pensar". */
.ck-destino-ajuda { margin: 0 0 12px; color: var(--muted); font-size: .88rem; }
.ck-destino-ajuda[hidden] { display: none; }

.ck-destino-form { display: flex; gap: 10px; }
.ck-destino-form[hidden] { display: none; }
.ck-destino-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--campo-bg);
  color: var(--ink);
  /* 16px cravados: abaixo disso o iOS dá zoom ao focar e a página sai do
     lugar bem no primeiro campo que o cliente toca. */
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.ck-destino-form input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(30, 58, 46, .1);
}
.ck-destino-btn {
  flex: none;
  min-width: 108px;
  padding: 13px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--forest);
  color: var(--white);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.ck-destino-btn:disabled { opacity: .6; cursor: default; }

/* Rótulo só para leitor de tela: o campo já é explicado pela frase acima, e um
   "Seu CEP" escrito ali empilharia duas linhas dizendo a mesma coisa. */
.ck-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Coluna de confiança ──────────────────────────────────────────────────
   Fica sob as portas, no espaço que sobrava. Sem card, sem borda e sem fundo:
   se virasse caixa, competiria com as duas portas, que são a única coisa a
   fazer nesta tela. É rodapé de leitura, não bloco de ação. */
/* Três fatos numa linha, não três blocos empilhados. Eram ~200px no exato
   momento em que a tela pede uma decisão (as portas); agora são ~40. */
.ck-confianca {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.ck-confianca[hidden] { display: none; }

.ck-confianca-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
}
.ck-confianca-fato { display: inline-flex; align-items: center; gap: 7px; }
.ck-confianca-fato svg { width: 15px; height: 15px; flex: none; color: var(--forest); }

/* Nomes das formas de pagamento como etiquetas. Discretas: elas confirmam,
   não anunciam — quem chegou até aqui já decidiu comprar. */
.ck-bandeiras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
}
.ck-bandeiras span {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.ck-porta {
  display: grid;
  gap: 4px;
  padding: 22px 20px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.ck-porta:hover {
  border-color: var(--forest);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(30, 58, 46, .1);
}
.ck-porta-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: var(--cream);
  color: var(--forest);
}
.ck-porta-ico svg { width: 21px; height: 21px; }
.ck-porta-nome { font-weight: 700; font-size: 1.02rem; }
.ck-porta-nota { color: var(--muted); font-size: .85rem; line-height: 1.4; }

/* ── Login ────────────────────────────────────────────────────────────── */
.ck-login[hidden], .ck-conta[hidden] { display: none; }

/* Dentro do bloco o botão não é o do rodapé: encolhe e para de puxar a
   atenção do botão que fecha o pedido. */
.ck-confirmar-inline {
  width: auto;
  min-width: 190px;
  margin-top: 14px;
  padding: 13px 26px;
  font-size: .95rem;
}

.ck-login-enviado {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(26, 127, 78, .07);
  color: var(--ok);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
}

/* O código é curto e o cliente confere dígito a dígito: espaçamento largo e
   tabular para nenhum 6 virar 8 na conferência. */
#loginCodigo {
  letter-spacing: .5em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.ck-login-saidas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: .85rem;
}

/* A saída para quem o código não alcança. Discreta, mas sempre visível: é a
   diferença entre "login rápido" e cliente travado na porta. */
.ck-login-escape {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
}

.ck-conta-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ck-conta-nome { margin: 0; font-weight: 600; }
.ck-conta-nome span { display: block; color: var(--muted); font-weight: 400; font-size: .86rem; }

@media (max-width: 940px) {
  .ck-portas { padding: 4px 0 22px; }
  .ck-portas-grade { grid-template-columns: 1fr; gap: 11px; }
  .ck-porta { padding: 18px; }
  .ck-porta-ico { width: 38px; height: 38px; margin-bottom: 4px; }
  .ck-confirmar-inline { width: 100%; }
}


/* ── Endereço que o CEP já resolveu ───────────────────────────────────────
   Três campos preenchidos viram uma linha lida. O que fica como campo é só o
   que nenhum CEP responde: número e complemento. */
.ck-end-resolvido {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
}
.ck-end-resolvido[hidden] { display: none; }
.ck-end-resolvido-linha { margin: 0; font-size: .92rem; line-height: 1.5; }
.ck-end-resolvido-linha strong { font-weight: 600; }
.ck-end-resolvido-linha span { display: block; color: var(--muted); font-size: .85rem; }


/* ── Passos ────────────────────────────────────────────────────────────────
   Um passo aberto por vez. O respondido encolhe para uma linha com "Alterar";
   o que ainda não chegou a vez espera fora da tela.

   Classe própria (`.espera`) em vez de `hidden`: o atributo já é usado pela
   lógica que decide quais blocos existem naquele momento, e disputar o mesmo
   controle com ela daria bloco piscando. */
.ck-bloco { transition: padding .28s ease; }
.ck-bloco.espera { display: none; }

/* O corpo encolhe em vez de sumir. `grid-template-rows: 1fr → 0fr` anima altura
   sem precisar saber a altura: `display:none` não tem meio termo para animar, e
   `max-height` chutado ou corta conteúdo ou deixa a animação seca no fim. */
.ck-corpo {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows .28s ease, opacity .2s ease;
}
.ck-corpo > .ck-corpo-in { min-height: 0; overflow: hidden; }
.ck-bloco.feito > .ck-corpo { grid-template-rows: 0fr; opacity: 0; }

/* Quem abre, abre subindo de leve — sem isso o bloco aparece pronto no lugar e
   a tela dá um solavanco. */
.ck-bloco.abrindo > .ck-corpo > .ck-corpo-in { animation: ck-surgir .3s ease both; }
@keyframes ck-surgir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
/* As portas entram com a mesma animação dos passos — é a mesma tela falando. */
.ck-portas.abrindo { animation: ck-surgir .34s ease both; }

@media (prefers-reduced-motion: reduce) {
  .ck-corpo { transition: none; }
  .ck-bloco.abrindo > .ck-corpo > .ck-corpo-in { animation: none; }
  .ck-portas.abrindo { animation: none; }
}

.ck-feito {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.ck-feito[hidden] { display: none; }
.ck-feito-texto { min-width: 0; color: var(--ink); font-size: .95rem; line-height: 1.45; }
.ck-feito-alterar { flex: none; }

/* O botão que fecha o passo. Sem ele o "Alterar" não teria par: abriria uma
   caixa que o cliente não sabe como fechar. Nasce desligado — ligar só quando
   dá para confirmar evita o clique que devolve erro. */
.ck-bloco-ok {
  margin-top: 18px;
  padding: 13px 28px;
  border: 1.5px solid var(--forest);
  border-radius: 12px;
  background: var(--forest);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.ck-bloco-ok[hidden] { display: none; }
.ck-bloco-ok:disabled { opacity: .45; cursor: default; }
.ck-bloco-ok:not(:disabled):hover { background: var(--forest-2, var(--forest)); }

/* O botão de ação é o AMARELO do site (`--yellow`), como em toda a loja.
   Havia aqui um bloco que o repintava de verde, no idioma da Central, e ele
   mesmo avisava: "no site inteiro o botão de ação é amarelo; aqui ele muda
   justo no passo de pagar, e se a conversão cair é o primeiro suspeito". Era
   o único ponto da compra onde o botão trocava de cor. */

/* ── Botão ocupado — uma roda só, para a tela inteira ─────────────────────
   O rótulo NÃO sai: fica transparente, no lugar, segurando a caixa. Antes cada
   botão trocava o próprio `innerHTML` pela roda, o que encolhia o botão até
   virar um risco (quem lhe dava largura era a palavra), fazia o texto passar a
   viver no JS, e estava copiado em seis lugares.

   A cor vem de variáveis, não de `currentColor`: com `color: transparent` o
   `currentColor` também fica invisível, e a roda sumiria junto com o texto. */
.is-ocupado {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
/* Ícone ou <span> dentro do botão some junto — senão aparece por trás da roda. */
.is-ocupado > * { visibility: hidden; }
.is-ocupado::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--ck-roda-fundo, var(--line));
  border-top-color: var(--ck-roda, var(--forest));
  border-radius: 50%;
  animation: ck-girar .6s linear infinite;
}

/* A roda tem de ter contraste com o BOTÃO, não com a página. Duas famílias:

   verde escuro com texto branco → roda branca
   amarelo com texto verde       → roda verde

   Esta segunda linha é a correção de um erro meu: quando o CTA voltou ao
   amarelo do site, ele continuou na lista dos "fundo escuro" e a roda ficou
   branca sobre amarelo — invisível. Regra: mexeu na cor de um botão, confira a
   roda dele. */
.ck-destino-btn,
.ck-bloco-ok { --ck-roda: #fff; --ck-roda-fundo: rgba(255, 255, 255, .35); }

.ck-confirmar,
.ck-wrap .btn-primary,
.ck-vazio .btn-primary { --ck-roda: var(--forest); --ck-roda-fundo: rgba(7, 60, 40, .22); }

@media (prefers-reduced-motion: reduce) {
  .is-ocupado::after { animation-duration: 1.6s; }
}

/* ── Transição entre as páginas do checkout ───────────────────────────────
   `/checkout/rapido/` → `/checkout/pagamento/<id>/` era um corte seco. Com isto
   o navegador faz o cruzamento sozinho, sem SPA e sem JS. Onde não há suporte
   (Firefox), a navegação é a de sempre. Precisa estar nos DOIS documentos. */
@view-transition { navigation: auto; }