/* Páginas da loja (comprar, pedido, trocas). Mesmos tokens e gestos do index.html: preto, Archivo, brasa, cantos de 2px. */
:root{
  --bg:#000; --ink-1:#efede9; --ink-2:#bdb9b2; --ink-3:#7f7b74; --line:#23211e; --field:#4a4741; --well:#0d0c0b;
  --ember:#f5902a; --ember-ink:#1a0d03; --bad:#ff6b5a; --ok:#5ad17a;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,4vw,40px); --max:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink-2);font:400 16px/1.6 var(--sans);min-height:100vh}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2{font-family:var(--sans);color:var(--ink-1);font-stretch:112%;font-weight:700;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:1.25rem}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.rot{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

.teste{background:#3a2300;color:var(--ember);font:500 12px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px var(--gutter)}
.topo{border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.topo img{height:40px;width:auto}
.topo a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.volta{font-size:15px;color:var(--ink-2)}
.volta:hover{color:var(--ink-1)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:2px;
  font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.btn-primary{background:var(--ember);color:var(--ember-ink)}
.btn-primary:hover{background:#ffa446}
.btn-primary[disabled]{background:#7a5326;cursor:progress}
.btn-ghost{background:transparent;border:1px solid var(--field);color:var(--ink-1)}
.btn-ghost:hover{border-color:var(--ink-1)}
.btn.full{width:100%}

.pagina{padding-block:clamp(28px,5vw,56px) 120px}
.aviso{max-width:56ch;padding-block:clamp(24px,6vw,72px)}
.aviso p{margin-top:14px}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* fechamento */
.checkout{display:grid;gap:32px}
.blocos{display:grid;gap:40px;min-width:0}
.bloco{border-top:1px solid var(--line);padding-top:24px;min-width:0}
.bloco h2{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.n{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--ember);color:var(--ember);font:500 13px/1 var(--mono)}
.prod{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.prod img{flex:none;width:96px;height:96px;object-fit:contain;background:var(--well);border:1px solid var(--line)}
.prod strong{display:block;color:var(--ink-1);font-size:1.4rem;font-stretch:112%;line-height:1.1}
.prod span{display:block;margin-top:6px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:420px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:64px;padding:12px 14px;border:1px solid var(--field);border-radius:2px;
  background:transparent;color:var(--ink-2);font:500 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.opt strong{font:700 20px/1 var(--sans);font-stretch:112%;letter-spacing:0;text-transform:none;color:var(--ink-1)}
.opt:hover{border-color:var(--ink-1)}
.opt[aria-checked="true"]{border-color:var(--ember);background:rgba(245,144,42,.08)}
.opt[aria-checked="true"] span{color:var(--ember)}
.qtd{display:flex;align-items:center;gap:14px;margin-top:20px}
.passo{display:inline-flex;align-items:center;border:1px solid var(--field);border-radius:2px}
.passo button{width:48px;height:48px;background:transparent;border:0;color:var(--ink-1);font:500 22px/1 var(--sans);cursor:pointer}
.passo button[disabled]{color:var(--ink-3);cursor:default}
.passo output{min-width:40px;text-align:center;color:var(--ink-1);font:600 18px/1 var(--sans)}

.campos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.campo{grid-column:span 6;min-width:0}
.campo label{display:block;margin-bottom:6px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.campo label small{font:400 12px/1 var(--sans);letter-spacing:0;text-transform:none}
.campo input,.campo select{width:100%;min-height:52px;padding:0 14px;border:1px solid var(--field);border-radius:2px;background:var(--well);
  color:var(--ink-1);font:500 16px/1.2 var(--sans);-webkit-appearance:none;appearance:none}
.campo select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 19px) 23px,calc(100% - 13px) 23px;background-size:6px 6px;background-repeat:no-repeat}
.campo input::placeholder{color:var(--ink-3)}
.campo [aria-invalid="true"]{border-color:var(--bad)}
.erro{margin-top:6px;color:var(--bad);font-size:14px;line-height:1.35}
.dica{margin-top:6px;color:var(--ink-3);font-size:13px;line-height:1.35}
.m2{grid-column:span 2}.m3{grid-column:span 3}.m4{grid-column:span 4}
@media (min-width:560px){.c1{grid-column:span 1}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}}

.fretes{display:grid;gap:8px;margin-top:20px}
.fretes:empty{display:none}
.frete-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 14px;border:1px solid var(--field);border-radius:2px;
  background:transparent;color:var(--ink-1);font:500 15px/1.3 var(--sans);text-align:left;cursor:pointer}
.frete-opt small{display:block;margin-top:2px;font:500 12px/1.3 var(--mono);color:var(--ink-3)}
.frete-opt strong{font-weight:700;white-space:nowrap}
.frete-opt:hover{border-color:var(--ink-1)}
.frete-opt[aria-checked="true"]{border-color:var(--ember);background:rgba(245,144,42,.08)}
.frete-msg{margin-top:16px;font-size:15px;line-height:1.45}

.resumo{align-self:start;border:1px solid var(--line);padding:24px;min-width:0}
.resumo h2{margin-bottom:16px}
.resumo dl{display:grid;gap:12px}
.resumo dl div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.resumo dd{color:var(--ink-1);font-weight:600;text-align:right}
.resumo dd small{display:block;font:400 12px/1.4 var(--mono);color:var(--ink-3)}
.total{border-top:1px solid var(--line);padding-top:14px}
.total dd{font-size:1.6rem;font-stretch:112%;white-space:nowrap}
.problema{margin-top:16px;border:1px solid var(--bad);color:var(--bad);padding:12px 14px;font-size:15px;line-height:1.4}
.resumo .btn{display:none;margin-top:20px}
.nota{margin-top:14px;font-size:13px;line-height:1.5;color:var(--ink-3)}
.nota a{color:var(--ink-2)}
.barra{position:fixed;inset:auto 0 0 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#000;
  border-top:1px solid var(--line);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px))}
.barra strong{display:block;color:var(--ink-1);font:700 1.25rem/1.15 var(--sans);font-stretch:112%;white-space:nowrap}
@media (min-width:900px){
  .pagina{padding-bottom:80px}
  .checkout{grid-template-columns:minmax(0,1fr) 360px;gap:56px}
  .resumo{position:sticky;top:24px;margin-top:calc(clamp(2rem,5vw,3rem) * 1.08 + 40px)}
  .resumo .btn{display:inline-flex}
  .barra{display:none}
}

/* etapas da compra e garantias */
.trilha{border-bottom:1px solid var(--line)}
.trilha ol{list-style:none;display:flex;gap:6px 24px;flex-wrap:wrap;padding-block:12px;font-size:14px;color:var(--ink-3)}
.trilha li{display:flex;align-items:center;gap:8px}
.trilha span{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--field);border-radius:50%;font:500 12px/1 var(--mono)}
.trilha [aria-current]{color:var(--ink-1)}
.trilha [aria-current] span{border-color:var(--ember);background:var(--ember);color:var(--ember-ink)}
.ico{flex:none;width:18px;height:18px}
.garantias{list-style:none;display:grid;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.4}
.garantias li{display:flex;gap:10px;align-items:flex-start}
.garantias .ico{margin-top:1px;color:var(--ember)}
.garantias a{color:var(--ink-1)}

/* página do pedido */
.rot + h1{margin-top:10px}
.etapas{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:28px}
.etapas li{border-top:3px solid var(--line);padding-top:10px;font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.etapas .feita{border-color:var(--ember);color:var(--ink-1)}
.situacao{margin-top:24px;max-width:52ch;font-size:1.15rem;line-height:1.45;color:var(--ink-1)}
.dados{margin-top:32px;border-top:1px solid var(--line)}
.dados div{display:grid;grid-template-columns:minmax(0,11ch) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.dados dt{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dados dd{color:var(--ink-1);overflow-wrap:anywhere}
.rastreio{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.rastreio code{padding:12px 14px;border:1px solid var(--ember);color:var(--ink-1);font:500 17px/1 var(--mono);letter-spacing:.06em}

.pedido-grade{display:grid;gap:32px;margin-top:32px}
.pedido-col{min-width:0}
.pedido-resumo{align-self:start;border:1px solid var(--line);padding:24px;min-width:0}
.pedido-resumo .dados{margin-top:14px}
.pedido-resumo .dados div{grid-template-columns:minmax(0,8ch) minmax(0,1fr)}
.dados-total dd{font-weight:700;font-size:1.2rem;font-stretch:112%}
.pedido-resumo .acoes{margin-top:20px}
.outras{margin-top:18px;font-size:15px}
.outras a{color:var(--ink-1)}
@media (min-width:900px){.pedido-grade{grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}.pedido-resumo{position:sticky;top:24px}}

/* pagamento na página: painel claro, como um comprovante sobre a bancada escura. Tudo o que é dinheiro acontece aqui dentro. */
.pagar{--papel:#f4f2ee;--tinta:#17130f;--tinta-2:#4d463e;--fio:#d9d4cb;background:var(--papel);color:var(--tinta-2);border-top:4px solid var(--ember);border-radius:2px;
  padding:clamp(20px,4vw,32px)}
.pagar :focus-visible{outline-color:var(--tinta)}
.pagar-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--fio)}
.pagar-topo h2{color:var(--tinta-2);font:500 15px/1.3 var(--sans);font-stretch:100%;letter-spacing:0}
.pagar-topo strong{color:var(--tinta);font:800 clamp(1.7rem,5vw,2.2rem)/1 var(--sans);font-stretch:112%;white-space:nowrap}
.pagar-alerta{margin-top:18px;border-left:4px solid #b3261e;background:#fbe9e7;color:#7a1a14;padding:12px 14px;font-size:15px;line-height:1.4}
.metodos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.metodos button{display:flex;flex-direction:column;gap:4px;min-height:64px;padding:12px 14px;border:1px solid var(--fio);border-radius:2px;background:#fff;color:var(--tinta);
  font:700 16px/1.2 var(--sans);text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.metodos small{font:400 13px/1.3 var(--sans);color:var(--tinta-2)}
.metodos button:hover{border-color:var(--tinta)}
.metodos [aria-selected="true"]{border-color:var(--tinta);box-shadow:inset 0 0 0 1px var(--tinta)}
#pg-pix,#pg-cartao{margin-top:22px}
.pagar p{line-height:1.5}
.btn-escuro{background:var(--tinta,#17130f);color:#fff}
.btn-escuro:hover{background:#2e2720}
.btn-escuro[disabled]{background:#6f675e;cursor:progress}
#pix-inicio .btn{margin-top:18px}
.pix-grade{display:grid;gap:18px;justify-items:center}
#pix-qr{width:220px;height:220px;background:#fff;border:1px solid var(--fio);padding:8px;image-rendering:pixelated}
.pix-passos{margin-left:20px;display:grid;gap:8px;font-size:15px;line-height:1.45;justify-self:stretch}
.pix-rot{display:block;margin:20px 0 6px;font-size:14px;color:var(--tinta-2)}
#pix-texto{display:block;width:100%;padding:12px 14px;border:1px solid var(--fio);border-radius:2px;background:#fff;color:var(--tinta);font:500 13px/1.45 var(--mono);
  resize:none;overflow-wrap:anywhere;word-break:break-all}
#pix-copiar{margin-top:12px}
.pix-espera{display:flex;gap:10px;align-items:baseline;margin-top:18px;font-size:14px}
.pulso{flex:none;width:8px;height:8px;border-radius:50%;background:#1f8a4c;animation:pulso 1.6s ease-in-out infinite}
@keyframes pulso{50%{opacity:.25}}
.cartao-msg{font-size:15px}
.pagar-seguro{display:flex;gap:10px;align-items:flex-start;margin-top:24px;padding-top:16px;border-top:1px solid var(--fio);font-size:13px;line-height:1.45}
.pagar-seguro .ico{margin-top:1px;color:var(--tinta)}
@media (min-width:560px){.pix-grade{grid-template-columns:220px minmax(0,1fr);align-items:center;justify-items:start}}
@media (prefers-reduced-motion:reduce){.pulso{animation:none}}

/* texto corrido (trocas) */
.texto{max-width:66ch}
.texto h1{margin-bottom:20px}
.texto h2{margin:36px 0 10px}
.texto p,.texto li{margin-top:10px}
.texto ul{padding-left:20px}
.rodape{border-top:1px solid var(--line);padding-block:24px calc(40px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--ink-3)}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:8px 20px}
.rodape a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
.rodape a:hover{color:var(--ink-1)}