/* ==========================================================================
   Funil de compra e area do cliente
   ========================================================================== */

:root {
  --azul: #1274e0;
  --azul-hover: #0f63c0;
  --escuro: #4a5568;
  --cinza-fundo: #f0f1f3;
}

/* ------------------------------------------------------- modal add */
.modal-add {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 110; width: min(94vw, 620px);
  background: #fff; border-radius: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
  padding: 46px 32px 34px; text-align: center;
  animation: modalEntra .28s cubic-bezier(.2, 1.1, .35, 1);
}
.modal-add[hidden] { display: none; }
@keyframes modalEntra { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } }
.modal-add .check-ok { margin: -78px auto 18px; width: 58px; }
.modal-add h2 { color: var(--acao); font-size: 21px; margin-bottom: 12px; }
.modal-add p { color: var(--texto2); margin-bottom: 26px; }
.modal-botoes { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.modal-botoes > * { flex: 1 1 220px; max-width: 260px; }
.fechar-modal {
  position: absolute; top: 12px; right: 16px; background: none; border: 0;
  font-size: 28px; line-height: 1; color: #999;
}
.fechar-modal:hover { color: var(--texto); }

/* --------------------------------------------------------- botoes */
.btn-verde, .btn-azul, .btn-escuro, .btn-contorno {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border: 1px solid transparent; border-radius: 5px;
  font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}
.btn-verde { background: var(--acao); color: #fff; }
.btn-verde:hover { background: var(--acao-hover); }
.btn-azul { background: var(--azul); color: #fff; }
.btn-azul:hover { background: var(--azul-hover); }
.btn-escuro { background: var(--escuro); color: #fff; }
.btn-escuro:hover { background: #3b4657; }
.btn-contorno { background: #fff; color: var(--texto); border-color: var(--borda); }
.btn-contorno:hover { border-color: var(--verde); color: var(--verde); }
.btn-verde:active, .btn-azul:active, .btn-escuro:active { transform: scale(.985); }
.btn-verde[disabled], .btn-azul[disabled] { background: #c3c8ce; cursor: not-allowed; }
.grande { width: 100%; padding: 15px 24px; }
.largo { display: flex; max-width: 620px; margin: 26px auto 60px; }

button.link, a.link {
  background: none; border: 0; padding: 0; color: var(--azul);
  font-size: 13px; cursor: pointer; text-align: left;
}
button.link:hover, a.link:hover { text-decoration: underline; }
button.link.vermelho { color: #c62828; }

/* =================================================== layout checkout */
.corpo-checkout { background: var(--cinza-fundo); min-height: 100vh; display: flex; flex-direction: column; }
.main-checkout { flex: 1; padding: 26px 20px 50px; }

.cab-checkout { background: #fff; border-bottom: 1px solid var(--borda); }
.cab-chk-int {
  max-width: 1400px; margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 26px;
}
.cab-checkout .logo-chk img { width: 72px; height: 72px; object-fit: contain; }

.selo-seguro { display: inline-flex; align-items: center; flex: none; transition: opacity .2s; }
.selo-seguro:hover { opacity: .85; }
.selo-seguro img { width: 180px; height: auto; display: block; }
@media (max-width: 760px) { .selo-seguro img { width: 140px; } }

.passos-chk {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px;
}
.passo-chk {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 13px; color: #aab0b8;
  padding: 4px 8px; border-radius: 999px;
}
.passo-chk em {
  font-style: normal; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: #e6e8eb; color: #99a0a8;
}
.passo-chk.atual { color: var(--texto); }
.passo-chk.atual em { background: var(--azul); color: #fff; }
.passo-chk.feito { color: #1e7e46; background: #e8f6ee; }
.passo-chk.feito em { background: #1e9e4a; color: #fff; }
.passo-sep { color: #c7ccd2; font-size: 15px; }

.rodape-checkout { background: #fff; border-top: 1px solid var(--borda); padding: 30px 0 22px; text-align: center; }
.rodape-checkout h3 { font-size: 14px; margin-bottom: 5px; }
.rodape-checkout h3.mt { margin-top: 24px; }
.rodape-checkout .horario { font-size: 13px; color: var(--texto2); margin: 0 0 16px; }
.rodape-checkout .contatos { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; }
.rodape-checkout .contatos a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--texto2);
}
.rodape-checkout .contatos a:hover { color: var(--verde); }
.bandeiras-chk { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.bandeiras-chk img { width: 46px; height: 30px; object-fit: contain; }
.rodape-checkout .cnpj { font-size: 12px; color: var(--texto2); margin: 22px 0 2px; }
.rodape-checkout .direitos { font-size: 12px; color: var(--texto2); margin: 0; }

/* ==================================================== /checkout/cart */
.chk-grade {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 400px; gap: 30px; align-items: start;
}
.chk-titulo { display: flex; align-items: center; gap: 10px; font-size: 19px; margin-bottom: 16px; color: var(--texto); }
.chk-resumo h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; margin-bottom: 18px; }

.cart-caixa { background: #fff; border-radius: 8px; padding: 6px 22px 10px; }
.cart-cabecalho {
  display: grid; grid-template-columns: 1fr 190px 150px; gap: 14px;
  padding: 14px 0 10px; font-size: 13px; color: var(--texto2);
}
.cart-cabecalho .c { text-align: center; }

.cart-linha {
  display: grid; grid-template-columns: 1fr 190px 150px; gap: 14px;
  align-items: center; padding: 16px 0; border-top: 1px solid var(--borda);
}
.cart-prod { display: flex; gap: 16px; align-items: center; }
.cart-prod img { width: 86px; height: 86px; object-fit: contain; border-radius: 4px; }
.cart-prod .rot { display: block; font-size: 12px; color: var(--texto2); margin-bottom: 3px; }
.cart-prod a { font-size: 13.5px; line-height: 1.45; }
.cart-prod a:hover { color: var(--verde); }
.cart-prod .tipo { font-size: 13px; margin: 5px 0 0; }

.cart-qtd { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cart-qtd .rot { font-size: 12px; color: var(--texto2); }
.ctrl-qtd { display: flex; align-items: center; border: 1px solid var(--borda); border-radius: 4px; overflow: hidden; }
.ctrl-qtd button { width: 34px; height: 34px; background: var(--fundo2); border: 0; font-size: 16px; color: var(--texto2); }
.ctrl-qtd button:hover { background: #ececec; }
.ctrl-qtd span { min-width: 42px; text-align: center; font-weight: 600; }
.lixeira { background: none; border: 0; color: #d33; padding: 3px; }
.lixeira:hover { color: #a00; }

.cart-valor { text-align: center; }
.cart-valor .rot { display: block; font-size: 12px; color: var(--texto2); margin-bottom: 3px; }
.cart-valor strong { font-size: 17px; color: var(--acao); }
.cart-valor small { display: block; font-size: 12px; color: var(--texto2); }

.cart-vazio { background: #fff; border-radius: 8px; padding: 46px 20px; text-align: center; color: var(--texto2); }
.chk-col-principal > .btn-contorno { margin-top: 18px; }

.chk-resumo { background: #fff; border-radius: 8px; padding: 24px; position: sticky; top: 20px; }
.linha-resumo { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; font-size: 14px; }
.linha-resumo.total { border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 15px; font-size: 16px; }
.linha-resumo.total strong { color: var(--acao); font-size: 21px; }
.linha-resumo.total small { display: block; font-size: 12px; color: var(--texto2); text-align: right; }

.bloco-frete { border-top: 1px solid var(--borda); padding-top: 14px; }
.rotulo-frete { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; margin-bottom: 9px; }
.rotulo-frete a { color: var(--azul); font-size: 12.5px; }
.rotulo-frete a:hover { text-decoration: underline; }
.linha-cep { display: flex; gap: 8px; }
.linha-cep input, .form-endereco input[data-cep-onepage] {
  flex: 1; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 5px; font-size: 14px;
}
.linha-cep input:focus { outline: 0; border-color: var(--azul); }
.linha-cep button {
  padding: 0 22px; background: #fff; border: 1px solid var(--borda);
  border-radius: 5px; font-weight: 600; font-size: 13px;
}
.linha-cep button:hover { border-color: var(--verde); color: var(--verde); }

.bloco-cupom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
  border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 15px; font-size: 14px;
}
.campo-cupom { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.campo-cupom input { flex: 1; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 5px; }
.campo-cupom button { padding: 0 16px; background: var(--fundo2); border: 1px solid var(--borda); border-radius: 5px; }

.aviso-total {
  background: var(--fundo2); border-radius: 5px; padding: 20px;
  text-align: center; font-size: 13px; color: var(--texto2); margin: 16px 0;
}
.opcoes-frete { margin-top: 10px; }
.opcao-frete {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 11px 13px; border: 1px solid var(--borda); border-radius: 5px;
  margin-bottom: 7px; font-size: 13px; cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.opcao-frete:hover, .opcao-frete.sel { border-color: var(--acao); background: #f4fbf6; }
.opcao-frete .of-nome { font-weight: 600; }
.opcao-frete .of-prazo { color: var(--texto2); font-size: 12px; }
.opcao-frete .of-valor { font-weight: 700; color: var(--acao); white-space: nowrap; }
.dica { font-size: 12.5px; color: var(--texto2); margin: 6px 0; }
.erro-chk { color: #c62828; font-size: 13px; margin: 8px 0; }

/* ================================================ /checkout/identify */
.caixa-identify {
  max-width: 690px; margin: 30px auto; background: #fff;
  border-radius: 8px; overflow: hidden;
}
.caixa-identify h1 {
  text-align: center; font-size: 22px; padding: 28px 20px;
  border-bottom: 1px solid var(--borda);
}
.identify-corpo { padding: 30px 40px 40px; }
.chk-sub { text-align: center; color: var(--texto2); font-size: 14px; margin-bottom: 22px; }
.form-identify { max-width: 480px; margin: 0 auto; }
.campo-icone {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--borda); border-radius: 6px; padding: 0 14px;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo-icone:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 116, 224, .1); }
.campo-icone svg { color: var(--azul); flex: none; }
.campo-icone input { flex: 1; border: 0; outline: 0; padding: 15px 0; font-size: 14.5px; background: none; }
.form-identify .btn-verde { margin-top: 18px; }
.legal { font-size: 12px; color: var(--texto2); text-align: center; margin-top: 14px; line-height: 1.7; }
.legal a { color: var(--azul); }
.link-abaixo { display: block; text-align: center; margin-top: 14px; font-size: 13px; color: var(--azul); }

/* ================================================= /checkout/onepage */
.onepage {
  max-width: 1500px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 380px; gap: 22px; align-items: start;
}
.op-col { display: grid; gap: 18px; }

.etapa-card { background: #fff; border-radius: 8px; padding: 22px; }
.etapa-card header { display: flex; align-items: flex-start; gap: 13px; }
.etapa-card header h2 { font-size: 17px; margin-bottom: 3px; }
.etapa-card header p { font-size: 12.5px; color: var(--texto2); margin: 0; line-height: 1.5; }
.etapa-card .bolha {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: #dfe2e6; color: #8b929a;
}
.etapa-card.ativa .bolha { background: var(--azul); color: #fff; }
.etapa-card.concluida .bolha { background: #1e9e4a; color: #fff; }
.etapa-card.concluida header h2 { color: #1e7e46; }
.etapa-card.bloqueada { opacity: .55; pointer-events: none; }
.etapa-card.bloqueada .etapa-corpo { display: none; }
.etapa-card.ativa .etapa-corpo { display: block; }
.etapa-card:not(.ativa) .etapa-corpo:not([hidden]) { display: block; }
.etapa-corpo { margin-top: 18px; }
.editar-etapa { margin-left: auto; flex: none; }

.resumo-etapa { margin-top: 14px; font-size: 13.5px; line-height: 1.9; }
.resumo-etapa p { margin: 0; }
.resumo-etapa span { color: var(--texto2); }
.resumo-etapa .entrega-resumo { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borda); }

.abas-conta { display: flex; border-radius: 5px; overflow: hidden; margin-bottom: 20px; }
.aba-conta {
  flex: 1; padding: 13px 10px; background: #fff; border: 1px solid var(--borda);
  font-family: 'Montserrat', sans-serif; font-size: 13.5px; color: var(--texto2);
}
.aba-conta.ativa { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }

.form-dados, .form-endereco { display: grid; gap: 14px; }
.form-dados label, .form-endereco label {
  display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--texto);
}
.form-dados input, .form-dados select,
.form-endereco input, .form-conta input, .form-conta select {
  padding: 12px 14px; border: 1px solid var(--borda); border-radius: 5px;
  font-size: 14px; font-family: inherit; color: var(--texto); background: #fff;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.form-dados input:focus, .form-dados select:focus,
.form-endereco input:focus, .form-conta input:focus {
  outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(18, 116, 224, .1);
}
.form-dados input:required:invalid:not(:placeholder-shown) { border-color: #e57373; }
.rotulo-linha { display: flex; justify-content: space-between; align-items: center; }
.campo-senha { position: relative; display: block; }
.campo-senha input { width: 100%; padding-right: 46px; }
.olho {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--azul); padding: 4px;
}
label.check { flex-direction: row; align-items: center; gap: 8px; }

.campos-endereco { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campos-endereco .c2 { grid-column: span 2; }

.lista-enderecos { display: grid; gap: 10px; margin-bottom: 12px; }
.cartao-endereco {
  position: relative; display: grid; grid-template-columns: 22px 1fr auto;
  gap: 12px; align-items: start; padding: 14px 44px 14px 14px;
  border: 1px solid var(--borda); border-radius: 6px; cursor: pointer; font-size: 13px;
}
.cartao-endereco.sel { border-color: var(--azul); }
.cartao-endereco input { position: absolute; opacity: 0; }
.cartao-endereco .marca {
  width: 17px; height: 17px; border: 2px solid #c4c9cf; border-radius: 50%; margin-top: 2px;
}
.cartao-endereco.sel .marca { border-color: var(--azul); box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--azul); }
.end-dados { display: flex; flex-direction: column; gap: 2px; line-height: 1.55; }
.cartao-endereco .editar { align-self: start; }
.cartao-endereco .lixeira { position: absolute; right: 12px; bottom: 12px; }

.bloco-entrega { margin-top: 20px; border-top: 1px solid var(--borda); padding-top: 16px; }
.bloco-entrega h3 { font-size: 15px; margin-bottom: 10px; }

.metodos-pgto { display: grid; gap: 2px; }
.metodo-pgto {
  position: relative; display: grid; grid-template-columns: 22px 26px 1fr auto;
  gap: 12px; align-items: center; padding: 15px 4px;
  border-bottom: 1px solid var(--borda); cursor: pointer; font-size: 14px;
}
.metodo-pgto input { position: absolute; opacity: 0; }
.metodo-pgto .marca { width: 17px; height: 17px; border: 2px solid #c4c9cf; border-radius: 50%; }
.metodo-pgto.sel .marca { border-color: var(--texto); box-shadow: inset 0 0 0 3.5px #fff, inset 0 0 0 9px var(--texto); }
.metodo-pgto .nome { font-weight: 500; }
.metodo-pgto strong { color: var(--texto); }

.painel-pix { padding: 20px 4px 4px; font-size: 13px; color: var(--texto2); line-height: 1.65; }
.painel-pix p { margin: 0 0 12px; }
.pix-valor { font-size: 14px; color: var(--texto); }
.pix-valor strong { color: var(--acao); font-size: 16px; }
.pix-destaque { color: var(--texto) !important; font-weight: 600; font-size: 14px !important; }
.pix-importante { color: #e53935 !important; font-weight: 600; margin-bottom: 4px !important; }
.painel-pix .btn-escuro { margin-top: 10px; }

.op-resumo { background: #fff; border-radius: 8px; padding: 24px; position: sticky; top: 20px; }
.op-resumo h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--azul); margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.ver-produtos { margin-top: -4px; }
.lista-produtos-resumo { margin: 12px 0; max-height: 260px; overflow-y: auto; }
.it-resumo {
  display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 12.5px;
}
.it-resumo img { width: 46px; height: 46px; object-fit: contain; }
.linha-resumo.entrega small { display: block; font-size: 12px; color: var(--texto2); }
.caixa-total {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--fundo2); border-radius: 6px; padding: 16px; margin-top: 14px;
}
.caixa-total > span { font-weight: 700; }
.caixa-total div { text-align: right; }
.caixa-total strong { color: var(--acao); font-size: 21px; display: block; }
.caixa-total small { font-size: 12px; color: var(--texto2); }

/* ==================================================== /checkout/done */
.faixa-sucesso {
  max-width: 1400px; margin: 0 auto 18px; background: #fff; border-radius: 8px;
  padding: 22px; text-align: center; font-family: 'Montserrat', sans-serif;
  font-size: 19px; font-weight: 600; color: #1e7e46;
}
.faixa-sucesso span { font-size: 22px; }
.caixa-done { max-width: 1400px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 30px; }
.caixa-done h1 { text-align: center; font-size: 20px; color: var(--azul); margin-bottom: 26px; }
.done-grade {
  display: grid; grid-template-columns: 360px 1fr; gap: 22px;
  background: var(--cinza-fundo); border-radius: 8px; padding: 22px;
}
.card-pix { background: #fff; border-radius: 8px; padding: 24px; text-align: center; }
.pix-topo { display: flex; align-items: center; justify-content: center; gap: 9px; }
.pix-topo strong { font-size: 24px; color: #1e7e46; font-family: 'Montserrat', sans-serif; }
.pix-status { font-size: 13px; color: var(--texto2); margin: 4px 0 18px; }
.pix-status.pago { color: var(--acao); font-weight: 600; }
.qr-pix { margin: 0 auto 18px; border-radius: 4px; }
.rot-total { font-size: 13px; color: var(--texto2); margin: 0; }
.val-total { font-size: 25px; font-weight: 700; color: #1e7e46; margin: 2px 0 16px; font-family: 'Montserrat', sans-serif; }
.codigo-pix {
  width: 100%; padding: 11px; border: 1px solid var(--borda); border-radius: 5px;
  background: var(--fundo2); font-family: monospace; font-size: 11.5px;
  color: var(--texto2); margin-bottom: 10px; text-overflow: ellipsis;
}
.aviso-demo-min { font-size: 12px; color: #b26a00; margin-top: 10px; }

.done-lado { display: grid; gap: 14px; align-content: start; }
.card-info { background: #fff; border-radius: 8px; padding: 20px 22px; }
.card-info h2 { font-size: 15px; color: #1e7e46; margin-bottom: 10px; }
.card-info ol { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.9; }
.card-info p { font-size: 13.5px; line-height: 1.7; margin: 0; color: var(--texto); }
.detalhes-pedido { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.detalhes-pedido .rot {
  display: flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 600; color: #1e7e46; margin-bottom: 5px;
}
.detalhes-pedido .val { font-size: 13px; color: var(--texto2); }
.aguardando-pix {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 22px; font-size: 13px; color: var(--texto2);
}
.aguardando-pix .pago { color: var(--acao); }
.aguardando-pix .cancelado { color: #c62828; }

/* ======================================================== MINHA CONTA */
.conta-grade { display: grid; grid-template-columns: 300px 1fr; gap: 26px; align-items: start; padding: 26px 24px 70px; }

.conta-lateral { display: grid; gap: 14px; }
.conta-bemvindo {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 18px;
}
.conta-bemvindo > svg { color: var(--texto2); flex: none; }
.conta-bemvindo span { display: block; font-size: 13px; color: var(--texto2); }
.conta-bemvindo strong { display: block; font-size: 14.5px; margin: 2px 0 6px; }
.conta-bemvindo .sair { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #d33; }
.conta-bemvindo .sair:hover { text-decoration: underline; }

.conta-abas { display: grid; gap: 12px; }
.aba-conta-item {
  position: relative; display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 16px 18px;
  transition: all var(--transicao);
}
.aba-conta-item:hover { border-color: var(--verde); transform: translateX(2px); }
.aba-conta-item strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 14.5px; color: var(--verde); margin-bottom: 3px; }
.aba-conta-item small { font-size: 12.5px; color: var(--texto2); line-height: 1.45; display: block; }
.aba-conta-item svg { color: var(--texto2); flex: none; margin-top: 2px; }
.aba-conta-item.ativa { background: var(--verde); border-color: var(--verde); }
.aba-conta-item.ativa strong, .aba-conta-item.ativa small, .aba-conta-item.ativa svg { color: #fff; }
.aba-conta-item.ativa::after {
  content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-left-color: var(--verde); border-right: 0;
}

.conta-conteudo { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: 26px; min-height: 420px; }
.conta-titulo { display: flex; align-items: center; gap: 11px; font-size: 20px; color: var(--verde); margin-bottom: 22px; }
.conta-vazio { text-align: center; padding: 50px 20px; color: var(--texto2); }
.conta-vazio .btn-verde { display: inline-flex; margin-top: 16px; width: auto; }
.voltar { display: inline-block; font-size: 13px; color: var(--azul); margin-bottom: 12px; }
.sub { font-size: 16px; margin: 30px 0 14px; padding-top: 22px; border-top: 1px solid var(--borda); }

.alerta { padding: 12px 16px; border-radius: 5px; font-size: 13.5px; margin-bottom: 18px; }
.alerta.ok { background: #e8f6ee; color: #1e7e46; }
.alerta.erro { background: #fdecea; color: #b3261e; }

/* cartao de pedido */
.cartao-pedido { border: 1px solid var(--borda); border-left: 4px solid #f5b301; border-radius: 6px; margin-bottom: 20px; overflow: hidden; }
.cartao-pedido.ok { border-left-color: var(--acao); }
.cartao-pedido.ruim { border-left-color: #c62828; }
.cp-topo { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.cp-status { display: inline-flex; align-items: center; gap: 8px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; color: #1e7e46; }
.cp-prazo { font-size: 13px; color: var(--texto2); }
.cp-prazo strong { color: var(--azul); }
.cp-corpo { display: grid; grid-template-columns: 1fr 260px; gap: 20px; padding: 20px; }
.cp-item { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.cp-item img { width: 96px; height: 96px; object-fit: contain; }
.cp-item a { font-size: 14px; }
.cp-item a:hover { color: var(--verde); }
.cp-item small { display: block; font-size: 12.5px; color: var(--texto2); margin-top: 5px; }
.cp-meta { margin: 0; font-size: 13px; }
.cp-meta dt { font-weight: 600; margin-top: 10px; }
.cp-meta dd { margin: 2px 0 0; color: var(--texto2); }
.cp-rodape { display: grid; grid-template-columns: 1fr 260px; gap: 20px; background: var(--fundo2); padding: 20px; }
.cp-status-linha h3 { font-size: 15px; color: var(--azul); margin-bottom: 14px; }
.trilha { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.trilha li {
  flex: 1 1 96px; text-align: center; padding: 12px 6px; border-radius: 6px;
  border: 1px solid var(--borda); background: #fff; color: #b8bec5;
}
.trilha li svg { margin: 0 auto 7px; display: block; }
.trilha li span { display: block; font-size: 11.5px; line-height: 1.35; }
.trilha li time { display: block; font-size: 11px; margin-top: 6px; color: var(--texto2); }
.trilha li.feito { color: var(--azul); }
.trilha li.atual { border-color: var(--acao); color: var(--acao); }
.cp-acoes { display: grid; gap: 10px; align-content: start; }
.cp-acoes .rot { font-size: 13px; color: var(--texto2); }
.cp-acoes .valor { font-size: 21px; color: var(--acao); font-family: 'Montserrat', sans-serif; }

.det-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.det-card { border: 1px solid var(--borda); border-radius: 6px; padding: 20px; }
.det-card h2 { font-size: 16px; margin-bottom: 14px; }
.det-card h2.mt { margin-top: 24px; }
.det-itens { list-style: none; margin: 0 0 14px; padding: 0; }
.det-itens li { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 13px; }
.det-itens img { width: 64px; height: 64px; object-fit: contain; }
.det-itens small { display: block; color: var(--texto2); font-size: 12px; }
.det-itens .q { color: var(--texto2); }
.det-itens .v { font-weight: 700; }
.det-card .prazo { font-size: 13px; color: var(--texto2); margin-top: 10px; }
.det-card .btn-verde { margin-top: 14px; width: auto; display: inline-flex; }

.form-conta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-conta label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.form-conta label.check { flex-direction: row; align-items: center; }
.form-conta .c2 { grid-column: span 2; }
.form-conta fieldset { border: 1px solid var(--borda); border-radius: 6px; padding: 16px 18px 20px; }
.form-conta legend { font-size: 13px; color: var(--texto2); padding: 0 6px; }
.form-conta .dois { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-conta input:disabled { background: var(--fundo2); color: var(--texto2); }

.grade-enderecos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cartao-end { position: relative; border: 1px solid var(--borda); border-radius: 6px; padding: 18px; font-size: 13px; }
.cartao-end.principal { border-color: var(--verde); }
.cartao-end strong { display: block; margin-bottom: 6px; }
.cartao-end p { margin: 2px 0; color: var(--texto2); }
.tag-principal { position: absolute; top: -9px; right: 12px; background: var(--verde); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 10px; }
.acoes-end { display: flex; gap: 14px; margin-top: 12px; }

.card-atendimento { border: 1px solid var(--borda); border-radius: 6px; padding: 22px; }
.card-atendimento ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.card-atendimento a { color: var(--azul); }

.caixa-login { max-width: 420px; margin: 50px auto 80px; border: 1px solid var(--borda); border-radius: 8px; padding: 32px; }
.caixa-login h1 { font-size: 21px; text-align: center; margin-bottom: 22px; }
.caixa-login form { display: grid; gap: 14px; }
.caixa-login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.caixa-login input { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 5px; font-size: 14px; }
.caixa-login .alt { text-align: center; margin-top: 18px; font-size: 13px; color: var(--texto2); }
.caixa-login .alt a { color: var(--azul); }

/* menu de conta no header */
.menu-conta { position: relative; }
.dropdown-conta {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 230px;
  background: #fff; border: 1px solid var(--borda); border-radius: 6px;
  box-shadow: var(--sombra-forte); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.menu-conta.aberto .dropdown-conta, .menu-conta:hover .dropdown-conta { opacity: 1; visibility: visible; transform: none; }
.dropdown-conta a {
  display: flex; align-items: center; gap: 11px; padding: 13px 18px;
  font-size: 13.5px; border-bottom: 1px solid var(--borda);
  transition: background var(--transicao);
}
.dropdown-conta a:last-child { border-bottom: 0; }
.dropdown-conta a:hover { background: var(--fundo2); color: var(--verde); }

/* botao favorito na pagina de produto */
.btn-favorito {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  background: none; border: 0; color: var(--texto2); font-size: 13.5px; padding: 4px 0;
}
.btn-favorito:hover, .btn-favorito.ativo { color: #e0245e; }

/* ------------------------------------------------------ responsivo */
@media (max-width: 1250px) {
  .onepage { grid-template-columns: 1fr 1fr; }
  .op-resumo { grid-column: span 2; position: static; }
}
@media (max-width: 1000px) {
  .chk-grade { grid-template-columns: 1fr; }
  .chk-resumo { position: static; }
  .onepage { grid-template-columns: 1fr; }
  .op-resumo { grid-column: auto; }
  .done-grade { grid-template-columns: 1fr; }
  .detalhes-pedido { grid-template-columns: 1fr 1fr; }
  .conta-grade { grid-template-columns: 1fr; }
  .aba-conta-item.ativa::after { display: none; }
  .cp-corpo, .cp-rodape { grid-template-columns: 1fr; }
  .det-grade { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cab-chk-int { flex-wrap: wrap; gap: 12px; padding: 10px 14px; }
  .cab-checkout .logo-chk img { width: 52px; height: 52px; }
  .passos-chk { margin-left: 0; width: 100%; justify-content: center; padding: 5px 8px; }
  .passo-chk { font-size: 11.5px; padding: 3px 5px; }
  .cart-cabecalho { display: none; }
  .cart-linha { grid-template-columns: 1fr; gap: 12px; }
  .cart-prod img { width: 70px; height: 70px; }
  .cart-qtd { flex-direction: row; justify-content: flex-start; gap: 14px; }
  .cart-valor { text-align: left; }
  .campos-endereco, .form-conta, .form-conta .dois { grid-template-columns: 1fr; }
  .form-conta .c2 { grid-column: auto; }
  .identify-corpo { padding: 24px 18px 30px; }
  .detalhes-pedido { grid-template-columns: 1fr; }
  .caixa-done { padding: 18px; }
  .done-grade { padding: 14px; }
  .modal-add { padding: 44px 20px 26px; }
  .modal-botoes > * { flex-basis: 100%; max-width: none; }
  .trilha li { flex-basis: calc(50% - 5px); }
}

.admin-sub { font-size: 17px; margin: 34px 0 14px; }
.admin-sub:first-of-type { margin-top: 8px; }
.tabela .cinza { color: #999; }
.tabela code { font-size: 12px; }