/* ============================================================
   LOJA DA FARMÁCIA — reforma aprovada nas 6 pranchas (27/08/2026)
   Consome só tokens. Regras duras:
   - barra de pedido SÓ na montagem (estados não a renderizam);
   - marca é filtro, nunca porta de entrada;
   - ordenação neutra escrita na tela;
   - desktop: resumo lateral no lugar da barra.
   ============================================================ */

/* ---------------- faixa de identidade ---------------- */
.loja-faixa {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--esp-4); background: var(--profunda); color: var(--sobre-profunda);
  padding: var(--esp-2) var(--esp-4);
}
/* a logo da Lolly no MEIO da barra azul, em BRANCO: o filtro leva a
   arte oficial ao branco. DECISÃO DO JUNINHO (registrada por ele em
   24/09/2026, confirmando a ordem de 13/09): o filtro FICA — é a
   exceção assumida à regra do manual de não recolorir a logo. */
.loja-faixa-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  height: 28px; filter: brightness(0) invert(1);
}
.loja-identidade { display: flex; flex-direction: column; line-height: 18px; min-width: 0; }
.loja-identidade strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
/* revisão da jornada (24/09): no celular o nome da farmácia passava por
   CIMA da logo centralizada. Cada lado da faixa termina 8px antes da
   logo (62px de largura, no centro) e o nome quebra em linhas — a
   faixa cresce; a logo nunca é coberta. */
@media (max-width: 719px) {
  .loja-identidade { max-width: calc(50% - 40px); line-height: 16px; }
  .loja-identidade strong { font-size: 13px; }
  .loja-faixa-acoes { max-width: calc(50% - 40px); text-align: right; }
}
.loja-cidade { font-size: 11px; color: var(--sobre-profunda-suave); }
.loja-faixa-link { font-size: 13px; font-weight: 500; color: var(--sobre-profunda-suave); }
/* SAIR e MEU CADASTRO (25/09/2026): links da faixa azul, na mesma cor
   e peso dos que já existem (azul-200 sobre azul-900: 9,9:1). O Sair
   mora na linha da cidade; a confirmação é uma faixa branca logo abaixo
   do cabeçalho, que diz o que o botão faz antes de fazer. */
.loja-cidade-linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--esp-2); }
.loja-sair, .loja-faixa-botao {
  font: inherit; color: var(--sobre-profunda-suave); background: none;
  border: none; padding: 0; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px; line-height: inherit;
}
.loja-sair { font-size: 11px; font-weight: 600; }
.loja-faixa-botao { font-size: 13px; font-weight: 500; }
.loja-sair:hover, .loja-faixa-botao:hover { color: var(--sobre-profunda); }
.loja-faixa-acoes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--esp-4); }
.loja-sair-confirma {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--esp-2) var(--esp-4); padding: var(--esp-3) var(--esp-4);
  background: var(--superficie); border-bottom: 1px solid var(--borda);
}
.loja-sair-texto { margin: 0; font-size: 13px; line-height: 18px; color: var(--n-800); flex: 1 1 260px; }
.loja-sair-texto strong { color: var(--n-950); }
.loja-sair-acoes { display: flex; gap: var(--esp-2); margin-left: auto; }
/* o painel do cadastro reaproveita a ficha (folha lateral no desktop,
   tela cheia no celular) e os campos da porta */
.cad-corpo { padding-bottom: var(--esp-14); }
.cad-corpo form { margin: 0; }
.cad-corpo .btn-lolly { margin-top: var(--esp-5); }
.cad-corpo .porta-resumo { margin-top: var(--esp-2); }
.cad-corpo .porta-resumo-nota { margin-top: var(--esp-2); }
/* MEUS PEDIDOS (25/09/2026): cada pedido é uma linha clicável; no detalhe,
   os itens em linhas com quantidade × unitário e o total da linha */
.ped-lista { margin-top: var(--esp-4); display: flex; flex-direction: column; gap: var(--esp-2); }
.ped-item {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--esp-3);
  padding: var(--esp-3) var(--esp-3); background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-controle);
  color: var(--n-950);
}
.ped-item:hover { border-color: var(--lolly-marinho); }
.ped-item-num { font-size: 14px; font-weight: 700; }
.ped-item-valor { font-size: 14px; font-weight: 700; text-align: right; }
.ped-item-quando, .ped-item-prazo, .ped-item-situacao { font-size: 12px; line-height: 17px; color: var(--n-500); }
/* a data do pedido UMA vez, com o prazo escolhido ao lado (27/09/2026) */
.ped-item-prazo { text-align: right; }
.ped-item-situacao { color: var(--n-800); grid-column: 1 / -1; }
.ped-situacao { font-size: 13px; line-height: 18px; color: var(--n-800); margin: var(--esp-2) 0 0; font-weight: 600; }
.ped-itens { display: flex; flex-direction: column; }
.ped-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 0 var(--esp-3);
  padding: var(--esp-2) 0; border-bottom: 1px solid var(--n-100);
}
.ped-linha-nome { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--n-950); overflow-wrap: anywhere; }
.ped-linha-qtd { font-size: 12px; line-height: 17px; color: var(--n-500); }
.ped-linha-total { font-size: 13px; font-weight: 600; color: var(--n-950); text-align: right; align-self: center; }
.ped-total-linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--esp-3);
  padding: var(--esp-3) 0 0; font-size: 14px; color: var(--n-800);
}
.ped-total-linha strong { font-size: 16px; color: var(--n-950); }
.ped-obs { white-space: pre-wrap; }
/* REPETIR ESTE PEDIDO (27/09/2026): o botão no detalhe, a pergunta do
   carrinho cheio e o aviso que recebe a empresa no catálogo */
.ped-repetir { margin-top: var(--esp-2); }
.ped-repetir-nota { margin-top: var(--esp-2); }
.ped-repetir-pergunta { margin-top: var(--esp-3); }
/* o AVISO DO PEDIDO REPETIDO em primeiro plano (27/09, desenho
   aprovado): cartão branco com barra azul-ardósia à esquerda — o tom
   neutro de informação da fundação, nenhuma cor da marca — acima do
   banner. Título em negrito maior na primeira linha; o resto em texto
   normal. Não é anúncio: nada de campo de cor cheia. */
.repetir-aviso {
  display: flex; gap: var(--esp-4); align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 6px solid var(--n-800); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-1); padding: var(--esp-5);
  margin: var(--esp-3) 0 var(--esp-4);
}
.repetir-aviso .aviso-icone { background: var(--n-800); width: 24px; height: 24px; margin-top: 1px; }
.repetir-aviso-corpo { min-width: 0; flex: 1; }
.repetir-aviso strong {
  display: block; font-size: 17px; line-height: 23px; font-weight: 800;
  color: var(--n-950); overflow-wrap: anywhere;
}
.repetir-aviso p {
  margin: var(--esp-1) 0 0; font-size: 14px; line-height: 20px;
  color: var(--n-800); overflow-wrap: anywhere;
}
.repetir-aviso .porta-link { color: var(--n-800); font-weight: 700; font-size: 14px; margin-top: var(--esp-3); }
/* o invólucro dos avisos do topo some inteiro quando os dois estão escondidos */
.avisos-topo:not(:has(> :not([hidden]))) { display: none; }
.faixa-conferencia-botoes { margin-top: var(--esp-3); }
.faixa-conferencia .loja-resumo-confirma { margin-top: var(--esp-3); }
/* a busca por cima da conferência: acima do painel (41) */
#busca-conf-fundo { z-index: 44; }
#busca-conf { z-index: 45; }
.busca-conf-campo { display: flex; gap: var(--esp-2); margin-top: var(--esp-3); }
.busca-conf-campo input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; min-height: 40px;
  padding: 0 var(--esp-3); border: 1px solid var(--borda-forte); border-radius: var(--raio-controle);
}
.busca-conf-lista { display: flex; flex-direction: column; margin-top: var(--esp-3); }
.busca-conf-item {
  display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--n-100);
}
.busca-conf-item .conf-meio { flex: 1; min-width: 0; }
.busca-conf-item img, .busca-conf-item .produto-foto-vazia { width: 40px; height: 40px; flex: none; font-size: 9px; }
.busca-conf-item .btn { flex: none; }
.busca-conf .loja-pontes { margin-top: var(--esp-3); }
/* a linha não reconhecida: motivo de verdade, irmã à venda com "Usar esta" */
.conf-irma {
  display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap;
  font-size: 12px; color: var(--n-800); margin-top: 4px;
}
.conf-irma strong { color: var(--n-950); }
.conf-origem { font-size: 11px; color: var(--n-600); margin-top: 2px; }
/* a ETIQUETA que liga o aviso ao carrinho: a mesma cor do aviso no
   cartão "Seu pedido" (e o cartão com a borda nessa cor) e na barra do
   pé do celular */
.etiqueta-repetido {
  display: inline-block; font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--branco); background: var(--n-800);
  border-radius: var(--raio-pilula); padding: 2px 8px; margin-top: 4px;
}
.loja-resumo.resumo-repetido { border-color: var(--n-800); box-shadow: 0 0 0 1px var(--n-800), var(--sombra-1); }
.etiqueta-repetido-barra { background: var(--n-100); color: var(--n-800); margin: 0 0 0 6px; vertical-align: middle; }
.cad-corpo .vazio { margin-top: var(--esp-6); }
.cad-corpo .vazio .btn-lolly { margin-top: var(--esp-4); }
/* porta travada (25/09): CNPJ e razão social como linha de leitura, com a
   nota curta do porquê logo abaixo */
.porta-campo-travado { padding: var(--esp-2) 0 0; }
.porta-campo-travado .porta-campo-rotulo { display: block; font-size: 11px; font-weight: 600; color: var(--n-500); margin-bottom: 1px; }
.porta-campo-travado .porta-campo-valor { font-size: 15px; line-height: 22px; color: var(--n-800); margin: 0; overflow-wrap: anywhere; }

/* ------- marcas da indústria: logos oficiais, intocadas --------
   Respiro do manual: padding >= 25% da altura embutido na própria
   imagem via .logo-marca; nunca recolorir, nunca sobre fundo sem
   contraste (a faixa branca do topo garante o contraste). */
/* (a strip de marcas saiu de cena em 13/09 — a logo-mãe vive na
   barra azul; .logo-marca segue servindo os cartões de produto) */
.logo-marca { display: inline-block; object-fit: contain; }
.produto-etiquetas .logo-marca { padding: 2px 0; }
/* código e EAN: dado de conferência — cinza de texto secundário, AA */
.produto-ref { font-size: 11px; color: var(--n-600); margin-top: 4px; }

/* ---------------- ficha: dados cadastrais ---------------- */
.ficha-cadastro { margin-top: var(--esp-3); }
.ficha-cadastro summary { cursor: pointer; }
.cadastro-lista {
  display: grid; grid-template-columns: auto 1fr; gap: var(--esp-1) var(--esp-4);
  margin: var(--esp-3) 0 0; font-size: 13px;
}
.cadastro-lista dt { color: var(--n-500); }
.cadastro-lista dd { margin: 0; color: var(--n-800); overflow-wrap: anywhere; }

/* ---------------- topo: busca e categorias ---------------- */
.loja-topo {
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  padding: var(--esp-3) var(--esp-4) 0;
}
.loja-busca {
  display: flex; align-items: center; gap: var(--esp-2);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-controle);
  background: var(--superficie); padding: 0 var(--esp-3); color: var(--n-500);
}
.loja-busca:focus-within { border-color: var(--cor-foco); box-shadow: var(--anel-foco); }
.loja-busca input {
  flex: 1; border: 0; outline: none; font: inherit; min-height: 44px;
  background: transparent; color: var(--n-950);
}
.loja-busca input::placeholder { color: var(--n-400); }
.loja-chips {
  display: flex; gap: var(--esp-2); overflow-x: auto; padding: var(--esp-3) 0;
  scrollbar-width: none;
}
.loja-chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; min-height: 36px; display: inline-flex; align-items: center;
  padding: 0 var(--esp-4); border-radius: var(--raio-pilula);
  border: 1px solid var(--borda); background: var(--superficie);
  color: var(--n-600); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.chip[aria-selected="true"] {
  background: var(--primaria); border-color: var(--primaria);
  color: var(--sobre-primaria); font-weight: 600;
}

/* ---------------- corpo ---------------- */
.loja-corpo { display: block; padding: 0 var(--esp-4) 120px; }
.loja-rail, .fundo-borra { display: none; }
/* banner e faixa de chips vivem DENTRO da área da grade (06/09/2026);
   no celular continuam de ponta a ponta — o respiro lateral do corpo
   é devolvido com margem negativa */
.loja-corpo > .banner-loja, .loja-corpo > .loja-topo { margin: 0 calc(-1 * var(--esp-4)); }
/* assinatura da Accanta: faixa escura no pé, logo amarela pequena */
.loja-assinatura {
  background: var(--profunda); display: flex; justify-content: flex-end;
  padding: var(--esp-2) var(--esp-4);
}
.loja-assinatura-link {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 11px; line-height: 16px; color: var(--sobre-profunda-suave);
}
.loja-assinatura-link img { height: 16px; width: auto; display: block; }
.loja-assinatura-link:hover { color: var(--sobre-profunda); }
/* com a barra do pedido do celular visível, a assinatura não fica escondida embaixo dela */
#tela-loja:has(#barra:not([hidden])) .loja-assinatura { margin-bottom: 96px; }
.loja-subtitulo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--esp-2); padding: var(--esp-3) 0 var(--esp-2);
  /* revisão da jornada (24/09): quando as ações não cabem ao lado do
     título, descem para a linha de baixo — no celular a linha das
     ações media 401px numa janela de 390 e ESTICAVA a página inteira
     para o lado, e o título "Em destaque" ficava numa coluna de 69px,
     quebrado em duas linhas */
  flex-wrap: wrap;
}
.loja-subtitulo > div:first-child { flex: 1 1 240px; min-width: 0; }
#titulo-lista { white-space: nowrap; }
.loja-filtro-marca, .loja-ordenacao {
  font: inherit; font-size: 12px; font-weight: 500; color: var(--n-600);
  border: 1px solid var(--borda); border-radius: var(--raio-pilula);
  background: var(--superficie); padding: 3px 10px; max-width: 100%;
}
.loja-subtitulo-acoes {
  display: flex; gap: var(--esp-2); align-items: center;
  flex: 0 1 auto; flex-wrap: wrap; min-width: 0; max-width: 100%;
}
.loja-subtitulo-acoes > * { min-width: 0; max-width: 100%; }
/* ordem escolhida pela farmácia: o seletor ganha a cor de ação para
   dizer que NÃO está na padrão */
.loja-ordenacao:not([data-padrao]) { color: var(--primaria-texto); border-color: var(--primaria-media); font-weight: 600; }

/* ---------------- lista e cartões ---------------- */
.loja-lista { display: flex; flex-direction: column; gap: var(--esp-2); }
/* sobrelinha do grupo: vive no primeiro cartão do grupo; todo cartão
   reserva o espaço para a fileira não desalinhar */
.produto-overline {
  min-height: 14px; font-size: 10px; color: var(--primaria-texto);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  width: 100%;
}
.produto {
  position: relative; display: flex; flex-wrap: wrap; gap: var(--esp-3);
  background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-1); padding: var(--esp-3); cursor: pointer;
}
.produto.no-pedido { border-color: var(--primaria-media); }
.produto-foto {
  flex: none; width: 72px; height: 72px; object-fit: contain;
  background: var(--superficie);
}
.produto-foto-vazia {
  flex: none; width: 72px; height: 72px; border-radius: var(--raio-controle);
  background: var(--n-100); display: grid; place-items: center;
  /* "sem foto": n-400 sobre n-100 dava 2,23:1; n-600 dá 6,69:1 (24/09) */
  color: var(--n-600); font-size: 11px; text-align: center;
}
.produto-meio { flex: 1 1 0; min-width: 0; }
.produto-nome {
  font-size: 14px; line-height: 19px; font-weight: 600; color: var(--n-950);
  /* contenção contra nomes longos do ERP: quebra dentro da coluna,
     nunca vaza sob o preço. O corte em DUAS linhas saiu na revisão da
     jornada (24/09): perdia palavras em 231 de 326 nomes no celular
     e em 10 no notebook estreito — o cartão cresce, o nome fica. */
  overflow-wrap: anywhere;
}
.produto-etiquetas {
  display: flex; align-items: center; gap: var(--esp-2); margin-top: 5px;
  min-width: 0;
}
/* pílula de marca NUNCA quebra (Patrulha Canina cabe inteira) */
.produto-etiquetas .pilula { white-space: nowrap; font-size: 11px; flex: none; }
/* destaques do catálogo: frases de balcão com fonte no rodapé */
.ficha-destaques { margin-top: var(--esp-4); }
.destaques-lista {
  margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.5;
  color: var(--n-800);
}
.destaques-lista li { margin: 2px 0; }
.destaques-fonte { margin: 6px 0 0; font-size: 11px; }
.selo-linha { margin: 10px 0 0; font-size: 11px; color: var(--n-500); }
.porta-divergencia { color: var(--alerta-700); margin: 4px 0 0; font-size: 12px; }
.ficha-combina { margin-top: var(--esp-4); }
.ficha-sobre { margin-top: var(--esp-4); }
.sobre-paragrafo {
  margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--n-800);
}
.combina-linha { margin: 2px 0; font-size: 14px; color: var(--n-800); }
.combina-linha a { color: var(--primaria-texto); }

/* preço = custo final (resposta da indústria): a dúvida que toda
   farmácia tem ao comprar por plataforma, respondida onde ela decide */
.custo-final { color: var(--sucesso-600); font-weight: 500; }

/* FORMATO DO BICO em destaque (05/09/2026): a diferença que o título
   esconde no meio, dita na frente — azul de apoio, sem competir com o
   preço; na linha do carrinho vem logo abaixo do nome */
.pilula-bico {
  background: var(--primaria-suave); color: var(--primaria-texto);
  border: 1px solid var(--primaria-media); font-weight: 600;
  white-space: nowrap;
}
.resumo-item-meio .pilula-bico { font-size: 11px; padding: 1px 8px; margin: 2px 0 2px; }

/* selo consultivo: discreto, neutro — informa sem competir com o preço */
.selo-prateleira {
  background: var(--n-100); color: var(--n-600);
  border: 1px solid var(--borda); font-weight: 500;
}
.produto-caixa {
  font-size: 11px; color: var(--n-500); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.produto-lado {
  flex: none; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-end; gap: var(--esp-2);
}
.produto-preco { font-size: 16px; font-weight: 700; color: var(--n-950); line-height: 19px; }
.produto-preco-apoio {
  font-size: 10px; color: var(--n-500); line-height: 13px; text-align: right;
  /* "por unidade"/"por caixa" NUNCA quebra linha: a altura do bloco do
     preço é a mesma em todos os cartões da fileira (padrão de 12/09) */
  white-space: nowrap;
}

/* Bloco de ação com LARGURA FIXA nos dois estados (Adicionar × stepper):
   cartões da mesma fileira ficam com a mesma geometria (28/08/2026). */
.stepper {
  display: inline-flex; align-items: center; border: 1px solid var(--borda-forte);
  border-radius: var(--raio-controle); overflow: hidden; background: var(--superficie);
  width: 118px; min-height: 36px;
}
.stepper-btn {
  width: 34px; min-height: 36px; border: 0; background: var(--superficie);
  color: var(--primaria-texto); font-size: 16px; font-weight: 700; cursor: pointer;
  flex: none;
}
.stepper-qtd {
  flex: 1; min-width: 0; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--n-950); border-left: 1px solid var(--borda);
  border-right: 1px solid var(--borda); padding: 0 var(--esp-1);
}
/* o contador ACEITA DIGITAÇÃO (27/09): é uma caixa de número sem as
   setinhas do navegador — digitar 0 tira o item de uma vez */
input.stepper-qtd {
  font: inherit; font-size: 13px; font-weight: 600; background: transparent;
  border-top: 0; border-bottom: 0; border-radius: 0; align-self: stretch;
  width: 100%; height: auto; -moz-appearance: textfield; appearance: textfield;
}
input.stepper-qtd::-webkit-outer-spin-button, input.stepper-qtd::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
input.stepper-qtd:focus, input.stepper-qtd:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--primaria-media);
}
/* ESVAZIAR (27/09): link discreto no topo do cartão "Seu pedido" e na
   barra do celular — longe do Enviar; a pergunta vem numa faixa clara */
.loja-resumo-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-2); }
.loja-resumo-esvaziar, .loja-barra-esvaziar {
  font: inherit; font-size: 12px; font-weight: 600; background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.loja-resumo-esvaziar { color: var(--n-600); }
.loja-resumo-esvaziar:hover { color: var(--erro-700); }
.loja-barra-esvaziar { display: block; color: var(--sobre-profunda-suave); margin-top: 2px; text-align: left; }
.loja-resumo-confirma, .loja-barra-confirma {
  margin-top: var(--esp-2); padding: var(--esp-3); border-radius: var(--raio-controle);
  background: var(--erro-100); border: 1px solid var(--erro-600);
}
.loja-resumo-confirma p, .loja-barra-confirma p {
  margin: 0 0 var(--esp-2); font-size: 13px; line-height: 18px; color: var(--n-950);
}
.loja-barra-confirma { margin: 0 0 var(--esp-2); }
.btn-curto { min-height: 32px; padding: 0 var(--esp-3); font-size: 13px; }
.btn-adicionar {
  min-height: 36px; width: 118px; padding: 0; font-size: 13px; flex: none;
}

/* ---------------- barra do pedido (SÓ na montagem) ---------------- */
.loja-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--profunda); color: var(--sobre-profunda);
  padding: var(--esp-2) var(--esp-4) var(--esp-3);
  box-shadow: 0 -4px 14px rgba(16, 25, 43, .18);
}
.loja-barra-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); }
.loja-barra-total { font-size: 18px; font-weight: 700; line-height: 22px; }
.loja-barra-itens { font-size: 12px; font-weight: 400; color: var(--sobre-profunda-suave); }
.loja-barra-minimo { font-size: 11px; line-height: 15px; color: var(--sobre-profunda-suave); }
.loja-barra-minimo strong { color: var(--acento); font-weight: 600; }
.loja-progresso {
  margin-top: var(--esp-2); height: 4px; border-radius: var(--raio-pilula);
  background: var(--alerta-100); overflow: hidden;
}
.loja-progresso-escura { background: var(--veu-claro); }
.loja-progresso-preenchido {
  height: 100%; width: 0; border-radius: var(--raio-pilula);
  background: var(--acento); transition: width var(--transicao);
}

/* -------- banner: PEÇA DE CAMPANHA (13/09, ordem do operador) --------
   Não é aviso: imagem dominando, título de chamada, CTA em botão e a
   linguagem da Nenny — respingos atravessando, camadas, cor sangrando
   (mesma régua da porta). Cada anúncio da rotação tem a PRÓPRIA arte:
   1) display de PDV: campo magenta, respingo laranja atravessando a
      direita, foto do display RECORTADA em primeiro plano;
   2) sortimento: campo azul-profundo, respingo roxo/verde sangrando a
      esquerda e laranja no pé direito, texto deslocado para o centro.
   Os códigos moram na página de materiais de PDV, depois do clique. */
.banner-loja {
  position: relative; overflow: hidden;
  padding: var(--esp-4);
  background: var(--lolly-magenta);
  color: var(--sobre-magenta);
}
.banner-sortimento { background: var(--profunda); color: var(--sobre-profunda); }
/* o anúncio do display trocou para o azul de ação (13/09): a rotação
   abre no magenta da linha e cada peça tem o próprio campo */
.banner-display { background: var(--primaria); color: var(--sobre-primaria); }
.banner-arte { display: none; }
.banner-texto-bloco { position: relative; z-index: 1; max-width: 620px; }
.banner-titulo {
  font-size: 24px; line-height: 28px; font-weight: 800;
  letter-spacing: -.01em; margin: 0;
}
.banner-texto { font-size: 14px; line-height: 19px; margin: 6px 0 0; }
/* opção B (24/09): sobre o magenta cheio, texto GRANDE em negrito e
   branco sólido — 4,01:1, acima dos 3:1 que a régua pede para texto
   grande. O 14px de antes dava 3,24:1 com o branco suave. */
.banner-linha .banner-texto {
  color: var(--sobre-magenta); font-size: 19px; line-height: 25px; font-weight: 700;
}
.banner-display .banner-texto { color: var(--sobre-primaria); }
.banner-sortimento .banner-texto { color: var(--sobre-profunda-suave); }
.banner-cta {
  display: inline-flex; align-items: center; margin-top: 12px;
  min-height: 36px; padding: 0 var(--esp-5);
  border-radius: var(--raio-pilula); background: var(--superficie);
  font-size: 13px; font-weight: 700;
}
/* o botão: letra magenta cheia sobre branco (4,01:1) em 19px/700 */
.banner-linha .banner-cta { color: var(--lolly-magenta); font-size: 19px; font-weight: 700; }
/* setas do carrossel no campo magenta: círculo branco com a seta
   magenta (4,01:1, texto grande) em vez do rosa translúcido (2,88:1) */
.banner-linha .banner-seta { background: var(--branco); color: var(--lolly-magenta); }
.banner-linha .banner-seta:hover, .banner-linha .banner-seta:focus-visible { background: var(--branco); }
.banner-display .banner-cta { color: var(--primaria); }
.banner-sortimento .banner-cta { color: var(--profunda); }
.banner-loja[data-clicavel] { cursor: pointer; }
.banner-loja[data-clicavel]:hover .banner-cta { box-shadow: var(--sombra-1); }
/* carrossel (05/09/2026): setas nas laterais, pontinhos no pé, entrada
   suave a cada troca. Tudo acima da arte e do texto; setas e pontos
   ficam brancos translúcidos para viver em qualquer campo de cor. */
/* no celular as setas somem (troca pelo arrastar do dedo) e os pontinhos
   entram no fluxo, abaixo do botão — nada cobre o texto */
.banner-seta {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--banner-controle); color: var(--branco);
  font-size: 26px; line-height: 1; font-weight: 700;
  align-items: center; justify-content: center;
  cursor: pointer; padding: 0 0 3px;
}
.banner-seta:hover, .banner-seta:focus-visible { background: var(--banner-controle-vivo); outline: none; }
.banner-seta-esq { left: 8px; }
.banner-seta-dir { right: 8px; }
.banner-pontos {
  position: relative; z-index: 3; margin-top: 14px;
  display: flex; justify-content: flex-start; gap: 8px;
}
.banner-ponto {
  width: 10px; height: 10px; border: 0; border-radius: 50%; padding: 0;
  background: var(--banner-ponto); cursor: pointer;
}
.banner-ponto[aria-selected="true"] { background: var(--branco); transform: scale(1.25); }
.banner-ponto:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }
.banner-entrando .banner-texto-bloco, .banner-entrando .banner-arte {
  animation: banner-entra .45s ease-out;
}
@keyframes banner-entra { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .banner-entrando .banner-texto-bloco, .banner-entrando .banner-arte { animation: none; }
}


/* ---------------- resumo lateral (desktop) ---------------- */
.loja-resumo-itens { display: flex; flex-direction: column; gap: var(--esp-3); margin-top: var(--esp-3); }
.resumo-item { display: flex; align-items: center; gap: var(--esp-2); }
.resumo-item img, .resumo-item .produto-foto-vazia { width: 40px; height: 40px; font-size: 9px; }
.resumo-item-meio { flex: 1; min-width: 0; }
.resumo-item-nome { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--n-950); }
.resumo-item-qtd { font-size: 12px; color: var(--n-500); }
.resumo-item-subtotal { font-size: 13px; font-weight: 600; color: var(--n-950); }
.loja-resumo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--n-100); margin-top: var(--esp-3); padding-top: var(--esp-3);
}
.loja-resumo-total strong { font-size: 20px; color: var(--n-950); }
.loja-minimo-texto { font-size: 12px; line-height: 17px; color: var(--alerta-700); }
.loja-minimo .loja-progresso-preenchido { background: var(--alerta-600); }
.loja-enviar { width: 100%; margin-top: var(--esp-3); }

/* ---------------- estados (sem barra, por construção) ---------------- */
.loja-estado-conteudo { max-width: 480px; margin: 0 auto; padding: var(--esp-6) var(--esp-4); }
.loja-estado-centro { padding-top: var(--esp-14); }
.captura-whatsapp { margin-top: var(--esp-3); }

/* ---------------- revisão do pedido ---------------- */
/* os PAINÉIS centrais (guiado, planilha, colunas, conferência) */
.revisao {
  position: fixed; z-index: 41; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px)); max-height: 84vh; overflow-y: auto;
}
/* A FOLHA DE REVISÃO (27/09): acima do fundo e da coluna de apoio */
#revisao-fundo { z-index: 40; }
#revisao.revisao-folha { z-index: 41; }
.revisao-corpo { padding-bottom: var(--esp-4); }
.revisao-itens { display: flex; flex-direction: column; }
.rev-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  grid-template-areas: "foto meio contador" "foto meio pe";
  gap: 2px var(--esp-3); align-items: center;
  padding: var(--esp-2) 0; border-bottom: 1px solid var(--n-100);
}
.rev-item img, .rev-item .produto-foto-vazia { grid-area: foto; width: 40px; height: 40px; font-size: 9px; align-self: start; }
.rev-item-meio { grid-area: meio; min-width: 0; }
.rev-item-nome { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--n-950); overflow-wrap: anywhere; }
.rev-item-preco { font-size: 12px; line-height: 16px; color: var(--n-500); }
.rev-item .stepper { grid-area: contador; justify-self: end; }
.rev-item-pe { grid-area: pe; display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-3); }
.rev-item-subtotal { font-size: 13px; font-weight: 600; color: var(--n-950); }
.rev-item-tirar {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--n-600);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.rev-item-tirar:hover { color: var(--erro-700); }
.revisao-minimo { margin-top: var(--esp-3); }
.revisao-botoes { margin-top: var(--esp-6); }
.revisao-confirmar { flex: 1; justify-content: space-between; }
.revisao-confirmar strong { font-size: 15px; }
.revisao-confirmar:disabled { cursor: not-allowed; }
/* o indicador: grudado no pé da folha enquanto a tela continua; é um
   aviso, não um botão */
.revisao-indicador {
  position: sticky; bottom: 0; margin: var(--esp-4) calc(-1 * var(--esp-4)) calc(-1 * var(--esp-4));
  padding: var(--esp-2) var(--esp-4); background: var(--profunda); color: var(--sobre-profunda);
  font-size: 12px; line-height: 16px; font-weight: 600; text-align: center;
  pointer-events: none; min-height: 32px;
}
.revisao-indicador-oculto { visibility: hidden; }
@media (max-width: 359px) { .rev-item { grid-template-columns: 32px minmax(0, 1fr) auto; } }
/* o cartão da esquerda como resumo */
.loja-resumo-contagem { font-size: 13px; line-height: 18px; color: var(--n-600); margin: var(--esp-2) 0 0; }

/* ------------- planilha de reposição (bloco 4, perfil 2) ------------- */
/* as duas PORTAS DA CONSULTORIA (destaque, 09/09): mesmo alinhamento
   em grade igual, cara de ação — não de aviso */
.portas-loja {
  display: grid; grid-template-columns: 1fr; gap: var(--esp-3);
  margin: var(--esp-3) 0;
}
@media (min-width: 720px) {
  .portas-loja { grid-template-columns: 1fr 1fr; }
}
/* as duas portas em COR DA CAPA NENNY (06/09/2026, ordem do operador:
   "parecem botões neutros"): a planilha no laranja e o guiado no ciano
   dos respingos do catálogo — cores que nenhum outro controle da tela
   usa, cada porta com a sua. Texto no marinho da logo (AA sobre as
   duas: 4,6:1 e 4,8:1), ícone num disco branco. Sem borda: a cor é o
   destaque; o hover só levanta o cartão. */
.porta-cartao {
  text-align: left; cursor: pointer;
  font: inherit; display: flex; flex-direction: column; gap: 4px;
  border: 0; color: var(--lolly-marinho);
  transition: transform var(--transicao), box-shadow var(--transicao), filter var(--transicao);
}
#porta-planilha { background: var(--lolly-laranja); }
#porta-guiado { background: var(--lolly-ciano); }
.porta-cartao strong {
  color: inherit; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
}
.porta-cartao .t-apoio { color: inherit; opacity: .85; }
.porta-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--superficie);
}
.porta-cartao:hover { filter: brightness(.95); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.porta-cartao:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.a3-retrato { margin-top: var(--esp-3); }
.a3-frase { font-size: 15px; font-weight: 600; margin: 0; }
.conf-acabando { color: var(--alerta-700); font-weight: 600; }
.guiado-frase { margin: 0 0 6px; font-style: italic; }
/* o SEGUNDO BLOCO do caminho "Eu escolho as categorias" (27/09):
   claramente apartado do pré-montado, com a sua régua em cima */
.guiado-bloco2 {
  margin-top: var(--esp-6); padding-top: var(--esp-4);
  border-top: 2px solid var(--n-200);
}
.guiado-bloco2 .conf-secao { margin-top: 0; }
.guiado-bloco2-apoio { margin: 0 0 var(--esp-2); }
.guiado-bloco2 .conf-qtd { color: var(--n-600); }
/* rodapé do pré-montado colado no pé da janela rolável (05/09/2026):
   resumo em cima, botão com o VALOR TOTAL embaixo */
.guiado-rodape {
  position: sticky; bottom: -1px; z-index: 2;
  margin: var(--esp-3) calc(-1 * var(--esp-4)) 0;
  padding: var(--esp-3) var(--esp-4);
  background: var(--superficie); border-top: 1px solid var(--borda);
  box-shadow: var(--sombra-2);
}
.guiado-rodape-resumo {
  display: flex; justify-content: space-between; gap: var(--esp-3);
  font-size: 12px; color: var(--n-600); margin-bottom: 8px;
}
.guiado-rodape-minimo { color: var(--alerta-700); font-weight: 600; }
.guiado-rodape-btn {
  width: 100%; display: flex; justify-content: space-between;
  align-items: center; gap: var(--esp-3);
}
.guiado-rodape-btn strong { font-size: 16px; }
.guiado-chips { flex-wrap: wrap; margin-top: var(--esp-2); }
.campo-guiado {
  width: 100%; font: inherit; padding: 8px 10px; margin-top: 10px;
  border: 1px solid var(--borda); border-radius: var(--raio-controle);
  background: var(--superficie);
}
.conferencia { width: min(560px, calc(100vw - 32px)); }
#conferencia-fundo { z-index: 40; }
.conf-secao {
  display: flex; align-items: baseline; gap: var(--esp-2); flex-wrap: wrap;
  margin: var(--esp-4) 0 var(--esp-1);
}
.conf-item {
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-2) 0; border-bottom: 1px solid var(--borda);
}
.conf-qtd {
  width: 64px; flex: none; text-align: center;
  font: inherit; padding: 6px 4px;
  border: 1px solid var(--borda); border-radius: var(--raio-controle);
  background: var(--superficie);
}
.conf-meio { flex: 1; min-width: 0; }
.conf-nome { font-size: 13px; font-weight: 500; }
.conf-ref { font-size: 11px; color: var(--n-600); margin-top: 2px; }
.conf-obs { font-size: 11px; color: var(--alerta-700); margin-top: 2px; }
.conf-conflito .conf-qtd { border-color: var(--alerta-700); }
.conf-troca { font-weight: 600; }
/* (27/09) o que faltou ou não deu para ler numa linha, com o que fazer;
   e a planilha sem a coluna toda, dito uma vez no topo */
.conf-pendencia { font-weight: 600; }
.conf-aviso { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--alerta-700); margin: 8px 0 0; }
/* A2: confira as colunas — uma linha por coluna da planilha, com o
   nome, exemplos e o papel entendido, editável */
.a2-lista { display: flex; flex-direction: column; }
.a2-coluna {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--esp-3);
  align-items: center; padding: var(--esp-2) 0; border-bottom: 1px solid var(--n-100);
}
.a2-nome { font-size: 13px; font-weight: 600; color: var(--n-950); overflow-wrap: anywhere; }
.a2-amostra { font-size: 11px; line-height: 15px; color: var(--n-600); grid-column: 1; overflow-wrap: anywhere; }
.a2-confira { font-size: 11px; line-height: 15px; font-weight: 600; color: var(--alerta-700); grid-column: 1; }
.a2-coluna select { grid-column: 2; grid-row: 1 / span 3; font: inherit; font-size: 13px; min-height: 32px; max-width: 190px; }
.conf-nao .conf-obs { color: var(--n-500); }
.conf-nao .btn { flex: none; align-self: center; }

/* ---------------- ficha ---------------- */
.ficha-fundo {
  position: fixed; inset: 0; background: var(--n-950); opacity: .45; z-index: 30;
}
.ficha {
  position: fixed; inset: 0; z-index: 31; background: var(--pagina);
  overflow-y: auto;
}
.ficha-topo {
  display: flex; align-items: center; gap: var(--esp-2);
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  padding: var(--esp-2) var(--esp-3); position: sticky; top: 0;
}
.ficha-foto {
  background: var(--superficie); border-bottom: 1px solid var(--borda);
  display: grid; place-items: center; height: 250px;
}
.ficha-foto img { max-height: 215px; max-width: 80%; object-fit: contain; }
/* (06/10) a ficha do produto sem foto: o mesmo quadro neutro do cartão, maior */
.ficha-foto .ficha-sem-foto { width: 150px; height: 150px; font-size: 12px; }
/* galeria da ficha (12/09): miniaturas oficiais do acervo — a
   principal é packshot; foto/ilustração de uso vive aqui */
.ficha-galeria {
  display: flex; gap: var(--esp-2); justify-content: center;
  padding: var(--esp-2) var(--esp-3); background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.galeria-mini {
  width: 52px; height: 52px; padding: 2px; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio-controle);
  cursor: pointer;
}
.galeria-mini img { width: 100%; height: 100%; object-fit: contain; }
.galeria-mini[aria-selected="true"] { border-color: var(--primaria); }
.ficha-corpo { padding: var(--esp-4); }
.ficha-corpo h2 { margin: var(--esp-1) 0 0; }
/* materiais de PDV (06/09/2026): uma seção por tipo de peça, imagens
   do catálogo em caixa de altura fixa, legenda com medida e código */
.pdv-chamada strong { color: var(--n-950); }
.pdv-secao { margin-top: var(--esp-5); padding-top: var(--esp-4); border-top: 1px solid var(--n-100); }
.pdv-secao h3 { margin: 0; font-size: 16px; line-height: 22px; }
.pdv-secao > .t-apoio { margin: 2px 0 0; }
.pdv-galeria { display: grid; gap: var(--esp-3); margin-top: var(--esp-3); }
.pdv-galeria-1 { grid-template-columns: 1fr; }
.pdv-galeria-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pdv-galeria-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdv-galeria figure { margin: 0; text-align: center; }
.pdv-galeria img { display: block; max-width: 100%; height: 240px; object-fit: contain; margin: 0 auto; }
.pdv-galeria-tiras img { height: 320px; }
.pdv-galeria-1 img { height: 200px; }
.pdv-galeria-display img { height: 280px; }
.pdv-galeria-3 img { height: 150px; }
.pdv-galeria figcaption { font-size: 12px; line-height: 17px; color: var(--n-600); margin-top: 6px; }
.pdv-galeria figcaption strong { color: var(--n-950); }
.ficha-preco-linha {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--esp-3); margin-top: var(--esp-3); flex-wrap: wrap;
}
.ficha-preco { font-size: 22px; font-weight: 700; color: var(--n-950); }
/* (08/10/2026) a sugestão de venda da Lolly: discreta, abaixo do preço */
.produto-pv { font-size: 10px; color: var(--n-600); line-height: 13px; text-align: right; margin-top: 3px; white-space: nowrap; }
.ficha-pv { font-size: 13px; color: var(--n-600); margin-top: 6px; }
.ficha-acoes { display: flex; align-items: center; gap: var(--esp-2); }

/* ---------------- tablet (>=720px): CARTÃO VERTICAL da prancha ------- */
@media (min-width: 720px) {
  .loja-faixa, .loja-topo, .banner-loja { padding-left: var(--esp-6); padding-right: var(--esp-6); }
  .loja-corpo { padding: 0 var(--esp-6) 120px; }
  .loja-corpo > .banner-loja, .loja-corpo > .loja-topo { margin: 0 calc(-1 * var(--esp-6)); }
  .loja-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4); }
  .grupo-titulo { grid-column: 1 / -1; }
  .produto { flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); }
  .produto-foto, .produto-foto-vazia {
    width: 100%; height: 150px; align-self: center; font-size: 13px;
  }
  .produto-meio { flex: none; width: 100%; }
  /* SEM buraco entre nome e marca (12/09, cobrança): o nome não
     reserva mais a segunda linha — nome de 1 linha cola na marca.
     O alinhamento da fileira que importa é o de BAIXO: preço e botão
     ancorados pelo margin-top:auto do .produto-lado. Marca e ref
     seguem reservando altura para não colapsar quando faltam. */
  .produto-etiquetas { min-height: 26px; }
  .produto-ref { min-height: 15px; }
  .produto-lado {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; margin-top: auto; min-height: 44px; gap: var(--esp-2);
    /* preço NUNCA por baixo do botão (defeito de 09/09, reincidente):
       quando a fileira aperta, o botão desce de linha em vez de cobrir */
    flex-wrap: wrap;
  }
  /* preço NUNCA por baixo do botão (3ª cobrança, 10/09): o bloco do
     preço não encolhe abaixo do próprio conteúdo — apertou, o botão
     desce de linha. A versão anterior (min-width: 0) deixava o texto
     vazar por baixo do botão. Guarda: tests/test_fiscal_layout.py. */
  .produto-lado > div:first-child { flex: 1 1 auto; min-width: max-content; }
  .produto-lado .btn-adicionar, .produto-lado .stepper { margin-left: auto; }
  /* botão MENOR e NA LINHA do preço (12/09, cobrança): 92px bastam
     para "Adicionar"; com o preço ao lado sobra folga e a linha não
     quebra. O flex-wrap acima segue como rede: se um dia apertar de
     verdade, o botão desce — NUNCA cobre o preço (fiscal de layout). */
  .produto-lado .btn-adicionar, .produto-lado .stepper {
    width: 92px; min-height: 32px;
  }
  .produto-lado .btn-adicionar { font-size: 12px; }
  .produto-lado .stepper-btn { width: 26px; min-height: 32px; font-size: 14px; }
  .produto-lado .stepper-qtd { font-size: 12px; }
  .produto-preco { font-size: 17px; white-space: nowrap; }
  .ficha { left: auto; width: 480px; box-shadow: var(--sombra-2); }
}

/* ---------------- monitor (>=1100px) ---------------- */
@media (min-width: 1100px) {
  /* DUAS colunas (06/09/2026, ordem do operador): a COLUNA DE APOIO
     (seções + carrinho + marcas) à esquerda e os produtos com todo o
     resto. A terceira coluna, do carrinho fixo no pé, morreu — ela
     deixava as laterais de cima vazias e pendurava seções e carrinho
     na margem de baixo. */
  .loja-corpo {
    display: grid; grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: var(--esp-4) var(--esp-5); max-width: 1440px; margin: 0 auto;
    padding: var(--esp-2) var(--esp-8) var(--esp-8);
  }
  /* (06/09/2026, 2ª medida) a coluna de apoio ocupa as DUAS linhas e
     sobe até logo abaixo da barra azul; o banner fica só na coluna dos
     produtos, e a linha de consulta (busca + portas) vive dentro do
     main, com a largura exata da grade de produtos */
  .loja-rail { grid-column: 1; grid-row: 1 / -1; }
  .loja-corpo > .banner-loja { grid-column: 2; grid-row: 1; margin: 0; border-radius: var(--raio-cartao); }
  .loja-principal { grid-column: 2; grid-row: 2; }
  /* com o aviso do pedido repetido na tela (27/09): ele toma a linha 1
     da coluna de produtos e banner e produtos descem um degrau */
  .loja-corpo > .avisos-topo { grid-column: 2; grid-row: 1; margin: 0; }
  .loja-corpo > .avisos-topo > .repetir-aviso { margin-top: 0; }
  .loja-corpo > .avisos-topo > .repetir-aviso + .repetir-aviso { margin-top: var(--esp-3); }
  .loja-corpo.com-aviso { grid-template-rows: auto auto 1fr; }
  .loja-corpo.com-aviso > .banner-loja { grid-row: 2; }
  .loja-corpo.com-aviso > .loja-principal { grid-row: 3; }
  /* a coluna de apoio ACOMPANHA a rolagem grudada no topo (sticky
     dentro da própria linha da grade): ela nunca sobe por cima da
     busca — a linha de consulta rola para fora antes de a coluna
     grudar — e nunca fica pendurada no pé.
     CABE INTEIRA NA JANELA, SEM BARRA PRÓPRIA (06/09/2026, 3ª medida
     do operador, janela de 615 de altura útil): teto de 100dvh menos
     8 de respiro em cima, 32 do rodapé da assinatura e 8 embaixo —
     esse é o máximo que ela pode ter sem ser empurrada para cima no
     fim da página. Seções e marcas têm altura fixa; quem cede é o
     CARRINHO, que rola só a lista de itens por dentro, com total e
     botão sempre à vista. Conta em 615: seções 276 + 8 + marcas 30 +
     8 + carrinho vazio ~165 = 487, sobram 80 para itens. Com as linhas
     "todas" (06/09, 4ª medida): seções 23px, carrinho 8px de respiro,
     para a coluna terminar dentro da janela já na abertura, com a
     barra azul ainda à vista. */
  .loja-rail {
    display: flex; flex-direction: column; gap: 6px;
    position: sticky; top: var(--esp-2); align-self: start;
    max-height: calc(100dvh - 48px); overflow: visible;
  }
  .loja-rail-lista { display: flex; flex-direction: column; padding: 4px 6px; flex: none; }
  .rail-categoria {
    min-height: 23px; display: flex; align-items: center; padding: 0 10px;
    border: 0; border-radius: var(--raio-controle); background: transparent;
    font: inherit; font-size: 13px; line-height: 16px; color: var(--n-600);
    cursor: pointer; text-align: left;
  }
  .rail-categoria[aria-selected="true"] {
    background: var(--primaria-suave); color: var(--primaria-texto); font-weight: 600;
  }
  /* ESCOLHA MÚLTIPLA (06/09/2026): seções e marcas com caixa de
     seleção à vista; "Início" é a única linha sem caixa — sem nada
     marcado é a vitrine dos principais, com algo marcado a mesma linha
     ganha o "limpar ×" e desmarca tudo num toque. Marcas EXPANDIDAS de
     novo (4ª medida do operador), compactas para a coluna seguir
     cabendo em 615: Início + 9 seções 252 + marcas 88 + carrinho ~165
     + vãos 16 = 521. */
  .rail-categoria, .rail-marca { cursor: pointer; gap: 6px; }
  /* MARCAR TODAS (06/09/2026): uma linha no topo de cada lista; a
     caixa fica "meio marcada" (indeterminate) com seleção parcial */
  .rail-todas { min-height: 20px; font-size: 12px; color: var(--n-600); }
  .rail-todas .t-etiqueta { font-size: 10px; line-height: 14px; margin-right: 4px; }
  #rail-categorias .rail-todas { margin-bottom: 2px; border-bottom: 1px solid var(--n-100); border-radius: 0; }
  #rail-marcas-cabeca .rail-todas { display: flex; align-items: center; min-height: 20px; line-height: 20px; }
  .rail-categoria input, .rail-marca input {
    width: 14px; height: 14px; margin: 0; flex: none; accent-color: var(--primaria);
  }
  .rail-inicio { justify-content: space-between; }
  .rail-limpar { font-size: 11px; font-weight: 600; color: var(--primaria-texto); }
  .loja-rail-filtros { margin-top: 0; flex: none; padding: 6px 10px; }
  .loja-rail-filtros .t-etiqueta { font-size: 10px; line-height: 14px; }
  .loja-rail-marcas { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
  .rail-marca { display: flex; align-items: center; font-size: 13px; line-height: 20px; color: var(--n-800); }
  /* só a FILEIRA DE CATEGORIAS do topo some no desktop (o rail cobre);
     esconder pela classe .loja-chips apagava também os chips de
     RESPOSTA do guiado — Entrada C sem opções (defeito de 09/09) */
  #chips-categorias { display: none; }
  .loja-filtro-marca { display: none; }
  /* QUATRO por linha a partir de 1100 (06/09/2026): a coluna do
     carrinho fixo liberou ~330px para os produtos. A régua agora é
     a linha do código + EAN em UMA linha (medida: 163px de texto a
     10px → cartão de 181px ou mais); com seis colunas a 1440 o EAN
     quebrava em duas linhas e desalinhava a fileira. */
  .loja-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  /* cartão COMPACTO (13/09, ordem do operador: QUATRO por linha na
     janela dele): foto menor, tipografia menor, menos respiro — o
     conteúdo é o mesmo. Medido pelo preço mais largo da tabela
     (R$ 204,52 a 13px ≈ 66px) + 4 de vão + botão de 58: cabe no
     cartão de 4 colunas a partir de ~1220 de viewport. */
  .produto { padding: 8px; gap: 6px; }
  .produto-overline { min-height: 12px; font-size: 9px; }
  .produto-foto, .produto-foto-vazia { height: 110px; font-size: 11px; }
  .produto-nome { font-size: 12px; line-height: 16px; }
  .produto-etiquetas { margin-top: 3px; min-height: 20px; gap: 6px; }
  .produto-etiquetas .pilula { font-size: 10px; }
  /* no cartão de 4 colunas não cabem TRÊS selos: o de gancho estoura
     a borda e esmagava a embalagem até "cai…". O conteúdo exigido do
     cartão (13/09) é nome, marca, embalagem, código, EAN, preço e
     botão — o selo consultivo segue na FICHA. */
  .produto-etiquetas .selo-prateleira { display: none; }
  .produto-caixa { font-size: 10px; }
  .produto-ref { font-size: 10px; margin-top: 3px; min-height: 13px; }
  .produto-lado { min-height: 32px; gap: 4px; }
  .produto-preco { font-size: 13px; line-height: 16px; }
  .produto-preco-apoio { font-size: 9px; line-height: 11px; }
  .produto-lado .btn-adicionar, .produto-lado .stepper {
    width: 58px; min-height: 28px;
  }
  .produto-lado .btn-adicionar { font-size: 11px; }
  .produto-lado .stepper-btn { width: 16px; min-height: 28px; font-size: 12px; }
  .produto-lado .stepper-qtd { font-size: 10px; }
  /* o carrinho vive DENTRO da coluna de apoio (06/09/2026), entre as
     seções e as marcas — a âncora no rodapé (10/09) morreu junto com
     a terceira coluna */
  /* carrinho COMPACTO e elástico: é o único bloco da coluna que
     encolhe; a lista de itens rola por dentro, total e botão de
     enviar ficam sempre à mão */
  .loja-resumo {
    display: flex; flex-direction: column; padding: 8px 12px;
    flex: 0 1 auto; min-height: 0;
  }
  .loja-resumo .t-titulo3 { font-size: 15px; line-height: 20px; }
  .loja-resumo-itens {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin;
    margin-top: 8px; gap: 8px; font-size: 12px; line-height: 17px;
  }
  .resumo-item img, .resumo-item .produto-foto-vazia { width: 32px; height: 32px; }
  .resumo-item-nome { font-size: 12px; line-height: 16px; }
  .loja-resumo-total { margin-top: 8px; padding-top: 8px; }
  .loja-resumo-total strong { font-size: 18px; }
  .loja-enviar { margin-top: 8px; min-height: 34px; }
  /* borras de tinta: RETIRADAS (12/09, decisão do operador) — os
     respingos do acervo são recortes de canto, com lados chapados, e
     soltos no vão parecem sobra; ver comentário no loja.html */
  /* busca BAIXA de verdade (medida, 10/09): 32px de controle */
  .loja-busca input { min-height: 32px; }
  /* busca e portas da consultoria na MESMA LINHA (12/09): a busca
     encolhe, as portas ficam à direita dela com o destaque — a faixa
     inteira embaixo da busca morreu */
  .loja-topo-linha {
    display: flex; align-items: flex-start; gap: var(--esp-4);
    /* ACOMPANHA a rolagem (06/09/2026, ordem do operador): gruda no
       topo da janela junto com a coluna de apoio. O fundo da página
       por trás, para os cartões passarem por baixo; o respiro de
       cima alinha a busca com o topo da coluna de apoio (12px). */
    position: sticky; top: 0; z-index: 5;
    background: var(--pagina);
    padding: var(--esp-3) 0 var(--esp-2);
    margin-top: calc(-1 * var(--esp-3));
  }
  /* borras: o FUNDO da loja (13/09, 2ª medida — "cinza morto"): três
     respingos GRANDES sangrando as bordas, com presença atrás das
     seções, dos produtos e do carrinho. Os lados chapados dos
     recortes ficam sempre FORA da tela (alturas atreladas ao
     viewport); z negativo — cartões e texto por cima, sempre. */
  .fundo-borra { display: block; position: fixed; pointer-events: none; z-index: -1; }
  /* o roxo/verde fica mais à esquerda: o drip central passa por
     baixo do CARD das seções, nunca sob o subtítulo da lista */
  .fundo-borra-1 { left: -330px; top: -150px; height: calc(100dvh + 240px); width: auto; }
  .fundo-borra-2 { right: -210px; top: -70px; height: calc(100dvh + 200px); width: auto; }
  .fundo-borra-3 { left: -150px; bottom: -190px; width: 480px; transform: rotate(180deg); }
  /* a busca cabe o placeholder INTEIRO (12/09: estava cortado em
     "copo de trein"): mínimo medido do texto + lupa + respiros. Quem
     cede em janela estreita são as portas, nunca a busca. */
  /* busca MAIS ESTREITA (06/09/2026, 2ª medida do operador): 320px, e
     o placeholder encurtou para caber inteiro ("copo" em vez de "copo
     de treino"); as duas portas dividem o resto da largura da grade */
  .loja-topo-linha .loja-busca { flex: 0 1 320px; min-width: 280px; }
  .loja-topo-linha .portas-loja {
    flex: 1 1 0; min-width: 0; margin: 0; gap: var(--esp-3);
    grid-template-columns: 1fr 1fr;
  }
  /* portas na ALTURA DA BUSCA (13/09, 2ª medida): só o título, numa
     linha de 34px — a explicação vive no title (tooltip) e dentro
     das próprias entradas. Toda a altura poupada foi para o banner. */
  .porta-cartao {
    padding: 0 var(--esp-3); gap: 0; min-height: 34px;
    flex-direction: row; align-items: center;
  }
  .porta-cartao strong { font-size: 13px; line-height: 17px; white-space: nowrap; }
  .porta-cartao .t-apoio { display: none; }
  /* o banner fica com TODA a altura que sobra (13/09): cresce com a
     janela; o que está garantido embaixo é a linha de consulta e a
     primeira dobra dos produtos */
  .banner-loja {
    height: clamp(190px, calc(100dvh - 405px), 380px);
    display: flex; align-items: center;
    /* 72px: o texto começa DEPOIS da seta esquerda do carrossel */
    padding: 0 72px;
  }
  .banner-titulo { font-size: 32px; line-height: 36px; }
  .banner-arte { display: block; position: absolute; inset: 0; pointer-events: none; }
  .banner-arte img { position: absolute; }
  /* anúncio 1 — display: respingo laranja ATRAVESSANDO a direita
     (sangra topo, borda e pé) e o display recortado em primeiro
     plano, pisando fora da faixa embaixo */
  /* anúncio de ABERTURA — a linha: foto autorizada INTEGRADA (cobre a
     direita inteira, fundida no campo por máscara de gradiente),
     respingo laranja atravessando o topo sobre a foto e o roxo/verde
     entrando pelo pé esquerdo — camadas, como no catálogo */
  .banner-linha .banner-foto-grande {
    position: absolute; right: 0; top: 0; height: 100%; width: 44%;
    object-fit: cover; object-position: 50% 32%;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 150px);
    mask-image: linear-gradient(90deg, transparent, black 150px);
  }
  .banner-linha .banner-respingo { right: -70px; top: -120px; width: 430px; }
  .banner-linha .banner-respingo-2 { left: -170px; bottom: -160px; width: 480px; }
  /* anúncio do EXPOSITOR (06/09/2026): as quatro peças compostas —
     roxo/verde sangrando o pé esquerdo, laranja atravessando o alto
     direito, stopper ao fundo, woobler na frente embaixo, display de
     36 ganchos pisando fora da faixa e clipstrip sangrando a borda.
     Medidas em % da faixa: a composição acompanha a altura do banner. */
  .banner-display .banner-respingo { right: -80px; top: -100px; width: 520px; }
  .banner-display .banner-respingo-2 { left: -190px; bottom: -170px; width: 420px; }
  .banner-display .banner-stopper { right: 20%; top: 8%; height: 56%; width: auto; }
  .banner-display .banner-woobler { right: 30%; bottom: 5%; height: 46%; width: auto; }
  .banner-display .banner-produto { right: 9%; bottom: -30px; height: calc(100% + 58px); width: auto; }
  .banner-display .banner-clipstrip { right: 1.5%; top: -14px; height: calc(100% + 34px); width: auto; }
  /* o texto quebra em duas linhas antes de encostar nas peças */
  .banner-display .banner-texto-bloco { max-width: 340px; }
  /* anúncio 2 — sortimento: roxo/verde sangrando a esquerda inteira,
     laranja pequeno no pé direito, texto deslocado para o centro */
  .banner-sortimento .banner-respingo { left: -110px; top: -90px; width: 440px; }
  .banner-sortimento .banner-respingo-2 { right: -60px; bottom: -110px; width: 260px; }
  .banner-sortimento .banner-texto-bloco { margin-left: 290px; }
  .banner-seta { display: inline-flex; width: 44px; height: 44px; font-size: 32px; }
  .banner-pontos { position: absolute; left: 0; right: 0; margin: 0; justify-content: center; }
  .banner-seta-esq { left: 16px; }
  .banner-seta-dir { right: 16px; }
  .banner-pontos { bottom: 14px; }
  /* fim da FAIXA BRANCA (13/09): o topo some no desktop — chips vivem
     no rail; busca/portas/selos desceram para a área cinza */
  .loja-topo { display: none; }
  .loja-barra { display: none; }
  .loja-corpo { padding-bottom: var(--esp-8); }
  .loja-assinatura { padding: var(--esp-2) var(--esp-8); }
}

/* CINCO por linha de 1300 para cima (06/09/2026), com a mesma regra
   das fileiras idênticas: só onde o código + EAN cabem numa linha em
   TODOS os cartões — a 1300 sobram ~190px por cartão, a 1440 ~216.
   Entre 1100 e 1299 ficam QUATRO, todas iguais. */
@media (min-width: 1300px) {
  .loja-lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* faixa mais estreita (1100–1299): stopper e woobler menores para não
   passarem por baixo do texto do anúncio do expositor */
@media (min-width: 1100px) and (max-width: 1299px) {
  .banner-display .banner-stopper { height: 46%; right: 19%; }
  .banner-display .banner-woobler { height: 40%; right: 27%; }
}

/* ---------------- vitrine de entrada (categorias com foto) ----------- */
.vitrine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.vitrine-cartao {
  display: flex; flex-direction: column; gap: var(--esp-2);
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-1);
  padding: var(--esp-4); cursor: pointer; font: inherit; text-align: left;
}
.vitrine-cartao:hover { border-color: var(--primaria-media); }
.vitrine-foto, .vitrine-foto-vazia {
  width: 100%; height: 110px; object-fit: contain; background: var(--superficie);
}
.vitrine-foto-vazia {
  border-radius: var(--raio-controle); background: var(--primaria-suave);
  display: grid; place-items: center; color: var(--primaria-texto);
  font-size: 24px; font-weight: 700;
}
.vitrine-nome { font-size: 14px; font-weight: 600; color: var(--n-950); }
.vitrine-itens { font-size: 12px; color: var(--n-500); }
.vitrine-completo { justify-content: center; align-items: center; border-style: dashed; }
.vitrine-completo .vitrine-nome { color: var(--primaria-texto); }
@media (min-width: 720px) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vitrine-foto, .vitrine-foto-vazia { height: 150px; } }
@media (min-width: 1100px) { .vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .vitrine { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ------- pontes de busca: sugestão, nunca mistura (27/08/2026) ------- */
.loja-pontes { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-4); }
.ponte-linha {
  display: flex; align-items: center; gap: var(--esp-2);
  font: inherit; font-size: 13px; color: var(--primaria-texto);
  background: var(--primaria-suave); border: 1px solid var(--primaria-media);
  border-radius: var(--raio-controle); padding: var(--esp-2) var(--esp-3);
  cursor: pointer; text-align: left;
}
.ponte-linha strong { font-weight: 600; }

/* ------- confirmação perto do clique (aprovada em 27/08/2026) -------- */
.toast-ok {
  position: absolute; top: var(--esp-2); right: var(--esp-2); z-index: 2;
  background: var(--sucesso-600); color: var(--branco);
  font-size: 12px; font-weight: 600; border-radius: var(--raio-pilula);
  padding: 3px 10px; pointer-events: none;
  animation: toast-some 1.4s ease-out forwards;
}
@keyframes toast-some {
  0% { opacity: 0; transform: translateY(4px); }
  15% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ============ A PORTA (tela dividida, 04/09) ============
   Desktop: metade esquerda é a MARCA de ponta a ponta — banda branca
   com a logo (área de segurança), fio com as cores da capa, campo
   marinho com o respingo sangrando e tipografia grande. Metade
   direita: os campos em fundo claro ATÉ A BORDA; só o texto tem
   limite de leitura. Celular: as metades empilham e a marca vira
   faixa de topo contida. Sem cartão, sem sombra, sem moldura.
   Toda cor vem dos tokens --lolly-* (tokens-marca.css). */
.porta { min-height: 100dvh; background: var(--branco); }
.porta-divisao {
  display: grid; grid-template-rows: auto 1fr; min-height: 100dvh;
  position: relative; overflow: clip; --porta-corte: 100%;
}
/* campo NENNY (06/09): magenta cheio, como a página institucional do
   catálogo — não o marinho institucional (linguagem Kinddy) */
.porta-marca {
  background: var(--lolly-magenta); display: flex; flex-direction: column;
  overflow: hidden;
}
.porta-marca-banda {
  background: var(--branco); display: flex; align-items: center;
  justify-content: space-between; padding: var(--esp-4) var(--esp-6);
}
/* a LOLLY é a dona da página (05/09): logo com presença de verdade */
.porta-marca-logo { width: 140px; display: block; }
.porta-fio { display: flex; height: 4px; flex: none; }
.porta-fio i { flex: 1; }
.porta-fio i:nth-child(1) { background: var(--lolly-ciano); }
.porta-fio i:nth-child(2) { background: var(--lolly-verde); }
.porta-fio i:nth-child(3) { background: var(--lolly-laranja); }
.porta-fio i:nth-child(4) { background: var(--lolly-roxo); }
.porta-marca-campo {
  position: relative; flex: 1; display: flex; flex-direction: column;
  justify-content: center; padding: var(--esp-5) var(--esp-6);
  overflow: hidden; /* o respingo sangra as bordas do CAMPO marinho —
                       nunca sobe atrás da banda branca da logo */
}
.porta-marca-respingo {
  position: absolute; top: -28px; right: -52px; width: 190px;
  transform: scaleX(-1); pointer-events: none;
}
/* borras ESPALHADAS e ATRAVESSANDO (catálogo p.3): a grande e a
   pequena sangram as bordas do campo; a MÉDIA vive no nível da
   divisão e CRUZA a fronteira entre a cor e o branco */
.porta-marca-respingo-3 {
  position: absolute; left: -44px; top: -34px; width: 120px;
  transform: rotate(180deg); pointer-events: none; display: none;
}
.porta-borra { position: absolute; pointer-events: none; z-index: 1; }
.porta-borra-media {
  /* ENCOSTADA no lado direito do campo magenta (ajuste de 07/09):
     a aresta direita reta da arte casa exatamente com a fronteira */
  left: calc(var(--porta-corte) - 220px); bottom: -60px; width: 220px;
  display: none;
}
.porta-marca-texto { position: relative; }
/* o nome da farmácia é ACOLHIDA, leve — a manchete é da marca.
   Sobre o magenta, texto branco (precedente: Material de PDV p.34);
   corpos pequenos em peso 600 pela leitura. */
.porta-marca-texto, .porta-marca-rodape { position: relative; z-index: 2; }
.porta-ola {
  /* opção B (24/09): texto grande em negrito, branco sólido — 4,01:1
     sobre o magenta cheio (régua de 3:1 para texto grande) */
  font-size: 19px; line-height: 25px; font-weight: 700;
  color: var(--sobre-magenta); margin: 0 0 var(--esp-2);
  overflow-wrap: anywhere;
}
.porta-manchete {
  font-size: 21px; line-height: 1.3; font-weight: 800;
  letter-spacing: -.01em; color: var(--sobre-magenta);
  margin: 0; max-width: 26ch;
}
/* credencial lida como NÚMERO: destaque grande, resto pequeno */
.porta-marca-rodape { margin-top: var(--esp-5); }
.porta-credencial { margin: 0; max-width: 34ch; }
.porta-credencial-destaque {
  display: block; font-size: 32px; line-height: 1; font-weight: 800;
  letter-spacing: -.01em; color: var(--sobre-magenta);
}
.porta-credencial-texto {
  display: block; font-size: 13px; line-height: 19px; font-weight: 600;
  color: var(--sobre-magenta); margin-top: 2px;
}
.porta-credencial-fonte {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--sobre-magenta-suave);
  margin-top: 2px;
}
.porta-marca-assinatura {
  /* opção B (24/09): 19px/700 branco sólido sobre o magenta (4,01:1) */
  display: none; font-size: 19px; line-height: 25px; font-weight: 700;
  color: var(--sobre-magenta); margin: var(--esp-3) 0 0;
}
.porta-conteudo {
  background: var(--branco); display: flex; justify-content: center;
}
.porta-coluna {
  width: 100%; max-width: 620px;
  padding: var(--esp-8) var(--esp-5) var(--esp-14);
}
/* tipografia colorida dos títulos, como o catálogo faz na página
   branca — o magenta passa AA em negrito deste corpo */
.porta-titulo {
  font-size: 19px; line-height: 25px; font-weight: 700;
  color: var(--lolly-magenta); margin: 0;
}
.porta-apoio {
  font-size: 13px; line-height: 19px; color: var(--n-500);
  margin: var(--esp-1) 0 0;
}
.porta-grupo { margin-top: var(--esp-5); }
.porta-etiqueta {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lolly-marinho);
  margin: 0 0 var(--esp-1); display: flex; align-items: center;
  gap: var(--esp-2);
}
.porta-etiqueta::after {
  content: ""; flex: 1; height: 1px; background: var(--n-100);
}
/* bloco de LEITURA: o que já temos, denso — não é formulário */
.porta-resumo { margin-top: var(--esp-4); }
.porta-resumo-linha {
  font-size: 14px; line-height: 22px; color: var(--n-800); margin: 0;
  overflow-wrap: anywhere;
}
.porta-resumo-forte { font-weight: 600; color: var(--n-950); }
.porta-link {
  font: inherit; font-size: 13px; color: var(--lolly-marinho);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; margin-top: var(--esp-2);
}
.porta-campo-solo { margin-top: var(--esp-5); }
.porta-campo { padding: var(--esp-2) 0 0; }
.porta-campo label {
  display: block; font-size: 11px; font-weight: 600;
  color: var(--n-500); margin-bottom: 1px;
}
.porta-campo input {
  width: 100%; font: inherit; font-size: 15px; color: var(--n-950);
  background: transparent; border: none;
  border-bottom: 1.5px solid var(--n-200); border-radius: 0;
  padding: 3px 0 6px; transition: border-color var(--transicao);
}
.porta-campo input::placeholder { color: var(--n-300); }
.porta-campo input:focus, .porta-campo input:focus-visible {
  outline: none; box-shadow: none;
  border-bottom-color: var(--lolly-marinho);
}
.porta-dupla {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--esp-6);
}
.porta-divergencia-nota {
  font-size: 12px; line-height: 17px; color: var(--alerta-700);
  margin: 4px 0 0;
}
.porta-etapa { animation: porta-chega 260ms ease-out; }
.porta-etapa-volta { animation-name: porta-volta; }
@keyframes porta-chega {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes porta-volta {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .porta-etapa { animation: none; }
}
.btn-lolly {
  width: 100%; margin-top: var(--esp-6); min-height: 48px;
  font-size: 15px; border-radius: 12px;
  background: var(--lolly-marinho); color: var(--branco);
}
.btn-lolly:hover { background: var(--lolly-marinho-escuro); }
.porta-btn-suave { width: 100%; margin-top: var(--esp-2); }
.porta-passo {
  /* n-400 dava 2,57:1 sobre branco (revisão 24/09); n-500 dá 5,20:1 */
  text-align: center; color: var(--n-500); font-size: 12px;
  margin: var(--esp-3) 0 0;
}
/* a credencial que responde "isso gira?" — fixa, no lado da decisão */
.porta-credencial-clara {
  /* bem separada dos dados cadastrais (ajuste de 07/09) */
  display: block; margin-top: var(--esp-14);
  padding-left: var(--esp-4);
  border-left: 4px solid var(--lolly-laranja);
}
.pcc-destaque {
  display: block; font-size: 40px; line-height: 1; font-weight: 800;
  letter-spacing: -.01em; color: var(--lolly-marinho);
}
.pcc-texto {
  /* o número chama, a FRASE convence: corpo maior, escura, com peso */
  display: block; font-size: 17px; line-height: 24px; font-weight: 700;
  color: var(--n-950); margin-top: 6px; max-width: 32ch;
}
.pcc-fonte {
  display: block; font-size: 12px; color: var(--n-500); margin-top: 2px;
}
.porta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.porta-chip {
  font: inherit; font-size: 13px; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-pilula);
  background: var(--superficie); color: var(--n-800);
  transition: border-color var(--transicao);
}
.porta-chip:hover { border-color: var(--lolly-marinho); }
.porta-aviso-email {
  font-size: 13px; line-height: 19px; color: var(--alerta-700);
  margin: 6px 0 0;
}
.porta-aviso-email button {
  font: inherit; font-weight: 600; color: inherit; background: none;
  border: none; padding: 0; text-decoration: underline; cursor: pointer;
}
.porta-senha-linha { position: relative; }
.porta-senha-linha input { padding-right: 44px; }
.porta-olho {
  position: absolute; right: 0; top: 50%; transform: translateY(-58%);
  border: none; background: none; color: var(--n-500); cursor: pointer;
  padding: 8px; display: flex; border-radius: var(--raio-controle);
}
.porta-olho:focus-visible { outline: none; box-shadow: var(--anel-foco); }
.porta-escolha { margin-top: var(--esp-4); }
.porta-escolha-item {
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; margin-top: var(--esp-2);
  padding: var(--esp-3) var(--esp-4); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: var(--raio-controle);
  transition: border-color var(--transicao);
}
.porta-escolha-item:hover { border-color: var(--lolly-marinho); }
.porta-codigo { margin-top: var(--esp-4); }
/* (bloco 14) a pergunta do CEP, junto do campo */
.cep-pergunta { margin-top: var(--esp-2); }
.cep-pergunta p { margin: 0 0 var(--esp-2); }
.cep-pergunta .botoes { gap: var(--esp-2); }
.cep-pergunta .btn { flex: 1 1 auto; min-width: 0; }
.porta-caminhos { display: flex; flex-direction: column; gap: var(--esp-2); margin-top: var(--esp-3); }
.porta-caminhos:empty { display: none; }
.porta-caminhos .btn { width: 100%; }
#recuperar-msg { margin-top: var(--esp-3); }

@media (min-width: 900px) {
  /* A MARCA É DONA DA TELA (05/09) — e a página NUNCA rola no
     desktop (07/09): altura travada na janela e espaçamentos
     verticais FLUIDOS (clamp com vh), que encolhem quando a janela
     é mais baixa. Se a janela for baixa demais até para o mínimo,
     a coluna de dados rola POR DENTRO — a página, nunca. */
  .porta { height: 100dvh; overflow: clip; }
  .porta-divisao {
    height: 100%; min-height: 0; --porta-corte: 58%;
    grid-template-rows: none; grid-template-columns: minmax(520px, 58%) 1fr;
  }
  .porta-divisao-enxuta {
    grid-template-columns: minmax(560px, 64%) 1fr;
    --porta-corte: 64%;
  }
  .porta-conteudo { overflow-y: auto; }
  .porta-marca-banda { padding: clamp(10px, 1.8vh, 20px) var(--esp-8); }
  .porta-marca-logo { width: clamp(150px, 22vh, 212px); }
  .porta-marca-campo {
    padding: clamp(20px, 4.5vh, 40px) var(--esp-10) clamp(24px, 5vh, 40px);
  }
  .porta-marca-respingo { top: -60px; right: -90px; width: 380px; }
  .porta-marca-respingo-3 { display: block; left: -54px; top: -44px; width: 150px; }
  .porta-borra-media {
    display: block; left: calc(var(--porta-corte) - 260px);
    bottom: -70px; width: 260px;
  }
  .porta-credencial-clara { margin-top: clamp(28px, 9vh, 88px); }
  .porta-ola { font-size: 20px; line-height: 27px; }
  .porta-manchete { font-size: clamp(26px, 2.5vw, 36px); }
  .porta-credencial-destaque { font-size: 48px; }
  .porta-credencial-texto { font-size: 15px; line-height: 22px; margin-top: 4px; }
  .porta-credencial-fonte { font-size: 12px; }
  .porta-marca-assinatura { display: block; }
  /* o rodapé da marca cola embaixo; o texto continua centrado */
  .porta-marca-rodape {
    position: absolute; bottom: clamp(12px, 2.6vh, 24px);
    left: var(--esp-10); right: var(--esp-10); margin-top: 0;
  }
  .porta-coluna {
    padding: clamp(16px, 3.5vh, 40px) var(--esp-8); max-width: 560px;
  }
  .porta-resumo { margin-top: clamp(10px, 1.8vh, 16px); }
  .porta-campo-solo { margin-top: clamp(12px, 2.2vh, 20px); }
  .btn-lolly { margin-top: clamp(14px, 2.6vh, 24px); }
}

/* ================= PORTA PÚBLICA — entrada por CNPJ (24/09/2026) =================
   Desenho de data/modelo-porta-publica.html traduzido para os tokens da
   porta: a marca é dona da metade esquerda (banda branca com a logo, o
   fio de quatro cores, a FAIXA das credenciais girando e o campo magenta
   com a foto), a metade direita é o campo de CNPJ até a borda. No HTML
   os dados vêm ANTES da marca (o Tab começa no campo); o grid coloca. */
.pp-divisao {
  /* minmax(0, 1fr): a coluna nunca é esticada pelo conteúdo (24/09 —
     a lista de passos levava a página a 386px num celular de 360) */
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
  min-height: 100dvh; position: relative;
}
.pp-marca {
  grid-row: 1; background: var(--lolly-magenta); display: flex;
  flex-direction: column; overflow: hidden; min-height: 0;
}
.pp-dados { grid-row: 2; background: var(--branco); display: flex; flex-direction: column; }
.pp-banda { justify-content: space-between; gap: var(--esp-4); }
.pp-banda-nota {
  font-size: 11px; line-height: 15px; font-weight: 600; letter-spacing: .04em;
  color: var(--lolly-marinho); text-align: right;
}

/* ---- a FAIXA das credenciais ---- */
.pp-faixa {
  position: relative; flex: none; overflow: hidden; display: grid;
  background: var(--lolly-marinho); min-height: 132px;
}
.pp-tempo {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 8;
  background: var(--banner-controle);
}
.pp-tempo b { display: block; height: 100%; width: 0; background: var(--branco); opacity: .9; }
.pp-tempo b.pp-corre { animation: pp-enche 7s linear forwards; }
@keyframes pp-enche { from { width: 0; } to { width: 100%; } }
.pp-tela {
  grid-area: 1 / 1; z-index: 3; display: flex; align-items: center;
  gap: var(--esp-3); padding: var(--esp-4) var(--esp-4) var(--esp-6) var(--esp-5);
  color: var(--lolly-marinho); background-color: var(--pp-campo);
  /* o campo de cor cobre a esquerda e vai abrindo para a foto do catálogo */
  background-image:
    linear-gradient(90deg, var(--pp-campo) 0%, var(--pp-campo) 50%,
      color-mix(in srgb, var(--pp-campo) 82%, transparent) 62%,
      color-mix(in srgb, var(--pp-campo) 28%, transparent) 78%,
      transparent 94%),
    var(--pp-foto, none);
  background-size: auto, cover; background-position: center, var(--pp-pos, 70% 40%);
  background-repeat: no-repeat;
  opacity: 0; pointer-events: none; transition: opacity .55s ease;
}
.pp-tela[data-campo="ciano"] { --pp-campo: var(--lolly-ciano); }
.pp-tela[data-campo="laranja"] { --pp-campo: var(--lolly-laranja); }
.pp-tela[data-campo="verde"] { --pp-campo: var(--lolly-verde); }
.pp-tela[data-campo="roxo"] { --pp-campo: var(--lolly-roxo); }
.pp-tela[data-campo="marinho"] { --pp-campo: var(--lolly-marinho); }
.pp-tela-clara { color: var(--branco); }
.pp-tela-ve { opacity: 1; pointer-events: auto; }
.pp-num {
  font-size: 34px; font-weight: 900; letter-spacing: -.05em; line-height: .9;
  flex: none;
}
.pp-tela-ve .pp-num { animation: pp-sobe .62s ease-out both; }
@keyframes pp-sobe { from { opacity: 0; transform: translateY(14px) scale(.93); } to { opacity: 1; transform: none; } }
.pp-txt { min-width: 0; max-width: 34ch; }
.pp-tit { font-size: 13.5px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.pp-sub { font-size: 11.5px; line-height: 1.3; font-weight: 600; margin: 3px 0 0; }
.pp-fonte {
  display: block; margin-top: 5px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
/* nos campos coloridos, sem transparência no texto: a opacidade .9 e
   .72 derrubava o contraste (revisão 24/09) */
/* o cartão de campo ROXO tem texto BRANCO: só passa como texto grande
   em negrito (4,23:1 ≥ 3:1; o marinho sobre o roxo dá 2,66:1). Opção
   B do Juninho (24/09): título, subtítulo e fonte em 19px, peso 700+,
   e a caixa de texto sem teto de largura. Nos campos ciano, laranja e
   verde o texto é marinho (4,8 / 4,7 / 5,9:1) e fica pequeno. */
.pp-tela-clara .pp-tit { font-size: 19px; line-height: 1.15; }
.pp-tela-clara .pp-sub { font-size: 19px; line-height: 1.2; font-weight: 700; }
.pp-tela-clara .pp-fonte { font-size: 19px; line-height: 1.15; letter-spacing: .04em; }
.pp-tela-clara .pp-txt { max-width: none; }
.pp-chips { display: flex; gap: var(--esp-2); flex: none; margin-left: auto; }
.pp-chips img {
  height: 44px; width: 44px; object-fit: contain; background: var(--branco);
  border-radius: 12px; padding: 5px; box-shadow: var(--sombra-2);
}
.pp-chips-solto img { background: none; box-shadow: none; padding: 0; border-radius: 0; height: 56px; width: 56px; }
.pp-tela-ve .pp-chips img { animation: pp-pula .55s ease-out both; }
.pp-tela-ve .pp-chips img:nth-child(2) { animation-delay: .1s; }
@keyframes pp-pula { from { opacity: 0; transform: translateY(12px) scale(.84); } to { opacity: 1; transform: none; } }
.pp-bolas {
  grid-area: 1 / 1; align-self: end; justify-self: start; z-index: 6;
  display: flex; gap: 7px; padding: 0 var(--esp-5) var(--esp-2);
}
.pp-bolas button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--banner-ponto); transition: background .3s, width .35s;
}
.pp-bolas button:hover { background: var(--branco); }
.pp-bolas button[aria-current="true"] { background: var(--branco); width: 22px; border-radius: var(--raio-pilula); }
.pp-bolas button:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* ---- o campo magenta: chapéu, manchete, apoio e a foto parada ---- */
.pp-campo-marca {
  position: relative; flex: 1; min-height: 40vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.pp-resp { position: absolute; pointer-events: none; user-select: none; }
.pp-resp-1 { top: -20px; right: -16px; width: 68px; transform: scaleX(-1); z-index: 5; }
.pp-resp-2 { display: none; top: -24px; left: -28px; width: 88px; transform: rotate(146deg); opacity: .9; z-index: 1; }
.pp-marca-texto {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  padding: var(--esp-5) 74px var(--esp-6) var(--esp-5);
}
.pp-chapeu {
  display: inline-flex; align-self: flex-start; font-size: 10px; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
  /* pílula em marinho (24/09): branco sobre o rosa translúcido dava
     2,88:1; sobre o marinho da logo dá 11,6:1 */
  color: var(--sobre-magenta); background: var(--lolly-marinho);
  border: 1px solid var(--lolly-marinho-escuro); padding: 5px 10px;
  border-radius: var(--raio-pilula); margin-bottom: var(--esp-3);
}
.pp-manchete { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; max-width: 19ch; }
.pp-manchete em { font-style: normal; color: var(--sobre-magenta); }
.pp-apoio-marca {
  /* opção B (24/09): 19px/700 branco sólido sobre o magenta (4,01:1) */
  margin: var(--esp-3) 0 0; max-width: 34ch; font-size: 19px; line-height: 1.35;
  font-weight: 700; color: var(--sobre-magenta);
}
.pp-foto {
  position: relative; z-index: 2; flex: 1; min-height: 172px;
  background: url("/api/loja/imagem/marca/bebe-capa.webp") 50% 42% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--n-950) 17%);
  mask-image: linear-gradient(to bottom, transparent 0, var(--n-950) 17%);
}

/* ---- a metade dos dados: um campo só ---- */
.pp-coluna {
  width: 100%; max-width: 620px; margin: 0 auto; flex: 1;
  padding: var(--esp-6) var(--esp-5) var(--esp-6);
}
.pp-link-invalido { margin: 0 0 var(--esp-4); }
.pp-titulo {
  margin: var(--esp-3) 0 0; font-size: 24px; line-height: 1.1; font-weight: 800;
  letter-spacing: -.03em; color: var(--n-950);
}
.pp-titulo em { font-style: normal; color: var(--lolly-magenta); }
.pp-apoio { max-width: 42ch; font-size: 14px; line-height: 1.55; margin-top: var(--esp-2); }
.pp-campo { margin-top: var(--esp-6); }
.pp-campo label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--n-500); margin-bottom: 4px;
}
.pp-campo input {
  font-size: 22px; font-weight: 700; letter-spacing: .01em; padding: 5px 0 9px;
  border-bottom-width: 1.8px;
}
.pp-campo input::placeholder { font-weight: 500; letter-spacing: 0; }
.pp-campo-ok input { border-bottom-color: var(--lolly-verde); }
.pp-campo-ruim input { border-bottom-color: var(--erro-600); }
.pp-dica {
  min-height: 19px; margin: 8px 0 0; font-size: 12.5px; line-height: 1.4;
  color: var(--n-500); transition: opacity .2s;
}
.pp-dica:empty { opacity: 0; }
.pp-dica-ruim { color: var(--erro-700); font-weight: 600; }
.pp-dica-ok { color: var(--sucesso-700); font-weight: 600; }
.pp-btn { margin-top: var(--esp-5); box-shadow: var(--sombra-1); }
.pp-btn svg { margin-left: 6px; }
.pp-entrar { margin: var(--esp-3) 0 0; text-align: center; font-size: 13.5px; color: var(--n-500); }
.pp-passos {
  list-style: none; margin: var(--esp-6) 0 0; padding: 0;
  display: flex; align-items: center; gap: var(--esp-2);
}
.pp-passo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pp-passo + .pp-passo { flex: 1; }
.pp-passo + .pp-passo::before { content: ""; flex: 1; min-width: 8px; height: 1px; background: var(--n-100); }
.pp-passo b {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid;
  place-items: center; font-size: 19px; font-weight: 800; line-height: 1;
  background: var(--n-100); color: var(--n-500);
}
/* o número do passo ativo: dígito grande em negrito, branco sobre o
   magenta cheio (4,01:1) — o círculo cresce para 30px (opção B, 24/09) */
.pp-passo-ativo b { background: var(--lolly-magenta); color: var(--sobre-magenta); }
.pp-passo span { font-size: 12px; font-weight: 500; color: var(--n-500); white-space: nowrap; }
@media (max-width: 399px) { .pp-passo span { white-space: normal; font-size: 11px; line-height: 13px; } }
.pp-passo-ativo span { color: var(--n-800); font-weight: 600; }
.pp-pe { margin-top: auto; justify-content: center; }

/* ---- a porta do link pessoal (acréscimos de 24/09) ---- */
.porta-links { display: flex; flex-wrap: wrap; gap: var(--esp-2) var(--esp-5); margin: 0; }
.porta-resumo-nota { font-size: 12px; line-height: 17px; color: var(--n-500); margin: var(--esp-1) 0 var(--esp-2); }
.porta-grupo-nota { font-size: 12px; line-height: 17px; color: var(--n-500); margin: 0 0 var(--esp-1); }
/* (bloco 15.12) o porquê de um campo exigido, logo abaixo dele (não é
   nota de grupo: mora fora dos campos que abrem, junto do responsável) */
.porta-campo-porque { font-size: 12px; line-height: 17px; color: var(--n-500); margin: 4px 0 0; }
.porta-aviso-mg {
  margin: var(--esp-3) 0 0; padding: var(--esp-2) var(--esp-3); font-size: 13px;
  line-height: 19px; color: var(--alerta-700); background: var(--alerta-100);
  border-radius: var(--raio-controle);
}
.porta-receita-nota {
  font-size: 12px; line-height: 17px; color: var(--n-800); margin: 4px 0 0;
}
.porta-receita-nota button {
  font: inherit; font-weight: 600; color: var(--lolly-marinho); background: none;
  border: none; padding: 0; text-decoration: underline; cursor: pointer; margin-left: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pp-tela, .pp-num, .pp-chips img, .pp-tempo b { animation: none !important; transition: none !important; }
}

@media (min-width: 900px) {
  .pp .pp-divisao {
    height: 100dvh; min-height: 0; grid-template-rows: none;
    grid-template-columns: minmax(520px, 57%) 1fr;
  }
  /* as duas colunas na MESMA linha: com grid-row auto o posicionamento
     esparso jogava a marca para a segunda linha (defeito pego em captura) */
  .pp-marca { grid-row: 1; grid-column: 1; height: 100%; }
  .pp-dados { grid-row: 1; grid-column: 2; overflow-y: auto; }
  .pp-banda { padding: clamp(10px, 1.8vh, 20px) var(--esp-8); }
  .pp-faixa { height: clamp(124px, 22vh, 184px); min-height: 0; }
  .pp-tela { padding: 0 var(--esp-5) 0 var(--esp-8); gap: clamp(13px, 2vw, 26px); }
  .pp-num { font-size: clamp(30px, min(4vw, 6.2vh), 54px); }
  .pp-tit { font-size: clamp(13.5px, 1.9vh, 19px); }
  .pp-sub { font-size: clamp(11.5px, 1.5vh, 14.5px); margin-top: clamp(3px, .5vh, 6px); }
  .pp-tela-clara .pp-tit, .pp-tela-clara .pp-sub, .pp-tela-clara .pp-fonte { font-size: 19px; }
  .pp-chips img { height: clamp(50px, 8.2vh, 74px); width: clamp(50px, 8.2vh, 74px); border-radius: 15px; padding: 7px; }
  .pp-chips-solto img { height: clamp(62px, 10.4vh, 96px); width: clamp(62px, 10.4vh, 96px); }
  .pp-bolas { padding: 0 var(--esp-8) clamp(8px, 1.2vh, 13px); }
  .pp-campo-marca { flex-direction: row; align-items: stretch; min-height: 0; }
  .pp-resp-1 { top: -36px; right: -34px; width: clamp(104px, 12vw, 172px); }
  .pp-resp-2 { display: block; }
  .pp-marca-texto {
    flex: 1; min-width: 0; justify-content: center;
    padding: clamp(20px, 3.2vh, 36px) clamp(8px, 1.4vw, 20px) clamp(44px, 6vh, 58px) var(--esp-8);
  }
  .pp-chapeu { font-size: 11px; letter-spacing: .16em; padding: 5px 11px; margin-bottom: clamp(11px, 1.6vh, 18px); }
  .pp-manchete { font-size: clamp(24px, min(2.9vw, 4.2vh), 37px); }
  .pp-apoio-marca { font-size: clamp(19px, 2vh, 22px); margin-top: clamp(11px, 1.6vh, 18px); }
  .pp-foto {
    width: 45%; flex: none; height: 100%; min-height: 0; background-position: 47% 24%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, var(--n-950) 30%);
    mask-image: linear-gradient(to right, transparent 0, var(--n-950) 30%);
  }
  .pp-coluna { padding-top: clamp(34px, 6.4vh, 62px); padding-left: var(--esp-8); padding-right: var(--esp-8); }
  .pp-titulo { font-size: clamp(23px, min(2.5vw, 3.9vh), 33px); }
}

/* (08/10/2026) o material promocional que vem junto do pedido, na confirmação */
.material-vem-junto { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: var(--n-100); color: var(--n-800); font-size: 14px; line-height: 1.4; }