/* Checkout B5-A (clean e equilibrado). Só o checkout carrega este arquivo; checkout.css
   continua compartilhado com o pedido e Minha conta.
   Sequência: produto → itens garantidos → extras/entrega (painel compacto) → formulário. */
/* Cabeçalho só no topo do checkout (na landing e nas outras páginas continua fixo): libera a tela
   do celular durante a rolagem e com o teclado aberto. Este CSS só é carregado pelo checkout. */
.site-header{position:relative;top:auto}
/* Nenhum texto visível do checkout usa a Archivo (fonte padrão do body): com o body na fonte do
   checkout, a página deixa de baixar 35 KB de fonte que ninguém vê (pesa no 3G). */
body{font-family:var(--mono)}
.ck-b5a.form-page{padding-block:.9rem 1.6rem}
.ck-b5a>.container{padding:.9rem 1.1rem 1rem}
.ck-b5a .ck-title{margin:0 0 .5rem;font-family:var(--display);font-size:1.12rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.ck-b5a .ck-product{margin:0 0 1rem}
:where(.ck-b5a .ck-card-body) p{margin:0}

/* Card do produto: imagem inclinada, rótulo → nome → preço → quantidade/pagamento. */
.ck-b5a .ck-card{display:flex;align-items:center;gap:.85rem;padding:.65rem .75rem .65rem .65rem;background:#fff;border:3px solid var(--dark);border-radius:18px;box-shadow:0 5px 0 var(--slate)}
.ck-b5a .ck-photo{flex:0 0 46%;max-width:12rem;margin:0;overflow:hidden;background:#000;border:3px solid var(--dark);border-radius:12px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--dark)}
.ck-b5a .ck-photo-img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.ck-b5a .ck-card-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.ck-b5a .ck-kicker{font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#62666e}
.ck-b5a .ck-name{margin:.15rem 0 .55rem;font-family:var(--display);font-size:1.25rem;line-height:1;text-transform:uppercase}
.ck-b5a #checkout-total-price{font-size:1.5rem;padding:.28em .5em;border-radius:10px;box-shadow:0 4px 0 var(--slate);white-space:nowrap}
.ck-b5a .ck-meta{margin-top:.6rem;font-family:var(--mono);font-size:.66rem;line-height:1.35;color:#6c7078;white-space:nowrap}

/* Itens garantidos: grade 2×2, miniatura + nome, sem selos extras. */
.ck-b5a .ck-guarantees{list-style:none;margin:.55rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.32rem}
.ck-b5a .ck-guarantees li{display:flex;align-items:center;gap:.6rem;height:35px;padding:0 .5rem 0 4px;background:var(--dark);color:var(--face);border-radius:10px;font-family:var(--mono);font-weight:700;font-size:.76rem;line-height:1.1}
.ck-b5a .ck-ico{flex:none;width:27px;height:27px;border-radius:7px;overflow:hidden;background:#2a2c31;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ck-b5a .ck-ico img{display:block;width:100%;height:100%;object-fit:cover}
.ck-b5a .ck-ico-max{display:grid;place-items:center}
.ck-b5a .ck-ico-max span{font-family:var(--mono);font-weight:700;font-size:.5rem;letter-spacing:-.02em;color:var(--lime)}

/* Extras e entrega: um painel leve com duas linhas, sem cards próprios nem contornos grossos. */
.ck-b5a .ck-info{margin-top:.4rem;padding:.45rem .7rem .5rem;background:#f4f5f7;border:1px solid #d6d9de;border-radius:12px}
.ck-b5a .ck-info p{margin:0;text-wrap:pretty;font-family:var(--mono);font-size:.74rem;line-height:1.38;color:#2a2d32}
.ck-b5a .ck-info-label{font-weight:700;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dark)}
.ck-b5a .ck-info-note{display:block;margin-top:.1rem;font-size:.7rem;line-height:1.35;color:#3d4047}
.ck-b5a .ck-extras .ck-info-label{display:block}
.ck-b5a .ck-info strong{font-weight:700;color:var(--dark)}
.ck-b5a .ck-extras strong{background:linear-gradient(#b5e83a,#b5e83a) 0 100%/100% .42em no-repeat;padding:0 1px}
.ck-b5a .ck-delivery{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.45rem;margin-top:.4rem!important;padding-top:.4rem;border-top:1px solid #dfe2e6}
.ck-b5a .ck-bolt{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--dark);color:var(--lime)}
.ck-b5a .ck-delivery>span:last-child{display:contents}
.ck-b5a .ck-delivery .ck-info-note{grid-column:1/-1}

/* Formulário (sem título visível): campos com o mesmo ritmo. */
.ck-b5a .field{margin-bottom:.65rem}
.ck-b5a .field label{margin-bottom:.28rem;font-size:.7rem;color:var(--dark)}
.ck-b5a .text-input,.ck-b5a .phone-field input{padding:.75rem .9rem}
/* Foco: a própria borda escura ganha um aro verde-lima colado nela, em vez de um segundo contorno afastado. */
.ck-b5a .text-input:focus-visible,.ck-b5a .phone-field:focus-within{outline:none;box-shadow:0 0 0 3px var(--lime),0 4px 0 3px var(--slate)}
.ck-b5a .field-hint{margin-top:.25rem;font-size:.7rem;line-height:1.38;color:#4a4e55}
/* WhatsApp recolhido: botão com área de toque de 44px, sem contorno pesado. */
.ck-b5a .ck-wpp{margin-bottom:.8rem}
.ck-b5a .ck-wpp-toggle{display:flex;align-items:center;gap:.55rem;width:100%;min-height:44px;padding:.3rem .2rem;background:none;border:0;border-radius:10px;font-family:var(--mono);font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dark);text-align:left;cursor:pointer}
.ck-b5a .ck-wpp-sign{position:relative;flex:none;width:24px;height:24px;border-radius:7px;background:var(--dark)}
.ck-b5a .ck-wpp-sign::before,.ck-b5a .ck-wpp-sign::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2.5px;margin:-1.25px 0 0 -5.5px;border-radius:2px;background:var(--lime);transition:transform .2s ease}
.ck-b5a .ck-wpp-sign::after{transform:rotate(90deg)}
.ck-b5a .ck-wpp-toggle[aria-expanded="true"] .ck-wpp-sign::after{transform:rotate(0deg)}
.ck-b5a .ck-wpp-text{min-width:0;overflow-wrap:anywhere}
/* Recolhido com número: o próprio número substitui o "(opcional)" (cabe numa linha no Android pequeno). */
.ck-b5a .ck-wpp-toggle[data-filled] .ck-wpp-opt{display:none}
.ck-b5a .ck-wpp-toggle[data-filled] .ck-wpp-text{white-space:nowrap}
.ck-b5a .ck-wpp-opt{flex:none;color:#3d4047;letter-spacing:.05em}
.ck-b5a .ck-wpp-toggle:focus-visible{outline:2px solid var(--dark);outline-offset:2px}
.ck-b5a .ck-wpp-panel{padding-top:.3rem}
.ck-b5a .ck-wpp-panel .field-hint{margin-top:.5rem}
.ck-b5a .ck-wpp-panel:not([hidden]){animation:ck-wpp-in .2s ease-out}
@keyframes ck-wpp-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ck-b5a .ck-wpp-panel:not([hidden]){animation:none}.ck-b5a .ck-wpp-sign::after{transition:none}}
.ck-b5a .btn-pay{min-height:3.6rem;font-size:1.08rem}
.ck-b5a .terms-consent{margin-top:.55rem}

/* Telas estreitas (Android pequeno, 320px): mesmos tamanhos de card, nada quebra em duas linhas sem necessidade. */
@media(max-width:359px){
  .ck-b5a .ck-card{gap:.6rem;padding:.55rem}
  .ck-b5a .ck-photo{flex-basis:44%}
  .ck-b5a .ck-kicker{font-size:.54rem}
  .ck-b5a .ck-name{font-size:1.02rem;margin:.1rem 0 .4rem}
  .ck-b5a #checkout-total-price{font-size:1.12rem;padding:.26em .42em}
  .ck-b5a .ck-meta{margin-top:.5rem;font-size:.52rem;letter-spacing:-.03em}
  .ck-b5a .ck-guarantees li{height:30px;gap:.45rem;padding:0 .35rem 0 4px;font-size:.64rem}
  .ck-b5a .ck-ico{width:22px;height:22px;border-radius:6px}
  .ck-b5a .ck-ico-max span{font-size:.42rem}
  .ck-b5a .ck-info{padding:.45rem .55rem}
  .ck-b5a .ck-info p{font-size:.72rem;letter-spacing:-.01em}
  .ck-b5a .ck-info-label{font-size:.63rem}
  .ck-b5a .ck-info-note{font-size:.68rem}
  .ck-b5a .ck-bolt{width:20px;height:20px;border-radius:6px}
  .ck-b5a .ck-wpp-toggle{gap:.45rem;font-size:.7rem;letter-spacing:.03em}
  .ck-b5a .ck-wpp-opt{letter-spacing:.01em}
  /* Entrega: raio + título na 1ª linha, descrição na largura toda (evita quebrar em 4 linhas). */
  .ck-b5a .ck-delivery .ck-info-label{letter-spacing:.04em}
}