:root {
  --hair: #e9ebee; /* linha sutil entre secoes (checkout plano) */
  --green: #1db954;
  --green-dark: #169c46;
  --green-soft: #e8f8ee;
  --dark: #100F0F;
  --dark-2: #100F0F;
  --text: #1b1b1b;
  --muted: #6b6f76;
  --line: #e4e6ea;
  --bg: #f4f5f7;
  --card: #ffffff;
  --danger: #d93025;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; /* folga ao rolar ate um campo */ }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
}
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.ico { width: 18px; height: 18px; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* Header */
.topbar { background: var(--dark); color: #fff; }
.topbar__inner { position: relative; display: flex; align-items: center; justify-content: center; height: 76px; } /* barra mais encorpada (era 60px) */

/* Selos de confiança: UM por vez com fade (checkout.js) - abaixo das avaliações */
.seals { margin-top: 14px; padding: 18px 16px 12px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.seals__list { list-style: none; margin: 0; padding: 0; display: grid; }
.seals__item { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.seals__item.is-active { opacity: 1; visibility: visible; }
.seals__item svg { width: 26px; height: 26px; margin-bottom: 3px; fill: none; stroke: var(--green-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.seals__item b { font-size: 13px; font-weight: 700; color: var(--text); }
.seals__item span { max-width: 280px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.seals__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.seals__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #d3d7dd; transition: width .3s, background .3s; }
.seals__dot.is-active { width: 16px; background: var(--green); }
@media (prefers-reduced-motion: reduce) { .seals__item, .seals__dot { transition: none; } }

.logo { display: flex; align-items: center; flex: none; }
.logo img { display: block; height: 36px; width: auto; }
/* Selo travado no canto direito; a logo fica centralizada na barra inteira */
.secure { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); display: flex; align-items: center; color: #fff; }
.secure__svg { display: block; width: 70px; max-width: 70px; height: auto; opacity: .85; } /* secundario a logo */


/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 14px 20px; font-weight: 600; font-size: 15px; text-decoration: none; transition: background .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-dark); }
.btn--green:disabled { opacity: .6; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--ghost { background: #fff; color: var(--dark); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: #c3c7cd; }
.btn--lg { padding: 17px 20px; font-size: 16px; text-transform: uppercase; letter-spacing: .3px; }
.link { background: none; border: 0; color: var(--green-dark); font-weight: 500; padding: 0; text-decoration: underline; }

/* Layout: coluna unica centralizada (checkout de etapa unica) */
.main { padding-bottom: 40px; background: #fff; } /* checkout plano: secoes direto no branco */
.main__body { max-width: 640px; padding-top: 16px; }
.steps { display: flex; flex-direction: column; min-width: 0; }
.steps > * + * { margin-top: 14px; }
.steps > .step + .step, .steps > .reveal + .step, .steps > .step + .reveal, .steps > .reveal + .reveal { margin-top: 0; }

/* Revelacao progressiva: altura (0fr -> 1fr) + opacidade. Fechado = sem altura, fora do Tab (visibility).
   O espaco entre cards fica DENTRO do bloco, pra nao sobrar vao enquanto ele esta fechado. */
.reveal { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .45s ease, opacity .3s ease, visibility 0s linear .45s; }
.reveal.is-shown { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .45s ease, opacity .4s ease .08s, visibility 0s; }
.reveal__inner { min-height: 0; overflow: hidden; }
.steps > .reveal { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-shown { transition: none; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }

/* Avaliacoes */
.reviews { padding: 12px; }
.reviews__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.reviews__score { font-size: 26px; line-height: 1; font-weight: 800; color: var(--dark); letter-spacing: -.5px; }
.reviews__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; flex: 1; min-width: 0; }
.reviews__meta .stars svg { width: 12px; height: 12px; }
.reviews__count { font-size: 12px; line-height: 1.3; color: #4b5563; }
.reviews__count b { color: var(--dark); }
.reviews__pill { font-size: 10px; font-weight: 700; color: var(--green-dark); background: var(--green-soft); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.stars { display: inline-flex; gap: 2px; color: #f5b301; }
.stars svg { width: 15px; height: 15px; display: block; }
.stars .off { color: #d9dce1; }
.reviews__stage { position: relative; overflow: hidden; }
.rv-card { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid #eceef1; border-radius: 12px; padding: 10px; }
.rv-card__photo { flex: 0 0 72px; width: 72px; height: 92px; border-radius: 10px; object-fit: cover; background: var(--bg); display: block; }
.rv-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rv-card__name { font-weight: 700; color: var(--dark); font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-card__row { display: flex; align-items: center; gap: 2px 6px; flex-wrap: wrap; }
.rv-card__row .stars svg { width: 12px; height: 12px; }
.rv-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.rv-verified svg { width: 11px; height: 11px; color: var(--green); }
.rv-card__text { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; height: calc(12px * 1.5 * 3); }
.reviews__bar { height: 3px; margin-top: 8px; background: #eceef1; border-radius: 3px; overflow: hidden; }
.reviews__bar span { display: block; height: 100%; width: 0; background: var(--green); border-radius: 3px; }

@media (max-width: 339px) {
  .rv-card__photo { flex-basis: 64px; width: 64px; height: 82px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rv-card.is-in { animation: rvIn .45s ease both; }
  .reviews__bar span.is-run { animation: rvBar var(--rv-ms, 3600ms) linear forwards; }
  @keyframes rvIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
  @keyframes rvBar { from { width: 0; } to { width: 100%; } }
}

/* Resumo do pedido: barra sticky logo abaixo do header + corpo colapsavel.
   #summary nao gera caixa (display: contents): assim a barra gruda durante o <main> inteiro
   e o corpo aberto rola por baixo dela. Com a pagina rolada, abrir mostra o corpo flutuando (.is-float). */
.summary { display: contents; }
.summary__wrap { max-width: 640px; }
.summary__bar { position: relative; z-index: 30; background: var(--card); border-bottom: 1px solid var(--hair); } /* bloco normal: rola junto com a pagina */
.summary__toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: none; border: 0; padding: 13px 0; font-weight: 500; color: var(--text); }
.summary__toggle-right { display: inline-flex; align-items: center; gap: 8px; }
.summary__toggle-right b { font-size: 16px; font-weight: 500; }
.summary__toggle .chev { transition: transform .25s ease; }
.summary__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
.summary__body { display: grid; grid-template-rows: 0fr; background: var(--card); transition: grid-template-rows .3s ease; }
.summary.is-open .summary__body { grid-template-rows: 1fr; border-bottom: 1px solid var(--hair); }
.summary__clip { min-height: 0; overflow: hidden; }
.summary__content { padding-bottom: 14px; }
.summary.no-anim .summary__body { transition: none; }
.summary.is-float .summary__body { display: block; position: fixed; top: var(--sum-top, 50px); left: 0; right: 0; z-index: 29; max-height: calc(100vh - var(--sum-top, 50px) - 24px); max-height: calc(100dvh - var(--sum-top, 50px) - 24px); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 14px 30px rgba(16,15,15,.18); animation: sumFloat .2s ease; }
@keyframes sumFloat { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .summary__body, .summary__toggle .chev { transition: none; } .summary.is-float .summary__body { animation: none; } }
.summary__product { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; }
.summary__thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--dark); overflow: hidden; }
.summary__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.summary__name { font-weight: 500; }
/* Variacoes em texto (sem bolinhas): cores por nome e o tamanho na linha de baixo */
.summary__variant { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.summary__variant span { display: block; }
.summary__size { margin-top: 1px; color: var(--text); font-weight: 400; }
.summary__price { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-weight: 400; white-space: nowrap; }
.pix-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--green); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1.5; letter-spacing: .2px; }
.summary__product[hidden] { display: none; }
.summary__product--calca { border-top: 1px solid var(--hair); }
.summary__thumb--light { background: #f1f1f1; }
.summary__warn { background: #fff4e5; border: 1px solid #ffd8a8; color: #8a4b00; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; }
.summary__warn a { display: block; margin-top: 4px; font-weight: 700; }
.summary__gift { display: flex; align-items: center; gap: 6px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--muted); }
.summary__gift .ico { width: 15px; height: 15px; color: var(--green-dark); }
.summary__gift span { flex: 1; }
.summary__gift b { color: var(--green-dark); font-weight: 500; }
.summary__line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.summary__line .is-pending { color: var(--muted); font-style: italic; }
.summary__total { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 12px; font-weight: 600; font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.chip i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); }

/* Secoes planas da etapa unica (sem card): separadas por linha sutil, titulo em caixa alta discreto */
.step { padding: 22px 0; border-top: 1px solid var(--hair); }
.steps > .step:first-child { border-top: 0; padding-top: 6px; }
.step__head { display: flex; align-items: center; padding: 0 0 14px; }
.step__head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; color: var(--dark); }
.step__body { display: block; padding: 0; }
/* Aviso cinza no lugar do conteudo ainda nao liberado (frete sem endereco / pagamento travado) */
/* Entrega travada ate o Contato estar valido (travaEntrega no checkout.js); pointer-events cobre navegador sem inert */
#secEntrega.is-locked .step__body { pointer-events: none; user-select: none; }
#secEntrega.is-locked .field input, #secEntrega.is-locked .reveal { opacity: .55; }
.step__placeholder { margin: 0; padding: 14px 16px; border-radius: 10px; background: #f6f7f8; color: var(--muted); font-size: 14px; }
.frete-loading { display: flex; align-items: center; gap: 10px; }
.spinner { width: 16px; height: 16px; flex: none; border: 2px solid #d5d8dc; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }
/* Pagamento desativado: visivel, acinzentado e sem interacao ate liberar */
.step__body > :last-child { margin-bottom: 0; }
/* Ultimo campo de cada bloco sem margem sobrando no rodape do card */
#form1 > .row:last-child > .field:last-child,
#addrFields .row:last-child > .field:last-child,
#form2b .option:last-of-type { margin-bottom: 0; }
.field--cep { margin-bottom: 0; }
#addrFields .reveal__inner > :first-child { margin-top: 14px; }

/* Fields */
.row { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.field label em { font-weight: 400; color: var(--muted); font-style: normal; }
.field input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid #cfd3d9; border-radius: 10px; background: #fff; color: var(--text); font-size: 16px; } /* 16px tambem evita o zoom automatico do iPhone ao focar */
.field input::placeholder { color: #8a8f96; opacity: 1; }
.field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,185,84,.15); }
.field input:disabled { background: var(--bg); color: var(--muted); }
.field.has-error input { border-color: var(--danger); }
.err { display: none; color: var(--danger); font-size: 12px; margin-top: 4px; }
.field.has-error .err { display: block; }
.hint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; min-height: 0; }
.field--cep input { max-width: 200px; }
.check { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 6px; font-weight: 400 !important; font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--green); }

/* Endereco apos CEP */
.field input[readonly] { background: var(--bg); color: var(--text); border-color: var(--line); }
/* "Alterar" dentro do campo Endereco, no canto direito (destrava rua/bairro/cidade) */
.field--addr { position: relative; }
.field--addr .addr-edit-wrap { position: absolute; top: 28px; right: 14px; transform: translateY(-50%); }
.field--addr input { padding-right: 76px; }
.addr-edit { font-size: 14px; }
/* Sugestoes de e-mail */
.field--email { position: relative; }
.email-sug { position: absolute; top: 60px; left: 0; right: 0; z-index: 40; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(16,15,15,.12); }
.email-sug li { padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--text); cursor: pointer; }
.email-sug li:hover, .email-sug li.is-active { background: #f2f4f6; }
.hint.is-error { color: var(--danger); font-weight: 600; }

/* Address + options */
.address { display: flex; align-items: flex-start; gap: 10px; background: var(--bg); border-radius: 10px; padding: 12px; font-size: 14px; margin-bottom: 14px; }
.address .ico { color: var(--green-dark); margin-top: 2px; }
.address > div { flex: 1; }
.label-strong { font-weight: 700; margin: 0 0 8px; }
.option { display: block; margin-bottom: 10px; cursor: pointer; }
.option input { position: absolute; opacity: 0; pointer-events: none; }
.option__box { display: flex; align-items: center; gap: 12px; min-height: 64px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.option__box::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #c3c7cd; flex: none; }
.option input:checked + .option__box { border: 1.5px solid var(--dark); }
.option input:checked + .option__box::before { border-color: var(--dark); background: radial-gradient(circle, var(--dark) 45%, transparent 50%); }
.option input:focus-visible + .option__box { box-shadow: 0 0 0 3px rgba(29,185,84,.25); }
.option__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.option__main b { font-size: 15px; font-weight: 500; }
.option__main small { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 12px; }
.option__main b { color: var(--dark); }
.option__main .ship-eta { flex-wrap: nowrap; gap: 8px; color: var(--muted); font-size: .85rem; font-weight: 400; line-height: 20px; }
.ship-logo { display: block; height: 20px; width: auto; object-fit: contain; flex: none; }
.option__price { font-weight: 500; font-size: 15px; white-space: nowrap; }
.option__price.green { color: var(--green-dark); }
.option.is-disabled { cursor: not-allowed; opacity: .55; }
.badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; background: var(--dark); color: #fff; padding: 4px 9px; border-radius: 999px; flex: none; }
/* Pagamento: um card compacto por metodo; o corpo (valor + botao de pagar / formulario) so no card escolhido */
.step__sub { margin: -8px 0 14px; color: var(--muted); font-size: 13px; }
.pay-cards { display: flex; flex-direction: column; gap: 10px; transition: opacity .3s ease; }
/* Sem frete escolhido: opaco e sem clique (sem mensagem). Com frete: 100% e clicavel */
#secPagamento:not(.is-shown) .pay-cards { opacity: .55; pointer-events: none; }
.pay-card { border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.pay-card.is-selected { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.pay-card__head { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; cursor: pointer; }
.pay-card__head input { position: absolute; opacity: 0; pointer-events: none; }
.pay-card__radio { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid #c3c7cd; background: #fff; }
.pay-card.is-selected .pay-card__radio { border-color: var(--green); background: radial-gradient(circle, var(--green) 42%, #fff 47%); }
.pay-card__head input:focus-visible ~ .pay-card__radio { box-shadow: 0 0 0 3px rgba(29,185,84,.25); }
.pay-card__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.pay-card__icon { display: block; height: 22px; width: auto; flex: none; }
.pay-card__flags { display: flex; align-items: center; gap: 4px; flex: none; }
.pay-card__flags img { display: block; height: 18px; width: auto; }
.pay-card__more { padding-left: 2px; font-size: 12px; color: var(--muted); }
.pay-card__body { display: none; margin: 0 14px; padding: 12px 0 14px; border-top: 1px solid var(--hair); }
.pay-card.is-selected .pay-card__body { display: block; animation: payIn .2s ease; }
@keyframes payIn { from { opacity: 0; } to { opacity: 1; } }
.pay-card__valor { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 14px; }
.pay-card__valor b { color: var(--green-dark); font-size: 16px; font-weight: 600; }
.pay-card__badge { padding: 1px 7px; border-radius: 999px; background: var(--green-soft); color: #0f6e39; font-size: 11px; font-weight: 600; }
.pay-card__desc { margin: 6px 0 12px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.btn--pay { padding: 15px 20px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .pay-card.is-selected .pay-card__body { animation: none; } }
/* Cada opcao so mostra o conteudo quando escolhida: com Cartao marcado, o Pix fica so no cabecalho */

/* Botao finalizar com pulse */
.btn--pulse { animation: btnPulse 2s ease-in-out infinite; }
.btn--pulse:disabled { animation: none; }
.btn--pulse .ico { width: 18px; height: 18px; }
#btnFinalizar, #btnCartao { scroll-margin: 24px; } /* folga ao rolar ate o botao (scrollIntoView) */
/* Anel um pouco mais visivel (no branco o anel antigo sumia rapido demais), ainda discreto */
@keyframes btnPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(29,185,84,.6); }
  45%  { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(29,185,84,.22); }
  75%  { transform: scale(1);    box-shadow: 0 0 0 13px rgba(29,185,84,0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(29,185,84,0); }
}
@media (prefers-reduced-motion: reduce) { .btn--pulse { animation: none; } }
/* Cartao (HyperCash) */
.card-form { margin: 0; padding: 0; border: 0; background: none; } /* dentro do card do Cartao */
.card-form__row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 0 10px; }
.card-form__select { width: 100%; height: 56px; padding: 0 16px; border: 1px solid #cfd3d9; border-radius: 10px; background: #fff; color: var(--text); font-size: 16px; }
.card-form__select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(29,185,84,.15); }
.card-form .form-error { margin-top: 2px; }
.card-form__select:disabled { background: var(--bg); color: var(--text); opacity: 1; }
.card-form__info { margin: 2px 0 12px; background: #fff8e1; color: #7a5a00; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.card-form__total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-form__total span { font-weight: 500; }
.card-form__total small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.card-form__total b { font-size: 18px; font-weight: 600; white-space: nowrap; }

.form-error { margin: 0 0 12px; background: #fdecea; color: var(--danger); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.secure-note { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.secure-note .ico { width: 14px; height: 14px; }

/* Footer */
.footer { background: var(--dark); color: #fff; padding: 32px 0 36px; text-align: center; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.footer__title { font-size: 15px; font-weight: 700; }
.footer__flags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; max-width: 360px; }
.footer__flags img { display: block; width: 40px; height: 26px; object-fit: contain; }
.footer__info { font-size: 12px; line-height: 1.6; }
.footer__info p { margin: 0; }
.footer__info a { color: #fff; text-decoration: none; }
.footer__info a:hover { text-decoration: underline; }
.footer__seals { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; color: #9c9c9c; }
.footer__seal { display: block; height: 30px; width: auto; }

/* Tela do Pix */
.pix-screen { padding: 28px 0 44px; }
.pix-screen__inner { max-width: 480px; }
.pix-state { text-align: center; }
.pix-state h1 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; }

/* Gerando: motion graphics do QR */
.pix-gen { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; }
.pix-gen-stage { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.pix-gen-ring { position: absolute; width: 96px; height: 96px; border: 2px solid #1db954; border-radius: 24px; opacity: 0; }
.pix-gen-card { position: relative; width: 104px; height: 104px; background: #fff; border-radius: 22px; padding: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(16,15,15,.10); }
.pix-gen-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 5px; }
.pix-gen-grid .cell { background: #100F0F; border-radius: 2px; }
.pix-gen-shim { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%); transform: translateX(-160%); }
.pix-gen-title { margin: 2rem 0 0; font-size: 16px; font-weight: 600; color: #100F0F; }
.pix-gen-sub { margin: .4rem 0 0; font-size: 13px; color: #6b7280; }

@media (prefers-reduced-motion: no-preference) {
  .pix-gen-stage { animation: pixFloat 3s ease-in-out infinite; }
  .pix-gen-ring { animation: pixRing 2.2s ease-out infinite; }
  .pix-gen-ring2 { animation-delay: 1.1s; }
  .pix-gen-card { animation: pixGlow 2.4s ease-in-out infinite; }
  .pix-gen-grid .cell { opacity: 0; animation: pixPop .5s ease forwards; }
  .pix-gen-shim { animation: pixShim 1.9s ease-in-out infinite; }
  @keyframes pixFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
  @keyframes pixShim { 0% { transform: translateX(-160%); } 100% { transform: translateX(160%); } }
  @keyframes pixRing { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(1.5); opacity: 0; } }
  @keyframes pixPop { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes pixGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(16,15,15,.10); } 50% { box-shadow: 0 14px 40px rgba(29,185,84,.28); } }
}

/* Pix gerado */
/* Pix gerado: topo fora do card (titulo, timer, status) + card (valor, copiar ou QR, processado por) + troca de visao abaixo */
.pix-top { margin-bottom: 16px; }
.pix-state .pix-top h1 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--dark); }
.pix-top__timer { margin: 0; font-size: 14px; color: var(--muted); }
.pix-top__timer b { color: var(--dark); font-weight: 700; font-variant-numeric: tabular-nums; }
.pix-dots { display: inline-flex; gap: 3px; }
.pix-dots i { width: 5px; height: 5px; border-radius: 50%; background: #f5a623; animation: pixDot 1.2s ease-in-out infinite; }
.pix-dots i:nth-child(2) { animation-delay: .15s; }
.pix-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes pixDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .pix-dots i { animation: none; opacity: 1; } }
.pix-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; }
.pix-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.pix-steps .ico { width: 18px; height: 18px; margin-top: 1px; flex: none; color: var(--green-dark); }
.pix-steps b { color: var(--text); font-weight: 500; }
.pix-proc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); } /* empilhado: texto em cima, logo embaixo */
.pix-proc img { display: block; height: 30px; width: auto; max-width: 140px; object-fit: contain; } /* 30px de altura = ~110px de largura, a mesma do texto */
.pix-proc__txt { color: var(--text); font-size: 13px; font-weight: 600; }
.btn--outline { background: transparent; color: var(--dark); border: 1.5px solid var(--dark); }
.btn--outline:hover { background: #f6f7f8; }
#pixReady > .btn--outline { margin-top: 12px; }
.pix-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 16px; box-shadow: 0 6px 24px rgba(16,15,15,.06); }
.pix-card__valor { margin: 0 0 14px; font-size: 15px; }
.pix-card__valor b { color: var(--green-dark); font-size: 22px; font-weight: 600; }
.pix-qr { width: fit-content; max-width: 100%; margin: 0 auto 16px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pix-qr img { display: block; width: 230px !important; max-width: 100%; height: auto !important; image-rendering: pixelated; }
/* Visoes "copiar codigo" / "QR Code" */
.pix-view { display: flex; flex-direction: column; gap: 10px; animation: pixView .25s ease; }
@keyframes pixView { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pix-view .pix-qr { margin-bottom: 0; }
#pixCopy.is-done { background: var(--green-dark); }
.pix-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: #fff; color: var(--dark); border: 1px solid var(--line); font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 30px rgba(16,15,15,.22); /* claro: aparece sobre qualquer fundo (inclusive o rodape escuro) */ opacity: 0; visibility: hidden; transform: translate(-50%, 12px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
.pix-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s, visibility 0s; }
.pix-toast .ico { color: var(--green); }
@media (prefers-reduced-motion: reduce) { .pix-view { animation: none; } .pix-toast { transition: none; } }
.pix-code { display: block; width: 100%; height: 46px; margin-bottom: 0; padding: 0 12px; border: 1px solid #cfd3d9; border-radius: 10px; background: var(--bg); color: var(--muted); font-size: 13px; text-overflow: ellipsis; }
.pix-status { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px; background: #fff6e6; color: #8a5a00; font-size: 13px; font-weight: 500; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: #f5a623; animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245,166,35,.6); } 70% { box-shadow: 0 0 0 10px rgba(245,166,35,0); } 100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); } }
.pix-how { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); text-align: left; }
.pix-how__title { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.pix-how ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13px; }
.pix-how li + li { margin-top: 6px; }
.pix-back { display: block; margin: 18px auto 0; font-size: 13px; color: var(--muted); }
.success { width: 68px; height: 68px; margin: 20px auto 14px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.success .ico { width: 36px; height: 36px; }
#pixPaid, #pixError { padding: 24px 0; }

/* Pagamento confirmado com rastreio proprio desligado: resumo do pedido */

/* Pagamento confirmado: confirmacao completa do pedido, no mesmo estilo plano (linhas sutis) */
.pix-screen:has(#pixPaid:not([hidden])) { background: #fff; }
.paid { text-align: left; }
.paid-hero { text-align: center; padding-bottom: 18px; }
.paid-hero__ok { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.paid-hero__ok .ico { width: 30px; height: 30px; }
.paid-hero__kicker { margin: 0; color: var(--muted); font-size: 14px; }
.pix-state .paid-hero__title { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: .05em; line-height: 1.25; text-transform: uppercase; color: var(--dark); } /* titulo principal: um pouco maior */
.paid-hero__ref { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.paid-hero__ref b { color: var(--text); font-weight: 500; letter-spacing: .3px; }
#paidTrack { margin-bottom: 16px; }
.paid-ship { display: flex; align-items: center; gap: 8px; padding: 14px 0 10px; border-top: 1px solid var(--hair); font-size: 14px; }
.paid-ship .ico { color: var(--green-dark); }
.paid-map { height: 0; overflow: hidden; border-radius: 10px; opacity: 0; transition: opacity .3s; }
.paid-map.is-on { height: 190px; opacity: 1; border: 1px solid var(--line); }
.paid-map iframe { display: block; width: 100%; height: 190px; border: 0; }
.paid-sec { margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--hair); }
.paid-sec h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; color: var(--dark); } /* mesmo titulo das secoes do checkout */
.paid-sec__text { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.paid-sub { padding: 14px 0; border-top: 1px solid var(--hair); }
.paid-sec h2 + .paid-sub { margin-top: 12px; }
.paid-sub h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; color: var(--dark); }
.paid-lines { margin: 0; font-size: 14px; line-height: 1.6; }
.paid-lines span { display: block; }
.paid-frete, .paid-pay { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.paid-frete .ship-logo { height: 18px; }
.paid-frete__info { flex: 1; min-width: 0; line-height: 1.45; }
.paid-frete__info span { display: block; }
.paid-frete__info span + span { color: var(--muted); font-size: 13px; }
.paid-frete__price, .paid-pay b { margin-left: auto; font-weight: 500; white-space: nowrap; }
.paid-pay img { display: block; height: 24px; width: auto; }
.paid-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 8px 0; }
.paid-item__name { font-weight: 500; font-size: 14px; }
.paid-totals { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--hair); }

/* rastreio.php com rastreio_ativo = false */
.rastreio-off { padding: 48px 16px; }
.rastreio-off__card { max-width: 440px; margin: 0 auto; padding: 24px 20px; text-align: center; }
.rastreio-off__card h1 { margin: 0 0 8px; font-size: 22px; }
.rastreio-off__card .btn { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
}

@media (min-width: 640px) {
  .footer__flags { max-width: none; }
  .secure__svg { width: 80px; max-width: 80px; }
  .row { grid-template-columns: 1fr 1fr; }
}

/* Celular estreito: logo e selo menores pra nao se encostarem */
@media (max-width: 359px) {
  .logo img { height: 30px; }
  .secure__svg { width: 62px; max-width: 62px; }
}

/* ===================== Rastreio do pedido ===================== */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Busca */
.track-search { max-width: 480px; margin: 12px auto 0; padding: 24px 16px; text-align: center; }
.track-search h1 { margin: 0 0 6px; font-size: 21px; line-height: 1.2; color: var(--dark); }
.track-search p { margin: 0 0 18px; font-size: 14px; }
.track-search form { text-align: left; }
.track-search__icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--dark); color: #fff; display: grid; place-items: center; }
.track-search__icon .ico { width: 24px; height: 24px; }

/* Carregando */
.track-loading { min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.track-loading p { margin: 0; font-weight: 600; color: var(--dark); }
.track-loading__dots { display: inline-block; width: 1.2em; text-align: left; }
.track-loading__truck { width: 64px; height: 64px; border-radius: 18px; background: var(--dark); color: #fff; display: grid; place-items: center; }
.track-loading__truck .ico { width: 30px; height: 30px; }

/* Topo: status atual + previsao */
.track-result { display: flex; flex-direction: column; gap: 14px; }
.track-hero { position: relative; overflow: hidden; background: var(--dark); color: #fff; border-radius: 16px; padding: 18px 16px 16px; }
.track-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(29,185,84,.28), transparent 70%); pointer-events: none; }
.track-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12px; color: rgba(255,255,255,.7); }
.track-hero__top b { color: #fff; letter-spacing: .3px; }
.track-hero__status { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.track-hero__icon { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--green); color: #fff; display: grid; place-items: center; }
.track-hero__icon .ico { width: 26px; height: 26px; }
.track-hero__kicker { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.6); }
.track-hero h1 { margin: 2px 0 0; font-size: 22px; line-height: 1.15; }
.track-hero__eta { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; }
.track-hero__eta .ico { color: var(--green); }
.track-hero__eta b { font-size: 17px; }
.track-hero__bar { height: 6px; margin-top: 12px; border-radius: 6px; background: rgba(255,255,255,.14); overflow: hidden; }
.track-hero__bar span { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--green); transition: width 1.6s cubic-bezier(.22,.8,.3,1); }
.track-hero__ship { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.75); }
.track-hero__ship img { display: block; height: 20px; width: auto; padding: 3px 6px; box-sizing: content-box; background: #fff; border-radius: 6px; }

/* Cards */
.track-grid { display: flex; flex-direction: column; gap: 14px; }
.track-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.track-card { padding: 16px; min-width: 0; }
.track-card__title { margin: 0 0 14px; font-size: 16px; font-weight: 700; color: var(--dark); }
.track-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.track-product { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.track-product__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.track-pay { display: inline-flex; align-items: center; gap: 6px; }
.track-pay img { display: block; height: 14px; width: auto; }
.track-info { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.track-info .ico { color: var(--green-dark); margin-top: 2px; }
.track-info > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.track-other { display: block; margin: 4px auto 0; font-size: 14px; }

/* Timeline */
.timeline { position: relative; }
.timeline__track { position: absolute; left: 17px; width: 2px; margin-left: -1px; background: var(--line); border-radius: 2px; }
.timeline__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--green); border-radius: 2px; transition-property: height; transition-timing-function: linear; }
.timeline__list { list-style: none; margin: 0; padding: 0; position: relative; }
.tl-step { display: flex; align-items: flex-start; gap: 14px; }
.tl-step + .tl-step { margin-top: 20px; }
.tl-node { position: relative; z-index: 1; width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--line); color: #a3a8b0; }
.tl-node svg { width: 17px; height: 17px; display: block; }
.tl-check { fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.tl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding-top: 6px; }
.tl-title { font-size: 14px; line-height: 1.3; color: var(--muted); font-weight: 600; }
.tl-meta { font-size: 12px; color: var(--muted); }
.tl-text { font-size: 13px; color: #4b5563; margin-top: 2px; }

.tl-step.is-done .tl-node { background: var(--green); border-color: var(--green); color: #fff; }
.tl-step.is-done .tl-title { color: var(--text); }
.tl-step.is-active .tl-node { background: var(--dark); border-color: var(--dark); color: #fff; }
.tl-step.is-active .tl-title { color: var(--dark); font-weight: 800; font-size: 15px; }
.tl-step.is-active .tl-meta { color: var(--green-dark); font-weight: 700; }
.tl-step.is-next .tl-node { border-style: dashed; }

@media (prefers-reduced-motion: no-preference) {
  .track-result:not([hidden]) .track-hero,
  .track-result:not([hidden]) .track-card { animation: tkIn .5s ease both; }
  .track-result:not([hidden]) .track-side .track-card:nth-child(1) { animation-delay: .08s; }
  .track-result:not([hidden]) .track-side .track-card:nth-child(2) { animation-delay: .14s; }
  .track-result:not([hidden]) .track-side .track-card:nth-child(3) { animation-delay: .2s; }
  .track-search:not([hidden]) { animation: tkIn .4s ease both; }
  .track-loading__truck { animation: tkDrive 1.1s ease-in-out infinite; }
  .track-hero__icon { animation: tkGlow 2.6s ease-in-out infinite; }

  .tl-step { animation: tkStep .45s ease both; animation-delay: var(--d, 0ms); }
  .tl-step.is-done .tl-node { animation: tkPop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: var(--d, 0ms); }
  .tl-step.is-done .tl-check { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tkDraw .4s ease forwards; animation-delay: calc(var(--d, 0ms) + .22s); }
  .tl-step.is-active .tl-node { animation: tkPop .5s cubic-bezier(.3,1.6,.5,1) both, tkPulse 2s ease-out infinite; animation-delay: var(--d, 0ms), calc(var(--d, 0ms) + .5s); }

  @keyframes tkIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes tkStep { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
  @keyframes tkPop { 0% { transform: scale(.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
  @keyframes tkDraw { to { stroke-dashoffset: 0; } }
  @keyframes tkPulse { 0% { box-shadow: 0 0 0 0 rgba(29,185,84,.55); } 70% { box-shadow: 0 0 0 12px rgba(29,185,84,0); } 100% { box-shadow: 0 0 0 0 rgba(29,185,84,0); } }
  @keyframes tkDrive { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
  @keyframes tkGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(29,185,84,.45); } 60% { box-shadow: 0 0 0 10px rgba(29,185,84,0); } }
}
@media (prefers-reduced-motion: reduce) {
  .track-hero__bar span, .timeline__fill { transition: none !important; }
  .tl-step.is-active .tl-node { box-shadow: 0 0 0 4px rgba(29,185,84,.3); }
}

@media (min-width: 900px) {
  .track-hero { padding: 24px 28px; }
  .track-hero h1 { font-size: 26px; }
  .track-grid { flex-direction: row; align-items: flex-start; }
  .track-grid > .track-card { flex: 1; padding: 22px 24px; }
  .track-side { width: 360px; flex: none; }
}

.pix-track { margin-top: 18px; }
.pix-track .ico { width: 20px; height: 20px; }

/* ===== Desconto Pix (5%) ===== */
.summary__desc span:first-child { display: inline-flex; align-items: center; gap: 4px; }
.summary__desc-val { color: var(--green-dark); font-weight: 500; }
.summary__desc > span:first-child { color: var(--green-dark); }
.summary__total-vals { display: inline-flex; align-items: baseline; gap: 6px; }
.summary__old { color: #9aa0a6; text-decoration: line-through; font-weight: 400; font-size: .85em; }


/* ===== Selos "ganhou 5% no Pix" ===== */

/* Tela do Pix no celular: compacta o topo pra o QR e o "Copiar codigo" caberem na primeira tela.
   Nada some: o check vai pro lado do titulo, o cronometro fica numa linha so e o QR fica um pouco menor. */
@media (max-width: 600px) {
  .pix-screen { padding-top: 16px; }
  .pix-card { padding: 16px 14px; }
  .pix-qr { padding: 6px; }
  .pix-qr img { width: 200px !important; }
}