body.ck{background:linear-gradient(180deg,rgba(8,11,14,.55),rgba(8,11,14,.2) 40%,rgba(8,11,14,.6)),url(img/bg_checkout.webp) center/cover fixed no-repeat,var(--bg);min-height:100vh}
.ckwrap{max-width:1140px;margin:0 auto;padding:104px 20px 80px}
.ck__title{font-family:var(--head);font-weight:400;text-transform:uppercase;font-style:italic;font-size:clamp(36px,5vw,60px);line-height:1;margin-bottom:26px}
.ck__title em{color:var(--or)}
.ck__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
.ck__main{display:flex;flex-direction:column;gap:18px}
.ck__card{background:rgba(10,14,18,.66);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);border-radius:16px;padding:22px}
.ck__card h2{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:400;font-style:normal;text-transform:uppercase;font-size:22px;letter-spacing:.03em;margin-bottom:16px;line-height:1.1}
.ck__card h2 svg{color:var(--or);width:22px;height:22px}
.ck__card .sub-h{margin-top:26px}
.sticky{position:sticky;top:92px}

.items{display:flex;flex-direction:column}
.item{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.item:first-child{border-top:0;padding-top:0}
.item__img{width:76px;height:76px;border-radius:12px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--g) 40%,transparent),transparent 70%),#0a0d10;display:grid;place-items:center;overflow:hidden}
.item__img img{width:86%;height:86%;object-fit:contain}
.item h3{font-size:15px;font-weight:600;line-height:1.3}
.item small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
.item__r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.item__tot{font-weight:700;font-size:15px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.qty button{width:34px;height:34px;display:grid;place-items:center;background:#11171d;transition:background .2s}
.qty button:hover{background:var(--or)}
.qty span{min-width:34px;text-align:center;font-weight:700}
.rm{font-size:12px;color:var(--mut);display:inline-flex;gap:5px;align-items:center}
.rm:hover{color:#ff5a4a}
.rm svg{width:14px;height:14px}

.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.f{display:flex;flex-direction:column;gap:6px;font-size:13px}
.f>span{color:#cfd3d6;font-weight:600}
.f--full{grid-column:1/-1}
.f--wide{grid-column:span 1}
.f input,.f textarea{width:100%;background:rgba(6,9,12,.72);border:1px solid #28313a;border-radius:10px;color:var(--tx);font:inherit;padding:12px 13px;transition:border-color .2s,box-shadow .2s}
.f textarea{resize:vertical;min-height:84px}
.f input:focus,.f textarea:focus{outline:0;border-color:var(--or);box-shadow:0 0 0 3px rgba(255,99,11,.2)}
.f input.bad{border-color:#ff4a3a;box-shadow:0 0 0 3px rgba(255,74,58,.18)}
@media(min-width:760px){.fields{grid-template-columns:repeat(6,1fr)}.fields .f{grid-column:span 3}.fields .f--wide{grid-column:span 4}.fields .f--uf{grid-column:span 1}.fields .f:nth-child(1):not(.f--full){grid-column:span 2}}

.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.pay label{cursor:pointer}
.pay input{position:absolute;opacity:0;pointer-events:none}
.pay span{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 8px;border:1px solid #28313a;border-radius:10px;font-weight:600;font-size:14px;background:#0a0d10;transition:.2s}
.pay span svg{width:18px;height:18px;color:var(--or)}
.pay input:checked+span{border-color:var(--or);background:rgba(255,99,11,.12);box-shadow:0 0 0 3px rgba(255,99,11,.15)}
.pay input:focus-visible+span{outline:2px solid var(--or)}
.err{margin-top:12px;color:#ff7a6c;font-size:14px;font-weight:600}

.sum{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.sum>div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.sum dt{color:#cfd3d6}
.sum dd{font-weight:600}
.sum .tot{padding-top:12px;border-top:1px solid var(--line);align-items:baseline}
.sum .tot dt{font-weight:700;color:var(--tx)}
.sum .tot dd{font-family:var(--head);font-weight:400;font-size:30px;color:var(--or);line-height:1}
.note{font-size:12px;color:var(--mut);margin-bottom:16px}
.btn--full{width:100%}
.linkbtn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:14px;font-size:13px;color:var(--mut)}
.linkbtn:hover{color:#ff5a4a}
.linkbtn svg{width:15px;height:15px}

.ck__empty{text-align:center;padding:60px 20px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;background:rgba(10,14,18,.66);backdrop-filter:blur(14px)}
.ck__empty>svg{width:54px;height:54px;color:var(--or);margin:0 auto 14px;display:block}
.ck__empty h2{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:30px;margin-bottom:8px}
.ck__empty p{color:var(--mut);margin-bottom:22px}
[hidden]{display:none!important}

@media(max-width:900px){.ck__grid{grid-template-columns:1fr}.sticky{position:static}}
@media(max-width:560px){
  .ckwrap{padding:84px 14px 60px}
  .ck__card{padding:16px}
  .item{grid-template-columns:62px 1fr;gap:12px}
  .item__img{width:62px;height:62px}
  .item__r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .pay{grid-template-columns:1fr}
  .logo__nome{height:30px!important}
}
@media(min-width:760px){.fields .f.f--full{grid-column:1/-1}}

@media(max-width:560px){body.ck{background-attachment:scroll}}

/* cartões: contorno laranja duplo com brilho nos cantos (estilo do cartão de referência) */
.ck__card,.ck__empty{position:relative;isolation:isolate;border:1.5px solid rgba(255,112,36,.9);border-radius:20px;background:linear-gradient(180deg,rgba(16,20,25,.82),rgba(7,10,13,.88));backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 0 0 1px rgba(255,99,11,.18),0 0 26px rgba(255,99,11,.38),0 0 70px rgba(255,99,11,.14),inset 0 0 34px rgba(255,99,11,.1),0 18px 40px rgba(0,0,0,.5)}
.ck__card::before,.ck__empty::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,140,60,.34);border-radius:14px;pointer-events:none;z-index:-1}
.ck__card::after,.ck__empty::after{content:"";position:absolute;inset:-1.5px;border-radius:20px;pointer-events:none;z-index:-1;background:radial-gradient(160px 90px at 0 0,rgba(255,120,40,.75),transparent 70%),radial-gradient(160px 90px at 100% 0,rgba(255,120,40,.75),transparent 70%),radial-gradient(160px 90px at 0 100%,rgba(255,120,40,.6),transparent 70%),radial-gradient(160px 90px at 100% 100%,rgba(255,120,40,.6),transparent 70%);opacity:.55;mix-blend-mode:screen}
.ck__card{padding:26px}
.ck__empty{padding:56px 24px}
@media(max-width:560px){.ck__card{padding:20px 18px}.ck__card::before,.ck__empty::before{inset:5px;border-radius:12px}}
.ck__empty-ico{width:clamp(96px,12vw,128px);height:auto;margin:0 auto 14px;display:block;filter:drop-shadow(0 0 22px rgba(255,99,11,.55));animation:ico-pulse 3.2s ease-in-out infinite}
@keyframes ico-pulse{50%{filter:drop-shadow(0 0 34px rgba(255,99,11,.85));transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.ck__empty-ico{animation:none}}
/* ícone do carrinho vazio: parado, sem flutuar nem pulsar */
.ck__empty-ico{animation:none!important;transform:none!important;filter:drop-shadow(0 0 22px rgba(255,99,11,.55))}

.pay{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.pay{grid-template-columns:1fr 1fr}}

/* resumo fixo na lateral enquanto preenche os dados (a coluna precisa esticar para o sticky ter espaço) */
@media(min-width:901px){
  .ck__side{align-self:stretch}
  .ck__side .sticky{position:sticky;top:92px}
}
@media(max-height:620px) and (min-width:901px){.ck__side .sticky{top:76px}.ck__side .note{display:none}}
.cepmsg{min-height:16px;font-size:12px;color:var(--mut)}
.cepmsg[data-k="load"]{color:#cfd3d6}
.cepmsg[data-k="ok"]{color:#4ade80}
.cepmsg[data-k="warn"]{color:#ffb25c}
.btn--clear{margin-top:12px;border-color:rgba(255,99,11,.55);font-size:14px;padding:12px 16px;border-radius:8px}
.btn--clear:hover{background:#c0291b;border-color:#c0291b;box-shadow:0 8px 22px rgba(192,41,27,.4)}

/* janela de confirmação própria */
body.noscroll{overflow:hidden}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal__back{position:absolute;inset:0;background:rgba(4,6,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .22s ease}
.modal__box{position:relative;isolation:isolate;width:min(440px,100%);text-align:center;padding:30px 26px 24px;border:1.5px solid rgba(255,112,36,.9);border-radius:20px;background:linear-gradient(180deg,rgba(18,22,27,.96),rgba(8,11,14,.98));box-shadow:0 0 0 1px rgba(255,99,11,.18),0 0 30px rgba(255,99,11,.4),0 0 80px rgba(255,99,11,.16),0 24px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .22s ease,transform .3s var(--ease)}
.modal__box::before{content:"";position:absolute;inset:7px;border:1px solid rgba(255,140,60,.34);border-radius:14px;pointer-events:none;z-index:-1}
.modal.open .modal__back{opacity:1}
.modal.open .modal__box{opacity:1;transform:none}
.modal__ico{width:60px;height:60px;margin:0 auto 14px;display:grid;place-items:center;border-radius:50%;background:rgba(255,99,11,.12);border:1px solid rgba(255,99,11,.5);box-shadow:0 0 24px rgba(255,99,11,.35)}
.modal__ico svg{width:26px;height:26px;color:var(--or)}
.modal__box h2{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:28px;line-height:1.1;margin-bottom:8px}
.modal__box p{color:#cfd3d6;font-size:14px;margin-bottom:22px}
.modal__btns{display:flex;gap:12px}
.modal__btns .btn{flex:1;justify-content:center;padding:13px 10px}
.btn--danger{background:linear-gradient(180deg,#e0382a,#b32217);box-shadow:0 6px 20px rgba(192,41,27,.4)}
.btn--danger:hover{box-shadow:0 10px 28px rgba(192,41,27,.6)}
@media(max-width:420px){.modal__btns{flex-direction:column-reverse}}
@media(prefers-reduced-motion:reduce){.modal__back,.modal__box{transition:none}}

/* cabeçalho do checkout: botão nunca fica espremido atrás da logo */
.ck .nav__in{gap:10px}
.ck .logo{flex:0 1 auto;min-width:0}
.ck .nav__actions{flex:none;margin-left:auto}
.btn--back{white-space:nowrap}
.btn--back .short{display:none}
@media(max-width:560px){
  .ck .nav__in{padding:0 12px}
  .ck .logo img:first-child{height:40px}
  .ck .logo img.logo__nome{height:26px!important;top:2px}
  .btn--back .full{display:none}
  .btn--back .short{display:inline}
  .btn--back{padding:8px 12px;font-size:12px}
}
@media(max-width:560px){.fields .f--wide{grid-column:1/-1}}