/* ============================================================ checkout */
.secure { display: none; }
.is-checkout .nav, .is-checkout .tools, .is-checkout .tabbar, .is-checkout .foot__in, .is-checkout .foot__word, .is-checkout .totop { display: none; }
.is-checkout .secure { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-weight: 700; font-size: var(--t-sm); color: var(--leaf); padding: 8px 14px; border-radius: var(--pill); background: color-mix(in srgb, var(--leaf) 12%, var(--paper)); }
.is-checkout .foot { padding-top: 6px; }
.is-checkout .foot__base { border-top: 0; }
.is-checkout body, body.is-checkout { padding-bottom: 0; }

.ck { padding: clamp(18px, 3vw, 34px) 0 clamp(70px, 9vw, 110px); }
.ck__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 24px; margin-bottom: clamp(22px, 3vw, 36px); }
.ck__head .back { grid-column: 1 / -1; justify-self: start; }
.ck__title { font-size: var(--t-3xl); font-weight: 800; }

/* etapas em peças de quebra-cabeça */
.ck-steps ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 4px; }
.ck-steps__i { display: grid; justify-items: center; gap: 6px; width: 74px; }
.ck-steps__p { display: grid; place-items: center; width: 74px; height: 58px; padding: 6px; border-radius: 16px; background: var(--mist); transition: box-shadow .3s; }
.ck-steps__p img { max-width: 100%; max-height: 100%; width: auto; height: auto; filter: grayscale(1) opacity(.4); transform: scale(.82) rotate(-8deg); transition: filter .5s var(--ease), transform .7s var(--spring); }
.ck-steps__l { font-weight: 700; font-size: var(--t-xs); color: var(--ink-3); transition: color .3s; }
.ck-steps__i.is-cur .ck-steps__p { box-shadow: inset 0 0 0 2px var(--ink); }
.ck-steps__i.is-cur .ck-steps__l, .ck-steps__i.is-done .ck-steps__l { color: var(--ink); }
.ck-steps__i.is-done img { filter: drop-shadow(0 4px 6px rgb(var(--shadow-c) / .25)); transform: none; }
.ck-steps__i.is-cur img { filter: grayscale(.2) opacity(.85); transform: scale(.9) rotate(4deg); animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: scale(.94) rotate(-4deg) translateY(-2px); } }
.ck-steps__i.is-snap .ck-steps__p { animation: stepsnap .7s var(--spring); }
@keyframes stepsnap { 0% { transform: translateY(-14px) rotate(-12deg) scale(.7); } 60% { transform: translateY(2px) rotate(3deg) scale(1.08); } 100% { transform: none; } }

.ck__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(24px, 4vw, 52px); align-items: start; }
.ck__main { display: grid; gap: 16px; }
.ck__side { position: sticky; top: 96px; display: grid; gap: 16px; }
.ck-card { padding: 24px; border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); }
.ck-card__t { font-size: var(--t-xl); margin-bottom: 14px; }

/* acordeão */
.ck-step { --c: var(--blue); border-radius: var(--r-lg); background: var(--paper); box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .3s var(--ease), opacity .3s; }
.ck-step.is-open { box-shadow: inset 0 0 0 2.5px var(--c), 0 24px 50px -32px rgb(var(--shadow-c) / .55); }
.ck-step.is-locked { opacity: .55; }
.ck-step__head { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.ck-step.is-done .ck-step__head { cursor: pointer; }
.ck-step__n { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px 14px 14px 5px; font: 800 1.25rem/1 var(--f-display); color: var(--ink-3); background: var(--mist); transition: background-color .3s, color .3s, transform .4s var(--spring); }
.ck-step.is-open .ck-step__n { background: var(--c); color: #fff; }
.ck-step.is-done .ck-step__n { background: var(--leaf); color: #fff; font-size: 0; }
.ck-step.is-done .ck-step__n { position: relative; }
/* check desenhado com borda: centrado em relação ao quadrado (o número escondido não ocupa linha) */
.ck-step.is-done .ck-step__n::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 10px; border: solid #fff; border-width: 0 0 3.5px 3.5px; transform: translate(-50%, -70%) rotate(-45deg); }
.ck-step__h { flex: 1; min-width: 0; }
.ck-step__h h2 { font-size: var(--t-xl); }
.ck-step__sum { font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none; }
.ck-step.is-done .ck-step__sum, .ck-step[data-step="revisao"] .ck-step__sum { display: block; }
.ck-step__edit { display: none; font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; padding: 8px; }
.ck-step.is-done .ck-step__edit { display: block; }
.ck-step__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.ck-step__in { overflow: hidden; min-height: 0; }
.ck-step.is-open .ck-step__body { grid-template-rows: 1fr; }
.ck-form, .ck-rev { padding: 4px 22px 24px; }
.ck-form { display: grid; gap: 16px; }
.ck-lead { color: var(--ink-2); }
.ck-next, .btn--pay { width: 100%; margin-top: 4px; }
.ck-save { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--ink-3); }
.ck-save .i { width: 16px; height: 16px; }

/* campos */
.fld { position: relative; display: grid; gap: 6px; min-width: 0; }
.fld__l { font-weight: 700; font-size: var(--t-sm); }
.fld__l em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.fld input, .select--fld select {
  width: 100%; height: 54px; padding: 0 16px; border: 0; border-radius: var(--r-md); outline: 0;
  font-size: var(--t-md); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background-color .2s;
}
.fld input::placeholder { color: var(--ink-3); opacity: .7; }
.fld input:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.fld input:focus { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px color-mix(in srgb, var(--c, var(--blue)) 18%, transparent); }
.fld.is-err input { box-shadow: inset 0 0 0 2px var(--pink); background: color-mix(in srgb, var(--pink) 5%, var(--paper)); }
.fld.is-ok input { box-shadow: inset 0 0 0 1.5px var(--leaf); }
.fld.is-ok::after { content: ""; position: absolute; right: 18px; top: 46px; width: 12px; height: 7px; border: solid var(--leaf); border-width: 0 0 3px 3px; transform: rotate(-45deg); animation: pop .4s var(--spring); }
.fld__err { color: var(--pink); font-weight: 700; font-size: var(--t-xs); }
.fld__err:empty { display: none; }
.fld__hint { color: var(--ink-3); font-size: var(--t-xs); }
.fld.is-err .fld__hint { display: none; }
.fld__sug { justify-self: start; padding: 6px 12px; border-radius: var(--pill); font-size: var(--t-xs); color: var(--ink); background: color-mix(in srgb, var(--sun) 28%, var(--paper)); animation: pop .4s var(--spring); }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld-row--3 { grid-template-columns: 1fr 1fr; }
.fld-row--3 > :last-child { grid-column: 1 / -1; }   /* parcelas numa linha inteira: o texto "3x de R$ 9,00 sem juros" cabe sem cortar */
.select--fld { width: 100%; }
.select--fld select { padding-right: 40px; font-weight: 700; font-size: var(--t-sm); background: var(--paper); }
.is-shake { animation: shake .45s var(--ease); }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* formas de pagamento */
.pay-opts { display: grid; gap: 10px; }
.pay-opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-md); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background-color .2s, transform .25s var(--spring); }
.pay-opt:hover { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt:has(input:checked) { box-shadow: inset 0 0 0 2.5px var(--c); background: color-mix(in srgb, var(--c) 6%, var(--paper)); }
.pay-opt:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
.pay-opt:active { transform: scale(.99); }
.pay-opt.is-off { opacity: .5; cursor: not-allowed; }
.pay-opt__ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--ink-2); background: var(--mist); transition: background-color .25s, color .25s, transform .4s var(--spring); }
.pay-opt__ic .i { width: 24px; height: 24px; }
.pay-opt:has(input:checked) .pay-opt__ic { color: #fff; background: var(--c); transform: rotate(-6deg); }
.pay-opt__t { flex: 1; display: grid; gap: 2px; }
.pay-opt__t strong { font: 700 1.15rem/1.1 var(--f-display); }
.pay-opt__t small { color: var(--ink-3); font-size: var(--t-xs); }
.pay-opt__tag { padding: 5px 10px; border-radius: var(--pill); font-size: 11px; font-weight: 800; color: #fff; background: var(--leaf); }
.pay-opt::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .25s var(--spring); }
.pay-opt:has(input:checked)::after { box-shadow: inset 0 0 0 7px var(--c); }

/* cartão 3D */
.cardbox { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; padding-top: 6px; }
.cardbox[hidden] { display: none !important; }
.cardbox__f { display: grid; gap: 14px; }
.cc { perspective: 1000px; position: sticky; top: 100px; }
.cc__in { position: relative; aspect-ratio: 1.586; transform-style: preserve-3d; transition: transform .8s var(--spring); }
.cc.is-back .cc__in { transform: rotateY(180deg); }
.cc__face { position: absolute; inset: 0; border-radius: 18px; padding: 20px; color: #fff; backface-visibility: hidden; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, #4a3a7d, #2a1f4a 60%); box-shadow: 0 24px 40px -20px rgb(var(--shadow-c) / .7); }
.cc__face::before { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; bottom: -110px; border-radius: 50%; background: var(--pink); opacity: .55; filter: blur(2px); transition: background-color .5s; }
.cc__face::after { content: ""; position: absolute; width: 140px; height: 140px; right: 60px; top: -80px; border-radius: 50%; background: var(--blue); opacity: .45; transition: background-color .5s; }
.cc[data-brand="visa"] .cc__face::before { background: var(--blue); }
.cc[data-brand="visa"] .cc__face::after { background: var(--sun); }
.cc[data-brand="master"] .cc__face::before { background: #ff6b00; }
.cc[data-brand="master"] .cc__face::after { background: var(--pink); }
.cc[data-brand="elo"] .cc__face::before { background: var(--sun); }
.cc[data-brand="elo"] .cc__face::after { background: var(--leaf); }
.cc__front { display: grid; grid-template-rows: auto 1fr auto; }
.cc__chip { position: relative; z-index: 1; width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #ffe08a, #d9a92b); }
.cc__brand { position: absolute; z-index: 1; right: 20px; top: 18px; font: 800 1.25rem/1 var(--f-display); letter-spacing: .02em; animation: pop .4s var(--spring); }
.cc__num { position: relative; z-index: 1; align-self: end; font: 600 1.32rem/1 var(--f-text); letter-spacing: .08em; font-variant-numeric: tabular-nums; margin-bottom: 14px; white-space: nowrap; }
.cc__row { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.cc__row small, .cc__cvv small { display: block; font-size: 9px; opacity: .7; letter-spacing: .08em; }
.cc__row b { font-size: 13px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; display: block; }
.cc__back { transform: rotateY(180deg); padding: 0; }
.cc__stripe { position: absolute; left: 0; right: 0; top: 24px; height: 42px; background: #120d26; z-index: 1; }
.cc__cvv { position: absolute; z-index: 1; left: 20px; right: 20px; top: 84px; display: flex; flex-direction: column; align-items: flex-end; padding: 8px 12px; border-radius: 6px; background: #fff; color: #2a1f4a; }
.cc__cvv b { font-size: 15px; letter-spacing: .2em; }
.ck-demo-card { font-size: var(--t-xs); color: var(--ink-3); padding: 10px 14px; border-radius: var(--r-sm); background: var(--mist); }

/* revisão */
.review-list { margin: 0; display: grid; gap: 0; }
.review-list > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1.5px dashed var(--line); }
.review-list dt { color: var(--ink-3); font-size: var(--t-sm); }
.review-list dd { margin: 0; font-weight: 700; }
.review-list dd small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--t-xs); margin-top: 2px; }
.review-list__total { border-bottom: 0 !important; }
.review-list__total dd { font: 800 1.6rem/1 var(--f-display); }
.review-list--small > div { grid-template-columns: 90px 1fr; }
.btn--pay { position: relative; min-height: 64px; font-size: 1.1rem; overflow: hidden; margin-top: 16px; }
.btn--pay.btn--pix { --bg: var(--leaf); }
.btn--pay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%); transform: translateX(-100%); animation: shine 3.2s var(--ease) 1s infinite; }
@keyframes shine { 40%, 100% { transform: translateX(100%); } }
.btn--pay.is-busy { pointer-events: none; }
.btn--pay.is-busy::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: spin .7s linear infinite; }
.btn--pay.is-ok { --bg: var(--leaf); animation: pop .5s var(--spring); }
.ck-legal { display: flex; gap: 8px; align-items: flex-start; margin-top: 14px; font-size: var(--t-xs); color: var(--ink-3); }
.ck-legal .i { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ck-demo { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 700; color: color-mix(in srgb, var(--sun) 40%, var(--ink)); background: color-mix(in srgb, var(--sun) 18%, var(--paper)); }

/* resumo */
.ck-items { list-style: none; margin: 0; padding: 0; }
.ck-item { display: grid; grid-template-columns: 52px 1fr auto 30px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1.5px solid var(--line); animation: swap .45s var(--spring) both; }
.ck-item.is-leaving { animation: leave .3s var(--ease) forwards; }
.ck-item img { width: 52px; height: 66px; object-fit: cover; object-position: top; border-radius: 5px; box-shadow: 0 6px 12px -6px rgb(var(--shadow-c) / .5); }
.ck-item__t { min-width: 0; }
.ck-item__t a { display: block; font: 700 1rem/1.2 var(--f-display); text-decoration: none; }
.ck-item__t a:hover { text-decoration: underline; }
.ck-item__t small { color: var(--ink-3); font-size: var(--t-xs); }
.ck-item__p { display: grid; justify-items: end; font-size: var(--t-sm); }
.ck-item__p s { font-size: 11px; }
.ck-item__x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); transition: background-color .2s, color .2s; }
.ck-item__x:hover { background: color-mix(in srgb, var(--pink) 12%, var(--paper)); color: var(--pink); }
.ck-item__x .i { width: 16px; height: 16px; }
.ck-bump { --c: var(--blue); display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; margin-top: 14px; padding: 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--c) 10%, var(--paper)); border: 1.5px dashed color-mix(in srgb, var(--c) 45%, transparent); }
.ck-bump img { width: 44px; height: 56px; object-fit: cover; object-position: top; border-radius: 4px; }
.ck-bump small { display: block; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--c) 70%, var(--ink)); }
.ck-bump b { display: block; font: 700 .98rem/1.15 var(--f-display); }
.ck-bump em { font-style: normal; font-size: var(--t-xs); color: var(--ink-2); }
.ck-coupon { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ck-coupon.is-on { padding: 10px 14px; border-radius: var(--r-md); background: color-mix(in srgb, var(--leaf) 12%, var(--paper)); }
.ck-coupon__on { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--leaf) 70%, var(--ink)); font-size: var(--t-sm); }
.ck-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 4px; padding: 4px 0; }
.ck-link:hover { color: var(--ink); text-decoration-color: var(--pink); }
.ck-link .i { width: 17px; height: 17px; }
.ck-coupon__f { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; animation: swap .4s var(--spring); }
.ck-coupon__f input { height: 46px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--line); outline: 0; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.ck-coupon__f input:focus { box-shadow: inset 0 0 0 2px var(--ink); }
.ck-coupon__f .btn { min-height: 46px; }
.ck-coupon__f .fld__err { grid-column: 1 / -1; }
.ck-tot { margin: 16px 0 0; display: grid; gap: 8px; }
.ck-tot > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ck-tot dt { color: var(--ink-2); font-size: var(--t-sm); }
.ck-tot dd { margin: 0; font-weight: 700; }
.ck-tot dd s { font-weight: 400; font-size: var(--t-xs); margin-right: 4px; }
.ck-tot__desc dd, .ck-tot__save dd, .ck-tot__save dt { color: var(--leaf); }
.ck-tot__total { padding-top: 12px; margin-top: 4px; border-top: 2px solid var(--line); }
.ck-tot__total dt { font: 800 var(--t-lg)/1 var(--f-display); color: var(--ink); }
.ck-tot__total dd { font: 800 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.trust { list-style: none; margin: 0; padding: 4px 6px; display: grid; gap: 14px; }
.trust li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); }
.trust strong { display: block; color: var(--ink); }
.trust .i { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 12px; color: var(--grape); background: color-mix(in srgb, var(--grape) 11%, var(--paper)); }
.ck-msum { display: none; }
.ck-bar { display: none; }
.ck-empty { padding: 80px 0; }

/* modal Pix */
.pixm__card { width: min(760px, 100%); padding: 30px; }
.pixm__head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding-right: 44px; margin-bottom: 22px; }
.pixm__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: var(--leaf); }
.pixm__ic .i { width: 28px; height: 28px; }
.pixm__head small { color: var(--ink-3); font-weight: 700; font-size: var(--t-xs); }
.pixm__head h2 { font-size: var(--t-2xl); }
.pixm__v { font: 800 2rem/1 var(--f-display); }
.pixm__body { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center; }
.pixm__qr { position: relative; padding: 14px; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.pixm__qrin { transition: filter .5s, opacity .5s, transform .5s var(--spring); }
.pixm__qr svg { display: block; width: 100%; height: auto; }
.pixm__ok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .6s var(--spring); }
.pixm__ok::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 14px color-mix(in srgb, var(--leaf) 25%, transparent); }
.pixm__ok .i { position: relative; width: 64px; height: 64px; stroke-width: 3; }
.is-paid .pixm__qrin { filter: blur(6px); opacity: .35; transform: scale(.94); }
.is-paid .pixm__ok { opacity: 1; transform: none; }
.is-expired .pixm__qrin { filter: grayscale(1) blur(3px); opacity: .3; }
.pixm__how { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); font-size: var(--t-sm); }
.pixm__how li::marker { font-weight: 800; color: var(--leaf); }
.pixm__how b { color: var(--ink); }
.pixm__copy { display: grid; gap: 10px; }
.pixm__copy input { width: 100%; height: 46px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: var(--mist); color: var(--ink-2); font: 500 var(--t-xs)/1 ui-monospace, Consolas, monospace; text-overflow: ellipsis; outline: 0; }
.pixm__copy .btn { min-height: 54px; }
.pixm__copy .btn.is-copied { --bg: var(--leaf); }
.pixm__status { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 700; }
.pixm__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 60%, transparent); animation: beat 1.6s infinite; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sun) 60%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.is-paid .pixm__dot { background: var(--leaf); animation: none; }
.is-paid .pixm__status { color: var(--leaf); }
.is-expired .pixm__dot { background: var(--pink); animation: none; }
.pixm__time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.pixm__bar { height: 6px; margin-top: 10px; border-radius: 6px; background: var(--mist); overflow: hidden; }
.pixm__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--sun)); transform-origin: 0 50%; transition: transform 1s linear; }
.pixm__paid { width: 100%; margin-top: 16px; }

/* pedido confirmado */
.done { padding: clamp(28px, 5vw, 60px) 0 clamp(60px, 8vw, 100px); }
.done__hero { display: grid; justify-items: center; text-align: center; gap: 14px; margin-bottom: clamp(30px, 5vw, 50px); }
.done-puzzle { position: relative; width: min(300px, 70vw); aspect-ratio: 770 / 504; margin-bottom: 4px; }
.done-puzzle img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(.7); transition: transform .9s var(--spring), opacity .4s; transition-delay: var(--d); filter: drop-shadow(0 12px 16px rgb(var(--shadow-c) / .18)); }
.done-puzzle.is-built img { opacity: 1; transform: none; }
.done-puzzle.is-wait .done-puzzle__last { opacity: .25; filter: grayscale(1); transform: none; transition-delay: 0s; }
.done-puzzle.is-whole { animation: cheer .9s var(--spring) 1.7s; }
.done__title { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.02em; }
.done__lede { font-size: var(--t-lg); color: var(--ink-2); max-width: 54ch; }
.done__lede b { color: var(--ink); }
.done__grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 4vw, 48px); align-items: start; }
.done__main { display: grid; gap: 22px; }
.done__side { display: grid; gap: 18px; position: sticky; top: 96px; }
.dl { list-style: none; margin: 0; padding: 0; }
.dl__i { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1.5px solid var(--line); animation: swap .5s var(--spring) both; animation-delay: calc(.9s + var(--n) * 90ms); }
.dl__i:last-child { border-bottom: 0; }
.dl__kit { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; color: var(--grape); }
.dl__kit .i { width: 20px; height: 20px; }
.dl__kit b { font: 800 var(--t-md)/1.2 var(--f-display); }
.dl__kit small { margin-left: auto; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); }
.dl__kit--sep { padding: 6px 0 0; border-top: 2px solid var(--line); }
.dl__i--kit { padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--grape) 25%, transparent); }
/* cupom pós-compra */
.post-cupom { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-bottom: 40px; padding: 22px 26px; border-radius: var(--r-lg); color: #fff; background: linear-gradient(120deg, var(--pink), var(--grape)); box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--pink) 90%, transparent); }
.post-cupom__pct { display: grid; place-content: center; width: 92px; height: 92px; border-radius: 50%; background: var(--sun); color: #3d2a00; text-align: center; transform: rotate(-8deg); }
.post-cupom__pct b { font: 800 2rem/1 var(--f-display); }
.post-cupom__pct small { font-weight: 800; text-transform: uppercase; font-size: var(--t-xs); }
.post-cupom h2 { font: 800 var(--t-xl)/1.15 var(--f-display); margin: 0 0 6px; }
.post-cupom p { margin: 0; opacity: .92; }
.post-cupom__code { display: grid; gap: 4px; justify-items: center; padding: 14px 20px; border: 2px dashed rgb(255 255 255 / .7); border-radius: var(--r-md); background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: transform .3s var(--spring), background-color .2s; }
.post-cupom__code:hover { transform: scale(1.04); background: rgb(255 255 255 / .2); }
.post-cupom__code span { font: 800 1.4rem/1 var(--f-display); letter-spacing: .06em; }
.post-cupom__code small { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.post-cupom__code .i { width: 16px; height: 16px; }
@media (max-width: 720px) { .post-cupom { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.dl__i img { width: 56px; height: 72px; object-fit: cover; object-position: top; border-radius: 5px; box-shadow: 0 8px 14px -8px rgb(var(--shadow-c) / .5); }
.dl__i b { display: block; font: 700 1.1rem/1.2 var(--f-display); }
.dl__i small { color: var(--ink-3); font-size: var(--t-xs); }
.dl__i .btn { min-height: 44px; padding: 0 18px; }
.dl__lock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--ink-3); }
.tips { padding: 26px; border-radius: var(--r-lg); background: var(--mist); }
.tips h2 { font-size: var(--t-xl); margin-bottom: 12px; }
.tips ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; color: var(--ink-2); }
.tips li::marker { font-weight: 800; color: var(--grape); }
.tips strong { color: var(--ink); }
.share { padding: 24px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--leaf) 11%, var(--paper)); display: grid; gap: 10px; }
.share h2 { font-size: var(--t-lg); }
.share p { color: var(--ink-2); font-size: var(--t-sm); }
.share .btn { justify-self: start; }

@media (max-width: 1080px) {
  .ck__grid { grid-template-columns: minmax(0, 1fr); }
  .ck__side { display: none; }
  .ck-msum { display: block; border-radius: var(--r-lg); background: var(--mist); }
  .ck-msum summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; font-weight: 700; }
  .ck-msum summary::-webkit-details-marker { display: none; }
  .ck-msum__l { display: inline-flex; align-items: center; gap: 8px; }
  .ck-msum__l .i:last-child { transition: transform .35s var(--spring); }
  .ck-msum[open] .ck-msum__l .i:last-child { transform: rotate(180deg); }
  .ck-msum summary strong { font: 800 1.3rem/1 var(--f-display); }
  .ck-msum .ck-sum { padding: 0 18px 18px; animation: swap .4s var(--spring); }
  .done__grid { grid-template-columns: 1fr; }
  .done__side { position: static; }
}
@media (max-width: 860px) {
  .is-checkout .topbar__in { justify-content: space-between; }
  .is-checkout .secure span { display: none; }
  .ck__head { grid-template-columns: 1fr; }
  .ck-steps ol { justify-content: space-between; }
  .ck-steps__i { width: auto; flex: 1; }
  .ck-steps__p { width: 100%; max-width: 74px; }
  .fld-row { grid-template-columns: 1fr; }
  .cardbox { grid-template-columns: 1fr; }
  .cc { position: static; max-width: 320px; }
  .ck-step__head { padding: 16px; gap: 12px; }
  .ck-form, .ck-rev { padding-left: 16px; padding-right: 16px; }
  .ck-bar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 44;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 22px;
    background: var(--ink); color: var(--paper); box-shadow: 0 18px 40px -18px rgb(var(--shadow-c) / .8);
    transition: transform .45s var(--spring), opacity .3s;
  }
  .ck-bar[hidden] { display: none; }
  .ck-bar.is-hidden { transform: translateY(150%); opacity: 0; }
  .ck-bar small { display: block; font-size: 11px; opacity: .7; }
  .ck-bar strong { font: 800 1.35rem/1 var(--f-display); }
  .ck-bar .btn { --bg: var(--paper); --fg: var(--ink); min-height: 50px; }
  body.is-checkout { padding-bottom: 90px; }
  .pixm__card { padding: 22px 18px; }
  .pixm__head { grid-template-columns: auto 1fr; }
  .pixm__v { grid-column: 1 / -1; font-size: 2.2rem; }
  .pixm__body { grid-template-columns: 1fr; gap: 16px; }
  .pixm__qr { max-width: 240px; margin: 0 auto; width: 100%; }
  .pixm__qr.is-collapsed { display: none; }
  .is-paid .pixm__qr { display: block; }
  .pixm__side { order: -1; }
  .modal.pixm { align-items: end; padding: 0; }
  .pixm__card { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 94vh; animation: sheetup .5s var(--spring); }
  @keyframes sheetup { from { transform: translateY(40%); opacity: 0; } }
}


.toast { border-radius: 20px; max-width: min(520px, calc(100vw - 24px)); line-height: 1.35; }
.toast button { flex: none; white-space: nowrap; }
.pay-opt__tag { position: absolute; top: -10px; right: 16px; box-shadow: 0 0 0 3px var(--paper); }

/* oferta extra do kit (order bump), logo acima do botão de pagar */
.ck-oferta { margin: 4px 0 18px; }
.ck-oferta__in { position: relative; display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-md); cursor: pointer;
  background: color-mix(in srgb, var(--sun) 14%, var(--paper)); border: 2px dashed color-mix(in srgb, var(--sun) 70%, var(--ink-3)); transition: background-color .25s, border-color .25s, transform .3s var(--spring); }
.ck-oferta__in:hover { transform: translateY(-2px); }
.ck-oferta__in.is-on { border-style: solid; border-color: var(--leaf); background: color-mix(in srgb, var(--leaf) 10%, var(--paper)); }
.ck-oferta__in input { position: absolute; opacity: 0; pointer-events: none; }
.ck-oferta__box { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-3); color: transparent; transition: all .25s var(--spring); }
.ck-oferta__box .i { width: 20px; height: 20px; }
.ck-oferta__in.is-on .ck-oferta__box { background: var(--leaf); box-shadow: none; color: #fff; transform: scale(1.08); }
.ck-oferta__in input:focus-visible + .ck-oferta__box { outline: 3px solid var(--blue); outline-offset: 2px; }
.ck-oferta__t small { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--sun) 55%, var(--ink)); }
.ck-oferta__in.is-on .ck-oferta__t small { color: var(--leaf); }
.ck-oferta__t b { display: block; font: 800 1.05rem/1.2 var(--f-display); margin: 2px 0; }
.ck-oferta__t em { font-style: normal; font-size: var(--t-xs); color: var(--ink-2); }
.ck-oferta__covers { display: flex; padding-right: 6px; }
.ck-oferta__covers img { width: 34px; border-radius: 4px; margin-left: -14px; box-shadow: 0 4px 10px -6px rgb(var(--shadow-c) / .8); transform: rotate(calc((var(--i) - 1.5) * 6deg)); }
.ck-oferta__covers img:first-child { margin-left: 0; }
@media (max-width: 520px) { .ck-oferta__covers { display: none; } .ck-oferta__in { grid-template-columns: 30px 1fr; } }
.ck-oferta { display: grid; gap: 10px; }
.ck-oferta__h { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: color-mix(in srgb, var(--sun) 55%, var(--ink)); }
.ck-oferta__h .i { width: 18px; height: 18px; }
.ck-oferta__h b { margin-left: auto; color: var(--leaf); }