/* ---------- Página de pedido ----------
   Mesma identidade do catálogo (cores, tipografia, busca), densidade
   diferente. No catálogo o card tem foto 16:10 e cabem 2 produtos por tela
   de celular — ótimo para olhar, péssimo para digitar 40 linhas. Aqui a
   foto vira miniatura e a linha encolhe: cabem ~10 por tela.

   Os tamanhos e pesos vêm dos tokens de estilo.css. Nada de valor solto. */

/* ---------- topo ----------
   Não é fixo: a marca não ajuda em nada enquanto o cliente digita
   quantidade, e cada pixel preso no topo é pixel a menos de produto. */
/* três colunas: volta · marca · ajuda. As laterais são 1fr para a marca
   ficar no centro exato da tela, e não empurrada pelo lado mais largo. */
.ped-topo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: linear-gradient(168deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
}

.ped-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 40px;
  color: var(--azul-suave);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  text-decoration: none;
  white-space: nowrap;
}

.ped-voltar:hover { color: var(--branco); }

/* ---------- ajuda no canto direito ----------
   Não é caminho de compra: o carrinho vive na barra de baixo. Aqui fica a
   saída para a dúvida — o que a loja grande põe neste canto. */
.ped-ajuda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  min-height: 40px;
  padding: 5px 12px 5px 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  color: var(--branco);
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s, border-color .14s;
}

.ped-ajuda:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }

.pa-icone {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--zap);
}

.pa-icone svg { width: 17px; height: 17px; fill: #fff; }

.pa-txt { display: flex; flex-direction: column; line-height: var(--lh-densa); }
.pa-txt b     { font-size: var(--t-xs); font-weight: var(--p-bold); }
.pa-txt small { font-size: var(--t-3xs); color: var(--azul-suave); }

/* ---------- assinatura de marca ----------
   MARESIAS · escudo · CAPAS, a mesma hierarquia da arte de abertura: o nome
   em peso de logotipo e "CAPAS" mais leve, bem espaçado, em azul suave.
   Duas palavras idênticas não seriam um logotipo — seriam duas palavras.

   Caixa alta é exceção consentida aqui: é o nome da própria loja, que a
   regra do PADRAO-DE-ESCRITA trata como logotipo, e não nome de produto,
   onde a maiúscula apagaria a grafia de marca (iPhone, MagSafe). */
.ped-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* as duas linhas do logotipo, empilhadas ao lado do escudo e centradas
   uma sob a outra, como no logo impresso */
.pm-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pm-nome {
  font-size: var(--t-body);
  font-weight: 800;                /* peso de logotipo, como na capa */
  letter-spacing: var(--ls-hero);
}

/* CAPAS bem espaçado e mais claro, como no logotipo: a segunda linha
   assenta o nome em vez de disputar com ele */
.pm-linha {
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
  letter-spacing: var(--ls-marca);
  color: var(--azul-suave);
  /* O espaçamento entre letras é somado também depois da última, o que
     jogaria a palavra para a esquerda do eixo. A margem negativa desconta
     essa sobra para CAPAS ficar centrado de verdade sob MARESIAS. */
  margin-right: calc(var(--ls-marca) * -1);
}

/* O escudo é 420x488 — mais alto que largo. Antes vinha do favicon, que é
   64x64: o brasão tinha sido espremido num quadrado e chegava achatado.
   Aqui a altura manda e a largura acompanha. */
.ped-marca img {
  align-self: center;
  height: 36px;          /* abaixo disso os três filetes do escudo somem */
  width: auto;
}

/* No celular a marca fica; as laterais viram só ícone. Assim o centro
   continua sendo a marca e nada é cortado — três blocos de texto não cabem
   em 375px. */
@media (max-width: 620px) {
  .ped-topo { gap: 8px; padding: 9px 12px; }
  .ped-marca { gap: 8px; }
  .ped-marca img { height: 32px; }
  .pm-nome { font-size: var(--t-sm); }
  .pv-txt, .pa-txt { display: none; }
  .ped-voltar { font-size: var(--t-body); }
  .ped-ajuda { padding: 5px; border-color: transparent; }
}

/* ---------- busca e atalhos ---------- */
.ped-ferramentas {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}

/* atalhos em fita horizontal, não em grade: a grade do catálogo ocupa
   uma tela inteira e aqui o espaço é do produto */
/* todas as abas visiveis: rolar para o lado esconde setor e o cliente
   nao descobre que existe */
.ped-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.ped-atalhos::-webkit-scrollbar { display: none; }

/* ---------- seletor de setor (só no celular) ----------
   As 18 abas abertas quebravam em 6 linhas: 184px de faixa fixa numa tela
   de 629px. Guardadas atrás do nome do setor atual, continuam todas
   alcançáveis — o cliente toca uma vez e vê a lista inteira, sem rolagem
   lateral. Some no computador, onde as abas cabem em 2 linhas. */
.ped-setor-atual { display: none; }

/* aba de setor: um setor por vez, não a página inteira corrida */
.ped-atalhos button {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--cinza);
  border: 1.5px solid var(--borda-campo);
  border-radius: 999px;
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}

.ped-atalhos button:hover { border-color: var(--azul-claro); color: var(--azul); }

.ped-atalhos button.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--branco);
}

/* quantos itens o cliente já tirou daquele setor */
.ped-atalhos button b {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--promo);
  color: var(--promo-escuro);
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  font-variant-numeric: tabular-nums;
}

.ped-atalhos button b[hidden] { display: none; }

/* ---------- lista ---------- */
#ped-lista { max-width: 900px; margin: 0 auto; padding: 0 12px 140px; }

.ped-cat { margin-top: 18px; scroll-margin-top: 112px; }

/* ---------- cabeçalho do setor ----------
   Com um setor por vez na tela, este bloco é a única âncora de "onde
   estou". Faixa azul da marca, para não ser confundido com produto. */
.ped-cat-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 13px 16px;
  background: linear-gradient(168deg, var(--azul) 0%, var(--azul-escuro) 100%);
  border-radius: 10px;
  color: var(--branco);
}

.ped-cat-nome { flex: 1; min-width: 0; }

/* mesmo corpo do título de categoria no catálogo (--t-h3): com um setor
   por vez na tela, este é o letreiro que diz onde o cliente está */
.ped-cat-topo h2 {
  font-size: var(--t-h3);
  font-weight: var(--p-bold);
  line-height: var(--lh-titulo);
}

.ped-cat-topo p {
  margin-top: 3px;
  color: var(--azul-suave);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
}

/* quanto já saiu deste setor, por extenso */
.ped-cat-total {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--promo);
  color: var(--promo-escuro);
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  text-align: center;
  line-height: var(--lh-densa);
}

.ped-cat-total[hidden] { display: none; }

.ped-cat.promo .ped-cat-topo {
  background: linear-gradient(168deg, var(--promo-forte) 0%, var(--promo-escuro) 100%);
}

/* ---------- produto: linha compacta ---------- */
.ped-produto {
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--branco);
  overflow: hidden;
  /* a busca e as abas de setor ficam grudadas no topo: sem esta folga,
     abrir ou fechar um produto o encosta debaixo delas e o cliente vê o
     produto errado */
  scroll-margin-top: 112px;
}

.ped-produto + .ped-produto { margin-top: 8px; }
.ped-produto[open] { border-color: var(--azul-claro); }

.ped-produto summary {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.ped-produto summary::-webkit-details-marker { display: none; }

.ped-thumb {
  width: 70px; height: 70px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--borda-fina);
  border-radius: 7px;
}

/* a miniatura amplia no clique — precisa parecer clicável */
img.ped-thumb {
  cursor: zoom-in;
  transition: border-color .15s, transform .15s;
}

img.ped-thumb:hover {
  border-color: var(--azul-claro);
  transform: scale(1.06);
}

.ped-nome {
  flex: 1;
  min-width: 0;
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  line-height: var(--lh-densa);
  color: var(--texto);
}

.ped-nome small {
  display: block;
  margin-top: 2px;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-normal);
}

/* selo do que já foi escolhido: o comprador vê sem abrir */
.ped-selo {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* o subtotal em R$ ao lado da quantidade: só "105 un" não diz o peso do
   produto dentro do pedido */
.ped-selo b {
  display: block;
  margin-top: 1px;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  color: var(--promo-borda);
  font-variant-numeric: tabular-nums;
}

.ped-selo[hidden] { display: none; }

#ped-limpar {
  padding: 5px 12px;
  border: 1.5px solid var(--risco-borda);
  border-radius: 999px;
  background: var(--branco);
  color: var(--risco);
  font: inherit;
  font-size: var(--t-2xs);
  font-weight: var(--p-forte);
  cursor: pointer;
}

#ped-limpar:hover { background: var(--risco-fundo); border-color: var(--risco-borda); }

.ped-seta { flex-shrink: 0; color: var(--azul-claro); font-size: var(--t-body); }
.ped-produto[open] .ped-seta { transform: rotate(90deg); }

/* ---------- aviso de pacote fechado ----------
   Azul da marca, não âmbar: âmbar já é "preencha aqui" nesta página, e
   esta é uma condição de venda, não um campo. */
.ped-pacote {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 2px 10px;
  margin: 10px 12px 4px;
  padding: 10px 12px;
  background: var(--azul-fundo);
  border-left: 4px solid var(--azul);
  border-radius: 0 7px 7px 0;
  color: var(--azul-escuro);
  font-size: var(--t-xs);
  line-height: var(--lh-densa);
  /* pulso leve: é condição de venda que muda o jeito de comprar, então
     precisa ser notada. Lento e de baixa amplitude, para não virar
     pisca-pisca ao lado dos campos que o cliente está preenchendo. */
  animation: ped-respira 3s ease-in-out infinite;
}

@keyframes ped-respira {
  0%, 100% { background: var(--azul-fundo); box-shadow: 0 0 0 0 rgba(30, 58, 111, .22); }
  50%      { background: var(--azul-fundo); box-shadow: 0 0 0 5px rgba(30, 58, 111, 0); }
}

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

/* ícone de caixa: diz de relance que a regra é sobre embalagem, antes
   mesmo de a frase ser lida */
.ped-pacote::before {
  content: '';
  grid-row: 1 / span 2;
  width: 20px; height: 20px;
  margin-top: 1px;
  background: var(--azul);
  -webkit-mask: var(--icone-caixa) center / contain no-repeat;
          mask: var(--icone-caixa) center / contain no-repeat;
}

.ped-pacote b {
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
}

/* fio azul na lateral do produto de pacote: dá para notar na lista fechada */
.ped-produto.e-pacote { border-left: 3px solid var(--azul); }

/* ---------- modelos ---------- */
.ped-modelos { border-top: 1px solid var(--borda-fina); }

/* ---------- linha de modelo ----------
   Grade de colunas, não flex solto. Com flex, o preço e os campos caíam em
   posição diferente a cada linha conforme o tamanho do nome, e 300 linhas
   desalinhadas obrigam o olho a procurar o mesmo dado toda vez. Aqui as
   colunas são fixas e o cliente lê em coluna, como em tabela de
   distribuidor: modelo · preço · un/caixa · quantidade · ação.

   `min-content` na coluna do preço deixa cada bloco com a largura que
   precisa sem esticar; o nome fica com o resto. */
.ped-modelo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content auto;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
}

/* dica e observação atravessam a linha inteira, abaixo das colunas */
.ped-modelo > .ped-dica,
.ped-modelo > .ped-obs { grid-column: 1 / -1; }

/* Linha que também vende em caixa tem campos demais para caber ao lado do
   nome: avulsas, caixa e Aplicar vão para a faixa de baixo, inteira. */
.ped-modelo.tem-caixa {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.ped-modelo.tem-caixa > .ped-campos { grid-column: 1 / -1; }

/* No celular não há largura para três colunas: nome e preço dividem a
   primeira linha, os campos vêm embaixo. Continua alinhado, em duas faixas. */
@media (max-width: 620px) {
  .ped-modelo { grid-template-columns: minmax(0, 1fr) max-content; gap: 8px 10px; }
  .ped-modelo > .ped-campos { grid-column: 1 / -1; }
}

/* mesmo motivo do aviso na barra: o display: flex acima vence o atributo
   hidden, e a busca esconde linha por linha com hidden */
.ped-modelo[hidden] { display: none; }

.ped-modelo + .ped-modelo { border-top: 1px solid var(--borda-fina); }
.ped-modelo.tem-qtd { background: var(--azul-fundo); }

.ped-modelo-nome {
  min-width: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-densa);
  overflow-wrap: anywhere;
}

/* o preço é o dado que decide a compra: sobe para a escala própria de
   preço (--t-preco-sm) em vez de ficar do tamanho do nome do modelo */
.ped-preco {
  font-size: var(--t-preco-sm);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* preço de caixa em verde: é economia, e verde é o que esta página usa
   para ganho. Selo, não linha solta — assim o olho separa das duas. */
/* linha com caixa fechada no pedido: fio azul à esquerda, para o lojista
   achar de relance o que vai vir fechado no meio de 300 linhas avulsas */
.ped-modelo.com-caixa { box-shadow: inset 3px 0 0 var(--azul); }

/* embaixo do preço, alinhado à direita com ele: em bloco próprio para o
   olho ler "este é o preço / e este é o da caixa", não uma frase só */
.ped-preco small {
  display: block;
  width: fit-content;
  margin: 3px 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ok-fundo);
  color: var(--ok);
  font-size: var(--t-3xs);
  font-weight: var(--p-forte);
}

/* ---------- caixa fechada, ao lado das avulsas ----------
   Não é um modo que substitui o outro: o cliente pode levar 1 caixa
   fechada E mais 5 peças soltas do mesmo modelo. Por isso o campo da caixa
   fica no mesmo lugar, apenas destacado em azul, e sem masculino/feminino
   — a caixa vem sortida de fábrica. */
.ped-campos-avulso { display: flex; flex-wrap: wrap; gap: 8px; }

.ped-campos-caixa {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border: 1.5px solid var(--azul-claro);
  border-radius: 8px;
  background: var(--azul-fundo);
}

.ped-campos-caixa label { color: var(--azul); }

.pc-nota {
  color: var(--azul);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
  line-height: var(--lh-densa);
  white-space: nowrap;
}

.pc-nota b { font-weight: var(--p-bold); }

/* ---------- campos de quantidade ---------- */
/* quebra em linha: produto de cor fixa tem um campo por cor (três no
   teclado 360°), mais o bloco da caixa e o Aplicar — não cabem lado a
   lado no celular */
.ped-campos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.ped-campo {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ped-campo label {
  color: var(--texto-fraco);
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* 44px de altura, não os 34 de antes: digitar quantidade é O gesto desta
   página e o dedo erra em alvo menor. Vale para o campo, para o Aplicar e
   para o par Unidade/Caixa, que ficam lado a lado na mesma linha. */
.ped-campo input {
  width: 62px;
  padding: 6px 7px;
  min-height: 44px;
  border: 1.5px solid var(--borda-campo);
  border-radius: 7px;
  background: var(--branco);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.ped-campo input:focus { outline: none; border-color: var(--azul-claro); }
.ped-campo input::-webkit-outer-spin-button,
.ped-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- botão Aplicar ---------- */
/* ---------- selo de confirmação ----------
   Aqui havia um botão "Aplicar" que piscava em âmbar pedindo um clique —
   enquanto o item JÁ estava no carrinho e JÁ somava no total desde a
   primeira tecla. O botão dizia o contrário do que a página fazia.

   Agora é só o aviso do que aconteceu: aparece quando a linha tem
   quantidade, some quando zera. Verde, que nesta página é ganho
   confirmado. Não é clicável porque não há nada para clicar. */
.ped-status {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 13px;
  border: 1.5px solid var(--ok-borda);
  border-radius: 999px;
  background: var(--ok-fundo);
  color: var(--ok);
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* o display acima venceria o atributo hidden, e é por hidden que o JS
   esconde o selo na linha vazia */
.ped-status[hidden] { display: none; }

/* ---------- fechar pelo rodapé do produto ----------
   O caminho de volta fica onde o cliente terminou de ler, não só lá em cima. */
.ped-fechar {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-top: 1px solid var(--borda);
  background: var(--cinza);
  color: var(--azul);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--p-forte);
  text-align: center;
  cursor: pointer;
}

.ped-fechar:hover { background: var(--azul-fundo); }

/* ---------- especificações de cor ----------
   Não é um "campo de observação" escondido atrás de um link: é onde o
   cliente diz quais cores quer. Precisa ser visto. */
.ped-obs {
  flex: 1 1 100%;
  margin-top: 4px;
  padding: 9px 11px;
  background: var(--promo-fundo);
  border: 1.5px solid var(--promo-borda);
  border-left: 4px solid var(--promo);
  border-radius: 0 8px 8px 0;
}

.ped-obs-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.ped-obs-topo b {
  color: var(--promo-escuro);
  font-size: var(--t-xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.ped-obs-topo span {
  color: var(--promo-escuro);
  font-size: var(--t-3xs);
  font-weight: var(--p-medio);
}

.ped-obs textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--promo-borda);
  border-radius: 7px;
  background: var(--branco);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--texto);
  resize: vertical;
  min-height: 44px;
}

.ped-obs textarea:focus { outline: none; border-color: var(--promo); }
.ped-obs textarea::placeholder { color: var(--promo-escuro); }

/* ---------- empurrão para a caixa fechada ----------
   É o argumento de venda da página: o cliente está a poucas peças de
   economizar de verdade. Ganhou ícone de etiqueta e o valor economizado
   em destaque — o texto corrido de antes passava batido no meio da lista. */
/* block, não flex: o texto vem do JS com <b> no meio da frase, e em flex
   cada <b> vira um item separado — a frase quebrava em pedaços soltos no
   celular. Aqui o ícone é inline e o resto flui como texto. */
.ped-dica {
  display: block;
  padding: 7px 10px;
  background: var(--ok-fundo);
  border: 1px solid var(--ok-borda);
  border-left: 3px solid var(--ok);
  border-radius: 0 6px 6px 0;
  color: var(--ok);
  font-size: var(--t-2xs);
  line-height: var(--lh-densa);
}

.ped-dica::before {
  content: '';
  display: inline-block;
  vertical-align: -2px;
  margin-right: 6px;
  width: 13px; height: 13px;
  background: var(--ok);
  /* etiqueta de preço */
  -webkit-mask: var(--icone-etiqueta) center / contain no-repeat;
          mask: var(--icone-etiqueta) center / contain no-repeat;
}

.ped-dica b {
  font-weight: var(--p-bold);
  font-variant-numeric: tabular-nums;
}

/* O display acima vence o atributo hidden, e o JS esconde a dica por
   hidden quando não há economia a anunciar — sem esta linha sobra uma
   faixa verde vazia em toda linha da lista. */
.ped-dica[hidden] { display: none; }

/* atalho para fechar a caixa sem o cliente ter de refazer a conta */
.ped-trocar-caixa {
  margin-left: 8px;
  padding: 4px 11px;
  min-height: 30px;
  border: 1.5px solid var(--ok);
  border-radius: 999px;
  background: var(--branco);
  color: var(--ok);
  font: inherit;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background .14s, color .14s;
}

.ped-trocar-caixa:hover { background: var(--ok); color: var(--branco); }

/* ---------- rodapé fixo: barra + lista do carrinho ---------- */
.ped-rodape {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
}

.ped-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(168deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
  box-shadow: 0 -4px 20px rgba(26, 47, 92, .22);
}

/* o resumo é um botão: clicar abre a lista do que já foi escolhido */
.ped-barra-info {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: var(--lh-densa);
  text-align: left;
  cursor: pointer;
}

.ped-barra-info:disabled { cursor: default; }
.ped-barra-info b { font-size: var(--t-body); font-weight: var(--p-forte); }

.ped-ver {
  display: block;
  margin-top: 2px;
  color: var(--azul-suave);
  font-size: var(--t-2xs);
  font-style: normal;
  font-weight: var(--p-forte);
}

.ped-barra-info:disabled .ped-ver { display: none; }

/* ---------- lista do carrinho ---------- */
.ped-carrinho {
  max-height: 52vh;
  overflow-y: auto;
  background: var(--branco);
  border-top: 3px solid var(--azul-claro);
  box-shadow: 0 -10px 30px rgba(26, 47, 92, .18);
}

.ped-carrinho-topo {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--cinza);
  border-bottom: 1px solid var(--borda);
}

.ped-carrinho-topo b {
  flex: 1;
  color: var(--azul-escuro);
  font-size: var(--t-body);
  font-weight: var(--p-bold);
}

#ped-fechar-carrinho {
  padding: 0 6px;
  border: none;
  background: none;
  color: var(--texto-fraco);
  font-size: var(--g-p);
  line-height: 1;
  cursor: pointer;
}

.ped-item-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border-bottom: 1px solid var(--borda-fina);
}

.ped-item-linha:hover { background: var(--azul-fundo); }

.ped-item {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1;
  min-width: 0;
  padding: 10px 4px 10px 16px;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ped-item-nome {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-densa);
  color: var(--texto);
}

.ped-item-nome small {
  display: block;
  margin-top: 2px;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
}

.ped-item-nome i {
  display: block;
  margin-top: 3px;
  color: var(--promo-escuro);
  font-size: var(--t-2xs);
  font-style: normal;
}

.ped-item-valor {
  flex-shrink: 0;
  text-align: right;
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ped-item-valor small {
  display: block;
  color: var(--texto-fraco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
}

.ped-tirar {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: 1.5px solid var(--risco-borda);
  border-radius: 50%;
  background: var(--branco);
  color: var(--risco);
  font-size: var(--t-body);
  line-height: 1;
  cursor: pointer;
}

.ped-tirar:hover { background: var(--risco-fundo); border-color: var(--risco-borda); }

/* a linha para onde o cliente voltou pisca uma vez, para ele achar o campo */
@keyframes ped-achou {
  0%, 100% { background: transparent; }
  30%      { background: var(--promo-fundo); }
}

.ped-modelo.achou { animation: ped-achou 1.4s ease-in-out; }

.ped-barra-info span {
  margin-left: 10px;
  font-size: var(--t-preco-md);
  font-weight: var(--p-bold);
  font-variant-numeric: tabular-nums;
}

.ped-barra-info em {
  display: block;
  margin-top: 2px;
  color: var(--promo-borda);
  font-size: var(--t-2xs);
  font-style: normal;
  font-weight: var(--p-forte);
}

/* `display: block` acima vence o atributo hidden, que só traz display:none
   com especificidade zero. Sem esta linha o aviso de pedido mínimo fica na
   tela mesmo com o total já acima do mínimo. */
.ped-barra-info em[hidden] { display: none; }

#ped-finalizar {
  flex-shrink: 0;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--zap);
  color: #fff;
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--p-bold);
  cursor: pointer;
}

#ped-finalizar:disabled { background: rgba(255,255,255,.16); color: rgba(255,255,255,.5); cursor: default; }

/* ---------- aviso de pedido retomado ---------- */
.ped-retomada {
  position: sticky;
  top: 0;
  z-index: 85;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 12px 16px;
  background: var(--promo-fundo);
  border-bottom: 2px solid var(--promo);
}

.ped-retomada[hidden] { display: none; }
.ped-retomada p { flex: 1; min-width: 200px; font-size: var(--t-sm); color: var(--promo-escuro); }
.ped-retomada b { display: block; font-weight: var(--p-bold); color: var(--promo-escuro); }
.ped-retomada span { font-size: var(--t-2xs); }

.ped-retomada-acoes { display: flex; gap: 8px; }

.ped-retomada button {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--promo);
  background: var(--promo);
  color: var(--promo-escuro);
  font: inherit;
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  cursor: pointer;
  white-space: nowrap;
}

#ret-novo { background: var(--branco); color: var(--promo-escuro); }

/* ---------- telas cheias: revisão e confirmação ---------- */
.ped-tela {
  position: fixed;
  inset: 0;
  z-index: 120;
  overflow-y: auto;
  background: var(--cinza);
}

.ped-tela[hidden] { display: none; }

.ped-tela-caixa { max-width: 720px; margin: 0 auto; padding-bottom: 60px; }

.ped-tela-topo {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 16px;
  background: linear-gradient(168deg, var(--azul) 0%, var(--azul-escuro) 100%);
  color: var(--branco);
}

.ped-tela-voltar {
  padding: 0;
  border: none;
  background: none;
  color: var(--azul-suave);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  cursor: pointer;
}

.ped-tela-topo h2 {
  margin-top: 4px;
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
}

.ped-tela-corpo { padding: 16px; }

/* ---------- itens da revisão ---------- */
.rev-produto {
  margin-bottom: 10px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
}

.rev-produto-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--cinza);
  border-bottom: 1px solid var(--borda);
}

.rev-produto-topo img {
  width: 44px; height: 44px;
  flex-shrink: 0;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--borda-fina);
  border-radius: 6px;
}

.rev-produto-topo b {
  flex: 1;
  min-width: 0;
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  line-height: var(--lh-densa);
}

.rev-produto-topo span {
  flex-shrink: 0;
  font-size: var(--t-sm);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
  font-variant-numeric: tabular-nums;
}

.rev-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 12px;
  font-size: var(--t-sm);
}

.rev-linha + .rev-linha { border-top: 1px solid var(--borda-fina); }
.rev-linha em { flex: 1; min-width: 130px; font-style: normal; }
.rev-linha i { color: var(--texto-fraco); font-style: normal; font-size: var(--t-2xs); }
.rev-linha b { font-weight: var(--p-bold); font-variant-numeric: tabular-nums; }

.rev-linha-obs {
  flex: 1 1 100%;
  padding: 5px 8px;
  background: var(--promo-fundo);
  border-left: 3px solid var(--promo);
  border-radius: 0 5px 5px 0;
  color: var(--promo-escuro);
  font-size: var(--t-2xs);
}

/* ---------- resumo ---------- */
.rev-resumo {
  margin: 14px 0 20px;
  padding: 14px 16px;
  background: var(--branco);
  border: 2px solid var(--azul);
  border-radius: 10px;
}

.rev-resumo dl { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rev-resumo dt { flex: 1; font-size: var(--t-body); color: var(--texto-fraco); }
.rev-resumo dd { font-size: var(--t-body); font-weight: var(--p-forte); font-variant-numeric: tabular-nums; }

/* o total ocupa a linha inteira, abaixo das contagens */
.rev-resumo .rev-total {
  display: flex;
  width: 100%;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
}

.rev-resumo .rev-total dt { font-size: var(--t-h4); font-weight: var(--p-forte); color: var(--texto); }
.rev-resumo .rev-total dd { font-size: var(--t-preco-lg); font-weight: var(--p-bold); color: var(--azul-escuro); }

.rev-abaixo {
  margin-top: 10px;
  padding: 9px 11px;
  background: var(--promo-fundo);
  border-left: 4px solid var(--promo);
  border-radius: 0 6px 6px 0;
  color: var(--promo-escuro);
  font-size: var(--t-xs);
  line-height: var(--lh-densa);
}

/* ---------- formulário ---------- */
#rev-form h3 {
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
  color: var(--azul-escuro);
}

.rev-ajuda { margin: 3px 0 14px; color: var(--texto-fraco); font-size: var(--t-sm); }

.rev-campo { display: block; margin-bottom: 13px; }

.rev-campo > span {
  display: block;
  margin-bottom: 5px;
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
  color: var(--texto);
}

.rev-campo i {
  font-style: normal;
  font-size: var(--t-3xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--risco);
}

.rev-campo i.opcional { color: var(--texto-fraco); }

.rev-campo input,
.rev-campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--borda-campo);
  border-radius: 9px;
  background: var(--branco);
  font: inherit;
  font-size: var(--t-body);
  color: var(--texto);
}

.rev-campo input:focus,
.rev-campo textarea:focus { outline: none; border-color: var(--azul-claro); }
.rev-campo input.erro { border-color: var(--risco); background: var(--risco-fundo); }

.rev-erro {
  margin-bottom: 10px;
  padding: 9px 12px;
  background: var(--risco-fundo);
  border-left: 4px solid var(--risco);
  border-radius: 0 6px 6px 0;
  color: var(--risco);
  font-size: var(--t-sm);
  font-weight: var(--p-forte);
}

.rev-erro[hidden] { display: none; }

.rev-enviar {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 999px;
  background: var(--zap);
  color: #fff;
  font: inherit;
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
  cursor: pointer;
}

.rev-enviar:hover { background: var(--zap-hover); }
.rev-nota { margin-top: 11px; color: var(--texto-fraco); font-size: var(--t-xs); line-height: var(--lh-densa); text-align: center; }

/* ---------- confirmação ---------- */
.ok-corpo { padding: 40px 20px; text-align: center; }

/* O ✓ era um caractere de texto a 34px — o único tamanho fora do sistema
   na página, e o desenho mudava de fonte para fonte. Agora é ícone, e o
   tamanho vem do token de ícone (--g-g). */
.ok-marca {
  width: 66px; height: 66px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: var(--ok);
  border-radius: 50%;
  font-size: 0;              /* engole o texto de reserva do HTML */
}

.ok-marca::before {
  content: '';
  width: var(--g-g); height: var(--g-g);
  background: var(--branco);
  -webkit-mask: var(--icone-check) center / contain no-repeat;
          mask: var(--icone-check) center / contain no-repeat;
}

.ok-corpo h2 { font-size: var(--t-h2); font-weight: var(--p-bold); color: var(--azul-escuro); }
.ok-numero { margin-top: 6px; font-size: var(--t-body); color: var(--texto-fraco); }
.ok-numero b { font-size: var(--t-h4); font-weight: var(--p-bold); color: var(--texto); font-variant-numeric: tabular-nums; }

.ok-contato {
  max-width: 420px;
  margin: 18px auto 0;
  font-size: var(--t-lead);
  line-height: var(--lh-corpo);
  color: var(--texto);
}

.ok-horario {
  max-width: 340px;
  margin: 20px auto 0;
  padding: 14px 16px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  font-size: var(--t-sm);
  line-height: var(--lh-solta);
  color: var(--texto);
}

.ok-horario b {
  display: block;
  margin-bottom: 5px;
  font-size: var(--t-2xs);
  font-weight: var(--p-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--azul);
}

.ok-acoes { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; }

.ok-zap, .ok-pdf, .ok-voltar {
  width: 100%;
  max-width: 320px;
  padding: 13px 20px;
  border-radius: 999px;
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--p-bold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.ok-zap { background: var(--zap); border: none; color: #fff; }
.ok-pdf { background: var(--branco); border: 1.5px solid var(--azul); color: var(--azul); }
.ok-voltar { background: none; border: none; color: var(--texto-fraco); font-weight: var(--p-forte); }

.ped-vazio {
  padding: 40px 20px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: var(--t-lead);
}

/* ═══════ experimento de layout: faixa em grade ═══════
   Ligado por `LAYOUT_GRADE`, em pedido.js. Hoje só Capas Tablet sai
   assim, para comparar com Capas Premium em lista na mesma página.
   Escolhida uma das duas, este bloco some ou vira o padrão. */

.ped-cat.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  /* sem isto o card curto estica até a altura do card mais alto da linha,
     e a grade vira um tabuleiro de retângulos vazios */
  align-items: start;
}

/* o cabeçalho do setor atravessa a grade inteira */
.ped-cat.grade > .ped-cat-topo { grid-column: 1 / -1; margin-bottom: 0; }

/* O espaçamento da lista (`.ped-produto + .ped-produto`) vaza para cá e
   desce 8px em todo card que não é o primeiro — o suficiente para a
   primeira coluna ficar desalinhada das outras. Na grade quem espaça é o
   `gap`. */
.ped-cat.grade .ped-produto + .ped-produto { margin-top: 0; }

/* ---------- card fechado ---------- */
.ped-produto.grade > summary {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0 0 12px;
}

.ped-card-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  margin-bottom: 4px;
  padding: 8px;
  background: var(--cinza);
  border-bottom: 1px solid var(--borda-fina);
}

/* Altura fixa e `contain`: as fotos são recortes de página com proporções
   muito diferentes. Com proporção livre, um recorte panorâmico e um
   quadrado empurram o nome do produto para alturas diferentes e a grade
   fica torta. */
.ped-produto.grade .ped-thumb {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ped-produto.grade .ped-nome { flex: none; padding: 0 11px; }

/* O preço é o maior número do card, como no catálogo: no atacado é ele
   que decide a compra. É a diferença que este experimento testa — na
   lista compacta ele só aparece depois de abrir o produto. */
.ped-card-preco { padding: 0 11px; }
.ped-card-preco b {
  font-size: var(--t-preco-lg);
  font-weight: var(--p-bold);
  line-height: var(--lh-justa);
  font-variant-numeric: tabular-nums;
}
.ped-card-preco small {
  display: block;
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--texto-fraco);
}

.ped-card-info {
  padding: 0 11px;
  font-size: var(--t-2xs);
  color: var(--texto-fraco);
  line-height: var(--lh-densa);
}

.ped-produto.grade .ped-selo { align-self: flex-start; margin: 2px 11px 0; }

/* ---------- card aberto ----------
   Ocupa a linha inteira e volta a ser a barra compacta da lista: os
   campos de quantidade não cabem em 200px, e a foto de 160px esticada
   em 900px não ajuda ninguém — a essa altura o cliente já escolheu o
   produto e o que ele quer ver é a lista de modelos. */
.ped-produto.grade[open] { grid-column: 1 / -1; }

.ped-produto.grade[open] > summary {
  flex-direction: row;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
}

.ped-produto.grade[open] .ped-card-foto {
  flex: 0 0 70px;
  height: 70px;
  margin: 0;
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
.ped-produto.grade[open] .ped-thumb {
  border: 1px solid var(--borda-fina);
  border-radius: 7px;
  background: #fff;
}

.ped-produto.grade[open] .ped-nome { flex: 1; padding: 0; }
.ped-produto.grade[open] .ped-card-preco { padding: 0; text-align: right; }
/* "23 modelos" é redundante com a lista de modelos logo abaixo */
.ped-produto.grade[open] .ped-card-info { display: none; }
.ped-produto.grade[open] .ped-selo { margin: 0; }

@media (max-width: 560px) {
  /* 165px e não menos: abaixo disso cabem três colunas no celular largo,
     e "R$ 18,00 a 30,00" quebra em duas linhas — o preço é o número que
     decide a compra, e partido ele para de ser lido de relance. Duas
     colunas é o teto no celular. */
  .ped-cat.grade { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 9px; }
  .ped-card-foto { height: 128px; }
  .ped-produto.grade .ped-nome { font-size: var(--t-sm); }
  .ped-card-preco b { font-size: var(--t-preco-md); }
}

/* ---------- produto em falta ----------
   Apagado, mas não escondido. Sumir com o produto faria o cliente
   procurá-lo e achar que o site está quebrado; e a loja perde a chance
   de dizer "chega semana que vem". Ele continua na lista, legível, com o
   selo dizendo o porquê. */
.ped-produto.em-falta { opacity: .55; }
.ped-produto.em-falta:hover { opacity: .8; }

.ped-selo-falta {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--risco-fundo);
  border: 1px solid var(--risco-borda);
  color: var(--risco);
  font-size: var(--t-2xs);
  font-weight: var(--p-medio);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  vertical-align: 1px;
}

/* Reaproveita a caixa do aviso de pacote fechado, trocando o âmbar
   ("olhe aqui") pelo ocre de coisa que não dá para fazer. */
.ped-pacote.ped-em-falta {
  background: var(--risco-fundo);
  border-color: var(--risco-borda);
  color: var(--risco);
}

/* ---------- confirmar o envio ----------
   Caixa por cima da revisão, não tela cheia: o cliente precisa continuar
   vendo que está no pedido dele. z-index acima de .ped-tela (120), que
   segue aberta atrás. */
.ped-confirma {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(28, 35, 51, .55);
}

.conf-caixa {
  width: 100%;
  max-width: 420px;
  padding: 24px;
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.conf-caixa h2 {
  font-size: var(--t-h3);
  font-weight: var(--p-bold);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
}

/* O resumo vem antes do aviso: o cliente confere O QUE está enviando
   antes de ler a consequência de enviar. */
.conf-resumo {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--azul-fundo);
  border-radius: 10px;
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  font-variant-numeric: tabular-nums;
  color: var(--azul-escuro);
}

.conf-texto {
  font-size: var(--t-body);
  line-height: var(--lh-corpo);
  color: var(--texto);
}
.conf-texto b { font-weight: var(--p-forte); }

.conf-acoes { display: grid; gap: 10px; margin-top: 20px; }

.conf-sim {
  padding: 14px;
  border: none;
  border-radius: 999px;
  background: var(--zap);
  color: var(--branco);
  font: inherit;
  font-size: var(--t-h4);
  font-weight: var(--p-bold);
  cursor: pointer;
}
.conf-sim:hover { background: var(--zap-hover); }

/* Voltar é a saída, não a ação: fica vazado para não competir com o
   botão que o cliente veio clicar. */
.conf-nao {
  padding: 12px;
  border: 1px solid var(--borda-campo);
  border-radius: 999px;
  background: transparent;
  color: var(--texto-fraco);
  font: inherit;
  font-size: var(--t-body);
  font-weight: var(--p-forte);
  cursor: pointer;
}
.conf-nao:hover { border-color: var(--azul-claro); color: var(--texto); }

/* O foco entra em "Voltar e revisar" por JS, então ele aparece marcado
   assim que a caixa abre. O contorno preto do navegador daria a esse
   botão mais peso que o de enviar, invertendo a hierarquia; o anel azul
   é o mesmo sinal de foco que os campos do formulário já usam. */
.conf-sim:focus-visible,
.conf-nao:focus-visible {
  outline: 2px solid var(--azul-claro);
  outline-offset: 2px;
}

/* ---------- folha do pedido (só na impressão) ---------- */
#folha-pedido { display: none; }

@media print {
  /* tudo some, menos a folha */
  body > * { display: none !important; }
  #folha-pedido { display: block !important; }

  @page { size: A4 portrait; margin: 12mm 10mm; }

  body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .fp-cab {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--azul);
    font-size: 10pt;
    line-height: 1.45;
  }

  /* altura manda, largura acompanha: o escudo é mais alto que largo e
     forçar quadrado o amassava na folha impressa */
  .fp-cab img { height: 36px; width: auto; }
  .fp-cab > div { flex: 1; }
  .fp-cab b { display: block; font-size: 14pt; font-weight: 700; color: var(--azul-escuro); }

  .fp-num { flex: 0 0 auto; text-align: right; }
  .fp-num span { display: block; font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; color: #6b7688; }
  .fp-num b { font-size: 13pt; }

  .fp-cliente {
    margin: 10px 0 14px;
    padding: 9px 12px;
    background: #f4f6fa;
    border-left: 3px solid var(--azul);
    font-size: 10pt;
    line-height: 1.5;
  }

  .fp-cliente b { display: block; font-size: 12pt; font-weight: 700; }
  .fp-cliente i { color: #6b7688; }

  .fp-tabela {
    width: 100%;
    margin-bottom: 10px;
    border-collapse: collapse;
    font-size: 9.5pt;
    /* produto não se parte entre páginas */
    break-inside: avoid;
  }

  .fp-tabela th {
    padding: 6px 8px;
    background: var(--azul);
    color: #fff;
    font-size: 10pt;
    font-weight: 700;
    text-align: left;
  }

  .fp-tabela td { padding: 5px 8px; border-bottom: 1px solid #e8eef7; vertical-align: top; }
  .fp-tabela small { display: block; color: #6b7688; font-size: 8.5pt; }
  .fp-obs { color: #8a5a12 !important; }
  .fp-dir { text-align: right; white-space: nowrap; font-weight: 700; }

  /* foto pequena de propósito: o PDF vai por WhatsApp */
  .fp-foto { width: 42px; padding-right: 0 !important; }
  .fp-foto img { width: 38px; height: 38px; object-fit: contain; }

  .fp-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--azul);
    color: #fff;
    font-size: 11pt;
  }

  .fp-total b { font-size: 15pt; font-weight: 700; }

  .fp-rodape { margin-top: 12px; color: #6b7688; font-size: 8.5pt; line-height: 1.5; }
}

/* ---------- celular e tablet estreito: abas guardadas ---------- */
@media (max-width: 700px) {
  .ped-setor-atual {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    margin-top: 9px;
    padding: 8px 13px;
    border: 1.5px solid var(--azul-claro);
    border-radius: 10px;
    background: var(--branco);
    color: var(--azul);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--p-bold);
    text-align: left;
    cursor: pointer;
  }

  .ss-eti {
    flex-shrink: 0;
    color: var(--texto-fraco);
    font-size: var(--t-3xs);
    font-weight: var(--p-bold);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .ss-rotulo {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .ss-seta { flex-shrink: 0; transition: transform .16s; }
  .setores-abertos .ss-seta { transform: rotate(180deg); }

  /* display vence o atributo hidden — a lista some por CSS, não por JS */
  .ped-ferramentas:not(.setores-abertos) .ped-atalhos { display: none; }

  /* aberta, a lista rola dentro de si: 18 abas não podem empurrar o
     produto para fora da tela */
  .setores-abertos .ped-atalhos { max-height: 45vh; overflow-y: auto; }
  .setores-abertos .ped-atalhos button { min-height: 40px; }
}

@media (max-width: 560px) {
  .ped-ferramentas { padding: 9px 12px; }
  #ped-lista { padding: 0 8px 150px; }
  .ped-thumb { width: 58px; height: 58px; }
  .ped-campo input { width: 56px; }
  .ped-barra { padding: 10px 12px; gap: 10px; }
  #ped-finalizar { padding: 11px 16px; font-size: var(--t-sm); }
}