/* ==========================================================================
   Baly Energy Drink — Mockups D2C
   style.css  ·  Shell global: reset, utilidades, botões, header, footer
   (estilos de seção da Home ficam em home.css)
   ========================================================================== */

@import url('tokens.css');
@import url('fonts.css');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Sem o "flash" do toque no celular (tap highlight azul/cinza em links e botões, 07/10/2026):
   o retorno do toque é nosso (hover só com mouse, :active, :focus-visible). */
* { -webkit-tap-highlight-color: transparent; }

* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .16) transparent; }
/* Reserva o espaço da barra de rolagem SÓ no desktop com mouse (evita o salto da página ao abrir
   gaveta/modal). Em todas as larguras ela vazava para o celular emulado e janelas estreitas como
   uma faixa branca de 10 px à direita (08/10/2026). */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) { html { scrollbar-gutter: stable; } }

/* Toque-duplo rápido dava ZOOM acidental no mobile (double-tap-to-zoom do iOS/Android)
   ao clicar em botões/links. `manipulation` remove só esse gesto nos elementos interativos
   e PRESERVA a pinça (pinch-zoom continua p/ acessibilidade — nunca bloquear). */
a, button, input, select, textarea, label, summary, [role="button"] { touch-action: manipulation; }

/* ---------- Scrollbar global (fino, arredondado, discreto) — Webkit/Blink ----------
   Thumb TRANSLÚCIDO (não cinza sólido) p/ fundir com o fundo — cinza sólido contrastava
   demais e parecia ter sombra. O drawer (.drawer__corpo) e a faixa de marcas têm regras
   próprias mais específicas que continuam valendo. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12); border-radius: var(--raio-pill);
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .22); }
::-webkit-scrollbar-corner { background: transparent; }

body {
  font-family: var(--fonte);
  font-weight: var(--peso-regular);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--cor-texto);
  background: var(--cor-fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { line-height: 1.05; font-weight: var(--peso-black); letter-spacing: -0.02em; }

/* ---------- Utilidades ---------- */
.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.secao { padding-block: var(--sp-8); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.texto-amarelo { color: var(--baly-amarelo); }
.fundo-preto { background: var(--baly-preto); color: var(--baly-branco); }

.titulo-secao {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
}
.subtitulo-secao {
  color: var(--cor-texto-suave);
  font-size: var(--fs-md);
  margin-bottom: var(--sp-6);
  max-width: 56ch;
}

/* Tag/eyebrow */
.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: var(--peso-heavy);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--baly-amarelo-escuro);
  margin-bottom: var(--sp-3);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.6rem;
  font-weight: var(--peso-heavy);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: var(--raio-pill);
  transition: transform var(--t-rapida), box-shadow var(--t), background var(--t);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn--primario {
  background: var(--baly-amarelo);
  color: var(--baly-preto);
  box-shadow: var(--sombra-amarela);
}
.btn--primario:hover { background: var(--baly-amarelo-escuro); }

.btn--preto {
  background: var(--baly-preto);
  color: var(--baly-branco);
}
.btn--preto:hover { background: var(--cinza-800); }

.btn--contorno {
  background: transparent;
  color: var(--baly-preto);
  box-shadow: inset 0 0 0 2px var(--baly-preto);
}
.btn--contorno:hover { background: var(--baly-preto); color: var(--baly-branco); }

.btn--bloco { width: 100%; }
.btn--grande { padding: 1.05rem 2rem; font-size: var(--fs-base); }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Barra promocional */
.topbar {
  background: var(--baly-amarelo);
  color: var(--baly-preto);
  font-size: var(--fs-xs);
  font-weight: var(--peso-semibold);
  text-align: center;
  letter-spacing: .03em;
}
.topbar p { padding-block: 0.5rem; padding-inline: var(--gutter); }
.topbar strong { color: var(--baly-preto); font-weight: var(--peso-heavy); }
/* Mobile: mostra só o primeiro aviso */
@media (max-width: 767px) {
  .topbar__extra { display: none; }
}

/* Topbar em 2 zonas: avisos à esquerda · atalhos (páginas) à direita */
.topbar--split { text-align: left; }
.topbar--split .topbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: 0.5rem;
}
.topbar__left { display: inline-flex; align-items: center; gap: 0.5rem; }
.topbar__left svg { width: 16px; height: 16px; flex: none; }
.topbar__left strong { font-weight: var(--peso-heavy); }
.topbar__sep { opacity: .45; }

.topbar__right { display: inline-flex; align-items: center; gap: var(--sp-5); }
.topbar__right a { font-weight: var(--peso-semibold); transition: opacity var(--t-rapida); }
.topbar__right a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Mobile: esconde os atalhos e o 2º aviso; centraliza o frete grátis */
@media (max-width: 767px) {
  .topbar--split .topbar__row { justify-content: center; }
  .topbar__right, .topbar__sep { display: none; }
}

/* ---- Marquee / esteira contínua (genérico: topbar e benefícios) ---- */
.marquee { overflow: hidden; }
.marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: marquee var(--marquee-dur, 32s) linear infinite;
}
.marquee__group { display: inline-flex; align-items: center; }
/* esteiras NÃO pausam no hover (a pedido) — a animação roda contínua sempre */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* uma cópia inteira */
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Header principal */
.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--baly-branco);
  border-bottom: 1px solid var(--cor-borda);
}
/* Mobile: 3 zonas — [menu+busca] · logo(centro) · [conta+carrinho] */
.cabecalho__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-2);
  height: var(--altura-header);
}
.cabecalho__lado { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cabecalho__lado--esq { justify-self: start; }
.cabecalho__logo { justify-self: center; position: relative; display: inline-flex; align-items: center; transition: opacity .18s ease, visibility .18s; }
.cabecalho__logo img { height: 22px; width: auto; max-width: none; display: block; }   /* sem max-width: o reset img{max-width:100%} zerava o min-content da coluna e o logo era ESMAGADO quando o menu apertava */

/* Header STOREFRONT PLACEHOLDER (só o logo) — usado fora do checkout até a fase do shell de loja.
   Sem isto, o reset img{max-width:100%} ignora o height="30" e o logo estoura a página. */
.site-header { padding: var(--sp-4) 0; border-bottom: 1px solid var(--cor-borda); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { height: 30px; width: auto; }
.site-header__cart { flex: none; }
/* duas logos SOBREPOSTAS (clara/escura) → CROSS-FADE via opacity. A ESCURA fica
   no fluxo (visível, define o tamanho → a pílula a envolve certo); a clara é
   absoluta por cima (oculta). Base (páginas sólidas) = ESCURA visível. */
.cabecalho__logo-img { transition: opacity var(--t), filter var(--t); }
.cabecalho__logo-img--claro { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; }

.cabecalho__nav { display: none; }
.cabecalho__nav ul { display: flex; gap: var(--sp-5); }
.cabecalho__nav a {
  font-weight: var(--peso-bold);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .03em;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-rapida);
}
/* sem sublinhado amarelo nos itens do menu (hover/focus) — a pedido */

.cabecalho__acoes {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: opacity .18s ease, visibility .18s;
}
.cabecalho__acoes .cab-busca-desktop { display: none; }   /* busca: no mobile fica à esquerda; aqui só aparece no desktop */
.icone-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-pill);
  transition: background var(--t-rapida), color var(--t);
  position: relative;
}
.icone-btn:hover { background: var(--cinza-100); }
.icone-btn svg { width: 22px; height: 22px; transition: filter var(--t); }

/* Badge do carrinho */
.cart-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  display: grid; place-items: center;
  background: var(--baly-amarelo);
  color: var(--baly-preto);
  font-size: 11px;
  font-weight: var(--peso-heavy);
  border-radius: var(--raio-pill);
  border: 2px solid var(--baly-branco);
}

.menu-hamburguer { display: inline-flex; }

@media (min-width: 992px) {
  .cabecalho__inner { gap: var(--sp-4); }
  .cabecalho__lado--esq { display: none; }   /* zona mobile (menu+busca) some no desktop */
  .cabecalho__logo { justify-self: start; }
  .cabecalho__nav { display: block; justify-self: center; }
  .cabecalho__acoes { justify-self: end; gap: var(--sp-3); }
  .cabecalho__acoes .cab-busca-desktop { display: inline-flex; }
  .cabecalho__logo img { height: 28px; }
}

/* Mobile compacto — evita aperto/overflow em telas pequenas (≤390px) */
@media (max-width: 767px) {
  .cabecalho__inner { gap: var(--sp-2); }
  .cabecalho__acoes { gap: var(--sp-1); }
  .cabecalho .icone-btn { width: 40px; height: 40px; }
  .cabecalho .icone-btn svg { width: 21px; height: 21px; }
}

/* ==========================================================================
   MEGA MENU — dropdown no hover (desktop ≥992px; nav some no mobile → hambúrguer)
   Painel ancorado AO ITEM (largura = só o conteúdo), não 100% da página.
   O <li> fica `position:relative` e ocupa a altura cheia do header (flex), p/ o
   painel descer rente à base. Como o painel é DESCENDENTE do <li>, passar o
   mouse nele mantém o :hover (sem "buraco"). Só colunas de subcategorias.
   ========================================================================== */
@media (min-width: 992px) {
  .cabecalho__nav, .cabecalho__nav > ul { height: 100%; }
  /* TODOS os itens com altura cheia + link centralizado (senão o item sem mega,
     ex.: Baly Lovers, fica desalinhado no topo) */
  .cabecalho__nav li {
    position: relative;
    display: flex; align-items: center;
  }
}

/* (sublinhado amarelo do item no hover/focus removido a pedido — o destaque
   vem só pela abertura do mega menu) */

.mega {
  position: absolute;
  top: 100%; left: 0;
  width: max-content;
  max-width: min(640px, 92vw);
  background: var(--baly-branco);
  border-top: 3px solid var(--baly-amarelo);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: 0 26px 40px -16px rgba(0, 0, 0, .22);
  padding: var(--sp-5) var(--sp-6);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t), transform var(--t), visibility var(--t), top var(--t);
  pointer-events: none;
  z-index: 5;
}
/* item mais à direita: abre alinhado pela direita p/ não estourar a tela */
.tem-mega--fim .mega { left: auto; right: 0; }

.tem-mega:hover > .mega,
.tem-mega:focus-within > .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}

.mega__cols { display: flex; gap: var(--sp-6); }
.mega__col { min-width: 148px; }

/* cabeçalho de coluna com marcação amarela curta */
.mega__titulo {
  position: relative;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: var(--peso-heavy);
  color: var(--cinza-500);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
}
/* só UM traço amarelo sob o título (antes havia também um border-bottom cinza → 2 linhas empilhadas) */
.mega__titulo::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 28px; height: 2px; background: var(--baly-amarelo);
}

/* link de subcategoria — só SUBLINHADO (amarelo) no hover, sem barra nem translate */
.mega__link {
  display: block;                 /* block (não flex): sublinhado fica só sob o texto, não full-width */
  padding: 7px 0;
  font-size: var(--fs-sm);
  font-weight: var(--peso-semibold);
  color: var(--cinza-800);
  white-space: nowrap;
  /* sublinhado sempre presente, transparente no repouso → faz FADE da cor no hover (suave, não brusco).
     text-decoration-color é animável; text-decoration puro não seria. */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--t), text-decoration-color var(--t);
}
.mega__link:hover {
  color: var(--baly-preto);
  text-decoration-color: var(--baly-amarelo);
}
/* o border-bottom hover de `.cabecalho__nav a` (sublinhado dos itens do TOPO) vaza nos .mega__link
   (também são <a> dentro da nav) e desenha uma 2ª linha full-width sob o item → neutraliza só no mega */
.cabecalho__nav .mega__link { border-bottom: 0; }
.cabecalho__nav .mega__link:hover { border-color: transparent; }
.mega__link small { color: var(--cinza-400); font-weight: var(--peso-regular); }   /* sem margin: margem quebraria o sublinhado em 2 segmentos */
.mega__link--todos { color: var(--baly-preto); font-weight: var(--peso-heavy); }

/* reveal escalonado das colunas ao abrir */
@keyframes megaIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tem-mega:hover > .mega .mega__col,
.tem-mega:focus-within > .mega .mega__col { animation: megaIn .3s ease both; }
.mega__col:nth-child(2) { animation-delay: .05s; }
.mega__col:nth-child(3) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega__col { transition: none; animation: none; }
}

/* ==========================================================================
   MEGA MENU — variantes da organização Baly
   ENERGÉTICOS = lista "NOME — descrição" (1 coluna); HIDRATAÇÃO/INFANTIL =
   título + lista de produtos (reusa .mega__col/.mega__titulo/.mega__link);
   PARA TODOS OS MOMENTOS = lista de links fortes (caixa-alta, sem descrição).
   ========================================================================== */
.mega__col--desc { min-width: 360px; }
.mega-item {
  display: block;
  padding: 8px 10px;
  margin-inline: -10px;
  border-radius: var(--raio-sm);
  font-size: var(--fs-sm);
  white-space: nowrap;
  transition: background var(--t-rapida);
}
.mega-item:hover { background: var(--cinza-50); }
.mega-item strong {
  font-weight: var(--peso-heavy);
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--baly-preto);
}
.mega-item span { color: var(--cinza-500); }
.mega-item span::before { content: " — "; color: var(--cinza-400); }

/* PARA TODOS OS MOMENTOS — links fortes em caixa-alta */
.mega__link--forte {
  text-transform: uppercase;
  font-weight: var(--peso-heavy);
  color: var(--baly-preto);
  letter-spacing: .02em;
}


/* ==========================================================================
   HEADER EM ILHA (home) — vidro CLARO flutuando sobre o hero → vira BARRA ao rolar
   ✅ Aprovado em out/2026 (estudo mockup/estudos/topo-fluido.html). O glass é pedido
   da Baly; a tinta CLARA (tokens --glass-*) clareia qualquer banner, então logo, menu
   e ícones ficam PRETOS e legíveis nos 4 banners. Logo + nav + ações vivem num
   recipiente só (.ilha). JS header.js liga .is-stuck (>40px). A busca ESTENDE a ilha
   para baixo (regras junto do bloco "Busca INLINE", mais abaixo neste arquivo).
   Estrutura (header.php, só na home):
   header.cabecalho--ilha > .container.ilha-wrap > .ilha > (.cabecalho__inner + .cabecalho__busca)
   As páginas internas seguem com .cabecalho--solido (abaixo).
   ========================================================================== */
.cabecalho--ilha {
  --altura-header: 52px;
  --ilha-pad: 16px;
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  padding-top: 10px;
  transition: padding var(--t);
}
.ilha-wrap { transition: max-width var(--t), padding var(--t); }
.ilha {
  position: relative;
  border-radius: 30px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: var(--glass-borda);
  box-shadow: var(--glass-sombra);
  animation: ilhaIn .6s cubic-bezier(.2, .7, .2, 1) both;
  transition: background var(--t), border-radius var(--t), box-shadow var(--t), border-color var(--t);
}
@keyframes ilhaIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.cabecalho--ilha .cabecalho__inner {
  max-width: 100%; margin-inline: auto;
  padding-inline: 6px;
  gap: var(--sp-1);
  transition: padding var(--t), max-width var(--t);
}
.cabecalho--ilha .cabecalho__logo img { height: 20px; }
.cabecalho--ilha .icone-btn:hover { background: rgba(0, 0, 0, .07); }

@media (min-width: 992px) {
  .cabecalho--ilha { --altura-header: 60px; padding-top: 14px; }
  .cabecalho--ilha .cabecalho__inner { padding-inline: 22px 9px; }   /* logo respira da curva; botão redondo de 42 cabe na pílula de 60 */
  .cabecalho--ilha .cabecalho__logo img { height: 24px; }
  .cabecalho--ilha .cabecalho__nav > ul { gap: 2px; }
  /* só os links de TOPO (os do mega seguem como estão) */
  .cabecalho--ilha .cabecalho__nav > ul > li > a {
    font-size: 13px;
    letter-spacing: .06em;
    padding: 9px 12px;
    border-bottom: 0;
    border-radius: 999px;
    transition: background var(--t-rapida), color var(--t-rapida);
  }
  .cabecalho--ilha .cabecalho__nav > ul > li > a:hover,
  .cabecalho--ilha .tem-mega:hover > a,
  .cabecalho--ilha .tem-mega:focus-within > a { background: rgba(0, 0, 0, .07); }
  /* mega desce um pouco abaixo da ilha (há a curva da pílula); ponte invisível segura o hover.
     Flutuando, o painel é um objeto solto → raio completo + sombra em volta (⚠️ o filete amarelo
     some sobre o banner amarelo; é a sombra que define a borda). */
  .cabecalho--ilha .mega {
    top: calc(100% + 10px);
    border-radius: 16px;
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .08);
    transition: opacity var(--t), transform var(--t), visibility var(--t), top var(--t), border-radius var(--t);
  }
  .cabecalho--ilha .tem-mega > .mega::before {
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
  }
  /* virou barra: o mega volta a ENCAIXAR rente à base, como o aprovado */
  .cabecalho--ilha.is-stuck .mega {
    top: 100%;
    border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: 0 26px 40px -16px rgba(0, 0, 0, .22);
  }
}

/* ---- AO ROLAR: a ilha se abre e vira a barra do site (tudo por transição) ----
   ⚠️ max-width só anima entre comprimentos (px ↔ vw), nunca com `none`. */
.cabecalho--ilha.is-stuck { padding-top: 0; }
.cabecalho--ilha.is-stuck .ilha-wrap { max-width: 100vw; padding-inline: 0; }
.cabecalho--ilha.is-stuck .ilha {
  border-radius: 0;
  background: rgba(255, 255, 255, .92);
  border-color: transparent;
  box-shadow: 0 1px 0 var(--cor-borda), 0 8px 24px rgba(0, 0, 0, .06);
}
.cabecalho--ilha.is-stuck .cabecalho__inner {
  max-width: var(--largura-max);
  padding-inline: var(--gutter);
}
/* Desktop estreito (992–1199, ou zoom do navegador): os 5 itens de topo (~720px) não cabem ao lado
   do logo e dos ícones no tamanho cheio → compacta o menu, o logo NÃO diminui. */
@media (min-width: 992px) and (max-width: 1199px) {
  .cabecalho--ilha .cabecalho__inner { gap: var(--sp-2); padding-inline: 18px 6px; }
  .cabecalho--ilha.is-stuck .cabecalho__inner { padding-inline: var(--sp-4); }
  .cabecalho--ilha .cabecalho__nav > ul { gap: 0; }
  .cabecalho--ilha .cabecalho__nav > ul > li > a { font-size: 12px; letter-spacing: .02em; padding: 8px 8px; }
  .cabecalho--ilha .cabecalho__acoes { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ilha { animation: none; }
}

/* ---- BARRA AMARELA ao rolar (`cabecalho--barra-amarela`): internas (categoria/loja/busca, institucionais,
   produto, conta, 404) e, desde 07/10/2026, também a HOME (a pedido: "reproduzir a aparência das páginas de
   conteúdo"; antes a Home virava barra BRANCA) ----
   ✅ estudo mockup/estudos/mega-menu-interna.html. A mesma ilha flutua sobre o topo da página
   (palco amarelo / hero escuro) e, ao rolar, vira barra AMARELA (pedido da Baly; a branca nas
   internas foi rejeitada, "sem graça"). Sob a barra amarela o mega fica SOLTO (respiro, raio
   inteiro, sombra em volta): branco colado no amarelo parecia outra camada. */
.cabecalho--ilha.cabecalho--barra-amarela.is-stuck .ilha {
  background: var(--baly-amarelo);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .10), 0 8px 24px rgba(0, 0, 0, .08);
}
.cabecalho--barra-amarela.is-stuck .cart-badge { background: var(--baly-branco); border-color: var(--baly-branco); }   /* amarelo no amarelo somia */
.cabecalho--barra-amarela.is-stuck .icone-btn:hover,
.cabecalho--barra-amarela.is-stuck .cabecalho__nav > ul > li > a:hover,
.cabecalho--barra-amarela.is-stuck .tem-mega:hover > a,
.cabecalho--barra-amarela.is-stuck .tem-mega:focus-within > a { background: rgba(0, 0, 0, .09); }
@media (min-width: 992px) {
  .cabecalho--ilha.cabecalho--barra-amarela.is-stuck .mega {
    top: calc(100% + 10px);
    border-radius: 16px;
    box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .08);
  }
}
/* ==========================================================================
   HEADER SÓLIDO — páginas internas SEM hero (produto, categorias).
   Sticky (conteúdo flui abaixo, sem sobreposição) + AMARELO. Reusa a base
   .cabecalho: logo preta, ícones/links pretos, mega branco. = mesmo visual do
   header da home quando rolado (sólido).
   ========================================================================== */
.cabecalho--solido {
  background: var(--baly-amarelo);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.cabecalho--solido .icone-btn:hover { background: rgba(0, 0, 0, .08); }
.cabecalho--solido .cart-badge { background: var(--baly-branco); }   /* amarelo no amarelo somiria */

/* ==========================================================================
   FOOTER — rodapé novo (aprovado em 06/10/2026, estudo mockup/estudos/rodape-novo.html)
   · topo ARREDONDADO + brilho radial: emoldura a página com a curva do hero;
   · abertura contida: logo + uma linha + redes nos ícones redondos pretos;
   · miolo por tarefa: Loja e Ajuda (ACORDEÕES no celular) + card PRETO de contato;
   · confiança agrupada: pagamento + selos numa faixa clara com rótulos;
   · legal: © + políticas juntos à esquerda, crédito à direita.
   · (a "cortina" que revelava o rodapé por baixo da página saiu em 08/10/2026: não curtiu)
   Rejeitados no caminho (não repetir): frase gigante + redes em pílula, logo gigante
   cortado pela borda, "Voltar ao topo", sombra sob a página, links legais no meio.
   ========================================================================== */
.rodape {
  --rodape-raio: 22px;
  position: relative;
  background: var(--baly-amarelo);
  color: rgba(0, 0, 0, .78);
  border-radius: var(--rodape-raio) var(--rodape-raio) 0 0;
  overflow: hidden;
  font-size: var(--fs-sm);
}
.rodape::before {   /* brilho de cima p/ baixo: o amarelo vira superfície */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%);
}
.rodape > .container { position: relative; }

/* ---------- 1. abertura: marca + redes ---------- */
.rodape__topo {
  display: grid; gap: var(--sp-4);
  padding-block: var(--sp-7) var(--sp-5);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}
.rodape__logo { height: 26px; width: auto; filter: brightness(0); }   /* logo branca → preta no amarelo */
.rodape__sobre { margin-top: 12px; max-width: 46ch; line-height: 1.6; color: rgba(0, 0, 0, .72); }
.rodape__redes { display: flex; gap: 10px; }
.rodape__redes a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--baly-preto); color: var(--baly-branco);
  transition: background var(--t-rapida), color var(--t-rapida), transform var(--t);
}
.rodape__redes a:hover { background: var(--baly-branco); color: var(--baly-preto); transform: translateY(-2px); }
.rodape__redes svg { width: 20px; height: 20px; }

/* ---------- 2. miolo: Loja + Ajuda (acordeões no celular) + contato ---------- */
.rodape__miolo { display: grid; padding-block: var(--sp-3) var(--sp-6); }
.rodape__col { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.rodape__col-titulo { margin: 0; }
.rodape__col-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font: inherit; font-size: 13px; font-weight: var(--peso-heavy); letter-spacing: .1em; text-transform: uppercase;
  color: var(--baly-preto); background: none; border: 0; cursor: pointer; text-align: left;
}
.rodape__col-btn svg { width: 20px; height: 20px; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.rodape__col.is-aberto .rodape__col-btn svg { transform: rotate(180deg); }
.rodape__col-corpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1); }
.rodape__col.is-aberto .rodape__col-corpo { grid-template-rows: 1fr; }
.rodape__col-inner { overflow: hidden; min-height: 0; }
/* Loja + Ajuda = PAINÉIS COM ÍCONE (estudo mockup/estudos/rodape-links.html, versão E, 08/10/2026):
   a superfície branca da faixa de pagamento, links em LINHAS com o ícone no disco amarelo (o dos atalhos
   do menu do celular) e a seta à direita. Antes eram texto solto no amarelo com sublinhado no hover
   (❌ "não está legal"; ❌ rodada 1: cartões com produto e Loja em letra grande). Hotsites trocam as
   cores pelas variáveis abaixo (baly-kids.css / fueltech.css). */
.rodape {
  --rodape-painel: rgba(255, 255, 255, .5); --rodape-painel-borda: rgba(255, 255, 255, .7); --rodape-filete: rgba(0, 0, 0, .08);
  --rodape-disco: var(--baly-amarelo); --rodape-disco-ico: var(--baly-preto);
  --rodape-linha-hover: rgba(255, 255, 255, .72);
}
/* celular: os dois acordeões num painel só (os discos amarelos precisam do fundo claro) */
.rodape__nav { padding: 0 18px; border-radius: 18px; background: var(--rodape-painel); border: 1px solid var(--rodape-painel-borda); }
.rodape__nav .rodape__col { border-bottom-color: var(--rodape-filete); }
.rodape__nav .rodape__col:last-child { border-bottom: 0; }
.rodape__links { display: grid; padding-bottom: 10px; }
/* HOVER (08/10/2026): a LINHA acende (pílula clara) e a seta anda; o disco fica como está.
   ❌ Antes o disco virava PRETO no hover ("esse efeito de deixar o fundo preto está muito ruim").
   A pílula sangra 10px para os lados (margin negativa) e o filete virou fundo desenhado
   (não border) para manter a largura antiga e poder sumir junto com o do vizinho de cima. */
.rodape__links a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin-inline: -10px;
  border-radius: 12px;
  background: linear-gradient(var(--rodape-filete), var(--rodape-filete)) 10px 100% / calc(100% - 20px) 1px no-repeat;
  font-size: 15px; font-weight: var(--peso-semibold); color: rgba(0, 0, 0, .82); text-decoration: none;
  transition: color var(--t-rapida), background-color var(--t-rapida);
}
.rodape__links a:last-child { background-size: 0 0; }
.rodape__link-ico {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--rodape-disco); color: var(--rodape-disco-ico);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.rodape__link-ico svg { width: 16px; height: 16px; }
.rodape__link-txt { flex: 1; min-width: 0; }
/* seta sempre à direita (lê como linha clicável); no hover ela anda e o disco fica preto */
.rodape__links a::after {
  content: ""; flex: none; width: 14px; height: 14px; opacity: .35; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity var(--t-rapida), transform .3s cubic-bezier(.16, 1, .3, 1);
}
.rodape__links a:hover, .rodape__links a:focus-visible { color: var(--baly-preto); background-color: var(--rodape-linha-hover); background-size: 0 0; }
.rodape__links a:has(+ a:hover), .rodape__links a:has(+ a:focus-visible) { background-size: 0 0; }   /* some o filete de cima também */
.rodape__links a:hover::after, .rodape__links a:focus-visible::after { opacity: 1; transform: translateX(3px); }

/* card de contato PRETO: canal principal grande */
.rodape__contato {
  margin-top: var(--sp-5);
  padding: 22px;
  border-radius: 20px;
  background: var(--baly-preto); color: rgba(255, 255, 255, .72);
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .5);
}
.rodape__contato-eyebrow { font-size: 12px; font-weight: var(--peso-heavy); letter-spacing: .1em; text-transform: uppercase; color: var(--baly-amarelo); }
.rodape__contato-titulo { margin: 8px 0 0; font-size: 22px; font-weight: var(--peso-black); line-height: 1.1; color: var(--baly-branco); }
.rodape__canal {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px;
  border-radius: 14px; background: rgba(255, 255, 255, .07);
  color: var(--baly-branco);
  transition: background var(--t);
}
.rodape__canal:hover { background: rgba(255, 255, 255, .13); color: var(--baly-branco); }
.rodape__canal-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--baly-amarelo); color: var(--baly-preto); }
.rodape__canal-ico svg { width: 20px; height: 20px; }
.rodape__canal small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); }
.rodape__canal b { display: block; font-size: 15px; font-weight: var(--peso-bold); word-break: break-all; }
.rodape__horario { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; }
.rodape__horario svg { width: 16px; height: 16px; flex: none; }
.rodape__contato-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 13px; font-weight: var(--peso-heavy); color: var(--baly-amarelo);
}
.rodape__contato-link:hover { color: var(--baly-amarelo); }
.rodape__contato-link svg { width: 16px; height: 16px; transition: transform var(--t); }
.rodape__contato-link:hover svg { transform: translateX(4px); }

/* ---------- 3. confiança: pagamento + segurança agrupados ---------- */
.rodape__confia {
  display: grid; gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
}
.rodape__confia-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rodape__confia-rotulo { width: 100%; font-size: 11px; font-weight: var(--peso-heavy); letter-spacing: .1em; text-transform: uppercase; color: rgba(0, 0, 0, .55); }
.rodape__confia .pay { box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.rodape__confia .badge-seg { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* selos de segurança (chips brancos) */
.badge-seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--baly-branco);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  font-size: 11px; font-weight: var(--peso-semibold);
  color: var(--cinza-700);
  white-space: nowrap;
}
.badge-seg svg { width: 13px; height: 13px; flex: none; }
.badge-seg__lock { color: var(--verde-ok); }   /* cadeado verde = seguro */

/* bandeiras = mini-cartões brancos com o logo da bandeira (estilo checkout) */
.pay {
  width: 42px; height: 27px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
  background: #fff;
  border-radius: var(--raio-sm);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pay svg { display: block; width: auto; height: 16px; max-width: 100%; }   /* altura DEFINIDA: SVG inline c/ viewBox dimensiona certo (height:auto+max-height era ambíguo → ícones bugavam) */
.pay__visa { color: #1434CB; font-weight: var(--peso-heavy); font-style: italic; font-size: 13px; letter-spacing: .3px; line-height: 1; }
.pay__elo  { color: #111; font-weight: var(--peso-heavy); font-size: 13px; line-height: 1; letter-spacing: -.2px; }

/* ---------- 4. legal: © + políticas juntos à esquerda, crédito à direita ---------- */
.rodape__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  padding-block: var(--sp-5) var(--sp-7);
  font-size: 12px; color: rgba(0, 0, 0, .66);
}
.rodape__legal-ini { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 0; }
.rodape__legal-ini > * + *::before { content: "·"; margin: 0 10px; color: rgba(0, 0, 0, .35); }
.rodape__legal-ini a { color: rgba(0, 0, 0, .66); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--t-rapida), text-decoration-color var(--t-rapida); }
.rodape__legal-ini a:hover { color: var(--baly-preto); text-decoration-color: currentColor; }
/* razão social + CNPJ + endereço (Decreto 7.962/2013): linha própria, a última do rodapé */
.rodape__empresa { order: 3; flex-basis: 100%; margin: 0; font-size: 11px; line-height: 1.5; color: rgba(0, 0, 0, .66); }
.rodape__credito { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: rgba(0, 0, 0, .66); }
.rodape__credito-logo { display: inline-flex; align-items: center; }
.rodape__credito-logo img { height: 22px; width: auto; display: block; filter: brightness(0); opacity: .8; transition: opacity var(--t-rapida); }
.rodape__credito-logo:hover img { opacity: .55; }

/* celular: © numa linha, os 2 links na seguinte SEM pontos (o "·" sobrava no início da 2ª linha) */
@media (max-width: 767px) {
  .rodape__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rodape__legal-ini { gap: 8px 20px; }
  .rodape__legal-ini > span { flex-basis: 100%; }
  .rodape__legal-ini > * + *::before { content: none; }
  .rodape__legal-ini a { white-space: nowrap; }
}

@media (min-width: 768px) {
  .rodape { --rodape-raio: 32px; }
  /* desktop COMPACTO (~620px): cabe inteiro em mais telas → modo FIXO da cortina */
  .rodape__topo { grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-5); }
  .rodape__miolo { grid-template-columns: 1fr 1fr minmax(0, 1.25fr); gap: var(--sp-7); padding-block: var(--sp-5); }
  .rodape__col { border-bottom: 0; }
  /* no desktop o "botão" é só o título: sem seta, sem clique, sempre aberto */
  .rodape__col-btn { pointer-events: none; padding: 0 0 16px; }
  .rodape__col-btn svg { display: none; }
  .rodape__col-corpo { grid-template-rows: 1fr; }
  /* desktop: o envoltório some e CADA coluna vira um painel */
  .rodape__nav { display: contents; }
  .rodape__links { padding: 4px 18px; border-radius: 18px; background: var(--rodape-painel); border: 1px solid var(--rodape-painel-borda); }
  /* Loja e Ajuda com a MESMA altura (08/10/2026): os dois têm 6 links. Se um dia a Loja ganhar
     outra categoria, o painel mais curto estica até o mais alto e o espaço sobra EMBAIXO — as
     linhas nunca esticam (❌ esticar as linhas foi rejeitado: "seria adicionar mais links") */
  .rodape__col { display: flex; flex-direction: column; }
  .rodape__col-corpo { flex: 1; }
  .rodape__links { height: 100%; align-content: start; }
  .rodape__contato { margin-top: 0; padding: 20px; }
  .rodape__legal { padding-block: var(--sp-4) var(--sp-5); }
}
@media (min-width: 992px) {
  .rodape__confia { grid-template-columns: auto auto; justify-content: space-between; align-items: center; padding: 14px 20px; }
  .rodape__confia-rotulo { width: auto; margin-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .rodape__col-corpo, .rodape__col-btn svg, .rodape__links a::after, .rodape__link-ico { transition: none; }
}

/* ==========================================================================
   DRAWERS — menu mobile (esquerda) + sidecart (direita), slide-out
   Overlay escurece o fundo; o painel desliza via transform. Trava o scroll
   do body quando aberto. Botões abrem via [data-abrir-drawer="id"], fecham
   via [data-fechar-drawer] / clique no overlay / Esc (ver main.js).
   ========================================================================== */
body.drawer-travado { overflow: hidden; }

/* Banner de cookies sai de cena enquanto um drawer está aberto: ele é
   `position:fixed; z-index:99990` (baly-core/assets/consent.css) e cobria o rodapé
   do carrinho lateral e do menu — justo onde ficam "Finalizar compra" e os atalhos.
   Vence o `.baly-consent.is-visivel` do plugin por especificidade (o `body` desempata),
   sem precisar de !important. */
body.drawer-travado .baly-consent { opacity: 0; visibility: hidden; }

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
  z-index: 90;
}
.drawer-overlay.ativo { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; bottom: 0;
  width: min(420px, 88vw);
  display: flex; flex-direction: column;
  background: var(--baly-branco);
  box-shadow: 0 0 50px rgba(0, 0, 0, .3);
  z-index: 100;
  transition: transform var(--t), box-shadow var(--t);
}
/* sombra só com o drawer aberto: o FECHADO fica encostado na borda (translateX ±100%) e a sombra de
   50 px vazava para dentro da tela. Na categoria, o de filtros (fechado, à esquerda, depois no HTML)
   pintava uma faixa cinza por cima do menu aberto. */
.drawer:not(.aberto) { box-shadow: none; }
.drawer--menu { left: 0;  transform: translateX(-100%); }
.drawer--cart { right: 0; transform: translateX(100%); }
.drawer.aberto { transform: none; }

/* mobile: o carrinho ocupa a tela toda */
@media (max-width: 767px) {
  .drawer--cart { width: 100%; }
}

/* cabeçalho do drawer */
.drawer__head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--cor-borda);
}
.drawer__logo img { height: 22px; width: auto; }
.drawer__titulo {
  font-weight: var(--peso-black); font-size: var(--fs-md);
  text-transform: uppercase; letter-spacing: .02em;
}
.drawer__titulo em { font-style: normal; color: var(--cinza-500); font-weight: var(--peso-bold); }
.drawer__fechar {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--raio-pill);
  transition: background var(--t-rapida);
}
.drawer__fechar:hover { background: var(--cinza-100); }
.drawer__fechar svg { width: 22px; height: 22px; }

.drawer__corpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent; }
/* scroll estilizado (carrinho/menu) — thumb fino arredondado, sem setas */
.drawer__corpo::-webkit-scrollbar { width: 10px; }
.drawer__corpo::-webkit-scrollbar-track { background: transparent; }
.drawer__corpo::-webkit-scrollbar-thumb { background: var(--cinza-300); border-radius: var(--raio-pill); border: 3px solid transparent; background-clip: padding-box; }
.drawer__corpo::-webkit-scrollbar-thumb:hover { background: var(--cinza-400); }
.drawer__corpo::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.drawer__rodape { flex: none; }

/* ---- Menu do celular (estudo mockup/estudos/menu-mobile.html, aprovado 08/10/2026; ref. Forseti) ----
   · topo: dois estados no mesmo lugar que se cruzam: logo (nível 1) × "‹ Voltar" + categoria (nível 2); o X fica;
   · nível 1: miniatura = quadrado AMARELO com o produto recortado (modelo da capa do produto), só o nome;
     depois o destaque do mega (Edição FuelTech) e os atalhos com o disco amarelo da faixa de vantagens;
   · nível 2: entra da direita e o 1 recua 24% (curva do site); "Ver todos" com o produto + seta em disco
     amarelo; subcategorias SEM imagem, só a lista (pedido do cliente). */
.mm { --mm-curva: cubic-bezier(.22, .8, .26, 1); }

.mm__topo { position: relative; flex: none; height: 64px; display: flex; align-items: center; padding: 0 8px; border-bottom: 1px solid var(--cor-borda); }
.mm__topo-a, .mm__topo-b {
  position: absolute; inset: 0 56px 0 0; display: flex; align-items: center; gap: 10px;
  transition: opacity .25s ease, transform .38s var(--mm-curva), visibility 0s;
}
.mm__topo-a { padding-left: var(--sp-5); }
.mm__topo-b { padding-left: 8px; opacity: 0; transform: translateX(16px); visibility: hidden; transition-delay: 0s, 0s, .38s; }
.mm.em-sub .mm__topo-a { opacity: 0; transform: translateX(-16px); visibility: hidden; transition-delay: 0s, 0s, .38s; }
.mm.em-sub .mm__topo-b { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.mm__voltar {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 6px; border-radius: 10px;
  font-size: 13px; font-weight: var(--peso-heavy); letter-spacing: .06em; text-transform: uppercase; color: var(--baly-preto);
  transition: background var(--t-rapida);
}
.mm__voltar svg { width: 18px; height: 18px; flex: none; }
.mm__onde {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: var(--peso-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--cor-texto-suave);
}
.mm__fechar { margin-left: auto; position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; }

/* níveis empilhados */
.drawer--menu .drawer__corpo { position: relative; overflow: hidden; padding: 0; }
.mm__nivel {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent; background: var(--baly-branco);
}
.mm__nivel--raiz { transition: transform .42s var(--mm-curva), filter .42s var(--mm-curva), visibility 0s; }
.mm.em-sub .mm__nivel--raiz { transform: translateX(-24%); filter: brightness(.94); visibility: hidden; transition-delay: 0s, 0s, .42s; }
/* fechado = fora da tela E fora do Tab; a sombra só no aberto (senão os painéis empilham sombra) */
.mm__nivel--sub {
  z-index: 2; transform: translateX(100%); visibility: hidden; box-shadow: -12px 0 30px rgba(0, 0, 0, 0);
  transition: transform .42s var(--mm-curva), box-shadow .42s ease, visibility 0s .42s;
}
.mm__nivel--sub.is-aberto { transform: none; visibility: visible; box-shadow: -12px 0 30px rgba(0, 0, 0, .08); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .mm__nivel, .mm__topo-a, .mm__topo-b { transition: none; } }

/* toque e mouse: mesmo fundo leve de linha (o hover só com mouse de verdade) */
.mm__cat:active, .mm__atalho:active, .mm__sub:active, .mm__tudo:active, .mm__voltar:active, .mm__fechar:active { background: var(--cinza-50); }
@media (hover: hover) {
  .mm__cat:hover, .mm__atalho:hover, .mm__sub:hover, .mm__tudo:hover, .mm__voltar:hover { background: var(--cinza-50); }
}

/* nível 1 */
.mm__cats { display: flex; flex-direction: column; padding: 8px 0; }
.mm__cat {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 10px 16px 10px var(--sp-5);
  text-align: left; color: var(--baly-preto); transition: background var(--t-rapida);
}
.mm__cat-foto, .mm__tudo-ico {
  flex: none; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 18%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), var(--baly-amarelo);
}
.mm__cat-foto { width: 56px; height: 56px; border-radius: 14px; }
/* altura fixa (não %): numa linha de altura automática o % não resolve e a imagem vinha no tamanho natural */
.mm__cat-foto--prod img { width: auto; height: 46px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .22)); }
.mm__cat-foto--logo img { width: 78%; height: auto; object-fit: contain; }
.mm__cat-nome { flex: 1; min-width: 0; font-size: 17px; font-weight: var(--peso-heavy); line-height: 1.15; }
.mm .chev { flex: none; width: 20px; height: 20px; color: var(--cinza-400); }

/* destaque (o mesmo card do mega: Edição FuelTech) */
.mm__sep { height: 1px; background: var(--cor-borda); margin: 8px var(--sp-5) 0; }
.mm__dest { position: relative; display: block; margin: 16px var(--sp-5) 4px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 9; background: #111; color: #fff; }
.mm__dest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm__dest::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .72)); }
.mm__dest-selo {
  position: absolute; z-index: 1; top: 12px; left: 12px; padding: 4px 9px; border-radius: var(--raio-pill);
  background: var(--baly-amarelo); color: var(--baly-preto);
  font-size: 10px; font-weight: var(--peso-heavy); letter-spacing: .08em; text-transform: uppercase;
}
.mm__dest-txt { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 14px; }
.mm__dest small { display: block; font-size: 10px; font-weight: var(--peso-bold); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.mm__dest strong { display: block; margin-top: 2px; font-size: 19px; font-weight: var(--peso-black); line-height: 1.1; }
.mm__dest-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: var(--peso-bold); }
.mm__dest-cta svg { width: 14px; height: 14px; }

/* atalhos: lista com o disco amarelo da faixa de vantagens da Home (36 px, ícone preto 18 px) */
.mm__atalhos { display: flex; flex-direction: column; padding: 6px 0 22px; }
.mm__atalho {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 16px 8px var(--sp-5);
  font-family: inherit; font-size: 15px; font-weight: var(--peso-semibold); color: var(--baly-preto); text-align: left;
  transition: background var(--t-rapida);
}
.mm__atalho-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--baly-amarelo); color: var(--baly-preto); display: grid; place-items: center; }
.mm__atalho-ico svg { width: 18px; height: 18px; }
.mm__atalho-txt { flex: 1; min-width: 0; }
.mm__atalho .chev, .mm__sub .chev { width: 18px; height: 18px; }

/* nível 2: "Ver todos" = quadrado amarelo com o produto + texto em negrito + seta preta em disco amarelo */
.mm__tudo {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px var(--sp-5); border-bottom: 1px solid var(--cor-borda);
  font-size: 16px; font-weight: var(--peso-heavy); color: var(--baly-preto); transition: background var(--t-rapida);
}
.mm__tudo-ico { width: 44px; height: 44px; border-radius: 12px; }
.mm__tudo-ico img { width: auto; height: 36px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22)); }
.mm__tudo-ico--logo img { width: 80%; height: auto; filter: none; }
.mm__tudo-txt { flex: 1; min-width: 0; }
.mm__tudo-seta { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--baly-amarelo); color: var(--baly-preto); }
.mm__tudo-seta svg { width: 15px; height: 15px; }
.mm__sub {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px 8px var(--sp-5); border-bottom: 1px solid var(--cinza-100);
  font-size: 15px; font-weight: var(--peso-semibold); color: var(--baly-preto); transition: background var(--t-rapida);
}
.mm__sub-nome { flex: 1; min-width: 0; }

/* ---- Sidecart ---- */
.sidecart__frete {
  flex: none;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--cor-borda);
}
.sidecart__frete p { font-size: var(--fs-sm); margin-bottom: 9px; color: var(--cinza-700); line-height: 1.3; }
.sidecart__frete strong { color: var(--cor-texto); font-weight: var(--peso-heavy); }
.sidecart__barra { height: 5px; border-radius: var(--raio-pill); background: var(--cinza-200); overflow: hidden; }
.sidecart__barra span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1faa59, #2fc46e); transition: width var(--t); position: relative; overflow: hidden; }
/* shimmer suave: um brilho varre a barra de tempos em tempos (mesmo estática) p/ chamar atenção */
.sidecart__barra span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: baly-frete-shimmer 3s ease-in-out infinite;
}
@keyframes baly-frete-shimmer { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sidecart__barra span::after { animation: none; } }

/* Item recém-adicionado (06/10/2026 — = estudo quick-add.html): acende em
   amarelo-claro e volta ao branco sozinho. A faixa verde no topo foi rejeitada, e o
   fundo amarelo estático também ("deveria sumir"). */
.sidecart__itens .cart-item.is-novo { border-radius: var(--raio); animation: baly-item-novo 1.6s ease-out; }
@keyframes baly-item-novo {
  0%, 35% { background: #FFF6CC; box-shadow: 0 0 0 8px #FFF6CC; }
  100%    { background: transparent; box-shadow: 0 0 0 8px transparent; }
}
@media (prefers-reduced-motion: reduce) { .sidecart__itens .cart-item.is-novo { animation-duration: .01s; } }

.sidecart__itens { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; }
.sidecart__itens .cart-item { margin-bottom: var(--sp-4); }
.sidecart__itens .cart-item:last-child { margin-bottom: 0; }

.cart-item { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sp-3); align-items: stretch; }
.cart-item__img {
  width: 88px; height: 88px; flex: none;
  padding: 8px; border-radius: var(--raio); overflow: hidden;
  background: var(--cinza-50); border: 1px solid var(--cor-borda);
}
.cart-item__img img { width: 100%; height: 100%; object-fit: contain; }
/* texto preenche a altura da imagem; space-between deixa os 2 vãos (título→meta e meta→contador) IGUAIS */
.cart-item__info { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cart-item__info h4 { font-size: var(--fs-sm); font-weight: var(--peso-heavy); display: flex; align-items: center; gap: 6px; }
.cart-item__tag {
  display: inline-block; line-height: 1;
  font-size: 10px; font-weight: var(--peso-heavy);
  background: var(--baly-amarelo); color: var(--baly-preto);
  /* nudge óptico: desce o texto 1px p/ o padding parecer igual em cima/embaixo */
  padding: 3px 6px 2px; border-radius: var(--raio-pill); text-transform: uppercase; letter-spacing: .03em;
}
.cart-item__meta { font-size: var(--fs-xs); color: var(--cinza-500); }
.cart-item__baixo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--cinza-300); border-radius: var(--raio-sm); }
.qty button { width: 30px; height: 30px; display: grid; place-items: center; font-size: var(--fs-md); font-weight: var(--peso-heavy); color: var(--cinza-700); }
.qty button:hover { color: var(--baly-preto); }
.qty span { min-width: 24px; text-align: center; font-weight: var(--peso-bold); font-size: var(--fs-sm); }
.cart-item__preco { font-weight: var(--peso-heavy); font-size: var(--fs-sm); white-space: nowrap; }
.cart-item__rm { width: 30px; height: 30px; flex: none; align-self: start; display: grid; place-items: center; color: var(--cinza-400); }
.cart-item__rm:hover { color: var(--vermelho); }
.cart-item__rm svg { width: 17px; height: 17px; }

/* ---------- Sidecart vazio ----------
   Editorial, sem ícone: manchete em caixa-alta + atalhos em linha. O ícone saiu porque
   um desenho grande de carrinho num drawer vazio não informa nada — o que ajuda é para
   ONDE ir, e é isso que a lista entrega.
   ⚠️ Nada de `.btn--primario` aqui: aquele é pílula com brilho amarelo, forma que não
   aparece em nenhuma outra tela da loja. */
.sidecart__vazio {
  flex: 1;
  display: flex; flex-direction: column; align-items: stretch;
  padding: var(--sp-7) var(--sp-5) var(--sp-5);
}
.sidecart__vazio[hidden] { display: none; }

.sidecart__vazio h4 {
  font-size: clamp(1.5rem, 6.5vw, 1.75rem);
  font-weight: var(--peso-heavy);
  line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cor-texto);
  text-align: center;
  text-wrap: balance;              /* evita a última linha órfã na manchete */
}
.sidecart__vazio p {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm); color: var(--cor-texto-suave);
  text-align: center;
}

/* Atalhos: linhas largas e clicáveis (alvo de 56px), não botões. A seta indica que
   leva a outro lugar, e não que executa uma ação. */
.sidecart__vazio-links { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.sidecart__vazio-links a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 56px; padding: 0 var(--sp-4);
  border-radius: var(--raio);
  background: var(--cinza-100);
  color: var(--cor-texto);
  font-weight: var(--peso-bold); font-size: var(--fs-sm);
  transition: background var(--t-rapida);
}
.sidecart__vazio-links a:hover { background: var(--cinza-200); }
.sidecart__vazio-links svg { width: 18px; height: 18px; flex: none; color: var(--cinza-500); }
.sidecart__vazio-links a:hover svg { color: var(--cor-texto); }

/* ⚠️ Rede de segurança: o WooCommerce guarda o HTML do sidecart em `sessionStorage`
   (fragments) e reinjeta na próxima visita. Um navegador com fragment ANTIGO em cache
   traz a marcação velha — que tinha um `<svg>` solto aqui dentro. Sem esta regra ele
   renderiza no tamanho intrínseco e vira um carrinho gigante preto ocupando o drawer. */
.sidecart__vazio > svg { width: 56px; height: 56px; color: var(--cinza-300); align-self: center; }

/* Com o carrinho vazio o corpo não tem o que rolar — sem escondê-lo, ele e o estado
   vazio (ambos `flex:1`) dividem a altura. */
.drawer--cart:has(.sidecart__vazio:not([hidden])) .drawer__corpo { display: none; }

.sidecart__resumo {
  flex: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--cor-borda);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .05);
}
.sidecart__linha { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); padding: 4px 0; }
.sidecart__linha--pix { color: var(--verde-ok); font-weight: var(--peso-bold); }
.sidecart__total {
  font-size: var(--fs-md); font-weight: var(--peso-black); color: var(--cor-texto);
  padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px dashed var(--cinza-300);
}
.sidecart__resumo .btn { margin-top: var(--sp-4); }
/* "Finalizar compra" segue a forma do resto: retângulo e sombra discreta, não a pílula
   com brilho amarelo. Deixar pílula aqui daria duas linguagens de botão no MESMO drawer
   (o estado vazio já é retângulo). ⚠️ Escopado ao sidecart — o `.btn--primario` do resto
   do site continua como está. */
.sidecart__resumo .btn--primario { border-radius: var(--raio-sm); box-shadow: var(--sombra-sm); }
/* "Finalizar compra" do sidecart = idêntico ao do checkout: raio 6px, sem sombra (não pílula) */
.sidecart__resumo .btn--primario { border-radius: var(--raio-sm); box-shadow: none; }
.sidecart__seg {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: var(--sp-4);
  font-size: var(--fs-xs); color: var(--cinza-500);
}
.sidecart__seg svg { width: 14px; height: 14px; color: var(--verde-ok); }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-overlay, .sidecart__barra span { transition: none; }
}

/* sidecart: estado de carregando durante AJAX (anti clique-duplo) */
.drawer--cart.is-loading .sidecart__itens,
.drawer--cart.is-loading .sidecart__resumo { opacity: .55; pointer-events: none; transition: opacity var(--t-rapida); }

/* (removido) O CTA do carrinho vazio não usa mais `.btn--primario`, então não há sombra
   amarela para anular — o `box-shadow: none !important` que morava aqui virou ruído. */

/* Sidecart: o wrapper do fragment precisa distribuir a altura do drawer —
   lista de itens ROLA (flex:1) e o resumo + "Finalizar compra" ficam FIXOS no rodapé. */
.baly-sidecart-inner { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.baly-sidecart-inner .drawer__corpo { min-height: 0; }
/* lista rola só na vertical: com overflow-y:auto o eixo X vira auto também, e o item que sai deslizando (translateX 28px)
   passava 4 px da borda → barra horizontal piscando por ~0,3 s ao adicionar/excluir (08/10/2026) */
.drawer--cart .drawer__corpo { overflow-x: hidden; }

/* Feedback do botão "Adicionar": carregando (spinner) → sucesso (verde + check) → volta.
   Vale pro botão da PDP e pros cards (.card-produto__add). A transição de cor é suave
   porque .card-produto__add já tem transition de background. */
.card-produto__add.is-adding, .single_add_to_cart_button.is-adding { pointer-events: none; opacity: .9; }
/* :hover/:focus inclusos senão o hover amarelo (mesma especificidade, vem depois) come o verde */
.card-produto__add.is-added,  .card-produto__add.is-added:hover,  .card-produto__add.is-added:focus,
.single_add_to_cart_button.is-added, .single_add_to_cart_button.is-added:hover, .single_add_to_cart_button.is-added:focus { background: var(--verde-ok); color: #fff; }
.card-produto__add.is-added svg, .single_add_to_cart_button.is-added svg { width: 18px; height: 18px; }
/* Card estreito (2 colunas no celular): "ADICIONANDO…" / "ADICIONADO!" não cabem no
   botão e vazavam. Ali o estado fica só no ícone (círculo girando · ✓); o texto segue
   para leitor de tela. Medido pela largura do CARD (@container), não da tela. */
.card-produto { container: card / inline-size; }
.card-produto__add { overflow: hidden; white-space: nowrap; }
@container card (max-width: 220px) {
  .card-produto__add.is-adding > span:not(.baly-spin),
  .card-produto__add.is-added > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.baly-spin {
  width: 15px; height: 15px; flex: none;
  border: 2px solid rgba(0, 0, 0, .25); border-top-color: currentColor; border-radius: 50%;
  display: inline-block; animation: baly-spin .6s linear infinite;
}
@keyframes baly-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .baly-spin { animation: none; } }

/* Carrinho vazio: a área de itens vazia tem flex:1 e dividia o espaço com o aviso,
   jogando-o pra baixo. Some com a área vazia (sem .cart-item) → o aviso centraliza sozinho. */
.baly-sidecart-inner .sidecart__itens:not(:has(.cart-item)) { display: none; }

/* (removido) `justify-content: flex-start` — o bloco ficava colado no topo com metade do
   drawer vazia embaixo, e era isso que deixava o estado desequilibrado. A centragem vem
   do bloco `.sidecart__vazio` lá em cima. */

/* ---- Sidecart: atualização SUAVE (granular) ----
   Item entra/sai deslizando, troca de estado faz cross-fade, barra de frete anima a largura. */
.baly-sidecart-inner.is-swapping { opacity: 0; transition: opacity .16s ease; }
.sidecart__itens .cart-item {
  flex-shrink: 0; /* NÃO encolher quando há muitos itens — a lista rola (senão sobrepõem) */
  overflow: hidden;
  transition: opacity .26s ease, transform .26s ease, max-height .32s ease, margin-bottom .32s ease;
  will-change: opacity, transform, max-height;
}
.sidecart__itens .cart-item.is-entering { opacity: 0; transform: translateX(-16px); }
/* ao sair: desliza + some E colapsa a própria altura/margem → os itens de baixo sobem junto, suave */
.sidecart__itens .cart-item.is-removing {
  opacity: 0; transform: translateX(28px);
  max-height: 0 !important; margin-bottom: 0 !important;
}
.sidecart__barra span { transition: width .5s cubic-bezier(.22, .7, .2, 1); }
/* fade simples quando um valor RECALCULA (total Pix, subtotal, desconto, preço do item, qtd) */
@keyframes baly-valor-fade { 0% { opacity: .25; } 100% { opacity: 1; } }
.baly-valor-anim { animation: baly-valor-fade .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .baly-sidecart-inner.is-swapping, .sidecart__itens .cart-item, .sidecart__barra span { transition: none; }
  .baly-valor-anim { animation: none; }
}

/* ==========================================================================
   QUICK-ADD — escolher o formato a partir do card (APROVADO 06/10/2026 —
   mockup/estudos/quick-add.html?variant=p). Só abre com 2+ formatos; com um
   só, o card adiciona direto.
   · DESKTOP (≥561): PAINEL lateral do tamanho do carrinho, SEM cabeçalho (o X
     flutua sobre o palco — repaginado de 08/10/2026, estudo quick-add.html?variant=r). Ao adicionar, a superfície "vira" o carrinho: o conteúdo da
     escolha sai pela esquerda e o do carrinho entra pela direita.
   · CELULAR (≤560): GAVETA alta que NUNCA rola — tudo tem altura natural,
     menos o palco, o único que encolhe (360 → 150px) para o resto caber.
   Conteúdo: packshot no palco amarelo · spec + "Ver produto" · nome · preço do
   cartão · "cada lata · 3x" numa linha · formato em grade leve (= PDP).
   ⚠️ Rejeitados: Pix aqui · total ao lado do "Adicionar" · "Escolha o formato"
   com uma opção só · gaveta rolável · tela cheia no celular.
   ========================================================================== */
.baly-qa-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
  z-index: 110;
}
.baly-qa-overlay.ativo { opacity: 1; visibility: visible; }

/* painel (desktop) */
.baly-qa {
  position: fixed; z-index: 120; top: 0; bottom: 0; right: 0;
  width: min(420px, 88vw);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--baly-branco);
  box-shadow: 0 0 50px rgba(0, 0, 0, .3);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--t), visibility var(--t);
}
.baly-qa.aberto { transform: none; visibility: visible; }
@media (max-width: 767px) { .baly-qa { width: 100%; } }   /* = carrinho, que vira 100% abaixo de 768 */
.baly-qa__alca { display: none; }
/* X flutuando sobre o palco nas duas larguras (sem cabeçalho desde o repaginado de 08/10/2026) */
.baly-qa__fechar {
  display: grid; place-items: center; position: absolute; top: 24px; right: 24px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); color: var(--baly-preto);
  transition: background-color var(--t-rapida);
}
.baly-qa__fechar:hover { background: #fff; }
.baly-qa__fechar:focus-visible { outline: 2px solid var(--baly-preto); outline-offset: 2px; }
.baly-qa__fechar svg { width: 18px; height: 18px; }

.baly-qa__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@keyframes baly-qa-content-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.baly-qa__corpo.is-carregado { animation: baly-qa-content-in .26s ease; }
.baly-qa__spinner { flex: 1; display: grid; place-items: center; min-height: 180px; }
.baly-qa__spinner .baly-spin { width: 26px; height: 26px; border-width: 3px; color: var(--baly-preto); }

/* PALCO AMARELO da PDP com o PACKSHOT do pack (6 un): a única peça que encolhe
   para o resto caber — e a que fica com a sobra do painel (antes: uma lata pequena
   num quadro cinza grande). = .pdp__media: luz no topo + base assentada. */
.baly-qa__img {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 1 1 380px; min-height: 180px; max-height: 500px;
  margin: 12px 12px 0; border-radius: 16px;
  background:
    radial-gradient(120% 82% at 50% 16%, rgba(255, 255, 255, .60), rgba(255, 255, 255, 0) 56%),
    radial-gradient(125% 120% at 50% 124%, rgba(0, 0, 0, .12), transparent 52%),
    var(--baly-amarelo);
}
.baly-qa__img img {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%; object-fit: contain; padding: 22px;   /* em px: em % a margem comia o pack ao encolher */
}
.baly-qa__img .tag { position: absolute; top: 14px; left: 14px; z-index: 1; }

/* texto em 3 níveis: spec (cinza) · nome e preço (preto) · detalhe numa linha (cinza) */
.baly-qa__info { flex: none; padding: 18px 20px 20px; min-width: 0; }   /* padding-bottom = vão mínimo até o rodapé */
.baly-qa__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.baly-qa__spec {
  font-size: 11px; font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .07em;
  color: var(--cor-texto-suave); font-variant-numeric: tabular-nums;
}
.baly-qa__nome { margin-top: 4px; font-size: 1.25rem; font-weight: var(--peso-heavy); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.baly-qa__preco { margin-top: 10px; }
.baly-qa__linha { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .5rem; }
.baly-qa__agora { font-size: 1.5rem; font-weight: var(--peso-heavy); letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.baly-qa__antes { font-size: var(--fs-sm); color: var(--cor-texto-suave); text-decoration: line-through; }
.baly-qa__det { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--cor-texto-suave); font-variant-numeric: tabular-nums; }
.baly-qa__det b { color: var(--cor-texto); font-weight: var(--peso-bold); }

/* FORMATO = GRADE LEVE da PDP (.pdp__formats): 3 blocos na largura, 44 px, borda 1px, só a
   litragem (preço no formato foi rejeitado na PDP). Selecionado = contorno preto. */
.baly-qa__opt { margin-top: 18px; }
.baly-qa__label { display: block; font-size: 13px; font-weight: var(--peso-bold); margin-bottom: 8px; }
.baly-qa__fmts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* 4+ formatos numa linha só, como na PDP (produto.css) */
.baly-qa__fmts:has(> .baly-qa__fmt:nth-child(4)) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.baly-qa__fmts:has(> .baly-qa__fmt:nth-child(4)) .baly-qa__fmt { padding: 0 .25rem; white-space: nowrap; }
.baly-qa__fmt {
  font: inherit; height: 44px; padding: 0 .5rem; border-radius: var(--raio);
  font-size: var(--fs-sm); font-weight: var(--peso-semibold);
  background: #fff; color: var(--baly-preto); cursor: pointer;
  border: 1px solid var(--cor-borda);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
 (hover: hover) { .baly-qa__fmt:hover { border-color: var(--cinza-300); } }
.baly-qa__fmt.is-ativo, .baly-qa__fmt.is-ativo:hover { font-weight: var(--peso-bold); border-color: var(--baly-preto); box-shadow: inset 0 0 0 .5px var(--baly-preto); }
/* esgotado: aparece (como na PDP) mas riscado e apagado; selecionado = cinza, nunca o contorno de "escolhido para comprar" */
.baly-qa__fmt.is-esgotado { color: var(--cinza-400); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.baly-qa__fmt.is-esgotado.is-ativo { color: var(--cinza-500); background: var(--cinza-50); border-color: var(--cinza-400); box-shadow: none; }
.baly-qa__fmt:focus-visible, .baly-qa__ver:focus-visible { outline: 2px solid var(--baly-preto); outline-offset: 2px; }

.baly-qa__ver {
  flex: none; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: var(--peso-semibold); color: var(--cor-texto);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: var(--cinza-300); transition: text-decoration-color var(--t-rapida);
}
.baly-qa__ver:hover { text-decoration-color: currentColor; }
.baly-qa__ver svg { width: 13px; height: 13px; }

/* rodapé fixo: quantidade + adicionar (sempre à mão) */
.baly-qa__acao {
  flex: none; margin-top: auto; display: flex; gap: 12px;
  padding: 14px 20px 20px; box-shadow: 0 -1px 0 var(--cinza-100);
}
.baly-qa__acao .qty { flex: none; border-radius: 10px; }
.baly-qa__acao .qty button { width: 40px; height: 52px; }
.baly-qa__acao .qty button:disabled { color: var(--cinza-300); cursor: default; }
.baly-qa__acao .qty span { min-width: 22px; }
.baly-qa__acao .baly-qa__add { flex: 1 1 0; width: auto; min-width: 0; height: 52px; margin-top: 0; border-radius: 10px; font-size: 13px; }
.baly-qa__add.card-produto__add--esgotado svg { display: none; }   /* esgotado: sem o "+" */

/* DESKTOP: o painel vira o carrinho (JS: qaViraCarrinho). O carrinho é posto no
   lugar SEM a transição de entrada; o conteúdo dele entra pela direita enquanto o
   da escolha sai pela esquerda, como um trilho. */
.drawer.sem-transicao, .drawer-overlay.sem-transicao,
.baly-qa.sem-transicao, .baly-qa-overlay.sem-transicao { transition: none !important; }
.baly-qa.vira-carrinho { background: transparent; box-shadow: none; }
.baly-qa.vira-carrinho > * { animation: baly-qa-sai .32s cubic-bezier(.2, 0, 0, 1) forwards; }
.drawer--cart.vem-do-qa > * { animation: baly-qa-entra .32s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes baly-qa-sai { to { transform: translateX(-100%); } }
@keyframes baly-qa-entra { from { transform: translateX(100%); } }

/* CELULAR: gaveta alta que nunca rola */
@media (max-width: 560px) {
  .baly-qa {
    top: auto; left: 0; width: 100%;
    max-height: 88dvh;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .baly-qa.aberto { transform: none; }
  .baly-qa__alca {
    display: block; position: absolute; top: 8px; left: 50%; translate: -50% 0; z-index: 3;
    width: 40px; height: 4px; border-radius: 99px; background: rgba(0, 0, 0, .18);
  }
  .baly-qa__fechar { top: 18px; right: 18px; width: 40px; height: 40px; }
  .baly-qa__fechar svg { width: 20px; height: 20px; }
  .baly-qa__img { flex: 1 1 360px; min-height: 150px; max-height: 360px; margin: 8px 8px 0; border-radius: 12px; }   /* 20 da gaveta − 8 de margem */
  .baly-qa__img img { padding: 16px; }
}
/* celular baixo (SE, barra de navegador grande): respiros mais curtos, para a lata
   não ser a única a pagar a conta */
@media (max-width: 560px) and (max-height: 720px) {
  .baly-qa__info { padding-block: 12px; }
  .baly-qa__opt { margin-top: 12px; }
  .baly-qa__acao { padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .baly-qa, .baly-qa-overlay { transition: opacity var(--t-rapida); }
  .baly-qa__corpo.is-carregado, .baly-qa.vira-carrinho > *, .drawer--cart.vem-do-qa > * { animation: none; }
}

/* ==========================================================================
   Busca INLINE — ao clicar na lupa, a busca aparece NO LUGAR DO MENU (centro),
   com animação de reveal (fade + slide). Logo e ações (conta/carrinho) PERMANECEM.
   A própria lupa vira × (fecha no mesmo lugar onde abriu). NÃO cai num painel.
   ========================================================================== */
.cabecalho__busca {
  /* top:0/bottom:0 + flex → o campo é centralizado pela ALTURA REAL do header
     (não depende de translateY(-50%), que pode desalinhar se o offset-parent
     for mais alto que o header visível — causava a busca "vazar" no mobile). */
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 15;
  width: min(560px, calc(100% - 320px));
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  /* fechado: acima do centro → ao abrir, DESCE p/ o lugar (de cima pra baixo) */
  transform: translate(-50%, -14px);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.7,.3,1), visibility .28s;
}
.cabecalho.busca-ativa .cabecalho__busca {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
}
/* × dentro da barra: só no MOBILE (no desktop a própria lupa vira ×) */
.cabecalho__busca-x { display: none; }
/* o menu (nav) some suavemente enquanto a busca aparece */
.cabecalho__nav { transition: opacity .18s ease, visibility .18s; }
.cabecalho.busca-ativa .cabecalho__nav { opacity: 0; visibility: hidden; pointer-events: none; }

/* morph da lupa → × no botão que abriu (fecha no mesmo lugar) */
.cab-busca-desktop .ic-fechar, .cab-busca-mobile .ic-fechar { display: none; }
.cabecalho.busca-ativa .cab-busca-desktop .ic-busca,
.cabecalho.busca-ativa .cab-busca-mobile .ic-busca { display: none; }
.cabecalho.busca-ativa .cab-busca-desktop .ic-fechar,
.cabecalho.busca-ativa .cab-busca-mobile .ic-fechar { display: block; }
.cabecalho.busca-ativa .cab-busca-desktop,
.cabecalho.busca-ativa .cab-busca-mobile { background: rgba(0,0,0,.08); }

/* ---- Estrutura interna do painel (compartilhada pelos dois headers) ----
   .cabecalho__busca > .cabecalho__busca-inner > .busca > (.busca__campo + .busca__dicas + ×)
   No INLINE (internas) o inner é só um flex transparente; os chips ficam ocultos. */
.cabecalho__busca-inner { display: flex; align-items: center; width: 100%; min-height: 0; }
.busca { display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-width: 0; }
.busca__campo { flex: 1; min-width: 0; }
.busca__dicas { display: none; }

/* ---- Busca na ILHA (home): em vez de tomar o lugar do menu, a ilha se ESTENDE para
   baixo e abre o campo numa 2ª linha (grid-template-rows 0fr → 1fr). O menu continua
   visível. Mesmo gatilho/classe do inline (header.js `busca-ativa`); no mobile o
   FiboSearch abre o overlay dele (header.js), então esta linha só aparece no desktop
   ou como fallback sem o plugin. ⚠️ O padding fica no .busca (neto), nunca no inner
   com overflow:hidden — senão a linha não colapsa a zero. ---- */
.cabecalho--ilha .cabecalho__busca,
.cabecalho--ilha.busca-ativa .cabecalho__busca {
  position: static; width: auto; z-index: auto;
  padding: 0; background: transparent; border: 0; box-shadow: none;   /* zera a "barra abaixo do header" do inline MOBILE (padding/fundo brancos vazavam como faixa) */
  align-items: stretch; justify-items: stretch;   /* ⚠️ o inline deixa align-items:center → o item centralizava e VAZAVA sobre a linha de 0px */
  display: grid; grid-template-rows: 0fr;
  opacity: 1; visibility: visible; transform: none;
  transition: grid-template-rows .32s cubic-bezier(.2, .7, .2, 1);
}
.cabecalho--ilha.busca-ativa .cabecalho__busca { grid-template-rows: 1fr; }
.cabecalho--ilha .cabecalho__busca-inner { overflow: hidden; overflow: clip; display: block; }   /* clip: não vira contêiner rolável (o foco rolava o hidden e recortava o topo do campo) */
.cabecalho--ilha .busca {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: var(--sp-3);
  padding: 4px var(--ilha-pad) var(--ilha-pad);
}
.cabecalho--ilha .busca__campo { position: relative; }
/* chips "Mais buscados": UMA linha; no mobile rolam na horizontal (sem quebrar e sem barra) */
.cabecalho--ilha .busca__dicas {
  display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--cinza-500);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  margin-inline: calc(-1 * var(--ilha-pad)); padding-inline: var(--ilha-pad);
}
.cabecalho--ilha .busca__dicas::-webkit-scrollbar { display: none; }
.cabecalho--ilha .busca__dicas > * { flex: none; }
.cabecalho--ilha .busca__dicas a {
  padding: 6px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .06); color: var(--cinza-800); font-weight: var(--peso-semibold);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.cabecalho--ilha .busca__dicas a:hover { background: var(--baly-amarelo); color: var(--baly-preto); }
/* o menu NÃO some com a busca aberta (a busca está numa linha própria) */
.cabecalho--ilha.busca-ativa .cabecalho__nav { opacity: 1; visibility: visible; pointer-events: auto; }
/* fecha pela própria lupa (que vira ×) — o × interno é só do fallback mobile sem FiboSearch */
.cabecalho--ilha .cabecalho__busca-x { display: none; }
@media (max-width: 991px) { .cabecalho--ilha.busca-ativa .cabecalho__busca-x { display: inline-flex; flex: none; } .cabecalho--ilha .busca { grid-template-columns: 1fr auto; } .cabecalho--ilha .busca__dicas { grid-column: 1 / -1; } }
/* FiboSearch dentro da ilha: campo 50px, raio 14, sem a sombra flutuante do inline */
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-sf-wrapp { height: 50px !important; }
/* ⚠️ o plugin centraliza o wrapper em max-width 600px → o campo ficava RECUADO em relação à logo quando a ilha vira barra */
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-search-wrapp { max-width: none !important; margin: 0 !important; }
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-search-input[type="search"] {
  height: 50px !important; padding: 0 52px 0 18px !important;
  border-radius: 14px !important; box-shadow: none !important;
  font-size: var(--fs-base) !important;
}
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-search-input[type="search"]:focus {
  border-color: var(--baly-amarelo) !important; box-shadow: 0 0 0 3px rgba(255, 205, 0, .22) !important;   /* foco = amarelo da marca (a borda PRETA foi rejeitada: "feia demais") */
}
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-search-submit { height: 50px !important; width: 50px !important; border-radius: 0 14px 14px 0 !important; }
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-preloader,
.cabecalho--ilha .cabecalho__busca .dgwt-wcas-close { height: 50px !important; right: 52px !important; }
/* fallback sem FiboSearch (form padrão do WC) no mesmo desenho */
.cabecalho--ilha .cabecalho__busca .woocommerce-product-search .search-field {
  height: 50px; width: 100%; padding: 0 18px; border: 1px solid var(--cinza-300); border-radius: 14px; background: #fff; font: inherit; outline: none;
}
.cabecalho--ilha .cabecalho__busca .woocommerce-product-search .search-field:focus {
  border-color: var(--baly-amarelo); box-shadow: 0 0 0 3px rgba(255, 205, 0, .22);
}
@media (min-width: 768px) {
  .cabecalho--ilha .busca { grid-template-columns: minmax(0, 720px) auto; gap: var(--sp-5); padding: 4px 22px 18px;   /* 4px no topo: o anel de foco (3px) era cortado pelo overflow:hidden do inner */ }
  .cabecalho--ilha .busca__dicas { overflow: visible; margin-inline: 0; padding-inline: 0; }
}
/* virou barra: a linha da busca acompanha a largura do conteúdo */
.cabecalho--ilha.is-stuck .busca { max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--gutter); }
/* busca na BARRA AMARELA das internas: chips em tinta preta translúcida; foco do campo por sombra
   (o anel amarelo some no amarelo e a borda preta foi rejeitada) */
.cabecalho--barra-amarela.is-stuck .busca__dicas { color: rgba(0, 0, 0, .62); }
.cabecalho--barra-amarela.is-stuck .busca__dicas a { background: rgba(0, 0, 0, .09); color: var(--baly-preto); }
.cabecalho--barra-amarela.is-stuck .busca__dicas a:hover { background: var(--baly-preto); color: var(--baly-amarelo); }

/* ---- FiboSearch dentro da busca inline (marca Baly) ----
   O estilo "Pirx" do plugin força input pill (raio 30 / alt 54) + wrapper alto (74)
   + lupa/submit à ESQUERDA. Achatamos tudo p/ um campo branco flat com borda leve
   e a lupa como ÍCONE (fundo transparente, escura) à direita (!important p/ vencer). */
.cabecalho__busca .dgwt-wcas-search-wrapp { width: 100%; }
.cabecalho__busca .dgwt-wcas-sf-wrapp {
  height: 46px !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
}
.cabecalho__busca .dgwt-wcas-search-input[type="search"] {
  height: 46px !important; padding: 0 48px 0 16px !important;
  border: 1px solid var(--cinza-300) !important; border-radius: var(--raio-sm) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; background: #fff !important;
  font: inherit !important; font-size: var(--fs-sm) !important; color: var(--cor-texto) !important;
}
.cabecalho__busca .dgwt-wcas-search-input[type="search"]::placeholder { color: var(--cinza-400); }
.cabecalho__busca .dgwt-wcas-search-input[type="search"]:focus { border-color: var(--cinza-300) !important; box-shadow: 0 8px 24px rgba(0,0,0,.16) !important; }
/* botão de buscar = lupa como ÍCONE à direita (sem bloco preto): fundo transparente, ícone escuro */
.cabecalho__busca .dgwt-wcas-search-submit {
  height: 46px !important; width: 46px !important; top: 0 !important; bottom: 0 !important;
  left: auto !important; right: 0 !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; cursor: pointer;
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0 !important;
}
.cabecalho__busca .dgwt-wcas-search-submit .dgwt-wcas-ico-magnifier { fill: var(--baly-preto); }
.cabecalho__busca .dgwt-wcas-search-submit:hover .dgwt-wcas-ico-magnifier { fill: var(--cinza-600); }
.cabecalho__busca .dgwt-wcas-ico-magnifier { width: 19px; height: 19px; }
/* preloader/limpar (× que limpa o input) alinhados, à direita antes da lupa */
.cabecalho__busca .dgwt-wcas-preloader,
.cabecalho__busca .dgwt-wcas-close { top: 0 !important; bottom: 0 !important; height: 46px !important; right: 48px !important; margin: auto 0 !important; }
/* ---- Dropdown de resultados do FiboSearch (é portado p/ o <body>, FORA do header) ----
   Por isso precisa de seletores globais (não dá p/ escopar em .cabecalho__busca). */
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
  margin-top: 8px !important;
  border: 1px solid var(--cor-borda) !important;
  border-radius: var(--raio) !important;
  /* spread NEGATIVO → sombra quase só p/ baixo, sem "vazar" na lateral (a coluna
     da esquerda deixava de projetar sombra na direita → sumiu o ar de profundidade). */
  box-shadow: 0 14px 28px -12px rgba(0,0,0,.20) !important;
  background: var(--baly-branco) !important;
}
/* Desktop: lista (esq) + preview (dir) devem parecer UM card só → arredonda só os
   cantos EXTERNOS e junta com uma única divisória (sem borda dupla no meio). */
@media (min-width: 992px) {
  .dgwt-wcas-suggestions-wrapp { border-radius: var(--raio) 0 0 var(--raio) !important; border-right: 0 !important; }
  .dgwt-wcas-details-wrapp { border-radius: 0 var(--raio) var(--raio) 0 !important; }
  /* SEM resultados → não há preview à direita: arredonda os 4 cantos + borda completa */
  body.dgwt-wcas-nores .dgwt-wcas-suggestions-wrapp {
    border-radius: var(--raio) !important; border-right: 1px solid var(--cor-borda) !important;
  }
}
.dgwt-wcas-suggestions-wrapp { overflow: hidden !important; padding: var(--sp-1) 0 !important; }
/* entrada suave dos resultados (fade + leve descida) em vez de aparecer de uma vez */
@keyframes baly-fibo-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dgwt-wcas-suggestions-wrapp,
.dgwt-wcas-details-wrapp {
  animation: baly-fibo-in .22s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .dgwt-wcas-suggestions-wrapp,
  .dgwt-wcas-details-wrapp { animation: none; }
}
/* cada resultado = linha limpa (thumb + [nome / pack / preço], tudo à esquerda).
   O plugin usa flex + space-between (empurra o texto p/ a direita numa coluna
   estreita) → forçamos flex-start e text-align:left com especificidade alta. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: var(--sp-3) !important;
  padding: 10px var(--sp-4) !important;
  border: 0 !important; text-decoration: none;
  transition: background var(--t-rapida) !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-content-wrapp {
  flex: 1 1 auto !important; min-width: 0 !important; display: block !important; text-align: left !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-st,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-meta,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-sp,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .baly-fibo-sub,
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .baly-fibo-preco {
  text-align: left !important; display: block !important; width: auto !important; float: none !important;
  margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important;
}
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-si {
  flex: none; width: 56px !important; height: 56px !important;
  display: grid !important; place-items: center;
  background: var(--cinza-50) !important; border: 1px solid var(--cor-borda) !important; border-radius: var(--raio-sm) !important;
  overflow: hidden !important; padding: 0 !important; margin: 0 !important;
}
/* a lata é alta → cabe INTEIRA no quadradinho (max-height 100% + height auto);
   sem borda própria do plugin (evita borda dupla). Especificidade alta pois o CSS
   do FiboSearch carrega DEPOIS do tema. */
.dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-si img {
  /* px ABSOLUTO clampa sempre (percentuais não resolvem dentro do grid-item);
     lata alta cabe INTEIRA, largura por proporção. */
  width: auto !important; height: auto !important;
  max-width: 100% !important; max-height: 52px !important;
  padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  object-fit: contain !important; background: transparent !important;
}
.dgwt-wcas-content-wrapp { min-width: 0; flex: 1; display: block !important; position: static !important; }
.dgwt-wcas-st-title {
  font-size: var(--fs-sm) !important; font-weight: var(--peso-medio) !important; color: var(--cor-texto) !important;
  line-height: 1.25; display: -webkit-box !important;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal !important;
}
.dgwt-wcas-st-title strong { font-weight: var(--peso-heavy); color: var(--cor-texto); }
/* preço SEMPRE numa linha abaixo do título (o plugin flutua p/ a direita e corta
   no espaço estreito quando o nome é longo). */
.dgwt-wcas-suggestion .dgwt-wcas-meta {
  position: static !important; float: none !important; right: auto !important; top: auto !important;
  width: auto !important; max-width: none !important; margin-top: 2px !important; padding: 0 !important;
  text-align: left !important; white-space: nowrap;
}
/* sublinha "Pack c/ N" (ou atributo) sob o nome */
.baly-fibo-sub { display: block; font-size: var(--fs-xs); color: var(--cinza-500); font-weight: var(--peso-medio); margin: 1px 0 3px; }
/* preço = só o mais barato, "a partir de R$ X" */
.baly-fibo-preco { display: block; }
.baly-fibo-de { font-size: var(--fs-xs); color: var(--cinza-500); font-weight: var(--peso-medio); }
.dgwt-wcas-meta .amount { font-size: var(--fs-sm) !important; font-weight: var(--peso-heavy) !important; color: var(--verde-ok) !important; }
/* Desktop: a lista mostra só thumb + nome (o pack/preço já aparecem no preview à
   direita). No mobile não há preview → mantém pack + "a partir de" na lista. */
@media (min-width: 992px) {
  .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-meta { display: none !important; }
}
.dgwt-wcas-meta .woocommerce-Price-currencySymbol { font-weight: var(--peso-medio); }
/* item ativo/hover */
.dgwt-wcas-suggestion.dgwt-wcas-suggestion-selected,
.dgwt-wcas-suggestion:hover { background: var(--cinza-50) !important; }
.dgwt-wcas-suggestion-headline { padding: 8px var(--sp-4) 4px !important; font-size: var(--fs-xs) !important; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza-500) !important; font-weight: var(--peso-heavy) !important; }
/* rodapé "ver todos os resultados" */
.dgwt-wcas-suggestion-more { justify-content: center; font-weight: var(--peso-bold) !important; color: var(--baly-preto) !important; border-top: 1px solid var(--cor-borda) !important; }

/* painel de detalhes (preview à direita) */
.dgwt-wcas-details-wrapp .dgwt-wcas-details-inner { padding: var(--sp-4) !important; }
/* trocar de produto (hover na lista) → fade + leve subida, não brusco */
@keyframes baly-fibo-detail-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dgwt-wcas-details-wrapp .dgwt-wcas-details-inner.dgwt-wcas-details-inner-active {
  animation: baly-fibo-detail-in .2s cubic-bezier(.2,.7,.3,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .dgwt-wcas-details-wrapp .dgwt-wcas-details-inner.dgwt-wcas-details-inner-active { animation: none; }
}
.dgwt-wcas-details-main-image { text-align: center; }
.dgwt-wcas-details-main-image img { max-height: 190px !important; width: auto !important; margin: 0 auto var(--sp-2) !important; display: block; }
.dgwt-wcas-details-product-title {
  display: block; font-size: var(--fs-md) !important; font-weight: var(--peso-heavy) !important;
  color: var(--cor-texto) !important; line-height: 1.2; text-decoration: none;
}
.dgwt-wcas-pd-price { margin-top: var(--sp-2) !important; }
.dgwt-wcas-pd-price .amount { font-size: var(--fs-base) !important; font-weight: var(--peso-heavy) !important; color: var(--verde-ok) !important; }
.dgwt-wcas-pd-price .woocommerce-Price-currencySymbol { font-weight: var(--peso-medio); }
.dgwt-wcas-details-hr { margin: var(--sp-3) 0 !important; border: 0 !important; border-top: 1px solid var(--cor-borda) !important; }
.dgwt-wcas-pd-addtc,
.dgwt-wcas-pd-addtc .dgwt-wcas-pd-addtc-form,
.dgwt-wcas-pd-addtc .add_to_cart_inline { display: block !important; width: 100% !important; margin: 0 !important; }
.dgwt-wcas-pd-addtc .button {
  display: flex !important; width: 100% !important; align-items: center; justify-content: center;
  height: 46px; padding: 0 var(--sp-4) !important;
  background: var(--baly-amarelo) !important; color: var(--baly-preto) !important;
  border: 0 !important; border-radius: var(--raio-sm) !important;
  font-weight: var(--peso-heavy) !important; font-size: var(--fs-sm) !important;
  text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
  transition: background var(--t-rapida) !important;
}
.dgwt-wcas-pd-addtc .button:hover { background: var(--baly-amarelo-escuro) !important; }
/* estado "nada encontrado" */
.dgwt-wcas-suggestion-nores { padding: var(--sp-4) !important; color: var(--cinza-500) !important; font-size: var(--fs-sm) !important; justify-content: center; }
/* fallback: busca de produto padrão do WC (sem FiboSearch) */
.cabecalho__busca .woocommerce-product-search { display: flex; gap: var(--sp-2); margin: 0; }
.cabecalho__busca .search-field {
  flex: 1; min-width: 0; height: 46px; padding: 0 var(--sp-4);
  border: 1px solid var(--cinza-300); border-radius: var(--raio-sm);
  font: inherit; font-size: var(--fs-sm); background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.cabecalho__busca .search-field:focus { outline: none; border-color: var(--cinza-300); }
.cabecalho__busca .woocommerce-product-search button {
  flex: none; height: 46px; padding: 0 var(--sp-4); border: 1px solid var(--cinza-300); border-radius: var(--raio-sm);
  background: #fff; color: var(--baly-preto);
  font: inherit; font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .03em; cursor: pointer;
}
.cabecalho__busca .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mobile: o header é apertado demais p/ input + botão na mesma linha (sobreposição
   + layout shift). Então a busca DESCE como uma barra full-bleed ABAIXO do header.
   O header fica intacto (logo/menu/lupa/carrinho no lugar); a lupa só abre/fecha. */
@media (max-width: 991px) {
  /* .cabecalho__inner JÁ é o .container (full-width com padding do gutter);
     por isso left/right:0 = full-bleed, e o padding do gutter dá o respiro lateral. */
  .cabecalho__busca {
    position: absolute; top: 100%; bottom: auto; z-index: 44;
    left: 0; right: 0; width: auto;
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3) var(--gutter);
    background: var(--baly-branco);
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 14px 24px rgba(0,0,0,.12);
    transform: translateY(-12px);   /* desce de cima pra baixo ao abrir */
  }
  .cabecalho.busca-ativa .cabecalho__busca { transform: translateY(0); }
  /* input ocupa o espaço; × fecha ao lado */
  .cabecalho__busca .dgwt-wcas-search-wrapp,
  .cabecalho__busca .woocommerce-product-search { flex: 1 1 auto; min-width: 0; }
  .cabecalho__busca-x { display: inline-flex; flex: none; color: var(--cinza-500); }
  .cabecalho__busca-x:hover { background: var(--cinza-100); color: var(--baly-preto); }
  /* header intacto: a lupa NÃO vira × no mobile (a barra tem o seu próprio ×) */
  .cabecalho.busca-ativa .cab-busca-mobile .ic-busca { display: block; }
  .cabecalho.busca-ativa .cab-busca-mobile .ic-fechar { display: none; }
  .cabecalho.busca-ativa .cab-busca-mobile { background: rgba(0,0,0,.08); }
}
@media (prefers-reduced-motion: reduce) {
  .cabecalho__busca, .cabecalho__nav { transition: none; }
}

/* ==========================================================================
   Modal de confirmação (ex.: sair da conta) — leve, centralizado
   ========================================================================== */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s ease;
}
.confirm-overlay.is-aberto { opacity: 1; }
.confirm-overlay[hidden] { display: none; }
.confirm-box {
  position: fixed; z-index: 1001; top: 50%; left: 50%;
  width: min(400px, calc(100vw - 2rem));
  background: var(--baly-branco); border-radius: var(--raio-lg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
  padding: var(--sp-6);
  opacity: 0; transform: translate(-50%, -50%) scale(.96);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), opacity .18s ease;
}
.confirm-box.is-aberto { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.confirm-box[hidden] { display: none; }
.confirm-box__titulo { font-size: var(--fs-lg); text-transform: uppercase; line-height: 1.1; }
.confirm-box__txt { margin-top: var(--sp-2); color: var(--cor-texto-suave); font-size: var(--fs-sm); line-height: 1.5; }
.confirm-box__acoes { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); }
.confirm-box__cancelar, .confirm-box__ok {
  flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-sm); font: inherit; font-weight: var(--peso-heavy); font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .02em; cursor: pointer; text-decoration: none;
  transition: background var(--t-rapida);
}
.confirm-box__cancelar { background: var(--baly-branco); border: 1px solid var(--cinza-300); color: var(--cor-texto); }
.confirm-box__cancelar:hover { background: var(--cinza-50); }
.confirm-box__ok { background: var(--baly-preto); border: 0; color: var(--baly-branco); }
.confirm-box__ok:hover { background: #262626; }

/* ==========================================================================
   Toast — notificação temporária (ex.: "salvo com sucesso"). Desliza de baixo.
   ========================================================================== */
.baly-toast {
  position: fixed; z-index: 1200; left: 50%; bottom: 24px;
  max-width: min(440px, calc(100vw - 2rem));
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: var(--raio);
  background: var(--baly-preto); color: var(--baly-branco);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  font-size: var(--fs-sm); font-weight: var(--peso-bold); cursor: pointer;
  opacity: 0; transform: translateX(-50%) translateY(20px);
  transition: opacity .25s ease, transform .32s cubic-bezier(.2, .7, .3, 1), translate .25s ease;
  touch-action: none; user-select: none; -webkit-user-select: none;   /* swipe para dispensar (notices.js) */
}
.baly-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.baly-toast.is-arrastando { transition: none; }   /* segue o dedo sem atraso */
.baly-toast__ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-ok); color: #fff; }
.baly-toast__ico svg { width: 14px; height: 14px; }
.baly-toast--error .baly-toast__ico { background: #dc2626; }
.baly-toast--info .baly-toast__ico { background: #2563eb; }
.baly-toast__txt { line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .baly-toast { transition: opacity .2s ease; transform: translateX(-50%); } }
/* mobile: pílula mais larga (ocupa a linha entre os gutters) */
@media (max-width: 559px) {
  .baly-toast { left: var(--gutter); right: var(--gutter); bottom: 16px; max-width: none; transform: translateY(20px); }
  .baly-toast.is-show { transform: translateY(0); }
}
@media (max-width: 559px) and (prefers-reduced-motion: reduce) { .baly-toast { transform: none; } }
/* wrapper de notices vazio (após tirar o sucesso) não deixa espaço fantasma */
.woocommerce-notices-wrapper:empty { display: none; }
/* Anti-flicker: com JS, os banners do servidor JÁ NASCEM ocultos (o notices.js os
   converte em toast no DOMContentLoaded — antes disso eles piscavam no topo).
   Sem JS (ou se o notices.js falhar) a classe não existe → banners visíveis. */
.baly-js .woocommerce-message,
.baly-js .woocommerce-info,
.baly-js .woocommerce-error { display: none; }
/* Exceções — notices INJETADAS POR AJAX depois do load, que são inline de propósito
   (o notices.js não as converte; o cliente precisa lê-las junto do campo pra corrigir):
   .woocommerce-NoticeGroup = validação do checkout do Woo;
   #baly-coupon-msg = retorno do apply_coupon, mostrado acima do resumo.
   (Os erros do CARTÃO do Pagar.me não aparecem como caixa: o checkout.js os leva para os
   campos + toast — ver checkout-pagamento.css.) */
.baly-js .woocommerce-NoticeGroup .woocommerce-message,
.baly-js .woocommerce-NoticeGroup .woocommerce-info,
.baly-js .woocommerce-NoticeGroup .woocommerce-error,
.baly-js #baly-coupon-msg .woocommerce-message,
.baly-js #baly-coupon-msg .woocommerce-info,
.baly-js #baly-coupon-msg .woocommerce-error { display: block; }
/* Exceções — notices que carregam CONTEÚDO, não recado: os gateways de pagamento
   usam a .woocommerce-message como CAIXA do Pix/boleto (QR code + botão copiar +
   instruções). O notices.js as deixa inline e marca com .baly-notice--inline. */
.baly-js .baly-notice--inline,
.baly-js .co-pgto-area .woocommerce-message,
.baly-js .co-pgto-area .woocommerce-info,
.baly-js .co-pgto-area .woocommerce-error { display: block; }
/* Mesma exceção adiantada pro 1º paint (evita a caixa nascer oculta e "pular"
   quando o JS roda). Bloco separado de propósito: navegador sem :has() descarta
   a regra inteira, e a marcação do JS acima segue valendo como garantia. */
.baly-js .woocommerce-message:has( img, canvas, iframe, table, form, button, input ),
.baly-js .woocommerce-info:has( img, canvas, iframe, table, form, button, input ),
.baly-js .woocommerce-error:has( img, canvas, iframe, table, form, button, input ) { display: block; }
@media (prefers-reduced-motion: reduce) {
  .confirm-overlay, .confirm-box { transition: opacity .12s ease; }
  .confirm-box { transform: translate(-50%, -50%) !important; }
}