/* ============================================================
   Jogo de Panelas Mônaco — página de vendas
   Estrutura e visual seguindo o modelo da loja de referência:
   Montserrat, fundo branco, títulos azuis e CTA verde.
   ============================================================ */

:root{
  --azul:#2B00FF;
  --verde:#23D926;
  --verde-esc:#1AB81D;
  --preto:#000;
  --cinza:#565C69;
  --linha:#E5E5E5;
  --creme:#FBF8F1;
  --raio:5px;
  --max:520px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:#000;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.4;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none !important}
.i{width:20px;height:20px;flex:none}

/* ---------- cabeçalho ---------- */
.topo{
  position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--linha);
  display:grid;grid-template-columns:40px 40px 1fr 40px;align-items:center;gap:4px;padding:10px 14px;
}
.topo-btn{background:none;border:0;padding:0;display:grid;place-items:center;height:40px;color:#000;position:relative}
.topo-logo{justify-self:center}
.topo-logo img{height:44px;width:auto}
.cart-badge{
  position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--verde);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;
}

/* ---------- barra de etapas ---------- */
.passos{background:var(--creme);border-bottom:1px solid var(--linha);padding:12px 14px}
.passos ol{list-style:none;display:flex;justify-content:center;gap:10px;margin:0;padding:0;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#9A9A9A}
.passos li{display:flex;align-items:center;gap:6px}
.passos li+li::before{content:"";width:18px;height:1px;background:var(--linha);margin-right:4px}
.passos .dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--linha);display:grid;place-items:center;font-size:11px}
.passos li.on{color:#000}
.passos li.on .dot{background:#000;border-color:#000;color:#fff}
.passos li.done .dot{background:var(--verde);border-color:var(--verde);color:#fff}

/* ---------- estrutura ---------- */
.step{display:none}
.step.on{display:block}
.bloco,.descricao,.garantias,.pilares,.rodape,.checkout,.migalha,.galeria{max-width:var(--max);margin:0 auto}
.bloco{padding:0 14px 8px}
.migalha{padding:12px 14px;font-size:12px;color:var(--cinza);display:flex;gap:6px;flex-wrap:wrap}
.migalha a{text-decoration:none}

/* ---------- galeria ---------- */
.galeria{padding:0 14px}
.gal-palco{position:relative;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;aspect-ratio:1/1;background:#fff}
.gal-palco img{width:100%;height:100%;object-fit:cover;transition:opacity .18s ease}
.gal-palco img.trocando{opacity:.25}
.gal-seta{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;
  border:1px solid var(--linha);background:rgba(255,255,255,.94);display:grid;place-items:center;padding:0;
}
.gal-seta.ant{left:8px;transform:translateY(-50%) rotate(180deg)}
.gal-seta.prox{right:8px}
.gal-minis{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.gal-minis::-webkit-scrollbar{display:none}
.gal-minis button{
  width:62px;height:62px;flex:none;padding:0;border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;background:#fff;
}
.gal-minis button.on{border-color:#000;border-width:2px}
.gal-minis img{width:100%;height:100%;object-fit:cover}

/* ---------- selos e título ---------- */
.selos-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0 10px}
.selo{font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:5px 9px;border-radius:4px}
.selo-verde{background:#E6F9E7;color:#137A16;border:1px solid #B9EFBB}
.selo-preto{background:#000;color:#fff}
.selo-txt{font-size:10.5px;font-weight:700;color:var(--cinza)}
.produto-h1{font-size:22px;font-weight:700;line-height:1.28;margin:0 0 14px}

/* ---------- preço ---------- */
.preco-linha{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.preco{font-size:26px;font-weight:700;letter-spacing:-.01em}
.preco-de{font-size:15px;color:#1D1D1D;opacity:.6}
.preco-off{background:#000;color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px}
.pix-badge{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px;font-size:12.5px;font-weight:600}
.pix-off{color:#137A16}
.pix-envio{background:#E6F9E7;color:#137A16;border-radius:999px;padding:4px 10px;font-weight:700}

/* ---------- acabamento ---------- */
.acabamento{margin:18px 0 14px}
.acab-rotulo{margin:0 0 8px;font-size:13px;color:var(--cinza)}
.acab-rotulo strong{color:#000}
.sw-linha{display:flex;gap:8px;flex-wrap:wrap}
.sw{
  display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  padding:8px 12px;font-size:13px;font-weight:600;color:#000;
}
.sw span{width:16px;height:16px;border-radius:50%;border:1px solid rgba(0,0,0,.15)}
.sw.on{border-color:#000;box-shadow:inset 0 0 0 1px #000}

/* ---------- quantidade + CTA ---------- */
.compra-linha{display:flex;align-items:stretch;gap:10px;margin:14px 0 10px}
.limite{
  display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 18px;
  font-size:12px;font-weight:600;color:var(--cinza);
}
.limite .i{width:14px;height:14px;color:#B02020}
.btn-verde{
  flex:1;border:0;border-radius:var(--raio);background:var(--verde);color:#fff;
  padding:14px 24px;font-size:17px;font-weight:600;line-height:1.2;
}
.btn-verde:hover{background:var(--verde-esc)}
.btn-verde.largo{width:100%;display:block;margin-top:8px}
.btn-verde small{display:block;font-size:11.5px;font-weight:500;opacity:.9;margin-top:5px}
.btn-preto{
  border:0;border-radius:var(--raio);background:#000;color:#fff;padding:13px 20px;font-size:15px;font-weight:600;
}
.btn-preto.largo{width:100%;margin-top:12px}

/* ---------- caixas de apoio ---------- */
.caixa{border:1px solid var(--linha);border-radius:var(--raio);padding:16px;margin-bottom:12px}
.caixa-titulo{margin:0 0 12px;font-size:15px;font-weight:700;text-align:center}
.frete-form{display:flex;gap:8px}
.frete-form input{
  flex:1;min-width:0;border:1px solid var(--linha);border-radius:var(--raio);padding:12px 14px;font-size:15px;font-family:inherit;
}
.frete-resp{margin:12px 0 0;font-size:13px;text-align:center;color:#137A16;font-weight:600}
.info-card{display:flex;align-items:center;gap:12px;border:1px solid var(--linha);border-radius:var(--raio);padding:14px;margin-bottom:12px}
.info-card p{margin:0;font-size:13px}
.info-sub{color:var(--cinza);margin-top:3px !important}
.verde{color:#137A16}
.info-icone{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff}
.info-icone.azul{background:#2E9BF0}
.info-icone.verde-bg{background:#23C55E}
.bandeiras{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bandeira{
  border:1px solid var(--linha);border-radius:4px;padding:5px 9px;font-size:10.5px;font-weight:700;
  color:var(--cinza);background:#fff;letter-spacing:.02em;
}
.bandeira.pix{color:#0AA89E;border-color:#9FE3DF}

/* ---------- números ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border:1px solid var(--linha);border-radius:var(--raio);padding:16px 10px;margin-bottom:12px;text-align:center}
.stats div{display:flex;flex-direction:column;align-items:center;gap:6px}
.stats strong{font-size:20px;font-weight:700}
.stats span{font-size:10.5px;color:var(--cinza);line-height:1.35}
.stat-ico{color:#137A16}

/* ---------- sanfonas ---------- */
.sanfona{border-bottom:1px solid var(--linha)}
.sanfona summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:16px 26px 16px 0;
  font-size:16px;font-weight:700;position:relative;
}
.sanfona summary::-webkit-details-marker{display:none}
.sanfona summary::after{content:"+";position:absolute;right:2px;font-size:20px;font-weight:400;color:var(--cinza)}
.sanfona[open] summary::after{content:"–"}
.sanfona-corpo{padding:0 0 16px}
.sanfona-corpo p{margin:0 0 10px;font-size:13.5px;color:var(--cinza);line-height:1.6}

/* ---------- descrição ---------- */
.descricao{padding:24px 14px 8px}
.descricao .desc-rotulo{font-size:14px;margin:0 0 20px;text-align:left;font-weight:400}
.descricao h2{
  color:var(--azul);font-size:28px;font-weight:700;line-height:1.15;text-align:center;
  margin:34px 0 16px;text-transform:uppercase;letter-spacing:-.01em;
}
.descricao p{text-align:center;font-size:14px;font-weight:600;line-height:1.6;margin:0 0 14px}
.descricao img{border-radius:var(--raio);margin:18px auto 0;width:100%}
.descricao .presente{font-size:34px;margin:0 0 10px}
.descricao .specs{font-weight:700;margin-top:10px}

.desc-video{margin:18px auto 0;border-radius:var(--raio);overflow:hidden;background:#000}
.desc-video video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;pointer-events:none}

/* ---------- motivo do desconto ---------- */
.motivo{border:1px solid var(--linha);border-left:4px solid var(--azul);border-radius:var(--raio);padding:18px 16px;margin:0 0 30px;background:var(--creme)}
.motivo h3{margin:0 0 12px;font-size:18px;font-weight:700;text-align:left;color:var(--azul)}
.motivo p{margin:0 0 10px;font-size:13.5px;font-weight:400;line-height:1.6;text-align:left}
.motivo p:last-child{margin-bottom:0}
.motivo b{font-weight:700}
.motivo-destaque{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:12px}

/* ---------- garantias ---------- */
.garantias{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:26px 14px}
.garantias div{
  background:var(--creme);border:1px solid #F0E9DC;border-radius:8px;padding:18px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.garantias .i{width:26px;height:26px;color:#000}
.garantias strong{font-size:11px;font-weight:700;letter-spacing:.02em}
.garantias span{font-size:11px;color:var(--cinza);line-height:1.45}

/* ---------- pilares ---------- */
.pilares{display:grid;gap:28px;padding:30px 14px;text-align:center}
.pilares div{display:flex;flex-direction:column;align-items:center;gap:8px}
.pilares .i{width:30px;height:30px}
.pilares strong{font-size:19px;font-weight:700}
.pilares span{font-size:13.5px;color:var(--cinza)}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:28px 14px 96px;display:grid;gap:26px}
.rodape-tit{font-size:11.5px;font-weight:700;letter-spacing:.08em;margin:0 0 12px}
.rodape-col p{margin:0 0 9px;font-size:13px;color:var(--cinza);display:flex;align-items:center;gap:8px}
.rodape-col a{text-decoration:none}
.rodape-fim{font-size:11px;color:var(--cinza);margin:0;text-align:center}

/* ---------- barra fixa ---------- */
.sticky-atc{
  position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid var(--linha);
  display:flex;align-items:center;gap:10px;padding:10px 14px;box-shadow:0 -4px 14px rgba(0,0,0,.07);
}
.sticky-atc img{width:44px;height:44px;object-fit:cover;border-radius:4px;flex:none}
.sticky-txt{flex:1;min-width:0}
.sticky-nome{margin:0;font-size:11.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sticky-preco{margin:2px 0 0;font-size:13px;font-weight:700}
.sticky-preco s{font-weight:400;color:var(--cinza);font-size:11px;margin-left:4px}
.sticky-atc .btn-verde{flex:none;padding:12px 16px;font-size:14px}

/* ---------- checkout ---------- */
.checkout{padding:18px 14px 60px}
.voltar{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cinza);margin-bottom:16px}
.ck-h{font-size:24px;font-weight:700;margin:0 0 6px}
.ck-sub{margin:0 0 18px;font-size:13.5px;color:var(--cinza)}
.mini-cart{display:flex;align-items:center;gap:12px;border:1px solid var(--linha);border-radius:var(--raio);padding:12px;margin-bottom:20px}
.mini-cart img{width:58px;height:58px;object-fit:cover;border-radius:4px;flex:none}
.mini-cart .mc-t{font-size:13px;font-weight:600;line-height:1.35}
.mini-cart .mc-s{font-size:11px;color:var(--cinza);margin-top:3px}
.mini-cart .mc-p{margin-left:auto;text-align:right;flex:none}
.mini-cart .mc-p s{display:block;font-size:11px;color:var(--cinza)}
.mini-cart .mc-p b{font-size:17px;font-weight:700}

.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:12.5px;font-weight:600}
.field input{
  border:1px solid var(--linha);border-radius:var(--raio);padding:13px 14px;font-size:15px;
  font-family:inherit;background:#fff;color:#000;width:100%;
}
.field input:focus{outline:2px solid rgba(43,0,255,.25);outline-offset:1px;border-color:var(--azul)}
.field input.bad{border-color:#D62828;background:#FFF7F7}
.field .hint{font-size:11.5px;color:var(--cinza)}
.field .err{font-size:11.5px;color:#D62828;min-height:0}
.field.bad .err{min-height:14px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cep-row{display:flex;align-items:center;gap:10px}
.cep-status{font-size:11.5px;color:var(--cinza);white-space:nowrap}
.cep-status.ok{color:#137A16}
.cep-status.bad{color:#D62828}

/* ---------- order bump ---------- */
.bump{border:1px solid var(--verde);border-radius:var(--raio);background:#F2FCF3;padding:14px;margin:24px 0}
.bump-tag{
  margin:-14px -14px 14px;padding:10px 14px;background:var(--verde);color:#fff;text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.bump-card{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:14px;cursor:pointer}
.bump-card input{position:absolute;opacity:0;width:0;height:0}
.bump-check{width:24px;height:24px;border:1px solid var(--linha);border-radius:4px;flex:none;display:grid;place-items:center;background:#fff}
.bump-check .i{width:15px;height:15px;color:#fff;opacity:0}
.bump-card input:checked+.bump-check{background:var(--verde);border-color:var(--verde)}
.bump-card input:checked+.bump-check .i{opacity:1}
.bump-txt{display:block}
.bump-txt strong{display:block;font-size:13.5px;font-weight:700;line-height:1.35;margin-bottom:6px}
.bump-desc{display:block;font-size:12.5px;color:var(--cinza);line-height:1.5}
.bump-img{width:100%;max-width:260px;aspect-ratio:1/1;object-fit:cover;border-radius:4px;margin:12px 0}
.bump-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.bump-price s{font-size:12px;color:var(--cinza)}
.bump-price b{font-size:16px;font-weight:700;color:#137A16}
.bump-price i{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:var(--verde);padding:3px 7px;border-radius:3px}

/* ---------- pagamento ---------- */
.pay{margin-top:26px}
.summary{border:1px solid var(--linha);border-radius:var(--raio);padding:14px;margin-bottom:8px}
.sum-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:7px 0;color:var(--cinza)}
.sum-row span:last-child{white-space:nowrap;color:#000;font-weight:600}
.sum-row.free span:last-child{color:#137A16}
.sum-row.total{border-top:1px solid var(--linha);margin-top:6px;padding-top:12px;font-size:15px;font-weight:700;color:#000}
.privacy{display:flex;align-items:center;gap:8px;justify-content:center;font-size:11.5px;color:var(--cinza);margin:12px 0 0}
.pay-error{display:flex;align-items:center;gap:8px;background:#FFF3F3;border:1px solid #F3C9C9;color:#B02020;border-radius:var(--raio);padding:12px;font-size:13px;margin-top:12px}
.pay-box{text-align:center;margin-top:18px}
.pay-step{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--cinza);margin:0 0 16px}
#qrcode{display:flex;justify-content:center;margin-bottom:14px}
#qrcode img,#qrcode canvas{border:1px solid var(--linha);border-radius:var(--raio);padding:8px;background:#fff}
#pixCode{width:100%;border:1px solid var(--linha);border-radius:var(--raio);padding:10px;font-family:inherit;font-size:12px;resize:none;color:var(--cinza)}
.btn-preto.ok{background:#137A16}
.pay-status{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:var(--cinza);margin-top:14px}
.spin{width:14px;height:14px;border:2px solid var(--linha);border-top-color:var(--verde);border-radius:50%;animation:girar .9s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.pay-done{text-align:center;padding:10px 0}
.pay-done h3{font-size:22px;font-weight:700;margin:0 0 10px}
.pay-done p{font-size:13.5px;color:var(--cinza);margin:0 0 8px}
.pay-done .pedido{font-size:12px}

/* ---------- avaliações ---------- */
.avaliacoes{margin:46px 0 10px;text-align:left}
.aval-tit{font-size:20px;font-weight:700;margin:0 0 14px;text-align:left}
.aval-resumo{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.aval-nota{font-size:38px;font-weight:800;line-height:1}
.estrelas{display:flex;gap:2px;color:#E0A526}
.estrelas svg{width:16px;height:16px}
.aval-total{display:block;font-size:12.5px;color:var(--cinza);margin-top:3px}
.aval-caixa{position:relative;overflow:hidden;transition:max-height .6s ease}
.aval-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.aval{padding:16px 0;border-bottom:1px solid var(--linha)}
.aval .estrelas svg{width:14px;height:14px}
.aval-texto{margin:8px 0 0;font-size:13.5px;font-weight:500;line-height:1.55;text-align:left}
.aval-specs{list-style:none;margin:8px 0 0;padding:0}
.aval-specs li{font-size:12.5px;color:var(--cinza);line-height:1.5;margin-bottom:3px}
.aval-specs b{color:#000;font-weight:600}
.aval-foto{width:100%;max-width:260px;border-radius:var(--raio);margin:12px 0 0}
.aval-autor{margin:10px 0 0;font-size:12.5px;font-weight:700;text-align:left}
.aval-autor span{display:block;font-weight:400;color:var(--cinza);margin-top:2px}
.aval-fade{
  position:absolute;left:0;right:0;bottom:0;height:140px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 55%,#fff 85%);
}
.aval-btn{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid #000;color:#000;
  border-radius:999px;padding:11px 26px;font-size:15px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.aval-btn:hover{background:#000;color:#fff}
.aval-caixa.aberta .aval-fade{display:none}
.bandeira-txt{font-size:11.5px;color:var(--cinza);align-self:center}

/* ---------- telas maiores ---------- */
@media(min-width:760px){
  :root{--max:680px}
  .produto-h1{font-size:26px}
  .descricao h2{font-size:32px}
  .pilares{grid-template-columns:repeat(3,1fr)}
  .rodape{grid-template-columns:repeat(3,1fr)}
  .rodape-fim{grid-column:1/-1}
}