/* LUMIÈRE · checkout.css: o fechar pedido (/checkout) e o acompanhar pedido (/acompanhar).
 * Sistema novo (30/10/2026, padrão da Donna Carioca com a paleta da Lumière). Celular primeiro; vale em
 * toda largura (css_todas_larguras nos dados, _fonte/paginas/checkout.mjs).
 * - Campo: o mesmo componente do CEP do produto, em caixa branca com raio de 12 px, rótulo em caixa normal
 *   em cima, texto de 16 px (o iPhone não dá zoom), erro de 14 px com o ícone circle-alert.
 * - Dois níveis de título só: o do passo (h2, 20 a 22 px) e o do grupo (legenda, 16 px).
 * - Passos: três círculos numerados ligados por um fio que anda (--passo), o atual em cobre.
 * - Pagamento: cartões com raio de 16 px, ícone Lucide (qr-code no Pix, credit-card no cartão).
 * - Resumo ao lado no computador; no tablet e no celular, uma linha no topo que abre.
 * Lógica: CEP primeiro, o frete logo depois dos 8 números, Pix marcado, total antes de pagar
 * (comportamento em site/js/checkout.js e site/js/acompanhar.js). */

/* ---------- cabeçalho reduzido (pecas.mjs, cabecalhoReduzido): não fica preso no topo ---------- */
.cabecalho--reduzido { position: relative; }
.cabecalho__ajuda { gap: 10px; }
/* celular: o marcador do WhatsApp sai do cabeçalho (cabe só o botão); a mesma pendência aparece no rodapé */
@media (max-width: 640px) { .cabecalho--reduzido .decidir { display: none; } }

/* =====================================================================================================
 * Peças do formulário (fechar pedido e acompanhar)
 * ===================================================================================================== */
.subtitulo { padding: 0; margin-bottom: 12px; font: 700 16px / 1.3 var(--f-texto); }
.campos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 18px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.campos--uma { grid-template-columns: minmax(0, 1fr); }
.campos__manual { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; column-gap: inherit; row-gap: 18px; }
.campos__manual[hidden] { display: none; }
@supports (grid-template-columns: subgrid) {
  .campos__manual { grid-template-columns: subgrid; }
}
.campos__pendente { grid-column: 1 / -1; }
.campo { grid-column: 1 / -1; display: grid; align-content: start; gap: 6px; min-width: 0; }
.campo[hidden] { display: none; }
.campo--quarto { grid-column: span 4; }
.campo--metade { grid-column: span 6; } /* validade e CVV lado a lado, até em 360 px */
.campo--tres-quartos { grid-column: span 8; }
.campo__rotulo { font: 500 14px / 1.4 var(--f-texto); color: var(--tinta); }
.campo__entrada {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--tinta) 22%, transparent);
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--tinta);
  font: 400 var(--t-campo) / 1.2 var(--f-texto);
  font-variant-numeric: tabular-nums lining-nums;
  transition: border-color var(--d-micro), box-shadow var(--d-micro);
  -webkit-appearance: none;
  appearance: none;
}
.campo__entrada::placeholder { color: var(--tinta-2); opacity: 1; }
.campo__entrada:focus { outline: 2px solid var(--cobre-profundo); outline-offset: 1px; border-color: transparent; }
.campo__entrada--texto { height: auto; min-height: 96px; padding-block: 12px; resize: vertical; line-height: 1.5; }
/* lista de escolha (parcelas): a mesma caixa, com a seta Lucide chevron-down */
.campo__entrada--escolha { padding-right: 44px; background: var(--branco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232A1F19' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
.campo__entrada--escolha:disabled { opacity: 1; color: var(--tinta); background-image: none; cursor: default; }
.campo--cep .campo__entrada { max-width: 200px; letter-spacing: .03em; }
.campo__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.campo__ajuda { flex: none; font-size: 13px; }
.campo__nota { font: 400 13px / 1.45 var(--f-texto); color: var(--tinta-2); }
.campo__erro { display: flex; gap: 8px; align-items: flex-start; font: 400 var(--t-erro) / 1.4 var(--f-texto); color: var(--erro); }
.campo__erro:empty { display: none; }
.campo__erro .icone { margin-top: 1px; }
.campo--erro .campo__entrada { border-color: var(--erro); box-shadow: inset 0 0 0 1px var(--erro); }
.campo__achado { display: flex; gap: 10px; align-items: center; font: 400 15px / 1.45 var(--f-texto); }
.campo__achado:empty { display: none; }
.campo__achado--busca { color: var(--tinta-2); }
.marcar { display: inline-flex; align-items: center; gap: 12px; min-height: var(--toque); cursor: pointer; font: 400 16px / 1.35 var(--f-texto); }
.marcar input, .frete__opcao input, .pagar__opcao input { width: 20px; height: 20px; margin: 0; accent-color: var(--cobre-profundo); cursor: pointer; }

/* avisos honestos (servidor desligado, erro, sem internet): caixa nude, ícone */
.fechar__aviso, .aviso {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--raio);
  background: var(--nude);
  font: 400 15px / 1.5 var(--f-texto);
}
.fechar__aviso[hidden], .aviso[hidden] { display: none; }
.aviso .icone, .fechar__aviso .icone { flex: none; margin-top: 3px; }
.aviso--erro { background: color-mix(in srgb, var(--erro) 7%, var(--papel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--erro) 35%, transparent); }
.aviso--erro .icone { color: var(--erro); }
.aviso a, .fechar__aviso a { color: inherit; }
.aviso__acao { margin-top: 4px; }

/* =====================================================================================================
 * Fechar pedido: os passos e o resumo (ao lado no computador; uma linha que abre, no topo, até 1024 px)
 * ===================================================================================================== */
.fechar { width: var(--pagina); margin-inline: auto; padding-block: 16px var(--respiro-secao); }
.fechar__grade { display: grid; gap: 16px; align-items: start; }
.fechar__grade[hidden] { display: none; }
.fechar__principal { display: grid; gap: 12px; min-width: 0; }

/* ---------- os três passos ---------- */
.passos { padding: 6px 0 10px; }
.passos__lista { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
/* o fio do centro do 1 ao centro do 3, e o trecho já andado em cobre */
.passos__lista::before, .passos__lista::after { content: ""; position: absolute; top: 15px; left: calc(100% / 6); height: 2px; border-radius: 2px; }
.passos__lista::before { right: calc(100% / 6); background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.passos__lista::after { width: calc((100% - 100% / 3) * var(--passo, 0)); background: var(--cobre-profundo); transition: width var(--d-painel) var(--e-saida); }
.passos__item { display: flex; justify-content: center; }
.passos__item a { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; min-height: var(--toque); color: inherit; text-align: center; text-decoration: none; }
.passos__n {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--papel);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 30%, transparent);
  color: var(--tinta-2);
  font: 700 14px / 1 var(--f-texto);
  transition: background-color var(--d-hover), color var(--d-hover);
}
.passos__nome { font: 500 13px / 1.3 var(--f-texto); color: var(--tinta-2); }
.passos__item a:not([aria-current]):not([aria-disabled="true"]) .passos__n { background: var(--cafe); box-shadow: none; color: var(--branco); }
.passos__item a:not([aria-current]):not([aria-disabled="true"]) .passos__nome { color: var(--tinta); }
.passos__item a:not([aria-current]):not([aria-disabled="true"]):hover .passos__nome { text-decoration: underline; text-decoration-color: var(--cobre); text-underline-offset: 4px; }
.passos__item a[aria-current="step"] .passos__n { background: var(--cobre-profundo); box-shadow: none; color: var(--branco); }
.passos__item a[aria-current="step"] .passos__nome { color: var(--tinta); font-weight: 700; }
.passos__item a[aria-disabled="true"] { cursor: default; }

/* ---------- cada passo num cartão ---------- */
.passo { padding: 18px 16px; border-radius: var(--raio-card); background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
.passo[data-estado="atual"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 26%, transparent); }
.passo__cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.passo__feito { display: none; grid-column: 1; grid-row: 1; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cafe); color: var(--branco); }
.passo[data-estado="feito"] .passo__feito { display: grid; }
.passo__titulo { grid-column: 2; grid-row: 1; font: 700 20px / 1.25 var(--f-texto); letter-spacing: -.01em; }
/* sem o círculo de feito, o título começa na borda do cartão (o vão da coluna vazia não empurra) */
.passo:not([data-estado="feito"]) .passo__titulo { grid-column: 1 / 3; }
/* o título recebe o foco por código ao trocar de passo (o leitor de tela anuncia); não é clicável */
.passo__titulo:focus, .passo__titulo:focus-visible, #pedido-titulo:focus, #pedido-titulo:focus-visible { outline: none; }
.passo[data-estado="depois"] .passo__titulo { color: var(--tinta-2); }
.passo__resumo { grid-column: 2 / 3; margin-top: 4px; font: 400 14px / 1.45 var(--f-texto); color: var(--tinta-2); overflow-wrap: anywhere; }
.passo__resumo:empty { display: none; }
.passo__alterar { grid-column: 3; grid-row: 1; min-height: 40px; font-size: 13px; }
.passo[data-estado="atual"] .passo__resumo,
.passo[data-estado="atual"] .passo__alterar,
.passo[data-estado="depois"] .passo__resumo,
.passo[data-estado="depois"] .passo__alterar { display: none; }
.passo:not([data-estado="atual"]) .passo__corpo { display: none; }
.passo__corpo { margin-top: 16px; }
.passo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.passo__acoes .botao { width: 100%; }
.passo__sem-cadastro { color: var(--tinta-2); }

/* ---------- como chega (opções dos Correios que o sistema cota, desenhadas pelo checkout.js) ---------- */
.fechar .frete { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.fechar .frete[hidden] { display: none; }
.frete__estado:empty { display: none; }
.frete__estado--busca { font: 400 15px / 1.5 var(--f-texto); color: var(--tinta-2); }
.frete__opcoes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.frete__opcao {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent);
  cursor: pointer;
}
.frete__opcao:has(input:checked) { background: color-mix(in srgb, var(--nude) 45%, var(--branco)); box-shadow: inset 0 0 0 2px var(--cobre-profundo); }
.frete__opcao input { grid-row: 1 / span 2; }
.frete__servico { font: 500 15px / 1.35 var(--f-texto); }
.frete__opcao:has(input:checked) .frete__servico { font-weight: 700; }
.frete__prazo { grid-column: 2; font: 400 13px / 1.4 var(--f-texto); color: var(--tinta-2); }
.frete__preco { grid-column: 3; grid-row: 1 / span 2; font: 700 16px / 1 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.frete__postagem { margin-top: 10px; color: var(--tinta-2); }

/* ---------- presente ---------- */
.presente { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.presente__bilhete { margin-top: 12px; }

/* ---------- pagamento: cartões de 16 px, Pix marcado ---------- */
.pagar { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pagar__opcao {
  display: grid;
  grid-template-columns: 20px 44px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding: 16px;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 22%, transparent);
  cursor: pointer;
  transition: background-color var(--d-micro), box-shadow var(--d-micro);
}
.pagar__opcao input { grid-column: 1; grid-row: 1 / span 2; }
.pagar__icone { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--nude); color: var(--cobre-profundo); }
.pagar__nome { grid-column: 3; font: 700 16px / 1.3 var(--f-texto); }
.pagar__nota { grid-column: 3; font: 400 14px / 1.4 var(--f-texto); color: var(--tinta-2); }
.pagar__valor { grid-column: 4; grid-row: 1 / span 2; font: 700 16px / 1 var(--f-texto); white-space: nowrap; }
.pagar__valor:empty { display: none; }
.pagar__opcao:has(input:checked) { background: color-mix(in srgb, var(--nude) 45%, var(--branco)); box-shadow: inset 0 0 0 2px var(--cobre-profundo); }
.pagar__opcao:has(input:focus-visible) { outline: 2px solid var(--cobre-profundo); outline-offset: 3px; }
.pagar__decidir:empty { display: none; }
.pagar__opcao[hidden] { display: none; }
/* aviso do ambiente de teste (config.sandbox): a mesma caixa nude dos avisos, em cima das formas de pagar */
.pagar__teste { margin-bottom: 14px; }
/* os campos do cartão: logo abaixo da opção "Cartão de crédito", no mesmo cartão branco do passo */
.cartao-dados { display: grid; gap: 14px; padding: 18px 16px 16px; border-radius: var(--raio-card); background: color-mix(in srgb, var(--nude) 30%, var(--branco)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 14%, transparent); }
.cartao-dados[hidden] { display: none; }
.cartao-dados .campos { row-gap: 16px; column-gap: 12px; }
.cartao-dados #c-cartao-numero { letter-spacing: .04em; }
.cartao-dados__seguro { display: flex; gap: 8px; align-items: flex-start; color: var(--tinta-2); }
.cartao-dados__seguro .icone { flex: none; margin-top: 2px; }
.pagar__ultima { display: flex; gap: 10px; align-items: baseline; margin-top: 16px; }
.pagar__ultima::before { content: ""; flex: none; width: 7px; height: 7px; margin-bottom: 1px; border-radius: 50%; background: var(--cobre); }
.pagar__ultima[hidden] { display: none; }
[data-aviso-pagar] { margin: 16px 0 0; }
.pagar__fim { display: grid; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linha); }
.pagar__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font: 600 16px / 1.3 var(--f-texto); }
.pagar__total strong { font: 700 22px / 1.1 var(--f-texto); }
.botao--pagar { min-height: 56px; font-size: 16px; }
.pagar__fim .nota { color: var(--tinta-2); }
.pagar__fim .nota .link { min-height: 0; }

/* ---------- conta (produtos, frete, total) ---------- */
.conta { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
.conta div { display: contents; }
.conta dt, .conta dd { margin: 0; padding-block: 10px; border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent); }
.conta dt { font: 400 15px / 1.5 var(--f-texto); }
.conta dd { text-align: right; font: 500 15px / 1.5 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; }
.conta .conta__total dt { font-weight: 700; }
.conta .conta__total dd { font: 700 20px / 1.3 var(--f-texto); }
.conta__pendente { color: var(--tinta-2); font-size: 13px; }

/* ---------- resumo ---------- */
.resumo { min-width: 0; }
.resumo__dentro { padding: 14px 16px; border-radius: var(--raio-card); background: var(--nude); }
.resumo__abre { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.resumo__linha { flex: 1; font: 600 15px / 1.4 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; }
.resumo__ver { font: 500 13px / 1 var(--f-texto); text-decoration: underline; text-decoration-color: var(--cobre); text-underline-offset: 5px; }
.resumo__abre .icone { transition: rotate var(--d-hover) var(--e-saida); }
.resumo.aberto .resumo__abre .icone { rotate: 180deg; }
.resumo:not(.aberto) .resumo__corpo { display: none; }
.resumo__corpo { padding-top: 10px; }
.resumo__titulo { font: 700 20px / 1.25 var(--f-texto); }
.resumo__titulo span { font: 400 15px / 1 var(--f-texto); color: var(--tinta-2); }
.resumo__itens { margin: 12px 0 0; padding: 0; list-style: none; }
.resumo__carregando { padding-block: 10px; font: 400 var(--t-nota) / 1.45 var(--f-texto); color: var(--tinta-2); }
.resumo__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  padding-block: 10px;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 12%, transparent);
}
.resumo__foto { grid-row: 1 / span 2; display: block; width: 56px; aspect-ratio: 1; overflow: hidden; border-radius: 10px; background: var(--placa); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 8%, transparent); }
.resumo__foto picture, .resumo__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.resumo__nome { font: 500 14px / 1.35 var(--f-texto); }
.resumo__nome a { color: inherit; text-decoration: none; }
.resumo__nome a:hover { text-decoration: underline; text-decoration-color: var(--cobre); text-underline-offset: 4px; }
.resumo__detalhe { grid-column: 2; font: 400 12px / 1.45 var(--f-texto); color: var(--tinta-2); }
.resumo__preco { grid-column: 3; grid-row: 1; font: 700 14px / 1.35 var(--f-texto); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.resumo__alterar { margin-block: 0 6px; font-size: 13px; }
.resumo__nota { margin-top: 10px; color: var(--tinta-2); }

/* ---------- sacola vazia ---------- */
.fechar__vazia { display: grid; justify-items: start; gap: 12px; padding: 24px 16px; border-radius: var(--raio-card); box-shadow: inset 0 0 0 1px var(--linha); }
.fechar__vazia[hidden] { display: none; }
.fechar__vazia-titulo { font: 700 clamp(24px, 1rem + 1.4vw, 34px) / 1.15 var(--f-texto); }
.fechar__vazia-titulo:focus { outline: none; }
.fechar__vazia-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; width: 100%; margin: 8px 0 12px; padding: 0; list-style: none; }

@media (min-width: 641px) {
  .passo { padding: 24px; }
  .cartao-dados { padding: 20px; }
  .cartao-dados .campos { column-gap: 16px; }
  .campo--metade { grid-column: span 3; }
  .campo--parcelas { grid-column: span 6; }
  .passo__titulo { font-size: 22px; }
  .passo__acoes .botao { width: auto; min-width: 220px; }
  .campo--meio { grid-column: span 6; }
  .campo--terco { grid-column: span 4; }
  .campo--dois-tercos { grid-column: span 8; }
  .campo--quarto { grid-column: span 3; }
  .campo--tres-quartos { grid-column: span 9; }
  .passos__nome { font-size: 14px; }
  .fechar__vazia { padding: 32px; }
  .fechar__vazia-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1025px) {
  .fechar { padding-top: 32px; }
  .fechar__grade { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 32px; }
  .fechar__principal { grid-column: 1; }
  .resumo { grid-column: 2; position: sticky; top: 24px; }
  .resumo__dentro { padding: 24px; }
  .resumo__abre { display: none; }
  .resumo:not(.aberto) .resumo__corpo { display: block; }
  .resumo__corpo { padding-top: 0; }
}
@media (max-width: 1024px) {
  .resumo { grid-row: 1; }
}

/* =====================================================================================================
 * Acompanhar pedido: o texto e a busca num cartão nude; as quatro etapas com ícone; o pedido carregado
 * ===================================================================================================== */
.onde { width: var(--pagina); margin-inline: auto; padding-top: 28px; }
.onde__abertura { display: grid; gap: 24px; }
.onde__texto { display: grid; align-content: start; gap: 12px; }
.onde__rotulo { color: var(--cobre-texto); }
.onde__titulo { font: 700 clamp(28px, 1rem + 2vw, 44px) / 1.1 var(--f-texto); letter-spacing: -.02em; }
.onde__titulo:focus { outline: none; }
.onde__texto > p { max-width: 46ch; }
.onde__ultimo { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--raio); background: var(--nude); }
.onde__ultimo[hidden] { display: none; }
.onde__ajuda { color: var(--tinta-2); }
.onde__ajuda .link { min-height: 0; color: var(--tinta); }
.onde__form { display: grid; gap: 20px; padding: 20px 16px; border-radius: var(--raio-card); background: var(--nude); }
.onde--link .onde__abertura, .onde--link .etapas { display: none; }

.etapas { margin-top: var(--respiro-secao); }
.etapas[hidden] { display: none; }
.etapas__titulo { margin-bottom: 16px; font: 700 20px / 1.25 var(--f-texto); }
.etapas__lista { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.etapa { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-content: start; column-gap: 14px; row-gap: 2px; align-items: start; padding: 16px; border-radius: var(--raio-card); background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); }
.etapa__icone { grid-row: 1 / span 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--nude); color: var(--cobre-profundo); }
.etapa__nome { align-self: end; font: 700 16px / 1.3 var(--f-texto); }
.etapa__texto { font: 400 14px / 1.5 var(--f-texto); color: var(--tinta-2); }

/* o pedido carregado (acompanhar.js) */
.onde__pedido { display: grid; gap: 24px; margin-top: 32px; }
.onde__pedido[hidden] { display: none; }
.onde__pedido:focus { outline: none; }
.onde--link .onde__pedido { margin-top: 8px; }
.pedido__cabeca { display: grid; gap: 16px; }
.pedido__rotulo { font: 600 13px / 1.4 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); }
/* a régua das etapas do pedido: quatro círculos com ícone ligados por um fio; feito em café, atual em cobre */
.linha-pedido { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.linha-pedido::before, .linha-pedido::after { content: ""; position: absolute; top: 19px; left: 12.5%; height: 2px; border-radius: 2px; }
.linha-pedido::before { right: 12.5%; background: color-mix(in srgb, var(--tinta) 14%, transparent); }
.linha-pedido::after { width: calc(75% * var(--andou, 0)); background: var(--cobre-profundo); }
.linha-pedido__etapa { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; text-align: center; }
.linha-pedido__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tinta) 25%, transparent); color: var(--tinta-2); }
.linha-pedido__etapa--feita .linha-pedido__icone { background: var(--cafe); box-shadow: none; color: var(--branco); }
.linha-pedido__etapa--atual .linha-pedido__icone { background: var(--cobre-profundo); box-shadow: none; color: var(--branco); }
.linha-pedido__nome { font: 600 13px / 1.3 var(--f-texto); }
.linha-pedido__texto { font: 400 12px / 1.4 var(--f-texto); color: var(--tinta-2); }
.pedido__status { display: grid; justify-items: start; gap: 12px; padding: 20px 16px; border-radius: var(--raio-card); background: var(--nude); }
.pedido__status .titulo { font-size: clamp(24px, 1rem + 1.4vw, 34px); }
.pedido__status p { max-width: 56ch; }
.pedido__status .aviso { margin: 0; background: var(--papel); }
.pedido__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 4px; }
.pedido__itens, .pedido__entrega { display: grid; align-content: start; gap: 10px; }
.pedido__itens h2, .pedido__entrega h2 { font: 700 20px / 1.25 var(--f-texto); }
.pedido__itens .conta dt .mono { color: var(--tinta-2); }

/* o Pix esperando pagamento (acompanhar.js). Celular: valor, validade, "Copiar código", o QR, os passos e
 * "Já paguei", um embaixo do outro (quem paga no próprio celular usa o copia e cola primeiro). Do tablet para
 * cima, o QR à esquerda. Cartão branco sobre o nude do status, raio de 16 px, como os passos do checkout. */
.pix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "valor" "validade" "copia" "qr" "passos" "conferir";
  gap: 16px;
  width: 100%;
  max-width: 760px;
  margin-top: 4px;
  padding: 18px 16px;
  border-radius: var(--raio-card);
  background: var(--branco);
  box-shadow: inset 0 0 0 1px var(--linha);
}
.pix__valor { grid-area: valor; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 15px / 1.3 var(--f-texto); }
.pix__valor strong { font: 700 26px / 1.1 var(--f-texto); }
.pix__validade { grid-area: validade; margin-top: -8px; font: 400 14px / 1.45 var(--f-texto); color: var(--tinta-2); }
.pix__validade strong { color: var(--tinta); font-weight: 700; }
.pix__copia { grid-area: copia; display: grid; gap: 8px; min-width: 0; }
.pix__codigo { overflow: hidden; text-overflow: ellipsis; color: var(--tinta-2); }
.pix__copiar { min-height: 52px; }
.pix__copiado { color: var(--tinta); }
.pix__copiado:empty { display: none; }
.pix__qr { grid-area: qr; justify-self: center; display: grid; place-items: center; width: 200px; aspect-ratio: 1; padding: 10px; border-radius: 12px; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
.pix__imagem { display: block; width: 100%; height: auto; }
.pix__sem-qr { display: grid; justify-items: center; gap: 10px; padding: 8px; text-align: center; font: 400 13px / 1.4 var(--f-texto); color: var(--tinta-2); }
.pix__passos { grid-area: passos; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pix__passos li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; align-items: start; font: 400 14px / 1.45 var(--f-texto); }
.pix__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nude); color: var(--cobre-profundo); font: 700 12px / 1 var(--f-texto); }
.pix__conferir { grid-area: conferir; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 14px; border-top: 1px solid var(--linha); }
.pix__conferir .botao { flex: none; }
.pix__conferir .nota { flex: 1 1 220px; color: var(--tinta-2); }
@media (min-width: 641px) {
  .pix {
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: "qr valor" "qr validade" "qr copia" "passos passos" "conferir conferir";
    column-gap: 28px;
    align-items: start;
    padding: 24px;
  }
  .pix__qr { width: 220px; }
  .pix__validade { margin-top: -10px; }
}

@media (min-width: 900px) {
  .onde { padding-top: 48px; }
  .onde__abertura { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: start; }
  .onde__form { padding: 28px; }
  .onde__botao { width: auto; justify-self: start; min-width: 220px; }
  .etapas__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .etapa { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .etapa__icone { grid-row: auto; margin-bottom: 10px; }
  .etapa__nome { align-self: auto; }
  .onde__pedido { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .pedido__cabeca, .pedido__status { grid-column: 1 / -1; }
  .pedido__status { padding: 28px; }
  .pedido__itens { grid-column: 1 / 8; }
  .pedido__entrega { grid-column: 8 / 13; }
}
/* toque: o rádio e a caixa ganham área de 48 px pela linha inteira (já é o rótulo) */
@media (pointer: coarse) {
  .passos__item a, .marcar { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .passos__lista::after, .passos__n, .pagar__opcao { transition: none; }
}