/* ============================================================================
   Beer Lab Commerce Hub — Design System (ECH-018)
   Reconstruído do zero.

   TESE: o produto é o conteúdo; o aplicativo é invisível.
   Superfície única e clara, sem caixas empilhadas. A separação vem de ritmo
   tipográfico e espaço — nunca de bordas. A cor vem da fotografia do produto,
   não do cromo da interface. Elevação existe só onde há objeto real
   (folha fixa, drawer, toast).

   O que foi descartado e por quê:
   · canvas cinza + cards com borda  → assinatura de dashboard, caixa em caixa
   · linha de KPIs no topo da home   → widget de ERP, não de aplicativo
   · hero em gradiente escuro        → banner de site, não superfície de app
   · trilhos contidos na margem      → app deixa o conteúdo sangrar

   Camada de apresentação apenas. Nenhuma regra de negócio.
   Multi-tenant: a identidade vive em --brand*. Nada mais conhece "Beer Lab".
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --w0:#ffffff;
  --w1:#fafaf9;   /* faixa de respiro entre blocos */
  --w2:#f2f1ef;   /* moldura de imagem, trilho de progresso */
  --w3:#e6e4e0;   /* divisor */
  --w4:#c9c5bf;
  --w5:#8f8880;
  --w6:#6b645c;   /* texto terciário — AA sobre branco e sobre --w1 */
  --w7:#4a443d;   /* texto secundário */
  --w8:#2a251f;
  --w9:#141210;   /* texto principal */

  --brand:#8a5e10;
  --brand-ink:#ffffff;
  --brand-tint:#fdf7ea;

  --pos:#0f6b38;  --pos-tint:#eaf5ee;  --pos-linha:#c9e3d3;
  --att:#8a5200;  --att-tint:#fdf3e3;
  --neg:#9c2018;  --neg-tint:#fbeceb;

  /* ═══ DESIGN SYSTEM PREMIUM V1 (ECH-034) ═══════════════════════════════
     O app inteiro era branco puro sobre branco puro: sem hierarquia de
     superficie, tudo lia como formulario tecnico. Agora ha uma distincao
     semantica clara — o FUNDO e areia quente, as SUPERFICIES sao brancas e,
     por contraste, passam a parecer elevadas. E a mudanca de menor custo e
     maior efeito na percepcao de produto premium. */
  --bg-app:#f4f1ec;         /* fundo do aplicativo — areia quente */
  --surface:var(--w0);      /* superficie de conteudo — branca, elevada */
  --surface-2:#fbfaf8;      /* superficie secundaria */
  --band:var(--w1);
  /* As fotos de produto vêm recortadas em BRANCO. Uma moldura cinza faz
     aparecer um retângulo branco dentro dela — caixa dentro de caixa, que é
     justamente o que esta reconstrução elimina. A moldura é quase branca. */
  --frame:#f8f7f5;
  --rule:var(--w3);

  --ink:var(--w9);
  --ink-2:var(--w7);
  --ink-3:var(--w6);

  /* Selos vivem sobre a moldura da foto, que é clara nos dois temas. */
  --seal-out:#9c2018;
  --seal-new:#17457e;
  /* Idem para os selos comerciais (ECH-023): usar --brand/--pos aqui seria
     erro, porque esses dois INVERTEM no tema escuro (viram claros) e o texto
     branco em cima despencava para 2.11 e 1.78. Estes não invertem. */
  --seal-top:#8a5e10;
  --seal-flag:#0f6b38;
  /* Cartao de campanha vive sobre arte escura com scrim nos DOIS temas, entao
     seus tokens nao podem inverter — mesma regra ja aprendida nos selos. */
  --brand-lb:#e3ae52;    /* label dourada sobre o scrim */
  --brand-cta:#8a5e10;   /* fundo do CTA, com texto branco: 6,36:1 */

  /* Escala tipográfica com contraste real — hierarquia se enxerga de longe. */
  --f1:.6875rem; --f2:.75rem; --f3:.8125rem; --f4:.875rem;
  --f5:1rem; --f6:1.125rem; --f7:1.375rem; --f8:1.75rem; --f9:2.125rem;

  --g1:4px; --g2:8px; --g3:12px; --g4:16px; --g5:20px;
  --g6:28px; --g7:40px; --g8:56px;

  --pad:16px;

  --rx1:8px; --rx2:12px; --rx3:18px; --rx4:26px; --rxf:999px;

  /* Só três elevações. Mais que isso vira decoração. */
  --lift1:0 1px 3px rgb(20 18 16/.07);
  --lift2:0 6px 18px rgb(20 18 16/.10), 0 1px 3px rgb(20 18 16/.06);
  --lift3:0 24px 56px rgb(20 18 16/.20), 0 4px 12px rgb(20 18 16/.10);

  --t1:110ms; --t2:180ms; --t3:280ms;
  --ez:cubic-bezier(.2,.7,.3,1);
  --spring:cubic-bezier(.2,1.25,.4,1);

  /* --max era a largura do site widescreen. Dentro da moldura, o limite e a
     propria moldura: 100% sempre. */
  --max:100%;
  --frame-out:#eeece8;   /* fundo FORA da moldura (claro) */
  --tab:58px;
  --top:54px;

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
}

/* ═══ MOLDURA DE APLICATIVO — MOBILE-ONLY (ECH-024) ══════════════════════
   Decisão soberana: a visão desktop widescreen foi REPROVADA. O SuperApp não
   concorre com o Catálogo Online; ele é um aplicativo. Em qualquer largura de
   tela a composição é a mesma — no monitor grande só cresce o espaço EXTERNO.

   Como funciona: #shell é um contêiner de consulta. Todo o layout interno usa
   @container (largura da MOLDURA), nunca @media (largura do MONITOR). Assim
   1920px e 430px renderizam exatamente a mesma coisa. O mesmo `container-type`
   cria bloco contentor para os fixos, prendendo header, navegação e barra de
   carrinho à moldura sem posicionamento manual. */
:root{ --app:460px; }

#shell{
  container-type:inline-size;
  container-name:app;
  width:100%;
  max-width:var(--app);
  margin-inline:auto;
  min-height:100dvh;
  background:var(--bg-app);
  position:relative;
  isolation:isolate;
  /* Os trilhos "sangram" (margin negativa) para correr até a borda da tela —
     certo no celular, mas dentro da moldura isso vazava 44px para fora dela.
     `clip` recorta na borda da moldura e preserva a sangria, sem criar
     contexto de rolagem (o que quebraria os filhos `position:sticky`). */
  overflow-x:clip;
}

/* Fora da moldura: fundo neutro e discreto. Nada de desenho de aparelho —
   é um PWA vertical em janela centralizada, não um mockup de celular. */
@media (min-width:calc(460px + 1px)){
  body{ background:var(--frame-out); }
  #shell{ box-shadow:0 0 0 1px var(--rule), 0 12px 48px rgb(20 18 16/.07); }
}

/* A escala tipográfica e a margem lateral são as de celular em TODA largura:
   a moldura nunca passa de --app, então não há caso "tela grande" a atender.
   (Tokens ficam em :root, que é ancestral do #shell e por isso fora do
   alcance de @container — por construção, não por esquecimento.) */

/* ═══ TEMA ESCURO (ECH-044C) ═══════════════════════════════════════════════
   Dois seletores, os MESMOS tokens:
   1) `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])`
      → modo Automático: acompanha o sistema, mas recua se o cliente escolheu
        Claro manualmente.
   2) `:root[data-theme="dark"]` → escolha manual permanente.
   Os dois blocos precisam ficar IDÊNTICOS — há teste garantindo isso.

   Calibração (ECH-044C): a base era #0d0b0a, quase preto puro. Medido:
   texto principal a 17,3:1 (halação em uso prolongado — Apple HIG e Material 3
   desaconselham preto puro com branco puro) e superfície a apenas 1,05:1 do
   fundo, ou seja, o card praticamente não se destacava e a hierarquia de
   elevação do Design System sumia no escuro. A base sobe para um marrom-escuro
   quente, a superfície sobe junto (separação 1,10:1) e o texto suaviza para
   14,2:1 — ainda três vezes o mínimo AA, com menos brilho na leitura longa. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --w0:#201c19; --w1:#282320; --w2:#f2f1ef; --w3:#332d29;
    --bg-app:#15120f;      /* fundo do aplicativo no escuro */
    --surface-2:#282320;
    --frame-out:#0e0c0b;   /* fundo FORA da moldura (escuro) */
    --w4:#3d3833; --w5:#7e766d; --w6:#a49c93; --w7:#cec7bf;
    --w8:#e6e1db; --w9:#f0eae4;
    --brand:#e0a94a; --brand-ink:#1a1206; --brand-tint:#241b0d;
    --pos:#5cd98d; --pos-tint:#0e2417; --pos-linha:#1c4430; --att:#e6ae52; --att-tint:#241c0d;
    --neg:#f28e88; --neg-tint:#2a1614;
    --lift2:0 6px 18px rgb(0 0 0/.5), 0 1px 3px rgb(0 0 0/.4);
    --lift3:0 24px 56px rgb(0 0 0/.65), 0 4px 12px rgb(0 0 0/.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --w0:#201c19; --w1:#282320; --w2:#f2f1ef; --w3:#332d29;
  --bg-app:#15120f;      /* fundo do aplicativo no escuro */
  --surface-2:#282320;
  --frame-out:#0e0c0b;   /* fundo FORA da moldura (escuro) */
  --w4:#3d3833; --w5:#7e766d; --w6:#a49c93; --w7:#cec7bf;
  --w8:#e6e1db; --w9:#f0eae4;
  --brand:#e0a94a; --brand-ink:#1a1206; --brand-tint:#241b0d;
  --pos:#5cd98d; --pos-tint:#0e2417; --pos-linha:#1c4430; --att:#e6ae52; --att-tint:#241c0d;
  --neg:#f28e88; --neg-tint:#2a1614;
  --lift2:0 6px 18px rgb(0 0 0/.5), 0 1px 3px rgb(0 0 0/.4);
  --lift3:0 24px 56px rgb(0 0 0/.65), 0 4px 12px rgb(0 0 0/.45);
  color-scheme:dark;
}
/* Claro manual: recusa o escuro do sistema e fixa o esquema nativo dos campos. */
:root[data-theme="light"]{ color-scheme:light; }

/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg-app);color:var(--ink);font-family:var(--ui);
  font-size:var(--f4);line-height:1.45;-webkit-font-smoothing:antialiased;
  /* ECH-050K: +16px de folga para o conteúdo (ex.: fim da PDP) nunca encostar/ficar
     recortado pela tabbar fixa. A tabbar não muda; só o espaçamento do conteúdo. */
  padding-bottom:calc(var(--tab) + 16px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
svg{width:20px;height:20px;flex-shrink:0}
[hidden]{display:none!important}

:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px;border-radius:var(--rx1)}
::selection{background:var(--brand);color:var(--brand-ink)}

.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:fixed;top:-200px;left:var(--pad);z-index:300;background:var(--surface);
  color:var(--ink);font-weight:640;text-decoration:none;padding:12px 20px;
  border-radius:var(--rx2);box-shadow:var(--lift3);transition:top var(--t2)}
.skip:focus{top:12px}

/* --- 3. Estrutura -------------------------------------------------------- */
.hold{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.col{display:flex;flex-direction:column}
.rw{display:flex;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--g4)}
.fill{flex:1;min-width:0}

/* Bloco de conteúdo: o ritmo vertical é o que separa, não a borda. */
.blk{padding-block:var(--g6)}
.blk + .blk{padding-top:0}
.band{background:var(--band);padding-block:var(--g6);margin-block:var(--g2)}

/* Bloco COMPACTO (home comercial): ritmo denso, menos espaço morto entre
   vitrines. É o que aproxima a sensação de marketplace. */
.blk-c{padding-block:var(--g5) 0}
.blk-c:first-child{padding-top:0}
.blk-c .blk-h{margin-bottom:var(--g1)}
/* ECH-037: titulo de secao a 22px. So foi possivel depois de encurtar os
   titulos das vitrines para uma linha — a 22px, "Condicoes especiais
   disponiveis hoje" ocupava duas e cada vitrine crescia 28px. */
.blk-c .blk-h h2{font-size:var(--f7);letter-spacing:-.03em}

.rule{height:1px;background:var(--rule);border:0;margin:0}

/* --- 4. Topo ------------------------------------------------------------- */
.top{position:sticky;top:0;z-index:80;background:var(--surface);
  border-bottom:1px solid transparent;transition:border-color var(--t2)}
.top.stuck{border-bottom-color:var(--rule)}
.top-in{max-width:var(--max);margin:0 auto;padding-inline:var(--pad);
  height:var(--top);display:flex;align-items:center;gap:var(--g3)}

.mark{display:flex;align-items:center;gap:9px;flex-shrink:0}
.mark-d{width:24px;height:24px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 52%,#000))}
/* Logotipo oficial: proporção preservada (nunca distorcido) e fundo claro fixo
   nos dois temas — a arte vem sobre fundo claro e sumiria no tema escuro. */
.mark-l{width:26px;height:26px;flex-shrink:0;border-radius:7px;object-fit:contain;
  background:#fff;padding:1px}
.gate .mark-l{width:34px;height:34px;border-radius:9px}
.mark-t{font-size:var(--f4);font-weight:680;letter-spacing:-.025em;line-height:1}
.mark-t small{display:block;font-size:var(--f1);font-weight:520;color:var(--ink-3);
  letter-spacing:.01em;margin-top:2px}

.who{margin-left:auto;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-size:var(--f2);font-weight:600;color:var(--ink-2)}
.who i{width:7px;height:7px;border-radius:50%;background:var(--pos)}
.who.att i{background:var(--att)}

/* --- 5. Abas ------------------------------------------------------------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--surface);
  border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
.tabs-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
.tb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* --w5 dava 3,5:1 sobre o branco — reprova em AA. --ink-3 dá 5,92:1. */
  gap:3px;min-height:var(--tab);color:var(--ink-3);font-size:var(--f1);font-weight:560;
  transition:color var(--t1) var(--ez)}
.tb svg{width:22px;height:22px;stroke-width:1.6;transition:stroke-width var(--t1)}
/* ECH-045C — "Meus Pedidos" é o rótulo mais longo da barra. Sem isto ele
   quebrava em duas linhas e empurrava o próprio ícone para cima, desalinhando
   a navegação inteira. Uma linha só, com um degrau de tamanho apenas aqui:
   a barra continua uniforme e o texto cabe inteiro já em 360px. */
.tb span{white-space:nowrap;font-size:10px;line-height:1.2}
.tb.on{color:var(--ink)}
.tb.on svg{stroke-width:2.4}
.tb:active{transform:scale(.93);transition:transform 70ms}
.tb b{position:absolute;top:5px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 5px;
  border-radius:var(--rxf);background:var(--seal-out);color:#fff;font-size:10px;font-weight:720;
  display:grid;place-items:center;font-variant-numeric:tabular-nums;line-height:1}

/* REMOVIDO (ECH-024): nav superior no desktop — composicao widescreen reprovada pelo fundador. */

/* --- 6. Tipografia ------------------------------------------------------- */
.d1{font-size:var(--f9);font-weight:720;letter-spacing:-.035em;line-height:1.05}
.d2{font-size:var(--f8);font-weight:700;letter-spacing:-.032em;line-height:1.1}
.h1{font-size:var(--f7);font-weight:690;letter-spacing:-.028em;line-height:1.15}
.h2{font-size:var(--f6);font-weight:670;letter-spacing:-.022em;line-height:1.2}
.h3{font-size:var(--f5);font-weight:650;letter-spacing:-.018em}
.cap{font-size:var(--f1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.sub{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.sm{font-size:var(--f2)}
.nm{font-variant-numeric:tabular-nums}

/* Cabeçalho de bloco: título grande + ação à direita. Sem subtítulo decorativo. */
.blk-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--g4);
  margin-bottom:var(--g4)}
/* Alvo mínimo: o texto tem 19px de altura. O padding negativado leva a área
   de toque a 31px sem deslocar o layout (WCAG 2.5.8 exige 24px). */
.blk-h .more{font-size:var(--f3);font-weight:620;color:var(--ink-3);white-space:nowrap;
  padding:6px 4px;margin:-6px -4px}
.blk-h .more:hover{color:var(--ink)}

/* --- 7. Ações ------------------------------------------------------------ */
.act{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding-inline:var(--g5);border-radius:var(--rx2);
  background:var(--ink);color:var(--surface);font-size:var(--f4);font-weight:650;
  letter-spacing:-.012em;white-space:nowrap;
  transition:transform var(--t1) var(--ez),opacity var(--t1),background var(--t1)}
.act svg{width:18px;height:18px}
.act:hover{opacity:.87}
.act:active{transform:scale(.97)}
.act:disabled{opacity:.32;cursor:not-allowed;transform:none}
.act.pri{background:var(--brand);color:var(--brand-ink)}
.act.out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--w4)}
.act.out:hover{background:var(--band);opacity:1}
.act.flat{background:transparent;color:var(--ink-2);min-height:38px;padding-inline:var(--g3)}
.act.flat:hover{background:var(--band);opacity:1}
/* Verde do WhatsApp escurecido: em #17a24c o texto branco dava 3.33 e
   reprovava AA. #12833c mantém a leitura de "canal WhatsApp" com 4.8. */
.act.zap{background:#12833c;color:#fff}
.act.big{min-height:56px;font-size:var(--f5);border-radius:var(--rx3);padding-inline:var(--g6)}
.act.full{width:100%}
.act.mini{min-height:34px;font-size:var(--f2);padding-inline:var(--g3)}

/* --- 8. Trilho sangrado -------------------------------------------------- */
/* Conteúdo escapa a margem e corre até a borda da tela. É o que faz parecer
   aplicativo em vez de página. */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rw,150px);gap:var(--g3);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
  padding-block:2px var(--g1)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
@container app (min-width:420px){ .rail{--rw:160px} }

/* --- 9. Produto ---------------------------------------------------------- */
/* Sem borda, sem fundo próprio: o card É a superfície. A foto faz o trabalho. */
/* Densidade é requisito de produto: o comprador B2B varre centenas de SKUs.
   3 colunas já no telefone menor. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g5) var(--g3)}
/* DENSIDADE DO CATALOGO (ECH-029): DUAS colunas, sempre.
   A referencia aprovada usa 2 cards por linha porque cada card precisa caber
   preco, preco por unidade, caixa, multiplo, BeerCash e o stepper sem
   colisao. Em 3 colunas o card tinha ~140px e essas linhas se atropelavam.
   Clareza e conversao vencem densidade bruta. */







.it{position:relative;display:flex;flex-direction:column;min-width:0}
.it-ph{position:relative;aspect-ratio:1;border-radius:var(--rx2);overflow:hidden;
  background:var(--frame);display:grid;place-items:center;
  transition:transform var(--t2) var(--ez)}
/* SISTEMA DE MIDIA (ECH-036) — a foto NUNCA depende de JavaScript para ficar
   visivel. Antes era `opacity:0` ate o `onload` acrescentar `.on`: com
   `loading="lazy"` no navegador embarcado da homologacao o carregamento nunca
   comeca, o `onload` nunca dispara e o card fica em branco para sempre; e,
   quando carrega, a foto entra de 0 a 1 — o "piscar". Agora o placeholder
   fica ATRAS, no mesmo box de proporcao fixa, e a foto o cobre quando existir.
   Falha, demora ou ausencia mostram o placeholder — nunca o vazio, nunca
   alternando entre os dois. */
.ph{position:absolute;inset:0;display:block}
.ph img{position:absolute;inset:0;width:100%;height:100%}
/* DUAS CAMADAS (ECH-045D). O fundo é a própria foto em `cover`, desfocada:
   preenche o container inteiro e empresta ao card a cor da própria imagem, de
   modo que uma foto com arte colorida deixa de parecer uma janela dentro de
   outra. Ele nunca compete com o produto — fica desfocado, um pouco mais
   escuro e translúcido. Numa foto recortada em branco o resultado é
   praticamente o mesmo branco de antes, então não há efeito colateral.
   `scale` cobre a borda que o blur desbota nas extremidades. */
.ph-bg{object-fit:cover;transform:scale(1.18);
  filter:blur(17px) saturate(1.06) brightness(.95);opacity:.62;pointer-events:none}
/* A camada principal é a foto INTEIRA: `contain`, sem corte e sem deformação. */
.ph-fg{object-fit:contain;position:relative}
/* Enquadramento por FAMILIA de embalagem: garrafa, long neck e lata sao altos
   e estreitos e precisam de respiro lateral para caber inteiros; barril,
   growler e kit sao largos e com o mesmo respiro ficariam minusculos.
   `contain` em todos — nada e deformado nem cortado. */
.ph.enq-alto .ph-fg{padding:7% 16%}
.ph.enq-largo .ph-fg{padding:9% 6%}
.it-ph .no{font-size:1.7rem;opacity:.2;filter:grayscale(1)}
@media (hover:hover){ .it:hover .it-ph{transform:translateY(-3px)} }

.it-b{padding-top:7px;display:flex;flex-direction:column;gap:0;min-width:0}
.it-mk{font-size:var(--f1);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Duas linhas reservadas: um nome curto ocupava uma so e o card terminava
   17px acima dos vizinhos. O teto de duas linhas continua valendo. */
.it-nm{font-size:var(--f3);font-weight:520;line-height:1.3;color:var(--ink);
  min-height:calc(var(--f3) * 1.3 * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* O preço é a informação que decide. Ele domina o bloco. */
.it-pr{font-size:var(--f6);font-weight:720;letter-spacing:-.035em;line-height:1.15;
  margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
@container app (min-width:420px){ .it-pr{font-size:var(--f6)} }
/* As linhas de economia e de caixa sao RESERVADAS mesmo quando vazias: sem
   isso, um card sem desconto ou sem multiplo terminava uma ou duas linhas
   acima e o trilho ficava desalinhado — a FASE 7 exige altura consistente. */
.it-cx{min-height:14px;font-size:var(--f1);line-height:1.28;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* "Sob consulta" ocupa o lugar do preco E da linha de economia: sem esta
   reserva, o card cujo preco a origem nao devolveu terminava 15px acima dos
   vizinhos e quebrava o alinhamento do trilho. A reserva desconta o "caixa
   com N", que neste card aparece porque nao ha preco por caixa para substitui-lo. */
.it-ask{display:block;min-height:33px;font-size:var(--f2);font-weight:640;
  color:var(--att);margin-top:4px}

/* Botão de adicionar: flutua sobre o canto inferior da foto, como nos
   aplicativos de referência — alcançável com o polegar, sem roubar linha
   do bloco de texto. */
.it-btn{position:absolute;right:5px;bottom:5px;width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--ink);
  box-shadow:var(--lift2);z-index:2;
  transition:transform var(--t2) var(--spring),background var(--t1),color var(--t1)}
.it-btn svg{width:15px;height:15px;stroke-width:2.7}
/* O botão é visualmente compacto para não cobrir a foto na densidade de 3
   colunas, mas a ÁREA DE TOQUE é de 44px — densidade e conforto sem escolher
   entre os dois. */
.it-btn::after{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
@container app (min-width:420px){
  .it-btn{width:34px;height:34px;right:6px;bottom:6px}
  .it-btn svg{width:17px;height:17px}
}
.it-btn:hover{background:var(--ink);color:var(--surface)}
.it-btn:active{transform:scale(.85)}
.it-btn:disabled{opacity:.3;box-shadow:var(--lift1);cursor:not-allowed}
.it-btn.ok{background:var(--pos);color:#fff}

.it-seals{position:absolute;top:7px;left:7px;display:flex;flex-wrap:wrap;gap:4px;z-index:1;
  pointer-events:none}
.seal{font-size:9.5px;font-weight:760;letter-spacing:.05em;text-transform:uppercase;
  padding:3.5px 7px;border-radius:6px;background:rgb(20 18 16/.82);color:#fff;
  backdrop-filter:blur(6px)}
.seal.out{background:var(--seal-out)}
.seal.new{background:var(--seal-new)}
/* `.on` deixou de existir na ECH-036: sem esta correcao o produto esgotado
   continuava com a foto em cor cheia, sem o esmaecimento que o distingue. */
.it.gone .it-ph img{opacity:.38;filter:saturate(.15)}
.it.gone .it-nm,.it.gone .it-pr{color:var(--ink-3)}

/* --- 10. Busca ----------------------------------------------------------- */
.find{position:relative}
.find-b{display:flex;align-items:center;gap:10px;height:46px;padding-inline:15px;
  background:var(--band);border-radius:var(--rxf);
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--t1),background var(--t1)}
.find-b:focus-within{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.find-b svg{width:19px;height:19px;color:var(--ink-3)}
.find-b input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:var(--f4)}
.find-b input::placeholder{color:var(--ink-3)}
/* type=search (ECH-042) traz um "x" nativo do WebKit; o app já tem o próprio
   botão de limpar (#qx). Suprime o nativo para não duplicar. */
.find-b input[type="search"]::-webkit-search-cancel-button,
.find-b input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.find-x{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--w3);color:var(--ink-2);flex-shrink:0}
.find-x svg{width:13px;height:13px}

.sug{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:120;
  background:var(--surface);border-radius:var(--rx3);box-shadow:var(--lift3);
  overflow:hidden;max-height:min(66vh,470px);overflow-y:auto;
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity var(--t1) var(--ez),transform var(--t1) var(--ez)}
.sug.open{opacity:1;transform:none;pointer-events:auto}
.sug-g{padding:12px 18px 5px;font-size:var(--f1);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.sug-i{display:flex;align-items:center;gap:13px;width:100%;padding:10px 18px;text-align:left;
  transition:background var(--t1)}
.sug-i:hover,.sug-i.cur{background:var(--band)}
.sug-i svg{width:16px;height:16px;color:var(--ink-3)}
.sug-i img{width:34px;height:34px;border-radius:8px;background:var(--frame);
  object-fit:contain;padding:3px;flex-shrink:0}
.sug-i b{font-weight:540;font-size:var(--f3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug-i span{margin-left:auto;font-size:var(--f2);color:var(--ink-3);flex-shrink:0}
.sug-i mark{background:none;color:var(--ink);font-weight:740}

/* --- 11. Pílulas e filtros ---------------------------------------------- */
.pills{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-block:2px}
.pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:var(--rxf);
  background:var(--band);font-size:var(--f3);font-weight:580;white-space:nowrap;
  color:var(--ink-2);transition:background var(--t1),color var(--t1)}
.pill:hover{background:var(--w3)}
.pill.on{background:var(--ink);color:var(--surface)}
.pill i{font-style:normal;font-size:var(--f2);opacity:.6;font-variant-numeric:tabular-nums}
.pill em{font-style:normal;display:grid;place-items:center;min-width:17px;height:17px;
  border-radius:var(--rxf);background:var(--brand);color:var(--brand-ink);
  font-size:10px;font-weight:740}

.bar{position:sticky;top:var(--top);z-index:70;background:var(--surface);
  padding-block:10px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}


.side{display:none}
/* REMOVIDO (ECH-024): sidebar lateral — composicao widescreen reprovada pelo fundador. */

/* --- 12. Folha (drawer) -------------------------------------------------- */
.veil{position:fixed;inset:0;z-index:200;background:rgb(20 18 16/.45);
  opacity:0;pointer-events:none;transition:opacity var(--t2) var(--ez)}
.veil.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:201;max-height:86vh;
  background:var(--surface);border-radius:var(--rx4) var(--rx4) 0 0;box-shadow:var(--lift3);
  display:flex;flex-direction:column;transform:translateY(101%);
  transition:transform var(--t3) var(--spring)}
.sheet.open{transform:none}
.sheet::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:36px;height:4px;border-radius:var(--rxf);background:var(--w4)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--g5) 14px;flex-shrink:0}
.sheet-b{overflow-y:auto;padding:0 var(--g5) var(--g5);display:flex;flex-direction:column;gap:var(--g6);flex:1}
.sheet-f{padding:14px var(--g5) calc(var(--g5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);display:flex;gap:10px;flex-shrink:0}
.fg h3{font-size:var(--f1);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.fw{display:flex;flex-wrap:wrap;gap:7px}

/* --- 13. Vitrines -------------------------------------------------------- */
/* Fornecedor: tipografia grande sobre superfície clara. Sem gradiente escuro. */
/* padding-block apenas: o lateral vem de .hold e não pode ser zerado aqui. */
/* ── Home comercial (ECH-021) ─────────────────────────────────────────── */
/* Topo: saudação fina + busca em primeiro plano. */
.home-top{padding-top:var(--g3);padding-bottom:var(--g4)}
.home-hi{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.home-hi span:first-child{font-size:var(--f6);font-weight:700;letter-spacing:-.025em}
.home-tag{font-size:var(--f1);font-weight:640;padding:3px 9px;border-radius:var(--rxf);
  background:var(--att-tint);color:var(--att)}
/* Busca "hero" — maior, é a estrela da home. */
.find-hero .find-b{height:52px;border-radius:var(--rx3);
  box-shadow:inset 0 0 0 1px var(--rule),var(--lift1)}
.find-hero .find-b:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink),var(--lift1)}
.find-hero .find-b svg{width:21px;height:21px}
.find-hero .find-b input{font-size:var(--f5)}

/* Categorias visuais: cartões com identidade de cor, não botões planos. */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g2)}
@container app (min-width:360px){ .cats{grid-template-columns:repeat(2,1fr)} }


.cat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;
  min-height:76px;padding:12px 14px;border-radius:var(--rx2);overflow:hidden;text-align:left;
  color:#fff;background:linear-gradient(135deg,var(--ca,#5d574f),var(--cb,#211e1a));
  transition:transform var(--t1) var(--ez)}
.cat:hover{transform:translateY(-2px)}
.cat::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 90% 10%,rgb(255 255 255/.14),transparent 60%)}
/* Scrim na base: o gradiente colorido claro (lightness 44%) reprovava com
   texto branco. O scrim garante AA no texto sem escurecer o topo do card. */
.cat::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgb(18 16 14/.62),rgb(18 16 14/.12) 55%,transparent)}
.cat-n{position:relative;z-index:1;font-size:var(--f3);font-weight:660;letter-spacing:-.01em;line-height:1.15}
.cat-c{position:relative;z-index:1;font-size:var(--f1);opacity:.9;font-variant-numeric:tabular-nums}

/* ── SuperApp B2B (DEC-BCH-SUPERAPP-001) ──────────────────────────────── */

/* Banner principal de merchandising — presença visual, produto real.
   Slot reutilizável: outro parceiro/campanha entra sem redesenho. */
.banner{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:var(--g3);
  width:100%;min-height:150px;padding:var(--g5);border-radius:var(--rx3);overflow:hidden;text-align:left;
  background:linear-gradient(115deg,#1a1613,#2e2620 58%,#3d3128);color:#fff;
  transition:transform var(--t1) var(--ez)}
.banner:hover{transform:translateY(-2px)}
.banner-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;
  max-width:62%;justify-content:center}
.banner-txt b{font-size:var(--f7);font-weight:720;letter-spacing:-.03em;line-height:1.12}
.banner-sub{font-size:var(--f2);color:rgb(255 255 255/.72)}
.banner-cta{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:9px 16px;
  border-radius:var(--rxf);background:var(--brand);color:var(--brand-ink);
  font-size:var(--f3);font-weight:660;align-self:flex-start}
.banner-cta svg{width:15px;height:15px}
/* A foto do produto vem com fundo claro próprio. Sobre o banner escuro isso
   viraria um retângulo destoante — então ela ganha uma moldura clara e vira
   um "produto em destaque" flutuando, com contraste correto. */
.banner-img{position:absolute;right:var(--g4);top:50%;transform:translateY(-50%);
  width:34%;max-width:130px;aspect-ratio:1;border-radius:var(--rx3);overflow:hidden;
  background:#fff;box-shadow:0 14px 30px rgb(0 0 0/.4);pointer-events:none}
.banner-img img{width:100%;height:100%;object-fit:contain;padding:7%}


/* Banner secundário horizontal — segundo slot, mais leve. */
.banner2{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border-radius:var(--rx3);
  background:var(--band);text-align:left;transition:background var(--t1),transform var(--t1) var(--ez)}
.banner2:hover{background:var(--w3);transform:translateY(-1px)}
.banner2-img{display:grid;place-items:center;width:60px;height:60px;border-radius:var(--rx2);
  background:var(--surface);flex-shrink:0;overflow:hidden}
.banner2-img img{width:100%;height:100%;object-fit:contain;padding:6%}
.banner2-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.banner2-txt b{font-size:var(--f5);font-weight:680;letter-spacing:-.02em}
.banner2-txt span{font-size:var(--f2);color:var(--ink-3)}

/* Macrocategorias de abastecimento (nível 1): cartões densos, comerciais.
   A miniatura é um PRODUTO REAL da categoria — emoji só como último recurso. */
.macros{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g2)}
/* 4 colunas dentro da moldura dariam ~107px por card: o rotulo quebrava
   ('Sem/alcool') e a contagem descia de linha. Duas colunas mantem o card
   legivel e ainda mostram as quatro macros sem rolagem. */
@container app (min-width:360px){ .macros{grid-template-columns:repeat(2,1fr)} }
.macro{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--rx2);
  background:var(--band);text-align:left;transition:background var(--t1),transform var(--t1) var(--ez)}
.macro:hover{background:var(--w3);transform:translateY(-2px)}
.macro-i{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--rx2);
  background:var(--surface);flex-shrink:0;overflow:hidden}
.macro-i img{width:100%;height:100%;object-fit:contain;padding:8%}
.macro-none{font-size:1.2rem}
.macro-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.macro-b b{font-size:var(--f4);font-weight:660;letter-spacing:-.015em}
.macro-b span{font-size:var(--f1);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Campanha estrutural: coleção editorial, sem cromo de promoção. */
.camp{display:flex;flex-direction:column;gap:var(--g3);padding:var(--g4);border-radius:var(--rx3);
  background:var(--band)}
.camp-h .cap{color:var(--brand)}
.camp-h b{display:block;font-size:var(--f6);font-weight:700;letter-spacing:-.02em;margin-top:3px}

/* Parceiro — identidade da distribuidora (nível acima da marca). */
.partner-d{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:linear-gradient(140deg,var(--brand),color-mix(in srgb,var(--brand) 55%,#000));flex-shrink:0}
.partner{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:var(--rx3);
  background:var(--band);text-align:left;transition:background var(--t1),transform var(--t1) var(--ez)}
.partner:hover{background:var(--w3);transform:translateY(-1px)}
/* Marca do parceiro: usa o LOGOTIPO REAL quando existe (servido do Catálogo
   Online, read-only). O logo tem fundo claro próprio, então recebe moldura
   clara nos dois temas — nunca some no escuro. */
.partner-mk{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--rx2);flex-shrink:0;
  background:#fff;overflow:hidden}
.partner-mk img{width:100%;height:100%;object-fit:contain}
.partner-mk .partner-d{width:16px;height:16px}
.partner-b{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.partner-t{display:flex;align-items:center;gap:8px;font-size:var(--f6);font-weight:700;letter-spacing:-.02em}
.partner-seal{font-size:var(--f1);font-weight:640;padding:2px 8px;border-radius:var(--rxf);
  background:var(--pos-tint);color:var(--pos);letter-spacing:0}
.partner-bar{display:flex;align-items:center;gap:10px;padding-top:var(--g4)}
.partner-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--rxf);
  background:var(--band);font-size:var(--f2);font-weight:620;color:var(--ink-2)}
.cart-group{display:flex;align-items:center;justify-content:space-between;gap:var(--g3);
  padding-bottom:var(--g3);margin-bottom:var(--g2);border-bottom:1px solid var(--rule)}

/* "Vendido por" no produto. */
.sold-by{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:var(--f2);
  font-weight:600;color:var(--ink-2)}

/* Estrutura de expansão — categorias futuras, não clicáveis. */
.soon{display:flex;flex-wrap:wrap;gap:7px}
.soon-i{font-size:var(--f2);font-weight:560;padding:8px 13px;border-radius:var(--rxf);
  color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--rule);background:
  repeating-linear-gradient(135deg,transparent,transparent 7px,
    color-mix(in srgb,var(--rule) 30%,transparent) 7px,color-mix(in srgb,var(--rule) 30%,transparent) 14px)}

/* Fornecedor destaque como CARD comercial compacto (deixou de ser faixa). */
.spot-card{display:flex;align-items:center;gap:14px;width:100%;padding:14px;
  border-radius:var(--rx3);background:var(--band);text-align:left;
  transition:background var(--t1),transform var(--t1) var(--ez)}
.spot-card:hover{background:var(--w3);transform:translateY(-1px)}
.spot-b{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.spot-b b{font-size:var(--f6);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.spot-go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--surface);flex-shrink:0}
.spot-go svg{width:17px;height:17px}

.spot{display:flex;flex-direction:column;gap:var(--g4);padding-block:var(--g6)}
.spot-mk{width:56px;height:56px;border-radius:var(--rx3);display:grid;place-items:center;
  font-size:var(--f5);font-weight:740;letter-spacing:-.03em;color:#fff;
  background:linear-gradient(145deg,var(--sa,#6b645c),var(--sb,#2a251f))}

/* Carrossel de cervejarias (ECH-041): ~2,6 cards visíveis em 390px com prévia
   parcial do próximo, scroll-snap suave para o toque parar alinhado. */
.who-grid{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:var(--g2);
  overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-block:2px var(--g2)}
.who-grid::-webkit-scrollbar{display:none}
.wc{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:118px;padding:var(--g4) 10px;scroll-snap-align:start;
  border-radius:var(--rx3);background:var(--band);
  transition:background var(--t1),transform var(--t1)}
/* Hover só com ponteiro real; toque usa o :active abaixo (ECH-041 FASE 8). */
@media (hover:hover){ .wc:hover{background:var(--w3)} }
/* Feedback imediato de toque/seleção: afunda de leve e escurece a placa. */
.wc:active{transform:scale(.97);background:var(--w3)}
/* `.wc-m` é um <span> dentro de `.wc`, então `.wc span` (mais específico) vinha
   sobrescrevendo cor e tamanho: a inicial saía cinza e a 11px sobre o gradiente
   colorido, reprovando contraste. A especificidade daqui precisa vencer. */
.wc .wc-m{width:46px;height:46px;border-radius:var(--rx2);display:grid;place-items:center;
  font-size:var(--f3);font-weight:740;color:#fff;
  background:linear-gradient(145deg,var(--sa,#6b645c),var(--sb,#2a251f))}
.wc b{font-size:var(--f2);font-weight:620;text-align:center;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wc .wc-q{font-size:var(--f1);color:var(--ink-3)}

/* Convite compacto: estado vazio que NÃO esvazia a tela. Um vazio de meia
   página no topo da home faz o aplicativo parecer morto. */
.nudge{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--rx3);
  background:var(--band)}
.nudge-i{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--rx2);
  background:var(--surface);color:var(--ink-3);flex-shrink:0}
.nudge b{display:block;font-size:var(--f3);font-weight:650}
.nudge span{display:block;font-size:var(--f2);color:var(--ink-3);margin-top:2px}
@media (max-width:520px){
  .nudge{flex-wrap:wrap}
  .nudge .act{width:100%}
}

/* Espaço patrocinável — estrutural, vazio, honesto. */
.slot{border-radius:var(--rx3);padding:var(--g6) var(--g5);text-align:center;
  background:var(--band);display:flex;flex-direction:column;align-items:center;gap:7px}
.slot svg{width:22px;height:22px;color:var(--ink-3)}
.slot b{font-size:var(--f3);font-weight:640;color:var(--ink-2)}
.slot span{font-size:var(--f2);color:var(--ink-3);max-width:42ch}

/* --- 14. Avisos ---------------------------------------------------------- */
.msg{display:flex;gap:12px;padding:14px 16px;border-radius:var(--rx2);
  background:var(--att-tint);font-size:var(--f3);max-width:780px}
.msg svg{width:18px;height:18px;color:var(--att);margin-top:1px}
.msg.pos{background:var(--pos-tint)} .msg.pos svg{color:var(--pos)}
.msg.neg{background:var(--neg-tint)} .msg.neg svg{color:var(--neg)}
.msg b{display:block;font-weight:660;margin-bottom:2px}
.msg span{color:var(--ink-2)}

/* --- 15. Produto (tela) -------------------------------------------------- */
.pdp{display:flex;flex-direction:column}
/* No mobile a foto sangra até a borda — é a primeira coisa, em tela cheia. */
.pdp-ph{position:relative;aspect-ratio:1;background:#fff;
  margin-inline:calc(var(--pad) * -1);display:grid;place-items:center;
  overflow:hidden;cursor:zoom-in}
/* A ECH-036 removeu o `onload` que acrescentava `.on` mas o `opacity:0` ficou
   aqui: a foto da tela de produto carregava e permanecia INVISIVEL. A regra e
   a mesma da home — a imagem nunca depende de JavaScript para aparecer, e a
   unica transicao que sobra e a do zoom. */
.pdp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7%;
  transition:transform var(--t3) var(--ez)}
/* Mesmo sistema de duas camadas do card (ECH-045D): o fundo preenche a moldura
   com a cor da própria foto; o produto continua inteiro por cima. O zoom age
   só na camada principal — ampliar o borrão não teria sentido. */
.pdp-ph .ph-bg{object-fit:cover;padding:0;transform:scale(1.18);
  filter:blur(20px) saturate(1.06) brightness(.95);opacity:.55;pointer-events:none;
  transition:none}
.pdp-ph .ph-fg{position:relative}
.pdp-ph.zm{cursor:zoom-out}
.pdp-ph.zm .ph-fg{transform:scale(1.9)}
.pdp-ph .no{font-size:3.2rem;opacity:.18}
.pdp-hint{text-align:center;font-size:var(--f2);color:var(--ink-3);padding-top:9px}

.pdp-i{display:flex;flex-direction:column;gap:var(--g5);padding-top:var(--g5);min-width:0}
.price{font-size:var(--f9);font-weight:740;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums}
.price-s{font-size:var(--f3);color:var(--ink-2);margin-top:7px}

.spec{display:flex;flex-direction:column}
.spec div{display:flex;align-items:center;justify-content:space-between;gap:var(--g4);
  padding:13px 0;border-bottom:1px solid var(--rule);font-size:var(--f3)}
.spec div:last-child{border-bottom:0}
.spec dt{color:var(--ink-3)}
.spec dd{margin:0;font-weight:620;text-align:right;font-variant-numeric:tabular-nums}

.step{display:inline-flex;align-items:center;border-radius:var(--rxf);background:var(--band)}
.step button{width:46px;height:46px;display:grid;place-items:center;font-size:var(--f6);
  color:var(--ink-2);border-radius:50%;transition:background var(--t1)}
.step button:hover:not(:disabled){background:var(--w3)}
.step button:disabled{opacity:.28;cursor:not-allowed}
.step span{min-width:50px;text-align:center;font-weight:690;font-variant-numeric:tabular-nums}

.quick{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* REMOVIDO (ECH-024): produto em 2 colunas com foto sticky. A pagina de
   produto e vertical em qualquer largura, como em aplicativo. */
/* REMOVIDO (ECH-024): produto em 2 colunas — a composicao e vertical sempre. */

/* --- 16. Carrinho -------------------------------------------------------- */
/* Linha densa: miniatura VISÍVEL (fundo branco, a foto vem recortada em
   branco), nome + meta numa coluna, valor + remover na outra. Compacto. */
.line{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding-block:12px;border-bottom:1px solid var(--rule)}
.line:last-of-type{border-bottom:0}
.line-ph{width:56px;height:56px;border-radius:var(--rx2);background:#fff;
  box-shadow:inset 0 0 0 1px var(--rule);display:grid;place-items:center;overflow:hidden}
.line-ph img{width:100%;height:100%;object-fit:contain;padding:7%}
.line-no{font-size:1.3rem;opacity:.3}
.line-c{min-width:0}
.line-t{font-size:var(--f3);font-weight:560;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-m{font-size:var(--f2);color:var(--ink-3);margin-top:2px}
.line-v{display:flex;flex-direction:column;align-items:flex-end;gap:3px;
  font-size:var(--f5);font-weight:690;font-variant-numeric:tabular-nums;white-space:nowrap}
.line-rm{font-size:var(--f1);font-weight:560;color:var(--ink-3)}
.line-rm:hover{color:var(--neg)}

/* CTA principal do carrinho: no mobile vive na barra fixa (.dock); no desktop,
   na coluna de resumo. Evita dois CTAs iguais em lugares diferentes. */
.cta-desk{display:none}
/* REMOVIDO (ECH-024): CTA exclusivo de desktop — o carrinho tem um CTA so. */

.sum{display:flex;flex-direction:column;gap:11px}
.sum-r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--g4);font-size:var(--f3)}
.sum-r span{color:var(--ink-3)}
.sum-r b{font-variant-numeric:tabular-nums;font-weight:640}
.sum-tot{font-size:var(--f7);font-weight:730;letter-spacing:-.032em}
.track{height:5px;border-radius:var(--rxf);background:var(--w3);overflow:hidden}
.track i{display:block;height:100%;border-radius:var(--rxf);background:var(--brand);
  transition:width var(--t3) var(--ez)}
.track.done i{background:var(--pos)}
.slots{display:flex;flex-direction:column;gap:7px;padding-top:12px;border-top:1px solid var(--rule)}
.slot-r{display:flex;align-items:baseline;justify-content:space-between;gap:var(--g4);font-size:var(--f2)}
.slot-r span{color:var(--ink-3)}
.slot-r b{font-weight:540;color:var(--ink-3);font-style:italic}

/* Barra de carrinho persistente (benchmark Juntos+): subtotal + progresso do
   mínimo + acesso ao carrinho, durante a compra. Fica acima da navegação
   inferior; o corpo ganha respiro quando ela aparece para não cobrir conteúdo. */
.cartbar{position:fixed;left:0;right:0;bottom:var(--tab);z-index:60;
  padding:8px var(--pad) calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--rule)}
.cartbar-in{display:flex;align-items:center;gap:12px;width:100%;max-width:var(--max);
  margin:0 auto;min-height:44px;padding:6px 8px 6px 6px;border-radius:var(--rx3);
  background:var(--ink);color:var(--surface);
  transition:transform var(--t1) var(--ez),opacity var(--t1)}
.cartbar-in:active{transform:scale(.99)}
.cartbar-c{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;
  border-radius:var(--rx2);background:var(--brand);color:var(--brand-ink);
  font-weight:720;font-variant-numeric:tabular-nums;flex-shrink:0}
.cartbar-d{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0;text-align:left}
.cartbar-d b{font-size:var(--f5);font-weight:720;font-variant-numeric:tabular-nums}
.cartbar-d small{font-size:var(--f1);opacity:.85}
.cartbar-cta{display:inline-flex;align-items:center;gap:5px;font-size:var(--f3);font-weight:640;
  padding-right:8px;white-space:nowrap;flex-shrink:0}
.cartbar-cta svg{width:16px;height:16px}
/* REMOVIDO (ECH-024): a barra de carrinho fica SEMPRE acima da navegacao
   inferior — a navegacao nunca migra para o topo. */
body[data-cartbar]{padding-bottom:calc(var(--tab) + 66px + env(safe-area-inset-bottom))}


/* Folha fixa do carrinho no mobile — o total nunca sai da tela. */
.dock{position:fixed;left:0;right:0;bottom:var(--tab);z-index:75;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--rule);box-shadow:0 -8px 24px rgb(20 18 16/.06)}
.dock small{display:block;font-size:var(--f1);color:var(--ink-3)}
.dock b{display:block;font-size:var(--f6);font-weight:730;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}

/* REMOVIDO (ECH-024): carrinho 2 colunas — composicao widescreen reprovada pelo fundador. */

/* --- 17. Estados --------------------------------------------------------- */
.sk{position:relative;overflow:hidden;background:var(--band);border-radius:var(--rx2)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgb(255 255 255/.5),transparent);
  animation:sh 1.5s infinite}
@keyframes sh{100%{transform:translateX(100%)}}
.sk-c{aspect-ratio:.72;border-radius:var(--rx2)}
.sk-l{height:11px;border-radius:var(--rxf)}

.void{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:var(--g8) var(--g5);text-align:center}
.void-i{width:56px;height:56px;border-radius:var(--rx3);display:grid;place-items:center;
  background:var(--band);color:var(--ink-3);margin-bottom:2px}
.void-i svg{width:26px;height:26px}
.void b{font-size:var(--f6);font-weight:670;letter-spacing:-.02em}
.void p{font-size:var(--f3);color:var(--ink-3);max-width:36ch}

.spin{width:16px;height:16px;border:2px solid rgb(255 255 255/.3);border-top-color:currentColor;
  border-radius:50%;animation:sp .6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 16px + env(safe-area-inset-bottom));
  z-index:250;transform:translate(-50%,18px);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:var(--rxf);
  background:var(--w9);color:var(--w0);font-size:var(--f3);font-weight:580;
  box-shadow:var(--lift3);max-width:90vw;
  transition:opacity var(--t2) var(--ez),transform var(--t2) var(--spring)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:17px;height:17px;color:#5cd98d}
body:has(.dock) .toast{bottom:calc(var(--tab) + 86px + env(safe-area-inset-bottom))}


/* --- 18. Entrada --------------------------------------------------------- */
/* Entrada de tela: APENAS deslize, sem fade.
   ECH-020 — a versão anterior animava opacity 0→1 com fill-mode `both`.
   Durante o animation-delay o conteúdo ficava em opacity 0, e quando o Chrome
   throttla animações (aba sem foco no instante do render) o conteúdo ficava
   PRESO invisível — foi a causa do "carrinho invisível". Conteúdo comercial
   nunca pode depender de animação para ser legível. Agora anima só o
   translateY: se a animação pausar, nada fica escondido. */
.in>*{animation:up .34s var(--ez) both}
.in>*:nth-child(1){animation-delay:0ms}  .in>*:nth-child(2){animation-delay:32ms}
.in>*:nth-child(3){animation-delay:64ms} .in>*:nth-child(4){animation-delay:96ms}
.in>*:nth-child(n+5){animation-delay:128ms}
@keyframes up{from{transform:translateY(9px)}to{transform:none}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .it:hover .it-ph{transform:none}
}

/* --- 19. Entrada de sessão ---------------------------------------------- */
.gate{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding:var(--g7) var(--pad);max-width:440px;margin:0 auto;gap:var(--g6)}
.fld{display:flex;flex-direction:column;gap:8px}
.fld label{font-size:var(--f2);font-weight:620;color:var(--ink-2)}
.fld input{height:52px;padding-inline:16px;background:var(--band);border:0;border-radius:var(--rx2);
  outline:none;font-size:var(--f6);font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow var(--t1),background var(--t1)}
.fld input:focus{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ink)}
.fld .bad{font-size:var(--f2);color:var(--neg);font-weight:580;min-height:16px}

/* --- 18. Camada comercial (ECH-023) --------------------------------------
   Vitrines, campanhas com arte real, BeerCash e desconto verdadeiro.
   Nenhum destes componentes inventa dado: todos só existem na tela quando a
   fonte devolveu o valor correspondente. */

/* Selos adicionais — recortes REAIS da fonte, não heurística.
   Cores que NÃO invertem: o selo fica sobre a moldura clara da foto. */
.seal.top{background:var(--seal-top);color:#fff}
.seal.flag{background:var(--seal-flag);color:#fff}

/* Subtítulo da vitrine: diz de onde vem o recorte, sem prometer nada. */
/* Espaco titulo->descricao 4px e descricao->conteudo 12px, a escala da
   ECH-037. Antes o subtitulo era puxado para cima com margem negativa. */
.rail-sub{font-size:var(--f3);color:var(--ink-3);margin:0 0 var(--g3);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ECH-036: `.it-was` e `.it-off` sairam do card — o percentual duplicava o
   selo e o riscado migrou para `.it-eco`, junto da economia em reais.
   A tela do PRODUTO mantem o par abaixo, onde ha largura para os dois. */
.price-was{font-size:var(--f4);color:var(--ink-3);text-decoration:line-through;
  font-weight:560;margin-left:10px;letter-spacing:0}
.price-off{font-size:var(--f4);font-weight:760;color:var(--pos);margin-left:8px;
  letter-spacing:0}

/* BeerCash — sempre acompanhado do aviso honesto do programa. */
.it-bc{min-height:16px;font-size:var(--f1);font-weight:700;color:var(--pos);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ECH-039: título curto + valor + uma frase. O aviso completo foi para o
   tooltip. Ícone alinhado, mesma família do bloco da Home. */
.bc-blk{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:1px;
  align-items:center;margin-top:14px;padding:11px 13px;border-radius:var(--rx2);
  background:var(--pos-tint)}
.bc-blk-i{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;
  border-radius:var(--rx2);background:var(--pos);color:var(--pos-tint)}
.bc-blk-i svg{width:20px;height:20px}
.bc-blk b{font-size:var(--f4);color:var(--pos);align-self:end}
.bc-blk-s{font-size:var(--f2);color:var(--ink-2);line-height:1.35;align-self:start}
.bc-note{font-size:var(--f2);line-height:1.5;margin:-8px 0 var(--g5);max-width:62ch}

/* Campanhas: arte REAL do Catálogo Online, servida somente leitura.
   A arte é o herói; o texto fica numa faixa própria, nunca sobre a imagem —
   assim o contraste não depende do conteúdo da foto. */
.camps{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,300px);
  gap:var(--g3);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);padding-bottom:4px}
.camps::-webkit-scrollbar{display:none}
.camps>*{scroll-snap-align:start}
/* A faixa ".camp" (ECH-028) foi substituida pelos dois carrosseis da ECH-036.
   O CSS dela sobrevivia carregando `opacity:0` + `.on` — o mesmo par que
   escondia as fotos. Removido para nao poder voltar a ser aplicado. */
.camp-n{font-size:var(--f1);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Descrição editorial do rótulo. */
.about{display:flex;flex-direction:column;gap:9px}
.about h2{color:var(--ink-3)}
.about p{font-size:var(--f4);line-height:1.62;color:var(--ink-2);max-width:68ch}
.about-h{font-size:var(--f3)}
.about-h b{color:var(--ink)}




/* --- 19. Fixos presos à moldura (ECH-024) --------------------------------
   `container-type:inline-size` NÃO estabeleceu bloco contentor para os
   descendentes fixos neste motor (getComputedStyle mostrou contain:none), então
   a navegação inferior vazava para os 1440px do monitor. Em vez de depender
   desse comportamento, os fixos são centrados explicitamente sobre a moldura.
   Um único conjunto de regras vale para qualquer largura de tela. */
.tabs,.cartbar,.dock,.sheet,.veil{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--app);
}
/* O véu escurece só a moldura — fora dela já existe o fundo externo neutro. */
.veil{height:100dvh;top:0}
/* A folha desliza a partir da própria moldura, não da janela. */
.sheet{transform:translateX(-50%) translateY(100%)}
.sheet.open{transform:translateX(-50%) translateY(0)}
/* O toast já usa left:50%/translateX(-50%): como a moldura também é centrada,
   ele cai naturalmente sobre ela. Só o teto de largura precisa acompanhar. */
.toast{max-width:calc(var(--app) - 2 * var(--pad))}

/* --- 20. Foto ausente e hierarquia do card (ECH-024) ---------------------
   O emoji de caneca parecia falha técnica. O placeholder agora é sóbrio e
   ocupa a MESMA caixa da foto, então o card não muda de altura. O preço e o
   CTA continuam intactos: falta de foto não pode depreciar o produto. */
/* A moldura da foto (--frame) é CLARA nos dois temas, então a cor do texto
   aqui também não pode inverter: em --w5 o rótulo caía para 4.17 no tema
   escuro. Valor fixo, mesma lógica dos selos. */
.nofoto{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;
  background:var(--frame);color:#6b645c}
.nofoto svg{width:30px;height:30px;opacity:.55}
.nofoto small{font-size:9.5px;letter-spacing:.03em;text-align:center;
  padding-inline:8px;line-height:1.3}


/* Selo de desconto REAL — entra quando o preço chega, na frente dos demais. */
.seal.off{background:var(--seal-flag);color:#fff}

/* Múltiplo saiu da pilha de selos: é dado operacional, não merchandising. */
.it-mult{font-size:var(--f1);color:var(--ink-3);letter-spacing:.01em}

/* Respiro entre os blocos de preço para nada colidir dentro da coluna
   estreita: preço, múltiplo e BeerCash ficam em linhas próprias. */
.it-b{gap:1px}
.it-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px}
.it-bc{margin-top:2px}

/* --- 21. Filtros ativos como chips removíveis (ECH-024) ------------------ */
.chips-on{margin-top:10px}
.chips-on .pill i{font-style:normal;font-size:var(--f4);line-height:1;opacity:.75;
  margin-left:2px}
.pill-clear{color:var(--ink-3)}

/* Fallbacks sem emoji (ECH-024): quando não há foto, um bloco neutro com a
   silhueta da garrafa — nunca um emoji, que muda de desenho por sistema e
   parece protótipo. */
.macro-none,.sug-nf,.line-no{background:var(--frame);border-radius:var(--rx1);
  display:grid;place-items:center;position:relative}
.macro-none::after,.sug-nf::after,.line-no::after{
  content:"";width:44%;height:58%;border-radius:2px 2px 4px 4px;
  border:1.4px solid #b4aea6;border-top-width:6px;
  border-top-left-radius:50% 12px;border-top-right-radius:50% 12px}
.sug-nf{width:34px;height:34px}
.pdp-ph.semfoto{background:var(--frame)}

/* --- 22. Primeira dobra comercial (ECH-025) ------------------------------
   A dobra media 844px e não mostrava UM produto. Era ocupada por saudação
   passiva (26px), um cartão de reposição VAZIO de 136px e um banner de 225px.
   A saudação saiu; o cartão vazio virou faixa de uma linha; o estado da conta
   virou chip acionável. O objetivo é simples: quem abre o app vê o que pode
   comprar, não um texto de boas-vindas. */

/* Estado da conta: informa e leva à conta, sem ocupar um bloco inteiro. */
.conta-chip{display:flex;align-items:center;gap:8px;width:100%;margin-top:10px;
  padding:9px 12px;border-radius:var(--rx2);background:var(--att-tint);
  color:var(--att);font-size:var(--f2);font-weight:640;text-align:left}
.conta-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.conta-go{margin-left:auto;font-weight:700;text-decoration:underline}

/* Pedido rápido SEM histórico: faixa de uma linha, com CTA na própria faixa.
   Teto de ~96px contra os 136px do cartão anterior. */
.quick-empty{display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 14px;border-radius:var(--rx3);background:var(--band);
  box-shadow:inset 0 0 0 1px var(--rule);text-align:left}
.quick-i{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;
  border-radius:var(--rx2);background:var(--surface);color:var(--ink-2)}
.quick-i svg{width:19px;height:19px}
.quick-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.quick-t b{font-size:var(--f3);font-weight:660}
.quick-t small{font-size:var(--f2);color:var(--ink-3);line-height:1.35}
.quick-go{display:grid;place-items:center;width:26px;height:26px;flex-shrink:0;
  border-radius:50%;background:var(--surface);color:var(--ink-2)}
.quick-go svg{width:15px;height:15px}

/* Ritmo da dobra (ECH-025): os vãos somavam ~93px de branco entre a busca e as
   categorias — espaço que não vendia nada e empurrava produto para fora da
   tela. O respiro continua existindo, só deixa de ser desperdício. */
.home-top{padding-bottom:var(--g3)}
.home-top + .blk-c{padding-top:var(--g3)}
.banner + *,
.blk-c:has(> .banner) + .blk-c{padding-top:var(--g4)}

/* --- 23. Estilos como descoberta comercial (ECH-027) ---------------------
   Antes: lista de pílulas sem CTA, 94px que não ajudavam a escolher.
   Agora: cada estilo diz teor e amargor MÉDIOS dos produtos reais daquele
   estilo. Onde a fonte não tem número, a linha não aparece. */
.estilos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--g2)}
.estilo{display:flex;flex-direction:column;gap:2px;padding:11px 13px;
  border-radius:var(--rx2);background:var(--band);text-align:left;
  transition:background var(--t1) var(--ez)}
.estilo:hover{background:var(--w3)}
.estilo-n{font-size:var(--f3);font-weight:660;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.estilo-q{font-size:var(--f1);color:var(--ink-3);font-variant-numeric:tabular-nums}
.estilo-p{font-size:var(--f1);color:var(--ink-2);margin-top:3px}

/* --- 24. Categorias visuais (ECH-028) ------------------------------------
   A referência do fundador mostra a categoria como superfície PRINCIPAL:
   tile quadrado de fundo colorido, foto do produto dominante, rótulo curto
   FORA do tile. Manter o texto fora resolve contraste de uma vez: o nome fica
   sempre sobre a superfície do app, nunca sobre a fotografia. */
/* ECH-037: tres colunas gastavam 528px — o maior bloco da Home — para oito
   atalhos, e a ultima linha ficava com dois tiles e um buraco. Quatro colunas
   fecham em duas linhas exatas e devolvem quase 200px a jornada de compra. */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g3) var(--g2)}
.ctile{display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;min-width:0}
/* TILE DE CATEGORIA — RESTAURADO da ECH-030 (commit 72f43a3) pela ECH-032.
   A composicao de 3 produtos da ECH-031 foi reprovada e removida. Tentei tres
   substitutas (palco branco, halo radial, cor como moldura) e NENHUMA ficou
   claramente melhor que este tile: com fotos recortadas sobre branco, toda
   variacao ou criava retangulo duro ou dissolvia o produto. A missao manda
   manter o rollback em vez de aplicar solucao inferior — e e o que esta feito.
   A busca por uma arte de categoria melhor esta no backlog, e passa por ter
   asset editorial proprio, nao por CSS sobre foto recortada em branco. */
.ctile-art{position:relative;width:100%;aspect-ratio:1;border-radius:var(--rx2);
  background:var(--cc,var(--w3));overflow:hidden;display:grid;place-items:center;
  transition:transform var(--t2) var(--ez)}
.ctile:hover .ctile-art{transform:translateY(-2px)}
/* ECH-036: a identidade da categoria e um DESENHO da familia, nao a foto de um
   SKU. Vetorial, local, de proporcao identica em todos os tiles — nao depende
   da rede, nao pisca e nao faz duas categorias parecerem a mesma so porque
   compartilham um produto. */
.ctile-art svg{width:52%;height:52%;color:#fff;opacity:.94;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgb(0 0 0/.3))}
/* Brilho diagonal discreto: sem ele o quadrado de cor chapada parece um
   placeholder de layout, nao um cartao. */
.ctile-art::after{content:"";position:absolute;inset:0;
  background:radial-gradient(115% 85% at 84% 12%,rgb(255 255 255/.16),transparent 62%)}
.ctile-n{font-size:var(--f2);font-weight:620;line-height:1.2;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ctile-q{font-size:var(--f1);color:var(--ink-3);font-variant-numeric:tabular-nums;
  margin-top:-3px}

/* "Ver todas" (ECH-037): superficie clara com icone escuro. As sete familias
   usam cor profunda porque cada cor CLASSIFICA; a saida para a tela completa
   nao e uma familia e nao disputa atencao com elas. */
.ctile-todas .ctile-art{background:var(--band);box-shadow:inset 0 0 0 1.5px var(--rule)}
.ctile-todas .ctile-art svg{color:var(--ink-2);filter:none;opacity:1}
.ctile-todas .ctile-art::after{display:none}

/* "Ver mais / Ver menos": mesmo formato de tile, sem foto — expande a grade
   no lugar, sem navegar para outra tela. */
.ctile-art-mais{background:var(--band);box-shadow:inset 0 0 0 1.5px var(--rule)}
.ctile-sinal{font-size:26px;font-weight:300;color:var(--ink-2);line-height:1}
.ctile-mais .ctile-q{display:none}

/* --- 25. Pop-up de campanha (ECH-028) ------------------------------------
   Vive DENTRO da moldura, como todo o resto. Botão de fechar grande e fora do
   conteúdo, arte real no topo, texto curto e um CTA — o padrão da referência,
   com identidade e paleta Beer Lab. */
.campv{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:var(--g4)}
.campv-bg{position:absolute;inset:0;background:rgb(20 18 16/.62);
  backdrop-filter:blur(2px)}
.campv-card{position:relative;width:100%;max-width:calc(var(--app) - var(--g6));
  max-height:86dvh;overflow-y:auto;background:var(--surface);
  border-radius:var(--rx4);box-shadow:var(--lift3);
  animation:campIn var(--t3) var(--spring) both}
@keyframes campIn{from{transform:translateY(16px) scale(.97)}to{transform:none}}
.campv-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--surface);color:var(--ink);box-shadow:var(--lift1)}
/* As artes da base sao banners LARGOS de desktop. Com `cover` elas eram
   cortadas e perdiam metade da mensagem. `contain` sobre fundo escuro mostra a
   arte inteira, sem tocar no arquivo original (que e protegido). */
.campv-img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;
  background:#141210;border-radius:var(--rx4) var(--rx4) 0 0}
.campv-b{padding:var(--g5) var(--g5) var(--g5)}
.campv-t{font-size:var(--f7);font-weight:700;letter-spacing:-.025em;line-height:1.15}
.campv-s{font-size:var(--f3);color:var(--ink-2);line-height:1.5;margin:8px 0 16px}
.campv-n{display:block;width:100%;margin-top:10px;padding:10px;
  font-size:var(--f3);font-weight:600;color:var(--ink-3)}

/* A entrada NUNCA determina visibilidade: com movimento reduzido o conteudo
   aparece igual, so sem animacao. */
@media (prefers-reduced-motion: reduce){ .campv-card{animation:none} }

/* --- 26. Menu lateral e cabeçalho contextual (ECH-029) -------------------
   O drawer é o padrão da referência: identidade no topo, atalhos reais e uma
   grade compacta de categorias. Vive DENTRO da moldura — como o modal e a
   bottom sheet, é centrado sobre ela e nunca vaza para o monitor. */
.drw{position:fixed;inset:0;z-index:280;left:50%;transform:translateX(-50%);
  width:100%;max-width:var(--app)}
.drw-bg{position:absolute;inset:0;background:rgb(20 18 16/.5)}
.drw-p{position:absolute;inset:0 0 0 0;width:88%;max-width:340px;
  background:var(--surface);box-shadow:var(--lift3);
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(-100%);transition:transform var(--t3) var(--ez)}
.drw.on .drw-p{transform:none}
@media (prefers-reduced-motion: reduce){ .drw-p{transition:none;transform:none} }

.drw-h{display:flex;align-items:flex-start;gap:10px;padding:var(--g5) var(--g4) var(--g4)}
.drw-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.drw-id b{font-size:var(--f4);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.drw-id span{font-size:var(--f2);color:var(--ink-3)}
.drw-parc{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:var(--f1)!important}
.drw-x{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:var(--band);color:var(--ink);flex-shrink:0}

.drw-links,.drw-fim{display:flex;flex-direction:column;padding:0 var(--g2) var(--g3)}
.drw-fim{margin-top:auto;padding-top:var(--g4);border-top:1px solid var(--rule)}
.drw-i{display:flex;align-items:center;gap:12px;width:100%;padding:12px var(--g3);
  border-radius:var(--rx2);font-size:var(--f4);font-weight:560;text-align:left;
  transition:background var(--t1) var(--ez)}
.drw-i:hover{background:var(--band)}
.drw-ic{display:grid;place-items:center;width:22px;color:var(--ink-2);flex-shrink:0}
.drw-ic svg{width:19px;height:19px}
.drw-go{margin-left:auto;color:var(--w4)}
.drw-go svg{width:15px;height:15px}
.drw-sair{color:var(--neg)}
.drw-sair .drw-ic{color:var(--neg)}

.drw-cats{padding:var(--g3) var(--g4) var(--g4)}
.drw-cats h3{font-size:var(--f1);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.drw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g2)}
.dtile{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.dtile-art{width:100%;aspect-ratio:1;border-radius:var(--rx2);background:var(--cc,var(--w3));
  overflow:hidden;display:grid;place-items:center}
/* O tile do drawer passou a usar icone SVG na ECH-036; a regra de <img> aqui
   era codigo morto com `opacity:0`. */
.dtile-n{font-size:9.5px;line-height:1.15;text-align:center;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- CAMILA (ECH-045D): acesso no header + shell de entrada ---------------
   O acesso fica antes do código do cliente, com alvo de 44px. O halo é
   estático: um brilho contínuo ao lado da identidade cansaria em uso diário. */
.top-cml{display:grid;place-items:center;width:44px;height:44px;margin-left:auto;
  margin-right:2px;border-radius:var(--rxf);color:var(--brand);
  background:var(--brand-tint);transition:background var(--t1),transform var(--t1)}
.top-cml svg{width:21px;height:21px}
@media (hover:hover){ .top-cml:hover{background:var(--w3)} }
.top-cml:active{transform:scale(.94)}
.top-cml[aria-expanded="true"]{background:var(--brand);color:var(--brand-ink)}
/* Com a Camila no header, a identidade do cliente perde o empurrão automático. */
.top-cml ~ .who{margin-left:0}
/* Ícone da IA no drawer: mesma cor de marca, para ler como a mesma coisa. */
.drw-ic-ia{color:var(--brand)}

/* Shell: painel inferior, altura contida — é um ponto de ENTRADA, não uma
   conversa. Entra no mesmo registro de camadas dos outros overlays. */
.cml{position:fixed;inset:0;z-index:260;display:flex;align-items:flex-end;justify-content:center}
.cml-bg{position:absolute;inset:0;background:rgb(20 18 16/.5)}
.cml-p{position:relative;width:100%;max-width:var(--app);
  background:var(--surface);border-radius:var(--rx3) var(--rx3) 0 0;
  padding:var(--g4) var(--g4) calc(var(--g5) + env(safe-area-inset-bottom));
  box-shadow:var(--lift3);max-height:86vh;overflow-y:auto}
.cml-h{display:flex;align-items:center;gap:var(--g3);margin-bottom:var(--g3)}
.cml-ic{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;
  border-radius:var(--rx2);background:var(--brand-tint);color:var(--brand)}
.cml-ic svg{width:24px;height:24px}
.cml-id{min-width:0;flex:1}
.cml-t{font-size:var(--f5);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0}
.cml-s{font-size:var(--f2);color:var(--ink-3)}
.cml-x{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--band);color:var(--ink-2)}
.cml-msg{font-size:var(--f3);color:var(--ink-2);line-height:1.45;margin:0 0 var(--g4)}
.cml-acoes{display:flex;flex-direction:column;gap:var(--g2)}
.cml-a{display:flex;align-items:center;gap:var(--g3);width:100%;min-height:56px;
  padding:10px var(--g3);border-radius:var(--rx2);background:var(--band);
  text-align:left;transition:background var(--t1)}
@media (hover:hover){ .cml-a:hover{background:var(--w3)} }
.cml-a:active{transform:scale(.99)}
.cml-a-t{flex:1;min-width:0;font-size:var(--f3);font-weight:620;color:var(--ink)}
.cml-a-d{font-size:var(--f1);color:var(--ink-3);text-align:right;max-width:46%}
.cml-a-go{display:grid;place-items:center;color:var(--ink-3)}
.cml-a-go svg{width:15px;height:15px}
/* Ação ainda sem fonte real: visualmente mais discreta, sem seta — o cliente
   entende que ali ainda não há para onde ir. */
.cml-a-off{opacity:.72}
.cml-a-avisou .cml-a-d{color:var(--att)}
.cml-nota{margin:var(--g4) 0 0;font-size:var(--f1);color:var(--ink-3);line-height:1.45}
@media (prefers-reduced-motion: reduce){ .cml-a:active,.top-cml:active{transform:none} }

/* ECH-047 — consulta real read-only dentro do shell. */
.cml-ask{display:flex;gap:var(--g2);margin:0 0 var(--g3)}
.cml-in{flex:1;min-width:0;height:46px;padding:0 var(--g3);border:1px solid var(--rule);
  border-radius:var(--rx2);background:var(--band);color:var(--ink);font-size:var(--f3)}
.cml-in:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.cml-send{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;
  border:none;border-radius:var(--rx2);background:var(--brand);color:#fff}
.cml-send svg{width:19px;height:19px}
.cml-send:active{transform:scale(.96)}
.cml-res{margin-top:var(--g3)}
.cml-res:empty{margin-top:0}
.cml-r{border-radius:var(--rx2);background:var(--band);padding:var(--g3);font-size:var(--f3);color:var(--ink-2)}
.cml-r-msg{margin:0 0 var(--g2);color:var(--ink);line-height:1.45}
.cml-r-load{display:flex;align-items:center;gap:var(--g2);color:var(--ink-3)}
.cml-dots{display:inline-flex;gap:3px}
.cml-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:cmlb 1s infinite}
.cml-dots i:nth-child(2){animation-delay:.15s}.cml-dots i:nth-child(3){animation-delay:.3s}
@keyframes cmlb{0%,80%,100%{opacity:.3}40%{opacity:1}}
.cml-pcs{display:flex;flex-direction:column;gap:var(--g2);margin:var(--g2) 0}
.cml-pc{display:flex;align-items:center;gap:var(--g3);width:100%;text-align:left;
  padding:var(--g2);border:1px solid var(--rule);border-radius:var(--rx2);background:var(--surface)}
.cml-pc:active{transform:scale(.99)}
.cml-pc-ph{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;overflow:hidden;
  border-radius:var(--rx1);background:var(--w3)}
.cml-pc-ph img{width:100%;height:100%;object-fit:contain}
.cml-pc-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.cml-pc-tx b{font-size:var(--f2);font-weight:640;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cml-pc-m{font-size:var(--f1);color:var(--ink-3)}
.cml-pc-pr{font-size:var(--f2);font-weight:640;color:var(--pos)}
.cml-pc-pr em{font-weight:400;font-style:normal;color:var(--ink-3)}
.cml-r-acts{display:flex;flex-wrap:wrap;gap:var(--g2);margin-top:var(--g2)}
.cml-fonte{display:block;margin-top:var(--g2);font-size:var(--f1);color:var(--ink-3)}
.cml-fonte-live{color:var(--pos)}
.cml-r-off p{margin:0 0 var(--g2)}

/* --- Aparência (ECH-044C): três opções lado a lado, estado atual evidente ---
   Segmentado em vez de lista: as três cabem numa linha, comparam-se de relance
   e o alvo de toque continua confortável. */
.drw-tema{padding:var(--g3) var(--g4) var(--g4)}
.drw-tema h3{font-size:var(--f1);font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.drw-temas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--g2)}
.drw-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;padding:8px 6px;border-radius:var(--rx2);
  background:var(--band);box-shadow:inset 0 0 0 1.5px transparent;
  font-size:var(--f2);font-weight:580;color:var(--ink-2);text-align:center;
  transition:background var(--t1),color var(--t1),box-shadow var(--t1)}
@media (hover:hover){ .drw-t:hover{background:var(--w3)} }
.drw-t:active{transform:scale(.97)}
.drw-t small{font-size:9.5px;line-height:1.15;color:var(--ink-3)}
/* Selecionado: preenchimento da marca + anel. Não depende só de cor — o anel
   garante leitura para quem não distingue o matiz. */
.drw-t.on{background:var(--brand-tint);color:var(--ink);font-weight:700;
  box-shadow:inset 0 0 0 1.5px var(--brand)}
.drw-t.on small{color:var(--ink-2)}

/* Cabeçalho contextual: voltar + título + busca + carrinho. Toda tela que não
   é a Home usa este padrão, como na referência. */
.ctx{position:sticky;top:var(--top);z-index:60;display:flex;align-items:center;gap:6px;
  padding:10px var(--pad);background:var(--surface);border-bottom:1px solid var(--rule)}
.ctx-t{flex:1;min-width:0;font-size:var(--f6);font-weight:700;letter-spacing:-.025em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctx-b{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  color:var(--ink);flex-shrink:0}
.ctx-b:hover{background:var(--band)}
#ctx-voltar svg{transform:rotate(180deg)}


/* --- 27. Filtros em dois níveis (ECH-030) --------------------------------
   O sheet plano despejava 106 opções de uma vez. Agora o nível 1 mostra só os
   GRUPOS — poucas escolhas por etapa — e a lista de cada critério abre no
   nível 2, com busca interna quando é longa. */
.fgrp{display:flex;align-items:center;gap:10px;width:100%;padding:15px var(--g4);
  border-radius:var(--rx2);text-align:left;transition:background var(--t1) var(--ez)}
.fgrp:hover{background:var(--band)}
.fgrp + .fgrp{box-shadow:inset 0 1px 0 var(--rule)}
.fgrp-t{font-size:var(--f4);font-weight:640;display:flex;align-items:center;gap:7px;
  flex-shrink:0}
.fgrp-n{font-style:normal;min-width:19px;height:19px;padding:0 6px;border-radius:var(--rxf);
  background:var(--brand);color:var(--brand-ink);font-size:var(--f1);font-weight:740;
  display:grid;place-items:center}
.fgrp-r{margin-left:auto;font-size:var(--f2);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fgrp-go{color:var(--w4);flex-shrink:0}
.fgrp-go svg{width:15px;height:15px}

.fbusca{padding:0 var(--g4) var(--g3)}
.fbusca input{width:100%;padding:11px 14px;border:0;border-radius:var(--rxf);
  background:var(--band);box-shadow:inset 0 0 0 1px var(--rule);font-size:var(--f3)}
.flista{display:flex;flex-direction:column;padding:0 var(--g2) var(--g3)}
.fopt{display:flex;align-items:center;gap:10px;width:100%;padding:12px var(--g3);
  border-radius:var(--rx2);font-size:var(--f3);text-align:left;
  transition:background var(--t1) var(--ez)}
.fopt:hover{background:var(--band)}
.fopt span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fopt i{font-style:normal;font-size:var(--f1);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.fopt.on{background:var(--brand-tint);font-weight:660}
.fopt.on::after{content:"✓";color:var(--brand);font-weight:800;margin-left:4px}
/* ECH-044B — nível de AGREGADOR (família de estilo, formato de embalagem):
   a linha leva ao detalhe, então precisa de seta e de uma segunda linha dizendo
   quantos valores oficiais existem dentro. */
.fopt-go > span{white-space:normal;display:flex;flex-direction:column;gap:2px}
.fopt-go::after{content:"›";margin-left:6px;color:var(--ink-3);font-size:var(--f4)}
.fopt-s{font-size:var(--f1);color:var(--ink-3);font-weight:500}
/* "Todos de X" é a saída para o recorte inteiro: separada do resto da lista. */
.fopt-todos{font-weight:660;border-bottom:1px solid var(--rule);border-radius:0;
  margin-bottom:var(--g2);padding-bottom:14px}
/* Nota honesta quando parte do grupo não tem volume declarado no cadastro. */
.fnota{padding:var(--g2) var(--g3) 0;font-size:var(--f1);color:var(--ink-3);line-height:1.45}

/* --- 28. Categorias maiores e agrupadas (ECH-031) ------------------------
   O fundador apontou tiles pequenos demais, sobretudo no drawer. A grade da
   Home ganha respiro e o rótulo cresce; no drawer os tiles saem de 4 colunas
   minúsculas para 2 grandes, com teto de 6 + CTA para a tela completa. */
.cgrid{gap:var(--g3) var(--g2)}
/* Duas linhas reservadas: a 360px "Mais pedidos" quebra e, sem a reserva, a
   contagem dele descia e desalinhava de toda a fileira. */
.ctile-n{font-size:var(--f2);font-weight:640;letter-spacing:-.01em;
  min-height:calc(var(--f2) * 1.2 * 2)}
.ctile-q{font-size:var(--f1)}

/* Drawer: 2 colunas grandes em vez de 4 minúsculas. */
/* ROLLBACK ECH-032: 2 colunas grandes transformaram o drawer numa tela de
   categorias e empurraram Camila/Sair para fora da vista. O drawer volta a
   ser MENU: 4 colunas compactas, tiles menores que os da Home. */
.drw-grid{grid-template-columns:repeat(4,1fr);gap:var(--g2)}
.drw-grid .dtile-n{font-size:9.5px;font-weight:600;color:var(--ink-2)}
.drw-grid .ctile-art svg{width:44%;height:44%}
.drw-grid .ctile-art{border-radius:var(--rx2)}
.drw-todas{display:block;width:100%;margin-top:var(--g3);padding:11px;
  border-radius:var(--rx2);background:var(--band);text-align:center;
  font-size:var(--f3);font-weight:640;color:var(--ink)}

/* Agrupamento por intenção na tela cheia: separa sem encher de texto. */
.cgrupo + .cgrupo{margin-top:var(--g6)}
.cgrupo-h{font-size:var(--f2);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--g3)}

/* --- 29. Superfícies elevadas (ECH-034) ----------------------------------
   Com o fundo em areia quente, cada bloco comercial vira uma SUPERFÍCIE que
   se destaca. É o que separa "aplicativo" de "formulário": o conteúdo assenta
   sobre o fundo em vez de se dissolver nele. */
.top,.tabs{background:var(--surface)}
.blk-c{background:transparent}

/* Vitrines e categorias ganham cartão próprio, com respiro e canto suave. */
.blk-c:has(> .rail),
.blk-c:has(> .cgrid),
.blk-c:has(> .camps){
  background:var(--surface);
  border-radius:var(--rx3);
  margin-inline:var(--pad);
  padding:var(--g4) var(--g3) var(--g3);
  margin-bottom:var(--g3);
  box-shadow:0 1px 2px rgb(20 18 16/.04), 0 6px 16px -8px rgb(20 18 16/.10)}
/* O bloco costuma ser `.hold.blk-c` NO MESMO elemento: o padding do .hold
   somava com a margin do cartao e o conteudo vazava 16px para fora da
   moldura. O cartao ja provê o respiro, entao o padding do .hold e zerado. */
.blk-c.hold:has(> .rail),
.blk-c.hold:has(> .cgrid),
.blk-c.hold:has(> .camps){padding-inline:var(--g3);
  /* `.hold` traz width:100%; somado a margin-inline do cartao, o bloco ficava
     32px mais largo que a moldura e vazava. `width:auto` deixa a margem
     encolher o cartao, que e o comportamento correto. */
  width:auto}
.blk-c:has(> .rail) > .hold,
.blk-c:has(> .cgrid) > .hold{padding-inline:0}
.blk-c:has(> .rail) .rail{margin-inline:calc(var(--g3) * -1);padding-inline:var(--g3)}

/* O trilho sangra dentro do cartão, não da tela. */
.blk-c:has(> .rail) .blk-h,
.blk-c:has(> .cgrid) .blk-h{padding-inline:var(--g1)}

/* Busca: deixa de parecer input de formulário e vira componente principal. */
.find-hero .find-b{background:var(--surface);box-shadow:0 1px 2px rgb(20 18 16/.05),
  0 8px 20px -10px rgb(20 18 16/.16), inset 0 0 0 1px var(--rule)}

/* --- 30. ECH-036: carrosséis de campanha, economia e cervejarias ---------
   Duas faixas distintas de campanha, hierarquia de preço com economia em
   reais e cartão de cervejaria sem logo inventada. */

/* CARROSSEL DE CAMPANHA. O banner do Catálogo foi desenhado para desktop, com
   a mensagem embutida no pixel: espremido num box de 108px ficava ilegível.
   Aqui o texto vive numa CAMADA PRÓPRIA em HTML — legível em qualquer
   largura — e a arte original entra só como fundo, recortada pelo box.
   A arte nunca é editada nem redimensionada na origem. */
.cmps{display:grid;grid-auto-flow:column;gap:var(--g3);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(var(--g3) * -1);padding-inline:var(--g3);
  overscroll-behavior-x:contain}
.cmps::-webkit-scrollbar{display:none}
/* ECH-037 — o HERO ocupa a moldura inteira. A borda do próximo cartão dentro
   dele dividia a atenção justo no primeiro elemento comercial da tela; agora
   os pontos abaixo comunicam que há mais. O SECUNDÁRIO mantém a prévia de 84%:
   ali ela convida a explorar em vez de competir. */
.cmp-heros{grid-auto-columns:100%;margin-inline:0;padding-inline:0}
.cmp-minis{grid-auto-columns:84%}

.cmp{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  scroll-snap-align:start;border-radius:var(--rx3);overflow:hidden;text-align:left;
  color:#fff;background:#1a1613;isolation:isolate;
  transition:transform var(--t1) var(--ez)}
.cmp:hover{transform:translateY(-2px)}
/* 4:3 no hero: a 16/9 o cartão tinha 212px e label, headline, apoio e CTA
   ficavam espremidos. Mais altura é o que permite hierarquia. */
.cmp-hero{aspect-ratio:4/3;padding:var(--g5)}
.cmp-mini{aspect-ratio:2.2/1;padding:var(--g3) var(--g4)}
.cmp-bg{position:absolute;inset:0;z-index:-2}
/* RECORTE CONTROLADO. As artes do Catálogo são banners de desktop com a
   mensagem impressa no pixel, do lado ESQUERDO, e a linha de produtos à
   direita. Centralizadas, a arte exibia o próprio título cortado ao lado do
   título em HTML — dois textos disputando o mesmo cartão. Puxando o
   enquadramento para a direita fica só o que interessa: os produtos reais.
   A arte de origem não é editada nem redimensionada — só enquadrada. */
/* A arte e 1920x700 (2,74:1) num box 16:9: sobra ~35% de largura para
   escolher. A 82% a janela caia no fecho escuro da direita e o cartao ficava
   preto; a 68% ela enquadra a linha de produtos e deixa o titulo impresso na
   arte fora do quadro. */
.cmp-bg img{width:100%;height:100%;object-fit:cover;object-position:68% center}
/* Scrim diagonal: o texto vive na base e à esquerda, e precisa passar em AA
   sobre QUALQUER área da arte. Os produtos continuam visíveis à direita. */
.cmp::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgb(14 12 10/.96) 4%,rgb(14 12 10/.80) 22%,
                              rgb(14 12 10/.30) 42%,rgb(14 12 10/.66) 66%,rgb(14 12 10/.95)),
    linear-gradient(to right,rgb(14 12 10/.72),rgb(14 12 10/.16) 62%,transparent)}
.cmp-txt{position:relative;display:flex;flex-direction:column;gap:3px;max-width:74%}
.cmp-txt b{font-size:var(--f5);font-weight:720;letter-spacing:-.025em;line-height:1.14}
.cmp-hero .cmp-txt{max-width:84%}
/* Título de campanha 26px no hero — a escala da ECH-037. */
.cmp-hero .cmp-txt b{font-size:var(--f8);letter-spacing:-.035em;line-height:1.08}
.cmp-sub{font-size:var(--f3);color:rgb(255 255 255/.82);line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cmp-mini .cmp-sub{font-size:var(--f2);-webkit-line-clamp:1}
/* Label dourada discreta: diz de que campanha se trata antes de a headline
   ser lida, e é o único uso de dourado no cartão além do CTA. */
.cmp-lb{font-size:var(--f1);font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-lb);margin-bottom:5px}
.cmp-mini .cmp-lb{margin-bottom:3px}
.cmp-cta{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  margin-top:var(--g3);min-height:44px;padding:0 var(--g5);border-radius:var(--rxf);
  background:var(--brand-cta);color:#fff;font-size:var(--f4);font-weight:680}
.cmp-cta svg{width:14px;height:14px}
.cmp-mini .cmp-cta{margin-top:9px;min-height:38px;padding:0 var(--g4);font-size:var(--f3)}
.cmp-dots{display:flex;justify-content:center;gap:var(--g1);margin-top:var(--g3)}
/* Alvo de toque de 44px com o ponto desenhado no meio: o ponto visivel tem
   6px, mas tocar em 6px e impossivel. */
.cmp-dots button{display:grid;place-items:center;width:24px;height:44px;margin-block:-14px}
.cmp-dots button::before{content:"";width:6px;height:6px;border-radius:var(--rxf);
  background:var(--w4);transition:background var(--t1),width var(--t1)}
.cmp-dots button[aria-selected="true"]::before{width:18px;background:var(--brand)}

.cmp-n{position:absolute;top:var(--g3);right:var(--g3);
  padding:4px 9px;border-radius:var(--rxf);
  background:rgb(14 12 10/.62);backdrop-filter:blur(6px);
  font-size:var(--f1);font-weight:620;color:rgb(255 255 255/.92);
  font-variant-numeric:tabular-nums}

/* ECONOMIA (ECH-036). O mesmo desconto aparecia DUAS vezes — selo sobre a
   foto e "−5%" outra vez ao lado do preço — e o que o comprador quer saber
   (quanto economiza em reais) não aparecia. O percentual ficou só no selo. */
/* Duas linhas curtas, cada uma inteira. Numa só, "Economize R$ 0,50" quebrava
   no meio do valor ("R$" numa linha, "0,50" na outra) e o card mudava de
   altura conforme o tamanho do número. */
.it-eco{display:block;min-height:28px;font-size:var(--f1);line-height:1.28;color:var(--pos);
  font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.it-eco s{display:block;color:var(--ink-3);font-weight:500}

/* CERVEJARIAS. Nenhuma logo oficial existe nas fontes auditadas (ver LOGOS em
   app.js) e logo nao se inventa.
   ECH-037: o cartao anterior tinha uma MOLDURA QUADRADA VAZIA com o nome
   dentro e a contagem fora — lia-se como imagem que nao carregou. Agora a
   composicao e deliberadamente tipografica: sem caixa dentro de caixa, o nome
   como elemento principal, uma regua dourada curta como assinatura e a
   contagem embaixo. Parece intencional porque e. */
/* ECH-038 — a identidade da cervejaria e uma CAMADA: a composicao tipografica
   fica no fundo e a logo oficial, quando o arquivo existir, entra por cima.
   Sobreposicao em vez de troca significa que o cartao nunca aparece vazio
   esperando um 404, e a ausencia de logo deixa de ser estado de erro para ser
   o desenho padrao. Soltar o arquivo na pasta basta — nada muda no codigo. */
/* ECH-039A: altura FIXA. Antes o wc-face crescia com o texto e a logo (que o
   cobre) herdava essa altura variável — logos de arquivo quadrado com wordmark
   horizontal ficavam apertadas e pareciam cortadas. Altura fixa dá à logo um
   palco previsível. */
.wc-face{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;width:100%;height:76px;padding-inline:4px}
/* Regua dourada: a assinatura que faz a composicao tipografica parecer
   deliberada em vez de "faltou a logo". Some quando a logo oficial entra. */
.wc-face::after{content:"";width:22px;height:2px;border-radius:2px;background:var(--brand)}
.wc-face:has(.wc-l)::after{display:none}
/* Quando a logo oficial existe, o nome tipografico sai de cena (o proprio nome
   ja esta na logo); fica so como texto acessivel para leitor de tela. */
.wc-face:has(.wc-l) .wc-tipo{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
/* `inset:0` (nao -6px): a -6px a camada saia do card e o overflow do container
   cortava a borda da logo. object-fit:contain com padding baixo — o arquivo
   quadrado ja traz respiro proprio em volta do wordmark. */
/* NAO usar grid/place-items aqui: um item de grid centralizado nao estica, e
   `height:100%` da img resolvia contra a propria altura intrinseca (600px),
   deixando a img 104x104 num container 104x58 — o overflow cortava topo e base
   da logo. Com a img em position:absolute inset:0 ela assume exatamente o box
   do container e object-fit:contain encaixa a logo inteira. */
/* Fundo CLARO FIXO (--w2 nao inverte). As logos oficiais sao desenhadas para
   fundo claro/branco e a maioria tem texto escuro; sobre o card escuro do tema
   dark elas sumiam. A "placa" clara e o padrao da industria para exibir marca
   de terceiro numa UI escura — a logo aparece sempre com suas cores corretas. */
.wc-l{position:absolute;inset:0;border-radius:var(--rx2);background:var(--w2);overflow:hidden}
/* Logo de tinta CLARA/branca: placa ESCURA fixa (ECH-041), para o wordmark
   branco aparecer com contraste. Fundo escuro quente, coerente com a marca;
   não inverte por tema — a tinta da logo é sempre branca. */
.wc-l[data-tone="light"]{background:#2a251f}
/* Padding por FORMATO (ECH-041). Padrão = logo quadrada (~1:1): respiro nos
   quatro lados para não dominar. Wordmarks largos recebem MENOS padding lateral
   e mais vertical, ganhando largura — assim a percepção de tamanho se iguala à
   das quadradas. object-fit:contain garante que nada distorce nem corta. */
/* `--k` compensa a margem transparente do arquivo (ECH-045D): sem ele, uma
   logo com 65% de vazio no PNG renderiza três vezes menor que outra sem vazio,
   ainda que a placa seja a mesma. O fator vem da medição do bounding box, não
   de ajuste no olho. `contain` continua garantindo que nada distorce. */
.wc-l img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:7% 8%;
  transform:scale(var(--k,1))}
.wc-l[data-fmt="wide"] img{padding:9% 5%}
.wc-l[data-fmt="xwide"] img{padding:12% 3%}

.wc-tipo{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-align:center;
  font-size:var(--f4);font-weight:700;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);text-wrap:balance}
/* `--w2` NAO inverte no tema escuro — e a moldura clara, deliberadamente fixa.
   Usado num gradiente, levava o cartao de branco a preto e o nome claro caia
   sobre a ponta branca. Mesma armadilha ja documentada nos selos (ECH-034):
   so tokens que invertem podem entrar em superficie de texto. */


/* Microcopy da seção de cervejarias (ECH-041): guia a ação, colada ao título. */
.who-sub{margin-top:calc(var(--g2) * -1);margin-bottom:var(--g3)}
/* (ECH-042: `.home-pe` removido — a nota genérica de preço saiu da Home.) */

/* Cervejaria na tela de produto (ECH-037): mesma decisão da Home — nome, não
   inicial num quadrado colorido. É um link, e precisa parecer um. */
.pdp-mk{display:inline-flex;align-items:center;gap:5px;min-height:32px;
  color:var(--ink-2);transition:color var(--t1)}
.pdp-mk:hover{color:var(--ink)}
.pdp-mk svg{width:13px;height:13px;opacity:.6}

/* --- 31. ECH-038: BeerCash como benefício ---------------------------------
   Antes o programa só existia como uma linha de valor dentro de cada card: o
   cliente via "BeerCash R$ 2,68" sem nunca saber o que era. Aqui ele é
   explicado UMA vez, com contagem real de elegíveis e destino que é o mesmo
   filtro do catálogo. Verde da marca como assinatura, não como alarme. */
.bc-bloco{position:relative;display:flex;align-items:flex-start;gap:var(--g3);
  width:100%;padding:var(--g4);border-radius:var(--rx3);text-align:left;
  background:var(--pos-tint);box-shadow:inset 0 0 0 1px var(--pos-linha);
  transition:transform var(--t1) var(--ez)}
.bc-bloco:hover{transform:translateY(-1px)}
/* `--pos` INVERTE (verde escuro no claro, verde claro no escuro), entao o
   texto em cima nao pode ser #fff fixo: usar `--pos-tint`, que inverte junto
   e mantem o par sempre contrastado. Mesma armadilha ja documentada nos selos
   e no cartao de cervejaria. */
.bc-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
/* ECH-045D — o bloco antes dizia só "Ganhe BeerCash": nomeava o programa sem
   explicar o benefício. Agora a leitura é label → promessa → como funciona →
   quantos produtos → ação, com a ilustração à direita contando a mesma
   história. "Elegíveis" aparece uma única vez, na contagem. */
.bc-lb{font-size:var(--f1);font-weight:760;letter-spacing:.11em;color:var(--pos)}
.bc-txt b{font-size:var(--f5);font-weight:700;letter-spacing:-.02em;color:var(--ink);
  line-height:1.2;margin-top:1px}
/* `:not(.bc-cta)`: sem isso, `.bc-txt > span` (classe + tipo) vence
   `.bc-cta` (uma classe) por especificidade e pinta o CTA com a cor do texto
   de apoio — o botao verde ficava com letra escura, ilegivel. */
.bc-txt > span:not(.bc-cta):not(.bc-lb){font-size:var(--f2);color:var(--ink-2);line-height:1.35}
.bc-ap{margin-top:3px}
/* A contagem é o argumento: quantos produtos realmente acumulam. */
.bc-qt{margin-top:5px;font-weight:700;color:var(--pos)!important;
  font-variant-numeric:tabular-nums}
.bc-cta{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;
  margin-top:var(--g3);min-height:40px;padding:0 var(--g4);border-radius:var(--rxf);
  background:var(--pos);color:var(--pos-tint);font-size:var(--f3);font-weight:660}
.bc-cta svg{width:13px;height:13px}
/* Ilustração: acompanha o bloco sem disputar com o CTA. Some no espaço mais
   apertado, onde o texto vale mais do que o desenho. */
.bc-art{flex-shrink:0;width:84px;height:68px;color:var(--pos);align-self:center}
@media (max-width:359px){ .bc-art{display:none} }

/* ECH-050C — página informativa do Clube do Chope. Só aparece com a flag ligada;
   reaproveita o bloco .bc-bloco na home. Estilos apenas de conteúdo, sem afetar
   preço/total/carrinho. */
.clube-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--g3)}
.clube-step{display:flex;align-items:flex-start;gap:var(--g3)}
.clube-num{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:760;font-size:var(--f2);
  background:var(--pos);color:var(--pos-tint)}
.clube-st{display:flex;flex-direction:column;gap:3px}
.clube-st small{font-size:var(--f2);color:var(--ink-2);line-height:1.35}
.clube-nota{padding:var(--g3);border-radius:var(--rx2);background:var(--surface-2, var(--surface));
  border:1px solid var(--line, rgba(0,0,0,.08))}

/* ECH-050F — seção compacta "Seus benefícios". Scroller horizontal com snap:
   um card visível + peek do próximo. Um card só → largura inteira. Sem CLS
   (altura fixa por min-height), sem overflow (texto com ellipsis). */
.ben-scroll{display:flex;gap:var(--g3);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding:2px 0 6px;scrollbar-width:none;scroll-padding-left:var(--g4)}
.ben-scroll::-webkit-scrollbar{display:none}
.ben-card{flex:0 0 86%;scroll-snap-align:start;display:flex;align-items:center;gap:var(--g3);
  min-height:84px;padding:var(--g3) var(--g4);border-radius:var(--rx2);text-align:left;
  background:var(--surface-2, var(--surface));border:1px solid var(--line, rgba(0,0,0,.08));
  transition:transform .15s ease}
.ben-scroll.solo .ben-card{flex-basis:100%}
.ben-card:active{transform:scale(.99)}
.ben-ic{flex-shrink:0;width:40px;height:40px;color:var(--pos)}
.ben-ic svg{width:100%;height:100%}
.ben-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ben-lb{font-size:var(--f1);font-weight:760;letter-spacing:.07em;text-transform:uppercase;color:var(--pos)}
.ben-tt{font-size:var(--f3);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ben-sub{font-size:var(--f2);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ben-go{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;color:var(--pos);font-weight:660;font-size:var(--f2)}
.ben-go svg{width:14px;height:14px}
@media (max-width:379px){ .ben-cta{display:none} }   /* telas estreitas: só a seta, sem cortar texto */
@media (prefers-reduced-motion:reduce){ .ben-scroll{scroll-behavior:auto} .ben-card{transition:none} }

/* ECH-050F — central de conta agrupada. Itens de linha compactos, só rotas reais. */
.acc-grp{display:flex;flex-direction:column;gap:2px}
.acc-h{font-size:var(--f1);font-weight:760;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2);margin:0 0 6px 2px}
.acc-it{display:flex;align-items:center;gap:var(--g3);width:100%;min-height:52px;
  padding:0 var(--g3);border-radius:var(--rx2);text-align:left;background:transparent;
  border:1px solid transparent;transition:background .12s ease}
.acc-it:hover,.acc-it:focus-visible{background:var(--surface-2, rgba(0,0,0,.03))}
.acc-it:active{transform:scale(.995)}
.acc-ic{flex-shrink:0;width:22px;height:22px;color:var(--pos);display:inline-flex}
.acc-ic svg{width:100%;height:100%}
.acc-lb{flex:1;min-width:0;font-size:var(--f3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-it > svg{flex-shrink:0;width:16px;height:16px;color:var(--ink-3, var(--ink-2));opacity:.6}
@media (prefers-reduced-motion:reduce){ .acc-it{transition:none} }

/* --- 32. ECH-038: área "Encontre" na tela de Categorias -------------------
   Estilo, cervejaria e embalagem não são famílias de produto — são modos de
   chegar até ele. Como tiles de primeiro nível, disputavam atenção com
   Cervejas e Chopes e transformavam a tela numa lista de dezenas de recortes
   soltos. Aqui cada modo é uma linha que abre no lugar. */
.acha{border-bottom:1px solid var(--rule)}
.acha:first-of-type{border-top:1px solid var(--rule)}
.acha-h{display:flex;align-items:center;gap:var(--g3);width:100%;min-height:52px;
  font-size:var(--f4);font-weight:640;color:var(--ink)}
.acha-q{margin-left:auto;font-size:var(--f2);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.acha-s{display:grid;place-items:center;color:var(--ink-3);
  transition:transform var(--t2) var(--ez)}
.acha-s svg{width:16px;height:16px}
.acha-h[aria-expanded="true"] .acha-s{transform:rotate(90deg)}
.acha-c{display:flex;flex-wrap:wrap;gap:var(--g2);padding-bottom:var(--g4)}
/* Chip de recorte: alvo de 40px, contagem real embutida. */
.chip-a{display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:0 var(--g4);border-radius:var(--rxf);background:var(--band);
  font-size:var(--f3);font-weight:580;color:var(--ink-2);
  transition:background var(--t1),color var(--t1)}
.chip-a:hover{background:var(--w3);color:var(--ink)}
.chip-a i{font-style:normal;font-size:var(--f1);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.acha-todas{display:block;width:100%;margin-top:var(--g5);min-height:48px;
  border-radius:var(--rx2);background:var(--band);text-align:center;
  font-size:var(--f4);font-weight:640;color:var(--ink)}