/* ============================================================
   FORTIËR GELATERIA — Design System
   Extraído da V0. Cores, tipografia, componentes.
   ============================================================ */

:root {
  /* — Petrol / mar de Cabo Frio (paleta oficial) — */
  --sea-900: #04212e;
  --sea-800: #062B40;  /* petrol oficial */
  --sea-700: #0e3d52;
  --sea-600: #2E6880;  /* azul-petrol oficial */

  /* — Dourado (oficial) — */
  --gold-600: #9c7f31;
  --gold-500: #B89840;  /* dourado oficial */
  --gold-400: #C9A94E;  /* gold2 oficial */
  --gold-300: #d8bd76;
  --gold-200: #e7d4a0;

  /* — Creme / areia / off-white (oficial) — */
  --cream-50:  #FBF8F1; /* off-white (fundo) */
  --cream-100: #EFE7D8; /* areia */
  --cream-200: #E6DAC8; /* creme (bordas) */
  --paper: #ffffff;

  /* — Tinta — */
  --ink-900: #10242E;  /* ink oficial */
  --ink-700: #2b3a42;
  /* Escurecido de #6E7C82 (4,07:1) para 5,58:1 sobre o creme-50. Continua
     cinza discreto, mas passa do mínimo legível. Conferi os 29 usos: todos
     estão em fundo claro (cartão, gaveta, modal), então mexer no token
     conserta os 29 de uma vez em vez de remendar regra por regra. */
  --ink-500: #59666E;  /* muted oficial */
  /* placeholder: 2,11:1 era invisível. #5E6C74 dá 5,11:1 e ainda lê como
     "texto de exemplo", não como valor preenchido. */
  --ink-300: #5E6C74;
  /* O dourado da casa some em fundo claro (3,60:1). Este é o mesmo dourado
     um tom mais fechado, 5,51:1, SÓ para tinta sobre creme/branco.
     Em fundo escuro continue usando --gold-500, que lá passa bem (4,65:1). */
  --gold-ink: #7A621F;

  --line: rgba(20, 16, 8, 0.10);
  --line-strong: rgba(20, 16, 8, 0.16);
  --on-dark-line: rgba(255, 255, 255, 0.14);
  --on-dark-soft: rgba(245, 238, 225, 0.70);

  /* — Tipografia — */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* — Layout — */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(20,16,8,.05), 0 16px 40px -24px rgba(20,16,8,.45);
  --shadow-pop: 0 30px 60px -30px rgba(9,30,37,.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* scroll-behavior:smooth REMOVIDO: na home do cinema (scrub de vídeo por scroll)
   ele fazia todo clique/rolagem engasgar ("pula/trava"). Rolagem direta = responsiva.
   Onde precisar de suave (ex: menu), o JS usa behavior:'smooth' pontual. */
body {
  font-family: var(--sans);
  color: var(--ink-900);
  background: var(--cream-50);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input { font: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 4px; }

/* ============================================================
   Tipografia helpers
   ============================================================ */
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 400;
}
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -.01em;
}
.lead { color: var(--ink-700); font-size: clamp(15px, 1.3vw, 17px); }

/* ============================================================
   Layout
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

/* ============================================================
   Botões
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: 8px;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold-500); color: #fff; box-shadow: 0 10px 24px -12px rgba(169,121,42,.9); }
.btn--gold:hover { background: var(--gold-600); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(169,121,42,.95); }
.btn--ghost { border: 1px solid var(--on-dark-line); color: #fff; backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.06); }
.btn--ghost-dark { border: 1px solid var(--line-strong); color: var(--ink-900); }
.btn--ghost-dark:hover { border-color: var(--gold-500); color: var(--gold-600); }
.btn--block { width: 100%; }
/* P2 (reteste 13/ago): não existia regra de desabilitado para `.btn`.
   O `Finalizar pedido` com o carrinho vazio passa a nascer `disabled` (app.js),
   e sem esta regra ele continuaria idêntico ao habilitado — dourado, com sombra
   e hover subindo. Botão que parece clicável e não é engana mais do que botão
   que avisa. `aria-disabled="true"` entra junto porque os dois sempre saem do
   mesmo lugar no JS: a aparência nunca discorda do que o leitor de tela ouve. */
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .45; cursor: default; pointer-events: none; box-shadow: none; transform: none;
}

/* Link com seta */
.linkarrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-900);
  transition: gap .25s var(--ease), color .25s var(--ease);
}
.linkarrow svg { transition: transform .25s var(--ease); }
.linkarrow:hover { gap: 14px; color: var(--gold-600); }
.linkarrow:hover svg { transform: translateX(3px); }
.linkarrow--gold { color: var(--gold-600); }
.linkarrow--light { color: #fff; }
.linkarrow--light:hover { color: var(--gold-300); }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 84px;
}
.site-header.is-solid {
  /* 0.97: opaco o bastante pra conteúdo não "vazar" como borrão atrás do vidro */
  background: rgba(246, 239, 227, 0.97);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -24px rgba(9,30,37,.6);
}
.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  font-size: 15px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  position: relative; padding-block: 6px; transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--gold-500); transition: width .28s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { width: 100%; }

/* cores do header conforme tema (sobre hero escuro vs sólido claro) */
.site-header--over .nav a,
.site-header--over .header-actions .cart-btn,
.site-header--over .header-actions .hdr-ico { color: #fff; }
.site-header.is-solid .nav a,
.site-header.is-solid .header-actions .cart-btn,
.site-header.is-solid .header-actions .hdr-ico { color: var(--ink-900); }
/* ghost sobre header sólido: texto escuro (senão fica branco no creme) */
.site-header.is-solid .btn--ghost { border-color: var(--line-strong); color: var(--ink-900); backdrop-filter: none; }
.site-header.is-solid .btn--ghost:hover { border-color: var(--gold-500); color: var(--gold-600); background: rgba(184,152,64,.06); }

.header-actions { display: flex; align-items: center; gap: 16px; }

/* Logo — lockup oficial Fortiër (PNG transparente) */
.logo { display: block; width: 150px; height: 52px; background-repeat: no-repeat; background-position: left center; background-size: contain; background-image: url('logo-navy.png'); text-indent: -9999px; overflow: hidden; white-space: nowrap; flex: none; }
.logo .w, .logo .tag { display: none; }
/* .co-top e .pd-top (checkout e acompanhamento) entram nesta lista porque são
   cabeçalhos de fundo escuro: sem isso a logo navy some no petrol. */
.site-header--over .logo, .hero .logo, .footer .logo, .side__logo .logo, .login .logo,
.co-top .logo, .pd-top .logo { background-image: url('logo-creme.png'); }
.site-header.is-solid .logo { background-image: url('logo-navy.png'); }
.side__logo .logo { width: 132px; height: 40px; }
.login .logo { width: 248px; height: 96px; background-position: center; margin-inline: auto; }

/* Cart button */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  transition: background .2s var(--ease);
}
.cart-btn:hover { background: rgba(127,127,127,.12); }
.cart-count {
  position: absolute; top: -2px; right: -2px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--gold-500); color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  border-radius: 999px; transform: scale(0); transition: transform .3s var(--ease);
}
.cart-count.is-visible { transform: scale(1); }

/* WhatsApp e Instagram no header — mesma moeda do carrinho (círculo de 42px),
   cor herdada do tema: branco sobre o hero, escuro sobre o header sólido.
   `currentColor` no SVG é o que faz isso funcionar; se algum dia o ícone
   aparecer preto sobre a foto, é porque uma das regras de cor do header
   (--over / .is-solid / tema escuro / body.cine-on no index) esqueceu o
   .hdr-ico. São quatro lugares, sempre. */
.hdr-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.hdr-ico:hover { background: rgba(127,127,127,.12); color: var(--gold-500); }
/* atalho pro pedido em andamento: só existe enquanto o pedido existe */
.hdr-ico--pedido { position: relative; }
.hdr-ico__dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 2px rgba(4,26,38,.6); }
@media (prefers-reduced-motion: no-preference) { .hdr-ico__dot { animation: hdrPulsa 2.4s var(--ease) infinite; } }
@keyframes hdrPulsa { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.hdr-ico svg { display: block; }
/* rótulo curto do botão do header, usado só no celular (ver o bloco ≤680px) */
.btn .btn-sm { display: none; }

/* ── CARTÃO FORTIËR dentro do carrinho e do checkout (spec §4.2) ──────────
   Aparece assim que o telefone fica completo. Quando o cartão está cheio,
   troca de moldura: o verde é o mesmo do FREE no recibo, pra "brinde" ter
   uma cor só no site inteiro. */
/* ============================================================
   CARTÃO FORTIËR na sacola
   ============================================================
   Era uma caixinha tracejada com texto miúdo — parecia aviso de sistema,
   e aviso de sistema a pessoa pula. Agora tem cara do que é: um cartão de
   fidelidade pequeno, deitado ali no meio da conta.
   O que mudou, e por quê:
   · borda inteira em vez de tracejada — tracejado lê como "provisório"
   · um filete dourado à esquerda, como o corte de uma carteirinha
   · o rótulo ganhou ar e a frase ganhou corpo (12,5px era leitura de rodapé)
   · um brilho suavíssimo no canto, o mesmo da vitrine, pra não ficar chapado
   ============================================================ */
.clube-strip { position: relative; overflow: hidden; margin-top: 14px; padding: 14px 16px 15px 18px;
  border: 1px solid rgba(184,152,64,.42); border-radius: 14px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(184,152,64,.16), transparent 62%),
    rgba(184,152,64,.07); }
.clube-strip::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-600)); }
.clube-strip.is-premiado { border-style: solid; border-color: #43b06a; background: rgba(67,176,106,.10); }
.clube-strip__t { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; }
/* os dois pontinhos do Ë, que já são os selos do cartão — a marca dizendo
   sozinha do que se trata, sem precisar de ícone emprestado */
.clube-strip__t::before { content: ''; width: 15px; height: 6px; flex: none; border-radius: 3px;
  background: radial-gradient(circle at 3px 3px, #189C48 2.6px, transparent 2.9px),
              radial-gradient(circle at 12px 3px, #FCCC3C 2.6px, transparent 2.9px); }
/* Onde a logo minimalista de verdade entra (SVG inline, no recibo), o par de
   pontinhos acima sairia DUPLICADO — a bolinha petrol já carrega os dois. */
.clube-strip__t.has-logo::before { content: none; }
.clube-strip__logo { flex: none; display: block; }
.clube-strip__p { font-size: 13.5px; line-height: 1.6; color: var(--ink-700); margin-top: 7px; max-width: 46ch; }
.clube-strip__p b { color: var(--gold-ink); font-weight: 600; }
.clube-strip__opt { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--ink-700); cursor: pointer; }
.clube-strip__opt input { accent-color: var(--gold-600); }
.clube-selos { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
/* os selos: vazios são só o contorno, e o cheio ganha um brilhinho interno
   pra parecer carimbo apertado, não bolinha preenchida */
.clube-selos i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(184,152,64,.55);
  transition: transform .18s var(--ease), background .18s var(--ease); }
.clube-selos i.on { background: radial-gradient(circle at 35% 32%, #d8b767, var(--gold-600));
  border-color: var(--gold-600); box-shadow: inset 0 -1px 2px rgba(0,0,0,.18); }
.clube-selos i.on:last-of-type { transform: scale(1.06); }
.clube-strip.is-premiado .clube-selos i.on { background: #43b06a; border-color: #43b06a; }

/* hamburger */
.menu-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: currentColor; position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; }
.menu-toggle span::before { top: -7px; }
.menu-toggle span::after { top: 7px; }

/* ============================================================
   HERO / Carrossel
   ============================================================ */
.hero { position: relative; min-height: 660px; height: 88vh; max-height: 860px; color: #fff; overflow: hidden; }
.hero__track { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .9s var(--ease);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; }
.hero__media { background: linear-gradient(125deg, var(--sea-700) 0%, var(--sea-900) 60%, #04161d 100%); transform: scale(1.06); transition: transform .5s var(--ease); will-change: transform; }
.hero__photo { position: absolute; inset: 0; width: 100%; height: 100%; background-size: cover; background-position: center; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ---- Edição visual (no painel, via iframe) ---- */
.fc-editing .fc-edit { outline: 1px dashed rgba(184,152,64,.5); outline-offset: 3px; border-radius: 3px; cursor: text; transition: outline-color .15s, background .15s; }
.fc-editing .fc-edit:hover { outline-color: var(--gold-500); background: rgba(184,152,64,.08); }
.fc-editing .fc-edit:focus { outline: 2px solid var(--gold-500); background: rgba(184,152,64,.1); }
.fc-editing .hero__scrim, .fc-editing .videoband__scrim { pointer-events: none; }
.hero__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.06) 47%, rgba(216,189,118,.06) 50%, transparent 64%);
  background-size: 220% 100%; }
@media (prefers-reduced-motion: no-preference) { .hero__sheen { animation: heroSheen 11s linear infinite; } }
@keyframes heroSheen { 0% { background-position: 130% 0; } 100% { background-position: -50% 0; } }
.hero__media image-slot { width: 100%; height: 100%; --slot-radius: 0; }
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* — Bloco de vídeo full-bleed — */
.videoband { position: relative; min-height: clamp(420px, 68vh, 700px); display: flex; align-items: center; justify-content: center; overflow: hidden; background: #04161d; margin-block: clamp(8px, 2vw, 24px); }
.videoband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.videoband__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,22,29,.82), rgba(4,22,29,.38) 45%, rgba(4,22,29,.62)); }
.videoband__content { position: relative; z-index: 2; text-align: center; color: #fff; max-width: 720px; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.videoband__title { font-family: var(--serif); font-weight: 600; font-size: clamp(34px, 5vw, 60px); line-height: 1.04; letter-spacing: -.01em; }
.videoband__desc { color: rgba(255,255,255,.86); font-size: clamp(15px, 1.4vw, 18px); max-width: 46ch; }

/* — Vídeo de produto no hover — */
.product-card__media video.hover-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); z-index: 1; pointer-events: none; }
.product-card:hover video.hover-vid { opacity: 1; }
.product-card__media .badge { z-index: 3; }

/* — Vídeo na story (Sobre) — */
.story__media { position: relative; }
.story__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,33,47,.93) 0%, rgba(6,33,47,.8) 34%, rgba(6,33,47,.5) 56%, rgba(6,33,47,.14) 80%, rgba(6,33,47,0) 100%),
    linear-gradient(0deg, rgba(4,22,29,.55) 0%, rgba(4,22,29,0) 42%);
}
.hero__content {
  position: relative; z-index: 3; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 620px; padding-block: 120px 60px;
}
.hero__slide:not(.is-active) .hero__content > * { transform: translateY(18px); }
.hero__slide.is-active .hero__content > * { transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.hero__slide.is-active .hero__content > *:nth-child(1) { transition-delay: .12s; }
.hero__slide.is-active .hero__content > *:nth-child(2) { transition-delay: .20s; }
.hero__slide.is-active .hero__content > *:nth-child(3) { transition-delay: .28s; }
.hero__slide.is-active .hero__content > *:nth-child(4) { transition-delay: .36s; }

.hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(42px, 5.4vw, 70px); line-height: 1.0; letter-spacing: -.015em;
  margin-bottom: 20px;
}
.hero__title em { font-style: normal; color: var(--gold-400); display: block; }
.hero__desc { font-size: clamp(15px, 1.5vw, 18px); color: rgba(255,255,255,.88); max-width: 30ch; margin-bottom: 18px; }
.hero__note {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--gold-300); margin-bottom: 30px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* dots + arrows */
.hero__dots { position: absolute; z-index: 5; left: var(--gutter); bottom: 30px; display: flex; gap: 10px; }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .3s var(--ease); }
.hero__dot.is-active { background: var(--gold-400); width: 26px; border-radius: 999px; }
.hero__nav {
  position: absolute; z-index: 5; right: var(--gutter); bottom: 26px;
  display: flex; gap: 10px;
}
.hero__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35); color: #fff;
  display: grid; place-items: center; transition: all .25s var(--ease);
}
.hero__arrow:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ============================================================
   Barra de features
   ============================================================ */
.features { margin-top: -42px; position: relative; z-index: 10; }
.features__card {
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(4, 1fr);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.feature {
  display: flex; align-items: center; gap: 16px;
  padding: 26px 28px;
  border-right: 1px solid var(--cream-200);
}
.feature:last-child { border-right: none; }
.feature__icon { color: var(--gold-600); flex-shrink: 0; }
.feature__txt { display: flex; flex-direction: column; gap: 3px; }
.feature__t { font-weight: 600; font-size: 15px; line-height: 1.25; }
.feature__s { font-size: 13px; color: var(--ink-500); line-height: 1.3; }

/* ============================================================
   Section head (título + ação)
   ============================================================ */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.sec-head__meta { display: flex; flex-direction: column; gap: 12px; }
.sec-head__sub { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); }

/* ============================================================
   Cards de produto
   ============================================================ */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.product-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); border-color: var(--cream-200); }
/* RETRATO 4:5, e não quadrado.
   As fotos do Bruno são todas em pé: 7 dos 15 arquivos publicados são 3:4 e
   4 deles são 9:16. Num quadro quadrado o `cover` jogava fora 25% da altura
   nos primeiros e **44%** nos segundos — quase metade da foto, cortada no
   meio do produto. 4:5 é o retrato que perde menos em todos eles ao mesmo
   tempo, e mantém os cards iguais entre si.
   Medido arquivo por arquivo antes de escolher; 1:1, 4:5 e 3:4 foram
   comparados na tela. */
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--cream-100); }
.product-card__media image-slot { width: 100%; height: 100%; --slot-radius: 0; background: linear-gradient(160deg, var(--cream-100), var(--cream-200)); transition: transform .6s var(--ease); }
.product-card:hover .product-card__media image-slot { transform: scale(1.05); }

/* ============================================================
   A VITRINE — o cardápio é o balcão, e a foto é o que está atrás do vidro.
   Quatro camadas, todas discretas de propósito: efeito que se anuncia vira
   enfeite, e enfeite tira a atenção da comida.

   1) APROXIMAÇÃO LENTA  — a foto cresce 6% em 1,1s no hover. Devagar o
      bastante pra não parecer clique; é a sensação de chegar mais perto
      da vitrine, não de um botão respondendo.
   2) LUZ QUE ATRAVESSA  — uma faixa clara em diagonal cruza a foto uma vez,
      como o reflexo do vidro quando você anda na frente do balcão.
   3) MAIS VIVA          — +8% de saturação e um toque de contraste. Comida
      fotografada em luz natural fica levemente lavada na tela; isso devolve
      o que a tela tirou. Não inventa cor que o produto não tem.
   4) VIDRO              — uma sombra interna no topo. Dá a impressão de que
      existe um plano de vidro entre o cliente e o doce.
   Nada disso roda pra quem pediu menos movimento no sistema.
   ============================================================ */
/* (1) e (3) vivem na regra canônica do .pm-photo, mais abaixo no arquivo —
   duplicar aqui só criava conflito. */
.pm-luz {
  position: absolute; top: -60%; bottom: -60%; left: -70%; width: 55%;
  z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34) 42%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.34) 58%, transparent);
  transform: rotate(14deg) translateX(0);
  opacity: 0;
}
.product-card:hover .pm-luz,
.product-card:focus-within .pm-luz { animation: pmLuz 1.15s cubic-bezier(.4,0,.2,1) .05s 1 forwards; }
@keyframes pmLuz {
  0%   { opacity: 0;  transform: rotate(14deg) translateX(0); }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0;  transform: rotate(14deg) translateX(360%); }
}

/* o vidro: escurece de leve o topo da foto e some no meio */
.product-card__media::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,43,64,.13), rgba(6,43,64,0) 42%);
}

/* entrada: o card sobe e aparece quando entra na tela, uma vez só */
.product-card.pc-entra { opacity: 0; transform: translateY(18px); }
.product-card.pc-dentro { opacity: 1; transform: translateY(0); transition: opacity .7s var(--ease), transform .7s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion: reduce) {
  /* o 1.10 de repouso NÃO é movimento, é enquadramento — quem pediu menos
     movimento continua vendo o produto no mesmo tamanho dos outros. Some só
     a MUDANÇA de escala. */
  .pm-photo, .product-card:hover .pm-photo, .product-card:focus-within .pm-photo { transform: scale(1.10); filter: none; transition: none; }
  .pm-luz { display: none; }
  .product-card.pc-entra { opacity: 1; transform: none; }
}

.badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--sea-800); padding: 5px 10px; border-radius: 6px;
}
.badge--gold { background: var(--gold-500); }
.badge--viral { background: var(--sea-600); }
.product-card__body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__title { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.15; }
.product-card__desc { font-size: 13px; color: var(--ink-500); line-height: 1.45; }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.product-card__price { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.add-btn {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gold-500); color: #fff;
  display: grid; place-items: center; transition: transform .25s var(--ease), background .25s var(--ease);
}
.add-btn:hover { background: var(--gold-600); transform: scale(1.08) rotate(90deg); }
.add-btn.is-added { background: var(--sea-700); }

/* Tamanho do pote (240ml / 500ml) — só nos gelatos.
   Fica ACIMA do rodapé, não dentro dele: o rodapé é uma linha flex com o preço
   de um lado e o botão redondo do outro, e enfiar duas pastilhas ali quebra o
   alinhamento assim que o nome do produto ocupa duas linhas. */
.pc-sizes { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pc-size {
  font: 600 11.5px/1 var(--sans, inherit); letter-spacing: .04em;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  color: var(--ink-700); background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink-900) 18%, transparent);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.pc-size:hover { border-color: var(--gold-500); color: var(--ink-900); }
.pc-size.is-on { background: var(--sea-800); border-color: var(--sea-800); color: #fff; }
.pc-size:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.product-card.is-esgotado .pc-sizes { opacity: .4; pointer-events: none; }

/* ============================================================
   Cards de categoria (imagem com overlay)
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 24px; }
.cat-card {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
/* ── RT-004 (reteste 13/ago): A RAIZ DO CARD QUE NÃO SUMIA ──
   CONSTRAINT: `.cat-card` declara `display: flex` numa regra de CLASSE, e
   classe ganha do `[hidden] { display: none }` do navegador. Sem esta linha,
   `card.hidden = true` (app.js, "A HOME SÓ ANUNCIA O QUE A CARTA TEM") não
   tira nada da tela — foi assim que os três cards fora da carta continuaram
   anunciando CTA pra `menu.html#lata`, `#duetto` e `#brownies`, âncoras que o
   cardápio não renderiza. Mesma armadilha que a `.pedido-bar` resolve na linha
   dela; remédio idêntico, aplicado no componente. */
.cat-card[hidden] { display: none; }

/* Quantas colunas quando a carta tem MENOS de cinco categorias.
   `data-cats` é escrito pelo app.js com o número de cards que sobraram.
   Cada regra mora DENTRO da faixa de largura que ela governa — de propósito.
   A versão anterior usava `:has()` fora de qualquer media query, e um seletor
   `.cat-grid:has(...)` (0,2,0) GANHA por especificidade do `.cat-grid` (0,1,0)
   que os breakpoints usam lá embaixo: a grade travava em 2 colunas no tablet,
   onde o desenho pede 3. Com as faixas separadas (min-width 1081 · 681–1080 ·
   max-width 680) nenhuma disputa com a outra, e a contagem nunca passa do
   teto daquela tela. `minmax(0, 300px)` + `justify-content: center` é o que
   impede duas categorias de virarem dois cartazes de 590px num wrap de 1200. */
@media (min-width: 1081px) {
  .cat-grid[data-cats="1"] { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .cat-grid[data-cats="2"] { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
  .cat-grid[data-cats="3"] { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
  .cat-grid[data-cats="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 681px) and (max-width: 1080px) {
  .cat-grid[data-cats="1"] { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .cat-grid[data-cats="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .cat-grid[data-cats="1"] { grid-template-columns: minmax(0, 1fr); }
}
.cat-card image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; --slot-radius: 0; background: linear-gradient(160deg, var(--sea-600), var(--sea-900)); transition: transform .6s var(--ease); }
.cat-photo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; background-size: cover; background-position: center; background-color: var(--sea-800); transition: transform .6s var(--ease); }
.cat-card:hover .cat-photo { transform: scale(1.06); }
.cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,22,28,.85) 0%, rgba(7,22,28,.25) 50%, rgba(7,22,28,.05) 100%); }
.cat-card:hover image-slot { transform: scale(1.06); }
.cat-card__body { padding: 22px 20px; color: #fff; display: flex; flex-direction: column; gap: 12px; }
.cat-card__title { font-family: var(--serif); font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; }

/* ============================================================
   Banda Clube Fortiër
   ============================================================ */
.clube {
  background: var(--sea-800);
  border-radius: var(--radius-lg);
  color: #fff;
  padding: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: 1.1fr 1.2fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  position: relative; overflow: hidden;
}
.clube::before {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(216,181,110,.16), transparent 70%); pointer-events: none;
}
.clube__head { display: flex; gap: 18px; align-items: flex-start; }
.clube__icon { color: var(--gold-300); flex-shrink: 0; margin-top: 4px; }
.clube__title { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 500; line-height: 1.05; margin-bottom: 10px; }
.clube__desc { color: var(--on-dark-soft); font-size: 15px; max-width: 38ch; }
.clube__form { display: flex; flex-direction: column; gap: 14px; }
.clube__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; }
.field { position: relative; }
.field input {
  width: 100%; height: 52px; padding: 0 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-line);
  border-radius: 9px; color: #fff; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder { color: rgba(255,255,255,.5); }
.field input:focus { outline: none; border-color: var(--gold-400); background: rgba(255,255,255,.1); }
.field--icon input { padding-right: 44px; }
.field__icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.5); pointer-events: none; }
.field.has-error input { border-color: #e08a7a; }
.field__err { font-size: 12px; color: #ecae9f; margin-top: 6px; font-family: var(--mono); letter-spacing: .02em; min-height: 0; }
.clube__note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: rgba(255,255,255,.5); }
.clube__success {
  display: none; align-items: center; gap: 12px;
  font-size: 15px; color: var(--gold-300);
}
.clube.is-done .clube__form { display: none; }
.clube.is-done .clube__success { display: flex; }

/* ============================================================
   Fortiër no seu evento
   ============================================================ */
#eventos { scroll-margin-top: 76px; } /* rolagem por âncora não esconde o topo sob o header fixo */
.evento {
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4.5vw, 56px);
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.evento::before {
  content: ""; position: absolute; left: -70px; top: -70px; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(184,152,64,.13), transparent 70%); pointer-events: none;
}
.evento__intro { max-width: 62ch; position: relative; }
.evento__title {
  font-family: var(--serif); font-weight: 600; line-height: 1.05;
  font-size: clamp(28px, 3.4vw, 42px); color: var(--sea-800);
  margin: 12px 0 14px; text-wrap: balance;
}
.evento__desc { font-size: 16px; color: var(--ink-500); line-height: 1.6; }
.evento__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px);
  margin-top: 34px; padding-top: 32px; border-top: 1px solid var(--cream-200);
}
.epil__ic { color: var(--gold-600); display: inline-flex; }
.epil__t { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--sea-800); margin: 12px 0 6px; }
.epil__s { font-size: 14px; color: var(--ink-500); line-height: 1.5; }
.evento__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-top: 36px;
}
.evento__kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-600);
}
@media (max-width: 720px) {
  .evento__grid { grid-template-columns: 1fr; gap: 22px; }
  .evento__cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--sea-900); color: #fff; padding-block: 30px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.footer .nav a { color: rgba(255,255,255,.82); font-weight: 500; }
.footer .nav a:hover { color: #fff; }
.footer__social { display: flex; gap: 12px; }
.footer__social a {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--on-dark-line);
  display: grid; place-items: center; color: #fff; transition: all .25s var(--ease);
}
.footer__social a:hover { background: var(--gold-500); border-color: var(--gold-500); transform: translateY(-2px); }
.footer__intern { color: rgba(255,255,255,.5); margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--on-dark-line); transition: color .2s var(--ease); }
.footer__intern:hover { color: var(--gold-300); }
.back-to-sys {
  position: fixed; left: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 9px;
  background: var(--sea-800); color: #fff; border: 1px solid rgba(255,255,255,.16); padding: 11px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop); transition: transform .2s var(--ease), background .2s var(--ease);
}
.back-to-sys:hover { transform: translateY(-2px); background: var(--sea-700); }
.back-to-sys svg { color: var(--gold-300); }
.reveal.is-in { opacity: 1 !important; transform: none !important; }

/* ============================================================
   Chat de atendimento (Lia / Fortiër)
   ============================================================ */
.chat-fab {
  /* safe-area: no iPhone sem botão, 20px cravados caem em cima da barra de
     gesto do sistema — o env() soma a folga real do aparelho (0 no desktop) */
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 95;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gold-500); color: #1a1407;
  display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(169,121,42,.7);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.chat-fab:hover { transform: translateY(-3px) scale(1.04); background: var(--gold-600); color: #fff; }
.chat-fab.is-open { transform: scale(.9); opacity: 0; pointer-events: none; }

.chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 96;
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 40px));
  background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(9,30,37,.6);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
}
.chat-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: var(--sea-800); color: #fff; }
.chat-head__id { display: flex; align-items: center; gap: 12px; }
.chat-av { width: 40px; height: 40px; border-radius: 50%; background: var(--gold-500); color: #1a1407; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 18px; }
.chat-name { font-weight: 600; font-size: 15px; }
.chat-status { font-size: 12px; color: var(--gold-300); display: flex; align-items: center; gap: 6px; }
.chat-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #43b06a; }
.chat-x { color: rgba(255,255,255,.8); width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
.chat-head__btns { display: flex; align-items: center; gap: 2px; flex: none; }
.chat-min { color: rgba(255,255,255,.8); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.chat-min:hover, .chat-x:hover { background: rgba(255,255,255,.14); color: #fff; }
.chat-min svg { transition: transform .25s var(--ease); }

/* ── MINIMIZADO ──────────────────────────────────────────────────────────
   Encolhe pra faixa do cabeçalho. A conversa não é apagada: continua no
   sessionStorage e reaparece inteira ao abrir de novo.
   Especificidade de 2 classes de propósito: no celular a regra
   `.chat-panel { height: 100dvh }` fica dentro de uma media query, e media
   query não muda especificidade — então esta aqui vence lá também, que é
   justamente onde encolher importa. */
.chat-panel.is-min { height: auto; }
.chat-panel.is-min .chat-msgs,
.chat-panel.is-min .chat-quick,
.chat-panel.is-min .chat-input,
.chat-panel.is-min .chat-wa,
.chat-panel.is-min .chat-cart,
.chat-panel.is-min .chat-gate { display: none; }
.chat-panel.is-min .chat-head { cursor: pointer; }
.chat-panel.is-min .chat-min svg { transform: rotate(180deg); }
/* No celular a faixa encolhida encosta no rodapé da tela, e é lá que mora a
   barra "Ver meu pedido". Sem isto, minimizar o Fortinho TAMPA o pedido —
   trocaria um estorvo por outro. A faixa mede 74px (medido, não estimado);
   78 deixa 4px de respiro entre as duas. */
body.chat-min-on .pedido-bar { bottom: 78px; }
.chat-x:hover { background: rgba(255,255,255,.12); color: #fff; }

.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--cream-50); }
.chat-msg { display: flex; }
.chat-msg--user { justify-content: flex-end; }
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.chat-msg--bot .chat-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink-900); }
.chat-msg--user .chat-bubble { background: var(--sea-700); color: #fff; border-bottom-right-radius: 5px; }
.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-300); animation: chatDot 1s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 8px; }
.chat-chip { font-size: 12.5px; font-weight: 600; color: var(--sea-700); background: #fff; border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 13px; transition: all .15s; }
.chat-chip:hover { border-color: var(--gold-500); color: var(--gold-600); }

.chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.chat-input input { flex: 1; border: 1px solid var(--line-strong); border-radius: 999px; padding: 11px 16px; font-size: 14px; color: var(--ink-900); }
.chat-input input:focus { outline: none; border-color: var(--gold-500); }
.chat-input button { width: 42px; height: 42px; border-radius: 50%; background: var(--gold-500); color: #fff; display: grid; place-items: center; flex: none; transition: background .15s; }
.chat-input button:hover { background: var(--gold-600); }

/* "IR PARA O CARRINHO" VEM ANTES DO WHATSAPP (ordem do dono, 13/ago).
   Quem já escolheu está a um toque de fechar no próprio site; mandar essa
   pessoa pro WhatsApp é atravessar a venda. O verde do WhatsApp continua
   embaixo, como saída — não como caminho principal. Petrol sobre creme, que é
   a hierarquia da casa. */
.chat-cart { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 12px; border: 0; border-top: 1px solid rgba(6,43,64,.10); background: var(--cream-100, #F3EDE1); color: var(--ink-900, #062B40); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: filter .15s; }
.chat-cart:hover { filter: brightness(.97); }
.chat-wa { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 12px; background: #25D366; color: #fff; font-weight: 600; font-size: 14px; transition: filter .15s; }
.chat-wa:hover { filter: brightness(1.05); }
.chat-wa.pulse { animation: waPulse 1.4s ease-in-out 2; }
@keyframes waPulse { 50% { filter: brightness(1.12); } }

/* ============================================================
   Chat order card
   ============================================================ */
.chat-order { align-self: flex-start; max-width: 88%; background: #fff; border: 1px solid var(--gold-300); border-radius: 16px; border-bottom-left-radius: 5px; padding: 14px; margin-top: 2px; box-shadow: 0 8px 20px -14px rgba(169,121,42,.6); }

/* ============================================================
   Fallback do WhatsApp (quando popup é bloqueado)
   ============================================================ */
.wa-fallback { position: fixed; inset: 0; z-index: 200; background: rgba(6,33,47,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.wa-card { position: relative; width: min(360px, 100%); background: #fff; border-radius: 20px; padding: 30px 26px 26px; text-align: center; box-shadow: 0 40px 90px -30px rgba(9,30,37,.7); }
.wa-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-500); font-size: 15px; }
.wa-close:hover { background: rgba(0,0,0,.06); }
.wa-ic { width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: grid; place-items: center; margin: 0 auto 16px; }
.wa-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; }
.wa-card p { font-size: 14px; color: var(--ink-500); margin-bottom: 18px; line-height: 1.45; }
.wa-go { display: block; background: #25D366; color: #fff; font-weight: 700; font-size: 15px; padding: 14px; border-radius: 12px; transition: filter .15s; }
.wa-go:hover { filter: brightness(1.05); }
.wa-num { margin-top: 14px; font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--ink-900); letter-spacing: .02em; }

/* ============================================================
   Clube · Área do Membro (carteira de pontos)
   ============================================================ */
.membro-band { background: linear-gradient(180deg, var(--sea-700), var(--sea-900)); padding: clamp(36px, 5vw, 60px) 0 clamp(40px, 6vw, 68px); border-top: 1px solid rgba(201,169,78,.25); }
.membro-band__head { text-align: center; margin-bottom: 26px; }
.membro-band__head .eyebrow { color: var(--gold-300); }
.membro-band__title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.04; color: #fff; margin: 10px 0 8px; }
.membro-band__sub { color: var(--on-dark-soft); font-size: 15px; max-width: 48ch; margin: 0 auto; }
.mb-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.mb-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.mb-login { max-width: 440px; margin-inline: auto; text-align: center; }
.mb-login__ic { font-size: 42px; margin-bottom: 10px; }
.mb-login__t { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.mb-login__s { color: var(--ink-500); font-size: 15px; margin-bottom: 20px; }
.mb-in { width: 100%; height: 50px; padding: 0 16px; margin-bottom: 12px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 15px; color: var(--ink-900); background: #fff; }
.mb-in:focus { outline: none; border-color: var(--gold-500); }
.mb-err { color: #b4502f; font-size: 13px; min-height: 18px; text-align: left; margin-bottom: 4px; }
.mb-login__note { font-size: 12.5px; color: var(--ink-300); margin-top: 14px; }
.mb-pin { text-align: center; letter-spacing: .5em; font-size: 22px; font-weight: 700; font-family: var(--mono); }
.mb-back { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--ink-500); }
.mb-back:hover { color: var(--gold-600); }
.mb-forgot { display: block; width: 100%; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--gold-600); }
.mb-forgot:hover { text-decoration: underline; }
.mb-wa-link { display: block; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: #25D366; }
.mb-wa-link:hover { text-decoration: underline; }
.mb-card.shake { animation: mbShake .4s; }
@keyframes mbShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.mb-wallet { color: #fff; background: linear-gradient(150deg, var(--sea-700), var(--sea-900)); border: none; position: relative; overflow: hidden; }
.mb-wallet::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; background: radial-gradient(circle, color-mix(in srgb, var(--tier) 40%, transparent), transparent 70%); }
.mb-wallet__top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.mb-hello { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.mb-since { font-size: 12.5px; color: rgba(255,255,255,.6); margin-top: 2px; }
.mb-out { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 6px 12px; }
.mb-out:hover { background: rgba(255,255,255,.1); color: #fff; }
.mb-pts { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 4px; position: relative; z-index: 1; }
.mb-pts__n { font-family: var(--serif); font-size: 56px; font-weight: 700; line-height: 1; color: var(--gold-300); }
.mb-pts__l { font-size: 15px; color: rgba(255,255,255,.7); }
.mb-tier { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mb-tier__b { font-weight: 700; font-size: 14px; background: var(--tier); color: #fff; padding: 5px 12px; border-radius: 999px; }
.mb-status { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.55); padding: 4px 9px; border-radius: 6px; }
.mb-tier__perk { font-size: 13px; color: rgba(255,255,255,.75); }
.mb-prog { height: 8px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.mb-prog__bar { height: 100%; background: var(--gold-400); border-radius: 999px; transition: width .5s var(--ease); }
.mb-prog__lbl { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 8px; }
.mb-prog__lbl b { color: #fff; }

/* régua de níveis (FOMO) */
.mb-rg { position: relative; margin: 22px 14px 8px; padding-bottom: 34px; }
.mb-rg__track { position: relative; height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); }
.mb-rg__fill { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; border-radius: 999px; transition: width .6s var(--ease); }
.mb-rg__node { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.mb-rg__dot { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.55); display: grid; place-items: center; font-size: 13px; }
.mb-rg__node.on .mb-rg__dot { background: #fff; border-color: #fff; }
.mb-rg__cap { position: absolute; top: 32px; white-space: nowrap; font-size: 9.5px; color: rgba(255,255,255,.7); display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.mb-rg__cap small { font-size: 9.5px; opacity: .75; }
.mb-rg__node.on .mb-rg__cap { color: #fff; }
.mb-rg__node:first-child .mb-rg__cap { left: 0; align-items: flex-start; }
.mb-rg__node:last-child .mb-rg__cap { right: 0; align-items: flex-end; }
.mb-rg__you { position: absolute; top: -30px; transform: translateX(-50%); transition: left .6s var(--ease); }
.mb-rg__you span { position: relative; display: inline-block; background: #fff; color: var(--tier); font-weight: 800; font-size: 10.5px; letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0,0,0,.28); text-transform: uppercase; }
.mb-rg__you span::after { content: ""; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; }
.mb-fomo { font-size: 13px; color: #fff; background: rgba(0,0,0,.18); border-radius: 11px; padding: 11px 13px; margin-top: 4px; line-height: 1.45; }
.mb-fomo b { font-weight: 800; }
.mb-demo { margin-top: 16px; width: 100%; font-size: 13px; font-weight: 600; color: var(--sea-900); background: var(--gold-400); border-radius: 9px; padding: 11px; transition: background .2s; position: relative; z-index: 1; }
.mb-demo:hover { background: var(--gold-300); }

.mb-h4 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink-900); margin-bottom: 14px; }
.mb-rewards { display: flex; flex-direction: column; gap: 10px; }
.mb-reward { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.mb-reward.is-lock { opacity: .55; }
.mb-reward__e { font-size: 24px; }
.mb-reward__i { flex: 1; }
.mb-reward__n { font-weight: 600; font-size: 14.5px; color: var(--ink-900); }
.mb-reward__c { font-family: var(--mono); font-size: 12px; color: var(--gold-600); }
.mb-reward__b { font-size: 12.5px; font-weight: 700; color: #fff; background: var(--gold-500); border-radius: 8px; padding: 8px 12px; white-space: nowrap; }
.mb-reward__b:disabled { background: var(--cream-200); color: var(--ink-500); cursor: default; }
.mb-reward__b:not(:disabled):hover { background: var(--gold-600); }
.mb-earns, .mb-hist { display: flex; flex-direction: column; }
.mb-earn { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-700); }
.mb-earn:last-child { border: 0; }
.mb-earn b { color: var(--gold-600); font-family: var(--mono); font-size: 13px; }
.mb-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; align-items: center; }
.mb-h:last-child { border: 0; }
.mb-h__d { color: var(--ink-300); font-family: var(--mono); font-size: 11.5px; }
.mb-h__l { color: var(--ink-700); }
.mb-h__v { font-family: var(--mono); font-weight: 700; }
.mb-h__v.pos { color: #1f8a5b; }
.mb-h__v.neg { color: #b4502f; }
.mb-h--empty { color: var(--ink-300); justify-content: center; display: block; text-align: center; }
.mb-orders { display: flex; flex-direction: column; gap: 8px; }
.mb-o { background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: 10px; padding: 11px 13px; }
.mb-o__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mb-o__d { font-family: var(--mono); font-size: 11.5px; color: var(--ink-500); }
.mb-o__t { font-weight: 700; color: var(--ink-900); }
.mb-o__it { font-size: 13.5px; color: var(--ink-700); margin-top: 3px; }
.mb-cupons { display: flex; flex-direction: column; gap: 8px; }
.mb-cup { display: flex; align-items: center; gap: 12px; background: var(--cream-50); border: 1px dashed var(--gold-400); border-radius: 10px; padding: 11px 13px; }
.mb-cup.is-used { opacity: .55; border-style: solid; border-color: var(--cream-200); }
.mb-cup__e { font-size: 22px; }
.mb-cup__i { flex: 1; min-width: 0; }
.mb-cup__n { font-weight: 600; color: var(--ink-900); font-size: 14px; }
.mb-cup__c { font-family: var(--mono); font-size: 11.5px; color: var(--ink-500); letter-spacing: .04em; }
.mb-cup__s { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #1f8a5b; background: rgba(31,138,91,.12); padding: 4px 9px; border-radius: 6px; }
.mb-cup__s.used { color: var(--ink-500); background: var(--cream-100); }
@media (max-width: 760px) { .mb-grid { grid-template-columns: 1fr; } }
.chat-order__h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 10px; }
.chat-order__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-900); padding: 5px 0; }
.chat-order__row b { font-weight: 600; white-space: nowrap; }
.chat-order__total { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink-900); }
.chat-order__btn { display: block; width: 100%; text-align: center; margin-top: 12px; background: var(--gold-500); color: #1a1407; font-weight: 700; font-size: 14px; padding: 12px; border-radius: 10px; transition: filter .15s, background .15s; }
.chat-order__btn:hover { background: var(--gold-600); color: #fff; }
.chat-order__btn:disabled { background: var(--sea-700); color: #fff; }
.chat-order__wa { display: block; text-align: center; margin-top: 9px; color: #1f8a5b; font-weight: 600; font-size: 13px; }
.chat-order__wa:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .chat-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* CELULAR: o dono ficou PRESO no Fortinho (14/ago) — sem alcançar o − e o
     ✕. Em iPhone/in-app browser o topo do painel pode ficar sob o relógio/
     notch ou sob a barra do app; o cabeçalho ganha o respiro da área segura
     (exige viewport-fit=cover no <meta viewport>) e os dois botões viram
     alvo de 44px (regra de toque da Apple) — fechar não pode ser questão
     de mira. O respiro de baixo protege o campo de digitar da home bar. */
  .chat-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .chat-min, .chat-x { width: 44px; height: 44px; font-size: 18px; }
  .chat-input { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   Provador de Sabores
   ============================================================ */
.ff-overlay { position: fixed; inset: 0; z-index: 110; background: rgba(6,33,47,.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; visibility: hidden; }
.ff-overlay.is-open { opacity: 1 !important; visibility: visible !important; }
.ff-modal { width: min(480px, 100%); max-height: 92vh; overflow-y: auto; background: var(--cream-50); border-radius: 22px; padding: 30px; position: relative; box-shadow: var(--shadow-pop); transform: translateY(14px) scale(.98); transition: transform .3s var(--ease); }
.ff-overlay.is-open .ff-modal { transform: none; }
.ff-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-500); font-size: 15px; transition: background .15s; }
.ff-x:hover { background: rgba(0,0,0,.06); }
.ff-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.ff-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-600); }
.ff-prog { display: flex; gap: 6px; }
.ff-prog span { height: 4px; flex: 1; border-radius: 2px; background: var(--cream-200); transition: background .3s; }
.ff-prog span.on { background: var(--gold-500); }
.ff-q { font-family: var(--serif); font-size: clamp(24px, 4vw, 30px); font-weight: 600; color: var(--ink-900); line-height: 1.1; }
.ff-sub { color: var(--ink-500); font-size: 14px; margin-top: 4px; }
.ff-opts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.ff-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; font-size: 16px; font-weight: 500; color: var(--ink-900); transition: all .18s var(--ease); }
.ff-opt:hover { border-color: var(--gold-500); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.ff-emoji { font-size: 26px; line-height: 1; }
.ff-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 22px; }
.ff-back { font-size: 14px; font-weight: 600; color: var(--ink-500); }
.ff-back:hover { color: var(--gold-600); }
.ff-count { font-family: var(--mono); font-size: 12px; color: var(--ink-300); }
/* resultado */
.ff-result { display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; }
.ff-card { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.ff-card__media { aspect-ratio: 16/10; background: linear-gradient(160deg, var(--cream-100), var(--cream-200)); }
.ff-photo { width: 100%; height: 100%; background-size: cover; background-position: center; display: grid; place-items: center; font-size: 54px; }
.ff-card__body { padding: 18px 20px 22px; }
.ff-name { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--ink-900); }
.ff-desc { color: var(--ink-500); font-size: 14px; margin-top: 6px; }
.ff-price { display: inline-block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--gold-600); margin-top: 12px; }
.ff-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.ff-actions .btn { width: 100%; }
.ff-actions .is-added { background: var(--sea-700); }
.ff-retry { font-size: 13px; font-weight: 600; color: var(--ink-500); }
.ff-retry:hover { color: var(--gold-600); }
.footer__legal { width: 100%; border-top: 1px solid var(--on-dark-line); margin-top: 26px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,.5); font-family: var(--mono); letter-spacing: .03em; }

/* ============================================================
   Cart drawer
   ============================================================ */
.cart-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(9,30,37,.5);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease);
  backdrop-filter: blur(2px);
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
  /* ---- A TINTA, e ela é o conserto de um bug que o Thiago reportou ----
     A gaveta declarava o FUNDO claro e não declarava a COR. Resultado: ela
     herdava o creme do tema escuro da página — creme sobre creme, contraste
     1,00:1. Sumia o nome do produto, a quantidade, os botões de + e −, o
     título, o X de fechar e o TOTAL. Só o preço aparecia, porque é cinza.
     Uma linha resolve as seis regras de uma vez, porque todas herdavam.
     Regra geral: quem declara `background` tem que declarar `color` junto. */
  color: var(--ink-900);
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(420px, 92vw);
  background: var(--cream-50); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .42s var(--ease), visibility .42s var(--ease);
  box-shadow: var(--shadow-pop);
  /* RT-009 (reteste 13/ago): fechada, a gaveta não pode ser lida nem tabulada.
     `visibility: hidden` é a terceira tranca (o inert/aria-hidden do app.js são
     as duas primeiras) e é a única que o navegador aplica sem JS nenhum. Está
     na TRANSIÇÃO de propósito, mesmo padrão do .cart-overlay logo acima: o
     valor só vira `hidden` no fim dos .42s, então a saída deslizante continua
     visível até terminar. Sem isso, a gaveta sumia de repente ao fechar. */
  visibility: hidden;
}
.cart-drawer.is-open { transform: none; visibility: visible; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.cart-drawer__title { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.cart-close { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; transition: background .2s; }
.cart-close:hover { background: rgba(0,0,0,.06); }
.cart-items { flex: 1; overflow-y: auto; padding: 12px 24px; }
.cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 14px; color: var(--ink-500); text-align: center; }
.cart-empty svg { color: var(--cream-200); }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item__thumb { width: 56px; height: 56px; border-radius: 8px; background: var(--cream-100); display: grid; place-items: center; font-family: var(--mono); color: var(--gold-ink); font-size: 18px; }
.cart-item__name { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.cart-item__price { font-size: 13px; color: var(--ink-500); font-family: var(--mono); }
.cart-qty { display: flex; align-items: center; gap: 10px; }
.cart-qty button { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: all .2s; }
.cart-qty button:hover { border-color: var(--gold-500); color: var(--gold-ink); }
.cart-qty span { font-family: var(--mono); min-width: 18px; text-align: center; }
.cart-drawer__foot { padding: 22px 24px; border-top: 1px solid var(--line); background: var(--cream-100); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cart-total__label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.cart-total__val { font-family: var(--serif); font-size: 26px; font-weight: 600; }

/* checkout — nome/telefone/modalidade/endereço na sacola (leva 3) */
.checkout-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.checkout-fields__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-in {
  width: 100%; height: 44px; padding: 0 14px;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); color: var(--ink-900); font-size: 14px;
  font-family: var(--sans); transition: border-color .2s var(--ease);
}
.checkout-in::placeholder { color: var(--ink-300); }
.checkout-in:focus { outline: none; border-color: var(--gold-500); }
.checkout-in--select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E7C82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.checkout-end { height: 68px; padding: 10px 14px; resize: vertical; line-height: 1.4; }

/* ── A GAVETA NO CELULAR (auditoria UX 13/ago — queixa direta do dono) ──
   Números medidos em 390×844 contra os valores desktop acima:
   · −/+ tinham 26×26px (59% do mínimo de toque de 44px) e errar o − com
     qty 1 APAGA a linha — alvo minúsculo com consequência destrutiva;
   · a coluna −/+ comia ~90px e o nome sobrava com ~137px (quebrava em 3
     linhas desalinhadas do bloco de botões);
   · o rodapé tinha padding cravado sem env(safe-area-inset-bottom): no
     iPhone sem botão físico os campos encostavam na barra de gesto;
   · dois inputs lado a lado de ~150px truncavam o placeholder
     "WhatsApp com DDD" (~132px de texto). */
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }                       /* gaveta franca, sem sliver de página atrás "puxando" o dedo */
  .cart-drawer__head { padding: 16px 20px; }
  .cart-items { padding: 8px 20px; overscroll-behavior: contain; } /* o scroll da lista não vaza pro fundo */
  .cart-item { grid-template-columns: 48px 1fr auto; gap: 12px; }
  .cart-item__thumb { width: 48px; height: 48px; }     /* acompanha a coluna de 48px — o bloco desktop crava 56px */
  .cart-qty { gap: 6px; }
  .cart-qty button { width: 40px; height: 40px; border-radius: 10px; } /* alvo de toque decente pra ação destrutiva */
  .checkout-fields__row { grid-template-columns: 1fr; } /* um campo por linha — placeholder inteiro, digitação folgada */
  .cart-drawer__foot { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
}

/* ── RT-008 (reteste 13/ago): TELA BAIXA — a gaveta rola INTEIRA ──
   CONSTRAINT medida em 320×568: o rodapé (total + 2 campos + Cartão Fortiër +
   botão + nota) come ~300px dos 568. Como `.cart-items` é `flex:1` e o rodapé
   é o último item da coluna, ele fica colado embaixo SEMPRE e a lista sobra
   como uma faixa de dezenas de pixels: a cliente não via o que estava
   comprando nem alcançava o +/− sem rolar dentro de uma fresta.
   Das três saídas do relatório (só total+CTA fixos · mandar nome/telefone/
   cartão pro checkout · rodapé rolando junto), esta é a de MENOR risco e a
   que preserva o fluxo atual: é CSS puro, ninguém muda de tela nem de ordem
   de campo, e o JS (#coName/#coFone/[data-finalizar]/[data-clube-strip])
   continua achando tudo onde estava. As outras duas exigiriam mexer no DOM da
   gaveta — que é HTML DUPLICADO em cinco páginas (index, menu, sobre, clube,
   privacidade) e três delas são de outro agente: consertaria duas e deixaria
   três desalinhadas. Aqui o conserto vale pras cinco de uma vez.
   O cabeçalho gruda no topo pra o X de fechar nunca sair da tela, e o rodapé
   fica compacto pra o CTA cair logo abaixo dos itens — quanto menos altura
   ele ocupa, menos rolagem até o "Finalizar pedido". Largura E altura na
   consulta: celular deitado (>560px) não passa por aqui, e desktop baixo
   também não — a gaveta lá tem 420px e nunca teve o problema. */
@media (max-width: 560px) and (max-height: 700px) {
  .cart-drawer { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .cart-drawer__head {
    position: sticky; top: 0; z-index: 2;
    background: var(--cream-50); padding: 12px 20px;
  }
  .cart-drawer__title { font-size: 19px; }
  /* a lista deixa de ser a única área rolável: cresce com o conteúdo e empurra
     o rodapé pra baixo, que é o que faz a gaveta inteira rolar */
  .cart-items { flex: 0 0 auto; overflow: visible; min-height: 128px; }
  .cart-empty { height: auto; padding: 20px 0 4px; }  /* height:100% de pai sem altura definida colapsaria o vazio */
  .cart-drawer__foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); }
  .cart-total { margin-bottom: 10px; }
  .cart-total__val { font-size: 22px; }
  .checkout-fields { gap: 8px; margin-bottom: 10px; }
  .checkout-in { height: 42px; }
  /* `.cart-drawer__foot` no seletor NÃO é enfeite: `.cart-note` é redefinida
     lá embaixo (bloco de tema escuro, "expert de conversão 09/jul"), e media
     query não soma especificidade nenhuma — um `.cart-note` solto aqui perde
     por ORDEM DE FONTE pro que vem depois no arquivo e a regra morre calada.
     Com o pai no seletor a conta vira (0,2,0) e ganha em qualquer posição. */
  .cart-drawer__foot .cart-note { margin-top: 8px; }
}

/* toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; translate: -50% 20px;
  z-index: 100; background: var(--sea-800); color: #fff;
  padding: 13px 20px; border-radius: 10px; font-size: 14px;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: opacity .3s var(--ease), translate .3s var(--ease); pointer-events: none;
  box-shadow: var(--shadow-pop);
}
.toast.is-show { opacity: 1; translate: -50% 0; }
.toast svg { color: var(--gold-300); }

/* ============================================================
   Páginas internas — hero compacto
   ============================================================ */
.page-hero {
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(184,152,64,.14), transparent 55%),
    linear-gradient(180deg, var(--sea-900), var(--sea-800));
  color: #fff; padding-top: 84px;
}
.page-hero__inner { padding-block: clamp(56px, 8vw, 96px); display: flex; flex-direction: column; gap: 16px; }
.page-hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -.02em; }
.page-hero__title em { font-style: italic; color: var(--gold-300); }
.page-hero__desc { color: var(--on-dark-soft); max-width: 52ch; font-size: 17px; }
.page-hero .eyebrow { color: var(--gold-300); }

/* ============================================================
   Lote pill — contador real do lote (home cinema + menu)
   ============================================================ */
.lote-pill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  background:rgba(4,20,29,.55);backdrop-filter:blur(12px);border:1px solid rgba(201,169,78,.55);
  border-radius:999px;padding:10px 18px;font-size:13px;color:var(--cream-200)}
.lote-pill strong{font-variant-numeric:tabular-nums;color:var(--cream-50);font-weight:600;letter-spacing:.04em}
.lote-pill em{font-family:var(--serif);font-style:italic;color:var(--gold-400);font-size:14px}
.lote-pill .dot-live{width:7px;height:7px;border-radius:50%;background:var(--gold-400);animation:lotePulsa 1.6s ease-in-out infinite}
@keyframes lotePulsa{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@media(max-width:560px){.lote-pill em{display:none}}
@media(prefers-reduced-motion:reduce){.lote-pill .dot-live{animation:none}}

/* ============================================================
   Utilidades / reveal
   ============================================================ */
.reveal { opacity: 1; transform: none; }
.reveal.is-in { opacity: 1; transform: none; }
.divider { height: 1px; background: var(--line); border: 0; }
.text-gold { color: var(--gold-600); }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .features__card { grid-template-columns: repeat(2, 1fr); }
  .feature:nth-child(2) { border-right: none; }
  .feature:nth-child(1), .feature:nth-child(2) { border-bottom: 1px solid var(--cream-200); }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .menu-toggle { display: flex; }
  .nav.is-open {
    display: flex; flex-direction: column; gap: 4px; align-items: stretch;
    position: absolute; top: 84px; left: 0; right: 0;
    background: var(--cream-50); border-bottom: 1px solid var(--line);
    padding: 16px var(--gutter) 24px;
  }
  .site-header.is-solid .nav.is-open a, .site-header--over .nav.is-open a { color: var(--ink-900); }
  .nav.is-open a { padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--line); }
  /* !important de propósito: o CTA do sobre.html traz um
     style="grid-template-columns: 1fr auto" INLINE, e inline ganha de media
     query. Em 390px isso mantinha duas colunas e empurrava o botão
     "Entrar no Clube — grátis" até 465px — 75px FORA da tela. É esse estouro
     horizontal que, no iOS, deixa a página "andar" de lado e joga a gaveta
     do carrinho (ancorada na direita) pra fora da área visível. */
  .clube { grid-template-columns: 1fr !important; }
  /* o botão-âncora do CTA pode quebrar linha no celular; sem isto, o
     white-space:nowrap do .btn estoura o cartão em telas ≤350px */
  .clube > .btn { max-width: 100%; white-space: normal; text-align: center; }
  .clube__row { grid-template-columns: 1fr; }
  .clube__row .btn { width: 100%; height: 52px; }
}
@media (max-width: 680px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  /* duas colunas em tela de celular deixam o card com ~160px. Com o padding
     de origem as pastilhas 240ml/500ml quebravam pra duas linhas e comiam
     altura do card justamente onde ela é mais cara. */
  .pc-size { padding: 6px 8px; font-size: 11px; letter-spacing: .02em; }
  .pc-sizes { gap: 5px; margin-top: 8px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .hero { height: auto; min-height: 88vh; max-height: none; padding-bottom: 40px; }
  .hero__content { padding-block: 130px 40px; }
  .hero__nav { display: none; }
  .header-actions .btn--ghost { display: none; }
  /* ── O HEADER NO CELULAR ──────────────────────────────────────────────
     Medido em 375px ANTES de eu mexer: a fila (logo 150 + carrinho + "Pedir
     agora" 156 + hambúrguer) terminava em 466px numa tela de 356px úteis.
     Como o body tem overflow-x:hidden, o hambúrguer não ficava apertado —
     ficava FORA da tela, sem jeito de abrir o menu no telefone.
     Então aqui não é só abrir espaço pros ícones novos; é caber de verdade:
     logo menor, ícones de 40, folga de 6 e o botão curto ("Pedir").
     O Instagram sai do header no celular — continua no rodapé de todas as
     páginas. O WhatsApp fica, porque é por onde o pedido fecha hoje. */
  .site-header__inner { gap: 8px; }
  .site-header .logo { width: 112px; }
  .header-actions { gap: 6px; }
  .hdr-ico--ig { display: none; }   /* o do pedido continua: é o caminho de volta */
  .header-actions .cart-btn, .header-actions .hdr-ico, .header-actions .menu-toggle { width: 38px; height: 38px; }
  .header-actions .btn { padding-inline: 12px; font-size: 10.5px; }
  .header-actions .btn .btn-lg { display: none; }
  .header-actions .btn .btn-sm { display: inline; }
  .page-hero__desc { font-size: 15px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .footer .nav { display: flex !important; flex-direction: row; flex-wrap: wrap; position: static; background: none; border: none; padding: 0; }
  .footer .nav a { border: none !important; padding: 0 !important; font-size: 14px !important; }
}
/* Telas muito estreitas (≤350px: iPhone SE 1ª geração, Androids antigos).
   Aqui não cabe todo mundo. O que sai é o botão dourado — o carrinho, o
   WhatsApp e o hambúrguer são caminhos que NÃO têm substituto no topo, e o
   "Pedir" tem: é o primeiro item do menu que o hambúrguer abre. */
@media (max-width: 350px) {
  .site-header .header-actions .btn--gold { display: none; }
}
@media (max-width: 460px) {
  .features__card { grid-template-columns: 1fr; }
  .feature { border-right: none !important; border-bottom: 1px solid var(--cream-200); }
  .feature:last-child { border-bottom: none; }
}

/* ============================================================
   Menu data-driven — foto, selos (semana/assinatura), escassez
   ============================================================ */
/* recorte 62% e não 50%: em TODAS as fotos do Bruno o doce fica no terço de
   baixo e sobra parede em cima. Centralizar o quadro centralizava a parede,
   não o produto. */
.pm-photo { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 62%;
  background-color: var(--cream-100); background-image: linear-gradient(160deg, var(--cream-100), var(--cream-200));
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1), filter .5s var(--ease); display: grid; place-items: center;
  /* o produto já nasce grande: 10% de aproximação em repouso come a borda de
     tábua e parede vazia que sobra em toda foto e traz o doce pra frente.
     Sem isso o 4:5 mostra a composição inteira e o produto fica pequeno —
     mostrar mais foto não é mostrar mais produto. */
  transform: scale(1.10); }
/* aproximação lenta + a foto mais viva — ver o bloco A VITRINE lá em cima.
   Esta regra vem DEPOIS daquela no arquivo, então é ela que vale: manter as
   duas iguais dava conflito silencioso (a de cima perdia e ninguém via). */
.product-card:hover .pm-photo,
.product-card:focus-within .pm-photo { transform: scale(1.17); filter: saturate(1.08) contrast(1.03); }
.pm-empty { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-300); }
.product-card__media video.hover-vid { z-index: 1; }

.badge--semana { background: var(--gold-500); color: #1a1407; display: inline-flex; align-items: center; gap: 7px; }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: #1a1407; box-shadow: 0 0 0 3px rgba(26,20,7,.18); }
.badge--assinatura { background: rgba(6,43,64,.82); color: var(--gold-300); border: 1px solid rgba(184,152,64,.55); backdrop-filter: blur(4px); }

.product-card.is-semana { border-color: rgba(184,152,64,.4); box-shadow: 0 0 0 1px rgba(184,152,64,.16); }
.product-card.is-semana:hover { box-shadow: var(--shadow-card), 0 0 0 1px rgba(184,152,64,.42); }

/* "Esgotou" (86): item continua na vitrine — acinzentado, com selo elegante, sem poder comprar */
.badge--esgotado { background: var(--ink-900); color: var(--gold-300); border: 1px solid rgba(184,152,64,.5); }
.product-card.is-esgotado { pointer-events: none; }
.product-card.is-esgotado .pm-photo, .product-card.is-esgotado .product-card__title,
.product-card.is-esgotado .product-card__desc { filter: grayscale(.75); opacity: .5; }
.product-card.is-esgotado .product-card__foot { opacity: .4; }
/* esgotado não ganha a aproximação do hover — mas tem que ficar na MESMA
   escala de repouso das outras, senão a foto encolhia ao passar o mouse */
.product-card.is-esgotado:hover .pm-photo { transform: scale(1.10); }
.product-card.is-esgotado .add-btn { pointer-events: none; }

.pc-price { display: inline-flex; flex-direction: column; gap: 2px; }
.scar { font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--gold-600); }

.menu-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-500); padding: 40px; border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* trigger flutuante */
.mng-trigger { position: fixed; left: 20px; bottom: 20px; z-index: 70; display: inline-flex; align-items: center; gap: 9px;
  background: var(--sea-800); color: #fff; border: 1px solid rgba(255,255,255,.14); padding: 11px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-pop); transition: transform .2s var(--ease), background .2s var(--ease); }
.mng-trigger:hover { transform: translateY(-2px); background: var(--sea-700); }
.mng-trigger svg { color: var(--gold-300); }

/* overlay + painel do gerenciador */
.mng-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(4,22,29,.55); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.mng-overlay.is-open { opacity: 1; visibility: visible; }
.mng-panel { width: min(880px, 100%); background: var(--cream-50); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; }
.mng-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px; background: var(--sea-800); color: #fff; position: sticky; top: 0; z-index: 2; }
.mng-title { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.mng-sub { font-size: 12.5px; color: var(--on-dark-soft); margin-top: 3px; }
.mng-counts { color: var(--gold-300); }
.mng-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mng-btn { background: var(--gold-500); color: #1a1407; font-weight: 600; font-size: 13px; padding: 10px 14px; border-radius: 8px; transition: background .2s; }
.mng-btn:hover { background: var(--gold-400); }
.mng-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
.mng-ghost:hover { background: rgba(255,255,255,.08); }
.mng-close { width: 38px; height: 38px; border-radius: 8px; color: #fff; font-size: 16px; transition: background .2s; }
.mng-close:hover { background: rgba(255,255,255,.12); }
.mng-list { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 12px; }

.mng-row { display: grid; grid-template-columns: 28px 84px 1fr; gap: 12px; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.mng-reorder { display: flex; flex-direction: column; gap: 4px; }
.mng-reorder button { width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink-500); font-size: 10px; transition: all .15s; }
.mng-reorder button:hover { border-color: var(--gold-500); color: var(--gold-600); }
.mng-photo { width: 84px; height: 84px; border-radius: 10px; background: var(--cream-100); background-size: cover; background-position: center; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-500); font-size: 11px; font-family: var(--mono); position: relative; overflow: hidden; }
.mng-photo__edit { position: absolute; inset: auto 0 0 0; background: rgba(6,43,64,.78); color: #fff; font-size: 10px; padding: 3px; text-align: center; }
.mng-photo.is-drag { outline: 2px solid var(--gold-500); outline-offset: -2px; background-color: rgba(184,152,64,.14); }
.mng-photo:hover { border-color: var(--gold-500); }
.mng-fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mng-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mng-in { border: 1px solid var(--line-strong); border-radius: 7px; padding: 9px 10px; font-size: 13.5px; font-family: var(--sans); color: var(--ink-900); background: #fff; min-width: 0; }
.mng-in:focus { outline: none; border-color: var(--gold-500); }
.mng-name { flex: 1 1 200px; font-weight: 600; }
.mng-cat { flex: 0 0 auto; }
.mng-desc { width: 100%; }
.mng-price { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-strong); border-radius: 7px; padding: 0 6px 0 10px; background: #fff; }
.mng-price i { font-style: normal; color: var(--ink-500); font-size: 13px; }
.mng-price input { border: 0; width: 64px; padding: 9px 4px; }
.mng-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.mng-seg button { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); background: #fff; }
.mng-seg button.on { background: var(--gold-500); color: #1a1407; }
.mng-scar { flex: 1 1 180px; }
.mng-esgota { margin-left: auto; color: var(--ink-500); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 7px; border: 1px solid var(--line-strong); transition: all .15s; }
.mng-esgota:hover { border-color: var(--ink-700); }
.mng-esgota.on { background: var(--ink-900); color: var(--gold-300); border-color: var(--ink-900); }
.mng-del { color: #9a3b3b; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 7px; border: 1px solid rgba(154,59,59,.3); }
.mng-del:hover { background: rgba(154,59,59,.08); }
.mng-row.is-esgotado-row { opacity: .7; }
.mng-row.is-esgotado-row .mng-photo { filter: grayscale(.6); }

@media (max-width: 640px) {
  .mng-head { flex-direction: column; }
  .mng-actions { flex-wrap: wrap; }
  .mng-row { grid-template-columns: 28px 64px 1fr; }
  .mng-photo { width: 64px; height: 64px; }
}

/* ============================================================
   DARK FORTIËR — o site inteiro na paleta da casa (09/jul).
   Fundo petrol profundo; dourado como brilho; o CREME vira o
   "papel" — reservado pro que precisa ser claro (cards de
   produto, a carta de eventos, o drawer do pedido).
   ============================================================ */
:root {
  --night: #041A26;          /* chão do site — entre o cine (#04141d) e o petrol oficial */
  --night-2: #062230;        /* respiro/faixas levemente mais claras */
  --on-night: var(--cream-50);
  --on-night-soft: rgba(251, 248, 241, .78);
  --on-night-mute: rgba(230, 218, 200, .55);
  --night-line: rgba(230, 218, 200, .14);
}
body { background: var(--night); color: var(--on-night); }

/* tipografia sobre o escuro */
.section-title { color: var(--on-night); }
.sec-head__sub { color: var(--on-night-mute); }
.lead { color: var(--on-night-soft); }
.menu-empty { color: var(--on-night-mute); }
.linkarrow { color: var(--on-night); }
.linkarrow:hover { color: var(--gold-300); }
.linkarrow--gold { color: var(--gold-300); }

/* barra de features vira vitrine escura */
.features__card { background: rgba(255, 255, 255, .035); border-color: var(--night-line); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .8); }
.feature { border-right-color: var(--night-line); }
.feature__icon { color: var(--gold-400); }
.feature__t { color: var(--on-night); }
.feature__s { color: var(--on-night-mute); }
@media (max-width: 900px) { .feature:nth-child(1), .feature:nth-child(2) { border-bottom-color: var(--night-line); } }
@media (max-width: 560px) { .feature { border-bottom-color: var(--night-line) !important; } }

/* header sólido (pós-scroll) agora escurece em vez de clarear */
.site-header.is-solid { background: rgba(4, 26, 38, .92); border-bottom: 1px solid var(--night-line); backdrop-filter: blur(10px); }
.site-header.is-solid .nav a, .site-header.is-solid .header-actions .cart-btn,
.site-header.is-solid .header-actions .hdr-ico { color: var(--on-night); }
.site-header.is-solid .nav a:hover { color: var(--gold-300); }
.site-header.is-solid .btn--ghost { border-color: var(--night-line); color: var(--on-night); }
.site-header.is-solid .btn--ghost:hover { border-color: var(--gold-400); color: var(--gold-300); background: rgba(201, 169, 78, .08); }
.site-header.is-solid .logo { background-image: none; }

/* menu mobile no escuro */
@media (max-width: 760px) {
  .nav.is-open { background: var(--night-2); border-bottom-color: var(--night-line); }
  .site-header.is-solid .nav.is-open a, .site-header--over .nav.is-open a { color: var(--on-night); border-bottom-color: var(--night-line); }
}

/* seções do menu (cardápio) sobre o escuro — os CARDS continuam claros (papel) */
.menu-section__num { color: var(--on-night-mute); }
.product-card { box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .85); border-color: rgba(230, 218, 200, .12); }

/* eventos: a carta continua CREME de propósito (papel sobre a mesa escura) */
.evento { box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); border-color: rgba(230, 218, 200, .16); }

/* rodapé harmoniza com o chão (era sea-900 sobre creme; agora funde suave) */
.footer { background: var(--night-2); border-top: 1px solid var(--night-line); }

/* toasts/miúdos */
.toast { background: var(--night-2); color: var(--on-night); border: 1px solid var(--night-line); }

/* ── expert de conversão (09/jul): microcopy, upsell, barra mobile ── */
.cart-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--ink-500); text-align: center; }
.cart-upsell { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-top: 16px; padding: 14px; border: 1px dashed var(--gold-400); border-radius: 12px; font-size: 13px; color: var(--ink-700); }
.cart-upsell .btn { white-space: nowrap; flex: none; }
.cart-item__thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cat-card__sub { display: block; font-size: 12px; letter-spacing: .08em; color: var(--gold-300); margin: 4px 0 10px; }
.pedido-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--sea-900); color: #fff; border-top: 1px solid rgba(230,218,200,.16); }
.pedido-bar__t { font-weight: 600; font-variant-numeric: tabular-nums; }
.pedido-bar[hidden] { display: none; }
@media (min-width: 761px) { .pedido-bar { display: none; } }
/* ── FORTINHO × BARRA "VER MEU PEDIDO" ──────────────────────────────────────
   O balão do Fortinho (z-index 95) sentava EM CIMA da metade direita do botão
   da barra fixa (z-index 60). Medido em 390×844: FAB em 302–360px sobre um
   botão que vai até 356px — o toque ali abria o CHAT em tela cheia em vez do
   carrinho, e parecia que "Ver meu pedido não abre".
   Quando a barra está na tela (carrinho com item), o Fortinho sobe pra cima
   dela: 72px de barra + respiro + o safe-area do iPhone.
   O seletor `~` funciona porque a barra é filha direta do <body> e o chat.js
   appenda o FAB no <body> por último — irmãos, barra antes do FAB. */
@media (max-width: 760px) {
  .pedido-bar:not([hidden]) ~ .chat-fab { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* Com a gaveta do carrinho ABERTA o Fortinho some: o FAB (z 95) flutua por
   cima da gaveta (z 90) e cobria o canto do "Finalizar pedido" — o botão
   mais importante do site. Modal aberto = um assunto só na tela.
   Mesmo truque de irmãos: o overlay é filho do <body>, o FAB vem depois. */
.cart-overlay.is-open ~ .chat-fab { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================================================
   PORTÃO DO FORTINHO — nome e WhatsApp antes de conversar
   ============================================================ */
.chat-gate {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  padding: 22px; background: var(--petrol, #062B40); border-radius: inherit; overflow-y: auto;
}
/* O PORTÃO NÃO PODE ENGOLIR A SAÍDA (dono preso no celular, 14/ago): o
   gate cobre o painel inteiro com inset:0 — inclusive o cabeçalho onde
   moram o − e o ✕. O cabeçalho sobe pra cima do portão e os dois botões
   voltam a existir na primeira tela, em qualquer aparelho. */
.chat-head { position: relative; z-index: 6; }
.chat-gate__sair {
  margin-top: 14px; background: none; border: 0; cursor: pointer;
  color: rgba(251,248,241,.55); font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
}
.chat-gate__sair:hover { color: #FBF8F1; }
.chat-panel.is-liberado .chat-gate { display: none; }
.chat-gate__box { width: 100%; max-width: 320px; text-align: center; }
.chat-gate__av { display: block; margin: 0 auto 12px; line-height: 0; }
.chat-gate__box h3 { font-family: var(--serif, Georgia, serif); font-size: 22px; color: #FBF8F1; margin-bottom: 8px; }
.chat-gate__p { font-size: 13.5px; line-height: 1.5; color: rgba(251,248,241,.72); margin-bottom: 16px; }
.chat-gate__p b { color: #C9A94E; font-weight: 600; }
.chat-gate__box form { display: flex; flex-direction: column; gap: 9px; }
.chat-gate__box input[type="text"], .chat-gate__box input:not([type]), .chat-gate__box input[inputmode="tel"] {
  width: 100%; padding: 11px 13px; border-radius: 10px; font-size: 15px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(251,248,241,.18); color: #FBF8F1;
}
.chat-gate__box input::placeholder { color: rgba(251,248,241,.4); }
.chat-gate__box input:focus { outline: none; border-color: #C9A94E; background: rgba(255,255,255,.09); }
.chat-gate__ck { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(251,248,241,.68); text-align: left; cursor: pointer; }
.chat-gate__ck input { width: 16px; height: 16px; flex: none; accent-color: #B89840; }
.chat-gate__erro { font-size: 12.5px; color: #E58C6C; text-align: left; }
.chat-gate__box button[type="submit"] {
  margin-top: 4px; padding: 12px; border-radius: 10px; font-size: 14.5px; font-weight: 700;
  background: #B89840; color: #062B40; border: none; cursor: pointer; transition: background .16s;
}
.chat-gate__box button[type="submit"]:hover { background: #C9A94E; }
.chat-gate__lgpd { margin-top: 14px; font-size: 11px; line-height: 1.5; color: rgba(251,248,241,.42); }

/* ============================================================
   ZOOM NO HOVER — decisão do dono, 13/ago: a "revelação" com segunda
   foto e o selo "ver por dentro" saíram ("tá horrível"). No lugar, o
   que ele pediu: um mergulho pra DENTRO do produto ao passar o mouse.
   O zoom é maior que o padrão dos cards (1.045) porque aqui ele é o
   efeito inteiro — mas o tempo é longo (1.2s) pra ser mergulho, não
   susto. A foto aberta (fotoAberta) continua guardada no dado; só não
   é mais desenhada — se um dia ele quiser de volta, o dado está lá.
   ============================================================ */
.pm-photo--aberta { display: none; }
.product-card:hover .pm-photo,
.product-card:focus-within .pm-photo { transform: scale(1.14); }
.pm-photo { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
  .pm-photo, .product-card:hover .pm-photo { transform: none; transition: none; }
}

/* ============================================================
   CORREÇÃO CRÍTICA — nome e preço do produto estavam INVISÍVEIS
   A página do cardápio é escura e os cards são papel BRANCO, mas
   o texto dentro deles herdava o creme da página: #FBF8F1 sobre
   #FFFFFF dá contraste 1,06 — o mínimo legível é 4,5. Na prática
   o cliente via o card, a foto e a descrição, e NÃO via o nome do
   produto nem o preço.
   O card agora declara sua própria tinta em vez de herdar do tema
   da página, então continua legível se a página mudar de fundo.
   ============================================================ */
.product-card { color: var(--ink-900); }
.product-card__title { color: var(--ink-900); }
.product-card__price { color: var(--ink-900); }
.product-card__desc { color: var(--ink-700); }
.product-card .pc-price { color: var(--ink-900); }

/* "preço a definir" — o produto existe, o preço é que falta. Fica visível e
   sóbrio, sem parecer erro nem esgotado, e o botão + ao lado fica desligado. */
.product-card__price.is-sem-preco {
  font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-500);
}
.add-btn[disabled] { opacity: .35; pointer-events: none; }

/* ============================================================
   QUANTIDADE NO CARD DO CARDÁPIO
   O + sozinho não dizia se ela já tinha pedido, nem quantos. Depois do
   primeiro clique o botão vira um controle: − 2 +. Enquanto o item não
   está no carrinho, o − e o número ficam escondidos e o card fica igual
   ao de sempre — nada de contador em zero, que é ruído.
   ============================================================ */
.pc-add { display: inline-flex; align-items: center; gap: 2px; }
.pc-add .pc-qtd__b, .pc-add .pc-qtd__n { display: none; }
.pc-add.tem { gap: 6px; padding: 3px; border: 1px solid var(--cream-200); border-radius: 999px; background: var(--paper); }
.pc-add.tem .pc-qtd__b, .pc-add.tem .pc-qtd__n { display: inline-flex; }
.pc-qtd__b { width: 28px; height: 28px; align-items: center; justify-content: center; border: 0;
  border-radius: 50%; background: transparent; color: var(--ink-700); font-size: 17px; line-height: 1;
  cursor: pointer; font-family: inherit; }
.pc-qtd__b:hover { background: var(--cream-100, rgba(0,0,0,.05)); color: var(--ink-900); }
.pc-qtd__n { min-width: 16px; justify-content: center; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-900); }

/* ============================================================
   CARDÁPIO — passada de acabamento (12/ago)
   Pedido dele: "o importante são as imagens, tem que ser tudo aesthetic".
   Nada aqui muda estrutura: é ritmo, respiro e o tratamento da foto.
   ============================================================ */

/* A FOTO É O PRODUTO. Um degradê muito suave no pé da imagem faz a legenda
   e o selo terem contraste sem escurecer o doce — e dá profundidade onde
   antes a foto encostava seca no texto. */
.product-card__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 42%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(6,43,64,.16));
}
/* o zoom no hover fica mais lento e mais curto: elegante é discreto */
.product-card:hover .pm-photo { transform: scale(1.045); }
.pm-photo { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }

/* RITMO DO CORPO. Título, descrição e preço estavam com o mesmo peso de
   espaço; agora a hierarquia respira: nome perto da foto, descrição solta,
   e o preço separado por um filete quase invisível. */
.product-card__body { display: flex; flex-direction: column; gap: 7px; padding: 16px 17px 15px; }
.product-card__title { font-size: 20px; line-height: 1.15; letter-spacing: -.012em; text-wrap: balance; }
/* A DESCRIÇÃO SAI INTEIRA (ordem do dono, 13/ago). O clamp de 3 linhas era
   corte puramente visual — o texto completo sempre esteve no HTML — e comia
   justamente o fim da descrição, que é onde mora o ingrediente que vende.
   Cortar a carta pra emparelhar cartão é o avesso da carta.
   Sem risco de grade torta: `.product-card` é flex-column e `__foot` tem
   `margin-top:auto`, então o preço continua ancorado no pé e a grade mantém
   os cards da mesma linha na mesma altura. */
.product-card__desc { font-size: 13.2px; line-height: 1.62; color: var(--ink-500); }
.product-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(6,43,64,.07);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-card__price { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }

/* O SELETOR DE TAMANHO vira parte do desenho, não um par de botões soltos */
.pc-sizes { display: inline-flex; gap: 0; padding: 2px; border-radius: 999px;
  background: rgba(6,43,64,.05); align-self: flex-start; margin-top: 2px; }
.pc-size { border: 0; background: none; padding: 5px 13px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--ink-500);
  transition: background .18s var(--ease), color .18s var(--ease); }
.pc-size.is-on { background: var(--paper); color: var(--ink-900); box-shadow: 0 1px 3px rgba(6,43,64,.14); }

/* o card inteiro sobe um fio no hover — sensação de vitrine, não de lista */
.product-card { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -22px rgba(6,43,64,.45); }
@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card:hover, .pm-photo, .product-card:hover .pm-photo { transition: none; transform: none; }
}

/* ===================================================================
   FOMO-SAFRA — escassez REAL e voz de safra (adicionado no fim de propósito)
   Só ACRESCENTA. Como está no fim, vence .scar por ORDEM de cascata (mesma
   especificidade), sem !important e sem alterar nenhuma regra existente.
   Paleta petrol/dourado/creme; sem emoji funcional, sem glow, sem carnaval.
   =================================================================== */
/* "últimas N unidades": o ÚNICO número de escassez do site, e só aparece
   quando N é REAL e pequeno (menu-render.js lê fortier_prontos_v1). Por isso
   ganha um pouco mais de peso que o "enquanto durar", mas continua sóbrio:
   dourado escuro legível + um ponto sólido (mesmo vocabulário do .badge__dot),
   nada de brilho. O tamanho/família vêm de .scar (Inter 10,5px). */
.scar--ultimas { color: var(--gold-ink); font-weight: 600; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 6px; }
.scar--ultimas::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-500); flex: none; }

/* ===================================================================
   FOTO PRINCIPAL → DETALHE
   A primeira camada é sempre o produto inteiro. Quando existe uma segunda
   foto REAL do mesmo sabor, ela entra em crossfade no hover (desktop) ou no
   toque (celular). Sem texto sobre a comida: as duas bolinhas são a única
   pista visual e funcionam como uma pequena galeria editorial.
   =================================================================== */
.product-card__media.tem-aberta { cursor: zoom-in; }
.product-card__media.tem-aberta:focus-visible { outline: 3px solid var(--gold-400); outline-offset: -3px; }
.product-card__media.tem-aberta > .pm-photo {
  opacity: 1;
  transition: opacity .52s cubic-bezier(.22,.61,.36,1), transform 1.05s cubic-bezier(.22,.61,.36,1), filter .45s var(--ease);
}
.product-card__media.tem-aberta > .pm-photo--aberta {
  display: grid;
  z-index: 1;
  opacity: 0;
  transform: scale(1.17);
  filter: saturate(.96) contrast(1.01);
}
.pm-dupla {
  position: absolute; right: 12px; bottom: 12px; z-index: 4; pointer-events: none;
  display: inline-flex; gap: 5px; align-items: center; padding: 6px 8px; border-radius: 999px;
  background: rgba(4,22,29,.48); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(7px);
}
.pm-dupla i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); transition: width .35s var(--ease), background .35s var(--ease); }
.pm-dupla i:first-child { width: 13px; background: #fff; }

@media (hover: hover) and (pointer: fine) {
  .product-card__media.tem-aberta:hover > .pm-photo:not(.pm-photo--aberta) { opacity: 0; transform: scale(1.19); }
  .product-card__media.tem-aberta:hover > .pm-photo--aberta { opacity: 1; transform: scale(1.10); filter: saturate(1.06) contrast(1.03); }
  .product-card__media.tem-aberta:hover .pm-dupla i:first-child { width: 5px; background: rgba(255,255,255,.55); }
  .product-card__media.tem-aberta:hover .pm-dupla i:last-child { width: 13px; background: #fff; }
}
.product-card.is-photo-open .product-card__media.tem-aberta { cursor: zoom-out; }
.product-card.is-photo-open .product-card__media.tem-aberta > .pm-photo:not(.pm-photo--aberta) { opacity: 0; transform: scale(1.19); }
.product-card.is-photo-open .product-card__media.tem-aberta > .pm-photo--aberta { opacity: 1; transform: scale(1.10); filter: saturate(1.06) contrast(1.03); }
.product-card.is-photo-open .pm-dupla i:first-child { width: 5px; background: rgba(255,255,255,.55); }
.product-card.is-photo-open .pm-dupla i:last-child { width: 13px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .product-card__media.tem-aberta > .pm-photo { transition: none; }
}

/* ---- PLAQUINHA "Esgotado" (pedido do dono, madrugada de 14/ago; refinada
   na manhã de 14/ago) ----
   A FOTO FICA 100% VIVA — sem dessaturar, sem apagar: meio-tom em cima do
   petrol dava "cor de estragado" (palavra dele). O tom apagado fica SÓ nas
   legendas abaixo da foto (título/descrição/rodapé, regras antigas). A placa
   é quem carrega o aviso: vidro fosco creme (o blur mora NELA, não na foto),
   fio dourado e um véu discreto no pé da foto pra placa ler bem em qualquer
   fotografia. Declarada DEPOIS das regras antigas de .is-esgotado de
   propósito — mesma especificidade, a última vence. */
.product-card.is-esgotado .pm-photo { filter: none; opacity: 1; }
.product-card.is-esgotado .product-card__title,
.product-card.is-esgotado .product-card__desc { filter: saturate(.5); opacity: .8; }
.product-card.is-esgotado .product-card__media { position: relative; }
.product-card.is-esgotado .product-card__media::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 43, 64, .28), rgba(6, 43, 64, 0) 45%);
  pointer-events: none; z-index: 1;
}
.product-card.is-esgotado .product-card__media::after {
  content: 'Esgotado';
  /* a regra geral do véu de rodapé (media::after, `inset: auto 0 0 0; height:
     42%`) emendava aqui e esticava a placa num quadradão — zera tudo antes */
  position: absolute; inset: auto; width: max-content; height: auto;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  background: rgba(251, 248, 241, .78);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  color: #062B40;
  border: 1px solid rgba(184, 152, 64, .8);
  padding: 9px 22px; border-radius: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
  font-size: 20px; letter-spacing: .06em;
  box-shadow: 0 10px 26px rgba(6, 43, 64, .32), inset 0 0 0 3px rgba(251, 248, 241, .45);
  pointer-events: none; z-index: 2;
}

/* ---- menuzinho do ícone do pedido (descartar com confirmação, 14/ago) ---- */
.pedido-pop { position: fixed; top: 64px; right: 18px; z-index: 120; min-width: 232px;
  background: var(--sea-800, #0c2a38); border: 1px solid rgba(184,152,64,.45); border-radius: 14px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.pedido-pop .btn { text-align: center; }
.pedido-pop__desc { background: none; border: 1px solid rgba(251,248,241,.25); border-radius: 999px;
  padding: 9px 14px; color: rgba(251,248,241,.7); cursor: pointer; font: inherit; font-size: 13px; }
.pedido-pop__desc:hover { border-color: #c98080; color: #e08a8a; }
.pedido-pop__desc.is-arm { border-color: #c0392b; background: #c0392b; color: #fff; }