/* Sistema Morumbi 3D — a folha das TELAS.

   Os tokens (cor, tipo, espaço, raio, sombra) e os componentes de toda tela
   (botão, campo, cartão, etiqueta, tabela, gaveta, modal, alerta, a casca)
   moram em ds.css, que carrega antes desta. Aqui fica o que é de uma tela
   só: a vitrine, o quadro de produção, o cadastro de produto, o gerador.

   Uma tela pode AJUSTAR um componente dentro dela (".tabela-produtos td");
   redefinir a regra-base aqui é o começo do segundo componente, e
   tests/test_design_system.py reprova. */

:root{
  /* O símbolo do WhatsApp, usado como MÁSCARA pelo botão da vitrine: ele
     herda a cor de quem o carrega. Os tokens moram em ds.css. */
  --icone-zap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}

/* ===================== palco: a tela de entrada ===================== */
body.palco{
  background:var(--palco);color:var(--palco-tinta);
  min-height:100vh;display:flex;align-items:center;
}
/* Camadas de 0,24 mm: a textura e a propria peca vista de lado. */
body.palco::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    to bottom, var(--textura-palco) 0 1px, transparent 1px 7px);
}
.palco .caixa{
  position:relative;width:100%;max-width:1000px;margin:0 auto;
  padding:48px 32px;display:grid;gap:56px;align-items:center;
}
@media(min-width:860px){.palco .caixa{grid-template-columns:1fr 380px}}

.marca{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.marca .simbolo{
  width:150px;height:auto;display:block;margin-bottom:2px;
}
.marca .nome{
  font-size:clamp(38px,6vw,58px);font-weight:700;line-height:1;
  letter-spacing:-.03em;margin:0;
}
/* Sem o arquivo da marca, o nome escrito faz as vezes dela -- com o 3 e o
   D nas cores que eles tem no logotipo, e nao um vermelho qualquer. */
.marca .nome .tres{color:var(--laranja)}
.marca .nome .de{color:var(--azul-claro)}
.marca .lema{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;margin:0;color:var(--palco-suave);
}
.marca .lema .a{color:var(--azul-claro)}
.marca .lema .b{color:var(--laranja-claro)}

form.entrada{
  background:var(--palco-2);border:1px solid var(--palco-linha);
  border-radius:6px;padding:28px;display:flex;flex-direction:column;gap:18px;
}
form.entrada h2{
  margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em;
}

button.principal{
  font:inherit;font-size:16px;font-weight:600;padding:12px 16px;
  background:var(--azul);color:var(--branco);border:none;border-radius:4px;
  cursor:pointer;letter-spacing:.01em;
}
button.principal:hover{background:var(--azul-escuro)}
button.principal:disabled{background:var(--palco-linha);color:var(--palco-suave);cursor:not-allowed}

.recado{
  border-left:3px solid var(--laranja);background:var(--recado-palco);
  padding:11px 14px;border-radius:0 4px 4px 0;font-size:14.5px;
}
.recado.aberto{border-left-color:var(--ambar);background:var(--recado-palco-aberto)}

.placar-op{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

.painel{display:grid;gap:18px}
@media(min-width:900px){.painel{grid-template-columns:1.35fr 1fr}}

.bloco{
  background:var(--mesa);border:1px solid var(--linha);border-radius:6px;
  overflow:hidden;
}
.bloco > header{
  padding:14px 18px;border-bottom:1px solid var(--linha);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.bloco > header h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.bloco > header .nota{
  margin-left:auto;font-size:12.5px;color:var(--suave);
  font-family:var(--fonte);
  font-variant-numeric:tabular-nums;
}
.bloco .corpo{padding:6px 18px 16px}

.cor-grupo{border-bottom:1px dashed var(--linha);padding:12px 0}
.cor-grupo:last-child{border-bottom:none}
.cor-titulo{
  display:flex;align-items:center;gap:9px;margin-bottom:7px;
  font-size:13px;font-weight:600;
}
.bolinha{
  /* inline-block e nao so flex:none -- na tabela ela nao e item de flex,
     e sem display virava um risco de 1px do lado do nome. */
  display:inline-block;vertical-align:baseline;
  width:11px;height:11px;border-radius:50%;flex:none;margin-right:7px;
  border:1px solid var(--borda-forte);
}
.cor-titulo .qtd{
  margin-left:auto;color:var(--suave);font-weight:400;font-size:12.5px;
  font-family:var(--fonte);
}
ul.pecas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
ul.pecas li{
  display:flex;gap:12px;align-items:baseline;font-size:14.5px;
  padding:3px 0 3px 20px;
}
ul.pecas .hora{
  margin-left:auto;color:var(--suave);font-size:13px;
  font-family:var(--fonte);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.vazio{
  padding:30px 18px 34px;text-align:left;color:var(--suave);
}
.vazio h3{margin:0 0 8px;font-size:19px;color:var(--tinta);font-weight:600}
.vazio p{margin:0 0 14px;max-width:56ch;font-size:15.5px}
.vazio ol{margin:0;padding-left:20px;font-size:15px;max-width:56ch}
.vazio li{margin:6px 0}

.atalhos{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
a.atalho{
  display:flex;flex-direction:column;gap:5px;text-decoration:none;color:inherit;
  background:var(--mesa);border:1px solid var(--linha);border-radius:6px;
  padding:16px 18px;border-left:3px solid var(--azul);
}
/* As duas metades do M: Festa no azul, Identidade no laranja. Ate o U2 isto
   era `:nth-of-type(2)` -- escrito quando havia DOIS atalhos, um de cada
   lado. Com nove, o segundo cartao ficava laranja por acaso. A cor agora
   segue a categoria, que e o que ela sempre quis dizer. */
a.atalho.empresa{border-left-color:var(--laranja)}
a.atalho:hover{border-color:var(--linha-forte)}
a.atalho b{font-size:16px;font-weight:600}
a.atalho span{font-size:14px;color:var(--suave);line-height:1.4}

.barras{display:flex;flex-direction:column;gap:11px}
.barra-linha{display:flex;align-items:center;gap:11px;font-size:14.5px}
.barra-linha .nome{min-width:82px}
.barra{flex:1;height:7px;background:var(--bancada);border-radius:4px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--verde);border-radius:4px}
.barra i.baixo{background:var(--vermelho)}
.barra-linha .g{
  font-family:var(--fonte);font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--suave);min-width:64px;text-align:right;
}

/* ===================== cadastros: listas e formularios ===================== */

/* Comando para o Samir colar. Quebra a linha em vez de rolar de lado: o
   endereco do scp passa de 360 px, e uma caixa que rola num telefone e uma
   caixa em que ninguem ve o fim do comando que vai colar. */
.comando{margin:8px 0 0;padding:9px 11px;border-radius:6px;background:var(--codigo-fundo);
  color:var(--codigo-texto);font:13px/1.5 var(--fonte-codigo);
  white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;user-select:all}
.aviso .comando{margin-top:6px}
/* A tela de erros: o nome do erro na linha, o traceback só se pedir. */
.erro-numero{font:12px var(--fonte-codigo);color:var(--suave)}
.erro-mensagem{display:block;color:var(--suave);font-size:13.5px;overflow-wrap:anywhere}
.erro-detalhe summary{cursor:pointer;min-height:44px;display:flex;align-items:center;
  font-size:13.5px;color:var(--azul)}
.erro-detalhe .comando{max-height:320px;overflow:auto;font-size:12px}
/* A ficha do cliente: o placar e so leitura (div, nao link), e as tags na
   lista vao numa linha propria, pequenas -- sao para achar, nao para ler. */
.placar-cliente{margin-bottom:12px}
.placar-cliente > div{display:flex;flex-direction:column;gap:3px;background:var(--mesa);
  border:1px solid var(--linha);border-radius:6px;border-left:3px solid var(--azul);
  padding:14px 16px 13px}
.tags-cliente{display:block;font-size:12.5px;color:var(--suave);margin-top:2px}
.lista-produtos-cliente{margin:8px 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:6px}
.lista-produtos-cliente .nota{display:inline;margin:0 0 0 6px}

.alerta{color:var(--laranja-escuro);font-weight:600}

.marca-caixa{display:flex;align-items:center;gap:9px;font-size:15px;cursor:pointer}
.foto-thumb{position:relative;width:100px;height:100px;border-radius:6px;overflow:hidden;
  border:1px solid var(--linha)}
.foto-thumb img{width:100%;height:100%;object-fit:cover}
.btn-apagar-foto{position:absolute;top:2px;right:2px;width:24px;height:24px;border:none;
  border-radius:50%;background:var(--sobre-foto);color:var(--branco);font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.btn-apagar-foto:hover{background:var(--vermelho)}

/* ============================ a vitrine =============================
   O catalogo NAO e loja: nao ha carrinho nem checkout, e toda tela daqui
   termina no mesmo lugar -- a conversa no WhatsApp.

   Por isso o laranja aparece aqui e quase em nenhum outro lugar da casa.
   Ele e a cor da conversao, e conversao e um botao por cartao: se o
   "Ver detalhes" tambem fosse laranja, nenhum dos dois seria o principal.
   O resto segue a regra de sempre -- azul e identidade e navegacao. */

.cabecalho-vitrine{
  display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;
  justify-content:space-between;margin-bottom:16px;
}
.titulo-vitrine{min-width:0}
.titulo-vitrine h2.secao{margin:0}
.titulo-vitrine .nota{margin:2px 0 0}
/* O CTA de cima e SECUNDARIO: e para quem procurou e nao achou. Verde
   porque e o WhatsApp da loja, e nao o pedido de uma peca -- o laranja
   fica reservado para o botao que leva o nome e o preco escritos. */
.chamada-loja{
  display:flex;flex-direction:column;gap:1px;text-decoration:none;
  background:var(--verde-fundo);color:var(--verde);
  border:1px solid var(--sucesso-borda);border-radius:8px;padding:10px 16px;
}
.chamada-loja b{font-size:13px;font-weight:500;opacity:.85}
.chamada-loja span{font-weight:600}
.chamada-loja:hover{background:var(--sucesso-borda)}

.peneira-vitrine .ordem-vitrine{margin-left:auto}
.contagem{font-size:13px;color:var(--suave);margin:0 0 14px}

.secao-vitrine{
  font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--suave);margin:22px 0 10px;font-weight:600;
}
.secao-vitrine:first-of-type{margin-top:0}

.grade-vitrine{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
/* Item de grid nasce com `min-width:auto` -- "no minimo a largura do
   conteudo" -- e um nome comprido de produto esticaria a coluna dele e
   desalinharia a fileira inteira. Ja custou uma pagina rolando de lado. */
.grade-vitrine > *{min-width:0}

/* O cartão do Figma "Catálogo Comercial" (264 x 382): BRANCO, com a foto
   num quadro lilás claro de raio 12, o selo, o nome, uma linha de resumo e
   o preço. Sem botão: o cartão inteiro leva à ficha (o link do nome). */
.cartao-vitrine{
  display:flex;flex-direction:column;background:var(--superficie);position:relative;
  border:1px solid var(--borda);border-radius:16px;overflow:hidden;padding:15px;
  box-shadow:none;
  transition:box-shadow .16s ease, transform .16s ease;
}
.cartao-vitrine:hover{box-shadow:var(--sombra-m);transform:translateY(-2px)}

/* A MOLDURA. Toda foto ocupa a mesma area, venha em pe ou deitada: a altura
   do cartao nao pode depender do enquadramento de quem fotografou.

   `contain` e o padrao, e nao `cover`: peca 3D cortada pela metade nao
   vende. O fundo neutro e o respiro em volta fazem o papel que o corte
   faria -- encher o quadro -- sem comer a peca. Quem tem foto ja enquadrada
   marca "preencher" no cadastro. Nenhum dos dois estica: `object-fit` cuida
   disso, e por isso nao ha `width:100%;height:100%` solto aqui. */
.palco-foto{
  position:relative;width:100%;aspect-ratio:4/3;background:var(--mesa-2);
  border-bottom:1px solid var(--linha);
}
.palco-foto img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:10px;
}
.palco-foto.preencher img{object-fit:cover;padding:0}
.palco-foto .area-foto{position:absolute;inset:0;display:block}
/* A moldura da foto é BRANCA, como o cartão: as fotos da casa vêm com
   fundo branco, e um quadro lilás em volta delas desenhava um retângulo
   branco solto no meio do cartão (o Samir viu na loja de verdade; a foto
   de exemplo do Figma era transparente e escondia isso). */
.cartao-vitrine .palco-foto{display:block;aspect-ratio:232/205;border-bottom:0;
  border-radius:12px;overflow:hidden;background:var(--superficie)}
.sem-foto{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--suave);font-size:13px;
}

/* Setas sempre visiveis, e nao so no hover: no telefone nao existe hover, e
   um controle que so aparece ao passar o mouse e um controle que metade das
   pessoas nunca encontra. */
.palco-foto .seta{
  position:absolute;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--vidro);border:1px solid var(--linha);
  color:var(--tinta);font-size:19px;line-height:1;
  box-shadow:var(--sombra-p);
}
.palco-foto .seta:hover{background:var(--branco);border-color:var(--azul);color:var(--azul)}
.palco-foto .seta.antes{left:8px}
.palco-foto .seta.depois{right:8px}
.palco-foto .pontos{
  position:absolute;bottom:8px;left:0;right:0;
  display:flex;gap:5px;justify-content:center;
}
.pontos .ponto{
  width:7px;height:7px;border-radius:50%;padding:0;cursor:pointer;
  background:var(--ponto);border:none;
}
.pontos .ponto.aqui{background:var(--azul)}

.dados-vitrine{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:15px 0 0;
  flex:1 1 auto}
.dados-vitrine h3{margin:8px 0 0;font-size:17px;font-weight:600;line-height:1.24}
.dados-vitrine h3 a{color:var(--loja-texto,var(--tinta));text-decoration:none}
.dados-vitrine h3 a:hover{color:var(--loja-secundaria,var(--azul))}
/* O nome é o link, e o `::after` estica a área dele sobre o cartão inteiro:
   tocar na foto, no preço ou no vão abre a ficha. */
.cartao-vitrine h3 a::after{content:"";position:absolute;inset:0;z-index:1}
/* O selo do cartão e da ficha (24 px, raio 12): Destaque ou a categoria em
   lilás, Personalizável em verde. */
.selo-cartao{display:inline-flex;align-items:center;min-height:24px;padding:0 12px;
  border-radius:12px;font-size:11px;font-weight:600;white-space:nowrap}
.selo-roxo{background:var(--loja-suave,var(--primaria-fundo));color:var(--loja-forte,var(--primaria))}
.selo-verde{background:var(--sucesso-fundo);color:var(--sucesso)}
.dados-vitrine .categoria{margin:0;font-size:12.5px;color:var(--suave)}
.dados-vitrine .resumo{
  margin:6px 0 0;font-size:12px;color:var(--texto-2);line-height:1.4;
  /* Uma linha, e a mesma para todos: a descricao e um convite, e nao a
     ficha. A completa esta na tela de detalhe. */
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
/* `preco-vitrine`, e nao `preco`: a folha e uma so para a casa inteira, e
   "preco" e o nome que a proxima tela com uma tabela de valores ia querer --
   com outro tamanho e outro peso. Ja perdi as barras de estoque do painel
   para uma classe chamada `.barra`. */
.preco-vitrine{font-size:20px;font-weight:600;color:var(--azul);margin:8px 0 0}
.cartao-vitrine .preco-vitrine{margin-top:auto;padding-top:12px;font-size:17px;font-weight:700;
  color:var(--loja-forte,var(--azul))}
/* "Preço sob consulta" nao e preco, entao nao ganha corpo de preco -- mas
   continua azul, porque e a mesma resposta a mesma pergunta. */
.preco-vitrine.consultar{font-size:15.5px;font-weight:500}
.preco-vitrine.grande{font-size:27px;margin-top:10px}

/* A etiqueta diz a cor E o texto. Quem nao distingue verde de ambar continua
   sabendo o que da para fazer com a peca. */
.disponibilidade{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  margin:6px 0 0;font-size:12.5px;font-weight:600;
  padding:3px 9px;border-radius:999px;
}
.disponibilidade::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
}
.disponibilidade.bem{background:var(--verde-fundo);color:var(--verde)}
.disponibilidade.atencao{background:var(--ambar-fundo);color:var(--ambar)}
.disponibilidade.neutra{background:var(--bancada);color:var(--suave)}
.disponibilidade.mal{background:var(--vermelho-fundo);color:var(--vermelho)}

.acoes-vitrine{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
/* Um ponto menor do que o botao padrao da casa: "Consultar pelo WhatsApp"
   em 15 px quebra em duas linhas num cartao de 250 px, e o botao de duas
   linhas empurra o "Ver detalhes" do vizinho para cima -- a fileira inteira
   fica torta por causa de uma palavra. */
.acoes-vitrine .botao{
  flex:1 1 auto;justify-content:center;text-align:center;
  font-size:13.5px;padding:9px 10px;border-radius:9px;
}

/* O BOTAO. Unico laranja da tela, e o unico que sai do sistema. */
/* Na loja, a cor é a do TEMA (`--loja-botao`, Catálogo 2.0); fora dela
   -- a vitrine vista de dentro do sistema -- continua o laranja da casa. */
.botao.pedir{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--loja-botao,var(--laranja));border-color:var(--loja-botao,var(--laranja));
  color:var(--branco);
}
.botao.pedir:hover{background:var(--loja-botao-escuro,var(--laranja-escuro));
  border-color:var(--loja-botao-escuro,var(--laranja-escuro))}
/* A cor se repete aqui de propósito. `.botao.grande` é o botão de aceitar
   orçamento, e ele pinta o fundo com a cor da empresa -- mesma
   especificidade que `.botao.pedir` e mais abaixo no arquivo, então ganhava
   por ordem de fonte e o botão da ficha nascia azul. Três classes ganham das
   duas independentemente da ordem. */
.botao.pedir.grande{
  width:100%;min-height:48px;font-size:16px;margin-top:14px;
  background:var(--loja-botao,var(--laranja));border-color:var(--loja-botao,var(--laranja));
}
.botao.pedir.grande:hover{background:var(--loja-botao-escuro,var(--laranja-escuro));
  border-color:var(--loja-botao-escuro,var(--laranja-escuro))}
/* O simbolo do WhatsApp por mascara, e nao por <img>: assim ele herda a cor
   do botao e continua nitido em qualquer tela, sem mais um arquivo para
   servir. */
.zap{
  width:17px;height:17px;flex:none;background:currentColor;
  -webkit-mask:var(--icone-zap) center/contain no-repeat;
  mask:var(--icone-zap) center/contain no-repeat;
}

/* ------------------------------------------- a ficha do produto */
.volta{margin:0 0 12px;font-size:14px}
.volta a{color:var(--suave);text-decoration:none}
.volta a:hover{color:var(--azul)}
.ficha-vitrine{display:grid;gap:24px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:start}
.fotos-ficha{min-width:0}
.palco-foto.grande{
  aspect-ratio:1/1;border:1px solid var(--linha);border-radius:10px;
  background:var(--mesa-2);overflow:hidden;
}
.palco-foto.grande img{padding:18px}
.palco-foto.grande.preencher img{padding:0}
.palco-foto .ampliar{
  position:absolute;right:8px;top:8px;width:32px;height:32px;padding:0;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;
  justify-content:center;background:var(--vidro);
  border:1px solid var(--linha);color:var(--tinta);font-size:15px;
}
.palco-foto .ampliar:hover{border-color:var(--azul);color:var(--azul)}
.miniaturas{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.miniatura{
  width:64px;height:64px;padding:2px;cursor:pointer;border-radius:8px;
  background:var(--mesa-2);border:1px solid var(--linha);
}
.miniatura img{width:100%;height:100%;object-fit:contain;display:block}
.miniatura.aqui{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.dados-ficha{min-width:0}
/* O nome do produto NAO usa o estilo de `.secao`: aquilo e rotulo de secao --
   maiusculas, espacado, 13 px -- e "NOME PERSONALIZADO SIMPLES" escrito
   assim parece titulo de formulario, e nao o nome de uma peca a venda. */
.nome-ficha{margin:0;font-size:25px;line-height:1.2;letter-spacing:-.01em}
.dados-ficha .categoria{margin:2px 0 0;font-size:13.5px;color:var(--suave)}
.dados-ficha .descricao{margin:14px 0 0;font-size:15px;line-height:1.55;max-width:60ch}
.pedir-form{margin-top:18px}
.personalizar{
  border:1px solid var(--linha);border-radius:8px;padding:14px 16px;margin:0;
  background:var(--mesa-2);display:flex;flex-direction:column;gap:10px;
}
.personalizar legend{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;color:var(--suave);padding:0 6px;
}
.personalizar .duas{display:flex;flex-wrap:wrap;gap:10px}
.personalizar .duas > *{flex:1 1 140px;min-width:0}
.personalizar .nota{margin:0}

/* A lupa e um <dialog>: o Esc fecha, o foco fica preso dentro e o fundo
   escurece sem uma linha de JavaScript para nada disso. */
.lupa{
  border:none;border-radius:10px;padding:0;background:var(--mesa);
  max-width:min(94vw,900px);max-height:92vh;overflow:visible;
}
.lupa::backdrop{background:var(--veu-forte)}
.lupa img{display:block;max-width:100%;max-height:88vh;object-fit:contain}
.lupa .fechar-lupa{
  position:absolute;top:-14px;right:-14px;width:36px;height:36px;padding:0;
  border-radius:50%;cursor:pointer;background:var(--mesa);border:1px solid var(--linha);
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-m);
}
.lupa .seta{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:var(--vidro);border:1px solid var(--linha);
  color:var(--tinta);font-size:22px;line-height:1;
}
.lupa .seta.antes{left:-18px}
.lupa .seta.depois{right:-18px}

/* ------------------------------------------- a loja vista de fora
   Mesma vitrine, sem o sistema em volta. `body.publico` ja tira os 232 px
   que a lateral ocupa, entao aqui so entra a marca no lugar do menu. */
.loja-publica .marca-publica{
  padding:2px 2px 16px;margin-bottom:6px;
  border-bottom:1px solid var(--linha);
}
.rodape-publico{margin-top:38px}
/* O endereco para mandar, so para quem esta dentro. */
.link-loja{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.link-loja b{font-size:15.5px}
.link-loja span{color:var(--suave);font-size:14px;max-width:70ch}

.duas-colunas{display:grid;gap:18px;align-items:start}
/* Item de grid e de flex nasce com `min-width:auto`, que significa "no minimo
   a largura do conteudo" -- e por isso um cartao de 594 px ficava dentro de
   uma coluna de 372 px e empurrava a pagina para fora da tela. Foi este o
   ultimo transbordo que sobrou depois da lateral. */
.duas-colunas > *{min-width:0}
@media(min-width:900px){.duas-colunas{grid-template-columns:1fr 360px}}
.coluna-lado{display:flex;flex-direction:column;gap:16px}

/* ---------- o arquivo 3D ---------- */
.solte{
  border:1.5px dashed var(--linha-forte);border-radius:6px;padding:16px;
  display:flex;flex-direction:column;gap:9px;align-items:flex-start;
  background:var(--mesa-2);
}
.solte .fraco{margin-left:0}
.veredito{
  font-family:var(--fonte);font-size:12.5px;line-height:1.5;
  padding:9px 11px;border-radius:4px;width:100%;
  background:var(--bancada);color:var(--suave);border-left:3px solid var(--linha-forte);
}
.veredito.bom{background:var(--verde-fundo);color:var(--verde);border-left-color:var(--verde)}
.veredito.atencao{background:var(--atencao-fundo);color:var(--ambar);border-left-color:var(--laranja)}
.veredito.ruim{background:var(--vermelho-fundo);color:var(--vermelho);border-left-color:var(--vermelho)}

/* ---------- custo e preco ---------- */
dl.numeros{margin:0;display:flex;flex-direction:column;gap:0}
dl.numeros > div{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:6px 0;border-bottom:1px solid var(--linha);
}
dl.numeros > div:last-child{border-bottom:none}
dl.numeros dt{color:var(--suave);font-size:14px}
dl.numeros dd{margin:0;font-size:14.5px;font-variant-numeric:tabular-nums}
dl.numeros .somado{border-top:1px solid var(--linha-forte);border-bottom:none}
dl.numeros .somado dt, dl.numeros .somado dd{font-weight:600;color:var(--tinta)}
dl.numeros .destaque dd{font-size:20px;font-weight:600;color:var(--azul)}

.lista-insumos{display:flex;flex-direction:column;gap:2px}
.linha-insumo{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--linha);font-size:14.5px;cursor:pointer;
}
.linha-insumo:last-child{border-bottom:none}
.linha-insumo .cresce{flex:1 1 auto}
.linha-insumo .qtd{
  width:72px;font:inherit;font-size:14px;padding:5px 7px;text-align:right;
  border:1px solid var(--linha-forte);border-radius:4px;
  background:var(--mesa);color:var(--tinta);
}
.recado.erro{
  border-left:3px solid var(--vermelho);background:var(--vermelho-fundo);
  color:var(--vermelho);padding:11px 14px;border-radius:0 4px 4px 0;margin-bottom:14px;
}
.topo nav a.aqui{background:var(--bancada);color:var(--azul);font-weight:600}
.topo .logo{text-decoration:none;color:var(--tinta)}
/* A nota explica o numero de cima; o campo abaixo e outro assunto. */
.nota + .campo{margin-top:16px}

table.itens td{padding:5px 6px 5px 0;vertical-align:middle}
table.itens input, table.itens select{
  font:inherit;font-size:14px;padding:6px 8px;width:100%;
  border:1px solid var(--linha-forte);border-radius:4px;
  background:var(--mesa);color:var(--tinta);
}
table.itens input.num{text-align:right}
table.itens input:focus, table.itens select:focus{border-color:var(--azul);outline:none}
.tirar{
  font:inherit;font-size:17px;line-height:1;width:28px;height:28px;cursor:pointer;
  background:none;border:1px solid var(--linha-forte);border-radius:4px;color:var(--suave);
}
.tirar:hover{border-color:var(--vermelho);color:var(--vermelho)}

/* ---------- quadro de producao ---------- */
.quadro{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(180px,1fr));align-items:start}
@media(max-width:1100px){.quadro{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.quadro{grid-template-columns:1fr}}
.quadro .coluna{background:var(--mesa);border:1px solid var(--linha);border-radius:6px;padding:10px}
.quadro .coluna header{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.quadro .coluna h3{
  margin:0;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--suave);font-weight:600;flex:1 1 auto;
}
.quadro .conta{
  font-family:var(--fonte);font-size:12px;color:var(--suave);
  background:var(--bancada);border-radius:10px;padding:1px 8px;
}
.pilha{display:flex;flex-direction:column;gap:8px;min-height:70px;border-radius:5px}
.pilha.alvo{background:var(--azul-fundo);outline:2px dashed var(--azul);outline-offset:2px}
.ficha{
  background:var(--mesa-2);border:1px solid var(--linha);border-left:3px solid var(--linha-forte);
  border-radius:5px;padding:9px 10px;cursor:grab;position:relative;
}
.ficha:active{cursor:grabbing}
.ficha.indo{opacity:.4}
.ficha-topo{display:flex;align-items:baseline;gap:2px;font-size:14.5px;line-height:1.3}
.ficha-topo b{font-weight:600}
.vezes{font-family:var(--fonte);font-size:12px;color:var(--laranja);margin-left:4px}
.ficha-pe{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;
  color:var(--suave);margin-top:5px}
.ficha-nums{font-size:11.5px;color:var(--suave);margin-top:4px}
.refugar{
  position:absolute;top:7px;right:7px;font:inherit;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;background:none;border:1px solid var(--linha-forte);
  border-radius:3px;color:var(--suave);padding:1px 5px;cursor:pointer;opacity:0;
}
.ficha:hover .refugar{opacity:1}
.refugar:hover{border-color:var(--vermelho);color:var(--vermelho)}
.barra-selecao{
  position:sticky;bottom:0;background:var(--mesa);border:1px solid var(--linha);
  border-radius:6px;padding:10px 14px;margin-top:12px;gap:12px;
}
.barra-selecao .cresce{flex:1 1 auto}
.barra-selecao .campo{margin:0}

dialog{
  border:1px solid var(--linha-forte);border-radius:8px;padding:20px 22px;
  max-width:440px;background:var(--mesa);color:var(--tinta);
}
dialog::backdrop{background:var(--veu)}

/* ---------- tela Criar: o catalogo do que da para fazer ----------
   Cartao em vez de linha de tabela porque aqui a escolha e visual e nao
   numerica: voce compara modelos, nao soma colunas. */
.filtros{display:flex;flex-direction:column;gap:14px}
.filtros .busca{
  width:100%;padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid var(--linha);border-radius:5px;background:var(--mesa);color:var(--tinta);
}
.filtros .busca:focus{border-color:var(--azul);outline:none}
.grupo-chip{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.grupo-chip > b{
  font-family:var(--fonte);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--suave);
  min-width:74px;
}

.chip[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:var(--branco)}
.filtros-linha .filtros-selecao{display:flex;gap:12px;flex-wrap:wrap}
.filtro-select{display:flex;flex-direction:column;gap:3px;flex:1;min-width:130px}
.filtro-select span{
  font-family:var(--fonte);font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--suave);
}
.filtro-select select{
  font:inherit;font-size:14px;padding:8px 10px;border-radius:5px;cursor:pointer;
  border:1px solid var(--linha);background:var(--mesa);color:var(--tinta);
  appearance:auto;
}
.filtro-select select:focus{border-color:var(--azul);outline:none}
.conta-modelos{font-size:13.5px;color:var(--suave);margin:16px 0 10px}
.conta-modelos b{color:var(--tinta);font-weight:600}
.modelos{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.modelo{
  background:var(--mesa);border:1px solid var(--linha);border-radius:6px;
  padding:16px 17px 15px;display:flex;flex-direction:column;gap:9px;
  box-shadow:var(--sombra);
}
.modelo.planejado{background:var(--bancada);box-shadow:none;border-style:dashed}
.modelo header{display:flex;align-items:flex-start;gap:9px}
.modelo h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;flex:1}
.modelo p{margin:0;font-size:14.5px;color:var(--tinta-2);line-height:1.45}
.modelo .subcategoria-rotulo{font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.04em;margin:-4px 0 0}
.modelo .meta{
  font-family:var(--fonte);font-size:11.5px;color:var(--suave);
  display:flex;flex-wrap:wrap;gap:4px 10px;
}
.modelo .cuidado{
  font-size:13px;color:var(--tinta-2);background:var(--ambar-fundo);
  border-left:2px solid var(--ambar);border-radius:0 3px 3px 0;padding:7px 10px;line-height:1.4;
}
.modelo .acoes{margin-top:auto;padding-top:4px}

/* ---------------------------------------------------- U2: o placar do painel
   Quatro numeros antes de qualquer lista. Cada um e um LINK para a tela que o
   explica -- por isso a area toda do cartao e clicavel, e nao so o numero.

   `.placar` e nao `.numeros`: `dl.numeros` ja existe na ficha do produto. Foi
   assim que a barra do celular apagou as barras de estoque no U1. */
.placar{
  display:grid;gap:12px;margin-bottom:6px;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.placar > *{min-width:0}          /* item de grid nasce com min-width:auto */
.placar a{
  display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit;
  background:var(--mesa);border:1px solid var(--linha);border-radius:6px;
  border-left:3px solid var(--azul);padding:14px 16px 13px;min-height:44px;
}
.placar a:hover{border-color:var(--linha-forte);border-left-color:var(--azul)}
.placar a:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.placar .rotulo{font-size:13.5px;color:var(--suave)}
/* Numero grande usa a figura PROPORCIONAL da fonte: tabular-nums da a todo
   digito a largura do zero, e a 27px isso deixa o numero frouxo. */
.placar .valor{
  font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.15;
  color:var(--tinta);
}
.placar .nota{font-size:12.5px;color:var(--suave);margin:0}

/* -------------------------------------------- U2: retorno por hora de mesa
   Barra horizontal a partir do ZERO, que e onde a peca deixa de pagar a hora
   que ocupa. Quem da prejuizo cresce para a esquerda, em vermelho -- direcao
   E cor E o sinal no numero, tres canais para a mesma informacao. */
.grafico{display:flex;flex-direction:column;gap:12px}
.grafico > .nota{margin:0;max-width:72ch}
.barras-h{display:flex;flex-direction:column;gap:9px}
.linha-h{display:grid;grid-template-columns:minmax(0,9.5rem) 1fr auto;gap:12px;align-items:center}
.linha-h .nome{
  font-size:14px;color:var(--tinta);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.linha-h .trilho{position:relative;display:block;height:16px;min-width:0}
.linha-h .trilho i{
  position:absolute;top:1px;height:14px;min-width:2px;
  background:var(--azul);border-radius:0 3px 3px 0;
}
.linha-h .trilho i.perde{background:var(--vermelho);border-radius:3px 0 0 3px}
/* O zero so aparece quando ha barra dos dois lados: sem prejuizo ele coincide
   com a borda esquerda e viraria enfeite. */
.linha-h .trilho u{
  position:absolute;top:-1px;bottom:-1px;width:1px;
  background:var(--linha-forte);text-decoration:none;
}
.linha-h .valor{font-size:13.5px;color:var(--tinta);font-variant-numeric:tabular-nums}
@media(max-width:520px){
  .linha-h{grid-template-columns:1fr auto;gap:2px 10px}
  .linha-h .nome{grid-column:1}
  .linha-h .valor{grid-column:2;grid-row:1}
  .linha-h .trilho{grid-column:1 / -1}
}

/* A mesma tabela do grafico, para leitor de tela e para quem nao enxerga cor.
   Fica fora da tela, e nao `display:none` -- o leitor pula o que esta oculto. */
.so-leitor{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

.atalho .tipo-peca{
  font-family:var(--fonte);font-size:11.5px;color:var(--suave);
  margin-top:auto;padding-top:4px;
}

/* ===================================== dashboard: visual moderno
   Sobre os componentes base (.placar, .bloco, .atalho), so dentro de .dash.
   Linear, Stripe: cartoes leves, tipografia limpa, espaco. */

.dash{display:flex;flex-direction:column;gap:28px}
.dash-secao{display:flex;flex-direction:column;gap:10px}
.dash .avisos{margin-bottom:0}

.dash .placar{gap:14px;margin-bottom:0}
.dash .placar a{
  border-left-width:1px;border-left-color:var(--linha);
  border-radius:8px;padding:18px 20px 16px;
  transition:border-color .15s,box-shadow .15s;
}
.dash .placar a:hover{
  border-color:var(--linha-forte);
  box-shadow:var(--sombra-p);
}
.dash .placar .rotulo{
  font-size:12px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;
  font-family:var(--fonte);
}
.dash .placar .valor{margin:4px 0 2px}

.dash h2.secao{font-size:11.5px;letter-spacing:.07em;margin:0}
.dash .cabecalho-lista{margin:0}

.dash .painel{gap:16px}

.dash .bloco{border-radius:8px}
.dash .bloco > header{padding:14px 20px}
.dash .bloco .corpo{padding:8px 20px 18px}

.dash .grafico{
  padding:20px;border-radius:8px;
  border:1px solid var(--linha);background:var(--mesa);
}

.dash .linha-h .trilho{height:12px}
.dash .linha-h .trilho i{top:0;height:12px;border-radius:3px}

.dash a.atalho{
  border-left-width:1px;border-left-color:var(--linha);
  border-radius:8px;
  transition:border-color .15s,box-shadow .15s;
}
.dash a.atalho.empresa{border-left-color:var(--linha)}
.dash a.atalho:hover{
  border-color:var(--linha-forte);
  box-shadow:var(--sombra-p);
}

.dash-vazio{margin:0}

/* ================================================== U3: a linha vira cartao
   Seis telas sao tabelas de cinco a sete colunas. No computador funcionam; no
   telefone a coluna que importa e sempre a que fica de fora -- foram 34
   colunas medidas fora da caixa visivel, a 420 px.

   O cartao usa o MESMO DOM da tabela. Nao ha uma marcacao para tela larga e
   outra para telefone: o que a linha mostra, o cartao mostra, e nada pode
   sumir num dos dois sem sumir no outro. Cada celula carrega o rotulo da sua
   coluna em `data-rotulo`, tirado do proprio <th> -- e ha teste que compara
   os dois em toda tabela renderizada, senao o rotulo vira a segunda copia do
   cabecalho e envelhece sozinho.

   O papel de cada celula vem de quatro classes, e nao da posicao:
     .chave    o que identifica a linha -- vira titulo, sem rotulo
     .estado   a etiqueta de situacao   -- logo abaixo do titulo
     .decide   o numero que decide      -- maior que os outros
     .acao     abrir/editar             -- botao de 44 px no pe do cartao

   Trocar `display` apaga o papel de tabela para o leitor de tela; o rotulo
   em `::before` e o que devolve o sentido de cada celula. E o custo conhecido
   deste padrao, e a alternativa -- duas marcacoes -- custa mais caro. */
@media (max-width:767px){
  .cartao-tabela{background:none;border:none;padding:0;box-shadow:none}
  .cartao-tabela .rolagem, .bloco .rolagem{overflow-x:visible;margin:0}

  table.tabela, table.lista{min-width:0;display:block;font-size:15px}
  table.tabela thead, table.lista thead{display:none}
  table.tabela tbody, table.lista tbody{display:flex;flex-direction:column;gap:10px}
  table.tabela tr, table.lista tr{
    display:flex;flex-direction:column;
    background:var(--mesa);border:1px solid var(--linha);border-radius:6px;
    padding:12px 14px 13px;box-shadow:var(--sombra);
  }
  table.tabela td, table.lista td{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:6px 0;border-bottom:1px solid var(--linha);text-align:left;
    white-space:normal;
  }
  table.tabela tr td:last-child, table.lista tr td:last-child{border-bottom:none}
  td[data-rotulo]::before{
    content:attr(data-rotulo);color:var(--suave);font-size:12.5px;
    letter-spacing:.02em;flex:0 0 auto;
  }
  /* Celula sem dado nenhum -- o vao do colspan no rodape -- nao vira linha. */
  table.tabela td:empty, table.lista td:empty{display:none}

  /* Titulo, etiqueta, botao e caixa de selecao dispensam rotulo: eles dizem
     o que sao. Rotular "Cliente" em cima do nome do cliente e ruido. */
  td.chave::before, td.estado::before, td.acao::before, td.marca::before{content:none}
  /* O papel manda na ordem do cartao, e nao a posicao da coluna: em Templates
     o titulo e a SEGUNDA coluna (a primeira e o SKU) e mesmo assim abre o
     cartao. Numa tabela a ordem das colunas e uma escolha de leitura da
     esquerda para a direita; num cartao, de cima para baixo -- nao sao a
     mesma escolha. */
  table.tabela td.marca{order:-3}
  table.tabela td.chave, table.lista td.chave{order:-2}
  table.tabela td.estado, table.lista td.estado{order:-1}
  table.tabela td.acao{order:1}
  table.tabela td.chave, table.lista td.chave{
    display:block;padding:0;border-bottom:none;font-size:17px;font-weight:600;
  }
  table.tabela td.chave a, table.lista td.chave a{
    display:flex;align-items:center;flex-wrap:wrap;gap:0 8px;
    min-height:44px;color:var(--tinta);
  }
  table.tabela td.estado, table.lista td.estado{
    display:block;padding:2px 0 8px;border-bottom:none;
  }
  table.tabela td.decide, table.lista td.decide{font-size:17px;font-weight:600}
  table.tabela td.marca{
    display:block;padding:0 0 6px;border-bottom:none;
  }
  table.tabela td.marca input{width:24px;height:24px;margin:10px 10px 10px 0}
  table.tabela td.quebra{word-break:break-all;font-size:12.5px}
  /* A bolinha da cor e o texto dela sao dois itens do flex: sem isto o
     `space-between` joga a bolinha para o meio da linha, longe do nome. */
  table.tabela td .bolinha, table.lista td .bolinha{margin-left:auto}

  table.tabela td.acao{
    display:block;padding:12px 0 0;border-bottom:none;margin-top:2px;
  }
  table.tabela td.acao a{
    display:flex;align-items:center;justify-content:center;min-height:44px;
    border:1px solid var(--linha-forte);border-radius:5px;
    color:var(--azul);font-weight:600;text-decoration:none;
  }

  table.tabela tfoot{display:block;margin-top:10px}
  table.tabela tfoot tr{
    background:var(--bancada);border-style:dashed;flex-direction:row;
    justify-content:space-between;align-items:baseline;padding:11px 14px;
  }
  table.tabela tfoot td{border-bottom:none;padding:0}
}

/* Alvo de toque: 44 px e o que um dedo acerta. Vale so no telefone -- no
   computador o ponteiro e preciso e a densidade da tela e uma vantagem.
   Medi 75 alvos abaixo disso antes deste bloco. */
@media (max-width:1023px){
  /* `.botao` inteiro, e nao so o do cabecalho: qualquer botao de qualquer
     tela e um alvo de dedo aqui. */
  /* O aviso fica de fora: ele mistura frase e <b>, e flex partia a frase
     em colunas. Com o ícone e o padding do ds.css ele já passa de 44 px. */
  .botao, .cabecalho-lista a, .abas a, .barra-topo .logo, .atalho, .placar a{
    min-height:44px;display:flex;align-items:center;
  }
  .botao, .abas a{justify-content:center;padding:0 16px}
  a.aviso{min-height:44px}
  /* Link dentro de frase nao tem como ter 44 px sem destruir a frase. O
     alcance vem da area em volta: 6 px acima e abaixo dao 29 px de alvo, e a
     frase continua uma frase. */
  .grafico .nota a{display:inline-block;padding:6px 0}
  button.refugar{min-height:44px;min-width:44px}
  .cabecalho-lista{gap:10px 12px}
}

/* U3: ordenar e buscar -- a caixa de seleção de ordem só existe no
   telefone, onde o cabeçalho clicável não existe (a linha virou cartão). A
   peneira e o cabeçalho de ordenar moram em ds.css. */
.so-telefone{display:none}


@media (max-width:767px){
  /* A propria barra de busca nasceu com 40 px de altura. Quem achou foi o
     teste de alvo de toque, na mesma rodada que a criou -- e a primeira
     tentativa de conserto ficou ANTES deste bloco no arquivo, entao perdeu
     para a regra de cima por ordem de fonte. */
  .peneira input[type=search], .peneira select, .peneira .botao{min-height:44px}
  .so-telefone{display:block}
  .peneira{gap:8px 10px}
  .peneira .busca{flex:1 1 100%}
  .peneira select, .peneira .virar{flex:1 1 auto}
  .peneira .virar{
    display:flex;align-items:center;justify-content:center;
    font-size:13.5px;white-space:nowrap;
  }
}

/* ================================ U4: a barra de salvar alcança o polegar
   Medido a 420 px, antes: para chegar em Salvar era preciso rolar 1.665 px no
   cadastro de produto, 765 no de template e 370 no de pedido. Um formulário
   que exige rolar dezessete campos para achar o botão é um formulário que se
   abandona no meio.

   `position:sticky` faz exatamente a coisa condicional, sem uma linha de
   JavaScript: num cadastro curto a barra fica em fluxo, no fim, sem custar
   nada; num comprido ela gruda no pé da tela enquanto se rola. Barra FIXA
   custaria 60 px de tela em toda tela, inclusive nas cinco onde o botão já
   estava visível.

   Ela só gruda dentro do PRÓPRIO pai -- por isso em produto e pedido a barra
   saiu do cartão da lateral e virou filha do <form>. */
.acoes.principal{
  position:sticky;bottom:0;z-index:5;
  background:var(--mesa);margin-top:14px;padding:12px 0 2px;
  /* A sombra para cima diz que ha conteudo por baixo. Sem ela a barra parece
     um corte na pagina, e o campo que ela cobre parece ter acabado ali. */
  box-shadow:var(--sombra-barra);
}
/* Filha de um grid de duas colunas: a barra atravessa as duas. */
.duas-colunas > .acoes.principal{grid-column:1 / -1}

@media (max-width:1023px){
  /* Sangra até a borda do cartão, para a linha de cima separar de verdade em
     vez de flutuar com um vão dos lados. */
  /* A sangria é a MESMA medida do respiro da página e do cartão no
     telefone (--e16): eram 20 px escritos à mão, e quando o respiro virou
     token a barra passou 4 px da tela. */
  .formulario > .acoes.principal, .cartao > .acoes.principal{
    margin:14px calc(-1 * var(--e16)) calc(-1 * var(--e16));padding:12px var(--e16);
    border-top:1px solid var(--linha);
  }
  .duas-colunas > .acoes.principal{
    margin:0 calc(-1 * var(--e16)) -4px;padding:12px var(--e16);
    border-top:1px solid var(--linha);
    background:var(--mesa);border-radius:0;
  }
  .acoes.principal .botao{flex:1 1 auto}
}

/* ------------------------------------------- U4: o erro aponta o campo
   Antes, um formulário que não salvava dizia o motivo numa faixa no topo e
   nada mais. Num cadastro de dezessete campos isso é caça ao tesouro — e o
   campo que falta pode estar fora da parte visível da tela.

   Agora o erro sabe de qual campo é (`ErroDeCampo`, em dados.py), o topo vira
   um atalho e a mensagem mora embaixo do que precisa mudar. */
.campo.com-erro > span{color:var(--vermelho)}
.campo.com-erro input, .campo.com-erro select, .campo.com-erro textarea{
  border-color:var(--vermelho);
  box-shadow:0 0 0 3px var(--vermelho-fundo);
}
/* O link do topo leva até aqui. Sem a folga, o campo encosta no cabeçalho da
   página e o rótulo dele fica escondido atrás da barra do celular. */
.campo[id]{scroll-margin-top:76px}
.recado.erro a{color:var(--vermelho);font-weight:600}
/* Nem todo erro e de um campo: o de compra sem item e da tabela. */
.titulo-cartao.com-erro{color:var(--vermelho)}
[id^=campo-]{scroll-margin-top:76px}

/* ------------------------------------- U5: a coluna vazia ensina, e soma
   Medido antes: das cinco colunas do quadro, três ficavam vazias e nenhuma
   dizia nada. O cabeçalho contava peças e só — e "3" não diz se a coluna é
   meia hora ou dois dias de mesa. */
.coluna .soma{
  margin:0 0 8px;font-size:11.5px;color:var(--suave);
  font-variant-numeric:tabular-nums;
}
.convite{
  margin:0;padding:14px 13px;font-size:13px;line-height:1.5;color:var(--suave);
  border:1px dashed var(--linha-forte);border-radius:5px;background:transparent;
}
/* Enquanto se arrasta uma peça para cá, o convite sai da frente: quem já está
   com a peça na mão não precisa mais da explicação. */
.pilha.alvo .convite{opacity:.35}

/* --------------------------------------- sprint 6: a cor do documento
   Dois campos para a mesma cor: o seletor do aparelho e o codigo colado da
   identidade visual. Um alimenta o outro. */
.par-cor{display:flex;gap:8px;align-items:center}
.par-cor input[type=color]{
  width:46px;height:40px;padding:2px;border:1px solid var(--linha-forte);
  border-radius:5px;background:var(--mesa);cursor:pointer;
}
.par-cor input[name=cor_texto]{flex:1 1 auto;min-width:0;text-transform:uppercase}

/* ================================== sprint 6: a folha que o cliente recebe
   A ÚNICA tela sem menu. Quem abre é o cliente, num telefone, por um link
   que veio no WhatsApp — e nada aqui leva para dentro do sistema. */
/* Na loja, fundo, texto e fonte são do TEMA (Catálogo 2.0), pendurados no
   `style` do <body>. A folha do orçamento não tem esses tokens e fica com
   os da casa. */
body.publico{background:var(--loja-fundo,var(--bancada));color:var(--loja-texto,var(--tinta));
  font-family:var(--loja-fonte,var(--fonte))}
.folha-publica{
  max-width:560px;margin:0 auto;padding:20px 16px 40px;
  display:flex;flex-direction:column;gap:14px;
}
.marca-publica{display:flex;align-items:center;gap:11px;padding:4px 2px}
.marca-publica img{border-radius:7px}
.marca-publica b{display:block;font-size:17px;letter-spacing:-.01em}
.marca-publica span{display:block;font-size:13px;color:var(--suave)}

.cabecalho-orcamento{
  display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:4px 14px;margin-bottom:2px;
}
.cabecalho-orcamento h1{
  margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;
}
.cabecalho-orcamento h1 span{color:var(--marca,var(--azul))}
.para{margin:0 0 16px;font-size:15px;color:var(--suave)}
.para b{color:var(--tinta);font-weight:600}

.somas{margin-top:14px;border-top:1px solid var(--linha-forte);padding-top:4px}
.somas .destaque dd{color:var(--marca,var(--azul))}

.aceito{
  background:var(--verde-fundo);border-left:3px solid var(--verde);
  border-radius:0 6px 6px 0;padding:14px 16px;font-size:15px;line-height:1.5;
}
.aceito b{display:block;color:var(--verde);font-size:16px;margin-bottom:2px}

.aceitar h2{margin:0 0 2px;font-size:19px;letter-spacing:-.01em}
.aceitar .campo{margin:14px 0}
/* O botão grande das folhas públicas leva a cor da MARCA (do cadastro da
   Empresa). O vazado e o laranja da conversão ficam de fora pelo :not --
   sem isso esta regra, mais específica, pintava o "Pedir pelo WhatsApp". */
body.publico .botao.grande:not(.vazado):not(.pedir):not(.branco):not(.secundario){
  background:var(--marca,var(--azul));border-color:var(--marca,var(--azul));
}
.aceitar .botao.grande{width:100%;min-height:52px;font-size:16.5px}
.rodape-publico{
  margin:6px 0 0;text-align:center;font-size:12.5px;color:var(--suave);
}

/* O botão de orçamento na ficha do pedido, e o link para copiar. */
.link-orcamento{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;
}
.link-orcamento input{
  flex:1 1 200px;min-width:0;font-family:var(--fonte);font-size:12px;
  padding:9px 10px;border:1px solid var(--linha);border-radius:5px;
  background:var(--bancada);color:var(--suave);
}

/* ------------------------------------------- a vitrine no telefone
   Este bloco fica no FIM do arquivo de proposito. As regras de alvo de toque
   e as da vitrine tem a mesma especificidade, e media query nao soma nada:
   quando duas empatam, ganha a que vem depois. Ja perdi o conserto da barra
   de busca por ter escrito o remendo antes do bloco que ele consertava. */
@media (max-width:1023px){
  .ficha-vitrine{grid-template-columns:1fr}
  .chamada-loja{flex:1 1 100%}
  /* O dedo acerta 44 px, e a seta e o pontinho sao pequenos POR DESENHO --
     seta de 44 px desenhada come um terco da foto. Entao quem cresce e a
     AREA de toque, e nao o desenho: o alvo tem 44 px de altura de verdade
     (e o teste mede o elemento, nao o enfeite) e o circulo visivel continua
     do tamanho que era, desenhado por dentro. */
  .palco-foto .seta{width:44px;height:44px;background:var(--vidro)}
  .pontos{bottom:0;gap:2px}
  .pontos .ponto{
    width:26px;height:44px;background:none;
    display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;
  }
  .pontos .ponto::before{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--ponto);
  }
  .pontos .ponto.aqui{background:none}
  .pontos .ponto.aqui::before{background:var(--azul)}
  .miniatura{width:52px;height:52px}
  /* O nome do produto e um titulo de cartao, e nao um link no meio de uma
     frase: da para esticar ate 44 px sem destruir paragrafo nenhum -- e ele e
     o lugar onde o dedo tenta abrir a peca primeiro. */
  .dados-vitrine h3 a{display:flex;align-items:center;min-height:44px}
  .volta a{display:inline-flex;align-items:center;min-height:44px}
  .palco-foto .ampliar{width:44px;height:44px}
  /* O campo do link é para TOCAR (ele se seleciona sozinho no toque), então
     é alvo de dedo como qualquer botão. Passou despercebido na tela do
     pedido porque aquela rota não está na lista que o teste mede. */
  .link-orcamento input{min-height:44px}
}

@media (max-width:767px){
  /* Em 420 px cabe UM cartao, e nao dois. Duas colunas dariam 180 px de
     cartao com 134 px de foto -- pequeno demais para julgar uma peca, que e
     a unica coisa que a pessoa veio fazer aqui. A partir de ~520 px voltam
     duas colunas sozinhas. */
  .grade-vitrine{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
  .dados-vitrine{padding:11px}
  .dados-vitrine h3{font-size:14.5px}
  .preco-vitrine{font-size:18px}
  .acoes-vitrine{gap:7px}
  .acoes-vitrine .botao{flex:1 1 100%}
  /* Seta e pontinho ja cresceram no bloco de 900 px. Repeti-los aqui foi o
     que quebrou o alvo de toque uma vez: a segunda regra ganha por ordem de
     fonte, e a seta voltou a ter 36 px sem nenhum aviso. */
  .chip{min-height:44px;padding:0 16px}
  .lupa .seta.antes{left:6px}
  .lupa .seta.depois{right:6px}
  .lupa .fechar-lupa{top:6px;right:6px}
  /* A barra de filtros vira uma faixa que rola de lado, em vez de quebrar em
     tres linhas e empurrar os produtos para fora da primeira tela. */
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-ms-overflow-style:none}
  .chips::-webkit-scrollbar{display:none}
  .peneira-vitrine .ordem-vitrine{margin-left:0;flex:1 1 auto}
  .peneira-vitrine select{width:100%}
}

.peneira-produtos .filtro, .peneira-clientes .filtro{margin:0;flex:0 1 auto}
.peneira-produtos .limpar, .peneira-clientes .limpar{
  color:var(--azul);font-size:13.5px;text-decoration:none;
  display:inline-flex;align-items:center;
}
.peneira-produtos .limpar:hover, .peneira-clientes .limpar:hover{text-decoration:underline}

/* ------------------------------------------------------------ Clientes (S6)
   A lista reaproveita o cabeçalho, os indicadores e a peneira de Produtos.
   Aqui só o que é dela: a inicial no lugar da foto, as tags e o histórico
   da gaveta. */
.filtros-clientes{display:contents}
.abas-clientes{margin:0 0 14px}

.nome-cliente{display:inline-flex;align-items:center;gap:10px;min-width:0}
.nome-cliente a{font-weight:600}
.tabela-clientes td[data-rotulo="Tags"] .etiqueta{margin:0 2px 2px 0}
.selos-cliente{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.acoes-painel-cliente{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.historico-painel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.historico-painel li{
  display:flex;flex-direction:column;gap:3px;padding:10px 0;
  border-bottom:1px solid var(--linha);
}
.historico-painel li > div{display:flex;justify-content:space-between;gap:10px;align-items:center}
.historico-painel .resumo-pedido{color:var(--suave);font-size:13.5px;display:block}

.formulario-gaveta textarea{width:100%;resize:vertical;font:inherit}
.campo-uf{flex:0 0 72px}
.campo-uf input{text-transform:uppercase}

/* ------------------------------------------------------ a barra do lote */
.barra-lote{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px 14px;margin-bottom:12px;border-radius:8px;
  background:var(--azul-fundo);border:1px solid var(--primaria-borda);
}
.barra-lote b{margin-right:6px;font-size:14.5px;color:var(--azul-escuro)}

/* ---------------------------------------------------------- a tabela */
.tabela-produtos th.marca, .tabela-produtos td.marca{width:34px;padding-right:0}
.tabela-produtos input[type=checkbox]{width:17px;height:17px;cursor:pointer}
/* `nowrap`: com `wrap`, bastava o conteúdo ao lado da miniatura passar da
   largura da coluna para a identidade inteira cair PARA BAIXO dela -- e a
   tabela ficava com linhas de alturas diferentes, umas com o nome ao lado da
   foto e outras com o nome embaixo. Era o que se via na tela do Samir. */
.tabela-produtos .linha-produto{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
/* A miniatura tem tamanho fixo e a peca aparece inteira: foto de produto
   cortada na lista faz duas pecas parecidas virarem a mesma linha. */
.miniatura-lista, .tabela-produtos .miniatura{
  width:36px;height:36px;flex:none;border-radius:7px;overflow:hidden;
  background:var(--mesa-2);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;
}
.tabela-produtos .miniatura img{width:100%;height:100%;object-fit:contain;padding:2px}
.tabela-produtos .sem-capa{color:var(--linha-forte);font-size:15px}
/* ALTURA FIXA, e a linha é uniforme por construção.

   Persegui a causa de linhas com 65 px e 74 px por cinco medições -- não era
   o segundo selo, nem a gaveta do menu, nem a miniatura: tirar a foto DEIXAVA
   a linha mais alta ainda. Numa tabela, qualquer coisa numa célula pode
   esticar a linha inteira, e a lista de suspeitos não acaba: uma categoria
   comprida, um selo novo, um preço com "sugerido" embaixo.

   Uma lista de produtos não precisa que a linha se ajuste ao conteúdo -- ela
   precisa de uma régua. Altura fixa dá isso de uma vez e não volta a quebrar
   na próxima coluna. `vertical-align:middle` porque `baseline` é o padrão e
   alinha pelo texto, deixando a miniatura fora de prumo. */
.tabela-produtos tbody td{height:56px;vertical-align:middle}

/* `min-width:0` porque item de flex nasce com `min-width:auto` -- "no mínimo
   a largura do conteúdo" --, e sem isto um nome comprido empurra a célula em
   vez de quebrar dentro dela. */
.tabela-produtos .identidade{min-width:0}
/* O nome numa linha só. Nome que quebra em duas é o que fazia a tabela
   perder a régua; o `title` na célula guarda o nome inteiro e o SKU, e a
   gaveta mostra os dois por extenso. No cartão do telefone ele volta a
   quebrar -- lá a largura é a da tela e não há régua para manter. */
.tabela-produtos .identidade b{
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:14.5px;line-height:1.3;font-weight:600;
}
/* Os dois selos de Status lado a lado. Quebrando em duas linhas, a peça
   publicada ficava 9 px mais alta que as outras e a tabela perdia a régua --
   com as colunas de lucro fora, a largura sobra. `white-space` e não
   `display:flex`, que num <td> tira a célula do layout de tabela. */
.tabela-produtos td.estado{white-space:nowrap}
.tabela-produtos td.estado .etiqueta + .etiqueta{margin-left:5px}
.tabela-produtos tbody tr{cursor:pointer}
.tabela-produtos tbody tr:hover{background:var(--azul-fundo)}
.tabela-produtos .prejuizo{color:var(--vermelho);font-weight:600}
.estado-estoque.bem{color:var(--verde);font-weight:600}
.estado-estoque.atencao{color:var(--ambar);font-weight:600}
.estado-estoque.mal{color:var(--vermelho);font-weight:600}
.estado-estoque.neutra{color:var(--suave)}

.fotos-painel{margin-bottom:14px}
.fotos-painel .palco-foto{aspect-ratio:4/3;border:1px solid var(--linha);border-radius:9px}

.descricao-painel{font-size:14px;line-height:1.5;color:var(--suave);margin:0 0 14px}
.contar-estoque{
  display:flex;gap:9px;align-items:flex-end;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--linha);
}
.contar-estoque .campo{flex:1 1 150px;margin:0}
.acoes-painel{
  display:flex;flex-direction:column;gap:9px;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--linha);
}
.acoes-painel .botao{justify-content:center;text-align:center}
.acoes-painel .nota{margin:0}
/* Nome sem número: era `.duas-acoes` até Desativar virar a terceira, e uma
   classe que conta itens mente na primeira mudança. */
.acoes-lado-a-lado{display:flex;gap:9px;flex-wrap:wrap}
.acoes-lado-a-lado form{flex:1 1 92px;margin:0}
.acoes-lado-a-lado .botao{width:100%;justify-content:center;text-align:center}

/* As abas são <input type=radio> + CSS. `display:none` e não `.sr`: um radio
   de 1x1 px continua tendo caixa, e o teste que cobra alvo de 44 px o
   encontraria — escondido, sem o dedo nunca chegar nele. O <label> é quem
   recebe o toque, e ele ganha `tabindex` para o teclado não perder as abas. */
.abas-edicao > input[type=radio]{display:none}
.tiras-abas{
  display:flex;gap:4px;overflow-x:auto;
  border-bottom:1px solid var(--linha);margin:0 0 18px;
}
.tira-aba{
  padding:10px 16px;font-size:14px;font-weight:600;color:var(--suave);
  border-bottom:3px solid transparent;margin-bottom:-1px;
  cursor:pointer;white-space:nowrap;user-select:none;
}
.tira-aba:hover{color:var(--tinta)}
.tira-aba:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
#aba-geral:checked    ~ .tiras-abas .tira-aba:nth-child(1),
#aba-venda:checked    ~ .tiras-abas .tira-aba:nth-child(2),
#aba-producao:checked ~ .tiras-abas .tira-aba:nth-child(3),
#aba-catalogo:checked ~ .tiras-abas .tira-aba:nth-child(4){
  color:var(--azul);border-bottom-color:var(--azul);
}
/* A folha some com `display:none` e não com `[hidden]`: os campos continuam
   no formulário e continuam sendo enviados — Salvar é do cadastro inteiro,
   e não da aba aberta. */
.folha-aba{display:none}
#aba-geral:checked    ~ .corpo-edicao .folha-aba[data-folha=geral],
#aba-venda:checked    ~ .corpo-edicao .folha-aba[data-folha=venda],
#aba-producao:checked ~ .corpo-edicao .folha-aba[data-folha=producao],
#aba-catalogo:checked ~ .corpo-edicao .folha-aba[data-folha=catalogo]{display:block}

.corpo-edicao{display:grid;gap:18px;align-items:start}
/* min-width:0 porque item de grid nasce com `min-width:auto`, que significa
   "no mínimo a largura do conteúdo" — e um cartão largo empurra a página
   inteira para fora da tela. */
.corpo-edicao > *{min-width:0}
@media (min-width:1000px){.corpo-edicao{grid-template-columns:1fr 340px}}
.folhas-abas > .cartao, .lado-comercial > .cartao{margin-bottom:16px}
.lado-comercial{display:flex;flex-direction:column;gap:16px}
.lado-comercial > .cartao{margin-bottom:0}
@media (min-width:1000px){
  /* Ela acompanha a rolagem das quatro abas: é a informação que se consulta
     o tempo todo, e uma aba comprida a deixaria para trás. */
  .lado-comercial{position:sticky;top:16px}
}
.formulario-produto > .acoes.principal{margin-top:18px}
.valor-lado{
  margin:0;padding:11px 12px;border:1px solid var(--linha);border-radius:7px;
  background:var(--mesa-2);font-size:15px;font-weight:600;
}
.faixa-volume{
  padding:8px 0;border-bottom:1px solid var(--linha);font-size:13.5px;
  display:flex;flex-direction:column;gap:2px;
}
.faixa-volume:last-child{border-bottom:none}

/* --------------------------------------------------- Mídia do produto */
.palco-midia{
  aspect-ratio:16 / 10;border-radius:8px;background:var(--bancada);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  margin-bottom:10px;
}
.palco-midia img{width:100%;height:100%;object-fit:contain}
.palco-midia .sem-capa{font-size:34px;color:var(--linha-forte)}

.tira-midia{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.peca-midia{
  position:relative;width:64px;height:48px;border-radius:6px;overflow:hidden;
  background:var(--bancada);border:1px solid var(--linha);
}
.peca-midia.capa{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.peca-midia img{width:100%;height:100%;object-fit:cover;display:block}
.peca-midia.filme{background:var(--palco)}
.peca-midia.filme img{opacity:.55}
.marca-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--branco);font-size:17px;text-shadow:var(--sombra-texto);pointer-events:none;
}
.peca-midia .duracao{
  position:absolute;left:3px;bottom:2px;
  font-size:9.5px;font-weight:700;color:var(--branco);
  background:var(--sobre-foto);border-radius:3px;padding:0 3px;pointer-events:none;
}
.peca-midia .selo-capa{
  position:absolute;left:3px;top:2px;font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--branco);
  background:var(--azul);border-radius:3px;padding:0 4px;
}
.tirar-midia, .virar-capa{
  position:absolute;width:20px;height:20px;padding:0;border:none;border-radius:4px;
  background:var(--sobre-foto);color:var(--branco);font-size:13px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.tirar-midia{right:2px;top:2px}
.virar-capa{right:2px;bottom:2px;font-size:11px}
.peca-midia .ver-filme{
  position:absolute;left:2px;top:2px;padding:1px 5px;border:none;border-radius:4px;
  background:var(--sobre-foto);color:var(--branco);font-size:10px;font-weight:600;cursor:pointer;
}
.acoes-midia{display:flex;gap:8px}
.acoes-midia .botao{flex:1 1 0;justify-content:center;text-align:center}
.barra-envio{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-size:12.5px}
.barra-envio progress{width:100%;height:8px}
.recado-midia{margin:10px 0 0;font-size:13px;font-weight:500}
.recado-midia.bem{color:var(--verde)}
.recado-midia.mal{color:var(--vermelho)}

.quadro-catalogo{
  margin-top:14px;padding:11px 12px;border-radius:8px;background:var(--azul-fundo);
  display:flex;flex-direction:column;gap:2px;
}
.rotulo-quadro{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--azul);
}
.quadro-catalogo .nota{margin:0;font-size:11.5px}

/* --------------------------------------- o vídeo na ficha do cliente */
.filme-ficha{margin-top:14px}
.cartaz-filme{
  position:relative;display:block;width:100%;padding:0;border:none;cursor:pointer;
  border-radius:10px;overflow:hidden;background:var(--palco);aspect-ratio:16 / 9;
}
.cartaz-filme img{width:100%;height:100%;object-fit:cover;opacity:.6;display:block}
.cartaz-filme .marca-play{font-size:38px}
.cartaz-filme .duracao{
  position:absolute;right:9px;bottom:9px;font-size:12px;font-weight:700;color:var(--branco);
  background:var(--sobre-foto);border-radius:4px;padding:1px 6px;
}
.chamada-filme{
  position:absolute;left:11px;bottom:9px;font-size:12.5px;font-weight:600;color:var(--branco);
  text-shadow:var(--sombra-texto);
}
.filme-produto{width:100%;border-radius:10px;background:var(--preto);display:block}
.ver-filme-painel{width:100%;justify-content:center;text-align:center;margin-top:10px}
.filme-painel{width:100%;border-radius:8px;background:var(--preto);margin-top:10px;display:block}
#lupa-filme video{width:min(84vw,900px);max-height:84vh;display:block;background:var(--preto)}

/* ------------------------------------------------- Importar produtos */
.colunas-aceitas{
  font-size:12.5px;background:var(--bancada);border-radius:6px;
  padding:9px 11px;margin:0 0 12px;word-break:break-word;
}
.lista-pulados{font-size:13px;color:var(--suave);margin:0 0 12px;padding-left:20px}

/* A coluna Estoque: o número é o que ela promete, e a frase embaixo responde
   outra pergunta — se a peça está à venda. */
.estado-estoque b{display:block;font-weight:600}
.estado-estoque small{
  display:block;font-size:10.5px;font-weight:500;color:var(--suave);
  text-transform:none;letter-spacing:0;
}

/* ==================================================== A LOJA, vista de fora
   O Figma "Home Pública FINAL" (desktop 1440 e celular 390): cabeçalho,
   hero, categorias, destaques, "Tem uma ideia na cabeça?", como funciona,
   benefícios e rodapé -- e a lista e a ficha com a mesma casca.

   Nenhuma cor escrita aqui: os valores vêm dos tokens `--loja-*` que
   `loja.tokens()` pendura no <body> (o tema da Personalização). A regra é o
   desenho; o tema é o valor.

   `so-computador` e `so-telefone` decidem onde cada peneira aparece: a
   coluna lateral no computador, a gaveta "Filtrar" no telefone. As duas
   saem da mesma macro do template. */
.so-computador{display:block}
.so-estreito{display:none}
.largura-loja{max-width:1320px;margin:0 auto;padding:0 24px;box-sizing:content-box}
.loja-publica{padding-bottom:12px}
.loja-publica .cartao-vitrine, .previa-tokens .cartao-vitrine{border-radius:var(--loja-raio,10px)}
/* Os três jeitos de cartão do tema. `contorno` é o do Figma. */
.cartoes-contorno .cartao-vitrine{box-shadow:none}
.cartoes-plano .cartao-vitrine{box-shadow:none;border-color:transparent}
.cartoes-plano .cartao-vitrine:hover{box-shadow:var(--sombra-p)}
.loja-publica .preco-vitrine{color:var(--loja-forte,var(--texto));font-weight:700}

/* ------------------------------------------------------------ cabeçalho */
.topo-loja{
  background:var(--superficie);border-bottom:1px solid var(--borda);
  position:sticky;top:0;z-index:30;
}
.topo-dentro{display:flex;align-items:center;gap:28px;min-height:78px;position:relative}
.marca-loja{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.marca-loja img{border-radius:7px}
.marca-loja b{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--loja-texto,var(--texto))}
.logo-loja{height:40px;width:auto;max-width:180px;object-fit:contain;border-radius:0}
.nav-loja{display:flex;gap:6px;margin:0 auto}
.nav-loja a{
  padding:8px 12px;border-radius:8px;text-decoration:none;
  color:var(--loja-texto,var(--texto));font-size:13.5px;font-weight:500;
}
.nav-loja a:hover{background:var(--loja-suave,var(--neutro-fundo))}
.nav-loja .so-celular{display:none}
.busca-topo{position:relative;flex:0 1 270px}
.busca-topo input{
  width:100%;height:40px;padding:0 42px 0 14px;font:inherit;font-size:13px;
  border:1px solid transparent;border-radius:10px;background:var(--neutro-fundo);
  color:var(--loja-texto,var(--texto));
}
.busca-topo input:focus{border-color:var(--marca,var(--primaria));outline:none;background:var(--superficie)}
.lupa-busca{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  border:0;background:none;color:var(--loja-texto,var(--texto));cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.zap-topo{white-space:nowrap;min-height:40px;flex:none}
.botoes-celular{display:none}
.botao-loja{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;color:var(--loja-texto,var(--texto));
}
.botao-loja:hover{background:var(--neutro-fundo)}

/* O botão da loja: a cor e o texto são do tema. O texto do botão laranja é
   ESCURO (`--loja-botao-texto`): branco sobre o laranja do Figma dá 2,3:1. */
.loja-publica .botao.pedir, .topo-loja .botao.pedir, .rodape-loja .botao.pedir,
.faixa-previa ~ * .botao.pedir{color:var(--loja-botao-texto,var(--branco))}
.loja-publica .botao.pedir .zap, .topo-loja .botao.pedir .zap{background:currentColor}
.botao.branco{background:var(--superficie);border-color:var(--superficie);
  color:var(--loja-secundaria,var(--primaria))}
.botao.branco:hover{border-color:var(--loja-secundaria,var(--primaria))}
.botao.secundario{background:var(--loja-secundaria,var(--primaria));
  border-color:var(--loja-secundaria,var(--primaria));color:var(--branco)}
.botao.secundario:hover{filter:brightness(.92)}
.botao .icone.p{width:16px;height:16px}

/* ----------------------------------------------------------------- hero
   O quadro lilás do Figma "Catálogo Comercial" (1340 x 400, raio 22): o
   texto à esquerda, o desenho à direita -- os dois círculos, ou a foto da
   peça quando há. Título 46 px, uma frase por linha. */
.hero-loja{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,680px);align-items:stretch;
  margin-top:28px;border-radius:22px;background:var(--loja-hero);overflow:hidden;min-height:400px;
}
.texto-hero{padding:54px 40px 40px 58px;display:flex;flex-direction:column;justify-content:center}
.hero-loja .chamada{
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--loja-secundaria,var(--primaria));margin:0 0 14px;
}
.hero-loja h1{
  font-size:46px;line-height:1.2;letter-spacing:-.01em;margin:0 0 18px;
  color:var(--loja-texto,var(--texto));
}
.hero-loja h1 span{display:block}
.corpo-hero{font-size:17px;line-height:1.4;color:var(--texto-2);margin:0 0 24px;max-width:500px}
.acoes-hero{display:flex;gap:12px;flex-wrap:wrap}
body.publico .acoes-hero .botao.grande{width:auto;min-height:44px;margin:0;padding:0 22px;font-size:14px;
  font-weight:600;border-radius:10px;gap:8px}
body.publico .acoes-hero .botao.branco{border:1px solid var(--borda);color:var(--loja-forte,var(--texto))}
.visual-hero{position:relative;background:var(--loja-hero-2,var(--neutro-fundo));
  border-radius:22px;min-height:400px;overflow:hidden}
.visual-hero.com-foto{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:32px;
  align-items:center}
/* O desenho do Figma: um círculo da secundária e um do laranja de
   destaque, os dois translúcidos, no canto direito. */
.circulo-hero{position:absolute;border-radius:50%}
.circulo-hero.um{width:240px;height:240px;right:60px;top:38px;background:var(--loja-secundaria,var(--primaria));
  opacity:.28}
.circulo-hero.dois{width:150px;height:150px;right:70px;top:200px;background:var(--loja-destaque,var(--laranja));
  opacity:.62}
.quadro-hero{
  display:flex;align-items:center;justify-content:center;border-radius:16px;overflow:hidden;
  background:var(--superficie);aspect-ratio:1/1;
}
.quadro-hero img{width:100%;height:100%;object-fit:contain;padding:14px}

/* ---- o carrossel dos banners, no lugar do hero
   A proporção é a do banner do computador (1920x900) e, no telefone, a do
   banner do celular (1080x1350): a altura não depende da foto que subiu, e
   a página não pula quando o banner seguinte carrega. */
.carrossel{position:relative;margin-top:18px;border-radius:20px;overflow:hidden;
  background:var(--neutro-fundo)}
.banner-loja{position:relative;aspect-ratio:1920/900;max-height:520px;width:100%}
.banner-loja picture, .banner-loja img{display:block;width:100%;height:100%}
.banner-loja img{object-fit:cover}
/* O texto do banner fica na ÁREA SEGURA -- a faixa da esquerda, onde o
   recorte do telefone não chega. O véu é para o texto ler sobre qualquer foto. */
.texto-banner{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  gap:10px;padding:clamp(18px,5vw,64px);max-width:min(620px,70%);color:var(--branco);
  background:linear-gradient(90deg,var(--veu-banner),transparent)}
.texto-banner h2{margin:0;font-size:clamp(22px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em}
.texto-banner p{margin:0;font-size:clamp(14px,1.4vw,18px);line-height:1.5}
body.publico .texto-banner .botao.grande{width:auto;align-self:flex-start;margin-top:6px;
  min-height:46px;padding:0 22px}
.banner-todo{position:absolute;inset:0}
.seta-banner{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
  border:0;border-radius:50%;background:var(--superficie);color:var(--texto);font-size:26px;
  line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-p)}
.seta-banner.antes{left:14px}
.seta-banner.depois{right:14px}
.rodape-carrossel{position:absolute;left:0;right:0;bottom:6px;display:flex;align-items:center;
  justify-content:center;gap:8px}
.indicadores{display:flex}
.indicadores .ponto{width:44px;height:44px;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.indicadores .ponto::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--ponto-claro)}
.indicadores .ponto.aqui::before{background:var(--branco);width:22px;border-radius:5px}
.pausa-carrossel{min-height:44px;padding:0 12px;border:0;background:transparent;
  color:var(--branco);font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}

/* --------------------------------------------------------------- seções */
.secao-loja{margin-top:56px}
.cabeca-secao{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-bottom:10px;flex-wrap:wrap}
.titulo-secao{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0;
  color:var(--loja-texto,var(--texto))}
.frase-secao{margin:7px 0 0;font-size:13px;color:var(--texto-2)}
.ver-todos{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:var(--loja-secundaria,var(--primaria));text-decoration:none}
.ver-todos:hover{text-decoration:underline}

/* As categorias: oito cartões numa linha, como no Figma. O desenho é o
   ícone monocromático que a categoria escolheu, na cor secundária. */
.grade-categorias{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
.grade-categorias > li{min-width:0}
/* Oito por linha no computador, como no Figma -- `auto-fill` deixava um vão
   no fim da linha. */
@media (min-width:1200px){.grade-categorias{grid-template-columns:repeat(8,minmax(0,1fr))}}
.cartao-categoria{
  display:flex;flex-direction:column;gap:6px;height:100%;min-height:122px;box-sizing:border-box;
  padding:18px 12px 14px;border:1px solid var(--borda);border-radius:14px;
  background:var(--superficie);text-decoration:none;color:var(--loja-texto,var(--texto));
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cartao-categoria:hover{border-color:var(--loja-secundaria,var(--primaria));box-shadow:var(--sombra-p)}
.cartao-categoria .icone{width:32px;height:32px;align-self:center;margin-bottom:auto;
  color:var(--loja-secundaria,var(--primaria));stroke-width:1.5}
.cartao-categoria b{font-size:12.5px;font-weight:600;margin-top:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cartao-categoria small{font-size:11.5px;color:var(--texto-2)}

/* Os cartões de produto da home: quatro por linha no computador. */
.loja-inicio .grade-vitrine{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}

/* "O que você está procurando?" -- os cartões de ocasião (248 x 132 no
   Figma): o círculo roxo com o desenho, título, frase e a seta no pé. */
.grade-ocasioes{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(5,minmax(0,1fr))}
.grade-ocasioes > li{min-width:0}
.cartao-ocasiao{
  position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:16px;
  height:100%;min-height:132px;box-sizing:border-box;padding:19px 20px 40px 19px;
  border:1px solid var(--borda);border-radius:16px;background:var(--superficie);
  text-decoration:none;color:var(--loja-texto,var(--texto));
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cartao-ocasiao:hover{border-color:var(--loja-secundaria,var(--primaria));box-shadow:var(--sombra-p)}
.icone-ocasiao{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:var(--loja-secundaria,var(--primaria));color:var(--branco)}
.icone-ocasiao .icone{width:20px;height:20px}
.texto-ocasiao b{display:block;font-size:15px;font-weight:600;margin-top:2px}
.texto-ocasiao small{display:block;font-size:12px;line-height:1.35;color:var(--texto-2);margin-top:8px}
.seta-ocasiao{position:absolute;right:20px;bottom:16px;font-size:18px;font-weight:600;
  color:var(--loja-secundaria,var(--primaria))}

/* A peça sob medida: o quadro lilás com o ✦, o título, o texto e o botão
   à esquerda, e os quatro passos num cartão branco à direita -- o último
   no laranja de destaque. */
.bloco-ideia{
  display:grid;grid-template-columns:minmax(0,600px) minmax(0,520px);justify-content:space-between;
  gap:32px;align-items:center;padding:48px;border-radius:22px;background:var(--loja-suave);
}
.texto-ideia{display:flex;flex-direction:column;align-items:flex-start}
.icone-ideia{font-size:22px;font-weight:700;line-height:1;color:var(--loja-secundaria,var(--primaria));
  margin-bottom:28px}
.bloco-ideia h2{margin:0 0 12px;font-size:28px;line-height:1.2;letter-spacing:-.01em;
  color:var(--loja-texto,var(--texto))}
.bloco-ideia p{margin:0 0 20px;font-size:15px;line-height:1.45;color:var(--texto-2);max-width:590px}
body.publico .bloco-ideia .botao.grande, body.publico .quadro-festas .botao.grande,
body.publico .bloco-empresas .botao.grande{width:auto;min-height:44px;padding:0 22px;font-size:14px;
  font-weight:600;border-radius:10px;gap:8px;margin:0}
.passos-ideia{list-style:none;margin:0;padding:34px 24px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-radius:18px;background:var(--superficie)}
.passos-ideia li{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.passos-ideia b{font-size:12px;font-weight:600;color:var(--loja-texto,var(--texto))}

/* Os números redondos (01 a 04) do sob medida e do "Como funciona". */
.numero-passo{
  width:42px;height:42px;border-radius:50%;flex:none;background:var(--loja-secundaria,var(--primaria));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--branco);
}
.ultimo > .numero-passo{background:var(--loja-destaque,var(--laranja));
  color:var(--loja-destaque-texto,var(--texto))}

/* "Sua festa começa nos detalhes." -- a foto à esquerda (500 px), a chamada,
   os atalhos e o botão à direita. */
.quadro-festas{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);min-height:360px;
  border:1px solid var(--borda);border-radius:20px;background:var(--superficie);overflow:hidden}
.foto-festas{display:flex;align-items:center;justify-content:center;
  background:var(--loja-suave-2,var(--neutro-fundo));border-radius:20px;overflow:hidden}
.foto-festas img{width:100%;height:100%;object-fit:cover}
.foto-festas .simbolo-festas{width:96px;height:96px;object-fit:contain}
.texto-festas{padding:70px 60px 36px;display:flex;flex-direction:column;align-items:flex-start}
.chamada-festas{margin:0 0 18px;font-size:24px;font-weight:700;line-height:1.25;
  color:var(--loja-texto,var(--texto));max-width:620px}
.atalhos-festas{list-style:none;margin:0 0 40px;padding:0;display:flex;flex-wrap:wrap;gap:18px 20px;
  max-width:520px}
.atalho-festa{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:24px;
  padding:3px 14px;border-radius:12px;background:var(--loja-suave);font-size:11px;font-weight:600;
  color:var(--loja-forte,var(--texto));text-decoration:none}
.atalho-festa:hover{background:var(--loja-suave-2)}

/* "Sua marca também pode ganhar forma." -- o quadro ESCURO das empresas. */
.bloco-empresas{padding:42px 48px 41px;border-radius:22px;background:var(--loja-escuro,var(--navy));
  color:var(--branco);min-height:320px;box-sizing:border-box}
.chamada-empresas{margin:0 0 14px;font-size:11px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--loja-destaque,var(--laranja))}
.bloco-empresas h2{margin:0 0 16px;font-size:30px;line-height:1.25;max-width:620px;color:var(--branco)}
.bloco-empresas p{margin:0 0 26px;font-size:15px;line-height:1.45;max-width:610px;
  color:var(--loja-escuro-texto,var(--branco))}

/* Como funciona: os quatro passos num cartão branco, lado a lado. */
.passos{list-style:none;margin:0;padding:41px 60px;display:grid;gap:24px;
  grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--borda);border-radius:18px;
  background:var(--superficie);min-height:210px;box-sizing:border-box;align-items:start}
.passos li{display:flex;gap:18px;align-items:flex-start}
.passos b{display:block;font-size:16px;font-weight:600;color:var(--loja-texto,var(--texto));margin-top:4px}
.passos li > span:last-child > span{display:block;font-size:12px;color:var(--texto-2);
  line-height:1.4;margin-top:10px}

/* "Produzido em Campo Grande/MS" -- a faixa verde, com os selos. */
.faixa-local{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:34px 42px;min-height:180px;box-sizing:border-box;border-radius:18px;
  background:var(--sucesso-fundo)}
.faixa-local h2{margin:0 0 10px;font-size:24px;font-weight:700;color:var(--sucesso)}
.faixa-local p{margin:0;font-size:14px;color:var(--texto-2)}
.selos-local{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:15px}
.selos-local li{min-width:140px;padding:4px 12px;border-radius:12px;text-align:center;
  background:var(--superficie);font-size:11px;font-weight:600;color:var(--sucesso)}

/* A faixa de PRÉVIA. Só quem tem sessão na empresa a vê. */
.faixa-previa{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:9px 18px;background:var(--grafite);color:var(--branco);font-size:13.5px;
}
.faixa-previa b{font-weight:700}
.faixa-previa a{color:var(--branco);text-decoration:underline;text-underline-offset:2px}
.faixa-previa a:hover{color:var(--laranja-claro)}

/* ------------------------------------------------------ a lista e a ficha */
.trilha-loja{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:20px 0 6px;
  font-size:12.5px;color:var(--texto-2)}
.trilha-loja a{color:var(--texto-2);text-decoration:none}
.trilha-loja a:hover{color:var(--loja-secundaria,var(--primaria));text-decoration:underline}
.cabeca-lista{margin-bottom:14px}
.titulo-lista{font-size:30px;font-weight:700;letter-spacing:-.02em;margin:0;
  color:var(--loja-texto,var(--texto))}
.busca-lista{display:flex;gap:10px;margin-bottom:16px;max-width:720px}
.busca-lista input{
  flex:1 1 auto;min-width:0;height:46px;padding:0 16px;font:inherit;font-size:14.5px;
  border:1px solid var(--borda);border-radius:10px;background:var(--superficie);
  color:var(--loja-texto,var(--texto));
}
.busca-lista input:focus{outline:none;border-color:var(--marca,var(--primaria));box-shadow:var(--anel-foco)}
.busca-lista .botao{min-height:46px;gap:6px}
.chips-loja{margin-bottom:22px}
.loja-publica .chip.aqui{background:var(--loja-secundaria,var(--marca,var(--azul)));
  border-color:var(--loja-secundaria,var(--marca,var(--azul)));color:var(--branco)}
.acoes-vazio{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mais-produtos{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px}
.mais-produtos .contagem{margin:0}
.erro-carregar{display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--perigo);font-size:14px}
.cartao-esqueleto .palco-foto{display:block;margin:0}
.cartao-esqueleto .botao-esqueleto{height:36px;margin-top:10px}
/* A ficha do Figma "Catálogo Comercial": a galeria (650 x 620) num quadro
   lilás de raio 22, e à direita selo, nome 34, resumo 16, preço 30, a cor,
   o "Quero personalizar" e a linha de entrega. Só na loja (`.loja-ficha`):
   a mesma ficha vista de dentro do sistema continua com o desenho da casa. */
.loja-ficha .ficha-vitrine{margin-top:34px;gap:40px;grid-template-columns:minmax(0,650px) minmax(0,610px);
  justify-content:space-between}
.loja-ficha .palco-foto.grande{aspect-ratio:650/620;border:1px solid var(--borda);border-radius:22px;
  background:var(--superficie)}
.loja-ficha .miniatura{background:var(--superficie)}
.loja-ficha .dados-ficha{display:flex;flex-direction:column;align-items:flex-start}
.loja-ficha .nome-ficha{margin-top:22px;font-size:34px;font-weight:700;line-height:1.2;
  color:var(--loja-texto,var(--texto))}
.loja-ficha .dados-ficha .descricao{margin-top:14px;font-size:16px;line-height:1.4;color:var(--texto-2)}
.loja-ficha .preco-vitrine.grande{margin-top:30px;font-size:30px;font-weight:700}
.loja-ficha .pedir-form{margin-top:44px;width:100%;display:flex;flex-direction:column;align-items:flex-start}
.escolha-cor{border:0;margin:0 0 30px;padding:0}
.escolha-cor legend{padding:0;margin-bottom:13px;font-size:14px;font-weight:600;
  color:var(--loja-texto,var(--texto))}
.opcoes-cor{display:flex;flex-wrap:wrap;gap:12px}
/* O rótulo é o alvo, e o rádio cobre o rótulo inteiro, transparente: o
   que o dedo toca e o que o teste mede é a mesma caixa (cresce a ÁREA,
   não o desenho). */
.opcao-cor{position:relative;display:flex;align-items:center;justify-content:center;
  min-width:86px;min-height:40px;padding:0 14px;box-sizing:border-box;border:1px solid var(--borda);
  border-radius:9px;background:var(--superficie);font-size:11px;font-weight:500;cursor:pointer;
  color:var(--loja-texto,var(--texto))}
.opcao-cor input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opcao-cor:has(input:checked){border:2px solid var(--loja-secundaria,var(--primaria))}
.opcao-cor:has(input:focus-visible){outline:2px solid var(--loja-secundaria,var(--primaria));
  outline-offset:2px}
.pergunta-personalizar{margin:0 0 14px;font-size:14px;font-weight:600;color:var(--loja-texto,var(--texto))}
.loja-ficha .personalizar{border:0;padding:0;background:none;width:100%}
.loja-ficha .personalizar > summary{list-style:none;width:auto;min-width:200px;margin:0;
  min-height:44px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex}
.loja-ficha .personalizar > summary::-webkit-details-marker{display:none}
.loja-ficha .personalizar[open] > summary{display:none}
.campos-personalizar{display:flex;flex-direction:column;gap:12px;max-width:440px;padding:16px;
  border:1px solid var(--borda);border-radius:12px;background:var(--superficie)}
.campos-personalizar .duas{display:flex;flex-wrap:wrap;gap:10px}
.campos-personalizar .duas > *{flex:1 1 140px;min-width:0}
.campos-personalizar .nota{margin:0}
body.publico .loja-ficha .pedir-form > .botao.grande, body.publico .campos-personalizar .botao.grande{
  width:auto;min-width:200px;min-height:44px;margin:0;padding:0 22px;font-size:14px;font-weight:600;
  border-radius:10px}
.entrega-ficha{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:16px 0 0;
  font-size:12px;color:var(--texto-2)}
.entrega-ficha .disponibilidade{margin:0}
.info-ficha{margin:20px 0 0;padding:14px 0 0;border-top:1px solid var(--borda);
  display:grid;gap:8px}
.info-ficha div{display:grid;grid-template-columns:120px 1fr;gap:10px;font-size:13.5px}
.info-ficha dt{color:var(--texto-2)}
.info-ficha dd{margin:0;color:var(--loja-texto,var(--texto))}
.relacionados{margin-top:120px}
.relacionados .grade-vitrine{grid-template-columns:repeat(4,minmax(0,264px));gap:16px}
.loja-pausada{margin:48px auto;max-width:560px}

/* ------------------------------------------------- a seção dos produtos */
.cabeca-produtos{
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:16px;
}
.cabeca-produtos .contagem{margin:0}
.controles-produtos{display:flex;gap:10px;align-items:center}
.ordem-loja select{
  height:40px;padding:0 11px;font:inherit;font-size:14px;
  border:1px solid var(--linha);border-radius:8px;background:var(--mesa);color:var(--tinta);
}
.corpo-produtos{display:grid;gap:26px;align-items:start}
.corpo-produtos > *{min-width:0}
@media (min-width:1024px){.corpo-produtos{grid-template-columns:235px 1fr}}
.coluna-filtro{
  background:var(--mesa);border:1px solid var(--linha);border-radius:12px;
  padding:18px;position:sticky;top:96px;
}
.coluna-filtro h3{font-size:15.5px;margin:0 0 14px}

.peneira-loja{display:flex;flex-direction:column;gap:16px}
.campo-loja{display:flex;flex-direction:column;gap:5px}
.campo-loja span{font-size:12px;font-weight:600;color:var(--suave)}
.campo-loja input{
  width:100%;height:38px;padding:0 11px;font:inherit;font-size:14px;
  border:1px solid var(--linha);border-radius:7px;background:var(--mesa-2);color:var(--tinta);
}
.grupo-filtro{border:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.grupo-filtro legend{
  padding:0;font-size:12px;font-weight:600;color:var(--suave);margin-bottom:7px;
}
.opcao-filtro{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.opcao-filtro input{margin:0;accent-color:var(--loja-secundaria,var(--azul))}
.acoes-peneira{display:flex;gap:8px;flex-wrap:wrap}
.acoes-peneira .botao{flex:1 1 auto;justify-content:center;text-align:center}
.loja-publica .acoes-peneira .botao:not(.vazado){background:var(--loja-secundaria,var(--primaria));
  border-color:var(--loja-secundaria,var(--primaria))}

/* A gaveta "Filtrar" do telefone. `<details>`, e não JavaScript: abre e
   fecha pelo teclado sozinha, e sem script continua servindo. */
.gaveta-filtro{position:relative}
.gaveta-filtro > summary{list-style:none;cursor:pointer}
.gaveta-filtro > summary::-webkit-details-marker{display:none}
/* Fechada, a gaveta SOME -- e isso se declara, não se herda. A regra do
   navegador para `<details>` fechado não alcançou este filho: medido, ele
   continuava com 673 px de caixa por cima da grade, com o `<details>`
   fechado e o HTML inteiramente correto. É a mesma lição do `[hidden]`:
   regra fraca do navegador é regra que qualquer coisa derruba. */
.gaveta-filtro:not([open]) .dentro-gaveta{display:none}
.dentro-gaveta{
  position:absolute;right:0;top:calc(100% + 6px);z-index:40;width:min(86vw,300px);
  background:var(--mesa);border:1px solid var(--linha-forte);border-radius:12px;
  padding:16px;box-shadow:var(--sombra-m);
}

/* O selo de destaque, sobre a foto. */
.selo-destaque{
  position:absolute;left:9px;top:9px;z-index:2;
  background:var(--loja-secundaria,var(--laranja));color:var(--branco);border-radius:5px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;
}

/* ------------------------------------------------------------- rodapé
   O rodapé ESCURO do Figma "Catálogo Comercial": o nome da loja em branco
   com o slogan, os links numa linha e "Fale com a Morumbi 3D" à direita.
   O nome vai escrito, e não o logo: o logo oficial é desenhado para fundo
   claro e sumiria aqui. */
.rodape-loja{margin-top:80px;padding:50px 0 0;background:var(--loja-rodape,var(--navy));
  color:var(--loja-escuro-texto,var(--branco))}
.colunas-rodape{display:grid;gap:28px;grid-template-columns:minmax(0,358px) minmax(0,1fr) auto;
  align-items:start}
.marca-rodape{display:flex;flex-direction:column;gap:8px}
.nome-rodape{font-size:20px;font-weight:700;color:var(--branco);text-decoration:none}
.marca-rodape > span{font-size:13px;color:var(--loja-escuro-texto,var(--branco))}
.marca-rodape p{margin:4px 0 0;font-size:13px;color:var(--loja-escuro-texto,var(--branco));max-width:40ch}
.links-rodape{display:flex;flex-wrap:wrap;gap:8px 28px;padding-top:5px}
.links-rodape a{font-size:13px;font-weight:400;color:var(--loja-escuro-texto,var(--branco));text-decoration:none}
.links-rodape a:hover{color:var(--branco);text-decoration:underline}
.contato-rodape{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding-top:5px;
  font-size:12.5px;color:var(--loja-escuro-texto,var(--branco))}
.contato-rodape > b{font-size:14px;font-weight:600;color:var(--branco)}
/* O verde do WhatsApp no rodapé -- o `--sucesso` da casa, que passa no AA
   com texto branco (o verde do desenho não passa). */
.botao.zap-rodape{background:var(--sucesso);border-color:var(--sucesso);color:var(--branco);
  min-height:44px;gap:8px}
.botao.zap-rodape .zap{background:currentColor}
.redes-loja{display:flex;gap:14px;flex-wrap:wrap}
.redes-loja a{color:var(--loja-escuro-texto,var(--branco));text-decoration:none;font-weight:500}
.redes-loja a:hover{color:var(--branco);text-decoration:underline}
.legal-rodape{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:72px;padding:22px 24px 28px;border-top:1px solid var(--loja-escuro-borda,var(--borda));
  font-size:11.5px;color:var(--loja-escuro-texto,var(--branco))}
@media (min-width:1369px){.legal-rodape{padding-left:0;padding-right:0}}

@media (prefers-reduced-motion: reduce){
  .cartao-vitrine, .cartao-vitrine:hover{transition:none;transform:none}
  .cartao-categoria{transition:none}
}

/* ------------------------------------------- Produtos no telefone
   Depois de tudo, de propósito. A regra de 44 px e a de largura têm a mesma
   especificidade: escrita antes, a de toque perde por ordem de fonte. */
@media (max-width:1023px){
  .cabecalho-produtos .botao{min-height:44px}
  .indicador{min-height:44px}
  .peneira-produtos select, .peneira-produtos .limpar,
  .peneira-clientes select, .peneira-clientes .limpar, .peneira-clientes .botao{min-height:44px}
  .acoes-painel-cliente .botao, .formulario-gaveta .botao{min-height:44px}
  .paginas a{min-width:44px;height:44px}
  .menu-acoes > summary{width:44px;height:44px}
  .gaveta-acoes a, .gaveta-acoes button{min-height:44px;display:flex;align-items:center}
  .abas-painel button{min-height:44px}
  .fechar-painel{width:44px;height:44px}
  /* A caixa de seleção é o alvo mais apertado da tela: 24 px desenhados,
     e o dedo precisa de 44. Mesma saída das setas da vitrine -- cresce a
     ÁREA e não o desenho. A caixa vira um alvo de 44 px transparente com o
     quadradinho pintado por dentro, e o teste mede o ELEMENTO, então
     enfeitar por cima com `::after` não resolveria. */
  /* `table.tabela-produtos td.marca` e nao so `.tabela-produtos`: a regra
     do cartao (`table.tabela td.marca input`) tem tres elementos e ganhava
     da minha, mesmo estando mais acima no arquivo. Especificidade decide
     antes da ordem -- e so a ordem eu tinha conferido. */
  table.tabela-produtos td.marca input[type=checkbox],
  table.tabela-produtos th.marca input[type=checkbox]{
    appearance:none;-webkit-appearance:none;
    width:44px;height:44px;margin:0;border:none;background:none;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
  }
  table.tabela-produtos td.marca input[type=checkbox]::before,
  table.tabela-produtos th.marca input[type=checkbox]::before{
    content:"";width:22px;height:22px;border-radius:4px;
    border:1.5px solid var(--linha-forte);background:var(--mesa);
    display:flex;align-items:center;justify-content:center;
    color:var(--branco);font-size:15px;font-weight:700;line-height:1;
  }
  table.tabela-produtos td.marca input[type=checkbox]:checked::before,
  table.tabela-produtos th.marca input[type=checkbox]:checked::before{
    content:"✓";background:var(--azul);border-color:var(--azul);
  }
}

@media (max-width:767px){
  /* A linha vira cartão, e o cartão mostra o MESMO que a linha — é a regra
     da casa desde o U3. A miniatura e o SKU sobem junto com o nome, e nada
     é escondido com `display:none`: o que não cabe na largura passa a caber
     na altura. */
  .placar-produtos{grid-template-columns:repeat(2,1fr);gap:10px}
  .indicador{padding:12px 13px}
  .indicador .numero{font-size:23px}
  .indicador .titulo{font-size:12.5px}
  .indicador .detalhe{font-size:11px}
  .peneira-produtos .filtro{flex:1 1 46%}
  .peneira-produtos select{width:100%}
  /* Os filtros de Clientes viram uma FAIXA que corre de lado (§21: "filtros
     horizontais"). Quem rola é a faixa, com a largura presa à da tela --
     a página em si não ganha um pixel de largura. */
  .filtros-clientes{
    display:flex;gap:8px;overflow-x:auto;width:100%;max-width:100%;
    padding-bottom:4px;scrollbar-width:thin;
    /* Sem isto a faixa rolava e a PÁGINA esticava 322 px mesmo assim: o
       rótulo `.sr` de cada filtro é `position:absolute`, e elemento
       posicionado só é recortado pela faixa se ela for o pai de referência
       dele. Ele escapava para o <body> e alargava a tela. */
    position:relative;
  }
  .filtros-clientes .filtro{flex:0 0 auto}
  .placar-clientes{grid-template-columns:repeat(2,1fr)}

  table.tabela-produtos tbody td{height:auto}
  table.tabela-produtos td.estado{white-space:normal}
  .tabela-produtos .identidade b{white-space:normal;overflow:visible}
  table.tabela-produtos td.chave{font-size:17px;font-weight:600}
  .tabela-produtos .identidade b{font-size:17px}
  /* O menu de ações é o último item do cartão e ocupa a largura toda: no
     telefone ele é o botão do cartão, e não um ⋮ perdido no canto. */
  table.tabela-produtos td.acao{display:block;padding:10px 0 0;border-bottom:none}
  .tabela-produtos .menu-acoes{display:block}
  .tabela-produtos .menu-acoes > summary{
    width:100%;min-height:44px;border:1px solid var(--linha-forte);border-radius:5px;
  }
  .tabela-produtos .menu-acoes > summary::after{content:"Ações";font-size:15px;margin-left:6px}
  .gaveta-acoes{left:0;right:0;min-width:0}
  .barra-lote{position:sticky;bottom:0;z-index:20}
  .barra-lote .botao{flex:1 1 40%;min-height:44px}
  .painel-produto{width:100%;border-left:none}
  .numeros-painel{gap:10px 12px}
}

/* Preço sugerido: o número continua, mas não se disfarça de preço combinado. */
.sugerido{color:var(--suave);font-weight:500;display:inline-flex;align-items:baseline;gap:5px}
.sugerido small{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}

/* ------------------------------- Editar Produto no telefone e no tablet
   No fim do arquivo, de propósito: a regra de 44 px e a de largura têm a
   mesma especificidade, e escrita antes a de toque perde por ordem de fonte.
   Já aconteceu duas vezes nesta folha. */
@media (max-width:1023px){
  .acoes-cabecalho .botao{min-height:44px}
  /* O caminho de volta é um link de NAVEGAÇÃO, e não um link no meio de uma
     frase: aqui esticar não destrói parágrafo nenhum. */
  .trilha{min-height:44px;align-items:center}
  .trilha a{display:flex;align-items:center;min-height:44px}
  /* Os campos desta tela. Escopado em `.editar-produto` de propósito: os
     outros cadastros nunca foram MEDIDOS num navegador de 420 px, e soltar
     uma regra global sobre sete telas que nenhum teste olha é trocar um
     defeito visto por seis que ninguém viu. */
  .editar-produto .campo input, .editar-produto .campo select{min-height:44px}
  .tira-aba{min-height:44px;display:flex;align-items:center}
  .acoes-midia .botao{min-height:44px}
  .ver-filme-painel{min-height:44px}
  .cartaz-filme{min-height:44px}

  /* A tira de mídia vira LISTA. Com 64 px de miniatura não há como pôr três
     botões de 44 px por cima sem tapar a foto -- então cresce a área: cada
     mídia ocupa a linha inteira e os botões descem para o lado, no tamanho
     que o dedo acerta. É a mesma saída das setas da vitrine. */
  .tira-midia{flex-direction:column;gap:9px}
  .peca-midia{
    width:100%;height:64px;display:flex;align-items:center;
    padding-right:100px;
  }
  .peca-midia img{width:96px;height:100%;flex:0 0 96px}
  .marca-play{inset:0 auto 0 0;width:96px}
  .tirar-midia, .virar-capa, .peca-midia .ver-filme{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;bottom:auto;border-radius:6px;font-size:15px;
  }
  .tirar-midia{right:4px}
  .virar-capa{right:52px;left:auto}
  .peca-midia .ver-filme{right:52px;left:auto;padding:0;font-size:11px}
  .peca-midia .selo-capa{left:104px;top:50%;transform:translateY(-50%)}
  .peca-midia .duracao{left:4px;bottom:4px}
}

/* ----------------------------------------------- A loja no telefone (390 px)
   §22: o celular é uma experiência ADAPTADA, e não o computador encolhido.
   O cabeçalho vira marca + lupa + menu, o hero fica vertical com um quadro
   só, as categorias vão a três por linha, os cartões a dois, os passos
   viram lista e os benefícios uma faixa curta.

   No fim do arquivo de propósito: a regra de 44 px e a de largura têm a
   mesma especificidade, e escrita antes a de toque perde por ordem de fonte. */
@media (max-width:1023px){
  .so-computador{display:none}
  /* A gaveta "Filtrar" aparece onde a coluna some -- de 768 a 1023 px
     nenhuma das duas aparecia. */
  .controles-produtos .gaveta-filtro{display:block}
  .largura-loja{padding:0 16px}
  .topo-dentro{min-height:64px;gap:10px}
  .botoes-celular{display:flex;gap:2px;margin-left:auto}
  /* O menu e a busca viram painéis abaixo do cabeçalho. Abrem pelo botão
     (`.aberto`, de loja.js) ou, sem script, pelo `:target` do link. */
  .nav-loja, .busca-topo{display:none;position:absolute;left:-16px;right:-16px;top:100%;
    background:var(--superficie);border-bottom:1px solid var(--borda);box-shadow:var(--sombra-m);
    padding:8px 16px 14px;margin:0;z-index:31}
  .nav-loja.aberto, .nav-loja:target{display:flex;flex-direction:column;gap:2px}
  .busca-topo.aberto, .busca-topo:target{display:block;flex:none}
  .nav-loja a{min-height:44px;display:flex;align-items:center;font-size:15px}
  .nav-loja .so-celular{display:inline-flex;justify-content:center;margin-top:8px}
  .busca-topo input{min-height:46px;font-size:16px}
  .lupa-busca{right:18px;width:44px;height:44px}
  /* `.topo-loja .zap-topo` e não só `.zap-topo`: `.botao.pedir` tem duas
     classes e o `display:inline-flex` dele ganhava. */
  .topo-loja .zap-topo{display:none}
  .marca-loja{min-height:44px}
  .ver-todos{min-height:44px}
  .trilha-loja a{min-height:44px;display:inline-flex;align-items:center}
  .ordem-loja select{min-height:44px}
  .gaveta-filtro > summary{min-height:44px;display:flex;align-items:center}
  .peneira-loja input{min-height:44px}
  /* O alvo do rádio é o RÓTULO inteiro, e não a bolinha de 13 px: cresce a
     área e não o desenho, como as setas da galeria. */
  .opcao-filtro{min-height:44px}
  .acoes-peneira .botao{min-height:44px}
  .links-rodape a, .redes-loja a{min-height:44px;display:flex;align-items:center}
  .links-rodape{gap:0 20px}
  .faixa-previa a{min-height:44px;display:inline-flex;align-items:center}
  .hero-loja{grid-template-columns:1fr;min-height:0}
  .texto-hero{padding:28px 24px 32px}
  .visual-hero{min-height:185px;order:-1}
  .visual-hero.com-foto{padding:16px;gap:12px}
  .grade-ocasioes{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .loja-inicio .grade-vitrine, .relacionados .grade-vitrine{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .bloco-ideia{grid-template-columns:1fr;padding:28px 24px}
  .quadro-festas{grid-template-columns:1fr}
  .foto-festas{min-height:220px}
  .texto-festas{padding:28px 24px}
  .passos{grid-template-columns:repeat(2,minmax(0,1fr));padding:28px 24px}
  .loja-ficha .ficha-vitrine{grid-template-columns:1fr;gap:24px}
  .atalho-festa{min-height:44px}
  .nome-rodape{min-height:44px;display:inline-flex;align-items:center}
  .opcao-cor{min-height:44px}
  .ver-todos{min-height:44px}
}

@media (max-width:767px){
  .so-largo{display:none}
  .so-estreito{display:inline}
  .hero-loja{margin-top:24px;border-radius:22px}
  .texto-hero{padding:24px 24px 26px}
  .hero-loja .chamada{font-size:10px;margin-bottom:12px}
  .hero-loja h1{font-size:34px;margin-bottom:14px}
  .corpo-hero{font-size:13px;margin-bottom:18px}
  /* Os dois botões lado a lado quando cabem; o texto do segundo é do
     Samir, e quando ele não cabe os dois descem, cada um numa linha. */
  .acoes-hero{gap:12px}
  body.publico .acoes-hero .botao.grande{flex:1 1 auto;justify-content:center;padding:0 14px;
    min-height:44px;white-space:nowrap;font-size:13px}
  .visual-hero{border-radius:22px}
  .circulo-hero.um{width:150px;height:150px;right:40px;top:16px}
  .circulo-hero.dois{width:96px;height:96px;right:30px;top:86px}
  .quadro-hero[data-segundo]{display:none}
  .visual-hero.com-foto{grid-template-columns:1fr}
  .quadro-hero{aspect-ratio:16/9}
  .carrossel{margin-top:14px;border-radius:18px}
  .banner-loja{aspect-ratio:1080/1350;max-height:none}
  .texto-banner{max-width:none;justify-content:flex-end;padding:18px 18px 56px;
    background:linear-gradient(0deg,var(--veu-banner),transparent)}
  body.publico .texto-banner .botao.grande{width:100%;justify-content:center}
  .seta-banner{display:none}
  .logo-loja{max-width:140px}
  .secao-loja{margin-top:32px}
  .titulo-secao{font-size:24px}
  .grade-ocasioes{grid-template-columns:1fr;gap:14px}
  .cartao-ocasiao{min-height:110px;padding:18px 44px 18px 20px}
  .texto-ocasiao small{margin-top:10px}
  .seta-ocasiao{top:50%;bottom:auto;transform:translateY(-50%)}
  .grade-categorias{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .cartao-categoria{min-height:96px;padding:14px 8px 10px;border-radius:12px}
  .cartao-categoria small{display:none}
  .cartao-categoria b{font-size:11.5px}
  /* Um cartão por linha, como o frame de 390 px: a foto inteira e o nome
     sem cortar. */
  .loja-inicio .grade-vitrine, .relacionados .grade-vitrine{grid-template-columns:1fr;gap:14px}
  .bloco-ideia{padding:28px 24px 24px;gap:22px;border-radius:22px}
  .icone-ideia{margin-bottom:14px}
  .bloco-ideia h2{font-size:24px}
  .bloco-ideia p{font-size:14px}
  .passos-ideia{grid-template-columns:repeat(2,minmax(0,1fr));padding:20px 12px;row-gap:18px}
  body.publico .bloco-ideia .botao.grande, body.publico .quadro-festas .botao.grande,
  body.publico .bloco-empresas .botao.grande{width:100%;justify-content:center;white-space:normal;
    text-align:center}
  .texto-festas{padding:24px 20px}
  .chamada-festas{font-size:20px}
  .atalhos-festas{gap:10px;margin-bottom:24px}
  .atalho-festa{min-width:0}
  .bloco-empresas{padding:30px 24px;min-height:0}
  .bloco-empresas h2{font-size:24px}
  .passos{grid-template-columns:1fr;gap:20px;padding:24px 20px}
  .faixa-local{padding:28px 20px;min-height:0}
  .faixa-local h2{font-size:20px}
  .selos-local li{min-width:0}
  .titulo-lista{font-size:24px}
  .busca-lista .botao{padding:0 14px}
  .colunas-rodape{grid-template-columns:1fr;gap:18px}
  .rodape-loja{padding-top:32px;margin-top:40px}
  .legal-rodape{flex-direction:column;padding:18px 16px 24px;margin-top:24px}
  .loja-ficha .nome-ficha{font-size:26px}
  .loja-ficha .preco-vitrine.grande{margin-top:18px;font-size:26px}
  .loja-ficha .pedir-form{margin-top:24px}
  .loja-ficha .personalizar > summary, body.publico .loja-ficha .pedir-form > .botao.grande,
  body.publico .campos-personalizar .botao.grande{width:100%;justify-content:center}
  .relacionados{margin-top:48px}
  /* A LISTA continua com duas colunas: ali a pessoa procura, e uma coluna
     só faz rolar o dobro para ver a mesma vitrine. A home, que convida,
     segue o Figma com um cartão por linha (regra acima). */
  .grade-vitrine{grid-template-columns:repeat(2,1fr);gap:10px}
  .grade-vitrine .cartao-vitrine{padding:10px}
  .grade-vitrine .cartao-vitrine h3{font-size:14px}
  .grade-vitrine .cartao-vitrine .resumo{display:none}
  .grade-vitrine .cartao-vitrine .preco-vitrine{font-size:15px}
  .grade-vitrine .selo-cartao{font-size:10px;padding:0 8px;max-width:100%;overflow:hidden;
    text-overflow:ellipsis}
  .loja-inicio .grade-vitrine .cartao-vitrine, .relacionados .grade-vitrine .cartao-vitrine{padding:16px}
  .loja-inicio .grade-vitrine .cartao-vitrine h3, .relacionados .grade-vitrine .cartao-vitrine h3{font-size:17px}
  .loja-inicio .grade-vitrine .preco-vitrine, .relacionados .grade-vitrine .preco-vitrine{font-size:17px}
}

/* ------------------------------------------------------------ Pedidos (S7)
   A lista reaproveita o cabeçalho, os indicadores, a peneira e a gaveta de
   Produtos e Clientes. Aqui só o que é dela: as abas com contagem, a barra
   de produção, a linha do tempo e as três etapas do novo pedido.

   No fim do arquivo de propósito: as regras de telefone daqui empatam em
   especificidade com as de cima, e empate se decide pela ordem. */
.placar-pedidos{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* Sete abas não cabem numa linha de tela média: a faixa corre de lado, e
   quem rola é ela -- a página não ganha largura. */
.abas-pedidos{
  margin:0 0 14px;overflow-x:auto;max-width:100%;flex-wrap:nowrap;
  padding-bottom:2px;position:relative;
}
.abas-pedidos a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

.peneira-pedidos .filtro-data input{min-width:0}
.tabela-pedidos td[data-rotulo="Pedido"] .fraco{display:block;font-size:11.5px}
.tabela-pedidos td.chave .fraco{display:block;font-size:12px}
.tabela-pedidos tr.inativo td{color:var(--suave)}

/* A linha do tempo da produção, na gaveta. Feito em verde, o passo atual em
   azul, o que falta em cinza: dá para ler de longe sem ler o texto. */
.linha-do-tempo{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:0}
.linha-do-tempo li{
  position:relative;padding:6px 0 6px 26px;font-size:14px;color:var(--suave);
}
.linha-do-tempo li::before{
  content:"";position:absolute;left:5px;top:10px;width:10px;height:10px;border-radius:50%;
  background:var(--mesa);border:2px solid var(--linha-forte);
}
.linha-do-tempo li:not(:last-child)::after{
  content:"";position:absolute;left:10px;top:22px;bottom:-6px;width:2px;background:var(--linha);
}
.linha-do-tempo li.feito{color:var(--tinta)}
.linha-do-tempo li.feito::before{background:var(--verde);border-color:var(--verde)}
.linha-do-tempo li.aqui{color:var(--azul);font-weight:600}
.linha-do-tempo li.aqui::before{background:var(--azul);border-color:var(--azul)}
.alterar-situacao{border-top:1px solid var(--linha);margin-top:18px;padding-top:14px}
.alterar-situacao h4, .titulo-etapa{margin:0;font-size:14.5px}

/* O novo pedido: três etapas numa gaveta só. */
.etapas-pedido{
  list-style:none;margin:0 0 16px;padding:0;display:flex;gap:6px;counter-reset:etapa;
}
.etapas-pedido li{
  flex:1 1 0;min-width:0;counter-increment:etapa;font-size:12.5px;color:var(--suave);
  padding:6px 0 0;border-top:3px solid var(--linha);
}
.etapas-pedido li::before{content:counter(etapa) ". "}
.etapas-pedido li.feito{border-top-color:var(--verde);color:var(--tinta)}
.etapas-pedido li.aqui{border-top-color:var(--azul);color:var(--azul);font-weight:600}
.achados{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.achados:empty{display:none}
.achado{
  width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  display:flex;flex-direction:column;gap:1px;padding:8px 11px;min-height:44px;
  background:var(--mesa);border:1px solid var(--linha);border-radius:6px;
}
.achado:hover, .achado:focus-visible{border-color:var(--azul)}
.achado .fraco{font-size:12.5px}
.itens-novo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.item-novo{
  border:1px solid var(--linha);border-radius:8px;padding:10px 12px;
  display:flex;flex-direction:column;gap:8px;
}
.item-novo .campo{margin:0}
.item-novo .linha > .campo{flex:1 1 90px;min-width:0}
.cabeca-item{display:flex;align-items:center;gap:8px}
.cabeca-item b{flex:1 1 auto;min-width:0}
.cliente-escolhido{
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:8px;
  background:var(--azul-fundo);border:1px solid var(--azul);
}
.cliente-novo, .tipos-pedido{border:1px solid var(--linha);border-radius:8px;padding:10px 12px;margin:0}
.cliente-novo{display:flex;flex-direction:column;gap:10px}
.cliente-novo[hidden]{display:none}
.cliente-novo legend, .tipos-pedido legend{font-size:12.5px;color:var(--suave);padding:0 4px}
.tipos-pedido{display:flex;flex-wrap:wrap;gap:6px 14px}
.tipo-pedido{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:14.5px}
.modal-clientes{
  width:min(440px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 32px));
  border:1px solid var(--linha);border-radius:10px;padding:16px 18px;
  background:var(--mesa);color:var(--tinta);
}
.modal-clientes::backdrop{background:var(--veu)}
.modal-clientes .achados{margin-top:10px}

@media (max-width:1023px){
  .abas-pedidos a{min-height:44px}
  .tabela-pedidos td[data-rotulo="Pedido"] a{display:inline-flex;align-items:center;min-height:44px}
  .peneira-pedidos input[type=date]{min-height:44px}
  .tipo-pedido{min-height:44px}
  .alterar-situacao select, .alterar-situacao input, .alterar-situacao .botao,
  .novo-pedido .botao, .novo-pedido input, .modal-clientes input{min-height:44px}
  .tirar{min-width:44px;min-height:44px}
}

/* Os botões de situação da página do pedido: no telefone cada um ocupa a
   linha, em vez de um "Voltar para orçamento" empurrar a página de lado. */
.acoes-situacao{flex-wrap:wrap}
.acoes-situacao form{max-width:100%}
.acoes-situacao .botao{white-space:normal}

@media (max-width:767px){
  .acoes-situacao form{flex:1 1 100%}
  .acoes-situacao .botao{width:100%;justify-content:center}
  .placar-pedidos{grid-template-columns:repeat(2,1fr)}
  table.tabela-pedidos td.chave{font-size:17px;font-weight:600}
  table.tabela-pedidos td.acao{display:block;padding:10px 0 0;border-bottom:none}
  .tabela-pedidos .menu-acoes{display:block}
  .tabela-pedidos .menu-acoes > summary{
    width:100%;min-height:44px;border:1px solid var(--linha-forte);border-radius:5px;
  }
  .tabela-pedidos .menu-acoes > summary::after{content:"Ações";font-size:15px;margin-left:6px}
}

/* =========================================================== Dashboard V1
   Duas colunas no computador, uma no telefone. Os números vêm prontos do
   servidor; aqui é só a forma. */
.dash-duas{display:grid;gap:var(--e16);grid-template-columns:repeat(2,minmax(0,1fr));
  margin-bottom:var(--e16)}
.dash-duas > .cartao{margin:0;min-width:0}
.dash-duas .cartao-tabela .cabeca-cartao{padding:var(--e20) var(--e24) 0}
.dash-duas .cartao-tabela .cartao-vazio{border:none;padding:var(--e32) var(--e24)}
table.lista-curta{min-width:0}
.receita-meses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);
  gap:var(--e8);align-items:end;height:220px}
.receita-meses li{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0}
.receita-meses .trilho{flex:1 1 auto;width:100%;max-width:44px;display:flex;align-items:flex-end;
  border-radius:var(--r-p) var(--r-p) 0 0}
.receita-meses .trilho i{display:block;width:100%;background:var(--primaria-borda);
  border-radius:var(--r-p) var(--r-p) 0 0}
.receita-meses li.atual .trilho i{background:var(--primaria)}
.receita-meses .mes{order:2;font-size:var(--t-legenda);color:var(--texto-2)}
.receita-meses .valor{order:-1;font-size:11px;color:var(--texto-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.receita-meses li.atual .mes, .receita-meses li.atual .valor{color:var(--texto);font-weight:600}
.status-pedidos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.status-pedidos a{display:grid;grid-template-columns:170px 1fr 36px;align-items:center;gap:var(--e12);
  min-height:36px;padding:0 var(--e8);border-radius:var(--r-m);text-decoration:none;color:var(--texto)}
.status-pedidos a:hover{background:var(--superficie-2)}
.status-pedidos .trilho{display:block;height:8px;border-radius:var(--r-pilula);background:var(--neutro-fundo);
  overflow:hidden}
.status-pedidos .trilho i{display:block;height:100%;border-radius:var(--r-pilula);background:var(--neutro)}
.status-pedidos .trilho i.azul{background:var(--info)}
.status-pedidos .trilho i.verde{background:var(--sucesso)}
.status-pedidos .trilho i.ambar{background:var(--atencao)}
.status-pedidos .trilho i.vermelha{background:var(--perigo)}
.status-pedidos b{text-align:right}
.status-pedidos .etiqueta{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.visao-seletor{display:flex;border:var(--borda-padrao);border-radius:var(--r-m);overflow:hidden;
  background:var(--superficie)}
.visao-aba{padding:0 var(--e16);font-size:13px;font-weight:500;text-decoration:none;
  color:var(--texto-2);min-height:var(--controle);display:inline-flex;align-items:center}
.visao-aba:hover{background:var(--superficie-2);color:var(--texto)}
.visao-aba.ativa{background:var(--primaria-fundo);color:var(--primaria)}
@media (max-width:1023px){
  .dash-duas{grid-template-columns:minmax(0,1fr)}
  .status-pedidos a{min-height:var(--alvo)}
  table.lista-curta td a{min-height:var(--alvo);display:inline-flex;align-items:center}
  .visao-aba{min-height:var(--alvo)}
}
@media (max-width:767px){
  .status-pedidos a{grid-template-columns:168px minmax(40px,1fr) 28px}
  .receita-meses{height:180px}
}

/* ======================================================== Catálogo 2.0: admin
   As telas de configuração da vitrine. Componentes do ds.css; aqui só o que
   é destas telas: a lista que se ordena, o envio de imagem com área segura,
   os temas e a prévia. */
.abas-catalogo{margin:0 0 var(--e24)}
.abas-filtro, .abas-partes{margin:0 0 var(--e16)}

/* ---- lista ordenável: alça, setas, posição, conteúdo, estado, ações */
.lista-ordem{list-style:none;margin:0 0 var(--e16);padding:0;display:flex;flex-direction:column;
  gap:var(--e8)}
.lista-ordem > li{
  display:flex;align-items:center;gap:var(--e12);flex-wrap:wrap;
  background:var(--superficie);border:var(--borda-padrao);border-radius:var(--r-g);
  padding:var(--e12) var(--e16);
}
.lista-ordem > li:focus-visible{outline:2px solid var(--primaria);outline-offset:2px}
.lista-ordem > li.arrastando{opacity:.55;border-style:dashed}
.lista-ordem > li.desligada{background:var(--superficie-2)}
.lista-ordem > li.desligada .corpo-ordem{opacity:.7}
.alca{color:var(--texto-3);cursor:grab;display:inline-flex}
.botoes-ordem{display:inline-flex;flex-direction:column}
.botoes-ordem .botao-icone{width:28px;height:22px}
.botoes-ordem .botao-icone:disabled{opacity:.3;cursor:default}
.botoes-ordem .icone{width:16px;height:16px}
.posicao{min-width:24px;height:24px;border-radius:var(--r-pilula);background:var(--neutro-fundo);
  color:var(--texto-2);font-size:12px;font-weight:600;display:inline-flex;align-items:center;
  justify-content:center}
.corpo-ordem{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:2px}
.corpo-ordem .nota{margin:0}
.corpo-ordem .campo{margin:0}
.campo-limite{width:96px;margin:0}
.interruptor{display:inline-flex;align-items:center;gap:var(--e8);font-size:13px;font-weight:500;
  cursor:pointer;min-width:104px}
/* O interruptor é a caixa de seleção desenhada como chave: trilho e bolinha
   por `::before`/`::after`. No telefone o ELEMENTO cresce para 44 px e o
   desenho fica do mesmo tamanho (a regra das setas da vitrine).
   `label.interruptor > input[type=checkbox]` tem 0,2,2 -- o mesmo peso de
   `body.bancada input[type=checkbox]` do ds.css, e ganha por vir depois. */
label.interruptor > input[type=checkbox]{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;
  width:40px;height:24px;margin:0;cursor:pointer;background:none;border:0}
label.interruptor > input[type=checkbox]::before{
  content:"";position:absolute;left:0;top:50%;width:40px;height:24px;margin-top:-12px;
  border-radius:12px;background:var(--borda-forte);transition:background .15s ease}
label.interruptor > input[type=checkbox]::after{
  content:"";position:absolute;left:3px;top:50%;width:18px;height:18px;margin-top:-9px;
  border-radius:50%;background:var(--branco);box-shadow:var(--sombra-p);transition:left .15s ease}
label.interruptor > input[type=checkbox]:checked::before{background:var(--primaria)}
label.interruptor > input[type=checkbox]:checked::after{left:19px}
@media (prefers-reduced-motion: reduce){
  label.interruptor > input[type=checkbox]::before,
  label.interruptor > input[type=checkbox]::after{transition:none}
}
.acoes-linha{display:flex;gap:var(--e8);flex-wrap:wrap}
.acoes-linha form{margin:0}

.miniatura-banner{display:block;width:160px;aspect-ratio:1920/900;border-radius:var(--r-m);
  overflow:hidden;background:var(--neutro-fundo);flex:none;text-decoration:none}
.miniatura-banner img{width:100%;height:100%;object-fit:cover;display:block}
.miniatura-banner span{display:flex;height:100%;align-items:center;justify-content:center;
  font-size:12px;color:var(--texto-2)}
.nome-banner{font-weight:600;color:var(--texto);text-decoration:none}
.nome-banner:hover{color:var(--primaria);text-decoration:underline}
.miniatura-produto{width:48px;height:48px;border-radius:var(--r-m);overflow:hidden;flex:none;
  background:var(--neutro-fundo);border:var(--borda-padrao)}
.miniatura-produto img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- envio de imagem: a moldura tem a PROPORÇÃO de destino, e a área
   segura é o retângulo central que nenhuma tela corta. */
.envio-imagem{display:flex;flex-direction:column;gap:var(--e8);margin-bottom:var(--e20)}
.envio-imagem[aria-busy=true]{opacity:.85}
.cabeca-envio{display:flex;flex-direction:column;gap:2px}
.moldura-envio{position:relative;border-radius:var(--r-m);overflow:hidden;
  background:var(--neutro-fundo);border:1px dashed var(--borda-forte)}
.moldura-envio.desktop{aspect-ratio:1920/900}
.moldura-envio.mobile{aspect-ratio:4/5;max-width:220px}
.moldura-envio.marca{aspect-ratio:3/1;max-width:260px;background:var(--superficie-2)}
.moldura-envio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.moldura-envio.marca img{object-fit:contain;padding:var(--e8)}
.sem-imagem{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--e12);font-size:13px;color:var(--texto-2)}
.area-segura{position:absolute;inset:12% 18%;border:1px dashed var(--vidro);
  box-shadow:0 0 0 1px var(--ponto);border-radius:var(--r-p);pointer-events:none}
.moldura-envio.mobile .area-segura{inset:18% 10%}
.progresso-envio{height:6px;border-radius:var(--r-pilula);background:var(--neutro-fundo);overflow:hidden}
.progresso-envio span{display:block;height:100%;width:0;background:var(--primaria);
  transition:width .15s ease}
.previa-banner{display:flex;gap:var(--e16);align-items:flex-start;flex-wrap:wrap}
.previa-banner figure{margin:0;display:flex;flex-direction:column;gap:6px;font-size:12px;
  color:var(--texto-2)}
.previa-banner figcaption{display:flex;align-items:center;gap:6px}
.previa-banner .quadro{position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--navy)}
.previa-banner .quadro.desktop{width:240px;aspect-ratio:1920/900}
.previa-banner .quadro.mobile{width:96px;aspect-ratio:4/5}
.previa-banner .quadro img{width:100%;height:100%;object-fit:cover;display:block}
.texto-previa{position:absolute;left:8%;bottom:10%;right:8%;display:flex;flex-direction:column;
  gap:4px;color:var(--branco);text-shadow:var(--sombra-texto);font-size:10px}
.texto-previa span{align-self:flex-start;background:var(--primaria);border-radius:var(--r-p);
  padding:1px 6px;text-shadow:none}
.quadro.mobile .texto-previa{font-size:7px}

/* ---- visão geral */
.checklist{list-style:none;margin:var(--e16) 0 0;padding:0}
.checklist li{display:flex;align-items:center;gap:var(--e12);padding:10px 0;border-top:var(--borda-padrao)}
.checklist li:first-child{border-top:none}
.marca-check{display:inline-flex;color:var(--texto-3)}
.checklist li.feito .marca-check{color:var(--sucesso)}
.rotulo-check{flex:1 1 auto;min-width:0}

/* ---- personalização */
.temas{border:none;margin:0;padding:0;display:grid;gap:var(--e8);
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.tema-opcao{display:flex;flex-direction:column;gap:var(--e8);padding:var(--e12);cursor:pointer;
  border:var(--borda-padrao);border-radius:var(--r-m);background:var(--superficie);font-weight:500}
.tema-opcao:has(input:checked){border-color:var(--primaria);box-shadow:0 0 0 1px var(--primaria)}
.tema-opcao input{position:absolute;opacity:0;pointer-events:none}
.tema-opcao:focus-within{outline:2px solid var(--primaria);outline-offset:2px}
.amostras{display:flex;gap:4px}
.amostras i{width:24px;height:24px;border-radius:50%;border:var(--borda-padrao)}
.cores-loja .campo-cor{flex:1 1 150px}
.par-cor{display:flex;gap:var(--e8);align-items:center}
.par-cor input[type=color]{width:44px;min-width:44px;height:40px;padding:2px;
  border:var(--borda-padrao);border-radius:var(--r-m);background:var(--superficie);cursor:pointer}
.previa-tokens{padding:var(--e16);border-radius:var(--r-m);background:var(--loja-fundo);
  font-family:var(--loja-fonte);color:var(--loja-texto)}
.previa-tokens .cartao-vitrine{max-width:260px}
.foto-previa{aspect-ratio:4/3;background:var(--neutro-fundo)}
.exemplo-zap{white-space:pre-wrap;font:inherit;font-size:14px;background:var(--sucesso-fundo);
  border:1px solid var(--sucesso-borda);border-radius:var(--r-m);padding:var(--e12) var(--e16);
  margin:0 0 var(--e12)}

/* ---- menu */
.item-menu{flex:1 1 280px;min-width:0}
.item-menu > summary{display:flex;align-items:center;gap:var(--e8);flex-wrap:wrap;cursor:pointer;
  list-style:none;min-height:40px}
.item-menu > summary::-webkit-details-marker{display:none}
.item-menu > summary .nota{margin:0}
.item-menu[open] > summary{margin-bottom:var(--e12)}

/* ---- prévia desktop/celular */
.seletor-previa{display:flex;gap:var(--e8);margin-bottom:var(--e16)}
.seletor-previa [aria-pressed=true]{background:var(--primaria-fundo);border-color:var(--primaria-borda);
  color:var(--primaria)}
.moldura-previa{position:relative;overflow:hidden;border:var(--borda-padrao);border-radius:var(--r-g);
  background:var(--superficie-2)}
.moldura-previa iframe{border:0;display:block;transform-origin:0 0;background:var(--branco)}
.moldura-previa[data-aparelho=celular]{max-width:392px;margin:0 auto}

@media (max-width:1023px){
  .botoes-ordem{flex-direction:row;gap:var(--e4)}
  .botoes-ordem .botao-icone{width:var(--alvo);height:var(--alvo)}
  .interruptor{min-height:var(--alvo)}
  label.interruptor > input[type=checkbox]{width:var(--alvo);height:var(--alvo)}
  /* O nome do banner é o link para editar: no telefone, a linha inteira
     do nome vira alvo. */
  .nome-banner{display:flex;align-items:center;min-height:var(--alvo)}
  .item-menu > summary{min-height:var(--alvo)}
  .tema-opcao{min-height:var(--alvo)}
  .par-cor input[type=color]{height:var(--alvo)}
  .checklist li{min-height:var(--alvo)}
}
@media (max-width:767px){
  .lista-ordem > li{padding:var(--e12)}
  .alca{display:none}
  .miniatura-banner{width:100%}
  .corpo-ordem{flex-basis:100%}
}

/* ---- categorias: a escolha do ícone, com a amostra do desenho ao lado */
.escolha-icone{display:flex;align-items:center;gap:var(--e8)}
.amostra-icone{width:40px;height:40px;flex:none;border-radius:var(--r-m);border:var(--borda-padrao);
  display:flex;align-items:center;justify-content:center;color:var(--primaria)}
.escolha-icone select{flex:1 1 auto;min-width:0}

/* ================================================= ORÇAMENTOS (módulo novo)
   Figma "Orçamentos — Lista / Novo / Montagem / Aprovação pública". As
   telas de dentro usam os tokens da casa; a página do cliente usa os da
   LOJA (o roxo do tema Morumbi), pendurados no <body> como na vitrine. */

/* ---- lista: a busca e os atalhos com o número, numa faixa só */
.peneira-orcamentos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e12);
  background:var(--superficie);border:var(--borda-padrao);border-radius:var(--r-g);
  padding:var(--e12) var(--e16);margin-bottom:var(--e16)}
.peneira-orcamentos .busca{flex:1 1 280px}
.chips-orcamento{display:flex;flex-wrap:wrap;gap:var(--e8)}
.chip-estado{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 var(--e12);
  border-radius:var(--r-pilula);font-size:13px;font-weight:500;text-decoration:none;
  background:var(--neutro-fundo);color:var(--neutro);border:1px solid transparent}
.chip-estado .conta{font-variant-numeric:tabular-nums}
.chip-estado.enviado{background:var(--info-fundo);color:var(--info)}
.chip-estado.aprovado{background:var(--sucesso-fundo);color:var(--sucesso)}
.chip-estado.expirado{background:var(--perigo-fundo);color:var(--perigo)}
.chip-estado.negociacao, .chip-estado.rascunho{background:var(--atencao-fundo);color:var(--atencao)}
.chip-estado.aqui{border-color:currentColor;font-weight:600}
.tabela-orcamentos .numero-orcamento{font-weight:600;color:var(--primaria);text-decoration:none}
.tabela-orcamentos td.chave .fraco{font-size:12px}

/* ---- novo: as três etapas e as duas colunas do Figma */
.etapas-orcamento{display:flex;flex-wrap:wrap;gap:var(--e8);list-style:none;margin:0 0 var(--e16);padding:0}
.etapas-orcamento li{padding:6px var(--e16);border-radius:var(--r-pilula);font-size:12.5px;
  background:var(--superficie);border:var(--borda-padrao);color:var(--texto-2)}
.etapas-orcamento li.aqui{background:var(--primaria-fundo);border-color:var(--primaria-borda);
  color:var(--primaria);font-weight:600}
.novo-orcamento{display:flex;flex-direction:column;gap:var(--e16)}
.novo-orcamento h3, .montagem-orcamento h3{margin:0 0 var(--e12);font-size:var(--t-cartao)}
.grade-novo-orcamento{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--e16);align-items:stretch}
.grade-novo-orcamento > *{min-width:0}
.com-selo{position:relative;display:block}
.selo-campo{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
.tipo-orcamento{margin:0;background:var(--primaria-fundo);border-color:var(--primaria-borda);
  display:flex;flex-direction:column;gap:var(--e12)}
.tipo-orcamento legend{float:left;width:100%;font-size:var(--t-cartao);font-weight:600;
  margin-bottom:var(--e4);padding:0}
.opcao-tipo{position:relative;display:flex;align-items:center;min-height:48px;padding:0 var(--e16);
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);cursor:pointer;
  font-weight:500}
/* O radio cobre o cartão inteiro, invisível: o toque de 48 px cai NELE, e o
   teclado continua trocando o tipo pelas setas. */
body.bancada .opcao-tipo input[type=radio]{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;
  cursor:pointer}
.opcao-tipo:has(input:checked){border-color:var(--primaria);color:var(--primaria);box-shadow:var(--anel-foco)}
.opcao-tipo:has(input:focus-visible){outline:2px solid var(--primaria);outline-offset:2px}
.linha-item-novo .campo-qtd, .campos-item .campo-qtd{max-width:110px}
.personalizacao{border:var(--borda-padrao);border-radius:var(--r-m);padding:var(--e12) var(--e16);margin:var(--e12) 0}
.personalizacao legend{font-weight:600;font-size:13px;padding:0 var(--e4)}
.grade-personalizacao{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--e8) var(--e12)}
.linha-fim{align-items:flex-end}
.acoes-fim{justify-content:flex-end;margin-top:var(--e12)}

/* ---- montagem */
.faixa-estado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e8);margin:-4px 0 var(--e16)}
.faixa-estado .fraco{margin:0}
.montagem-orcamento > .aviso{margin-bottom:var(--e16)}
.colunas-orcamento{grid-template-columns:minmax(0,1fr) 300px}
.coluna-principal{display:flex;flex-direction:column;gap:var(--e20)}
.bloco-cliente{border-bottom:var(--borda-padrao);padding-bottom:var(--e16)}
.bloco-cliente .rotulo-bloco{color:var(--texto-2);margin-bottom:var(--e4)}
.bloco-cliente p{margin:0}
.bloco-cliente .fraco{margin:0}
.nome-grande{font-size:18px;font-weight:500}
.nome-grande a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.itens-orcamento{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e12)}
.item-orcamento{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--e16);align-items:start;
  background:var(--superficie-2);border-radius:var(--r-m);padding:var(--e12)}
.foto-item{width:64px;height:64px;border-radius:var(--r-p);background:var(--neutro-fundo);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--texto-3)}
.foto-item img{width:100%;height:100%;object-fit:cover}
.corpo-item{display:flex;flex-direction:column;gap:2px;min-width:0}
.corpo-item .fraco{margin:0}
.campos-item{gap:var(--e8)}
.campos-item .linha{flex-wrap:wrap}
.campos-item .campo-preco{max-width:150px}
.valor-item{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.valor-item .fraco{margin:0}
.total-item{color:var(--primaria);font-weight:600}
.acoes-item{display:flex;gap:var(--e8);margin-top:var(--e8)}
.remover-item{color:var(--perigo)}
/* Na montagem, os campos do item precisam da largura inteira: o valor e os
   botões descem para uma faixa embaixo, em vez de roubar uma coluna. */
.item-orcamento.editando{grid-template-columns:64px minmax(0,1fr)}
.item-orcamento.editando .valor-item{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;
  justify-content:flex-end;gap:var(--e12);border-top:var(--borda-padrao);padding-top:var(--e8)}
.item-orcamento.editando .acoes-item{margin-top:0}
.detalhe-item summary{cursor:pointer;font-size:13px;color:var(--primaria);min-height:32px;
  display:flex;align-items:center}
.anexo-item{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--e8);margin-top:var(--e8)}
.adicionar-item{display:flex;flex-direction:column;gap:var(--e8);border-top:1px dashed var(--borda-forte);
  padding-top:var(--e12);margin-top:var(--e12)}
.adicionar-item .linha{align-items:flex-end;flex-wrap:wrap}
.observacoes-lidas{margin:0;white-space:pre-line;border:var(--borda-padrao);border-radius:var(--r-m);
  padding:var(--e12)}
.coluna-principal textarea#observacoes{width:100%}

.resumo-comercial{display:flex;flex-direction:column;gap:var(--e16)}
.numeros-resumo, .condicoes-resumo{margin:0;display:flex;flex-direction:column;gap:var(--e12)}
.numeros-resumo > div, .condicoes-resumo > div{display:flex;justify-content:space-between;align-items:center;gap:var(--e12)}
.numeros-resumo dt, .condicoes-resumo dt{color:var(--texto-2);font-size:13px}
.numeros-resumo dd, .condicoes-resumo dd{margin:0;font-weight:500;text-align:right}
.numeros-resumo .total{border-top:var(--borda-padrao);padding-top:var(--e12)}
.numeros-resumo .total dt{color:var(--texto);font-weight:700;text-transform:uppercase;font-size:13px}
.numeros-resumo .total dd{color:var(--primaria);font-size:22px;font-weight:700}
.campo-desconto{width:120px;min-height:36px;text-align:right;padding:0 var(--e8);font:inherit;
  border:1px solid var(--borda-forte);border-radius:var(--r-p);background:var(--superficie);color:var(--texto)}
.condicoes-edicao{display:flex;flex-direction:column;gap:var(--e8)}
.nota-congelado{margin:0;background:var(--primaria-fundo);color:var(--primaria);border-radius:var(--r-m);
  padding:var(--e16);font-size:13px;text-align:center}
.bloco-envio h4{margin:0 0 var(--e8);font-size:13px}
.link-publico{width:100%;font-size:12.5px;min-height:36px;padding:0 var(--e8);
  border:1px solid var(--borda-forte);border-radius:var(--r-p);background:var(--superficie-2);color:var(--texto)}
.acoes-envio{flex-wrap:wrap;margin:var(--e8) 0}
.acoes-envio .botao, .bloco-envio form .botao{flex:1 1 auto;justify-content:center}
.bloco-envio form .botao{width:100%}
.acoes-orcamento{display:flex;flex-direction:column;gap:var(--e8)}
.acoes-orcamento form, .acoes-orcamento .botao{width:100%}
.acoes-orcamento .botao{justify-content:center}
.renovar{display:flex;flex-direction:column;gap:var(--e8)}
.historico-orcamento{margin-top:var(--e16)}
.eventos-orcamento{list-style:none;margin:var(--e16) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--e8);
  font-size:13px}
.eventos-orcamento .fraco{display:block;margin:0}
.origem-orcamento{margin:-6px 0 var(--e12);font-size:13.5px;color:var(--texto-2)}

@media (max-width:1023px){
  .grade-novo-orcamento, .colunas-orcamento{grid-template-columns:minmax(0,1fr)}
  .nome-grande a{min-height:44px}
  .campo-desconto, .link-publico{min-height:44px}
  .chip-estado, .etapas-orcamento li{min-height:44px;display:inline-flex;align-items:center}
  .detalhe-item summary{min-height:44px}
}
@media (max-width:767px){
  .item-orcamento{grid-template-columns:48px minmax(0,1fr)}
  .foto-item{width:48px;height:48px}
  .valor-item{grid-column:1 / -1;align-items:stretch;text-align:left}
  .acoes-item .botao{flex:1}
  .campos-item .campo-preco, .linha-item-novo .campo-qtd, .campos-item .campo-qtd{max-width:none}
}

/* ---- a página do CLIENTE (sem senha). Os tokens são os da loja. */
.folha-orcamento{max-width:760px;margin:0 auto;padding:0 var(--e16) var(--e40);
  display:flex;flex-direction:column;gap:var(--e20);border-top:6px solid var(--loja-secundaria,var(--primaria))}
.topo-orcamento{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--e8);
  padding-top:var(--e24)}
.marca-orcamento{font-size:20px;color:var(--loja-secundaria,var(--primaria))}
.zap-orcamento{color:var(--loja-secundaria,var(--primaria));font-size:13.5px;min-height:44px;
  display:inline-flex;align-items:center}
.titulo-orcamento{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--e12);
  border-bottom:var(--borda-padrao);padding-bottom:var(--e16)}
.titulo-orcamento h1{margin:0;font-size:24px;text-transform:uppercase;letter-spacing:-.01em}
.titulo-orcamento .fraco{margin:var(--e4) 0 0;display:block}
.selo-validade{background:var(--loja-suave,var(--primaria-fundo));color:var(--loja-secundaria,var(--primaria));
  border-radius:var(--r-pilula);padding:6px var(--e16);font-size:12px;font-weight:600;text-transform:uppercase}
.folha-orcamento h2{margin:0 0 var(--e12);font-size:17px}
.itens-publicos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e12)}
.itens-publicos li{display:flex;align-items:flex-start;gap:var(--e12);background:var(--superficie-2);
  border-radius:var(--r-m);padding:var(--e16)}
.itens-publicos img{border-radius:var(--r-p);object-fit:cover;flex:none}
.itens-publicos li > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.itens-publicos .fraco{margin:0}
.itens-publicos .valor{color:var(--loja-secundaria,var(--primaria));font-size:17px;white-space:nowrap}
.somas-publicas{margin:var(--e12) 0 0;display:flex;flex-direction:column;gap:var(--e4);align-items:flex-end}
.somas-publicas > div{display:flex;gap:var(--e16);align-items:baseline}
.somas-publicas dt{color:var(--texto-2);font-size:13px}
.somas-publicas dd{margin:0}
.somas-publicas .total dt{font-weight:700;text-transform:uppercase}
.somas-publicas .total dd{font-size:22px;font-weight:700;color:var(--loja-secundaria,var(--primaria))}
.aprovar-orcamento{background:var(--loja-suave,var(--primaria-fundo));border-radius:var(--r-g);padding:var(--e20)}
.aprovar-orcamento h2{color:var(--loja-secundaria,var(--primaria))}
.aprovar-orcamento > .fraco{margin:0 0 var(--e12);display:block}
.aprovar-orcamento form{display:flex;flex-direction:column;gap:var(--e12)}
.concordo{display:flex;gap:var(--e12);align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer;
  min-height:44px}
/* A caixa tem 44 px de ALVO e 22 px de desenho: a borda transparente é a
   área do dedo, e o quadrado visível é o que sobra por dentro dela. */
.concordo input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;box-sizing:border-box;
  width:44px;height:44px;margin:-10px -4px -10px -11px;border:11px solid transparent;border-radius:15px;
  background:var(--superficie) padding-box;box-shadow:inset 0 0 0 2px var(--borda-forte);cursor:pointer}
.concordo input[type=checkbox]:checked{background:var(--loja-secundaria,var(--primaria)) padding-box;
  box-shadow:inset 0 0 0 2px var(--loja-secundaria,var(--primaria)),inset 0 0 0 6px var(--superficie)}
.concordo input[type=checkbox]:focus-visible{outline:2px solid var(--loja-secundaria,var(--primaria));
  outline-offset:-9px}
.botao-aprovar{width:100%;min-height:52px}
.nota-aprovar{margin:var(--e12) 0 0;display:block;font-size:12.5px}
.estado-orcamento{font-size:14.5px}
.condicoes-publicas{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e16);
  border-top:var(--borda-padrao);padding-top:var(--e16)}
.condicoes-publicas dt{font-weight:600;font-size:13px}
.condicoes-publicas dd{margin:var(--e4) 0 0;color:var(--texto-2);font-size:13.5px}
.observacoes-publicas{background:var(--superficie-2);border-radius:var(--r-m);padding:var(--e16)}
.observacoes-publicas p{margin:0;white-space:pre-line;color:var(--texto-2);font-size:14px}
.baixar-pdf{align-self:flex-start}
.rodape-orcamento{margin:var(--e24) 0 0;border-top:var(--borda-padrao);padding-top:var(--e16);font-size:12.5px}
@media (max-width:767px){
  .condicoes-publicas{grid-template-columns:minmax(0,1fr)}
  .titulo-orcamento h1{font-size:21px}
  .baixar-pdf{align-self:stretch}
}

/* As "Cores disponíveis" do cadastro de produto (Catálogo Comercial): as
   caixas em grade, para as onze cores da casa não virarem uma coluna
   comprida. */
.cores-produto{border:0;margin:6px 0 0;padding:0}
.cores-produto legend{padding:0;margin-bottom:6px;font-size:var(--t-rotulo);font-weight:600;
  color:var(--texto-2)}
.opcoes-cores{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:2px 12px}

/* Catálogo › Página inicial: os textos de cada bloco, dentro do item da
   lista, fechados até alguém pedir ("Editar textos"). */
.textos-secao{margin-top:var(--e8)}
.textos-secao > summary{cursor:pointer;font-size:var(--t-legenda);font-weight:600;
  color:var(--primaria);min-height:32px;display:inline-flex;align-items:center}
.campos-textos{display:grid;gap:var(--e12);margin-top:var(--e8);max-width:600px}
.ocasiao-admin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e8) var(--e12);
  border:var(--borda-padrao);border-radius:var(--r-m);padding:var(--e12);margin:0}
.ocasiao-admin legend{padding:0 var(--e4);font-size:var(--t-rotulo);font-weight:600;color:var(--texto-2)}
@media (max-width:1023px){
  .textos-secao > summary{min-height:44px}
  .ocasiao-admin{grid-template-columns:1fr}
}