/* Checkout, Minha conta, formulários e páginas de texto — mesmo visual da vitrine. */
.carregando { padding: 80px 20px; text-align: center; color: var(--texto-2); }
.form { display: grid; gap: 12px; }
.form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #333; }
.form input, .form select, .form textarea { padding: 11px 12px; border: 2px solid var(--borda); border-radius: 8px; font: inherit; font-size: 15px; background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--preto); }
.linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.linha3 { display: grid; grid-template-columns: 1.2fr 2fr 1fr; gap: 12px; }
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; padding: 26px 0 60px; align-items: start; }
.caixa { background: #fff; border: 1px solid var(--borda); border-radius: 14px; padding: 22px; }
.caixa + .caixa { margin-top: 18px; }
.caixa h2 { margin: 0 0 14px; font-size: 22px; display: flex; gap: 10px; align-items: center; }
.caixa h2 .n { background: var(--preto); color: var(--amarelo); width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 16px; }
.resumo { position: sticky; top: 90px; }
.resumo-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 14px; }
.resumo-item img { border: 1px solid var(--borda); border-radius: 8px; aspect-ratio: 1; object-fit: contain; }
.resumo-item small { display: block; color: var(--texto-2); }
.conta-linha { display: flex; justify-content: space-between; padding: 6px 0; font-size: 15px; }
.conta-linha.total { font-size: 20px; font-weight: 800; border-top: 2px solid var(--preto); margin-top: 6px; padding-top: 10px; }
.conta-linha.verde { color: var(--verde); font-weight: 600; }
.opcoes { display: grid; gap: 8px; }
.opcao { display: flex; gap: 12px; align-items: center; border: 2px solid var(--borda); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-size: 14px; }
.form label.opcao { display: flex; font-size: 14px; font-weight: 500; color: var(--texto); }
.opcao input { width: 18px; height: 18px; accent-color: var(--preto); flex: none; }
.opcao.ativa { border-color: var(--preto); box-shadow: 0 0 0 2px var(--amarelo); }
.opcao .direita { margin-left: auto; font-weight: 700; }
.opcao.desligada { opacity: .5; cursor: not-allowed; }
.erro-form { background: #fff1f0; border: 1px solid #ffccc7; color: #a8071a; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.ok-form { background: #f0fff4; border: 1px solid #b7ebc6; color: #1c6b3a; border-radius: 8px; padding: 10px 12px; font-size: 14px; }
.cupom { display: flex; gap: 8px; }
.cupom input { flex: 1; }
.confirmacao { text-align: center; padding: 60px 20px 80px; max-width: 640px; margin: 0 auto; }
.confirmacao .grande { font-size: 64px; }
.confirmacao h1 { font-size: 34px; margin: 10px 0; }
.etiqueta { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eee; }
.etiqueta.aguardando_pagamento { background: #fff4d6; color: #8a5a00; }
.etiqueta.pago, .etiqueta.em_separacao { background: #e6f4ff; color: #0958d9; }
.etiqueta.enviado { background: #f0e6ff; color: #531dab; }
.etiqueta.entregue { background: #e8f8ee; color: #1c6b3a; }
.etiqueta.cancelado { background: #fff1f0; color: #a8071a; }
.lista-pedidos { display: grid; gap: 10px; }
.lista-pedidos a { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 10px; }
.lista-pedidos a:hover { border-color: var(--preto); }
.abas-conta { display: flex; gap: 8px; margin-bottom: 16px; }
.abas-conta button { flex: 1; border: 2px solid var(--borda); background: #fff; border-radius: 8px; padding: 10px; font-weight: 700; }
.abas-conta button.ativa { border-color: var(--preto); background: var(--preto); color: var(--amarelo); }
.texto-politica { white-space: pre-wrap; line-height: 1.7; color: #333; }
.aviso-flutuante { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--preto); color: #fff; padding: 12px 18px; border-radius: 10px; z-index: 90; box-shadow: 0 10px 30px rgba(0,0,0,.3); font-size: 14px; }
.rodape-contato { font-size: 13px; line-height: 1.7; }
.indisponivel { text-decoration: line-through; opacity: .4; }
.banners-trilho > a { flex: 0 0 100%; display: block; }
.banners-trilho > a img { display: block; }
/* oferta na hora do pagamento */
.oferta-caixa { max-width: 520px; border-top: 6px solid var(--amarelo); }
.oferta-topo { display: inline-block; background: var(--preto); color: var(--amarelo); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; }
.oferta-titulo { font-size: 24px; line-height: 1.2; margin: 12px 34px 14px 0; }
.oferta-corpo { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.oferta-corpo img { width: 130px; aspect-ratio: 1; object-fit: contain; border: 1px solid var(--borda); border-radius: 10px; background: #fff; }
.oferta-nome { display: block; font-size: 16px; margin-bottom: 6px; }
.oferta-preco s { color: var(--texto-2); font-size: 15px; }
.oferta-preco span { font-size: 26px; font-weight: 800; color: var(--preto); }
.oferta-economia { display: inline-block; margin-top: 6px; background: #e8f6ee; color: var(--verde); font-weight: 700; font-size: 13px; padding: 4px 8px; border-radius: 6px; }
.oferta-texto { margin: 8px 0 0; font-size: 14px; color: #333; }
.oferta-cores button { width: 64px; }
.oferta-tamanhos { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.oferta-tamanhos button:disabled { opacity: .35; text-decoration: line-through; }
.oferta-botoes { display: grid; gap: 8px; margin-top: 16px; }
.selo-oferta { display: inline-block; background: var(--amarelo); color: var(--preto); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; text-transform: uppercase; }
@media (max-width: 480px) { .oferta-corpo { grid-template-columns: 96px 1fr; } .oferta-corpo img { width: 96px; } .oferta-titulo { font-size: 20px; } }
@media (max-width: 980px) {
  .checkout { grid-template-columns: 1fr; }
  .resumo { position: static; order: -1; }
}
@media (max-width: 560px) {
  .linha2, .linha3 { grid-template-columns: 1fr; }
}