/* Carrinho e Finalizar do checkout proprio (Fase 2a, 07/10/2026). Fiel aos prints do dono (referencias/abcd/checkout-pedidos-2026-10-05/prints 3 a 12):
   verde #318834 dos selos, botoes verde/escuro/bege, faixa cinza com a trilha, campos cinza. Tokens abaixo; nada de cor solta.
   CSP: so 'self', sem estilo inline. Mobile primeiro (375px); desktop a partir de 760px. */
@font-face { font-family: "Sora"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/static/fonts/sora-latin.woff2) format("woff2"); }
:root {
  --ck-verde: #318834;
  --ck-verde-botao: #3d9c1a;
  --ck-verde-botao-escuro: #327f15;
  --ck-verde-claro: #eef7ea;
  --ck-branco: #ffffff;
  --ck-escuro: #333333;
  --ck-bege: #f5e6c8;
  --ck-fundo: #f2f2f2;
  --ck-faixa: #e5e5e5;
  --ck-borda: #cfcfcf;
  --ck-campo: #ececec;
  --ck-texto: #333333;
  --ck-suave: #6b6b6b;
  --ck-azul-titulo: #12303f;
  --ck-rosa: #d81b60;
  --ck-erro: #b3261e;
  --ck-erro-fundo: #fdecea;
  --ck-raio: 10px;
  --ck-sombra: 0 2px 6px rgba(0, 0, 0, .22);
  --ck-fonte: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --ck-titulo-cor: var(--ck-verde);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.ck-corpo { margin: 0; background: var(--ck-fundo); color: var(--ck-texto); font-family: var(--ck-fonte); font-size: 16px; line-height: 1.45; padding-bottom: 88px; }
.ck-so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- icones ---------- */
.ck-ico { width: 20px; height: 20px; flex: none; }
.ck-ico-p { width: 18px; height: 18px; }
.ck-ico-largo { width: 30px; }
.ck-ico-grande { width: 32px; height: 32px; }
.ck-ico-escudo { width: 22px; height: 22px; color: #fff; }
.ck-ico-lima { color: #6fb300; }
.ck-tr { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ck-tr-2 { stroke-width: 2; }
.ck-tr-3 { stroke-width: 3; }
.ck-tr-boleto { stroke-width: 1.8; stroke-linecap: butt; }
.ck-tr-branco { fill: none; stroke: #fff; stroke-linecap: round; }
.ck-pr { fill: currentColor; }
.ck-pr-escuro { fill: rgba(0, 0, 0, .2); }
.ck-pr-branco { fill: #fff; }

/* ---------- topo e trilha ---------- */
.ck-topo { position: relative; background: var(--ck-faixa); padding: 20px 12px; }
/* logo da empresa no canto superior esquerdo (21/10, dono); sem logo, o nome. No celular sobe para a linha de cima */
.ck-marca { display: flex; align-items: center; justify-content: center; margin: 0 0 12px; color: var(--ck-azul-titulo); font-weight: 700; font-size: 18px; text-decoration: none; }
.ck-marca img { display: block; min-height: 24px; object-fit: contain; max-height: 36px; max-width: 180px; width: auto; height: auto; }
@media (min-width: 900px) { .ck-marca { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); margin: 0; } .ck-marca img { max-height: 43px; } }
.ck-trilha { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 4px; font-weight: 700; font-size: 16px; }
.ck-passo { color: #8a8a8a; }
.ck-passo-feito { color: #222; }
.ck-passo-atual { color: var(--ck-verde); }
.ck-trilha-seta { width: 16px; height: 16px; color: #9a9a9a; }

/* ---------- estrutura ---------- */
.ck-conteudo { max-width: 1180px; margin: 0 auto; padding: 20px 12px 88px; }
.ck-conteudo-estreito { max-width: 900px; }
.ck-cartao { background: #fff; border-radius: var(--ck-raio); box-shadow: var(--ck-sombra); padding: 16px; margin-bottom: 24px; }
.ck-cartao-topo { border-top: 2px solid var(--ck-verde); padding: 0; overflow: hidden; }
.ck-cartao-total { border: 1px solid var(--ck-borda); border-top: 2px solid var(--ck-verde); background: var(--ck-branco); padding: 20px 16px; box-shadow: var(--ck-sombra); }
.ck-sessao { margin-bottom: 24px; }
.ck-titulo-verde { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--ck-titulo-cor); text-transform: uppercase; letter-spacing: .01em; }
.ck-painel { background: #fff; border-radius: var(--ck-raio); padding: 12px; }
.ck-verde { color: var(--ck-verde); }
.ck-texto { margin: 12px 0; }
.ck-nota { font-size: 13px; color: var(--ck-suave); margin: 12px 0 0; }
.ck-dica { font-size: 13px; color: var(--ck-suave); margin: 6px 0 0; }
.ck-link { color: #1d6f8e; text-decoration: underline; }
.ck-aviso { margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: #eaf3fb; border: 1px solid #9cc4e4; font-size: 15px; }
.ck-aviso-erro { background: var(--ck-erro-fundo); border-color: #e6a29c; color: var(--ck-erro); font-weight: 600; }
.ck-lista-erros { list-style: none; padding-left: 14px; }
.ck-lista-erros li + li { margin-top: 4px; }

/* ---------- botoes ---------- */
.ck-botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 20px; border: 0; border-radius: 6px; font: inherit; font-size: 16px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--ck-sombra); color: #fff; }
.ck-botao:focus-visible, .ck-campo:focus-visible, .ck-metodo:focus-visible, .ck-x:focus-visible, .ck-qtd-botao:focus-visible, .ck-extra-botao:focus-visible, .ck-flutuante:focus-visible, .ck-link:focus-visible { outline: 3px solid #0099ff; outline-offset: 2px; }
.ck-botao-verde { background: var(--ck-verde-botao); }
.ck-botao-verde:hover { background: var(--ck-verde-botao-escuro); }
.ck-botao-escuro { background: var(--ck-escuro); }
.ck-botao-escuro { transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ck-botao-escuro:hover { background: color-mix(in srgb, var(--ck-escuro) 82%, #fff); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .28); }
.ck-botao-escuro:active { transform: none; box-shadow: var(--ck-sombra); }
@media (prefers-reduced-motion: reduce) { .ck-botao-escuro { transition: none; } .ck-botao-escuro:hover { transform: none; } }
.ck-botao-bege { background: var(--ck-bege); color: #4a3c1f; box-shadow: none; }
.ck-botao-bege:hover { background: #ecd7ab; }
.ck-botao-contorno { background: #fff; color: var(--ck-verde); border: 1px solid var(--ck-verde); width: 100%; margin-top: 12px; }
.ck-botao-contorno:hover { background: var(--ck-verde-claro); }
.ck-botao-grande { width: 100%; min-height: 56px; font-size: 17px; }
.ck-botao-p { min-height: 44px; padding: 8px 16px; font-size: 15px; }
.ck-botao[disabled], .ck-desligado { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- tabela de itens do carrinho ---------- */
/* linha compacta (24/10, dono): ~60px, miniatura 40px; no celular 2 linhas curtas (nome + subtotal / preco + quantidade) */
.ck-linha { display: grid; grid-template-columns: 44px 40px minmax(0, 1fr) auto; grid-template-areas: "x img nome sub" "x img preco qtd"; gap: 2px 10px; align-items: center; padding: 8px 12px 8px 4px; border-top: 1px solid var(--ck-borda); }
.ck-linha-cab + .ck-linha { border-top: 0; }
.ck-linha-cab { display: none; font-weight: 700; font-size: 14px; color: var(--ck-azul-titulo); border-bottom: 1px solid #999; }
.ck-c-x { grid-area: x; }
.ck-c-img { grid-area: img; }
.ck-c-nome { grid-area: nome; min-width: 0; font-size: 15px; line-height: 1.3; }
.ck-c-preco { grid-area: preco; font-weight: 700; font-size: 14px; }
.ck-c-qtd { grid-area: qtd; font-weight: 700; font-size: 14px; justify-self: center; text-align: center; }
.ck-c-sub { grid-area: sub; font-weight: 700; justify-self: end; }
.ck-linha:not(.ck-linha-cab) .ck-c-qtd::before { content: attr(data-rotulo) ": "; font-weight: 400; color: var(--ck-suave); }   /* celular: preco e subtotal sem rotulo (o valor basta), so a quantidade ganha rotulo */
.ck-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: #111; cursor: pointer; }
.ck-x:hover { background: var(--ck-faixa); }
.ck-miniatura { display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: #fff; }
.ck-iniciais { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #5a5a5a; background: var(--ck-campo); border-radius: 6px; }
.ck-iniciais-grande { width: 100%; height: 100%; font-size: 40px; }
.ck-etiqueta { display: inline-block; margin: 0 6px 0 0; padding: 1px 8px; vertical-align: 1px; border-radius: 99px; background: var(--ck-verde-claro); color: var(--ck-verde); font-size: 12px; font-weight: 700; }
.ck-etiqueta-cinza { background: var(--ck-campo); color: var(--ck-suave); }
.ck-qtd { display: inline-flex; align-items: center; gap: 4px; }
.ck-qtd-botao { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--ck-borda); border-radius: 6px; background: #fff; cursor: pointer; }
.ck-qtd-botao[disabled] { opacity: .4; cursor: not-allowed; }
.ck-qtd-valor { min-width: 32px; text-align: center; }

/* ---------- adicione mais conteudo ---------- */
.ck-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.ck-card-produto { display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: var(--ck-sombra); overflow: hidden; padding-bottom: 14px; }
.ck-card-capa { height: 120px; background: linear-gradient(#cfcfcf, #fff); display: flex; align-items: center; justify-content: center; }
.ck-card-capa img { max-width: 70%; max-height: 100px; object-fit: contain; }
.ck-card-corpo { padding: 12px 14px 8px; flex: 1; }
.ck-card-nome { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.ck-card-desc { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: #444; }
.ck-card-preco { margin: 0; font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
.ck-de s { color: var(--ck-suave); }
.ck-por strong { color: var(--ck-verde); font-size: 17px; }
/* o PARCELADO e o destaque (verde, maior); o a vista fica do tamanho que o parcelado tinha (dono, 08/10) */
.ck-parc, .ck-parc strong { color: var(--ck-verde); font-size: 17px; font-weight: 700; }
.ck-por-avista, .ck-por-avista strong { color: var(--ck-suave); font-size: 13px; font-weight: 600; }
.ck-card-saiba { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 13px; line-height: 1; }
.ck-card-saiba[hidden] { display: none; }
.ck-card-saiba .ck-ico { width: 14px; height: 14px; flex: none; }
.ck-mais-texto { margin: -4px 0 10px; font-size: 15px; font-weight: 400; color: #333; }
.ck-cupom-remover { padding: 0 4px; min-height: 32px; margin-left: 4px; font-weight: 400; font-size: 13px; }
.ck-card-produto .ck-botao { align-self: center; }

/* ---------- total do carrinho ---------- */
.ck-totais { margin: 0 0 12px; }
.ck-totais > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.ck-totais dt { font-weight: 600; }
.ck-totais dd { margin: 0; font-weight: 700; }
.ck-total-linha { border-top: 1px solid var(--ck-borda); margin-top: 6px; padding-top: 8px !important; font-size: 18px; }
.ck-parcele { margin: 0 0 16px; color: var(--ck-verde); font-weight: 700; }
.ck-nowrap { white-space: nowrap; }
.ck-subtotal { margin: 4px 0 14px; padding: 10px 12px; background: var(--ck-verde-claro); border-radius: 8px; }
.ck-subtotal p { margin: 0; line-height: 1.4; }
.ck-subtotal-l1 { font-weight: 500; font-size: 16px; line-height: 1.3; }
.ck-subtotal-l2 { font-size: 14px; }
.ck-subtotal-l1 strong { color: var(--ck-verde); font-size: 26px; white-space: nowrap; }
.ck-subtotal-l2 { margin-top: 2px !important; }
.ck-subtotal-ass { font-size: 18px; margin-top: 6px !important; }
.ck-subtotal-ass:first-child { margin-top: 0 !important; }
.ck-subtotal-ass strong { color: var(--ck-verde); white-space: nowrap; }
.ck-subtotal-l2 strong { white-space: nowrap; }
.ck-cheio { color: var(--ck-suave); font-weight: 400; margin-right: 4px; }
.ck-desc-item { display: block; color: var(--ck-verde); font-weight: 700; font-size: 12px; }
.ck-cupom-aplicado { display: flex; align-items: center; gap: 4px; margin: 0; }
.ck-cupom-aplicado[hidden], .ck-cupom-form[hidden], #ck-cupom-abrir[hidden] { display: none !important; }
.ck-cupom-selo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--ck-verde-claro); color: var(--ck-verde); border-radius: 99px; font-size: 14px; }
.ck-cupom-x { width: 36px; height: 36px; }
.ck-cupom-form { margin-top: 6px; }
.ck-campo-parcelas { font-weight: 700; }
.ck-resumo-item-det { display: inline; font-size: 12px; color: var(--ck-suave); margin-left: 6px; }
.ck-resumo-item-det.ck-verde { font-weight: 700; }
.ck-forma-esq strong { display: block; }
.ck-forma-esq span, .ck-forma-dir { white-space: nowrap; }
.ck-cupom { margin: 12px 0 16px; }
.ck-cupom-linha { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-cupom-linha .ck-campo { flex: 1 1 180px; }
.ck-cupom .ck-aviso { margin-top: 8px; }

/* ---------- campos ---------- */
.ck-rotulo { display: block; margin: 12px 0 4px; font-size: 14px; color: var(--ck-azul-titulo); }
.ck-obrig { color: #a30000; }
.ck-opcional { color: var(--ck-suave); font-size: 12px; }
.ck-campo { width: 100%; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 2px solid #d4d4d4; border-radius: 3px; background: var(--ck-campo); color: var(--ck-texto); font: inherit; font-size: 16px; }
.ck-campo::placeholder { color: #9b9b9b; }
select.ck-campo { appearance: auto; }
.ck-campo[aria-invalid="true"] { border-bottom-color: var(--ck-erro); background: var(--ck-erro-fundo); }
.ck-erro-campo { margin: 4px 0 0; color: var(--ck-erro); font-size: 13px; font-weight: 600; }
.ck-copia { min-height: 84px; resize: none; font-size: 13px; word-break: break-all; }
.ck-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ck-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.ck-duo > div, .ck-duo .ck-campo { min-width: 0; }
.ck-g-ddi { max-width: 120px; }
.ck-g-perfil { grid-column: 1 / -1; }
.ck-perfil-opcoes { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
/* mockup do cartao (so classes: a CSP do checkout nao aceita estilo inline) */
.ck-cc-area { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ck-cc-area .ck-cc { order: -1; }       /* celular: o cartao ilustrado em cima dos campos */
.ck-dica-cartao { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ck-cc { perspective: 900px; width: 100%; max-width: 330px; aspect-ratio: 1.586; margin: 0 auto; }
.ck-cc-giro { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s; }
.ck-cc--verso .ck-cc-giro { transform: rotateY(180deg); }
.ck-cc-frente, .ck-cc-verso { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: #fff; overflow: hidden; background: linear-gradient(135deg, #2f3a45, #56626f); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.ck-cc[data-bandeira="visa"] .ck-cc-frente, .ck-cc[data-bandeira="visa"] .ck-cc-verso { background: linear-gradient(135deg, #1a3a6b, #3d6cb3); }
.ck-cc[data-bandeira="mastercard"] .ck-cc-frente, .ck-cc[data-bandeira="mastercard"] .ck-cc-verso { background: linear-gradient(135deg, #3a3a3a, #6b5a3a); }
.ck-cc[data-bandeira="elo"] .ck-cc-frente, .ck-cc[data-bandeira="elo"] .ck-cc-verso { background: linear-gradient(135deg, #1d1d1d, #44505a); }
.ck-cc[data-bandeira="amex"] .ck-cc-frente, .ck-cc[data-bandeira="amex"] .ck-cc-verso { background: linear-gradient(135deg, #1f6a6a, #4a9a94); }
.ck-cc[data-bandeira="hipercard"] .ck-cc-frente, .ck-cc[data-bandeira="hipercard"] .ck-cc-verso { background: linear-gradient(135deg, #5a2a2a, #8a4a4a); }
.ck-cc[data-bandeira="diners"] .ck-cc-frente, .ck-cc[data-bandeira="diners"] .ck-cc-verso { background: linear-gradient(135deg, #2a3f5a, #5a7a9a); }
.ck-cc-verso { transform: rotateY(180deg); }
.ck-cc-frente > span { position: absolute; left: 6%; font-size: clamp(11px, 3.4vw, 15px); letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); border-radius: 4px; padding: 2px 4px; margin-left: -4px; transition: background .2s, box-shadow .2s; }
.ck-cc-frente > .ck-cc-bandeira { top: 7%; right: 6%; left: auto; font-weight: 700; font-size: clamp(12px, 3.8vw, 16px); text-transform: uppercase; }
.ck-cc-frente > .ck-cc-chip { top: 24%; width: 13%; height: 15%; background: linear-gradient(135deg, #e6cf8a, #b89a4a); padding: 0; }
.ck-cc-frente > .ck-cc-num { top: 48%; font-size: clamp(14px, 5vw, 21px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-cc-frente > .ck-cc-nome { bottom: 10%; max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.ck-cc-frente > .ck-cc-val { bottom: 10%; right: 6%; left: auto; }
.ck-cc-frente > .ck-cc-cvv-frente { top: 36%; right: 6%; left: auto; }
.ck-cc-frente > [hidden] { display: none; }
.ck-cc-frente > .ck-cc-foco { background: rgba(255, 255, 255, .22); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.ck-cc-tarja { position: absolute; left: 0; right: 0; top: 12%; height: 18%; background: #151515; }
.ck-cc-faixa { position: absolute; left: 6%; right: 6%; top: 42%; height: 18%; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; background: #f2f2f2; border-radius: 4px; color: #222; }
.ck-cc-cvv { font-size: 16px; letter-spacing: .12em; }
@media (prefers-reduced-motion: reduce) { .ck-cc-giro { transition: none; } }
.ck-link-cep { margin-left: 8px; font-size: 13px; }
.ck-link.ck-link-cep { font-size: 16px; }   /* ponto 24 (dono, 21/10): link de apoio ao CEP legivel */
.ck-link-botao { border: 0; background: transparent; padding: 10px 4px; min-height: 44px; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.ck-cep-busca { margin-top: 10px; padding: 12px; border: 1px solid var(--ck-borda); border-radius: 6px; background: #fff; }
.ck-cep-busca-titulo { margin: 0 0 8px; font-weight: 700; color: var(--ck-azul-titulo); }
.ck-cep-busca-campos { display: grid; grid-template-columns: 1fr; gap: 8px; }
.ck-cep-lista { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.ck-cep-lista li + li { margin-top: 6px; }
.ck-cep-opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 10px 12px; border: 1px solid var(--ck-borda); border-radius: 6px; background: #fff; color: var(--ck-texto); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ck-cep-opcao:hover, .ck-cep-opcao:focus-visible { border-color: var(--ck-verde-botao); background: var(--ck-verde-claro); outline: none; }
.ck-cep-num { color: var(--ck-verde); font-weight: 700; }
@media (min-width: 760px) { .ck-cep-busca-campos { grid-template-columns: 90px 1fr 1.4fr auto; align-items: center; } }

/* ---------- finalizar ---------- */
/* contorno unico (ponto 32): uma moldura em volta do formulario, da oferta e dos detalhes; a oferta mantem a borda verde */
.ck-moldura { border: 1px solid #bdbdbd; border-radius: var(--ck-raio); background: #fcfcfc; padding: 8px 8px 0; margin-bottom: 24px; }
.ck-moldura > .ck-cartao { box-shadow: none; background: transparent; }
.ck-cartao-form { border: 0; background: transparent; box-shadow: none; padding: 12px 8px; margin-bottom: 8px; }
.ck-parabens { margin: 0 0 12px; font-size: 18px; line-height: 1.4; }
.ck-grade { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.ck-campo-bloco { min-width: 0; }
.ck-sigilo { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 8px; color: var(--ck-verde); font-size: 15px; }
.ck-metodo-titulo { margin: 16px 0 12px; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.ck-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-metodo { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 8px 10px; border: 1px solid #bdbdbd; border-radius: 4px; background: #fff; color: #333; font: inherit; font-size: 15px; cursor: pointer; }
.ck-metodo:hover { border-color: var(--ck-verde); }
.ck-metodo[aria-checked="true"] { border: 2px solid var(--ck-verde); background: var(--ck-verde-claro); color: var(--ck-verde); font-weight: 700; }
.ck-painel-forma { margin-top: 14px; padding: 14px; border: 1px solid var(--ck-borda); border-radius: 8px; background: #fff; }
.ck-dois { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--ck-borda); }
.ck-dois-passo { margin: 0; font-weight: 700; color: var(--ck-verde); }
.ck-campo-valor { max-width: 180px; }
.ck-dois-resumo { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-weight: 700; }
.ck-dois-resumo li { padding: 8px 10px; border-radius: 6px; background: var(--ck-verde-claro); color: #222; }
.ck-dois-resumo li.ck-dois-pago { color: var(--ck-verde); }
/* Oferta Unica (24/10, dono): linhas de BORDA A BORDA, divisoria de ponta a ponta, cantos so pela caixa (overflow hidden), linha inteira clicavel */
.ck-oferta { border: 1px solid var(--ck-verde); border-radius: var(--ck-raio); margin-bottom: 24px; background: var(--ck-branco); overflow: hidden; }
.ck-oferta-titulo { margin: 0; padding: 12px 14px 0; font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--ck-titulo-cor); }
.ck-oferta-sub { margin: 0; padding: 2px 14px 10px; font-size: 15px; }
.ck-extras { list-style: none; margin: 0; padding: 0; background: var(--ck-branco); }
.ck-extra { display: grid; grid-template-columns: 28px 40px minmax(0, 1fr); grid-template-areas: "marca img nome" "marca img desc" "marca img preco"; column-gap: 12px; row-gap: 0; align-items: center; min-height: 56px; padding: 8px 14px; border-top: 1px solid color-mix(in srgb, var(--ck-verde) 22%, #fff); background: var(--ck-branco); cursor: pointer; }
.ck-extra-sem-img { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "marca nome" "marca desc" "marca preco"; }
.ck-extra:focus-visible { outline: 3px solid #0099ff; outline-offset: -3px; }
.ck-extra-marcado { background: var(--ck-verde-claro); box-shadow: inset 3px 0 0 var(--ck-verde); }
.ck-extra-marca { grid-area: marca; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 2px solid var(--ck-verde); border-radius: 50%; background: var(--ck-branco); color: var(--ck-verde); }
.ck-extra-marca .ck-ico { width: 14px; height: 14px; }
.ck-extra-mais, .ck-extra-ok { display: flex; }
.ck-extra-ok, .ck-extra-marcado .ck-extra-mais { display: none; }
.ck-extra-marcado .ck-extra-ok { display: flex; }
.ck-extra-marcado .ck-extra-marca { background: var(--ck-verde); color: var(--ck-branco); }
.ck-extra-img { grid-area: img; display: block; width: 40px; height: 40px; }
.ck-extra-img img, .ck-extra-img .ck-iniciais { display: block; width: 40px; height: 40px; object-fit: contain; font-size: 14px; border-radius: 6px; }
.ck-extra-texto { display: contents; }
.ck-extra-nome { grid-area: nome; min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ck-extra-desc { grid-area: desc; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-width: 0; font-size: 13px; font-weight: 400; color: #555; line-height: 1.3; overflow: hidden; }
.ck-extra-preco { grid-area: preco; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; font-size: 16px; line-height: 1.35; }
.ck-extra-preco s { color: var(--ck-suave); }
.ck-extra-preco strong { font-size: 19px; }
.ck-economia { display: none; color: var(--ck-verde); font-weight: 700; }
@media (min-width: 760px) {
  .ck-extra { grid-template-columns: 28px 40px minmax(0, 1fr) auto; grid-template-areas: "marca img nome preco" "marca img desc preco"; }
  .ck-extra-sem-img { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: "marca nome preco" "marca desc preco"; }
  .ck-extra-preco { display: block; text-align: right; white-space: nowrap; }
  .ck-extra-de { display: block; }
  .ck-economia { display: inline; }
}
.ck-resumo { border: 0; background: transparent; box-shadow: none; }
.ck-resumo-titulo { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--ck-azul-titulo); }
.ck-resumo-itens { list-style: none; margin: 0 0 8px; padding: 0; background: var(--ck-branco); border: 1px solid var(--ck-borda); border-radius: var(--ck-raio); box-shadow: var(--ck-sombra); overflow: hidden; }
.ck-resumo-item { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 12px 2px 2px; background: var(--ck-branco); border-top: 1px solid var(--ck-borda); }
.ck-resumo-item:first-child { border-top: 0; }
.ck-resumo-item-nome { flex: 1; font-size: 15px; }
.ck-resumo-item-valor { font-weight: 700; white-space: nowrap; }
.ck-totais-p > div { padding: 3px 0; }
.ck-forma-escolhida { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; }
.ck-forma-esq, .ck-forma-dir { margin: 0; }
.ck-forma-dir { color: var(--ck-verde); font-weight: 700; }
#ck-comprar { margin-top: 6px; }
.ck-aceite { font-size: 12px; color: var(--ck-suave); text-align: center; margin: 10px 0 14px; }
.ck-selos { display: flex; justify-content: center; gap: 26px; margin: 18px 0 10px; flex-wrap: wrap; }
.ck-selo { display: flex; align-items: center; gap: 10px; color: var(--ck-verde); font-size: 13px; line-height: 1.2; }
.ck-selo-svg { width: 30px; height: 40px; flex: none; color: var(--ck-verde); }
.ck-pag-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0 2px; font-size: 20px; color: #6fb300; }
.ck-pag-gateway { margin: 0; text-align: center; font-size: 12px; color: #333; font-weight: 700; }

/* ---------- resultado (Pedido Concluido) ---------- */
.ck-resultado { text-align: center; }
.ck-resultado .ck-botao { margin-top: 14px; }
.ck-resultado .ck-campo, .ck-resultado .ck-rotulo { text-align: left; }
.ck-titulo-resultado { margin: 6px 0 8px; font-size: 24px; color: var(--ck-azul-titulo); }
.ck-grande-ok { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--ck-verde); color: #fff; }
.ck-qr { display: block; margin: 12px auto; max-width: 100%; height: auto; }
.ck-carregando { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(30, 30, 30, .72); color: #fff; z-index: 30; }
.ck-spinner { width: 44px; height: 44px; border: 5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: ck-gira .9s linear infinite; }
.ck-spinner-escuro { display: block; margin: 8px auto 4px; border-color: #d9dde1; border-top-color: var(--ck-verde); }
.ck-pedido-num { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 4px 0 16px; padding: 10px 16px; border: 1px dashed #b9c0c6; border-radius: 8px; font-size: 18px; }
.ck-pedido-num strong { font-size: 20px; letter-spacing: .06em; }
@keyframes ck-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-spinner { animation-duration: 3s; } }

/* ---------- estados vazios ---------- */
.ck-estado { max-width: 760px; margin: 0 auto; }
.ck-estado-faixa { height: 56px; background: var(--ck-faixa); }
.ck-estado-miolo { background: #f1f1f1; padding: 28px 18px 36px; text-align: center; }
.ck-estado-titulo { margin: 0 0 18px; font-size: 24px; color: #333; }
.ck-estado-texto { margin: 0 auto 14px; max-width: 520px; text-align: left; }
.ck-estado-botoes { display: flex; flex-direction: column; gap: 14px; margin: 26px auto 14px; max-width: 520px; }
.ck-estado-botoes .ck-botao { width: 100%; }
.ck-estado-miolo > .ck-botao-grande { max-width: 520px; }

/* ---------- botao flutuante ---------- */
.ck-flutuante { position: fixed; right: 12px; bottom: 12px; z-index: 20; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--ck-verde-botao); color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.ck-flutuante:hover { background: var(--ck-verde-botao-escuro); }
.ck-flutuante-ico { width: 32px; height: 32px; color: #fff; }
.ck-flutuante .ck-pr-branco { fill: var(--ck-verde-botao); }

/* ---------- desktop ---------- */
@media (min-width: 760px) {
  .ck-topo { padding: 28px 12px; }
  .ck-trilha { font-size: 22px; gap: 10px; }
  .ck-trilha-seta { width: 22px; height: 22px; }
  .ck-conteudo { padding: 24px 20px 8px; }
  .ck-linha { grid-template-columns: 44px 48px minmax(0, 1fr) 130px 130px 130px; grid-template-areas: "x img nome preco qtd sub"; gap: 0 14px; padding: 8px 20px 8px 8px; }
  .ck-linha-cab { display: grid; padding-top: 12px; padding-bottom: 8px; }
  .ck-linha:not(.ck-linha-cab) .ck-c-preco::before, .ck-linha:not(.ck-linha-cab) .ck-c-qtd::before, .ck-linha:not(.ck-linha-cab) .ck-c-sub::before { content: none; }
  .ck-c-nome { font-size: 16px; }
  .ck-c-preco, .ck-c-qtd { font-size: 16px; }
  .ck-c-qtd { justify-self: center; text-align: center; }
  .ck-c-sub { justify-self: start; }
  .ck-cards { grid-template-columns: repeat(4, 1fr); }
  .ck-card-capa { height: 96px; }
  .ck-cartao-total { padding: 24px; }
  .ck-cartao-total .ck-totais, .ck-cartao-total .ck-cupom { max-width: 520px; }
  .ck-cartao-total .ck-botao-grande { max-width: 520px; width: auto; }
  .ck-cartao-form { padding: 24px 22px; }
  .ck-grade { grid-template-columns: repeat(12, 1fr); }
  .ck-g-nome { grid-column: span 6; }
  .ck-grade-sob .ck-g-nome, .ck-g-sobrenome { grid-column: span 6; }
  .ck-g-doc { grid-column: span 6; }   /* CPF/CNPJ na linha de baixo, sozinho (dono, 25/10) */
  .ck-g-email { grid-column: span 12; }
  .ck-g-ddi { grid-column: span 2; }
  .ck-g-tel { grid-column: span 4; }
  .ck-g-perfil { grid-column: span 12; }
  .ck-cc-area { grid-template-columns: 1fr 330px; align-items: start; }
  .ck-cc-area .ck-cc { margin: 6px 0 0; order: 0; }
  /* Endereco (ponto 34): CEP sozinho; depois rua+numero, complemento+bairro, cidade+UF, tudo alinhado na grade de 12 colunas. */
  .ck-g-cep { grid-column: span 12; }
  .ck-g-cep .ck-campo-cep { max-width: 200px; }
  .ck-g-rua { grid-column: span 9; }
  .ck-g-num { grid-column: span 3; }
  .ck-g-compl { grid-column: span 6; }
  .ck-g-bairro { grid-column: span 6; }
  .ck-g-cidade { grid-column: span 8; }
  .ck-g-uf { grid-column: span 4; }
  .ck-modo-estr .ck-g-rua, .ck-modo-estr .ck-g-compl, .ck-modo-estr .ck-g-cidade { grid-column: span 12; }
  .ck-metodos { grid-template-columns: repeat(4, auto); justify-content: start; }
  .ck-metodo { padding: 8px 24px; }
  .ck-forma-escolhida { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
  .ck-forma-dir { text-align: right; max-width: 55%; }
  .ck-estado-botoes-2 { flex-direction: row; }
  .ck-flutuante { right: 20px; bottom: 20px; }
}

/* Formulario progressivo (07/10): campos do passo 2 e botao Continuar */
.ck-campo-bloco[hidden] { display: none !important; }

/* Boleto parcelado (so existe no HTML quando a Janela liberou): lista do carne, uma parcela por linha, toque confortavel */
.ck-carne { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.ck-carne li { background: #fff; border: 1px solid var(--ck-linha, #e5e0d8); border-radius: 10px; padding: 12px 14px; font-size: 15px; line-height: 1.4; }
.ck-carne a { display: inline-block; min-height: 44px; line-height: 44px; font-weight: 600; text-decoration: underline; }

/* ---------- pagamento vivo: cancelar e escolher outra forma (08/10/2026) ---------- */
.ck-viva { text-align: center; }
.ck-viva .ck-titulo-verde:focus-visible { outline: 3px solid #0099ff; outline-offset: 2px; }
.ck-viva-botoes { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 12px 0; }
.ck-viva-botoes .ck-botao { margin-top: 0; width: 100%; }
#ck-vazio-titulo:focus-visible, #ck-titulo-itens:focus-visible { outline: 3px solid #0099ff; outline-offset: 2px; }
@media (min-width: 760px) { .ck-viva-botoes { flex-direction: row; justify-content: center; } .ck-viva-botoes .ck-botao { width: auto; } }
/* item 88: link que abre em outra aba mostra so o icone (sem a frase "abre em outra aba") */
.ck-nota .ck-link .ck-ico-p { width: 14px; height: 14px; vertical-align: -2px; margin-left: 3px; }
/* item 82: assinatura no mesmo carrinho (bloco com a frase e a caixa de aceite, no Finalizar) */
.ck-assinatura { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--ck-borda, #d9d9d9); border-radius: 10px; background: #f7fbf5; }
.ck-assinatura-titulo { margin: 0 0 6px; font-size: 16px; }
.ck-aceite-assinatura { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 14px; line-height: 1.5; color: #444; cursor: pointer; }
.ck-assinatura-resumo { margin: 8px 0 0; padding: 8px 12px; background: #fff; border: 1px solid var(--ck-borda, #d9d9d9); border-radius: 8px; font-size: 15px; }
.ck-assinatura-resumo > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ck-assinatura-resumo dt { font-weight: 600; }
.ck-assinatura-resumo dd { margin: 0; font-weight: 700; text-align: right; }
.ck-aceite-assinatura input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
/* Aceite da assinatura (dono 28/10/2026): menor e organizado, uma frase por linha; o texto e o hash nao mudam. */
.ck-aceite-compacto { font-size: 13px; line-height: 1.4; margin-top: 8px; }
.ck-aceite-compacto input { width: 20px; height: 20px; }
.ck-aceite-corpo { display: block; }
.ck-aceite-item { display: block; padding: 2px 0 2px 10px; border-left: 2px solid var(--ck-borda, #d9d9d9); margin-bottom: 3px; }
.ck-aceite-item-titulo { padding-left: 0; border-left: 0; font-weight: 700; color: #222; }
/* compra com 1 clique (27/10/2026): cartao guardado e caixa "guardar este cartao" */
.ck-umclique { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--ck-borda, #d9d9d9); border-radius: 10px; background: #f7fbf5; }
.ck-umclique-titulo { margin: 0 0 4px; font-size: 17px; }
.ck-umclique-cartao { margin: 0 0 12px; font-size: 18px; }
.ck-salvar-cartao { margin: 12px 0; font-size: 16px; }
.ck-salvar-cartao small { display: block; margin-top: 4px; color: var(--ck-suave); font-size: 14px; line-height: 1.4; }

/* Cliente estrangeiro (09/10/2026): "Nao tenho CPF" e o endereco internacional */
.ck-estr-opcao { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.ck-estr-opcao input { width: 20px; height: 20px; flex: none; }
.ck-estr-aviso { margin-top: 8px; }
@media (min-width: 760px) {
  .ck-g-pais { grid-column: span 12; }
  .ck-g-regiao { grid-column: span 6; }
  .ck-g-cpostal { grid-column: span 6; }
}


/* Assinatura no Finalizar (P2): campo-armadilha para robo, fora da tela */
.ck-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ck-assinatura .ck-texto { font-size: 17px; }

/* Detalhes da Compra compacto (ponto 33): so na tela Finalizar (o CSS serve tambem o /carrinho) */
#ck-raiz[data-tela="finalizar"] .ck-totais-p > div { padding: 1px 0; }

/* Surdo ou ouvinte (ponto 22): pergunta grande, legivel, alvo de toque amplo (contraste do titulo #12303f sobre branco: acima de 12:1) */
.ck-g-perfil .ck-rotulo { font-size: 16px; font-weight: 700; margin: 14px 0 6px; }
.ck-g-perfil .ck-estr-opcao { font-size: 15px; min-height: 40px; margin-top: 2px; }
.ck-g-perfil .ck-estr-opcao input { width: 20px; height: 20px; }
.ck-perfil-opcoes { gap: 6px 24px; }

/* Cartao com layout ESTAVEL (24/10, dono): validade e CVV sempre lado a lado, cartao virtual em caixa de tamanho fixo e a
   mensagem de erro com espaco reservado: nada muda de lugar ao digitar, focar ou errar. */
.ck-cc-area { grid-template-columns: minmax(0, 1fr); }
.ck-cc-area .ck-cc { order: -1; width: 300px; max-width: 100%; height: 189px; aspect-ratio: auto; margin: 0 auto; }
.ck-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; grid-auto-flow: column; align-items: start; }
.ck-duo > div:nth-child(1) { grid-column: 1; grid-row: 1; }
.ck-duo > div:nth-child(2) { grid-column: 2; grid-row: 1; }
.ck-duo input.ck-campo { width: 100%; box-sizing: border-box; }
.ck-erro-campo[data-erro="cartao"][hidden] { display: block !important; visibility: hidden; }
.ck-erro-campo[data-erro="cartao"] { min-height: 2.8em; }
@media (min-width: 760px) {
  .ck-cc-area { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
  .ck-cc-area .ck-cc { order: 0; margin: 36px 0 0; }
  /* Colocacao explicita (dono, 27/10: cartao caia embaixo): qualquer elemento estranho injetado na area (extensao do navegador, autofill) nao empurra o cartao para a 2a linha */
  .ck-cc-area > form { grid-column: 1; grid-row: 1; }
  .ck-cc-area > .ck-cc { grid-column: 2; grid-row: 1; }
}
#ck-cep-msg { min-height: 1.5em; }
#ck-cep-msg[hidden] { display: block !important; visibility: hidden; }   /* "Buscando/CEP preenchido": espaco reservado, o endereco nao desce quando a mensagem aparece */

/* Pedido concluido compacto (24/10, dono): circulo 60px, espacos menores; "Copiar" alinhado ao centro do numero, sem mudar de largura ao virar "Copiado!" */
.ck-resultado { padding: 32px 20px 28px; }   /* mais respiro (dono, 28/10) */
.ck-titulo-resultado { margin: 16px 0 10px; font-size: 22px; }
.ck-resultado .ck-texto { margin: 12px 0; line-height: 1.5; }
.ck-resultado .ck-botao { margin-top: 20px; }
.ck-pedido-num { align-items: center; margin: 12px 0 16px; padding: 0 8px 0 14px; gap: 6px; font-size: 16px; line-height: 1.2; }
.ck-pedido-num strong { font-size: 20px; line-height: 1.2; }
.ck-pedido-num .ck-link-botao { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 44px; padding: 0 8px; line-height: 1.2; }
.ck-pedido-num .ck-link-botao .ck-ico-p { width: 16px; height: 16px; flex: none; }
.ck-pedido-num .ck-link-botao span { display: inline-block; min-width: 9ch; text-align: left; }

/* ---------- temas por empresa ----------
   O checkout base e generico (outras empresas usam como esta). Cada empresa com identidade propria troca so os tokens
   (`<body data-tema="...">`, definido em `checkout_carrinho_rotas._tema`): fonte, tinta, fundo e cor dos titulos. Layout igual. */
.ck-corpo[data-tema="universidade-libras"] {
  --ck-fonte: "Sora", -apple-system, "Segoe UI", sans-serif;
  --ck-texto: #181f27; --ck-suave: #5f6b78; --ck-fundo: #faf6ef; --ck-faixa: #efe8da; --ck-borda: #d8cfbc;
  --ck-azul-titulo: #003366; --ck-titulo-cor: #003366; --ck-escuro: #0f2540;
}
.ck-corpo[data-tema="octobase"] {
  --ck-fonte: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ck-texto: #141414; --ck-suave: #6b6b62; --ck-fundo: #f8f8f5; --ck-faixa: #ecebe4; --ck-borda: #d9d8ce;
  --ck-azul-titulo: #141414; --ck-titulo-cor: #141414; --ck-escuro: #141414;
}
/* botoes de acao (Comprar Agora, Eu quero, Adicionar) ficam VERDES em qualquer empresa: a identidade e do resto do layout (dono, 25/10) */

/* ---------- select pesquisavel (estado, pais): mesma aparencia dos campos do checkout; digitar filtra, clicar abre tudo ---------- */
.ui-select-busca { position: relative; }
.ui-select-busca-nativo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ui-select-busca-entrada { width: 100%; min-height: 48px; padding: 10px 36px 10px 12px; border: 0; border-bottom: 2px solid #d4d4d4; border-radius: 3px; background: var(--ck-campo); color: var(--ck-texto); font: inherit; font-size: 16px; }
.ui-select-busca-entrada:focus-visible { outline: 3px solid #0099ff; outline-offset: 2px; }
.ui-select-busca-seta { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ck-suave); pointer-events: none; display: flex; }
.ui-select-busca-lista { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow-y: auto; background: #fff; border: 1px solid var(--ck-borda); border-radius: 6px; box-shadow: var(--ck-sombra); padding: 4px; margin: 0; list-style: none; }
.ui-select-busca-opcao { padding: 10px; border-radius: 4px; font-size: 16px; cursor: pointer; }
.ui-select-busca-opcao:hover, .ui-select-busca-opcao.ativa { background: var(--ck-verde-claro); }
.ui-select-busca-opcao[aria-selected="true"] { font-weight: 700; color: var(--ck-verde); }
.ui-select-busca-vazia { padding: 10px; font-size: 15px; color: var(--ck-suave); }

/* "X" de tirar item menor (dono, 25/10): alvo de toque continua 40px, o desenho encolhe */
.ck-x { width: 40px; height: 40px; }
.ck-x .ck-ico { width: 14px; height: 14px; }

/* Total do Finalizar numa caixa so (dono, 25/10: "informacao fragmentada"): parcelado em destaque, a vista logo abaixo, forma escolhida no mesmo bloco */
.ck-total-destaque { margin: 0 0 8px; padding: 14px 16px; border-radius: 8px; background: var(--ck-verde-claro); border: 1px solid var(--ck-verde); }
.ck-total-destaque p { margin: 0; }
.ck-total-parcelado { font-size: 20px; font-weight: 600; }
.ck-total-parcelado strong { font-size: 28px; color: var(--ck-verde); white-space: nowrap; }
.ck-total-avista { margin-top: 4px !important; font-size: 14px; }
.ck-total-avista strong { white-space: nowrap; }
.ck-forma-escolhida { padding: 12px 16px; border: 1px solid var(--ck-borda); border-radius: 8px; background: #fff; }
.ck-forma-esq strong { display: inline; }
.ck-forma-esq span { font-weight: 600; }
/* o icone de bandeira que o script do Pagar.me injeta nao pode escapar para o topo da pagina (dono, 25/10) */
#ck-form-cartao { position: relative; }
#ck-form-cartao img { display: none !important; }
.ck-corpo > img, .ck-topo > img, body > img, .ck-marca > img + img, .ck-topo img[src*="brand" i], .ck-topo img[src*="mastercard" i], .ck-topo img[src*="pagar" i] { display: none !important; }
.ck-totais > .ck-total-destaque, #ck-raiz[data-tela="finalizar"] .ck-totais-p > .ck-total-destaque { display: block; padding: 14px 18px; }
.ck-oferta { margin-top: 16px; }

/* CPF/CNPJ: rotulo e link na mesma linha, "Nao tenho CPF" compacto abaixo do campo (dono, 25/10) */
.ck-doc-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ck-doc-cab .ck-link-cep { margin: 0; font-size: 13px; }
.ck-g-doc .ck-estr-opcao { margin-top: 6px; font-size: 13px; }
.ck-g-doc .ck-estr-opcao input { width: 16px; height: 16px; }

/* "Adicione mais conteudo": card esmaece ao ser escolhido; cards e item novos entram com fade */
.ck-card-produto { transition: opacity .28s ease, transform .28s ease; }   /* sem animacao de entrada: a tela nao pode piscar (dono, 27/10) */
.ck-card-produto.ck-saindo { opacity: 0; transform: scale(.96); }

@keyframes ck-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ck-card-produto, .ck-linha.ck-entrando { animation: none; transition: none; } }

/* Preco do bump em duas linhas: "ate Nx de R$ X" / "ou R$ Y a vista" (dono, 25/10/2026) */
.ck-extra-ou-linha { display: block; flex-basis: 100%; }
/* Foto de produto fisico amplia (dono, 25/10/2026) */
img[data-zoom] { cursor: zoom-in; }
.ck-zoom-previa { position: fixed; z-index: 9000; pointer-events: none; background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.35); padding: 8px; }
.ck-zoom-previa img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; border-radius: 6px; }
.ck-zoom-tela { position: fixed; inset: 0; z-index: 9100; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 16px; cursor: zoom-out; }
.ck-zoom-tela img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 8px; }
/* Foco no valor da parcela: "ate Nx de" e "ou R$ X a vista" menores (dono, 25/10/2026; todos os checkouts) */
.ck-extra-ate, .ck-parc-ate { font-size: 13px; font-weight: 600; color: var(--ck-verde); }
.ck-extra-ou-linha { font-size: 13px; }
.ck-parc .ck-parc-ate { font-size: 13px; }
/* Add-on por mes: "R$" e centavos pequenos, inteiro no tamanho de destaque; "/mes" na linha de baixo (dono, 25/10/2026) */
.ck-mes small { font-size: 13px; font-weight: 700; }
.ck-extra-preco strong.ck-mes .ck-mes-int { font-size: 19px; }
/* Parcelado: "R$" e centavos no tamanho do "ate Nx de"; so o inteiro em destaque (dono, 25/10/2026) */
.ck-mes small { font-size: 13px; font-weight: 600; }
.ck-parc .ck-mes .ck-mes-int { font-size: 17px; }
/* Padrao de tamanhos (dono, 25/10/2026): miudos (R$, centavos, "ate Nx de") 11px; "ou R$ X a vista" e "/mes" 12px; inteiro em destaque 19px (17px nos cards) */
.ck-mes small, .ck-extra-ate, .ck-parc .ck-parc-ate { font-size: 11px; }
.ck-extra-ou-linha, .ck-parc .ck-parc-ate + strong ~ * { font-size: 12px; }
.ck-por-avista, .ck-por-avista strong { font-size: 12px; }

/* Ajustes do dono (27/10/2026): textos menores, respiro nas bordas, Mais tempo de acesso no padrao do checkout */
.ck-parabens { font-size: 15px; }
.ck-total-parcelado { font-size: 15px; }
.ck-total-parcelado strong { font-size: 20px; }
.ck-extra-nome { font-size: 14px; }
.ck-extra-preco { font-size: 14px; }
.ck-extra-preco strong { font-size: 16px; }
.ck-oferta-titulo, .ck-extensao .ck-oferta-titulo { font-size: 17px; }
.ck-oferta-sub, .ck-extensao .ck-oferta-sub { font-size: 15px; }
.ck-g-perfil .ck-rotulo { margin-top: 32px; }
@media (min-width: 760px) {
  .ck-g-rua { grid-column: 1 / span 9; }
  .ck-g-num { grid-column: 10 / span 3; }
}
.ck-resumo-item { padding: 10px 16px; gap: 12px; }
#ck-comprar { margin-top: 28px; }
.ck-ext-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 18px; border-top: 1px solid color-mix(in srgb, var(--ck-verde) 22%, #fff); background: var(--ck-branco); }
.ck-ext-linha.ck-extra-marcado { background: var(--ck-verde-claro); }
.ck-ext-texto { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }
.ck-ext-qtd-rot { font-size: 13px; color: #555; }
.ck-ext-qtd { width: 96px; min-height: 40px; justify-self: start; }
.ck-ext-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px; font-size: 15px; white-space: nowrap; flex: 0 0 auto; }
.ck-ext-botao .ck-ico { width: 16px; height: 16px; }
@media (max-width: 480px) { .ck-ext-botao { width: 100%; } }
.ck-ext-texto > * { grid-area: auto; }
.ck-ext-texto .ck-extra-preco { display: block; }
.ck-ext-texto .ck-extra-preco { text-align: left; white-space: normal; }

.ck-ext-botao .ck-ext-ico-ok, .ck-ext-linha.ck-extra-marcado .ck-ext-ico-mais { display: none; }
.ck-ext-linha.ck-extra-marcado .ck-ext-ico-ok { display: inline-flex; }
.ck-ext-ico-mais, .ck-ext-ico-ok { display: inline-flex; }

/* Tabela do carrinho e subtotal menores, no padrao das paginas do site (dono, 27/10) */
.ck-linha-cab { font-size: 13px; }
.ck-linha-cab > * { font-size: 13px; }
.ck-c-nome { font-size: 14px; }
.ck-c-preco, .ck-c-qtd, .ck-c-sub { font-size: 14px; }
@media (min-width: 760px) { .ck-c-nome, .ck-c-preco, .ck-c-qtd, .ck-c-sub { font-size: 14px; } }
.ck-subtotal-l1 { font-size: 14px; }
.ck-subtotal-l2 { font-size: 13px; }
/* Rodape do checkout: marca, empresa/CNPJ e links legais */
.ck-rodape { text-align: center; padding: 28px 16px 40px; color: var(--ck-suave); font-size: 12px; line-height: 1.6; }
.ck-rodape-logo { display: block; margin: 0 auto 8px; max-height: 34px; width: auto; }
.ck-rodape-marca { display: block; margin-bottom: 6px; font-size: 14px; color: var(--ck-texto); }
.ck-rodape p { margin: 0; }
.ck-rodape a { color: var(--ck-suave); text-decoration: underline; }

/* painel "O que voce recebe / Para quem e" no resumo do Finalizar (dono 29/10) */
.ck-painel-produto { margin: 0 0 10px; padding: 12px; background: var(--ck-branco); border: 1px solid var(--ck-borda); border-radius: var(--ck-raio); }
.ck-painel-produto[hidden] { display: none; }
.ck-painel-por { margin: 0 0 8px; font-size: 13px; color: var(--ck-suave); }
.ck-painel-titulo { margin: 10px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ck-suave); }
.ck-painel-lista { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.45; }

/* Pedido concluido: frases curtas e centralizadas, o olho nao corre de ponta a ponta (dono 29/10, item 15) */
.ck-resultado .ck-texto { max-width: 42ch; margin-left: auto; margin-right: auto; }

/* Cartao: validade e CVV com tamanho fixo, sem mudar com foco nem com o icone do gerenciador de senhas (dono 29/10, item 13) */
.ck-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ck-duo > div { min-width: 0; width: 100%; }
.ck-duo input.ck-campo, .ck-duo input.ck-campo:focus { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; transition: none; }

/* Preco com hierarquia (tamanho B aprovado 29/10): inteiro grande; "R$" e centavos pequenos; "2x de" 15px verde 500 */
.ck-preco-fino { white-space: nowrap; }
.ck-preco-fino .ck-p-x { font-size: 15px; font-weight: 500; color: var(--ck-verde); }
.ck-preco-fino .ck-p-rs, .ck-preco-fino .ck-p-cent { font-size: 13px; font-weight: 600; }
.ck-preco-fino .ck-p-int { font-size: 27px; font-weight: 700; line-height: 1; }
.ck-total-avista .ck-preco-fino .ck-p-int, .ck-total-parcelado .ck-preco-fino .ck-p-int { font-size: 22px; }
.ck-total-avista .ck-preco-fino .ck-p-rs, .ck-total-avista .ck-preco-fino .ck-p-cent { font-size: 12px; }

/* Oferta Unica (dono 29/10, itens 6 e 21): imagem ou logo sempre a esquerda, descricao maior, folga antes do preco, preco alinhado a direita */
.ck-extra-img { align-self: center; }
.ck-extra-img .ck-iniciais { display: flex; width: 44px; height: 44px; font-size: 15px; }
.ck-extra-img, .ck-extra-img img { width: 44px; height: 44px; }
.ck-extra { grid-template-columns: 28px 44px minmax(0, 1fr); }
.ck-extra-desc { font-size: 14px; line-height: 1.35; color: #4a4a4a; }
@media (min-width: 760px) {
  .ck-extra { grid-template-columns: 28px 44px minmax(0, 1fr) minmax(112px, auto); column-gap: 16px; }
  .ck-extra-preco { align-self: center; justify-self: end; padding-left: 12px; text-align: right; }
  .ck-extra-preco strong { font-size: 19px; }
}

/* Resumo com cupom, padrao Amazon (aprovado 29/10, item 24b): rotulo a esquerda com "remover" discreto, valor sempre alinhado a direita */
.ck-totais > .ck-verde { align-items: baseline; }
.ck-totais > .ck-verde dt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.ck-totais > .ck-verde dd { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.ck-totais .ck-cupom-remover { margin-left: 0; color: var(--ck-suave); text-decoration: underline; font-size: 12px; }

/* validade/CVV: largura fixa nas duas colunas, com ou sem foco (extensao de senha/cartao injeta icone e encolhia o campo; dono 29/10) */
.ck-duo > div { min-width: 0; width: 100%; }
.ck-duo input.ck-campo, .ck-duo input.ck-campo:focus, .ck-duo input.ck-campo:focus-visible { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; transition: none !important; }

/* rodape enxuto (dono 30/10: espaco vazio demais abaixo do rodape); o respiro de 88px so no celular, onde o botao fixo/flutuante ocupa o fim */
.ck-corpo { padding-bottom: 16px; }
.ck-rodape { padding: 20px 16px 16px; }
@media (max-width: 720px) { .ck-corpo { padding-bottom: 88px; } }