/* =====================================================================
   AQUORA · C · checkout.css — uma página: formulário à esquerda, resumo fixo à direita
   ===================================================================== */
body.pg-checkout { background: var(--perola); }
.ck-topo { position: sticky; top: 0; z-index: var(--z-topo); height: var(--topo-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 clamp(12px, 3vw, 44px); background: rgba(245, 239, 232, .96); box-shadow: 0 1px 0 var(--linha); }
.ck-voltar { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; text-decoration: none; font: 500 .72rem/1 var(--ff-t); letter-spacing: .2em; text-transform: uppercase; }
.ck-marca { display: grid; place-items: center; min-height: 44px; }
.ck-marca img { height: clamp(20px, 2.4vw, 26px); width: auto; }
.ck-seguro-topo { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font: 500 .68rem/1 var(--ff-t); letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }
@media (max-width: 520px) { .ck-seguro-topo span, .ck-voltar span { display: none; } }
.ck-nojs { min-height: calc(100svh - var(--topo-h)); display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 60px var(--g); }

/* barra do resumo (celular) */
.ck-barra { position: sticky; top: var(--topo-h); z-index: calc(var(--z-topo) - 1); width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 var(--g); background: var(--perola-2); border-bottom: 1px solid var(--linha); font-size: .9rem; }
.ck-barra span { display: inline-flex; align-items: center; gap: 6px; color: var(--agua-tinta); font-weight: 500; }
.ck-barra .ic { width: 18px; height: 18px; transition: transform .5s var(--ease); }
.ck-barra[aria-expanded="true"] .ic { transform: rotate(180deg); }
.ck-barra strong { font: 400 1.2rem/1 var(--ff-d); font-variant-numeric: tabular-nums; }
@media (min-width: 1000px) { .ck-barra { display: none !important; } }

/* grade */
.ck { min-height: calc(100svh - var(--topo-h)); }
.ck-grade { display: grid; }
.ck-form { padding: 28px var(--g) 60px; display: grid; gap: 34px; align-content: start; min-width: 0; }
.ck-resumo { background: var(--perola-2); border-bottom: 1px solid var(--linha); min-width: 0; }
.ck-resumo-in { padding: 24px var(--g) 28px; display: grid; gap: 18px; }
@media (max-width: 999px) {
  .ck-grade { display: flex; flex-direction: column; }
  .ck-resumo { order: -1; display: none; }
  .ck-resumo.is-aberto { display: block; }
}
@media (min-width: 1000px) {
  .ck-grade { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: calc(100svh - var(--topo-h)); }
  .ck-form { padding: 48px clamp(32px, 5vw, 90px) 80px; justify-self: end; width: 100%; max-width: 680px; }
  .ck-resumo { border-left: 1px solid var(--linha); border-bottom: 0; }
  .ck-resumo-in { position: sticky; top: var(--topo-h); padding: 48px clamp(32px, 4vw, 70px); max-width: 560px; max-height: calc(100svh - var(--topo-h)); overflow-y: auto; }
}

/* blocos */
.ck-bloco { display: grid; gap: 16px; }
.ck-h { display: flex; align-items: baseline; gap: 12px; font: 400 clamp(1.5rem, 2.4vw, 1.9rem)/1.1 var(--ff-d); padding-bottom: 12px; border-bottom: 1px solid var(--linha); }
.ck-n { font: italic 400 1.3em/1 var(--ff-i); color: var(--rose-tinta); min-width: .8em; }
.ck-n::after { content: " ·"; font-style: normal; color: var(--tinta-2); font-size: .7em; }
.ck-campos { display: grid; gap: 12px; }
.ck-campos-end { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ck-campos-end .c-cep { grid-column: span 6; }
.ck-campos-end .c-rua { grid-column: span 6; }
.ck-campos-end .c-num { grid-column: span 2; }
.ck-campos-end .c-comp { grid-column: span 4; }
.ck-campos-end .c-bairro { grid-column: span 6; }
.ck-campos-end .c-cidade { grid-column: span 4; }
.ck-campos-end .c-uf { grid-column: span 2; }
@media (min-width: 600px) {
  .ck-campos-end .c-cep { grid-column: span 3; }
  .ck-campos-end .c-rua { grid-column: span 4; }
  .ck-campos-end .c-num { grid-column: span 2; }
  .ck-campos-end .c-comp { grid-column: span 3; }
  .ck-campos-end .c-bairro { grid-column: span 3; }
}
.campo.carregando::after { content: ""; position: absolute; right: 16px; top: 19px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--linha-forte); border-top-color: var(--agua-tinta); animation: gira-ck .8s linear infinite; }
@keyframes gira-ck { to { transform: rotate(360deg); } }
.campo-ajuda.ok { color: var(--agua-tinta); }
.ck-campos-end .campo.preenchido input { animation: preenche 1.2s var(--ease); }
@keyframes preenche { from { background-color: rgba(88, 168, 224, .18); } }

/* frete */
.ck-espera { padding: 18px; border-radius: 14px; background: var(--perola-2); color: var(--tinta-2); font-size: .92rem; text-align: center; }
.ck-fretes { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.ck-fretes [data-fretes-lista] { display: grid; border: 1px solid var(--linha-forte); border-radius: 16px; overflow: hidden; }
.frete { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; cursor: pointer; background: #FBF8F4; transition: background-color .3s; }
.frete + .frete { border-top: 1px solid var(--linha); }
.frete { position: relative; }
.frete input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.frete:has(input:checked) { background: #FFFFFF; box-shadow: inset 3px 0 0 var(--tinta); }
.frete input:checked + .op-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.frete input:focus-visible + .op-radio { outline: 2px solid var(--agua-tinta); outline-offset: 4px; }
.frete-txt { flex: 1; display: grid; }
.frete-txt b { font-weight: 500; }
.frete-txt small { color: var(--tinta-2); font-size: .82rem; }
.frete-preco { font-variant-numeric: tabular-nums; font-weight: 500; }
.op-radio { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--tinta); display: grid; place-items: center; flex: none; }

/* pagamento */
.ck-seguro { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--tinta-2); margin-top: -4px; }
.ck-seguro .ic { width: 16px; height: 16px; }
.ck-pags { border: 1px solid var(--linha-forte); border-radius: 16px; overflow: hidden; }
.pag + .pag { border-top: 1px solid var(--linha-forte); }
.pag-cab { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 12px 16px; cursor: pointer; background: #FBF8F4; flex-wrap: wrap; }
.pag-cab { position: relative; }
.pag-cab input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pag-cab input:checked + .op-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta); }
.pag-cab input:focus-visible + .op-radio { outline: 2px solid var(--agua-tinta); outline-offset: 4px; }
.pag.is-ativo .pag-cab { background: #FFFFFF; }
.pag-nome { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.pag-nome .ic { width: 18px; height: 18px; }
.pag-tag { margin-left: auto; font: 500 .62rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; color: var(--perola); background: var(--agua-tinta); padding: 6px 9px 5px; border-radius: 999px; }
.pag-bandeiras { margin-left: auto; display: flex; gap: 4px; }
.pag-bandeiras b { font: 600 .56rem/1 var(--ff-t); letter-spacing: .06em; text-transform: uppercase; padding: 5px 6px; border-radius: 5px; border: 1px solid var(--linha-forte); color: var(--tinta-2); }
.pag-corpo { padding: 4px 16px 18px; background: #FFFFFF; display: grid; gap: 12px; font-size: .92rem; color: var(--tinta-2); }
.pag-corpo strong { color: var(--tinta); font-weight: 500; }
.ck-campos-cartao { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ck-campos-cartao .c-cartao, .ck-campos-cartao .c-titular, .ck-campos-cartao .c-parc { grid-column: span 6; }
.ck-campos-cartao .c-val { grid-column: span 3; }
.ck-campos-cartao .c-cvv { grid-column: span 3; }
.campo-ic.tem { color: var(--tinta); background: var(--perola-2); border-radius: 6px; padding: 2px 8px; }

.ck-erros { padding: 14px 16px; border-radius: 14px; background: rgba(163, 50, 43, .08); color: #8E2B25; font-size: .9rem; }
.ck-pagar { position: relative; }
.ck-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(245, 239, 232, .35); border-top-color: var(--perola); animation: gira-ck .8s linear infinite; }
.ck-pagar.carregando .ck-spin { display: inline-block; }
.ck-pagar.carregando { pointer-events: none; opacity: .9; }
.ck-aviso-simulado { font-size: .8rem; color: var(--tinta-2); text-align: center; }
.ck-politicas { display: flex; flex-wrap: wrap; gap: 0 18px; justify-content: center; border-top: 1px solid var(--linha); padding-top: 10px; }
.ck-politicas a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; color: var(--tinta-2); }

/* resumo */
.ck-resumo-t { font: 400 1.4rem/1.2 var(--ff-d); }
.r-itens { display: grid; }
.r-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linha); align-items: start; }
.r-foto { position: relative; width: 64px; height: 64px; border-radius: 14px; background: radial-gradient(circle at 50% 38%, #FFFFFF, var(--areia) 80%); display: grid; place-items: center; }
.r-foto img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(70, 44, 32, .2)); }
.r-qtd { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--tinta); color: var(--perola); font: 600 .7rem/22px var(--ff-t); text-align: center; }
.r-nome { font: 400 1rem/1.25 var(--ff-d); }
.r-op { font-size: .8rem; color: var(--tinta-2); line-height: 1.4; }
.r-acoes { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.r-acoes .stepper button { width: 40px; height: 40px; }
.r-remover { min-height: 44px; font-size: .76rem; color: var(--tinta-2); text-decoration: underline; text-underline-offset: .25em; }
.r-preco { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-cupom { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.r-cupom .btn { min-height: 56px; padding: 0 20px; box-shadow: none; }
.r-linhas { display: grid; gap: 8px; margin: 0; }
.r-linhas div { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; }
.r-linhas dt { color: var(--tinta-2); }
.r-linhas dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 500; }
.r-linhas .r-desc dd { color: var(--agua-tinta); }
.r-total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--linha); align-items: baseline; }
.r-total dt { color: var(--tinta) !important; font: 400 1.3rem/1 var(--ff-d); }
.r-total dd { font: 400 1.6rem/1 var(--ff-d) !important; }
.r-nota { font-size: .8rem; color: var(--tinta-2); }

/* vazio */
.ck-vazio { min-height: calc(100svh - var(--topo-h)); display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 60px var(--g); }
.ck-vazio img { width: 140px; filter: drop-shadow(0 18px 22px rgba(70, 44, 32, .2)); }

/* pix */
.ck-pix { padding: 40px var(--g) 80px; max-width: 1100px; margin: 0 auto; display: grid; gap: 20px; }
.ck-pix:focus, .ck-ok:focus { outline: none; }
.pix-grade { display: grid; gap: 30px; margin-top: 10px; }
.pix-qr { justify-self: center; display: grid; gap: 10px; justify-items: center; }
.pix-qr-in { position: relative; width: min(72vw, 300px); aspect-ratio: 1; padding: 16px; border-radius: 22px; background: #FFFFFF; box-shadow: var(--sh-2); }
.pix-qr-in svg { width: 100%; height: 100%; }
.pix-qr-in::after { content: "EXEMPLO"; position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -18deg; font: 600 1.1rem/1 var(--ff-t); letter-spacing: .3em; color: #8E2B25; background: rgba(255, 255, 255, .92); padding: 8px 14px; border: 1.5px solid #8E2B25; border-radius: 8px; }
.pix-exemplo { font: 500 .66rem/1 var(--ff-t); letter-spacing: .2em; text-transform: uppercase; color: #8E2B25; }
.pix-info { display: grid; gap: 14px; align-content: start; }
.pix-valor strong { font: 400 1.8rem/1 var(--ff-d); }
.pix-tempo { display: flex; align-items: center; gap: 8px; color: var(--tinta-2); }
.pix-tempo strong { color: var(--tinta); font-variant-numeric: tabular-nums; }
.pix-cola-l { font-size: .8rem; color: var(--tinta-2); margin-bottom: -6px; }
.pix-cola { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.pix-cola input { min-width: 0; min-height: 54px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--linha-forte); background: #FBF8F4; font-size: .82rem; font-family: ui-monospace, monospace; }
.pix-cola .btn { min-height: 54px; padding: 0 18px; box-shadow: none; }
.pix-passos { display: grid; gap: 6px; counter-reset: p; font-size: .9rem; color: var(--tinta-2); }
.pix-passos li { counter-increment: p; display: flex; gap: 10px; }
.pix-passos li::before { content: counter(p) "."; font: italic 400 1.1rem/1.2 var(--ff-i); color: var(--rose-tinta); }
.pix-info .lnk { justify-self: start; }
@media (min-width: 860px) { .pix-grade { grid-template-columns: auto 1fr; gap: 60px; align-items: start; } }

/* confirmação */
.ck-ok { padding: 48px var(--g) 80px; max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
.ok-selo { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--noite); color: var(--rose-claro); box-shadow: var(--sh-noite); }
.ok-selo .ic { width: 34px; height: 34px; stroke-width: 1.6; }
.ok-grade { display: grid; gap: 40px; margin-top: 18px; }
.ok-resumo, .ok-passos { display: grid; gap: 16px; align-content: start; }
.ok-resumo { padding: 24px; border-radius: var(--raio); background: var(--perola-2); }
.ok-entrega { font-size: .88rem; color: var(--tinta-2); }
.ok-passos ol { display: grid; gap: 4px; }
.ok-passos li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.ok-passos li .ic { color: var(--agua-tinta); margin-top: 2px; }
.ok-passos li div { display: grid; gap: 2px; }
.ok-passos li span { color: var(--tinta-2); font-size: .92rem; }
.ok-passos .btn { justify-self: start; margin-top: 12px; }
.r-itens-ok .r-acoes { display: none; }
@media (min-width: 860px) { .ok-grade { grid-template-columns: 1fr 1fr; gap: 60px; } }

/* entradas (CSS) */
.js:not(.rm) .ck-bloco { animation: ck-entra 1.2s var(--ease) backwards; }
.js:not(.rm) .ck-bloco:nth-of-type(2) { animation-delay: .08s; } .js:not(.rm) .ck-bloco:nth-of-type(3) { animation-delay: .16s; } .js:not(.rm) .ck-bloco:nth-of-type(4) { animation-delay: .24s; }
@keyframes ck-entra { from { opacity: 0; transform: translateY(16px); } }

.js:not(.rm) .anima { animation: ck-entra .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * .07s); }
.js:not(.rm) .ok-selo.pula { animation: ck-pula 1.1s var(--ease-back) backwards; }
@keyframes ck-pula { from { transform: scale(0) rotate(-90deg); } }

.ck-ast { text-align: center; margin-top: -24px; }