/* pedido.css — composição da página de pedido de atacado (e das páginas de privacidade e 404).

   Ordem de carga: fontes.css -> tokens.css -> botica.css -> ESTE arquivo.
   tokens.css e botica.css são cópias intocadas do design system (o teste compara byte a byte).
   Aqui só entra o que é desta página: classes com prefixo .pd- e valores SEMPRE por var(--bn-*).
   Nenhuma cor escrita à mão: assim tudo funciona no fundo escuro e na folha clara. */

:where([class^="pd-"], [class*=" pd-"]),
:where([class^="pd-"], [class*=" pd-"])::before,
:where([class^="pd-"], [class*=" pd-"])::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- base da página */
html { -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bn-navbar-h) + 16px);               /* o foco nunca fica debaixo da barra do topo */
  /* nem debaixo da barra do total (que no iPhone cresce com a área segura de baixo) */
  scroll-padding-bottom: calc(var(--bn-bottom-bar-h) + env(safe-area-inset-bottom) + 24px); }
@media (min-width: 1024px) { html { scroll-padding-top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 16px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }   /* vários componentes definem display e venceriam o hidden nativo */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0 0 16px; }

/* a barra fixa do celular declara a própria altura (o rodapé usa para não ficar coberto).
   Só vale enquanto a barra existe e está à mostra: as páginas de privacidade e 404 não têm barra,
   e a tela "falta só enviar" a esconde (o padrão do tokens.css é 0px). */
@media (max-width: 1023.98px) { :root:not(.pd-falhou):has(.pd-barra:not([hidden])) { --bn-bottom-bar-h: 64px; } }
@media (min-width: 1024px) { .pd-barra { display: none; } }

/* algum script não carregou (o vigia.js ou o pedido.js põem a classe): a página fica como a de quem está
   sem JavaScript, com a lista de itens, os preços e o aviso com o WhatsApp da Liz. Nenhum controle morto. */
.pd-falhou .pd-so-js { display: none !important; }
/* ...e, no computador, a barra do topo deixa de ser fixa: quem a escurece sobre a folha clara é o pedido.js;
   sem ele a marca clara sumiria ao passar por cima da folha (o sem-js.css faz o mesmo para quem está sem JavaScript) */
@media (min-width: 1024px) { .pd-falhou .bn-nav { position: absolute; } }

.pd-main { padding-bottom: 0; }          /* a folga da barra fica no rodapé, que é o último conteúdo */
.pd-abertura { padding-bottom: 40px; }
@media (min-width: 1024px) {
  .pd-abertura { padding-top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 48px); padding-bottom: var(--bn-space-8); }
}
.pd-sub { max-width: 44ch; }

/* ---------------------------------------------------------------- colunas e etapas */
.pd-principal { display: flex; flex-direction: column; gap: var(--bn-space-5); }
.pd-etapas { display: flex; flex-direction: column; gap: var(--bn-space-3); }
.pd-etapa { display: flex; flex-direction: column; gap: var(--bn-space-5); }
.pd-etapa__titulo { scroll-margin-top: var(--bn-space-8); }
.pd-etapa__titulo:focus-visible { outline: 2px solid var(--bn-focus); outline-offset: 4px; border-radius: var(--bn-r-xs); }
.pd-etapa-atual { font-weight: var(--bn-fw-medium); }

@media (max-width: 1023.98px) {
  .pd-colunas { row-gap: var(--bn-space-6); }
  /* fora do carrinho, o celular mostra o total na barra fixa e os itens na revisão */
  .pd-colunas:not([data-etapa="carrinho"]) > .pd-lateral { display: none; }
}
@media (min-width: 1024px) {
  .pd-colunas { column-gap: var(--bn-space-6); align-items: start; }
  /* resumo grudado abaixo da barra do topo e nunca mais alto que a janela: em janela baixa (notebook, tablet
     deitado) o que não couber rola dentro do próprio resumo, e nenhum botão fica fora de alcance */
  .pd-lateral { position: sticky; top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 24px);
    max-height: calc(100vh - var(--bn-nav-top) - var(--bn-nav-h) - 40px);
    max-height: calc(100dvh - var(--bn-nav-top) - var(--bn-nav-h) - 40px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* janela muito baixa (zoom de 400% no computador, celular deitado): a barra do topo deixa de ser fixa e
   rola com a página, para sobrar área útil acima da barra do total */
@media (max-height: 420px) {
  html { scroll-padding-top: 16px; }
  .bn-nav { position: absolute; }
}
@media (max-height: 420px) and (min-width: 1024px) {
  .pd-lateral { top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
}

.pd-bloco { display: flex; flex-direction: column; gap: var(--bn-space-4); }
.pd-bloco + .pd-bloco { padding-top: var(--bn-space-5); border-top: 1px solid var(--bn-line); }
@media (min-width: 1024px) { .pd-bloco.pd-so-celular + .pd-bloco { padding-top: 0; border-top: 0; } }
.pd-bloco__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.pd-link-toque { min-height: 44px; }
.pd-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-space-3); }
.pd-acoes__voltar { flex: 1 0 100%; }            /* "Voltar" sempre na própria linha, abaixo da ação principal */
.pd-btn-recuo { margin-left: -12px; padding-inline: 12px; }   /* botão sem fundo: o TEXTO alinha com a margem do bloco */
.pd-centro { justify-content: center; }

/* ---------------------------------------------------------------- botões */
/* rótulo longo: quebra em duas linhas em vez de sair da tela (telas de 320 px, zoom, espaçamento de texto maior) */
.pd-btn-quebra { height: auto; min-height: var(--bn-btn-h); padding-block: 12px;
  white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance; }

/* botão principal travado (pedido abaixo do mínimo, identificação sem escolha): ele continua alcançável e, ao
   ser tocado, explica o que falta; por isso o rótulo precisa continuar legível. O estado desligado do sistema
   (opacidade 0,45) deixa o rótulo a 2,2:1; aqui o travado usa tinta e fundo dos tokens (5,2:1) e contorno. */
.bn-surface-cream .bn-btn[aria-disabled="true"] { opacity: 1; background-color: var(--bn-panel-2);
  color: var(--bn-ink-2); border-color: var(--bn-line-strong); }

/* ---------------------------------------------------------------- carrinho: grupos e itens */
.pd-grupo + .pd-grupo { margin-top: var(--bn-space-5); }
.pd-grupo__titulo { display: flex; align-items: center; gap: 8px; }
.pd-grupo__dot { width: 8px; height: 8px; flex: none; border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }

.pd-itens { margin-inline: 0; }                         /* a lista do sistema sangra 8 px para o hover de linha clicável */
.pd-itens .bn-list-row { padding-inline: 0; }           /* aqui a linha não é link: sem sangria */
.pd-itens > li + li::before { left: 0; right: 0; }

.pd-item { flex-wrap: wrap; row-gap: 10px; padding-block: 14px; }
.pd-item__thumb { width: 56px; height: 56px; border-radius: var(--bn-r-sm); }
.pd-item__txt { flex: 1 1 0; }    /* o nome fica sempre ao lado da miniatura e quebra dentro da própria coluna (telas de 320 px) */
.pd-item__ctrl { flex: 1 0 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (max-width: 339.98px) { .pd-item__ctrl { gap: 8px; } }   /* total de 5 algarismos cabe ao lado do stepper */
.pd-item:not(.pd-item--ativo) .bn-list-row__value { color: var(--bn-ink-2); font-weight: var(--bn-fw-body); }
/* item em uma linha só onde o texto tem espaço: tablet (coluna única) e computador largo. Entre 1024 e 1180 px
   o resumo já está ao lado e a coluna dos itens é estreita: o item continua em dois andares, como no celular */
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1180px) {
  .pd-item { flex-wrap: nowrap; }
  .pd-item__ctrl { flex: none; gap: 24px; }
  .pd-item__ctrl .bn-list-row__end { min-width: 104px; }
}

/* quantidade: − [campo] + (48 px de altura, botões de 44 px) */
.pd-stepper { display: inline-flex; align-items: stretch; flex: none; height: var(--bn-input-h);
  border: 1px solid var(--bn-line-strong); border-radius: var(--bn-r-sm); background-color: var(--bn-panel); }
.pd-stepper__btn { display: grid; place-items: center; width: 44px; margin: 0; padding: 0; border: 0;
  border-radius: calc(var(--bn-r-sm) - 1px); background: transparent; color: var(--bn-ink); font-size: 16px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color var(--bn-dur-short) var(--bn-ease-soft); }
.pd-stepper__btn:not(:disabled):hover { background-color: var(--bn-hover); }
.pd-stepper__btn:not(:disabled):active { background-color: var(--bn-pressed); }
.pd-stepper__btn:disabled { opacity: 0.45; cursor: not-allowed; }
.pd-stepper__btn:focus-visible { outline: 2px solid var(--bn-focus); outline-offset: -2px; }
.pd-stepper__input { width: 52px; min-width: 0; margin: 0; padding: 0; border: 0; border-inline: 1px solid var(--bn-line);
  border-radius: 0; background: transparent; color: var(--bn-ink); text-align: center;
  font-family: var(--bn-font-body); font-size: 16px; font-weight: var(--bn-fw-medium); font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none; }
.pd-stepper__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bn-focus); }

/* ---------------------------------------------------------------- resumo e linhas de preço */
.pd-resumo { display: flex; flex-direction: column; gap: var(--bn-space-3); padding: var(--bn-pad-card); }
.pd-resumo__itens { display: flex; flex-direction: column; align-items: flex-start; }
.pd-resumo__itens > .pd-revisao { align-self: stretch; }
.pd-resumo__carrinho { display: flex; flex-direction: column; gap: var(--bn-space-3); margin-top: var(--bn-space-2); }
.pd-resumo__acoes { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bn-space-2); }

.pd-linhas { margin: 0; }
.pd-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 10px; }
.pd-linha + .pd-linha { border-top: 1px solid var(--bn-line); }
.pd-linha dt { font-size: var(--bn-fs-small); line-height: 1.4; color: var(--bn-ink-2); }
.pd-linha dd { margin: 0; text-align: right; white-space: nowrap; color: var(--bn-ink);
  font-size: var(--bn-fs-body-s); line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; }
.pd-linha--total dt { font-size: var(--bn-fs-body); font-weight: var(--bn-fw-medium); color: var(--bn-ink); }
.pd-linha--total dd { font-family: var(--bn-font-display); font-size: var(--bn-fs-title);
  line-height: var(--bn-lh-title); letter-spacing: var(--bn-ls-title); }

/* itens na revisão: "6 × Pasta Dentinho 60g ........ R$ 164,64" (quantidade e valor com algarismos de largura igual) */
.pd-revisao { margin: 0; padding: 0; list-style: none; }
.pd-revisao > li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 8px;
  font-size: var(--bn-fs-small); line-height: 1.4; color: var(--bn-ink); font-variant-numeric: tabular-nums; }
.pd-revisao > li + li { border-top: 1px solid var(--bn-line); }
.pd-revisao__valor { flex: none; font-weight: 600; white-space: nowrap; }

/* cadastro na revisão: rótulo em cima, valor embaixo */
.pd-dados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 24px; margin: 0; }
@media (min-width: 768px) { .pd-dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pd-dados dt { font-size: var(--bn-fs-micro); line-height: var(--bn-lh-micro); color: var(--bn-ink-2); }
.pd-dados dd { margin: 0; font-size: var(--bn-fs-body-s); line-height: 1.4; color: var(--bn-ink); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- avisos (ícone + texto; nunca só cor) */
.pd-aviso { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px;
  border-radius: var(--bn-r-md); background-color: var(--bn-panel-2); color: var(--bn-ink);
  font-size: var(--bn-fs-small); line-height: 1.45; }
.pd-aviso__icone { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.pd-aviso__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pd-aviso--info .pd-aviso__icone { color: var(--bn-state-info); }
.pd-aviso--ok .pd-aviso__icone { color: var(--bn-state-success); }
.pd-aviso--atencao .pd-aviso__icone { color: var(--bn-state-warning); }
.pd-aviso--erro .pd-aviso__icone { color: var(--bn-state-error); }
.pd-aviso--topo { margin-bottom: var(--bn-space-5); }
.pd-aviso:focus-visible, .pd-confirma__pergunta:focus-visible { outline: 2px solid var(--bn-focus); outline-offset: 2px; }
.pd-confirma__corpo { flex: 1; min-width: 0; }   /* a pergunta e os botões quebram dentro da caixa, sem empurrar a borda */
.pd-confirma__pergunta { margin: 0; border-radius: var(--bn-r-xs); }

.pd-erro-form { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--bn-state-error); }

/* telefone da Liz no meio de uma frase: área de toque de 44 px sem mudar a altura da linha */
.pd-fone { display: inline-block; padding-block: 12px; margin-block: -12px; white-space: nowrap; }

/* ---------------------------------------------------------------- formulário */
.pd-cadastro { display: flex; flex-direction: column; gap: var(--bn-space-6);
  padding-top: var(--bn-space-5); border-top: 1px solid var(--bn-line); }
.pd-campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 16px; }
@media (min-width: 768px) {
  .pd-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-campos > .pd-campo--inteiro { grid-column: 1 / -1; }
}
.pd-copia { line-height: 1.5; }                  /* a fonte fica nos 16 px do campo: abaixo disso o iPhone dá zoom ao focar */
.pd-privacidade { margin: 0; max-width: 62ch; }
.pd-privacidade__link { margin: 0; }
.pd-privacidade__link > a { display: inline-flex; align-items: center; min-height: 44px; }

/* preenchimento automático do navegador: mantém o fundo do campo */
.bn-surface-cream .bn-input:-webkit-autofill { -webkit-text-fill-color: var(--bn-ink); box-shadow: 0 0 0 1000px var(--bn-panel) inset; }
.bn-surface-cream .bn-input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--bn-panel) inset, var(--bn-shadow-focus-input-cream); }

/* cartão de escolha com duas linhas (título + apoio) */
.pd-choice__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-choice__titulo { font-size: var(--bn-fs-body); font-weight: var(--bn-fw-medium); color: var(--bn-ink); }
.pd-choice__ajuda { font-size: var(--bn-fs-small); font-weight: var(--bn-fw-body); line-height: 1.4; color: var(--bn-ink-2); }
/* cartão ainda não marcado: contorno que se enxerga (3,4:1 sobre a folha). O contorno padrão do sistema dá 1,2:1,
   e sem ele nada indica que o cartão é uma opção. O marcado segue o sistema: 2 px no tom da marca + o check */
.pd-etapa .bn-choice:not([aria-checked="true"]) { border-color: var(--bn-line-strong); }

/* ---------------------------------------------------------------- barra fixa do celular */
.pd-barra__total { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.pd-barra .bn-btn { flex: none; }
.pd-barra--so-acao .bn-btn { flex: 1; }      /* etapa de envio: só o botão, na largura total */
/* a legenda nunca quebra (a barra tem de medir os 64 px declarados): em tela com menos de 360 px entra a versão curta */
.pd-barra__legenda { white-space: nowrap; }
.pd-barra__legenda--curta { display: none; }
@media (max-width: 359.98px) {
  .pd-barra__legenda:not(.pd-barra__legenda--curta) { display: none; }
  .pd-barra__legenda--curta { display: block; }
  .pd-barra .bn-btn { padding-inline: 16px; }
}

/* ---------------------------------------------------------------- tela "falta só enviar" */
.pd-confirmacao { padding-top: calc(var(--bn-navbar-h) + env(safe-area-inset-top) + 40px); padding-bottom: var(--bn-space-7); }
@media (min-width: 1024px) { .pd-confirmacao { padding-top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 64px); } }

/* ---------------------------------------------------------------- aviso rápido (toast): sempre escuro */
.pd-toast { position: fixed; z-index: var(--bn-z-toast); left: var(--bn-gutter); right: var(--bn-gutter);
  top: calc(var(--bn-navbar-h) + env(safe-area-inset-top) + 8px);
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border: 1px solid var(--bn-line); border-radius: var(--bn-r-md);
  background-color: var(--bn-night-overlay); color: var(--bn-ink); box-shadow: var(--bn-shadow-float);
  font-size: var(--bn-fs-body-s); line-height: var(--bn-lh-body-s); }
.pd-toast__icone { width: 16px; height: 16px; flex: none; color: var(--bn-state-success); }
.pd-toast--info .pd-toast__icone { color: var(--bn-state-info); }
@media (min-width: 1024px) {
  .pd-toast { top: auto; bottom: 32px; left: 50%; right: auto; translate: -50% 0; max-width: 420px; }
}
@media (prefers-reduced-motion: no-preference) {
  .pd-toast { animation: pd-toast-entra var(--bn-dur-medium) var(--bn-ease-out); }
  @keyframes pd-toast-entra { from { opacity: 0.6; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- rodapé compacto */
.pd-rodape { padding-top: var(--bn-space-8); padding-bottom: calc(48px + var(--bn-bottom-bar-h) + env(safe-area-inset-bottom)); }
.pd-rodape .bn-footer__brand { margin-top: 0; }
.pd-rodape .bn-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------- páginas de texto (privacidade, 404) */
.pd-vazio { padding-top: calc(var(--bn-navbar-h) + env(safe-area-inset-top) + 40px); padding-bottom: var(--bn-space-7); }
@media (min-width: 1024px) { .pd-vazio { padding-top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 64px); } }
.pd-prosa-acoes { margin-top: var(--bn-space-6); }
/* links no meio do texto corrido: alvo de toque de 44 px sem mexer na entrelinha; endereço longo quebra */
.pd-prosa a { display: inline-block; padding-block: 11px; margin-block: -11px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- alto contraste do Windows (forced-colors)
   Nesse modo as sombras somem, e com elas o foco destes controles: eles ganham um contorno de verdade. */
@media (forced-colors: active) {
  .pd-etapa :is(input, textarea):focus, .pd-barra :is(a, button):focus-visible, .bn-skip:focus {
    outline: 2px solid Highlight; outline-offset: 2px; }
  .pd-etapa .pd-stepper__input:focus { outline-offset: -2px; }
}

/* ---------------------------------------------------------------- só no computador / só no celular
   (variação de tela, não etapa escondida; fica no fim do arquivo para vencer os display acima) */
@media (max-width: 1023.98px) { .pd-so-desktop { display: none; } }
@media (min-width: 1024px) { .pd-so-celular { display: none; } }