/* ==========================================================================
   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; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .16) transparent; scrollbar-gutter: stable; }

/* ---------- 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; display: block; }

/* 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 FLUTUANTE (home) — transparente sobre o hero → sólido ao rolar
   Só vale com .cabecalho--flutuante (a base .cabecalho continua sólida nas
   demais páginas). JS `setupHeaderScroll` adiciona .is-stuck após rolar.
   ========================================================================== */
.cabecalho--flutuante {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
/* MESMA altura das outras páginas (--altura-header) → logo/nav/ícones ficam na
   MESMA posição ao navegar (sem "pulo"). Só o fundo/cor muda (transparente ↔ amarelo). */
.cabecalho--flutuante .cabecalho__inner {
  height: var(--altura-header);
  padding-block: 0;
}
.cabecalho--flutuante.is-stuck {
  background: var(--baly-amarelo);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  box-shadow: var(--sombra-sm);
}

/* Logo BRANCA sobre o hero (transparente) → PRETA quando o header vira amarelo (rolado).
   SEM pílula (só a nav tem a pílula de vidro). Crossfade por opacity (--claro é absolute
   sobre o --escuro, mesmo tamanho → SEM layout shift ao rolar). */
.cabecalho--flutuante .cabecalho__logo-img--claro { opacity: 1; }
.cabecalho--flutuante .cabecalho__logo-img--escuro { opacity: 0; }
.cabecalho--flutuante.is-stuck .cabecalho__logo-img--claro { opacity: 0; }
.cabecalho--flutuante.is-stuck .cabecalho__logo-img--escuro { opacity: 1; }
/* sombra sutil na logo branca p/ leitura sobre banners claros (igual aos ícones) */
.cabecalho--flutuante:not(.is-stuck) .cabecalho__logo-img--claro { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .45)); }

/* No topo (transparente): leve sombra só nos ÍCONES brancos p/ leitura sobre o hero.
   A logo é preta → sem sombra (não fazia sentido). */
.cabecalho--flutuante:not(.is-stuck) .icone-btn svg {
  filter: drop-shadow(0 1px 5px rgba(0,0,0,.40));
}

/* Ícones: brancos no topo, pretos quando sólido */
.cabecalho--flutuante .icone-btn { color: #fff; }
.cabecalho--flutuante .icone-btn:hover { background: rgba(255,255,255,.20); }
.cabecalho--flutuante.is-stuck .icone-btn { color: var(--baly-preto); }
.cabecalho--flutuante.is-stuck .icone-btn:hover { background: rgba(0, 0, 0, .08); }
.cabecalho--flutuante .cart-badge { border-color: transparent; }
.cabecalho--flutuante.is-stuck .cart-badge { background: var(--baly-branco); border-color: var(--baly-branco); }

/* ==========================================================================
   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 */

@media (min-width: 992px) {
  /* Nav: a <ul> segue FULL-HEIGHT (área de hover do mega menu). Usa a MESMA medida da
     nav sólida (gap base, links SEM padding horizontal) → os itens ficam na MESMA
     posição ao navegar Home ↔ outras páginas (sem shift). A pílula é uma cápsula slim
     (::before) que EXTRAVASA -14px p/ dar respiro sem empurrar os itens. */
  .cabecalho--flutuante .cabecalho__nav > ul {
    position: relative; isolation: isolate;
  }
  .cabecalho--flutuante .cabecalho__nav > ul::before {
    content: ""; position: absolute; left: -14px; right: -14px; top: 50%; transform: translateY(-50%);
    height: 46px; border-radius: var(--raio-pill);
    background: var(--glass-bg);
    border: var(--glass-borda);
    box-shadow: var(--glass-sombra);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    z-index: -1; transition: opacity var(--t);
  }
  /* SÓ os links de TOPO ficam brancos — os do mega NÃO (senão somem no painel branco) */
  .cabecalho--flutuante .cabecalho__nav > ul > li > a {
    color: #fff;
    border-bottom-color: transparent;
  }

  /* Sólido ao rolar: some a cápsula; links pretos direto no amarelo */
  .cabecalho--flutuante.is-stuck .cabecalho__nav > ul::before { opacity: 0; }
  .cabecalho--flutuante.is-stuck .cabecalho__nav > ul > li > a { color: var(--baly-preto); }

  /* Painel do mega: desce da BASE DA CÁPSULA quando flutuante (cápsula = 46px
     centrada no header de 84px → base ≈ 50% + 23px). */
  .cabecalho--flutuante .mega { top: calc(50% + 24px); }
  /* ...e da BASE DO HEADER quando SÓLIDO (ao rolar) → encaixa na barra amarela. */
  .cabecalho--flutuante.is-stuck .mega { top: calc(100% + 1px); }
  /* ponte invisível p/ o hover não cair no vão entre a cápsula e o painel */
  .cabecalho--flutuante .tem-mega > .mega::before {
    content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px;
  }
}

/* ==========================================================================
   VARIANTE A — MEGA em VIDRO ESCURO (combina com a cápsula flutuante)
   Aplicada com .cabecalho--mega-glass. Mantém o filete amarelo do topo.
   ========================================================================== */
.cabecalho--mega-glass .mega {
  background: var(--glass-bg);
  border: var(--glass-borda);              /* borda de luz uniforme (sem o filete amarelo, p/ casar com a cápsula) */
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sombra), 0 26px 50px -18px rgba(0, 0, 0, .45);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);   /* cresta o texto sobre o hero movimentado */
}
/* descrições mais claras p/ legibilidade no vidro fumê (eram cinza médio) */
.cabecalho--mega-glass .mega-item span { color: rgba(255, 255, 255, .72); }
.cabecalho--mega-glass .mega__link { color: rgba(255, 255, 255, .92); }
.cabecalho--mega-glass .mega__titulo { color: rgba(255, 255, 255, .55); }
.cabecalho--mega-glass .mega__link { color: rgba(255, 255, 255, .82); }
.cabecalho--mega-glass .mega__link:hover { color: #fff; text-decoration-color: var(--baly-amarelo); }
.cabecalho--mega-glass .mega__link small { color: rgba(255, 255, 255, .45); }
.cabecalho--mega-glass .mega__link--forte { color: #fff; }
.cabecalho--mega-glass .mega-item:hover { background: rgba(255, 255, 255, .08); }
.cabecalho--mega-glass .mega-item strong { color: #fff; }
.cabecalho--mega-glass .mega-item span { color: rgba(255, 255, 255, .58); }
.cabecalho--mega-glass .mega-item span::before { color: rgba(255, 255, 255, .40); }

/* ==========================================================================
   VARIANTE B — BARRA SÓLIDA ao abrir o menu (mega branco encaixa · ref #2)
   "Modo sólido" = rolou a página (.is-stuck) OU abriu um menu (hover/focus
   num item de topo). Usa :has() (suportado nos browsers atuais).
   ========================================================================== */
.cabecalho--mega-solido.is-stuck,
.cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
.cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within) {
  background: var(--baly-amarelo);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  box-shadow: var(--sombra-sm);
}
:is(.cabecalho--mega-solido.is-stuck,
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .cabecalho__logo-img--claro { opacity: 0; }
:is(.cabecalho--mega-solido.is-stuck,
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .cabecalho__logo-img--escuro { opacity: 1; }
:is(.cabecalho--mega-solido.is-stuck,
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .cabecalho__logo img,
:is(.cabecalho--mega-solido.is-stuck,
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .icone-btn svg { filter: none; }
:is(.cabecalho--mega-solido.is-stuck,
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .icone-btn { color: var(--baly-preto); }
:is(.cabecalho--mega-solido.is-stuck,
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
    .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .cart-badge { background: var(--baly-branco); border-color: var(--baly-branco); }
@media (min-width: 992px) {
  :is(.cabecalho--mega-solido.is-stuck,
      .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
      .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .cabecalho__nav > ul {
    background: transparent;   /* cápsula some: fica a cor do header (links direto sobre o fundo sólido) */
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :is(.cabecalho--mega-solido.is-stuck,
      .cabecalho--mega-solido:has(.cabecalho__nav > ul:hover),
      .cabecalho--mega-solido:has(.cabecalho__nav > ul:focus-within)) .cabecalho__nav > ul > li > a {
    color: var(--baly-preto);
  }
}
/* mega branco encaixa rente à BASE do header (não na base do <li>, que fica ~13px
   acima da borda do header → senão o painel/filete sobem pra dentro do cabeçalho) */
.cabecalho--mega-solido .mega { top: calc(100% + 13px); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.rodape {
  background: var(--baly-amarelo);
  color: rgba(0, 0, 0, .78);
  padding-block: var(--sp-8) var(--sp-6);
  font-size: var(--fs-sm);
}
.rodape__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
.rodape__logo img { height: 30px; margin-bottom: var(--sp-4); filter: brightness(0); }   /* logo branca → preta no amarelo */
.rodape__sobre { max-width: 38ch; line-height: 1.6; color: rgba(0, 0, 0, .72); }
.rodape h4 {
  color: var(--baly-preto);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--peso-heavy);
  margin-bottom: var(--sp-4);
}
.rodape__links a { display: block; padding-block: 0.35rem; transition: color var(--t-rapida); }
.rodape__links a:hover { color: var(--baly-preto); text-decoration: underline; text-underline-offset: 3px; }

.rodape__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.rodape__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--raio-pill);
  background: var(--baly-preto);          /* círculo preto + ícone branco no amarelo */
  color: #fff;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.rodape__social a:hover { background: var(--baly-branco); color: var(--baly-preto); }
.rodape__social svg { width: 20px; height: 20px; }

.rodape__base {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(0, 0, 0, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: flex-start;
  color: rgba(0, 0, 0, .65);
  font-size: var(--fs-xs);
}

/* info (esq): copyright + crédito da agência */
.rodape__base-info { display: flex; flex-direction: column; gap: 6px; }
.rodape__credito { font-size: var(--fs-xs); color: rgba(0, 0, 0, .65); }
.rodape__credito a { color: var(--baly-preto); font-weight: var(--peso-bold); transition: opacity var(--t-rapida); }
.rodape__credito a:hover { color: var(--baly-preto); opacity: .7; }
/* crédito com a LOGO da Ajuda Ecommerce (branca → preta no amarelo) */
.rodape__credito-logo { display: inline-flex; align-items: center; vertical-align: middle; }
.rodape__credito-logo img { height: 25px; width: auto; display: block; filter: brightness(0); transition: opacity var(--t-rapida); }
.rodape__credito-logo:hover img { opacity: .75; }

/* fim (dir): selos de segurança + pagamentos */
.rodape__base-end { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

/* badges de segurança discretas (chips pequenos, contorno) */
.rodape__seg { display: flex; gap: 8px; flex-wrap: wrap; }
.badge-seg {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--baly-branco);          /* chips brancos no amarelo */
  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 */

.rodape__pagamentos { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
/* 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; }

@media (min-width: 768px) {
  .rodape__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-7); }
  .rodape__base-end { align-items: flex-end; }
}

/* ==========================================================================
   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; }

.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);
}
.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 mobile ----
   Itens = linhas com seta à direita (indica "abre subcategorias num slideout").
   Mock estático: o clique NÃO expande (a navegação por subpainel não foi implementada). */
.menu-mobile__item,
.menu-mobile__link {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  font-weight: var(--peso-heavy); font-size: var(--fs-base);
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--cor-texto); cursor: pointer;
  border-bottom: 1px solid var(--cinza-100);
  transition: background var(--t-rapida);
}
.menu-mobile__item:hover,
.menu-mobile__link:hover { background: var(--cinza-50); }
.menu-mobile__item .chev { width: 18px; height: 18px; flex: none; color: var(--cinza-400); transition: transform var(--t-rapida); }
.menu-mobile__item:hover .chev { transform: translateX(3px); color: var(--baly-preto); }

.menu-mobile__extra { display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-5); border-top: 8px solid var(--cinza-50); }
.menu-mobile__extra a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px 0;
  font-size: var(--fs-sm); font-weight: var(--peso-semibold); color: var(--cinza-700);
}
.menu-mobile__extra a:hover { color: var(--baly-preto); }
.menu-mobile__extra svg { width: 20px; height: 20px; flex: none; color: var(--cinza-500); }

/* ---- Menu mobile: SUBMENUS em slideout (cada nível desliza da direita) ---- */
.drawer--menu .drawer__corpo { position: relative; overflow: hidden; padding: 0; }
.menu-mobile__nivel {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--cinza-300) transparent;
  background: var(--baly-branco);
  transition: transform var(--t);
}
.menu-mobile__nivel--sub { transform: translateX(100%); z-index: 2; }
.menu-mobile__nivel--l3 { z-index: 3; }   /* nível 3 fica acima do nível 2 ao empilhar */
/* sombra SÓ no painel aberto (senão os 25 painéis off-screen empilham sombra → faixa cinza) */
.menu-mobile__nivel--sub.is-aberto { transform: translateX(0); box-shadow: -10px 0 28px rgba(0, 0, 0, .07); }
/* descrição / nota / placeholder dentro de um painel */
.menu-mobile__desc { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); color: var(--cinza-500); font-style: italic; border-bottom: 1px solid var(--cinza-100); }
.menu-mobile__nota { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-xs); color: var(--cinza-500); }
.menu-mobile__placeholder { padding: var(--sp-5); font-size: var(--fs-sm); color: var(--cinza-400); font-style: italic; }
/* produto com botão "também em zero" */
.menu-mobile__prod { display: flex; align-items: stretch; border-bottom: 1px solid var(--cinza-100); }
.menu-mobile__prod .menu-mobile__sublink { flex: 1; border-bottom: 0; }
.menu-mobile__zero-btn {
  align-self: center; margin-right: var(--sp-4);
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 10px; font-weight: var(--peso-heavy); text-transform: uppercase; letter-spacing: .03em;
  color: var(--baly-preto); background: var(--baly-amarelo);
  padding: 4px 9px; border-radius: var(--raio-pill);
  transition: background var(--t-rapida);
}
.menu-mobile__zero-btn:hover { background: var(--baly-amarelo-escuro); }
.menu-mobile__sublink small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--cinza-400); font-weight: var(--peso-regular); text-transform: none; letter-spacing: 0; }
.menu-mobile__voltar {
  width: 100%; text-align: left;
  display: flex; align-items: center; gap: 6px;
  padding: var(--sp-3) var(--sp-5);
  font-weight: var(--peso-bold); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--cor-texto-suave); cursor: pointer;
  background: var(--cinza-50);
  border-bottom: 1px solid var(--cinza-100);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.menu-mobile__voltar:hover { background: var(--cinza-100); color: var(--baly-preto); }
.menu-mobile__voltar svg { width: 15px; height: 15px; flex: none; }
.menu-mobile__sublink {
  display: block; padding: var(--sp-4) var(--sp-5);
  font-weight: var(--peso-semibold); font-size: var(--fs-sm);
  color: var(--cinza-800);
  border-bottom: 1px solid var(--cinza-100);
  transition: background var(--t-rapida);
}
.menu-mobile__sublink:hover { background: var(--cinza-50); }
/* "Ver tudo em X" — leva à página da categoria-pai (no mobile o pai só abria o submenu) */
.menu-mobile__sublink--tudo {
  display: flex; align-items: center; gap: .4rem;
  font-weight: var(--peso-heavy); color: var(--baly-preto);
  text-transform: uppercase; letter-spacing: .03em; font-size: var(--fs-xs);
}
.menu-mobile__sublink--tudo::after {
  content: ""; width: 14px; height: 14px; flex: none;
  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.4' 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: reduce) { .menu-mobile__nivel { transition: none; } }

/* ---- 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; } }

.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 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-6); text-align: center; color: var(--cinza-500); }
.sidecart__vazio[hidden] { display: none; }
.sidecart__vazio svg { width: 56px; height: 56px; color: var(--cinza-300); }
.sidecart__vazio p { font-weight: var(--peso-bold); }

.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" 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); }

/* CTA do carrinho vazio: sem a sombra amarela */
.sidecart__vazio .sidecart__vazio-cta { box-shadow: none !important; }

/* 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; }

/* 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; }
.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; }

/* Aviso de carrinho vazio: ancorado no TOPO do sidecart (não centralizado). */
.sidecart__vazio { justify-content: flex-start; padding-top: var(--sp-8); }

/* ---- 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 — modal de escolha de formato (a partir do botão dos cards)
   Centralizado no desktop, bottom-sheet no mobile. Global (qualquer página).
   ========================================================================== */
.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; }
.baly-qa {
  position: fixed; z-index: 120;
  left: 50%; top: 50%;
  width: min(520px, calc(100vw - 2 * var(--gutter)));
  background: var(--baly-branco); border-radius: var(--raio-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden; transform: translate(-50%, -46%) scale(.97);
  transition: opacity var(--t), visibility var(--t), transform var(--t);
}
.baly-qa.aberto { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.baly-qa__fechar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: none; background: none; cursor: pointer; color: var(--cinza-500); border-radius: var(--raio-sm);
  transition: background var(--t-rapida), color var(--t-rapida);
}
.baly-qa__fechar:hover { background: var(--cinza-100); color: var(--baly-preto); }
.baly-qa__fechar svg { width: 20px; height: 20px; }
/* Layout em GRID: mobile = imagem pequena ao lado do nome + opt/acao abaixo;
   desktop = imagem GRANDE à esquerda (spanning) + detalhes à direita. */
.baly-qa__corpo {
  padding: var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "img head" "opt opt" "acao acao";
  column-gap: var(--sp-4); row-gap: var(--sp-5);
  align-items: start;
}
.baly-qa__img { grid-area: img; }
.baly-qa__head { grid-area: head; align-self: center; }
.baly-qa__opt { grid-area: opt; }
.baly-qa__acao { grid-area: acao; }
/* o conteúdo (após o loading) entra com fade suave, não "seco" */
@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 { grid-column: 1 / -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); }

/* imagem do produto (mobile: pequena ao lado do nome; desktop: grande à esquerda) */
.baly-qa__img {
  width: 104px; height: 124px; border-radius: var(--raio);
  background: var(--cinza-50); overflow: hidden; padding: 8px;
}
.baly-qa__img img { width: 100%; height: 100%; object-fit: contain; }
.baly-qa__head { min-width: 0; }
.baly-qa__nome { font-size: var(--fs-md); font-weight: var(--peso-heavy); line-height: 1.2; padding-right: 40px; }
.baly-qa__meta { display: block; font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-top: 2px; }
.baly-qa__preco-row { display: flex; align-items: baseline; gap: 6px; margin-top: var(--sp-2); }
.baly-qa__preco-row .agora { font-size: var(--fs-lg); font-weight: var(--peso-black); }
.baly-qa .card-produto__cartao { display: block; font-size: var(--fs-xs); color: var(--cor-texto-suave); }

/* formato (espaçamento pelo grid-gap; sem margin-top) */
/* label discreta (igual à da PDP: sem caixa-alta/tracking) p/ não competir com o CTA */
.baly-qa__label {
  display: block; font-size: var(--fs-sm); font-weight: var(--peso-bold);
  color: var(--cor-texto-suave); margin-bottom: var(--sp-2);
}
.baly-qa__fmts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.baly-qa__fmt {
  font: inherit; font-size: var(--fs-sm); font-weight: var(--peso-bold);
  padding: 9px 16px; min-height: 40px;
  border: 1.5px solid var(--cinza-300); border-radius: 10px; background: #fff;
  color: var(--cor-texto); cursor: pointer; transition: border-color var(--t-rapida), background var(--t-rapida), color var(--t-rapida);
}
.baly-qa__fmt:hover { border-color: var(--baly-preto); }
.baly-qa__fmt.is-ativo { background: var(--baly-preto); border-color: var(--baly-preto); color: var(--baly-branco); }

/* ação: qty + adicionar — maiores na vertical p/ converter (.card-produto__add força
   flex:none/width:100%/height:44 e .qty base é 30px → sobrescrevo c/ +especificidade) */
.baly-qa__acao { display: flex; gap: var(--sp-3); align-items: stretch; }
.baly-qa__acao .qty { flex: none; }
/* só a ALTURA/área aumenta — fonte fica no tamanho padrão (a altura já dá presença de CTA) */
.baly-qa__acao .qty button { width: 38px; height: 54px; }
.baly-qa__acao .qty span { min-width: 22px; }
.baly-qa__acao .baly-qa__add { flex: 1 1 0; width: auto; min-width: 0; height: 54px; }

/* DESKTOP: 2 colunas — imagem GRANDE à esquerda (spanning) + detalhes à direita. */
@media (min-width: 561px) {
  .baly-qa { width: min(680px, calc(100vw - 2 * var(--gutter))); }
  .baly-qa__corpo {
    grid-template-columns: 240px 1fr;
    grid-template-areas: "img head" "img opt" "img acao";
    column-gap: var(--sp-6);
    align-content: start;
  }
  /* img ABSOLUTE (não infla o span de 3 linhas) → o box acompanha a altura do
     conteúdo à direita, com a lata contida (object-fit). */
  .baly-qa__img {
    width: 240px; align-self: stretch; min-height: 300px;
    position: relative; overflow: hidden; padding: 0;
  }
  .baly-qa__img img {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%; object-fit: contain;
    padding: var(--sp-4); box-sizing: border-box;
  }
  .baly-qa__head { align-self: start; }
  .baly-qa__nome { font-size: var(--fs-lg); }
}

@media (max-width: 560px) {
  /* bottom-sheet: cola embaixo, ocupa a largura, sobe ao abrir */
  .baly-qa {
    left: 0; right: 0; top: auto; bottom: 0; width: 100%;
    border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    transform: translateY(100%);
  }
  .baly-qa.aberto { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .baly-qa, .baly-qa-overlay { transition: opacity var(--t-rapida); }
  .baly-qa__corpo.is-carregado { 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); }

/* ---- 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);
}
.baly-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.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; }
@media (prefers-reduced-motion: reduce) {
  .confirm-overlay, .confirm-box { transition: opacity .12s ease; }
  .confirm-box { transform: translate(-50%, -50%) !important; }
}