/* ============================================================
   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{
  color-scheme:only light;   /* modo escuro forçado (Samsung/WebView) não troca as cores dos acabamentos */
  --azul:#2B00FF;
  --verde:#15803D;       /* branco sobre ele: 5,0:1 (o #23D926 dava 1,9:1) */
  --verde-esc:#166534;
  --preto:#000;
  --cinza:#565C69;
  --linha:#E5E5E5;
  --creme:#FBF8F1;
  --raio:5px;
  --max:520px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:60px}
html.ck{scroll-padding-top:0}
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;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer;color:inherit;touch-action:manipulation;-webkit-user-select:none;user-select:none}
summary,.bump-card{touch-action:manipulation}
[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:44px 1fr 44px;align-items:center;gap:4px;padding:6px 14px;
}
.ck .topo{position:static}
.ck .topo-cart{visibility:hidden}
.topo-btn{background:none;border:0;padding:0;display:grid;place-items:center;height:44px;color:#000;position:relative}   /* alvo de 44px */
.topo-logo{justify-self:center;display:flex;align-items:center;min-height:44px}
.topo-logo img{height:36px;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:8px 14px}
.passos ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:0 auto;padding:0;max-width:var(--max);
  font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#6B6B6B}
.passos li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.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,.galeria{max-width:var(--max);margin:0 auto}
.bloco{padding:0 14px 8px}

/* ---------- 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;touch-action:pan-y pinch-zoom}
.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:44px;height:44px;border-radius:50%;
  border:1px solid var(--linha);background:rgba(255,255,255,.94);display:grid;place-items:center;padding:0;color:#000;
}
.gal-seta.ant{left:8px;transform:translateY(-50%) rotate(180deg)}
.gal-seta.prox{right:8px}
.gal-minis{position:relative;display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;min-height:66px}   /* espaço reservado: o app.js preenche depois da 1ª pintura (sem CLS) */
.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:11.5px;font-weight:700;letter-spacing:.02em;padding:5px 9px;border-radius:4px}
.selo-verde{background:#E6F9E7;color:#137A16;border:1px solid #B9EFBB}
.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}
.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:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:359px){.sw-linha{grid-template-columns:repeat(2,1fr)}}
.sw{
  display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);
  min-height:44px;padding:8px 10px;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}
/* (a faixa vermelha pulsante "Lote promocional limitado" saiu: não existe lote nem estoque que a sustente) */
.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;
}
@media (hover:hover){.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;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}
/* resposta ao toque (o realce azul do Android está desligado no html) */
.btn-verde,.btn-preto,.sw{transition:transform .08s,filter .08s}
.btn-verde:active,.btn-preto:active,.sw:active,.gal-seta:active,.voltar:active,.bump-card:active{filter:brightness(.92)}
@media (prefers-reduced-motion:no-preference){.btn-verde:active,.btn-preto:active,.sw:active{transform:scale(.98)}}
.btn-verde:disabled,.btn-preto:disabled{opacity:.75;cursor:wait;transform:none}
#btnPix:disabled{opacity:1}   /* "Gerando seu PIX…"/"Não feche esta página" legível (com .75 o contraste caía para 3,2:1); o spinner já mostra o estado */

/* ---------- 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 #8A8A8A;border-radius:var(--raio);padding:12px 14px;font-size:16px;font-family:inherit;
  -webkit-appearance:none;appearance:none;
}
.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:11.5px;font-weight:700;
  color:var(--cinza);background:#fff;letter-spacing:.02em;
}
.bandeira.pix{color:#087F78;border-color:#9FE3DF}
.bandeira-txt{font-size:12px;color:var(--cinza);align-self:center}

/* ---------- 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%;height:auto}
.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}
/* sem o "play" grande do iOS por cima do pôster (com controles, no modo de movimento reduzido, ele fica) */
.desc-video video:not([controls])::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* iOS 14 / Chrome < 88 sem aspect-ratio: caixa quadrada por padding (sem salto quando o pôster chega) */
@supports not (aspect-ratio:1/1){
  .desc-video{position:relative;padding-top:100%}
  .desc-video video{position:absolute;top:0;left:0;height:100%}
}


/* ---------- 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:12px;font-weight:700;letter-spacing:.02em}
.garantias span{font-size:12px;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 calc(96px + env(safe-area-inset-bottom));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;font-size:13px;color:var(--cinza);display:flex;align-items:center;gap:8px}
.rodape-col a{text-decoration:underline;display:inline-block;padding:13px 0}   /* alvo de 44px */
.rodape .bandeiras{justify-content:flex-start}
.rodape-fim{font-size:12px;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;box-shadow:0 -4px 14px rgba(0,0,0,.07);
  padding:10px max(14px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
}
.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:12px;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-atc .btn-verde{flex:none;padding:12px 16px;font-size:14px;min-height:44px}

/* ---------- checkout ---------- */
.checkout{padding:18px 14px calc(60px + env(safe-area-inset-bottom))}
.voltar{background:none;border:0;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cinza);min-height:44px;padding:10px 0;margin:-10px 0 6px}
.ck-h{font-size:24px;font-weight:700;margin:0 0 6px}
.ck-h:focus{outline:none}
.ck-sub{margin:0 0 12px;font-size:13.5px;color:var(--cinza)}
.mini-cart{display:flex;align-items:center;gap:10px;border:1px solid var(--linha);border-radius:var(--raio);padding:10px;margin-bottom:14px}
.mini-cart img{width:44px;height:44px;object-fit:cover;border-radius:4px;flex:none}
.mini-cart .mc-info{flex:1;min-width:0}
.mini-cart .mc-t{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-cart .mc-s{font-size:12px;color:var(--cinza);margin-top:2px}
.mini-cart .mc-p{flex:none;text-align:right}
.mini-cart .mc-p b{font-size:16px;font-weight:700}
.ck-trust{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:12.5px;color:var(--cinza);margin:22px 0 0}
.ck-trust .i{width:16px;height:16px}

.form{display:grid;gap:14px}
.field{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}   /* conteúdo longo não alarga a coluna */
.field label{font-size:12.5px;font-weight:600}
.field input{
  border:1px solid #8A8A8A;   /* 3,45:1 sobre branco (o #E5E5E5 dava 1,26:1) */border-radius:var(--raio);padding:12px 14px;font-size:16px;
  font-family:inherit;background:#fff;color:#000;width:100%;-webkit-appearance:none;appearance:none;
}
.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:13px;color:var(--cinza)}
.field .err{font-size:13px;color:#D62828;min-height:0}
.field.bad .err{min-height:16px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.dupla-num{grid-template-columns:110px minmax(0,1fr)}
#f_num{padding-left:10px;padding-right:10px}   /* "123 ou S/N" inteiro em 110px */
.dupla-uf{grid-template-columns:minmax(0,1fr) 76px}
#f_uf{text-transform:uppercase}
.opc{font-weight:400;color:var(--cinza)}
.link-cep{display:inline-block;padding:13px 0;color:var(--azul);font-weight:600}   /* alvo de 44px */
.email-sug{justify-self:start;background:none;border:0;padding:0;min-height:44px;text-align:left;font-size:13.5px;color:var(--azul);text-decoration:underline}
.email-sug b{font-weight:700;word-break:break-all}   /* e-mail longo quebra em vez de abrir rolagem lateral */
.cep-status{display:block;min-height:16px;font-size:12.5px;color:var(--cinza)}
.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{position:relative;display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:14px;cursor:pointer;transition:border-color .15s,background .15s}
/* checkbox real (invisível) em cima do quadrado: o leitor de tela acha no lugar certo */
.bump-card input{position:absolute;top:14px;left:14px;width:24px;height:24px;margin:0;opacity:0}
.bump-card:has(input:checked){border-color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde);background:#F7FFF7}
.bump-card:has(input:focus-visible){outline:2px solid var(--azul);outline-offset:2px}
.bump-check{width:24px;height:24px;border:2px solid var(--cinza);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 b{font-size:16px;font-weight:700;color:#137A16}

/* ---------- 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:12.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-valor{font-size:15px;margin:0 0 12px}
.pay-valor b{display:block;font-size:26px;font-weight:700;margin-top:2px}
.copy-hint{margin:10px 0 0;font-size:14px;font-weight:600}
.pay-passos{text-align:left;margin:16px auto 12px;max-width:340px;padding-left:22px;font-size:14px;line-height:1.6}
#pixCode{width:100%;border:1px solid var(--linha);border-radius:var(--raio);padding:10px;font-family:inherit;font-size:16px;line-height:1.35;word-break:break-all;resize:none;color:var(--cinza);-webkit-user-select:text;user-select:text}
#btnCopy.ok{background:var(--verde-esc)}
.pay-code-tit{display:block;text-align:left;font-size:13px;color:var(--cinza);margin:14px 0 6px}
#pixCode+#btnCopy{margin-top:10px}
.btn-link{background:none;border:0;color:var(--azul);text-decoration:underline;font-size:14px;font-weight:600;padding:12px;min-height:44px}
.pay-dica{font-size:13px;color:var(--cinza);margin:4px 0 0}
.pay-end{font-size:13px;margin:12px 0 0}
.pay-qr{margin:14px 0 4px;text-align:center}
.pay-qr-tit{font-size:13px;color:var(--cinza);margin:0 0 8px}
#qrcode{display:flex;justify-content:center;min-height:120px;align-items:center;font-size:13px;color:var(--cinza)}
#qrcode img,#qrcode canvas{border:1px solid var(--linha);border-radius:var(--raio);padding:8px;background:#fff}
.pix-ativo .voltar{display:none}
.so-pagamento #formEndereco,.so-pagamento .checkout>.ck-h,.so-pagamento .ck-sub,.so-pagamento .voltar{display:none}
.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;flex:none}
@keyframes girar{to{transform:rotate(360deg)}}
.spin-claro{display:inline-block;vertical-align:-2px;margin-right:6px;border-color:rgba(255,255,255,.35);border-top-color:#fff}
.bump-card:has(input:disabled){opacity:.6;pointer-events:none}
.pay-done{text-align:center;padding:10px 0}
.pay-done h3{font-size:22px;font-weight:700;margin:0 0 10px}
.pay-done h3:focus{outline:none}
.pay-done p{font-size:13.5px;color:var(--cinza);margin:0 0 8px}
.pay-done b{color:#000}
.pay-done .pedido{font-size:12px}
#doneHashFull{word-break:break-all}

/* ---------- telas maiores ---------- */
@media(min-width:760px){
  :root{--max:680px}
  .produto-h1{font-size:26px}
  .descricao h2{font-size:32px}
  .pilares{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}   /* uma coluna por pilar (o de atendimento volta quando houver canal real) */
  .rodape{grid-template-columns:repeat(3,1fr)}
  .rodape-fim{grid-column:1/-1}
  /* barra fixa alinhada com a coluna da página, não esticada nas pontas da tela */
  .sticky-atc{padding-left:max(14px,calc((100% - var(--max))/2 + 14px));padding-right:max(14px,calc((100% - var(--max))/2 + 14px))}
}
/* notebook/desktop: a foto não ocupa a tela inteira e o preço sobe para a 1ª dobra */
@media(min-width:1024px){
  .gal-palco{aspect-ratio:auto;height:min(56vh,652px)}
  .gal-palco img{object-fit:contain}
}