/* =========================================================
   CHECKOUT PRÓPRIO
   Só o que é exclusivo do checkout. Cores, tamanhos, espaços,
   contornos e botões vêm dos padrões definidos em site.css.
   Feito primeiro para celular.
   ========================================================= */

.ck-body { padding-bottom: calc(var(--h-btn) + var(--s-6)); }
.ck { position: relative; padding-block: calc(var(--s-6) + var(--s-8)) var(--s-7); }
.ck .container { max-width: 600px; }
.ck__title { display: grid; justify-items: center; gap: var(--s-3); text-align: center; margin-bottom: var(--s-6); }
.ck .letter { color: var(--c-slime); }
[hidden] { display: none !important; }

/* ---------- Passos ---------- */
.step { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
.step__head { display: flex; align-items: center; gap: var(--s-3); }
.step__num {
  flex: none; width: var(--s-6); height: var(--s-6); display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--t-md); line-height: 1; padding-top: var(--s-1);
  background: var(--c-yellow); border: var(--border); border-radius: var(--r-sm);
  transform: rotate(calc(var(--tilt) * -3));
}

/* ---------- Carrinho ---------- */
.cut-produto {
  -webkit-mask: url(img/produto-mask.png) center / 100% 100% no-repeat;
  mask: url(img/produto-mask.png) center / 100% 100% no-repeat;
}
.cart { display: grid; gap: var(--s-4); }
.cart__item { display: grid; grid-template-columns: var(--s-8) 1fr; gap: var(--s-3); align-items: center; }
.cart__foto { width: 100%; height: auto; }
.cart__info { display: grid; gap: var(--s-2); min-width: 0; }
.cart__nome { font-weight: 700; line-height: 1.2; }
.cart__unit { font-size: var(--t-xs); color: var(--c-ink-soft); }
.qtd { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; }
.qtd__btn {
  width: var(--h-btn-sm); height: var(--h-btn-sm); flex: none; cursor: pointer;
  border: var(--border); border-radius: var(--r-sm); box-shadow: 0 3px 0 var(--c-ink);
  background: linear-gradient(var(--c-ink), var(--c-ink)) center / var(--s-4) 3px no-repeat, var(--c-white);
  transition: transform .08s, box-shadow .08s;
}
.qtd__btn--mais {
  background:
    linear-gradient(var(--c-ink), var(--c-ink)) center / var(--s-4) 3px no-repeat,
    linear-gradient(var(--c-ink), var(--c-ink)) center / 3px var(--s-4) no-repeat,
    var(--c-orange);
}
.qtd__btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--c-ink); }
.qtd__btn[disabled] { opacity: .35; cursor: default; box-shadow: none; transform: none; }
.qtd__num { min-width: var(--s-7); text-align: center; font-family: var(--font-display); font-size: var(--t-lg); line-height: 1; padding-top: var(--s-1); }
.cart__brinde { display: grid; grid-template-columns: var(--s-8) 1fr auto; gap: var(--s-3); align-items: center; font-weight: 700; border-top: 3px dashed var(--c-ink); padding-top: var(--s-3); }
.cart__brinde img { width: 72%; height: auto; justify-self: center; }
.cart__brinde .tag { transform: none; box-shadow: none; }
.cart__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); border-top: var(--border); padding-top: var(--s-3); font-weight: 600; }
.cart__precos { display: flex; align-items: baseline; gap: var(--s-2); }
.cart__de { font-size: var(--t-xs); color: var(--c-ink-soft); text-decoration: line-through; }
.cart__por { font-family: var(--font-display); font-size: var(--t-lg); line-height: 1; padding-top: var(--s-1); }
.cart__promo { font-size: var(--t-xs); font-weight: 700; line-height: 1.35; background: var(--c-yellow); border: var(--border); border-radius: var(--r-sm); padding: var(--s-2) var(--s-3); }
.cart__promo.is-on { background: var(--c-slime); }

/* ---------- Endereço e entrega ---------- */
.cep__status { font-size: var(--t-xs); font-weight: 700; min-height: 1.4em; }
.entrega__espera { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-soft); border-style: dashed; box-shadow: none; text-align: center; }
.entrega__destino { font-size: var(--t-xs); font-weight: 700; }

/* ---------- Opções de escolher (entrega) ---------- */
.opts { display: grid; gap: var(--s-3); }
.opt {
  position: relative; display: grid; grid-template-columns: var(--s-5) 1fr auto; gap: var(--s-1) var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4); min-height: var(--h-btn);
  background: var(--c-white); border: var(--border); border-radius: var(--r-md);
  cursor: pointer; transition: background-color .12s, box-shadow .12s, transform .12s;
}
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt__mark {
  width: var(--s-5); height: var(--s-5); border: var(--border); border-radius: var(--r-pill); background: var(--c-white);
  display: grid; place-items: center;
}
.opt__mark::after { content: ""; width: var(--s-3); height: var(--s-3); border-radius: var(--r-pill); background: var(--c-ink); transform: scale(0); transition: transform .12s; }
.opt__text { display: grid; gap: 2px; min-width: 0; }
.opt__name { font-weight: 700; line-height: 1.2; }
.opt__desc { font-size: var(--t-xs); color: var(--c-ink-soft); line-height: 1.3; }
.opt__price { font-family: var(--font-display); font-size: var(--t-md); line-height: 1; white-space: nowrap; padding-top: var(--s-1); text-align: right; }
.opt__extra { grid-column: 2 / -1; justify-self: start; }
.opt__extra.tag { transform: none; box-shadow: none; text-transform: none; letter-spacing: 0; }
.opt.is-checked { background: var(--c-slime); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); }
.opt.is-checked .opt__mark::after { transform: scale(1); }
.opt.is-checked .opt__desc { color: var(--c-ink); }
.opt:focus-within { outline: 3px solid var(--c-yellow); outline-offset: 2px; }

/* ---------- Campos ---------- */
.fields { display: grid; gap: var(--s-3); grid-template-columns: repeat(6, 1fr); }
.field { display: grid; gap: var(--s-1); grid-column: span 6; min-width: 0; }
.field--3 { grid-column: span 3; }
.field--4 { grid-column: span 4; }
.field--2 { grid-column: span 2; }
.field label { font-size: var(--t-xs); font-weight: 700; }
.field input {
  width: 100%; height: var(--h-btn); padding-inline: var(--s-4);
  font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--c-ink);
  background: var(--c-white); border: var(--border); border-radius: var(--r-sm);
}
.field input::placeholder { color: var(--c-ink-soft); opacity: .6; }
.field input:focus { outline: 3px solid var(--c-yellow); outline-offset: 1px; }
.field__erro { font-size: var(--t-xs); font-weight: 600; color: var(--c-danger); min-height: 0; }
.field.is-invalid input { border-color: var(--c-danger); background: #FFF1EC; }
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Resumo ---------- */
.resumo { display: grid; gap: var(--s-2); background: var(--c-yellow); margin-bottom: var(--s-5); transform: rotate(calc(var(--tilt) * -0.5)); }
.resumo dl { display: grid; gap: var(--s-2); }
.resumo dl div { display: flex; justify-content: space-between; gap: var(--s-4); font-weight: 600; }
.resumo dd { white-space: nowrap; }
.resumo .resumo__total { border-top: var(--border); padding-top: var(--s-3); margin-top: var(--s-1); align-items: baseline; }
.resumo__total dd { font-family: var(--font-display); font-size: var(--t-xl); line-height: .9; padding-top: var(--s-1); }
.resumo__brinde { font-size: var(--t-xs); font-weight: 700; }

.aviso-erro { border: 3px dashed var(--c-danger); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); font-weight: 600; color: var(--c-danger); background: var(--c-white); }
.ck__nota { margin-top: var(--s-4); text-align: center; font-size: var(--t-xs); color: var(--c-ink-soft); text-wrap: balance; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- Tela do Pix ---------- */
.pix { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.pix__valor { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1; padding-top: var(--s-1); }
.pix__qr { width: min(72vw, 260px); aspect-ratio: 1; display: grid; place-items: center; background: var(--c-white); border: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--s-3); }
.pix__qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.pix__codigo { width: 100%; display: grid; gap: var(--s-2); text-align: left; }
.pix__codigo label { font-size: var(--t-xs); font-weight: 700; }
.pix__codigo textarea {
  width: 100%; min-height: calc(var(--s-8) + var(--s-5)); resize: none; padding: var(--s-3);
  font-family: ui-monospace, Consolas, monospace; font-size: var(--t-xs); line-height: 1.4; word-break: break-all;
  color: var(--c-ink); background: var(--c-white); border: var(--border); border-radius: var(--r-sm);
}
.pix__status { display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-weight: 700; }
.pix__status::before { content: ""; width: var(--s-4); height: var(--s-4); border: 3px solid var(--c-ink); border-top-color: transparent; border-radius: var(--r-pill); animation: gira .9s linear infinite; }
.pix__passos { text-align: left; display: grid; gap: var(--s-2); width: 100%; }
.pix__passos li { display: grid; grid-template-columns: var(--s-5) 1fr; gap: var(--s-2); font-size: var(--t-xs); }
.pix__passos b { font-family: var(--font-display); font-weight: 400; font-size: var(--t-sm); }
@keyframes gira { to { transform: rotate(360deg); } }

.pago { display: grid; gap: var(--s-4); justify-items: center; text-align: center; }
.pago .blob { width: calc(var(--s-8) * 1.5); height: calc(var(--s-8) * 1.5); }
.pago .icon { width: var(--s-7); height: var(--s-7); stroke-width: 3; }
.pago__pedido { font-family: var(--font-display); font-size: var(--t-lg); padding-top: var(--s-1); }

/* ---------- Barra fixa com o total (celular) ---------- */
.paybar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  background: var(--c-paper); border-top: var(--border);
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.paybar__total { display: grid; font-size: var(--t-xs); font-weight: 600; line-height: 1.1; }
.paybar__total b { font-family: var(--font-display); font-weight: 400; font-size: var(--t-lg); line-height: 1; padding-top: var(--s-1); }
.paybar .btn { flex: 1; max-width: 240px; }

@media (min-width: 640px) {
  .field--sm-4 { grid-column: span 4; }
  .field--sm-2 { grid-column: span 2; }
  .field--sm-3 { grid-column: span 3; }
}
@media (min-width: 900px) {
  .ck-body { padding-bottom: 0; }
  .paybar { display: none; }
  .ck { padding-block: calc(var(--s-7) + var(--s-8)) var(--s-8); }
}
@media (prefers-reduced-motion: reduce) {
  .opt, .opt__mark::after { transition: none; }
  .pix__status::before { animation: none; }
}