/* COD FORMULARIO: formulário de pagamento na entrega (loja e prévia do painel) */

.cod { --cod-destaque: var(--cod-cor); margin-top: 12px; }
.cod-so .pdp-comprar { display: none; }
.cod-so.cod-qtd-pagina .pdp-comprar { display: flex; } .cod-so.cod-qtd-pagina [data-btn-comprar] { display: none; }
.cod-botao { width: 100%; min-height: 56px; display: grid; place-items: center; gap: 2px; padding: 10px 18px; border: 0; cursor: pointer;
  border-radius: var(--raio-botao, 10px); background: var(--cod-cor); color: var(--cod-cor-texto); font: 600 16.32px/1.2 var(--fonte-texto, system-ui, sans-serif); }
.cod-botao small { font-weight: 450; font-size: 14px; opacity: .9; }
.cod-botao:disabled { opacity: .5; cursor: not-allowed; animation: none; }
.cod-botao.anim-pulsar, .cod-enviar.anim-pulsar { animation: cod-pulsar 1.6s ease-in-out infinite; }
.cod-botao.anim-tremer, .cod-enviar.anim-tremer { animation: cod-tremer 3.2s infinite; }
@keyframes cod-pulsar { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
.cod-imagem { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: calc(var(--cod-raio, 12px) * .66); margin: 4px 0; }
@media (prefers-reduced-motion: reduce) { .cod-botao[class*="anim-"], .cod-enviar[class*="anim-"] { animation: none; } }
@keyframes cod-tremer { 0%, 88%, 100% { transform: translateX(0); } 90%, 94%, 98% { transform: translateX(-4px); } 92%, 96% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .cod-botao { animation: none !important; } }
.cod-fixo { display: none; }
@media (max-width: 760px) {
  .cod-fixo { display: grid; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; width: auto; box-shadow: 0 8px 30px rgb(0 0 0 / .25);
    transform: translateY(140%); transition: transform .25s; }
  .cod-fixo-barra { left:0; right:0; bottom:0; border-radius:0 !important; }
  .cod-fixo-cima { top:0; bottom:auto; transform:translateY(-140%); }
  .cod-fixo.on { transform: none; }
}
.cod-trava, .cod-trava body { overflow: hidden; }
.cod-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; }
.cod-modal[hidden] { display: none; }
.cod-modal .cod-fundo { display: block; position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
.cod-janela { position: relative; width: min(500px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--c-fundo, #fff); color: var(--c-texto, #111);
  border-radius: var(--cod-raio, 12px); box-shadow: 0 30px 80px rgb(0 0 0 / .35); padding: 18px; }
@media (max-width: 560px) { .cod-modal { padding: 0; place-items: end stretch; } .cod-janela { width: 100%; max-height: 94dvh; border-radius: var(--cod-raio, 12px) var(--cod-raio, 12px) 0 0; } }
.cod-embutido { border: 1px solid rgb(0 0 0 / .1); border-radius: var(--cod-raio, 12px); padding: 16px; background: var(--c-fundo, #fff); }
.cod-form { display: grid; gap: 12px; font-size: 16px; line-height: 1.45; letter-spacing: normal; }
.cod-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cod-topo b { font-size: 17.28px; }
.cod-x { border: 0; background: none; cursor: pointer; color: inherit; padding: 4px; display: grid; }
.cod-produto { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--cod-raio, 12px); background: rgb(0 0 0 / .035); }
.cod-produto img { width: 58px; height: 58px; object-fit: cover; border-radius: 8px; background: #fff; }
.cod-produto b { display: block; font-size: 15.2px; line-height: 1.3; }
.cod-variante { margin-top: 6px; max-width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid rgb(0 0 0 / .15); background: #fff; color: #111; font: inherit; font-size: 14.08px; }
.cod-preco { font-weight: 650; white-space: nowrap; }
.cod-ofertas { display: grid; gap: 8px; }
.cod-oferta { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1.5px solid rgb(0 0 0 / .12); border-radius: var(--cod-raio, 12px); }
.cod-oferta.on { border-color: var(--cod-destaque); background: color-mix(in srgb, var(--cod-destaque) 8%, transparent); }
.cod-oferta input { accent-color: var(--cod-destaque); }
.cod-oferta img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
.cod-oferta-txt { display: grid; gap: 3px; }
.cod-oferta-txt em { font-style: normal; font-size: 14px; font-weight: 650; justify-self: start; padding: 2px 8px; border-radius: 99px; background: var(--cod-destaque); color: var(--cod-cor-texto, #fff); }
.cod-oferta-preco { display: grid; justify-items: end; } .cod-oferta-preco s { opacity: .55; font-size: 14px; }
.cod-qtd { display: flex; justify-content: space-between; align-items: center; }
.cod-qtd div { display: flex; align-items: center; gap: 14px; border: 1px solid rgb(0 0 0 / .15); border-radius: 99px; padding: 4px; }
.cod-qtd button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgb(0 0 0 / .06); cursor: pointer; display: grid; place-items: center; color: inherit; }
.cod-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cod-campo { position: relative; grid-column: span 2; }
.cod-campo[data-campo="numero"], .cod-campo[data-campo="complemento"], .cod-campo[data-campo="cidade"], .cod-campo[data-campo="estado"], .cod-campo[data-campo="cep"] { grid-column: span 1; }
.cod-campo input, .cod-campo select, .cod-campo textarea { width: 100%; min-height: 46px; padding-block: 11px; padding-inline: 40px 12px; border: 1px solid rgb(0 0 0 / .16); border-radius: calc(var(--cod-raio, 12px) * .7);
  background: #fff; font: inherit; color: #111; outline: 0; appearance: none; }
.cod-campo select { background-image: linear-gradient(45deg, transparent 50%, #777 50%), linear-gradient(135deg, #777 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 32px; }
.cod-campo textarea { padding-inline-start: 12px; min-height: 64px; resize: vertical; }
.cod-campo input.com-ddi { padding-inline-start: 82px; }
.cod-campo input:focus, .cod-campo select:focus, .cod-campo textarea:focus { border-color: var(--cod-destaque); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cod-destaque) 18%, transparent); }
.cod-ic { position: absolute; inset-inline-start: 12px; top: 14px; color: #8a8a8a; pointer-events: none; display: grid; }
.cod-ddi { position: absolute; inset-inline-start: 38px; top: 13px; color: #555; font-size: 14.4px; padding-inline-end: 8px; border-inline-end: 1px solid #ddd; direction: ltr; pointer-events: none; }
.cod-campo.erro input, .cod-campo.erro select, .cod-campo.erro textarea { border-color: #c4161c; background: #fff6f6; }
.cod-msg { color: #b3121a; font-size: 14px; margin-top: 4px; }
.cod-erro-geral { color: #b3121a; background: #fff1f1; border-radius: 8px; padding: 10px 12px; font-size: 14.08px; }
.cod-caixa { display: flex; gap: 8px; align-items: flex-start; font-size: 14.4px; }
.cod-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cod-fretes { display: grid; gap: 6px; } .cod-fretes > span { font-weight: 600; font-size: 14.4px; }
.cod-frete { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1.5px solid rgb(0 0 0 / .12); border-radius: 10px; cursor: pointer; }
.cod-frete.on { border-color: var(--cod-destaque); }
.cod-frete small { display: block; opacity: .65; font-size: 14px; }
.cod-totais { display: grid; gap: 6px; padding: 12px; border-radius: 10px; background: rgb(0 0 0 / .035); font-size: 14.4px; }
.cod-totais > div { display: flex; justify-content: space-between; gap: 10px; }
.cod-desc { color: #13804b; }
.cod-total { font-weight: 700; font-size: 16.32px; padding-top: 6px; border-top: 1px solid rgb(0 0 0 / .08); }
.cod-enviar { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border: 0; cursor: pointer;
  border-radius: var(--raio-botao, 10px); background: var(--cod-destaque); color: var(--cod-cor-texto, #fff); font: 650 16px var(--fonte-texto, system-ui, sans-serif); }
.cod-enviar span small { display: block; font-weight: 450; font-size: 14px; opacity: .9; text-transform: none; letter-spacing: 0; }
.cod-enviar:disabled { opacity: .6; cursor: progress; }
.cod-nota { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 14px; opacity: .75; text-align: center; }
.cod-obrigado { text-align: center; padding: 48px 0 64px; }
.cod-obrigado .ct { display: grid; gap: 16px; justify-items: center; max-width: 560px; }
.cod-ok-icone { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #e7f6ec; color: #13804b; }
.cod-ok-texto { margin: 0; opacity: .8; }
.cod-ok-caixa { width: 100%; text-align: left; display: grid; gap: 12px; padding: 18px; border: 1px solid rgb(0 0 0 / .1); border-radius: 14px; }
.cod-ok-num { font-weight: 700; }
.cod-ok-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.cod-ok-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.cod-ok-item small { display: block; opacity: .65; font-size: 14px; }
.cod-ok-end { font-size: 14.4px; line-height: 1.5; opacity: .85; }

[dir=rtl] .cod-campo select { background-position: 18px 50%, 13px 50%; }
.cod-secao { grid-column: 1 / -1; text-align: center; font-weight: 700; font-size: 16.32px; padding: 4px 0; }
.cod-entrada { position: relative; }
.cod-rot-acima .cod-rotulo { display: block; font-weight: 600; font-size: 14.08px; margin-bottom: 5px; }
.cod-rot-ao_lado { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; grid-column: span 2 !important; }
.cod-rot-ao_lado .cod-rotulo { font-weight: 700; font-size: 14.4px; line-height: 1.2; }
.cod-rot-ao_lado .cod-msg { grid-column: 2; }
.cod-rotulo i { color: #c4161c; font-style: normal; }
.cod-icone-caixa .cod-ic { inset-inline-start: 1px; top: 1px; bottom: 1px; width: 42px; display: grid; place-items: center;
  background: #ececec; color: #222; border-start-start-radius: calc(var(--cod-raio, 12px) * .7); border-end-start-radius: calc(var(--cod-raio, 12px) * .7);
  border-inline-end: 1px solid rgb(0 0 0 / .14); }
.cod-icone-caixa .cod-campo input:not(.com-ddi), .cod-icone-caixa .cod-campo select { padding-inline-start: 54px; }
.cod-icone-caixa .cod-ddi { inset-inline-start: 50px; }
.cod-icone-caixa .cod-campo input.com-ddi { padding-inline-start: 96px; }
.cod-foto { position: relative; display: inline-block; }
.cod-foto em { position: absolute; top: -7px; inset-inline-end: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #555; color: #fff;
  font: 700 14px/20px var(--fonte-texto, system-ui, sans-serif); font-style: normal; text-align: center; }
.cod-titulo-centro .cod-topo { justify-content: center; position: relative; } .cod-titulo-centro .cod-x { position: absolute; inset-inline-end: 0; }
.cod-subtitulo { text-align: center; font-weight: 700; font-size: 23.2px; line-height: 1.2; text-transform: uppercase; }
.cod-titulo-centro .cod-topo b { text-align: center; }
.cod-embutido:has(.cod-sombra) { border-color: transparent; box-shadow: 0 10px 20px rgb(0 0 0 / .2); }
.cod-janela .cod-sombra, .cod-embutido .cod-sombra { box-shadow: none; }
.cod-form[style*="--cod-raio-botao"] .cod-enviar { border-radius: var(--cod-raio-botao); }
.cod-maiusculas .cod-enviar span { text-transform: uppercase; letter-spacing: .02em; }
.cod-linha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; position: relative; text-align: center; }
.cod-linha[hidden] { display: none; }
.cod-linha::before { content: ""; position: absolute; top: 22px; left: 16%; right: 16%; height: 2px; background: currentColor; opacity: .85; }
.cod-linha > div { position: relative; display: grid; justify-items: center; gap: 3px; }
.cod-linha-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-texto, #111); color: var(--c-fundo, #fff); margin-bottom: 4px; }
.cod-linha b { font-size: 14px; } .cod-linha small { font-size: 14px; opacity: .8; }
/* o tema da loja estiliza todo input; rádio e caixa do formulário ficam no tamanho natural */
.cod-form input[type=radio], .cod-form input[type=checkbox] { width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important;
  margin: 0; border: 0; background: none; box-shadow: none; appearance: auto; -webkit-appearance: auto; accent-color: var(--cod-destaque); flex: none; }
.cod-frete > span { display: grid; gap: 2px; min-width: 0; } .cod-frete > span b { font-weight: 600; }
.cod-fretes, .cod-totais, .cod-ofertas { position: relative; }
.cod-cupom { display: flex; gap: 8px; position: relative; flex-wrap: wrap; }
.cod-cupom input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid rgb(0 0 0 / .16); border-radius: calc(var(--cod-raio, 12px) * .7); font: inherit; color: #111; background: #fff; text-transform: uppercase; }
.cod-cupom button { min-height: 44px; padding: 0 16px; border: 0; border-radius: calc(var(--cod-raio, 12px) * .7); background: #222; color: #fff; font: inherit; font-weight: 600; cursor: pointer; display: grid; place-items: center; }
.cod-cupom .cod-msg { width: 100%; }

/* endereço automático */
.cod-campo[data-campo="endereco"] { position: relative; }
.cod-sugestoes { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; margin: 0; padding: 4px; background: #fff; color: #111; border: 1px solid rgb(0 0 0 / .12); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .16); max-height: 260px; overflow-y: auto; }
.cod-sugestoes li { padding: 9px 10px; border-radius: 7px; cursor: pointer; display: grid; gap: 1px; font-size: 14.72px; line-height: 1.3; }
.cod-sugestoes li:hover, .cod-sugestoes li:focus { background: rgb(0 0 0 / .05); outline: none; }
.cod-sugestoes small { color: #6b6b6b; font-size: 14px; }
.cod-opcoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cod-opcoes button { font: inherit; font-size: 14px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgb(0 0 0 / .15); background: transparent; color: inherit; cursor: pointer; }
.cod-opcoes button.on { border-color: currentColor; font-weight: 600; }

/* A escala do tema (inclusive html a 62.5%) não reduz o checkout. */
.cod-form, .cod-obrigado { font-size: 16px; line-height: 1.45; letter-spacing: normal; }
.cod-form *, .cod-modal, .cod-modal *, .cod-embutido { box-sizing: border-box; }
.cod-form .cod-rotulo { font-size: 14px; line-height: 1.4; letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; }
.cod-form .cod-campo input, .cod-form .cod-campo select, .cod-form .cod-campo textarea,
.cod-form .cod-cupom input, .cod-form .cod-variante { font-size: 16px; line-height: 1.4; }
.cod-form .cod-totais { font-size: 15px; letter-spacing: normal; }
.cod-form .cod-total { font-size: 17px; }
.cod-entrada, .cod-campo { min-width: 0; }
.cod-enviar { font-size: 16px; line-height: 1.4; padding: 12px; white-space: normal; }
@media (max-width: 560px) {
  .cod-rot-ao_lado { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .cod-rot-ao_lado .cod-msg { grid-column: 1; }
}

/* Resumo editável e adicional opt-in: dimensões legíveis no celular. */
.cod-remover { display:inline-grid; place-items:center; min-width:36px; min-height:36px; margin-left:6px; border:0; background:transparent; color:inherit; cursor:pointer; }
.cod-adicional { display:flex; gap:12px; align-items:center; padding:14px; border:3px solid; font-size:15px; line-height:1.4; cursor:pointer; }
.cod-adicional input { flex:0 0 20px; width:20px; height:20px; accent-color:#0275ff; }
.cod-adicional small { display:block; margin-top:4px; }
.cod-produto small { display:block; font-size:14px; }
.cod-adicional-foto { width:64px; height:64px; object-fit:contain; flex:0 0 64px; border-radius:6px; }

/* Isolamento do checkout na camada superior, inclusive em temas com transform. */
dialog.cod-modal { margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: #111; }
dialog.cod-modal::backdrop { background: transparent; }
.cod-janela { overscroll-behavior: contain; animation: cod-entrada .25s ease-out; }
.cod-topo > b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cod-topo > .cod-x { position: static; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; place-items: center; border-radius: 50%; background: #fff; color: #111; border: 1px solid #ddd; }
.cod-x svg { display: block; width: 20px; height: 20px; }
.cod-x:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.cod-entrega { padding: 12px; border-radius: 8px; background: #eef7ee; color: #183e20; font-size: 14px; line-height: 1.5; }
@keyframes cod-entrada { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) { dialog.cod-modal { place-items: stretch; } .cod-modal .cod-janela { max-height: 100dvh; height: 100%; border-radius: 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cod-janela { animation: none; } }

.cod-coluna-unica .cod-campo { grid-column: 1 / -1; }
/* página de obrigado: prazo de entrega e avisos */
.cod-ob-chegada { width: 100%; display: grid; gap: 4px; justify-items: center; padding: 20px 18px 18px; border-radius: 14px; background: #f3f8f4; border: 1px solid #d6eadb; }
.cod-ob-chegada > small { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.cod-ob-chegada > strong { font-size: 28px; line-height: 1.15; }
.cod-ob-chegada > p { margin: 0; opacity: .8; }
.cod-ob-linha { width: 100%; margin-top: 14px; }
.cod-ob-avisos { width: 100%; display: grid; gap: 8px; text-align: left; }
.cod-ob-avisos > div { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(0 0 0 / .1); font-size: 15px; }
.cod-ob-avisos > div > span:first-child { flex: none; display: grid; place-items: center; }
.cod-obrigado[dir="rtl"] .cod-ob-avisos, .cod-obrigado[dir="rtl"] .cod-ok-caixa { text-align: right; }
@media (max-width: 520px) { .cod-ob-chegada > strong { font-size: 24px; } .cod-ob-linha small { font-size: 12.5px; } }