/* ============================================================
   PÁGINA DE ORÇAMENTO
   ============================================================ */
/* ── O TOPO ──────────────────────────────────────────────────
   A faixa é a mesma do catálogo, e é assim que tem de ser: ela é a assinatura
   das páginas da loja, e tirá-la fazia o carrinho parecer de outro site.

   O que saiu foi o EXCESSO. A PLP já tinha passado por isto e o comentário
   dela diz por quê: o olho-de-boi repetia o breadcrumb ("Início / Catálogo"
   logo acima de "CATÁLOGO COMPLETO"). Aqui era pior — olho-de-boi + título +
   uma linha de subtítulo que ainda prometia "envie tudo de uma vez no
   WhatsApp", numa tela que agora termina em pagamento.

   Fica o padrão da PLP: caminho e título, e nada mais. Fina. */
.orc-topo {
  background:var(--grad-escuro); color:#fff;
  padding:clamp(16px,3vw,32px) 0 clamp(20px,3.5vw,40px);
  position:relative; overflow:hidden;
  /* fundo escuro: aqui o amarelo rende 12,79 de contraste e volta a ser o acento */
  --acento:var(--amarelo);
}
.orc-topo .dp-container { position:relative; z-index:1; } /* texto acima do círculo (fix "sombra" no mobile) */
.orc-topo::after {
  content:""; position:absolute; right:-10%; top:-40%;
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,rgba(59,123,234,.5),transparent 65%); pointer-events:none;
}
.orc-topo .breadcrumb { color:rgba(255,255,255,.72); }
.orc-topo .breadcrumb a:hover,
.orc-topo .breadcrumb strong { color:#fff; }
.orc-titulo { color:#fff; }
.orc-corpo { padding-block-start: var(--sp-5); }

/* ── Vazio ── */
.orc-vazio { text-align:center; max-width:460px; margin:var(--sp-10) auto; padding:var(--sp-10) var(--sp-5); }
.orc-vazio svg { color:var(--azul-200); margin:0 auto var(--sp-4); }
.orc-vazio h2 { margin-bottom:var(--sp-3); }
.orc-vazio p { color:var(--texto-suave); margin-bottom:var(--sp-6); }

/* ── Grid ── */
/* `minmax(0,1fr)` e não `1fr`: uma trilha `1fr` tem mínimo AUTO, ou seja, o
   min-content do que estiver dentro. Basta um filho declarar largura maior
   que a tela — um <input> com largura intrínseca, uma palavra longa, uma
   tabela — para a trilha crescer e a PÁGINA INTEIRA passar a rolar de lado.
   Aconteceu quando o campo de CEP entrou aqui: 458px de largura num visor de
   388. Com mínimo zero a trilha obedece a tela, e o conteúdo se vira dentro
   dela — que é o contrato que o resto desta folha já supunha. */
.orc-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:var(--sp-7); align-items:start; }
.orc-lista, .orc-aside, .orc-resumo { min-width:0; }
.orc-lista { display:flex; flex-direction:column; gap:var(--sp-4); }

/* ── Item ── */
.orc-item {
  display:flex; gap:var(--sp-4); padding:var(--sp-4); background:#fff;
  border:1.5px solid var(--borda); border-radius:var(--r-lg); box-shadow:var(--sombra-sm);
  transition:opacity var(--t), transform var(--t);
}
.orc-item.removendo { opacity:0; transform:translateX(30px); }
.orc-item-thumb { flex-shrink:0; width:96px; height:96px; border-radius:var(--r); overflow:hidden; background:var(--azul-50); }
.orc-item-thumb img { width:100%; height:100%; object-fit:cover; }
/* Packshot, mesma razão do card e da galeria: cover num quadrado cortaria a
   marca do saco. Fundo branco porque a foto já vem recortada sobre branco. */
.orc-item-thumb-un { background:#fff; }
.orc-item-thumb-un img { object-fit:contain; padding:8px; }
/* O stepper dentro do orçamento é a forma de mudar a quantidade sem voltar à
   página do produto — no item de piso esse papel é do link "Editar". */
.qtd-stepper-orc { flex:0 0 auto; }
/* ── ONDE FICARIA O STEPPER, NUMA PONTA ──────────────────────
   Ela é vendida por inteiro: não há o que aumentar nem o que diminuir. No
   lugar dos botões vai a quantidade fechada, escrita — e ela ocupa o mesmo
   canto da linha, para que uma lista com ponta e piso normal não fique em
   degrau. A borda pontilhada diz "é um valor, não um controle": sem ela o
   texto solto no lugar dos botões lê como campo que parou de funcionar. */
.orc-item-fixa {
  flex:0 0 auto; font-size:var(--fs-xs); font-weight:700; color:var(--texto-suave);
  padding:7px 12px; border:1px dashed var(--borda); border-radius:var(--r-full);
  white-space:nowrap;
}
.orc-item-cor { display:flex; align-items:center; }
.orc-item-corpo { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-3); }
.orc-item-cab { display:flex; justify-content:space-between; gap:var(--sp-3); }
.orc-item-nome { font-weight:700; font-size:var(--fs-md); line-height:1.25; }
.orc-item-nome:hover { color:var(--azul-700); }
.orc-item-sub { font-size:var(--fs-xs); color:var(--texto-suave); margin-top:var(--sp-1); }
/* Condição de encomenda no orçamento salvo: mesma escala da linha acima, mas
   em texto cheio em vez de suave — é o único aviso do item que muda o que o
   cliente pode fechar, então não pode ler como legenda secundária. */
.orc-item-encomenda { font-size:var(--fs-xs); color:var(--texto); font-weight:600; margin-top:var(--sp-1); }
.orc-item-remover { flex-shrink:0; width:34px; height:34px; border-radius:var(--r-full); background:var(--nuvem); color:var(--texto-suave); display:flex; align-items:center; justify-content:center; transition:background var(--t), color var(--t), transform var(--t); }
.orc-item-remover:hover { background:var(--vermelho-veu); color:var(--vermelho); }
.orc-item-linhas { display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-3) 0; border-top:1px solid var(--borda); border-bottom:1px solid var(--borda); }
.orc-item-linha { display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--tinta-2); }
.orc-item-linha span:last-child { font-weight:600; white-space:nowrap; }
.orc-item-rodape { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2); }
.orc-item-editar { font-size:var(--fs-sm); font-weight:700; color:var(--azul-700); }
.orc-item-editar:hover { text-decoration:underline; }
.orc-item-total { display:flex; align-items:baseline; gap:var(--sp-2); }
.orc-item-total span { font-size:var(--fs-xs); color:var(--texto-suave); }
/* Menor que o Total do carrinho, e é a ordem certa: o número que decide a
   compra é o total, não a linha. Estava em --fs-h3, MAIOR que o total do
   resumo depois que ele foi reduzido — a página tinha três protagonistas. */
.orc-item-total strong { font-family:var(--ff-display); font-size:var(--fs-base); color:var(--azul-800); overflow-wrap:anywhere; }

/* ── Resumo ── */
.orc-aside { position:sticky; top:calc(var(--h-header) + 18px); }
.orc-resumo { background:#fff; border:1.5px solid var(--borda); border-radius:var(--r-lg); padding:var(--sp-5); box-shadow:var(--sombra); }
.orc-resumo-titulo { font-size:var(--fs-h3); margin-bottom:var(--sp-4); }
.resumo-linha { display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-sm); color:var(--tinta-2); padding:var(--sp-2) 0; }
.resumo-linha span:last-child { font-weight:700; white-space:nowrap; }
.orc-resumo-total {
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-4); padding-top:var(--sp-4);
  border-top:2px solid var(--borda); font-weight:800;
}
.orc-resumo-total span:first-child { font-size:var(--fs-base); }
.orc-resumo-total span:last-child { font-family:var(--ff-display); font-size:var(--fs-h2); color:var(--azul-800); overflow-wrap:anywhere; min-width:0; }
.orc-resumo-obs { font-size:var(--fs-2xs); color:var(--texto-suave); text-align:center; margin-top:var(--sp-3); }

/* Aqui morava o `.orc-resumo-total-faixa`, que encolhia a fonte quando o
   total era um intervalo — "R$ 1.358,16 a R$ 1.368,16" não cabia na coluna
   de 360px. Não há mais total em faixa: ou existe tarifa exata e o total é
   um valor, ou a entrega é sob consulta e não entra na conta. */

/* ── ENTREGA ──────────────────────────────────────────────────
   O subtotal ganha peso porque, com entrega no meio, ele deixa de ser mais
   uma linha e passa a ser a conta que o cliente confere. */
.resumo-linha-subtotal { border-top:1px solid var(--borda); margin-top:var(--sp-2); padding-top:var(--sp-3); font-weight:600; color:var(--texto); }

/* ── COMO VOCÊ QUER RECEBER ──────────────────────────────────
   Duas opções em cartão, uma escolhida. Fica ACIMA da caixa de entrega
   porque é ela que decide o que aquela caixa diz.

   `fieldset` sem borda e `legend` sem posicionamento de navegador: os dois
   trazem estilo de origem que não combina com nada nesta folha, e o que
   interessa deles é a semântica — grupo anunciado como um só, seta do
   teclado andando entre as opções.

   O input de rádio some da vista mas NÃO do teclado (`opacity:0` sobre o
   cartão, e não `display:none`): escondido de verdade, ele deixaria de
   receber foco e a escolha viraria inalcançável sem mouse. O anel de foco é
   desenhado no cartão, via `:has()`. */
/* ── UM SEGMENTADO, NÃO DOIS CARTÕES ─────────────────────────
   Eram dois blocos de 56px empilhados, cada um com rádio, nome e nota — um
   terço da coluna para uma escolha de duas opções. Agora é um controle de
   uma linha, e a nota da opção ativa vem embaixo.

   O rádio some da vista mas continua no DOM: é ele que carrega o nome, o
   estado e o teclado. Trocá-lo por um botão custaria a navegação por setas
   que o `radiogroup` dá de graça. */
.orc-modo { border:0; padding:0; margin:var(--sp-4) 0 0; min-inline-size:0; }
.orc-modo-titulo { padding:0; font-size:var(--fs-sm); font-weight:600; color:var(--texto); margin-bottom:var(--sp-2); }
.orc-modo-opcoes {
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:#f5f7fa; border-radius:10px; padding:4px;
}
.orc-modo-op {
  display:flex; align-items:center; justify-content:center;
  min-block-size:2.5rem; border:0; border-radius:8px; background:transparent;
  cursor:pointer; transition:background var(--t,.18s) ease;
}
.orc-modo-op:hover { background:rgba(255,255,255,.6); }
/* Fora da vista, dentro do DOM: leitor de tela e teclado continuam inteiros. */
.orc-modo-op input { position:absolute; opacity:0; pointer-events:none; }
.orc-modo-corpo { display:block; min-inline-size:0; }
.orc-modo-nome { font-weight:600; font-size:var(--fs-sm); color:var(--texto-suave); }
.orc-modo-nota { display:none; }
/* A opção marcada. A classe vem do JS (o estado inicial) e o `:has()` cobre
   o clique antes do re-render — sem ele, o controle só mudaria de cor depois
   de a tela ser redesenhada, e o clique pareceria não ter funcionado. */
.orc-modo-op--ativa,
.orc-modo-op:has(input:checked) { background:#fff; box-shadow:0 1px 2px rgba(6,32,90,.10); }
.orc-modo-op--ativa .orc-modo-nome,
.orc-modo-op:has(input:checked) .orc-modo-nome { color:var(--azul-800); font-weight:700; }
.orc-modo-op:has(input:focus-visible) { outline:2px solid var(--primaria); outline-offset:2px; }
/* A nota da opção ATIVA, uma só. */
.orc-modo-nota-ativa, .orc-modo p.orc-modo-nota {
  display:block; margin:var(--sp-2) 0 0;
  font-size:var(--fs-2xs); color:var(--texto-suave);
}
/* Retirada é grátis, e o valor merece o mesmo verde que a cortesia usa na
   caixa de entrega — é a mesma informação: esta linha não custa nada. */
.orc-modo-op:last-child .orc-modo-nota { color:var(--wa-texto); font-weight:700; }

/* Caixa própria, com fundo, e não mais uma linha do resumo: o que está aqui
   dentro tem grau de certeza diferente do resto da conta, e misturar os dois
   é como uma estimativa passa a ser lida como preço. */
.orc-entrega {
  margin-top:var(--sp-3); padding:var(--sp-4); background:var(--azul-50);
  border:1px solid var(--azul-100, var(--borda)); border-radius:var(--r);
}
.orc-entrega-linha {
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2) var(--sp-3);
  font-size:var(--fs-sm); color:var(--tinta-2);
  /* Cabendo, rótulo e valor dividem a linha. Não cabendo, o valor desce
     INTEIRO para a linha de baixo, encostado à direita. Sem isto, a 414px a
     faixa quebrava no meio — "R$ 25,00 a" numa linha e "R$ 35,00" na outra,
     ao lado de um rótulo também quebrado, e o bloco passava a parecer dois
     valores diferentes em vez de um intervalo. */
  flex-wrap:wrap;
}
/* nowrap: o intervalo é UM valor e não se parte. Os textos aqui são curtos
   ("R$ 25,00 a R$ 35,00", "sob consulta", "retirada na loja") — nenhum chega
   perto da largura do cartão. */
.orc-entrega-linha strong { font-weight:800; color:var(--texto); text-align:right; white-space:nowrap; margin-inline-start:auto; }
/* Precisa repetir `.orc-entrega-linha strong` para VENCER a regra de cima:
   `.orc-entrega-gratis` sozinho tem especificidade menor (0-1-0 contra 0-1-1)
   e a cortesia saía em preto, igual a qualquer outro valor.
   `--wa-texto` (#12803e) e não um verde inventado: é o verde que esta folha
   já usa para texto, e foi escolhido por contraste sobre fundo claro. */
.orc-entrega-linha strong.orc-entrega-gratis { color:var(--wa-texto); }
.orc-entrega-nota { font-size:var(--fs-2xs); color:var(--texto-suave); line-height:1.45; margin-top:var(--sp-2); }
/* A frase que separa estimativa de preço. Peso, não cor: cor sozinha não
   chega a quem não distingue, e este é o aviso que não pode passar batido. */
.orc-entrega-nota-forte { font-weight:700; color:var(--tinta-2); }

/* ── O CONVITE DA CORTESIA ──
   "Faltam 8 m² para sua entrega sair grátis." É o par POSITIVO do mínimo de
   entrega, e por isso ele empresta o verde do frete grátis em vez do cinza
   das demais notas: a mesma cor que a pessoa verá quando conseguir.

   Nota, e não aviso: aviso é o que impede. Isto convida. */
.orc-entrega-convite { color:var(--tinta-2); }
.orc-entrega-convite strong { color:var(--wa-texto); font-weight:700; }
.orc-entrega-selo { font-size:var(--fs-2xs); color:var(--texto-suave); margin-top:var(--sp-2); opacity:.8; }
/* O recado da consulta ao painel — "conferindo" e "conferida pela faixa".
   Mais apagado que a nota comum de propósito: já existe um valor na tela, e
   nenhum dos dois estados pede ação de quem está comprando. Um spinner ou uma
   cor de alerta aqui fariam a pessoa parar para ler algo que não muda nada
   para ela. */
/* ── O ATALHO DE LOCALIZAÇÃO ─────────────────────────────────
   Aparência de link, e não de botão: o caminho principal é o campo de CEP
   logo acima, com o botão primário azul. Se este aqui tivesse peso de botão,
   os dois disputariam a decisão de quem só quer calcular o frete.
   É `<button>` na marcação porque dispara ação, não navega — o leitor de
   tela precisa ouvir "botão". */
.orc-cep-local {
  display:inline-block; margin-top:var(--sp-2); padding:0;
  background:none; border:0; cursor:pointer;
  font-size:var(--fs-2xs); color:var(--primaria);
  text-decoration:underline; text-underline-offset:2px;
}
.orc-cep-local:hover { text-decoration:none; }
.orc-cep-local:disabled { opacity:.55; cursor:default; text-decoration:none; }
.orc-cep-local-recado { font-size:var(--fs-2xs); color:var(--texto-suave); margin-top:var(--sp-1); }
.orc-cep-local-recado:empty { display:none; }

.orc-entrega-consulta {
  font-size:var(--fs-2xs); color:var(--texto-suave);
  margin-top:var(--sp-2); opacity:.75;
}

.orc-cep-rot { display:block; font-size:var(--fs-sm); font-weight:600; margin-bottom:var(--sp-2); }
.orc-cep-linha { display:flex; gap:var(--sp-2); min-width:0; }
.orc-cep-input {
  /* ── `1 1 0`, E NÃO `1 1 auto` ─────────────────────────────
     Com base `auto`, o item de flex parte da largura INTRÍNSECA do <input>,
     que o navegador dá em ~20 caracteres (237px aqui). Isso vira a
     contribuição de min-content da linha, que vira a da caixa de entrega,
     que vira a da coluna do grid — e a página inteira passou a medir 458px
     num visor de 388. O `min-width:0` sozinho não resolve: ele libera o
     encolhimento, mas a base `auto` continua declarando o tamanho grande.
     Com base 0 o campo pede zero e cresce com o espaço que sobra. */
  flex:1 1 0; min-width:0; padding:10px var(--sp-3);
  border:1.5px solid var(--borda); border-radius:var(--r-sm, 8px); background:#fff; color:var(--texto);
  /* 16px no mobile: abaixo disso o iOS dá zoom no foco e desalinha a página */
  font-size:max(16px, var(--fs-base));
}
/* A caixa não pode declarar largura maior que a coluna que a contém. */
.orc-entrega { min-width:0; }
.orc-cep-input:focus-visible { outline:none; border-color:var(--azul-800); box-shadow:0 0 0 3px rgba(10,61,145,.15); }
.orc-cep-linha .btn { flex:0 0 auto; }
.orc-cep-erro { font-size:var(--fs-2xs); color:var(--vermelho); font-weight:700; margin-top:var(--sp-2); }
.orc-cep-trocar {
  display:inline-block; margin-top:var(--sp-3); padding:0; border:0; background:none;
  font:inherit; font-size:var(--fs-2xs); color:var(--azul-800); text-decoration:underline; cursor:pointer;
}
.orc-cep-trocar:hover { color:var(--primaria-forte); }

@media (max-width:820px) {
  .orc-grid { grid-template-columns:minmax(0,1fr); }
  .orc-aside { position:static; }
}
@media (max-width:480px) {
  .orc-item { flex-direction:column; }
  .orc-item-thumb { width:100%; height:160px; }
}

/* ── VENDABILIDADE NO CARRINHO ────────────────────────────────
   O que impede este carrinho, e o que dá para fazer. Aparece SÓ
   quando há o que dizer — num carrinho normal esta caixa não
   existe, e ninguém percebe que a camada está aqui.

   Âmbar, nunca vermelho: não é erro da pessoa, é condição
   comercial. Ela não fez nada de errado. */
/* Fundo, e um fio à esquerda em vez de moldura inteira. A moldura de 1,5px
   em volta era o único contorno duro da coluna depois que todo o resto
   perdeu borda — e para um problema de três linhas ela gritava.

   A barra lateral marca sem cercar: diz "isto aqui é diferente" com um
   décimo do peso. */
.orc-venda {
  border-radius: 10px; background: #fffdf2;
  border-inline-start: 3px solid var(--amarelo-600);
  padding: var(--sp-4); margin-block: var(--sp-4);
  display: grid; gap: var(--sp-2);
}
.orc-venda-item { display: grid; gap: var(--sp-2); }
.orc-venda p { margin: 0; line-height: 1.55; }

/* ── TRÊS NÍVEIS ──
   O título carrega o número que a pessoa pode MUDAR e é o único em peso
   cheio: é o que se lê de relance. O detalhe é a régua da loja, em cinza. A
   saída é mais leve ainda — instrução, não notícia.

   Antes isso era um parágrafo só, e o número acionável ficava enterrado no
   meio de duas orações. */
.orc-venda-titulo { font-size: var(--fs-sm); font-weight: 700; color: var(--tinta); }
.orc-venda-detalhe { font-size: var(--fs-xs); color: var(--tinta-2); }

/* Quebram em duas linhas no celular em vez de encolher: alvo de toque menor
   que 44px é como a pessoa erra o botão e sai da página. */
.orc-saidas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.orc-saida {
  display: inline-flex; align-items: center; min-block-size: 2.75rem;
  padding: 0 var(--sp-3); border: 1px solid rgba(6,32,90,.10); border-radius: 10px;
  background: #fff; color: var(--azul-800); font: inherit; font-size: var(--fs-xs);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.orc-saida:hover { border-color: var(--azul-600); }
/* A primeira é a que a loja prefere — o veredito manda a lista já ordenada,
   e a tela só a desenha. */
.orc-saida:first-child { background: var(--azul-800); border-color: var(--azul-800); color: #fff; }
.orc-saida:first-child:hover { background: var(--azul-700); border-color: var(--azul-700); }

/* A pastilha da linha culpada. */
.orc-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--amarelo-200); color: var(--azul-900);
  font-size: var(--fs-2xs); font-weight: 700;
}

/* ── O RODAPÉ DE AÇÕES ───────────────────────────────────────
   Quase sempre UM botão: "Finalizar compra". O atendimento entra abaixo dele
   só quando a vendabilidade disser que quem resolve é a loja — ver
   `gerarSaidasOrcamento` no js/orcamento.js.

   A coluna e o `gap` ficam porque o segundo botão continua possível, e porque
   é a mesma forma do `.gaveta-rodape`: empilhados, com respiro entre eles e
   44px de alvo. Antes vinham colados, e dois botões encostados leem como um
   controle partido em dois. Com um filho só, o `gap` não faz nada. */
.orc-acoes { display:flex; flex-direction:column; gap:8px; margin-block-start:var(--sp-4); }
.orc-acoes .btn { min-height:44px; }

/* ── O PRIMÁRIO É CHAPADO ──
   O `.btn-primario` do site é degradê — ele existe para a home, onde precisa
   chamar de longe. Aqui não há concorrência: é o único botão cheio da
   coluna, e o degradê só acrescentava peso a uma tela que a gente passou a
   tarde aliviando.

   ⚠️ E por isso a regra é PRESA ao `.btn-primario`, não solta no `.orc-cta`.
   Solta, ela pegava também o estado em que a hierarquia de CTA transforma
   este mesmo botão em fantasma — e matava as DUAS coisas que fazem um
   fantasma: o fundo transparente e o contorno, que no `base.css` é
   `box-shadow: inset`. O resultado era texto escuro sobre azul-800.
   A ênfase é do domínio (`venda.precisaDaLoja`); esta regra só escolhe COMO
   o cheio se pinta quando é a vez dele de ser cheio. */
.orc-cta.btn-primario { background:var(--azul-800); box-shadow:none; }
.orc-cta.btn-primario:hover { background:var(--azul-700); box-shadow:none; }

/* ── O TRAVADO NÃO É UM BOTÃO DESABILITADO ──
   O comportamento é: clicou → não navega → destaca o motivo. A aparência tem
   de combinar com isso.

   A primeira versão usava opacidade em 55% e cursor de "proibido", e as duas
   diziam outra coisa: "não clique aqui". Aí a pessoa não tenta, não recebe a
   explicação, e sai da página achando que o site quebrou.

   Fica em cor cheia, com o cursor de sempre — continua acionável. O que muda
   ── DUAS TENTATIVAS ERRADAS, E O QUE OS GRANDES FAZEM ──
   Primeiro um azul mais claro: lia como outro botão azul, não como estado.
   Depois um contorno branco: ficou igual ao WhatsApp logo abaixo, e a coluna
   perdeu o ponto de decisão.

   A resposta estava na medição que já tínhamos. Na Casas da Água, com um
   campo obrigatório vazio, o "Ir para a Entrega" fica azul CHEIO e idêntico;
   na Americanas, o "continuar" fica vermelho cheio. Nenhuma das duas inventa
   um terceiro estado de botão — a validação acontece no CLIQUE.

   E é o certo por dois motivos. Avisar pela cor é desencorajar antes da
   hora: a pessoa vê um botão apagado e desiste sem saber do quê. E o botão
   não estaria mentindo de qualquer forma — o motivo está a dois centímetros
   dele, na caixa âmbar, desde antes de ela chegar aqui.

   Então o travado NÃO tem aparência própria. A classe existe só para o JS
   achar o elemento; o CSS dela é deliberadamente vazio, e este comentário é
   o que impede alguém de "consertar" isso de novo daqui a seis meses. */

/* O piscar de quem clicou mesmo assim: leva o olho ao bloco que explica. */
@keyframes orc-piscar {
  0%, 100% { box-shadow: inset 0 0 0 1.5px var(--amarelo-600); }
  50%      { box-shadow: inset 0 0 0 3px var(--amarelo-600); }
}
.orc-venda-piscou { animation: orc-piscar .5s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .orc-venda-piscou { animation: none; } }

/* A frase que aponta as saídas, no lugar dos botões. Cor mais leve que a
   explicação: é instrução, não notícia. */
.orc-venda-como { font-size: var(--fs-xs); color: var(--tinta-3, var(--texto-suave)); }

/* ── A LOCALIDADE ──
   CEP e cidade, e mais nada. Uma linha, sem caixa: é confirmação do que o
   sistema já sabe, não um formulário. */
.orc-local {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-block: var(--sp-3);
  font-size: var(--fs-sm); color: var(--tinta);
}
.orc-local-texto { font-weight: 600; }
.orc-local-trocar {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--fs-xs); color: var(--azul-700);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── OS VALORES ──
   Só o Total é protagonista. Subtotal e frete são conferência: quem lê o
   total não precisa deles, e quem quer conferir os encontra. Três números
   grandes fariam a pessoa procurar qual é o que importa. */
.orc-valores {
  display: grid; gap: var(--sp-2);
  margin-block: var(--sp-4) var(--sp-4);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgba(6,32,90,.07);
}
.orc-valor { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--tinta-2); }
.orc-valor strong, .orc-valor span:last-child { color: var(--tinta); font-weight: 600; }
.orc-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-block-start: var(--sp-2); padding-block-start: var(--sp-3);
  border-block-start: 1px solid rgba(6,32,90,.07);
  font-weight: 700; color: var(--tinta);
}
/* `--fs-h2` era o corpo de um título de seção — o total gritava mais que o
   nome da página. Ele continua sendo o único número em destaque da coluna;
   destaque aqui é ser o ÚNICO, não ser enorme. */
.orc-total span:last-child { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--azul-800); }

/* ── A CABEÇA DO RESUMO ──
   Título e conferência na MESMA linha: "Resumo · 3 itens · 27,95 m² de piso".
   A lista de itens saiu daqui — ela está à esquerda, com foto e preço. */
.orc-resumo-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.orc-resumo-cab .orc-resumo-titulo { margin: 0; }
.orc-resumo-conf { font-size: var(--fs-2xs); color: var(--texto-suave); }

/* O botão do CEP segue o mesmo chapado do CTA: o degradê do    é da home, e aqui ele era o único relevo sobrando na coluna. */
.orc-cep .btn-primario { background:var(--azul-800); box-shadow:none; }
.orc-cep .btn-primario:hover { background:var(--azul-700); box-shadow:none; }

/* ── O AVISO DENTRO DO CARD ──
   Quem impede a compra é o item, e é no card dele que se diz. Discreto: a
   mesma barra âmbar do resumo, em escala de linha — marca sem cercar, e sem
   transformar um carrinho de quatro itens numa tela de alerta.

   Rótulo em peso cheio, motivo em cinza: a pessoa lê "Sob encomenda" de
   relance e o porquê só se quiser. */
.orc-item-aviso {
  display: grid; gap: 2px; margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: #fffdf2; border-radius: 8px;
  border-inline-start: 3px solid var(--amarelo-600);
}
.orc-item-aviso strong { font-size: var(--fs-xs); color: var(--tinta); }
.orc-item-aviso span { font-size: var(--fs-2xs); color: var(--tinta-2); line-height: 1.45; }