/* ============================================================================
   SiteTURBO — Headers PREMIUM (Onda 3 M7 · catálogo premium)
   Paridade com as amostras aprovadas (public/demos/layouts-2026-07/headers.html
   + menu-mobile.html). Tokens do tema ativo (/css/theme-vars.css) com fallback;
   customização do menu mobile via as MESMAS CSS vars --st-menu-toggle-* /
   --st-mobile-drawer-* dos headers antigos (cascateiam do root .stp-header).
   Regras: sem !important, sem inline, ícones por máscara CSS, reduced-motion.
   Índice:
     1. Tokens locais
     2. Ícones (máscara CSS)
     3. Botões premium
     4. Casco do header + sticky 2 estados + variantes
     5. Faixa utilitária do topo (qualquer variante premium, por conteúdo)
     6. Nav desktop + dropdown + mega menu + painel multinível
     7. Menus mobile (drawer / fullscreen / bottom sheet) + scrim
     8. Responsivo + reduced motion
   ========================================================================== */

/* 1. Tokens locais --------------------------------------------------------- */
.stp-header {
  --stp-brand: var(--color-primary, #2563eb);
  --stp-brand-strong: color-mix(in srgb, var(--color-primary, #2563eb) 82%, #000);
  --stp-brand-soft: color-mix(in srgb, var(--color-primary, #2563eb) 10%, #fff);
  --stp-ink: var(--color-text, #101828);
  --stp-ink-2: color-mix(in srgb, var(--color-text, #101828) 72%, #fff);
  --stp-ink-3: color-mix(in srgb, var(--color-text, #101828) 55%, #fff);
  --stp-bg: var(--color-background, #ffffff);
  --stp-paper: color-mix(in srgb, var(--color-text, #101828) 5%, var(--color-background, #fff));
  --stp-line: var(--color-border, #e5e7eb);
  --stp-wa: #25d366;
  --stp-wa-strong: #1ebe5d;
  --stp-wa-ink: #06381b;
  --stp-r-sm: 8px;
  --stp-r-md: 14px;
  --stp-r-lg: 20px;
  --stp-r-xl: 28px;
  --stp-r-pill: 999px;
  --stp-shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
  --stp-shadow-2: 0 4px 12px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .10);
  --stp-shadow-3: 0 18px 48px rgba(16, 24, 40, .16);
  --stp-h: 72px;
  --stp-h-stuck: 58px;
  --stp-pad-inline: clamp(1rem, .5rem + 2vw, 2rem);
  --stp-container: 1280px;
}

/* 2. Ícones por máscara CSS (herdam currentColor; nunca SVG inline) --------
   Caminho RELATIVO ao arquivo CSS, nunca `/assets/...`. A raiz-absoluta só
   funciona enquanto o site do cliente mora no nosso domínio: servido em
   `dinapizza.com.br`, `/assets/icons/menu.svg` procura o ícone na raiz do
   cliente, onde ele não existe, e o cabeçalho perde os ícones. Medido em
   07/08 no viewport do celular: os dois que escapavam eram justamente
   `menu.svg` e `x.svg` — abrir e fechar o menu. Sem eles, no telefone o
   cliente fica sem menu nenhum.
   `../icons/` resolve certo dos dois lados, porque é relativo a onde o CSS
   está: `/assets/css/` na plataforma e `/sites/{slug}/assets/css/` no cliente. */
.stp-ic {
  display: inline-block; width: 1.15em; height: 1.15em; flex: none;
  background-color: currentColor; vertical-align: -0.18em;
  -webkit-mask: var(--stp-ic-url) center / contain no-repeat;
          mask: var(--stp-ic-url) center / contain no-repeat;
}
.stp-ic--sm { width: .9em; height: .9em; }
.stp-ic--phone      { --stp-ic-url: url(../icons/phone.svg); }
.stp-ic--whatsapp   { --stp-ic-url: url(../icons/whatsapp.svg); }
.stp-ic--chev-d     { --stp-ic-url: url(../icons/chevron-down.svg); }
.stp-ic--chev-r     { --stp-ic-url: url(../icons/chevron-right.svg); }
.stp-ic--menu       { --stp-ic-url: url(../icons/menu.svg); }
.stp-ic--x          { --stp-ic-url: url(../icons/x.svg); }
.stp-ic--clock      { --stp-ic-url: url(../icons/clock.svg); }
.stp-ic--map-pin    { --stp-ic-url: url(../icons/map-pin.svg); }
.stp-ic--calendar   { --stp-ic-url: url(../icons/calendar.svg); }
.stp-ic--star       { --stp-ic-url: url(../icons/star.svg); }
.stp-ic--check      { --stp-ic-url: url(../icons/check.svg); }
.stp-ic--zap        { --stp-ic-url: url(../icons/zap.svg); }
.stp-ic--droplet    { --stp-ic-url: url(../icons/droplet.svg); }
.stp-ic--wrench     { --stp-ic-url: url(../icons/wrench.svg); }
.stp-ic--utensils   { --stp-ic-url: url(../icons/utensils.svg); }
.stp-ic--car        { --stp-ic-url: url(../icons/car.svg); }
.stp-ic--tag        { --stp-ic-url: url(../icons/tag.svg); }
.stp-ic--store      { --stp-ic-url: url(../icons/store.svg); }
.stp-ic--mail       { --stp-ic-url: url(../icons/mail.svg); }
.stp-ic--search     { --stp-ic-url: url(../icons/search.svg); }
.stp-ic--shield     { --stp-ic-url: url(../icons/shield-check.svg); }
.stp-ic--award      { --stp-ic-url: url(../icons/award.svg); }
.stp-ic--heart      { --stp-ic-url: url(../icons/heart.svg); }
.stp-ic--truck      { --stp-ic-url: url(../icons/truck.svg); }
.stp-ic--scissors   { --stp-ic-url: url(../icons/scissors.svg); }
.stp-ic--wine       { --stp-ic-url: url(../icons/wine.svg); }
.stp-ic--flame      { --stp-ic-url: url(../icons/flame.svg); }
.stp-ic--leaf       { --stp-ic-url: url(../icons/leaf.svg); }
.stp-ic--key        { --stp-ic-url: url(../icons/key.svg); }
.stp-ic--percent    { --stp-ic-url: url(../icons/percent.svg); }
.stp-ic--users      { --stp-ic-url: url(../icons/users-group.svg); }
.stp-ic--image      { --stp-ic-url: url(../icons/image.svg); }
.stp-ic--settings   { --stp-ic-url: url(../icons/settings.svg); }
.stp-ic--hammer     { --stp-ic-url: url(../icons/hammer.svg); }
.stp-ic--brush      { --stp-ic-url: url(../icons/brush.svg); }
.stp-ic--sun        { --stp-ic-url: url(../icons/sun.svg); }
.stp-ic--grid       { --stp-ic-url: url(../icons/grid.svg); }
.stp-ic--layout     { --stp-ic-url: url(../icons/layout.svg); }
.stp-ic--chat       { --stp-ic-url: url(../icons/chat.svg); }
.stp-ic--smartphone { --stp-ic-url: url(../icons/smartphone.svg); }
.stp-ic--instagram  { --stp-ic-url: url(../icons/instagram.svg); }
.stp-ic--facebook   { --stp-ic-url: url(../icons/facebook.svg); }
.stp-ic--linkedin   { --stp-ic-url: url(../icons/linkedin.svg); }
/* twitter/youtube/tiktok entraram em 08/08 para a faixa do topo (a Speranza
   tem os 4 perfis e saía com 3). `twitter`, não `x`: x.svg é o ✕ de fechar
   menu, e o HeaderFromSite normaliza x.com para twitter. Caminho RELATIVO
   como os vizinhos — raiz-absoluto quebra em domínio próprio (defeito 14). */
.stp-ic--twitter    { --stp-ic-url: url(../icons/twitter.svg); }
.stp-ic--youtube    { --stp-ic-url: url(../icons/youtube.svg); }
.stp-ic--tiktok     { --stp-ic-url: url(../icons/tiktok.svg); }

/* 3. Botões premium (alvos ≥44px) ------------------------------------------ */
.stp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .6em 1.15em; border-radius: var(--stp-r-pill); border: 1.5px solid transparent;
  font-weight: 700; font-size: .95rem; line-height: 1; min-height: 44px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.stp-btn:hover { transform: translateY(-1px); }
.stp-btn:active { transform: translateY(0); }
.stp-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--stp-brand) 45%, transparent); outline-offset: 2px; }
.stp-btn--primary { background: var(--stp-brand); color: #fff; box-shadow: var(--stp-shadow-1); }
.stp-btn--primary:hover { background: var(--stp-brand-strong); }

/* Só a versão curta aparece por padrão no desktop? Não: lá vale o texto inteiro
   do cliente. O celular inverte isto na media query do fim do arquivo. */
.stp-btn__short { display: none; }
.stp-btn--ghost { background: transparent; color: var(--stp-brand); border-color: color-mix(in srgb, var(--stp-brand) 35%, var(--stp-line)); }
.stp-btn--ghost:hover { background: var(--stp-brand-soft); }
.stp-btn--wa { background: var(--stp-wa); color: var(--stp-wa-ink); }
.stp-btn--wa:hover { background: var(--stp-wa-strong); }

/* 4. Casco + sticky 2 estados + variantes ---------------------------------- */
.stp-header {
  position: relative; z-index: 50; background: var(--stp-bg);
  border-bottom: 1px solid var(--stp-line); color: var(--stp-ink);
}
.stp-header[data-stp-sticky] {
  position: sticky; top: 0; border-bottom-color: transparent;
  transition: box-shadow .35s ease, background-color .3s ease, border-color .3s ease;
}
.stp-header[data-stp-sticky].is-stuck {
  box-shadow: var(--stp-shadow-2); border-bottom-color: var(--stp-line);
  background: color-mix(in srgb, var(--stp-bg) 96%, transparent);
}
.stp-bar__in {
  display: flex; align-items: center; gap: 1.1rem;
  max-width: var(--stp-container); margin-inline: auto;
  min-height: var(--stp-h); padding-inline: var(--stp-pad-inline);
  transition: min-height .3s ease;
}
.stp-header[data-stp-sticky].is-stuck .stp-bar__in { min-height: var(--stp-h-stuck); }
.stp-spacer { flex: 1; }

/* Barra SEM cluster de ações (sem telefone, WhatsApp ou CTA): o menu vai para a
   direita em vez de ficar pendurado no meio do vazio (02/09/2026).

   O miolo destas variantes é `logo · menu · espaçador · ações`. O espaçador é
   quem empurra as ações para a borda; quando não há ações, ele vira um vão à
   direita e o menu fica colado no logo, no meio da barra. Trocando a ORDEM dos
   dois, o vão passa para o meio e o menu encosta na direita — que é o desenho
   de qualquer cabeçalho de logo + menu.

   Sem `:has()` isto exigiria uma variante nova ou marcação condicional na view;
   a regra é inerte em toda barra que TEM ações, ou seja, nada muda para quem já
   configurou telefone/WhatsApp/CTA. */
.stp-bar__in--premium-classico:not(:has(.stp-actions)) .stp-nav,
.stp-bar__in--premium-topbar:not(:has(.stp-actions)) .stp-nav,
.stp-bar__in--premium-transparente:not(:has(.stp-actions)) .stp-nav { order: 3; }

.stp-bar__in--premium-classico:not(:has(.stp-actions)) .stp-spacer,
.stp-bar__in--premium-topbar:not(:has(.stp-actions)) .stp-spacer,
.stp-bar__in--premium-transparente:not(:has(.stp-actions)) .stp-spacer { order: 2; }

/* O botão do menu de celular fica no FIM. Sem esta linha ele herda `order: 0` e
   pula para a frente do logo assim que o espaçador ganha ordem — no celular o
   botão aparecia no meio da barra (medido em 02/09, 390px). */
.stp-bar__in--premium-classico:not(:has(.stp-actions)) .stp-burger,
.stp-bar__in--premium-topbar:not(:has(.stp-actions)) .stp-burger,
.stp-bar__in--premium-transparente:not(:has(.stp-actions)) .stp-burger { order: 4; }

.stp-logo { display: inline-flex; align-items: center; gap: .55em; min-width: 0; text-decoration: none; color: inherit; }
.stp-logo__img { height: 44px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.stp-logo__text {
  font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; color: var(--stp-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stp-logo__mark {
  width: 2.1rem; height: 2.1rem; flex: none; border-radius: 9px;
  display: inline-grid; place-items: center;
  background: var(--stp-brand); color: #fff; font-weight: 800; font-size: 1.05rem;
  box-shadow: var(--stp-shadow-1);
}

/* Logo alternativa por fundo (Onda 4 M): duas <img> alternadas por CONTEXTO de
   fundo, sem JS. Padrão = logo principal (fundos claros). Nos contextos de fundo
   escuro troca para a versão --dark ("logo para fundos escuros"). Sem !important:
   a regra de contexto (0,3,0) vence o padrão (0,1,0) por especificidade.
   Escopo em .stp-bar isola a barra desktop do brand do menu mobile — que tem
   fundo próprio e alterna por conta (drawer/sheet claro x fullscreen escuro). */
.stp-logo__img--dark { display: none; }
.stp-header--premium-transparente .stp-bar .stp-logo__img--light { display: none; }
.stp-header--premium-transparente .stp-bar .stp-logo__img--dark { display: block; }
.stp-mm--full .stp-mm__brand .stp-logo__img--light { display: none; }
.stp-mm--full .stp-mm__brand .stp-logo__img--dark { display: block; }

/* variante: logo lockup central com nav dividida simétrica (preset C).
   minmax(max-content, 1fr): com 1fr puro as colunas laterais encolhem abaixo
   do próprio conteúdo e a nav invade o logo central (visto com 5 itens +
   telefone/WhatsApp/CTA juntos). max-content garante que nada sobrepõe. */
.stp-bar__in--premium-logo-central { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
.stp-bar__in--premium-logo-central .stp-nav--left { justify-self: start; }
.stp-bar__in--premium-logo-central .stp-logo { justify-self: center; }
.stp-bar__in--premium-logo-central .stp-side-right { justify-self: end; display: flex; align-items: center; gap: .6rem; }

/* A logo entra só DEPOIS que o visitante desce (02/09/2026, pedido do dono).
   Numa capa com lockup a marca já ocupa o meio da tela; repeti-la no canto é a
   mesma coisa duas vezes. Passada a capa, ela vira o único ponto de marca e
   precisa estar lá.

   Só vale em cabeçalho que acompanha a rolagem: sem `is-stuck` não existe
   "depois de descer", e um cabeçalho parado ficaria sem logo para sempre.
   `visibility` junto de `opacity` para o leitor de tela não anunciar um link
   invisível. */
.stp-header--logo-ao-rolar[data-stp-sticky] .stp-bar .stp-logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.stp-header--logo-ao-rolar[data-stp-sticky].is-stuck .stp-bar .stp-logo {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .stp-header--logo-ao-rolar[data-stp-sticky] .stp-bar .stp-logo { transition: none; }
}

/* variante: transparente sobre o hero, com scrim de contraste embutido */
.stp-header--premium-transparente {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  background: linear-gradient(to bottom, rgba(8, 12, 22, .62), rgba(8, 12, 22, 0));
  border-bottom: 0; color: #fff;
}
.stp-header--premium-transparente .stp-logo__text { color: #fff; }
.stp-header--premium-transparente .stp-nav__link { color: rgba(255, 255, 255, .92); }
.stp-header--premium-transparente .stp-nav__link:hover,
.stp-header--premium-transparente .stp-navitem.is-open > .stp-nav__trigger { color: #fff; background: rgba(255, 255, 255, .15); }
.stp-header--premium-transparente .stp-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.stp-header--premium-transparente .stp-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.stp-header--premium-transparente .stp-burger { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); }
.stp-header--premium-transparente .stp-logo__mark { box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }

/* Transparente + sticky: o estado ROLADO precisa de fundo OPACO da marca.
   O `.is-stuck` genérico (algumas linhas acima) pinta com `--stp-bg`, que é
   claro — e esta variante tem texto branco. Branco sobre branco é cabeçalho
   invisível, que é pior que cabeçalho que some.
   A cor da marca mantém o texto branco legível (medido em cliente real:
   branco sobre #d23133 = 4,97:1, passa AA) e é o que o site de origem
   costuma fazer ao rolar. Especificidade (0,3,0) vence o `.is-stuck`
   genérico (0,2,0) sem precisar de !important. */
/* `fixed`, não `sticky`: sticky ocupa lugar no fluxo e empurraria a capa para
   baixo do cabeçalho — matando o efeito de flutuar sobre a foto, que é a razão
   de existir desta variante. Fixed mantém o comportamento do `absolute` que ela
   tinha (a capa começa debaixo dele) e acrescenta o acompanhar a rolagem, que é
   o que o site de origem do cliente faz. */
.stp-header--premium-transparente[data-stp-sticky] { position: fixed; }
.stp-header--premium-transparente[data-stp-sticky].is-stuck {
  background: var(--stp-brand);
  border-bottom-color: transparent;
}

/* A barra ROLADA passa a obedecer ao `theme` do próprio bloco (02/09/2026).
   A variante transparente sempre pintou o estado rolado com a cor da marca e
   nunca leu a prop — mesma classe de defeito da capa, que declarava `theme` e
   ignorava. Sem a classe de tema (todo cabeçalho de hoje), nada muda.

   No tema CLARO a barra rolada fica branca e o conteúdo escurece, senão os
   links brancos da variante transparente somem no branco. */
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #0f172a;
}

.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-logo__text { color: #0f172a; }
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-nav__link { color: #1e293b; }
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-nav__link:hover,
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-navitem.is-open > .stp-nav__trigger {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-btn--ghost {
  color: #1e293b;
  border-color: rgba(15, 23, 42, 0.25);
}
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-btn--ghost:hover { background: rgba(15, 23, 42, 0.06); }
.stp-header--premium-transparente.stp-header--tema-light[data-stp-sticky].is-stuck .stp-burger {
  color: #1e293b;
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.18);
}

.stp-header--premium-transparente.stp-header--tema-dark[data-stp-sticky].is-stuck {
  background: rgba(8, 12, 22, 0.94);
  border-bottom-color: transparent;
}

/* O botão de ação INVERTE quando a barra fica da cor da marca.
   `.stp-btn--primary` pinta com `--stp-brand` e o estado rolado desta variante
   pinta a barra com o MESMO `--stp-brand`: contraste 1,00:1, e sobra só o texto
   branco flutuando sem botão. Medido na Pizzaria Speranza em 07/08, mas o
   defeito é estrutural — acontecia igual na Dina, vermelho sobre vermelho, e
   ninguém tinha olhado o estado rolado com o botão dentro.
   Branco com texto da marca mantém a pílula visível e o contraste alto.
   Especificidade (0,4,0) vence o `.stp-btn--primary` (0,1,0) sem !important. */
.stp-header--premium-transparente[data-stp-sticky].is-stuck .stp-btn--primary {
  background: #fff;
  color: var(--stp-brand);
  box-shadow: none;
}
.stp-header--premium-transparente[data-stp-sticky].is-stuck .stp-btn--primary:hover {
  background: color-mix(in srgb, #fff 88%, var(--stp-brand));
}

/* A LOGO ganha uma cama neutra quando a barra vira a cor da marca — mas SÓ
   quando ela precisa (classe `stp-header--logo-bed`, ligada pela montagem).
   Logo de cliente quase sempre traz FUNDO PRÓPRIO — e o fundo próprio dela é,
   por definição, a cor da marca. No estado rolado a barra passou a ser a mesma
   cor, e o desenho encosta no fundo sem borda.
   Medido nas duas pizzarias em 2026-08-08, amostrando os pixels opacos do PNG:
     Speranza — 52,6% da logo é `#850d23`; barra `#830d23`. 1,02:1. Sobrava só
       o aro dourado (4,81:1) flutuando, que é o defeito relatado. PRECISA.
     Dina     — o disco amarelo `#fff212` contra a barra `#d23133` dá 4,25:1, e
       por isso a logo dela "funciona": não é o formato que se lê, é a mancha.
       NÃO precisa — e a regra incondicional de 07/08 mudava a logo dela, que
       não estava quebrada (pendência nº 1 do proprietário em 08/08).
   Quem decide é a MEDIÇÃO (LogoBedProbe, na montagem): sobra mancha legível
   sobre a barra? Sem a classe, nada muda — é o comportamento anterior à cama.
   Por que a cama e não clarear a barra: a barra clara exigiria inverter texto,
   nav, burger e o botão de ação desta variante — e o botão JÁ é branco no
   estado rolado (regra logo acima), então sumiria. A cama resolve o que está
   quebrado sem mexer em nada que funciona.
   `:not(--dark)`: quem subiu uma logo desenhada PARA fundo escuro já resolveu o
   próprio contraste; cama branca embaixo dela seria desfazer a escolha.
   Escopo `.stp-bar` deixa o brand do menu mobile de fora — ele tem fundo próprio.
   Especificidade (0,7,0) vence `.stp-header--logo-xl[...].is-stuck .stp-logo__img`
   (0,4,0) sem !important; a altura continua vindo de lá. */
.stp-header--logo-bed.stp-header--premium-transparente[data-stp-sticky].is-stuck .stp-bar .stp-logo__img:not(.stp-logo__img--dark) {
  background: #fff;
  border-radius: 999px;
  /* Respiro IGUAL nos quatro lados de propósito: com folga lateral maior a cama
     vira elipse embaixo de logo quadrada (a da Dina é 118x118) e a marca parece
     menor do que é. Simétrico, a cama acompanha a forma — círculo na quadrada,
     cápsula na deitada. `box-sizing: border-box` vem do preflight, então o
     respiro cabe DENTRO da altura escolhida em `stp-header--logo-*`. */
  padding: 5px;
  box-shadow: 0 1px 8px rgba(8, 12, 22, .22);
}

/* O caso SIMÉTRICO (rodada 1 de 08/08, defeito 7 — Super Pizza Pan): logo
   desenhada para o cabeçalho ESCURO do site de origem, publicada numa variante
   de barra clara (`--stp-bg`). A palavra "Super", branca, sumia no `#f0f0f0`.
   Aqui a barra tem a mesma cor o tempo todo, então a cama fica SEMPRE — não há
   estado rolado a esperar. A cama é da TINTA (`--stp-ink`), o anti-fundo por
   construção: pixel que se dissolve na barra é pixel da cor do fundo, e o
   contraste tinta×fundo já é o do próprio texto do site. Vale nos dois climas —
   fundo claro dá cama escura (o caso do SPP, cujo original é preto), tema
   escuro daria cama clara. Quem liga a classe é a MESMA medição da montagem
   (LogoBedProbe), agora contra a cor de barra da variante escolhida. */
.stp-header--logo-bed:not(.stp-header--premium-transparente) .stp-bar .stp-logo__img:not(.stp-logo__img--dark) {
  background: var(--stp-ink);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 1px 8px rgba(8, 12, 22, .22);
}

/* variante: mega menu vitrine (preset F, padrão de concessionária/MB) -------
   Identidade própria da barra: filete de acento da marca no rodapé do header e
   logo levemente maior (vitrine de marca). O submenu abre como PAINEL lateral
   (desktop_submenu='painel' no preset) e ganha um degrau de "cards" nas listas
   de modelos — o flyout de modelos por categoria, sem depender de miniaturas. */
.stp-header--premium-mega-menu .stp-bar { box-shadow: inset 0 -2px 0 var(--stp-brand); }
.stp-header--premium-mega-menu .stp-logo__img { height: 48px; }
.stp-header--premium-mega-menu .stp-panel { width: min(860px, calc(100vw - 2rem)); }
.stp-header--premium-mega-menu .stp-panel__pane { grid-template-columns: 1fr 1fr; gap: .5rem; }
.stp-header--premium-mega-menu .stp-panel__pane a {
  border: 1px solid var(--stp-line); border-radius: var(--stp-r-md);
  padding: .6rem .75rem; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.stp-header--premium-mega-menu .stp-panel__pane a:hover {
  background: var(--stp-brand-soft); border-color: color-mix(in srgb, var(--stp-brand) 40%, var(--stp-line));
  transform: translateY(-1px);
}

/* 5. Faixa utilitária do topo ---------------------------------------------- */
/* Nasceu como exclusividade do preset D (premium-topbar) e desde 08/08 vale
   para qualquer variante premium: quem decide se ela existe é o CONTEÚDO, na
   view. O site de origem da Cantina Speranza tem faixa de 50px E cabeçalho
   sobre a foto — amarrar a faixa a uma variante forçava escolher uma das duas.
   44px de altura: é o alvo mínimo de toque, e aproxima os 50px do original. */
.stp-topbar { background: var(--stp-brand-strong); color: #fff; font-size: .85rem; font-weight: 600; }
.stp-topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: var(--stp-container); margin-inline: auto; min-height: 44px;
  padding-inline: var(--stp-pad-inline);
}
.stp-topbar__set { display: inline-flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.stp-topbar__in span, .stp-topbar__in a { display: inline-flex; align-items: center; gap: .4em; color: inherit; text-decoration: none; }
.stp-topbar__in a:hover { text-decoration: underline; }
/* Ícone de rede: alvo de toque próprio e sem sublinhado (não há texto para
   sublinhar — o rótulo vive no aria-label).
   44x44 é o alvo mínimo de toque e 24px é o tamanho de selo do desenho do
   sistema (o mesmo dos selos do rodapé). O par antigo — padding .55/.35rem
   com ícone de ~19px — rendia 31x37 medidos no publicado e pagou J8 e E4 na
   rodada 5. O slot de 44 cabe na faixa sem crescê-la: o .stp-topbar__in já
   tem min-height 44. O gap fica por conta do respiro interno do slot
   (24 dentro de 44 = 10px de folga por lado). */
.stp-topbar__socials { gap: 0; }
.stp-topbar__social { min-width: 44px; min-height: 44px; justify-content: center; }
.stp-topbar__social .stp-ic { width: 24px; height: 24px; }
.stp-topbar__social:hover { text-decoration: none; opacity: .72; }
.stp-topbar a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--stp-r-sm); }

/* Os dois TONS da faixa pintada com a cor do cliente.
   O fundo é o ACENTO do tema — na Speranza o ouro `#c5a572`, que o importador
   já lê certo —, e não uma cor inventada aqui.
   A tinta NÃO é copiada do original: lá é branco sobre o ouro, 2,33:1, que
   reprova a WCAG AA e é o pior pedaço de acessibilidade do site dela. Quem
   escolhe entre as duas é a montagem, medindo a luminância do acento
   (premiumHeaderTopbarTone); no mesmo ouro, `#101828` dá 7,6:1.
   Sem tom medido a faixa fica no visual histórico da regra acima — nunca
   estreia um contraste que ninguém conferiu.
   Especificidade igual à de `.stp-topbar` (0,1,0): vence pela ORDEM, sem
   !important. */
.stp-topbar--accent-light,
.stp-topbar--accent-dark { background: var(--color-accent, var(--stp-brand-strong)); }
.stp-topbar--accent-light { color: #ffffff; }
.stp-topbar--accent-dark { color: #101828; }

/* 6. Nav desktop + painéis ------------------------------------------------- */
.stp-nav { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.stp-nav__link {
  display: inline-flex; align-items: center; gap: .3em; padding: .55em .8em;
  border-radius: var(--stp-r-sm); color: var(--stp-ink-2); font-weight: 600; font-size: .98rem;
  background: none; border: 0; text-decoration: none; cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.stp-nav__link:hover { color: var(--stp-ink); background: var(--stp-paper); }
.stp-nav__link:focus-visible { outline: 3px solid color-mix(in srgb, var(--stp-brand) 45%, transparent); outline-offset: 2px; }
.stp-navitem { position: relative; }
.stp-navitem > .stp-nav__trigger .stp-ic--chev-d { transition: transform .18s ease; }
.stp-navitem.is-open > .stp-nav__trigger .stp-ic--chev-d { transform: rotate(180deg); }
.stp-navitem.is-open > .stp-nav__trigger { color: var(--stp-ink); background: var(--stp-paper); }

.stp-drop, .stp-mega, .stp-panel {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 40;
  background: var(--stp-bg); color: var(--stp-ink);
  border: 1px solid var(--stp-line); border-radius: var(--stp-r-lg);
  box-shadow: var(--stp-shadow-3); padding: 1.25rem;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.stp-navitem.is-open > .stp-drop,
.stp-navitem.is-open > .stp-mega,
.stp-navitem.is-open > .stp-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.stp-txt b { display: block; font-weight: 700; line-height: 1.3; }
.stp-txt small { display: block; color: var(--stp-ink-3); font-weight: 500; }

/* dropdown simples (2 níveis) */
.stp-drop { width: 280px; padding: .6rem; display: grid; gap: .1rem; }
.stp-drop__link {
  display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .6rem;
  border-radius: var(--stp-r-sm); color: var(--stp-ink); text-decoration: none;
}
.stp-drop__link:hover { background: var(--stp-paper); }
.stp-drop__link .stp-ic { color: var(--stp-brand); margin-top: .15em; }

/* mega menu: grupos rotulados + card de destaque; largura CONTIDA */
.stp-mega { width: min(860px, calc(100vw - 2rem)); display: grid; gap: 1.5rem; }
.stp-mega--cols-2 { grid-template-columns: repeat(2, 1fr); }
.stp-mega--cols-3 { grid-template-columns: 2fr 2fr 1.6fr; }
.stp-mega--cols-4 { grid-template-columns: 2fr 2fr 2fr 1.6fr; }
.stp-mega__label {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--stp-ink-3); margin: 0 0 .6rem; font-weight: 700;
}
.stp-mega__link {
  display: flex; gap: .6rem; align-items: flex-start; padding: .5rem;
  border-radius: var(--stp-r-sm); color: var(--stp-ink); text-decoration: none;
}
.stp-mega__link:hover { background: var(--stp-paper); }
.stp-mega__link .stp-ic { color: var(--stp-brand); margin-top: .15em; }
.stp-mega__card {
  border-radius: var(--stp-r-md); overflow: hidden; display: flex; flex-direction: column;
  background: var(--stp-brand-soft); border: 1px solid var(--stp-line);
}
.stp-mega__cardimg {
  position: relative; min-height: 120px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--stp-brand) 55%, #fff), var(--stp-brand));
}
.stp-mega__cardimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stp-mega__badge {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: .35em;
  padding: .25em .6em; border-radius: var(--stp-r-pill); background: rgba(6, 10, 20, .65);
  color: #fff; font-size: .72rem; font-weight: 700;
}
.stp-mega__cardbody { padding: .9rem; }
.stp-mega__cardbody h4 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 800; }
.stp-mega__cardbody p { margin: 0 0 .6rem; font-size: .85rem; color: var(--stp-ink-2); }
/* O CTA do card herda o nowrap do .stp-btn e um rótulo longo estourava a
   largura do card (233px > 220px na amostra "Chamar no WhatsApp"). Dentro do
   card ele vira botão de largura total com quebra permitida. */
.stp-mega__cardbody .stp-btn {
  width: 100%; white-space: normal; text-align: center; line-height: 1.2;
}

/* multinível: barra lateral de categorias + conteúdo que troca */
.stp-panel { width: min(760px, calc(100vw - 2rem)); display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; padding: 1rem; }
.stp-panel__nav {
  display: flex; flex-direction: column; gap: .15rem;
  border-right: 1px solid var(--stp-line); padding-right: 1rem;
  grid-column: 1; grid-row: 1;
}
.stp-panel__cat {
  display: flex; align-items: center; justify-content: space-between; gap: .5em; text-align: left;
  padding: .6rem .7rem; border-radius: var(--stp-r-sm); background: none; border: 0;
  color: var(--stp-ink-2); font-weight: 600; width: 100%; cursor: pointer; font-size: .95rem;
}
.stp-panel__cat .stp-ic { opacity: 0; transition: opacity .15s ease; }
.stp-panel__cat:hover { background: var(--stp-paper); color: var(--stp-ink); }
.stp-panel__cat.is-active { background: var(--stp-brand-soft); color: var(--stp-brand-strong); }
.stp-panel__cat.is-active .stp-ic { opacity: 1; }
.stp-panel__pane { display: none; grid-column: 2; grid-row: 1; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; align-content: start; }
.stp-panel__pane.is-active { display: grid; }
.stp-panel__pane a { padding: .5rem .6rem; border-radius: var(--stp-r-sm); color: var(--stp-ink); text-decoration: none; }
.stp-panel__pane a:hover { background: var(--stp-paper); }

/* hamburger (só <900px) */
.stp-burger {
  width: var(--st-menu-toggle-size, 44px); height: var(--st-menu-toggle-size, 44px);
  border-radius: var(--st-menu-toggle-radius, var(--stp-r-sm));
  border: 1px solid var(--stp-line);
  background: var(--st-menu-toggle-bg, var(--stp-bg));
  color: var(--st-menu-toggle-color, var(--stp-ink));
  display: none; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.stp-burger .stp-ic { width: 22px; height: 22px; }
.stp-burger:focus-visible { outline: 3px solid color-mix(in srgb, var(--stp-brand) 45%, transparent); outline-offset: 2px; }

/* 7. Menus mobile + scrim --------------------------------------------------- */
.stp-scrim {
  position: fixed; inset: 0; background: rgba(8, 12, 22, .55); z-index: 90;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.stp-scrim.is-open { opacity: 1; visibility: visible; }
.stp-no-scroll { overflow: hidden; }
/* O salto de volta ao fechar o drawer é instantâneo: o tema declara
   `html { scroll-behavior: smooth }` e o scrollTo da restauração deslizaria
   do topo até a posição antiga como se fosse defeito (receita da folha do
   Recurring, rodada 5). A classe está no <html> desde a abertura e só sai
   DEPOIS do salto. */
html.stp-no-scroll { scroll-behavior: auto; }
/* J9 — trava real com o drawer aberto: overflow:hidden segue valendo para o
   gesto, e o body fixo zera a área rolável do documento — nem scroll por
   script move o fundo. O deslocamento (`top` negativo com o scroll do momento)
   é gravado pelo header-premium.js ao abrir e desfeito ao fechar. */
.stp-scroll-lock { position: fixed; left: 0; right: 0; width: 100%; }

.stp-mm {
  position: fixed; z-index: 100; display: flex; flex-direction: column;
  background: var(--st-mobile-drawer-bg, var(--stp-bg)); color: var(--st-mobile-drawer-item-color, var(--stp-ink));
}
.stp-mm__head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.15rem; border-bottom: 1px solid var(--stp-line);
}
.stp-mm__brand { display: inline-flex; align-items: center; gap: .55em; font-weight: 800; font-size: 1.15rem; min-width: 0; }
.stp-mm__brand .stp-logo__img { height: 36px; max-width: 160px; }
.stp-mm__brand .stp-logo__text { font-size: 1.1rem; color: inherit; }
.stp-mm__close {
  width: 44px; height: 44px; flex: none; border-radius: var(--stp-r-sm);
  border: 1px solid var(--stp-line); background: transparent; color: inherit;
  display: grid; place-items: center; cursor: pointer;
}
.stp-mm__close .stp-ic { width: 22px; height: 22px; }
.stp-mm__body { flex: 1; overflow-y: auto; padding: .5rem .75rem 1rem; }
.stp-mm__link {
  display: flex; align-items: center; justify-content: space-between; gap: .5em;
  min-height: 48px; padding: 0 .75rem; border-radius: var(--stp-r-sm);
  color: inherit; font-weight: 600; font-size: var(--st-mobile-drawer-font-size, 1.05rem); text-decoration: none;
}
.stp-mm__link:hover { background: var(--stp-paper); color: var(--stp-ink); }
.stp-mm__foot {
  padding: 1rem 1.15rem; border-top: 1px solid var(--stp-line);
  display: grid; gap: .6rem; background: var(--stp-paper);
}
.stp-mm__ctarow .stp-btn, .stp-mm__row .stp-btn { width: 100%; }
.stp-mm__row { display: flex; gap: .6rem; }
.stp-mm__row .stp-btn { flex: 1; }
.stp-mm__social { display: flex; gap: .4rem; justify-content: center; margin-top: .2rem; }
.stp-mm__social a {
  width: 44px; height: 44px; border-radius: var(--stp-r-pill); display: grid; place-items: center;
  background: var(--stp-bg); border: 1px solid var(--stp-line); color: var(--stp-ink-2); text-decoration: none;
}
.stp-mm__social a:hover { background: var(--stp-brand); border-color: var(--stp-brand); color: #fff; }

/* acordeão de subníveis (itens ≥48px) */
.stp-acc { border-radius: var(--stp-r-sm); }
.stp-acc__sum {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5em;
  min-height: 48px; padding: 0 .75rem; font-weight: 600; font-size: var(--st-mobile-drawer-font-size, 1.05rem);
  cursor: pointer; color: inherit;
}
.stp-acc__sum::-webkit-details-marker { display: none; }
.stp-acc__sum .stp-ic { transition: transform .2s ease; color: var(--stp-ink-3); }
.stp-acc[open] > .stp-acc__sum .stp-ic { transform: rotate(180deg); }
.stp-acc__panel { padding: .1rem .75rem .6rem; }
.stp-acc__panel a {
  display: block; min-height: 44px; line-height: 44px; padding-inline: .6rem;
  color: inherit; opacity: .85; border-radius: var(--stp-r-sm); text-decoration: none;
}
.stp-acc__panel a:hover { background: var(--stp-paper); opacity: 1; }
.stp-acc__label {
  margin: .5rem 0 .1rem; padding-inline: .6rem; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--stp-ink-3);
}

/* A1: drawer lateral (padrão) — min(320px, 80vw), ~20% da página espiando */
/* A `visibility` NUNCA transiciona na ABERTURA (0s), só espera a saída
   (delay .3s no estado fechado). Com `visibility .3s` dos dois lados, o
   painel ainda computava `hidden` no instante do `closeBtn.focus()` do
   openMenu — o navegador recusa foco em elemento hidden, EM SILÊNCIO, e o
   foco ficava no hambúrguer (J10 4/5, medido na rodada 6 e reproduzido no
   navegador na rodada 7: focus síncrono e até com rAF falhavam). */
.stp-mm--drawer {
  top: 0; right: 0; height: 100%; width: min(320px, 80vw);
  box-shadow: var(--stp-shadow-3); transform: translateX(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s;
}
.stp-mm--drawer.stp-mm--left { right: auto; left: 0; transform: translateX(-100%); }
.stp-mm--drawer.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}

/* A2: fullscreen display — gradiente de marca, tipografia ajustada (rodada 2) */
.stp-mm--full {
  inset: 0; background: var(--st-mobile-drawer-bg, linear-gradient(160deg, var(--stp-brand-strong), var(--stp-brand)));
  color: var(--st-mobile-drawer-item-color, #fff);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.stp-mm--full.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease, visibility 0s; }
.stp-mm--full .stp-mm__head { border-color: rgba(255, 255, 255, .2); }
.stp-mm--full .stp-mm__close { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.stp-mm--full .stp-mm__body {
  display: flex; flex-direction: column; justify-content: safe center; gap: .2rem;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 2rem);
}
.stp-mm--full .stp-mm__display {
  display: block; font-weight: 800; color: inherit; text-decoration: none;
  font-size: clamp(1.5rem, 1.05rem + 3.2vw, 2.4rem); padding: .14em 0; line-height: 1.2;
}
.stp-mm--full .stp-mm__display:hover { opacity: .8; }
.stp-mm--full .stp-acc { border-top: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); margin: .1rem 0; border-radius: 0; }
.stp-mm--full .stp-acc__sum {
  font-weight: 800; font-size: clamp(1.5rem, 1.05rem + 3.2vw, 2.4rem);
  padding-inline: 0; min-height: auto; padding-block: .14em; line-height: 1.2;
}
.stp-mm--full .stp-acc__sum .stp-ic { color: color-mix(in srgb, currentColor 70%, transparent); }
.stp-mm--full .stp-acc__panel { padding: 0 0 .5rem .1rem; display: grid; }
.stp-mm--full .stp-acc__panel a { opacity: .82; font-size: 1.05rem; padding-inline: 0; }
.stp-mm--full .stp-acc__panel a:hover { opacity: 1; background: transparent; }
.stp-mm--full .stp-acc__label { padding-inline: 0; color: inherit; opacity: .6; }
.stp-mm--full .stp-mm__foot { background: rgba(0, 0, 0, .15); border-color: rgba(255, 255, 255, .2); }
.stp-mm--full .stp-mm__social a { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: inherit; }
.stp-mm--full .stp-btn--ghost { color: inherit; border-color: rgba(255, 255, 255, .5); }
.stp-mm--full .stp-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* A3: bottom sheet — X redondo flutuando no scrim + handle (rodada 2) */
.stp-mm--sheet {
  left: 0; right: 0; bottom: 0; max-height: 62vh; overflow: visible;
  border-radius: var(--stp-r-xl) var(--stp-r-xl) 0 0; box-shadow: var(--stp-shadow-3);
  transform: translateY(100%); visibility: hidden;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .3s;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}
.stp-mm--sheet.is-open {
  transform: translateY(0); visibility: visible;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1), visibility 0s;
}
.stp-mm__handle { width: 40px; height: 4px; border-radius: 4px; background: var(--stp-line); margin: .6rem auto .2rem; flex: none; }
.stp-mm__sheetclose {
  position: absolute; top: -58px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: var(--stp-r-pill);
  background: rgba(255, 255, 255, .96); color: #101828; border: 0;
  display: grid; place-items: center; box-shadow: var(--stp-shadow-2); z-index: 2; cursor: pointer;
}
.stp-mm__sheetclose:hover { background: #fff; }
.stp-mm__sheetclose .stp-ic { width: 22px; height: 22px; }

/* 7B. Tamanho da logo (prop logo_size) -------------------------------------
   Sem a prop não muda nada: a logo segue com os 44px da regra base (48px no
   preset mega-menu). Com ela, a BARRA sobe junto — uma logo de 96px dentro de
   uma barra de 72px transborda o cabeçalho e encosta na primeira seção.

   Vem depois da regra do preset mega-menu de propósito: as duas têm a mesma
   especificidade (0,2,0) e quem chega por último vence, então uma escolha
   explícita de tamanho ganha do tamanho embutido no preset. Sem !important.

   O estado rolado encolhe a logo junto com a barra (--stp-h-stuck); manter os
   96px numa barra compacta de 78px devolveria o transbordamento. */
.stp-header--logo-sm .stp-logo__img { height: 32px; }
.stp-header--logo-md .stp-logo__img { height: 44px; }

.stp-header--logo-lg { --stp-h: 96px; --stp-h-stuck: 68px; }
.stp-header--logo-lg .stp-logo__img { height: 64px; }
.stp-header--logo-lg[data-stp-sticky].is-stuck .stp-logo__img { height: 48px; }

.stp-header--logo-xl { --stp-h: 124px; --stp-h-stuck: 78px; }
.stp-header--logo-xl .stp-logo__img { height: 96px; max-width: 260px; }
.stp-header--logo-xl[data-stp-sticky].is-stuck .stp-logo__img { height: 56px; }

.stp-header--logo-lg .stp-logo__img,
.stp-header--logo-xl .stp-logo__img { transition: height .3s ease; }

/* 8. Responsivo + reduced motion ------------------------------------------- */
@media (max-width: 899px) {
  .stp-nav { display: none; }
  .stp-burger { display: inline-flex; }

  /* O botão de AÇÃO fica na barra do celular. O cluster inteiro sumia aqui, e
     junto com ele ia o caminho do pedido: medido na Dina Pizza em 07/08, a
     primeira tela do celular tinha dois alvos — a logo e o hambúrguer — e
     nenhuma forma de comprar sem abrir o menu. Num restaurante, a maior parte
     de quem vai pedir chega por esta tela.

     Telefone e WhatsApp continuam fora: a barra tem ~250px livres depois da
     logo e do hambúrguer, e três botões ali viram três alvos pequenos demais
     para o polegar. Eles seguem no rodapé do menu, onde há largura inteira. */
  .stp-actions { display: flex; align-items: center; gap: .4rem; flex: none; min-width: 0; }
  .stp-actions > :not(.stp-btn--cta) { display: none; }
  .stp-actions .stp-btn--cta {
    font-size: .82rem;
    padding: .5rem .85rem;
    min-height: 44px;          /* alvo de toque; abaixo disso o polegar erra */
    max-width: 46vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
  }
  /* Rótulo longo troca pela versão curta em vez de ser cortado. O botão
     centraliza o texto, então o corte comia as duas pontas e o cliente lia
     "ntral Delivery: (11) 5051-12" — num botão que é o caminho do pedido.
     Ver premiumHeaderCtaLabelHtml(). */
  .stp-actions .stp-btn--cta .stp-btn__full { display: none; }
  .stp-actions .stp-btn--cta .stp-btn__short { display: inline; }
  /* Tela estreita não comporta a barra alta dos degraus grandes: a logo
     empurra a primeira seção para fora da dobra. Cada degrau cai um nível. */
  .stp-header--logo-lg { --stp-h: 76px; --stp-h-stuck: 62px; }
  .stp-header--logo-lg .stp-logo__img { height: 52px; }
  .stp-header--logo-xl { --stp-h: 88px; --stp-h-stuck: 66px; }
  .stp-header--logo-xl .stp-logo__img { height: 64px; }
  /* O estado ROLADO do celular não herda o encolhimento do desktop. A regra
     `.stp-header--logo-*[data-stp-sticky].is-stuck .stp-logo__img` lá de cima
     tem (0,4,0) e vive FORA da media query, então vencia a base mobile (0,2,0)
     e derrubava a logo de 64 para 56px — medido na rodada 1 de 08/08 (J5).
     Mesma especificidade, mais tarde no arquivo: o celular decide o próprio
     estado rolado, já dimensionado pelos degraus de cima (52/64px cabem nas
     barras compactas de 62/66px sem transbordar). */
  .stp-header--logo-lg[data-stp-sticky].is-stuck .stp-logo__img { height: 52px; }
  .stp-header--logo-xl[data-stp-sticky].is-stuck .stp-logo__img { height: 64px; }
  /* Colapsada, a grade 3 colunas vira flex; sem distribuição o conjunto
     (logo + hambúrguer) encostava à esquerda — space-between alinha com o
     padrão mobile das demais variantes (logo à esquerda, botão à direita). */
  .stp-bar__in--premium-logo-central { display: flex; justify-content: space-between; }
  /* O segundo texto da faixa é o primeiro a sair na tela estreita. Era um
     `.stp-topbar__set span:nth-child(2)`, que dependia da POSIÇÃO: com o
     telefone entrando antes dos textos e as redes num segundo grupo, a posição
     2 passou a cair ora no texto certo, ora num ícone de rede.
     O prefixo `.stp-topbar__in` não é decoração: sem ele a regra tem (0,1,0) e
     PERDE para `.stp-topbar__in span { display: inline-flex }`, que é (0,1,1) —
     o texto 2 voltava a aparecer no celular. Medido no navegador a 390px. */
  .stp-topbar__in .stp-topbar__item--extra { display: none; }
  /* Aperto da faixa no celular: rótulo de telefone longo + quatro ícones não
     cabem em 390px com a folga do desktop, e a faixa quebrava em duas linhas
     (69px medidos). Encolher letra e vãos devolve a linha única na maioria dos
     casos; quando ainda não couber, quebrar é o certo — cortar o número seria
     repetir o defeito do botão de ação ("ntral Delivery: (11) 5051-12"). */
  .stp-topbar { font-size: .8rem; }
  .stp-topbar__in { gap: .5rem; }
  .stp-topbar__set { gap: .75rem; }
}
/* A variante logo-central precisa de mais largura por natureza (nav dupla +
   logo central + ações): colapsa para o hambúrguer mais cedo, senão a linha
   estoura o container entre 900 e ~1180px com menu/ações cheios. */
@media (max-width: 1179.98px) {
  .stp-header--premium-logo-central .stp-nav,
  .stp-header--premium-logo-central .stp-actions { display: none; }
  .stp-header--premium-logo-central .stp-burger { display: inline-flex; }
  .stp-header--premium-logo-central .stp-bar__in--premium-logo-central { display: flex; justify-content: space-between; }
}
@media (min-width: 900px) {
  .stp-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stp-header[data-stp-sticky],
  .stp-bar__in,
  .stp-btn,
  .stp-nav__link,
  .stp-navitem > .stp-nav__trigger .stp-ic--chev-d,
  .stp-drop, .stp-mega, .stp-panel,
  .stp-scrim, .stp-mm,
  .stp-acc__sum .stp-ic { transition: none; }
  .stp-btn:hover { transform: none; }
  .stp-drop, .stp-mega, .stp-panel { transform: none; }
}