/* ============ CHECKOUT ============ */
body.ck{background:#F7F3F5}
.ck-hd{background:#fff;border-bottom:1px solid var(--line);padding:16px 0;position:sticky;top:0;z-index:50}
.ck-hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ck-safe{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--green)}
.ck-steps{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.ck-steps b{color:var(--pink);display:flex;align-items:center;gap:7px}
.ck-steps i{font-style:normal;color:var(--line)}
.ck-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:34px;padding:34px 0 70px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;margin-bottom:20px}
.panel-hd{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.step-n{width:30px;height:30px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:900;flex-shrink:0}
.panel-hd h3{font-size:19px}
.panel-hd small{display:block;font-size:13px;color:var(--ink-3);font-weight:600;font-family:var(--font)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:flex;flex-direction:column;gap:6px}
.f.full{grid-column:1/-1}
.f label{font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.f input,.f select{padding:14px 16px;border:1.6px solid var(--line);border-radius:12px;font-family:inherit;font-size:15px;background:#fff;outline:none;transition:.2s;color:var(--ink)}
.f input:focus,.f select:focus{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,46,116,.1)}
.f small{font-size:12px;color:var(--ink-3)}
.pay-opts{display:grid;gap:12px}
.pay-opt{border:1.6px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:.2s;background:#fff}
.pay-opt:hover{border-color:var(--pink-2)}
.pay-opt.on{border-color:var(--pink);background:var(--pink-mist)}
.pay-top{display:flex;align-items:center;gap:12px}
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:grid;place-items:center;transition:.2s}
.pay-opt.on .radio{border-color:var(--pink)}
.pay-opt.on .radio::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--pink)}
.pay-top b{font-size:15.5px}
.pay-tag{margin-left:auto;background:var(--green);color:#fff;font-size:11px;font-weight:900;padding:4px 9px;border-radius:6px;letter-spacing:.04em}
.pay-body{display:none;padding-top:16px;margin-top:16px;border-top:1px dashed var(--line)}
.pay-opt.on .pay-body{display:block}
.pix-info{display:flex;gap:14px;align-items:center;background:#fff;border-radius:12px;padding:14px;border:1px solid var(--line)}
.pix-qr{width:74px;height:74px;border-radius:10px;background:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/12px 12px;flex-shrink:0;border:4px solid #fff;box-shadow:0 0 0 1px var(--line)}
/* resumo */
.sum{position:sticky;top:92px}
.sum-item{display:flex;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.sum-item img{width:82px;height:82px;border-radius:14px;object-fit:cover;background:var(--pink-mist)}
.sum-item b{font-size:15px;display:block;line-height:1.25}
.sum-item small{font-size:12.5px;color:var(--ink-3);display:block;margin-top:3px}
.coupon{display:flex;gap:8px;margin-bottom:18px}
.coupon input{flex:1;padding:13px 15px;border:1.6px dashed var(--line);border-radius:12px;font-family:inherit;font-size:14px;outline:none;text-transform:uppercase}
.coupon button{padding:0 18px;border-radius:12px;background:var(--ink);color:#fff;font-weight:800;font-size:13.5px}
.tot{display:grid;gap:10px;font-size:14.5px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tot div{display:flex;justify-content:space-between;color:var(--ink-2);font-weight:600}
.tot .free{color:var(--green);font-weight:800}
.grand{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:6px}
.grand b{font-family:var(--font-display);font-size:32px;letter-spacing:-.03em;line-height:1}
.bump{border:2px dashed var(--pink);border-radius:16px;padding:16px;background:var(--pink-mist);margin:18px 0;display:flex;gap:12px;cursor:pointer;transition:.2s}
.bump.on{background:#fff;border-style:solid;box-shadow:var(--shadow)}
.bump img{width:58px;height:58px;border-radius:12px;object-fit:cover}
.bump b{font-size:14px;display:block;line-height:1.3}
.bump small{font-size:12.5px;color:var(--ink-2);display:block;margin-top:3px}
.chk{width:22px;height:22px;border-radius:7px;border:2px solid var(--pink);flex-shrink:0;display:grid;place-items:center;background:#fff;color:#fff;font-size:13px;font-weight:900;margin-top:2px}
.bump.on .chk{background:var(--pink)}
.ck-timer{background:var(--ink);color:#fff;border-radius:14px;padding:13px 16px;display:flex;align-items:center;gap:11px;font-size:13.5px;font-weight:700;margin-bottom:18px}
.ck-timer b{margin-left:auto;font-family:var(--font-display);font-size:18px;letter-spacing:.02em}
.seals{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:11.5px;font-weight:800;color:var(--ink-3);text-align:center}
.seals div{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 13px}
/* obrigado */
.ty{max-width:680px;margin:0 auto;text-align:center;padding:70px 0}
.ty-ico{width:92px;height:92px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 26px;box-shadow:0 18px 40px -16px var(--green)}
.ty-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-align:left;margin-top:30px}
.ty-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.ty-row:last-child{border:0}
.ty-row b{font-weight:800}
@media (max-width:900px){.ck-grid{grid-template-columns:1fr}.sum{position:static}.ck-steps{display:none}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.panel{padding:20px}}

/* ================= CHECKOUT MOBILE ================= */
@media (max-width:900px){
  .ck-grid{gap:18px;padding:18px 0 60px}
  .sum{order:-1}
  .ck-hd{padding:12px 0}
}
@media (max-width:760px){
  .panel{padding:18px;border-radius:18px;margin-bottom:14px}
  .panel-hd{margin-bottom:16px;gap:10px}
  .panel-hd h3{font-size:17.5px}
  .panel-hd small{font-size:12.3px}
  .step-n{width:27px;height:27px;font-size:13px}
  .f label{font-size:11.5px}
  .f input,.f select{padding:13px 14px;font-size:16px;border-radius:11px}
  .fgrid{gap:12px}
  .pay-opt{padding:14px;border-radius:14px}
  .pay-top b{font-size:15px}
  .pay-top span{font-size:12px}
  .pay-tag{font-size:10px;padding:3px 7px}
  .pix-info{flex-direction:column;text-align:center;gap:10px}
  .pix-qr{width:96px;height:96px}
  .sum-item img{width:66px;height:66px}
  .sum-item b{font-size:14px}
  .sum-item small{font-size:12px}
  .bump{padding:13px;gap:10px;border-radius:14px}
  .bump img{width:48px;height:48px}
  .bump b{font-size:13.2px}
  .bump small{font-size:11.8px}
  .coupon input{font-size:16px;padding:12px 13px}
  .grand b{font-size:27px}
  .tot{font-size:13.8px}
  .ck-timer{font-size:12.5px;padding:11px 13px;gap:8px}
  .ck-timer b{font-size:16px}
  .seals{gap:7px;font-size:10.6px}
  .seals div{padding:7px 10px}
  .ty{padding:44px 0}
  .ty-ico{width:74px;height:74px;margin-bottom:20px}
  .ty-box{padding:20px;border-radius:18px}
  .ty-row{flex-direction:column;gap:3px;font-size:13.8px;padding:10px 0}
  .ty-row b{font-size:14.5px}
}

/* impedir que colunas do grid estourem a largura no celular */
.ck-grid>*{min-width:0;max-width:100%}
.panel,.sum,.sum .panel{max-width:100%}
.f input,.f select{width:100%;min-width:0;max-width:100%}
.pix-info,.bump,.gift-mini,.coupon{max-width:100%}
.coupon input{min-width:0}