/*
 * Casco do tema elfvape: tokens D27 + topbar/header/chips/catnav/catbar/drawer/rodapé/toolbar/FAB/scroll-top/migalha.
 * Topo (header+chips) = MOCKUP do dono (mapa/mockup-home) — vence clone e protótipo.
 * Topbar do Pix (B51; era o chip de frete) e barra de CATEGORIAS = mockup do dono (mapa/mockup-header).
 * Toolbar/FAB/scroll-top/rodapé/catnav = gabarito (clone v1) medido ao vivo.
 * Correções de CONTROLE da regra v2 por cima: alvo ≥44px, input ≥16px no touch, 100dvh, safe-area.
 * Breakpoints da casa: 1023.98 / 767.98 / 479.98 (max-width).
 */

:root {
  --elf-pink: #FF5DA6;
  --elf-blue: #6671FF;
  --elf-blue-light: rgba(102, 113, 255, .1);
  --elf-dark: #212121;
  --elf-bg: #FFFFFF;
  --elf-bg-secondary: #F5F5F7;
  --elf-bg-tertiary: #FAFAFA;
  --elf-text: #212121;
  --elf-text-secondary: #666;
  --elf-text-tertiary: #666;       /* K23 (A60): era #999 — 2,48 no cinza do site e 2,85 no branco, abaixo dos 4,5 de leitura */
  --elf-border: #D2D2D7;
  --elf-border-light: #D2D2D7;     /* B29: era #E8E8ED — no fundo #EFEFF3 dava 1,04:1 e a linha sumia */
  --elf-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --elf-container: 1400px;
  --elf-radius: 10px;
  --elf-radius-pill: 9999px;
  --elf-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  --elf-shadow-hover: 0 4px 16px rgba(0, 0, 0, .1);
  --elf-grad: linear-gradient(90deg, #8224E3 0%, #D6336C 100%);
  --elf-whatsapp: #25D366;
  --elf-whatsapp-hover: #1DAE5A;
  /* Paleta D27: roxo = cor única de botão/destaque de ação; rosa escuro = preço Pix, desconto, frete */
  --elf-roxo: #8224E3;
  --elf-roxo-hover: #6E1DC2;
  --elf-roxo-suave: rgba(130, 36, 227, .08);
  --elf-rosa-escuro: #D6336C;
  --elf-rosa-escuro-hover: #C02861;
  --elf-verde-estoque: #166534;    /* K23 (A60): era #16A34A — 2,87 no cinza do site; o verde do selo "concluído" da conta dá 6,2 */
  --elf-roxo-topo: #1E0B36;
  --elf-cinza-topo: #EFEFF3;
  --elf-cinza-topo-borda: #E2E2EA;
  /* K27 (A93): a loja só tem o desenho claro (mockups do dono); sem isto o "escurecer sites" do Chrome
     escurecia tudo junto e o logo da marca, transparente, quase sumia no fundo escuro */
  color-scheme: only light;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  /* optional + preload (functions.php): a Inter chega antes da 1ª pintura ou fica pra próxima
     página; nunca troca no meio da leitura e empurra título e preço (A40) */
  font-display: optional;
  /* recorte (32 KB) do InterVariable.woff2 (352 KB, fora do tema: git show cc4f238:tema/elfvape/assets/fonts/InterVariable.woff2): é pré-carregado e cada KB dele pesa
     no LCP (B41). Eixo wght inteiro; opsz fixo em 14 = o desenho da Inter do Google Fonts do mockup do
     dono (só wght). Letras do latin-1 + os símbolos que o site usa (varredura do banco e das telas, B41);
     o resto cai na letra do sistema. Só os recursos que o navegador liga sozinho + o tnum (o ::marker da
     lista numerada usa tabular-nums; sem ele o número estreita e desalinha). Refazer com
     fonttools varLib.instancer InterVariable.woff2 opsz=14 -o InterVariable-opsz14.ttf
     pyftsubset InterVariable-opsz14.ttf --unicodes="<a lista abaixo>" --layout-features=calt,ccmp,kern,locl,mark,mkmk,liga,clig,rlig,rvrn,tnum --flavor=woff2 --output-file=InterVariable-latin.woff2 */
  unicode-range: U+0020-007E, U+00A0, U+00A9-00AB, U+00AE, U+00B0, U+00B7, U+00BA-00BB, U+00C0-00FF, U+03A9, U+200B, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2600, U+2605, U+26A0, U+2713;
}

/* o site inteiro assenta no mesmo cinza do topo (mockup do dono) */
body { font-family: var(--elf-font); color: var(--elf-text); background: var(--elf-cinza-topo); -webkit-font-smoothing: antialiased; }

.elf-container { max-width: var(--elf-container); margin: 0 auto; }
.elf-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.elf-icon svg { display: block; }
/* B48 (#74): ícone de categoria no degradê da marca, como na lifepod (os <linearGradient> estão no header.php);
   na bolinha roxa da home ele segue branco (currentColor) */
:is(.elf-catnav, .elf-404-atalhos) .elf-ico-traco { stroke: url(#elf-grad-ico); }
:is(.elf-catnav, .elf-404-atalhos) .elf-ico-cheio path { fill: url(#elf-grad-ico-bb); }
:is(.elf-catnav, .elf-404-atalhos) .elf-ico-cheio[stroke] path { stroke: url(#elf-grad-ico-bb); }
/* B54 (#80): na gaveta e no painel roxos, todos os ícones da lista no degradê clareado, sem quadradinho */
:is(.elf-catpainel, .elf-drawer-nav) svg[stroke="currentColor"] { stroke: url(#elf-grad-ico-claro); }
:is(.elf-catpainel, .elf-drawer-nav) .elf-ico-cheio path { fill: url(#elf-grad-ico-claro-bb); }
:is(.elf-catpainel, .elf-drawer-nav) .elf-ico-cheio[stroke] path { stroke: url(#elf-grad-ico-claro-bb); }   /* o do Pod Recarregável tem traço fino no original: o contorno dá o peso dos outros */
.elf-header a, .elf-catnav a, .elf-drawer a, .elf-footer a, .elf-toolbar a { color: inherit; text-decoration: none; }
.elf-drawer ul, .elf-footer ul { list-style: none; margin: 0; padding: 0; }
.elf-header img, .elf-drawer img, .elf-footer img { display: block; }

/* leitor de tela: só o foco revela (o skip-link) */
.elf-sr-only, .woocommerce-products-header__title {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
a.elf-sr-only:focus {
  left: 8px; top: 8px; width: auto; height: auto; z-index: 100300;
  background: #fff; color: var(--elf-text); padding: 10px 16px; border-radius: var(--elf-radius);
  box-shadow: var(--elf-shadow-hover); font-size: 0.875rem; font-weight: 600;
}

/* ═══ TOPO FIXO — topbar do chip + header viajam juntos, colados no alto ═══
   FIXED e não sticky: o header do 390 encolhe ao rolar (a busca recolhe) e, em sticky, a
   caixa dele continua ocupando lugar no fluxo — encolher empurraria a página inteira.
   Em fixed o espaço é devolvido pelo padding-top do body, que é CONSTANTE: o header
   encolhe, descobre mais tela, e nada se mexe (zero layout shift).
   As alturas abaixo saíram do mockup do dono medido a 3× (docs/b15-gabarito). */
:root {
  --elf-h-topbar: 40px;             /* faixa do Pix (390) */
  --elf-h-linha1: 61px;             /* do topo do header até o topo do campo de busca */
  /* só o que vem DEPOIS do y=61: campo de 44 + 10 de respiro. Os 8,5px de folga acima do
     campo já estão contados dentro dos 61 — somá-los de novo abria um vão morto de 8,5px
     entre o topo fixo e o conteúdo. */
  --elf-h-busca: 54px;
  --elf-h-admin: 0px;               /* barra do wp-admin, quando logado */
}
.elf-topo-fixo {
  position: fixed;
  top: var(--elf-h-admin);
  left: 0;
  right: 0;
  z-index: 100;
  /* B26: o CHÃO do topo. Sem ela o conteúdo desliza por baixo e encosta no header sem nada
     marcando o limite — o dono leu isso como "header solto". É sombra CONSTANTE de propósito:
     pendurá-la num estado de rolagem faria ela piscar toda vez que a busca recolhe e volta.
     Não usa var(--elf-shadow): aquele token é de card parado (0 1px 3px .06) e some sob um
     card branco passando por baixo. */
  box-shadow: 0 4px 14px rgba(0, 0, 0, .16);
}
/* K27 (A122): o z-index 100 daqui é o teto de tudo que mora no topo — com a lista de sugestões aberta o
   topo sobe acima da barra de baixo (350) e do WhatsApp (9999), senão eles cobriam a lista */
.elf-topo-fixo:has(.elf-sug:not([hidden])) { z-index: 10000; }
body {
  padding-top: calc(var(--elf-h-topbar) + var(--elf-h-linha1) + var(--elf-h-busca) + 1px + env(safe-area-inset-top, 0px));
}
/* Com o topo FIXO, tanto a âncora (#conteudo do skip-link, #elf-newsletter) quanto o
   elemento que acabou de receber foco pelo Tab parariam ESCONDIDOS atrás dele
   (WCAG 2.2, 2.4.11 "foco não obscurecido"). A folga vale pros dois. R12 (V180): no html e não no
   scroll-margin dos elementos — a rolagem do focus() e do campo inválido no WebKit ignora o scroll-margin.
   24 e não 12: no foco de campo o WebKit encosta na folga a LINHA do texto, 12 px abaixo da borda do campo. */
html { scroll-padding-top: calc(var(--elf-h-topbar) + var(--elf-h-linha1) + var(--elf-h-busca) + 24px); }
body.admin-bar { --elf-h-admin: 32px; }

/* ═══ HEADER (mockup: burger sempre visível, busca em caixa, ícones com badge roxo) ═══ */
.elf-header { background: var(--elf-cinza-topo); border-bottom: 1px solid var(--elf-cinza-topo-borda); }
.elf-header-inner {
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.elf-header .elf-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  border: none;
  border-radius: var(--elf-radius-pill);
  background: transparent;
  color: var(--elf-text);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.elf-header .elf-burger:hover { background: var(--elf-bg-secondary); }
.elf-logo { min-width: 0; min-height: 44px; display: flex; align-items: center; }
/* R13 (V33, V34): teto e não altura fixa — com zoom o logo encolhe inteiro, sem achatar nem empurrar o X */
.elf-logo img { max-height: 34px; width: auto; }
.elf-search-form { position: relative; flex: 1; min-width: 0; }
form.elf-search { position: relative; display: flex; width: 100%; margin: 0; }
form.elf-search input[type="search"] {
  width: 100%;
  height: 44px;
  padding: 0 44px;   /* R17: o texto começa depois do botão da lupa (44), senão o toque no começo do campo buscava */
  margin: 0;
  border: 1.5px solid var(--elf-border);
  border-radius: var(--elf-radius);
  background: var(--elf-bg-tertiary);
  font-size: 0.875rem;
  font-family: var(--elf-font);
  color: var(--elf-text);
  outline: none;
  box-shadow: none;
  appearance: none;
}
form.elf-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }   /* K27 (A07): o WebKit desenhava o dele ao lado do × da loja */
form.elf-search input[type="search"]:focus { border-color: var(--elf-roxo); background: var(--elf-bg); }
form.elf-search input[type="search"]:focus-visible { outline: 2px solid var(--elf-roxo); outline-offset: 1px; }   /* K23 (A59): o anel do Leve mais */
form.elf-search input[type="search"]::placeholder { color: var(--elf-text-tertiary); }
.elf-search .elf-search-icon {   /* R17 (V25): botão de buscar com alvo de 44; o padding põe a lupa onde ela era desenhada */
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 100%;
  padding: 0 0 0 16px;
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--elf-text-tertiary);
  z-index: 1;
}
.elf-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.elf-hicon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--elf-radius-pill);
  transition: background .15s;
}
.elf-hicon:hover { background: var(--elf-bg-secondary); }
.elf-hicon .elf-count {
  position: absolute;   /* R16 (V209): presa pelo canto de baixo à esquerda e altura pela letra — com letra grande cresce pra cima e pra direita, longe do ícone */
  bottom: 25px;
  left: 27px;
  min-width: 18px;
  min-height: 18px;
  line-height: 1.2;
  padding: 0 4px;
  background: var(--elf-roxo);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  border-radius: var(--elf-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══ ATALHOS DE CATEGORIA (404 e busca vazia): pílulas de 44px; no celular uma fileira que
   rola de lado, como os chips da home (contrato área 1) — a 2ª fileira cairia na barra de baixo (V92) ═══ */
.elf-404-atalhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.elf-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--elf-toque); padding: 0 14px;
  border: 1px solid var(--elf-border-light); border-radius: var(--elf-radius-pill); background: var(--elf-bg-tertiary);
  font-size: 0.8125rem; font-weight: 500; color: var(--elf-text); text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .elf-404-atalhos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-top: 16px; }
}

/* ═══ CATNAV (produto/listagem — só mobile, gabarito v1) ═══ */
.elf-catnav { display: none; background: var(--elf-bg); }
@media (max-width: 767.98px) {
  .elf-catnav {
    display: flex;
    height: 48px;
    overflow-x: auto;
    border-bottom: 1px solid var(--elf-border-light);
  }
  .elf-catnav .elf-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .elf-catnav .elf-container::-webkit-scrollbar { display: none; }
  .elf-catnav a {
    color: var(--elf-text);
    font-size: 0.75rem;
    font-weight: 500;
    min-width: max-content;
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4.8px;
    white-space: nowrap;
  }
  .elf-catnav a:first-child { padding-left: 4px; }
}

/* ═══ DRAWER MOBILE (contrato área 2; X e alvos corrigidos pra ≥44) ═══ */
.elf-overlay {
  position: fixed;
  inset: 0;
  z-index: 100200;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.elf-overlay.elf-open { opacity: 1; pointer-events: auto; }
.elf-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100201;
  width: 320px;
  max-width: 86vw;
  background: var(--elf-roxo-topo);   /* B54 (#80): o padrão roxo do B52/B53, proposta aprovada pelo dono (05/out) */
  color: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  /* K20: fechada, sai do Tab e do leitor de tela (visibility), só depois de terminar de deslizar;
     abre visível na hora, senão o foco no ✕ falha */
  visibility: hidden;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s .3s;
  box-shadow: 4px 0 24px rgba(0, 0, 0, .3);
  /* R13 (V30): saindo, não rouba o toque do ☰; (V14, V34) a gaveta rola inteira, sem janelinha */
  pointer-events: none;
  overflow-y: auto;
}
.elf-drawer.elf-open { transform: translateX(0); visibility: visible; transition-delay: 0s; pointer-events: auto; }
html.elf-drawer-aberto { overflow: hidden; }
html.elf-drawer-aberto .elf-fab { visibility: hidden; }
.elf-drawer :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }   /* o roxo da casa some no fundo escuro */
/* as sugestões da busca abrem num painel branco: texto e foco escuros, como antes (revisor B54) */
.elf-drawer .elf-sug { color: var(--elf-text); }
.elf-drawer .elf-sug :focus-visible { outline-color: var(--elf-roxo); }
.elf-drawer-header {
  flex-shrink: 0;   /* fiscal B54: com a gaveta rolando, o topo encolhia de 69 pra 58 */
  min-height: 58px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.elf-drawer-header img { filter: brightness(0) invert(1); }   /* o logo colorido some no roxo */
.elf-drawer .elf-drawer-close {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--elf-radius-pill);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.elf-drawer-search { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.elf-drawer-search form.elf-search input[type="search"] {
  height: 46px;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
}
.elf-drawer-search form.elf-search input[type="search"]:focus { border-color: #C084FC; background: rgba(255, 255, 255, .08); }
.elf-drawer-search form.elf-search input[type="search"]:focus-visible { outline-color: #fff; }
.elf-drawer-search form.elf-search input[type="search"]::placeholder { color: rgba(255, 255, 255, .62); }
.elf-drawer-search :is(.elf-search-icon, .elf-search-x) { color: rgba(255, 255, 255, .62); }
.elf-drawer-search .elf-search .elf-search-icon { padding-left: 15px; }   /* a lupa de 18 da proposta; o texto fica depois do alvo de 44 dela (R17) */
.elf-drawer-search .elf-search-icon svg { width: 18px; height: 18px; }
.elf-drawer-nav { flex: 1 0 auto; padding: 10px 0 14px; font-size: 0.9375rem; }   /* a linha do "Páginas" (inline-block) segue a letra do nav: 15, como na proposta (fiscal B54) */
.elf-drawer-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  font-weight: 600;
}
.elf-drawer-nav a:hover { background: rgba(255, 255, 255, .06); }
.elf-drawer-nav .elf-icon { width: 24px; height: 24px; }
.elf-drawer-label { flex: 1; }
/* B63 (#89): a seta rosa › das categorias (gaveta e painel do computador) saiu — prometia um 2º nível que não existe,
   e o item já leva à categoria */
/* B82 (#109): o 2º nível existe — a mesma seta rosa do B54 volta só na categoria com produtos no menu da produção, agora
   como botão da lista deles (casco.js); o link segue levando à categoria */
.elf-tem-sub { display: flex; flex-wrap: wrap; }
.elf-tem-sub > a { flex: 1; min-width: 0; }
.elf-sub-seta {
  flex: none;
  width: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (hover: hover) { .elf-sub-seta:hover { background: rgba(255, 255, 255, .06); } }   /* no toque o hover grudava na seta */
.elf-sub-seta::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid #E59BC0;
  border-bottom: 2px solid #E59BC0;
  transform: rotate(-45deg);
}
.elf-sub { display: none; flex-basis: 100%; }
.elf-sub-seta[aria-expanded="true"] + .elf-sub { display: block; }
/* no ☰ a lista desce embaixo da categoria (a seta vira pra baixo), com os nomes alinhados ao dela (16 + ícone 24 + vão 12) */
.elf-drawer-nav .elf-sub-seta[aria-expanded="true"]::after { transform: rotate(45deg); }
.elf-drawer-nav .elf-sub a { padding-left: 52px; }
.elf-drawer-badge {
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  font-size: 0.75rem;
  font-weight: 700;
}
/* B54: as Páginas uma embaixo da outra (dono, 05/out) — a gaveta rola inteira (V14 passa a rolar até elas) */
.elf-drawer-title + ul a { min-height: 48px; white-space: nowrap; }
.elf-drawer-divider { height: 1px; background: rgba(255, 255, 255, .12); margin: 10px 16px 16px; }
.elf-drawer-title {
  display: inline-block;
  margin: 0 16px 6px;
  padding-bottom: 6px;
  font-weight: 700;
  line-height: 1.3;
  background: var(--elf-grad) left bottom / 100% 2px no-repeat;
}
/* o "Rastrear seu Pedido" da lifepod: em destaque, na caixa de borda no degradê clareado (dono: linha grossa) */
.elf-drawer-nav a.elf-drawer-rastrear {
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  margin: 4px 16px 6px;
  padding: 0;
  border: 2.5px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  background: linear-gradient(var(--elf-roxo-topo), var(--elf-roxo-topo)) padding-box, linear-gradient(90deg, #C084FC, #F472B6) border-box;
}
.elf-drawer-rastrear .elf-drawer-label { flex: none; }
/* o pé da gaveta da lifepod: o ícone e o texto no verde do WhatsApp (9,2:1 no roxo) */
.elf-drawer-footer { padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid rgba(255, 255, 255, .12); }
.elf-drawer a.elf-drawer-whatsapp {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  color: #25D366;
  font-size: 0.875rem;
  font-weight: 700;
}
.elf-drawer a.elf-drawer-whatsapp:hover { background: rgba(255, 255, 255, .06); }

/* ═══ RODAPÉ — desde o B53 o gabarito é a proposta aprovada pelo dono (03/out): o padrão roxo do
   "Vantagens Elf Bar" do B52 (https://claude.ai/artifact/PEorSqgT9WfqysqQmLY5zM). A estrutura e os
   textos seguem os do B15 (docs/b15-gabarito/); as correções de CONTROLE da v2 (alvo de 44/56 na
   sanfona, campo com 16px pra matar o auto-zoom do iOS) vêm marcadas. ═══ */
.elf-footer {
  background: var(--elf-roxo-topo);   /* B53 (dono, 03/out): o padrão roxo do "Vantagens Elf Bar" (B52) no rodapé inteiro */
  color: rgba(255, 255, 255, .8);
  font-size: 0.9375rem;
  line-height: 1.5;   /* a entrelinha da proposta (com 1,6 os títulos dos quadros desalinhavam 2 px) */
  padding-top: 40px;
}
/* o trilho do rodapé é o do gabarito (24 no desktop, 16 no 390) */
.elf-footer .elf-container { padding-left: 24px; padding-right: 24px; }
.elf-footer h2, .elf-footer p { margin: 0; padding: 0; }
.elf-footer :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }   /* o roxo da casa some no fundo escuro */

/* ── newsletter: a caixa de borda em degradê das perguntas do B52 (ícone + chamada de um lado, formulário do outro) ── */
.elf-news-faixa { padding: 0 24px; }
.elf-footer .elf-news-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: calc(var(--elf-container) - 48px);   /* alinha com os quadros de baixo, que andam no trilho de 24 */
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(var(--elf-roxo-topo), var(--elf-roxo-topo)) padding-box, var(--elf-grad) border-box;
}
.elf-news-tit { display: inline-flex; align-items: center; gap: 12px; }
.elf-news-tit strong { color: #fff; }
.elf-news-ic svg { stroke-width: 1.75; }
.elf-news-ic {   /* o quadradinho em degradê dos cartões do B52 */
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--elf-roxo), var(--elf-rosa-escuro));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.elf-newsletter-form { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
form.elf-newsletter-form input[type="text"],
form.elf-newsletter-form input[type="email"] {
  width: 240px;
  height: 44px;
  padding: 0 14px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 0.9375rem;
  font-family: var(--elf-font);
  min-width: 0;
  outline: none;
  box-shadow: none;
}
form.elf-newsletter-form input:focus { border-color: #fff; }
form.elf-newsletter-form input:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
form.elf-newsletter-form input::placeholder { color: rgba(255, 255, 255, .62); }
form.elf-newsletter-form button {
  height: 44px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  padding: 0 26px;
  background: var(--elf-grad);   /* a pílula em degradê do "Assistir ao vídeo" */
  color: #fff;
  border: none;
  border-radius: var(--elf-radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: var(--elf-font);
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
}
form.elf-newsletter-form button:hover { filter: brightness(1.08); }
.elf-newsletter-msg { font-size: 0.8125rem; font-weight: 600; flex: 0 0 100%; outline: none; }   /* R34: recebe o foco só pro leitor de tela ler; não é botão, sem anel */
.elf-newsletter-msg.elf-ok { color: var(--elf-verde-estoque); }   /* R34 (V86): #1DAE5A dava 2,68 no lilás */
.elf-newsletter-msg.elf-erro { color: #991b1b; }   /* R34 (V86): o vermelho do selo "falhou" da conta; #ef4444 dava 3,48. O "Sem conexão" da conta (casco.js) usa esta classe no fundo claro */
.elf-footer .elf-newsletter-msg.elf-ok { color: #4ADE80; }     /* B53: no roxo escuro do rodapé o verde e o vermelho de cima sumiam (10,4 e 9,6:1 aqui) */
.elf-footer .elf-newsletter-msg.elf-erro { color: #FCA5A5; }
.elf-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; margin: 0; }

/* ── corpo: marca + Ajuda + Minha Conta + Contato/Selos, cada um num quadro translúcido (os cartões do B52) ── */
.elf-footer-corpo { padding-top: 24px; padding-bottom: 24px; } /* só o vertical: o lateral é do .elf-container */
.elf-footer-grid { display: grid; grid-template-columns: 1.35fr 1fr .8fr 1.2fr; gap: 16px; }
.elf-footer-sobre,
.elf-footer-col {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}
.elf-footer-sobre img { width: 150px; filter: brightness(0) invert(1); }   /* logo branco: o colorido some no roxo */
.elf-footer-sobre p { font-size: 0.875rem; line-height: 1.6; margin-top: 12px; }
.elf-footer-sobre img + p { margin-top: 14px; }
.elf-footer-col h2,
.elf-footer-col summary {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin-bottom: 12px;
}
/* K27 (A118): do tablet pra cima as colunas não fecham (casco.js), então o título não tem cara de botão (list-style) */
.elf-footer-col summary { line-height: 1.5; list-style: none; }   /* a linha do quadro, como na proposta: o título fica a 20 px do topo nos 3 quadros */
/* o título com o filete em degradê do "Vantagens Elf Bar" */
.elf-footer-col h2 { display: inline-block; padding-bottom: 6px; background: var(--elf-grad) left bottom / 100% 2px no-repeat; }
.elf-footer-col summary h2 { margin: 0; }   /* K32 (A176): o h2 dentro do summary; a margem é do summary */
.elf-footer-col summary::-webkit-details-marker { display: none; }
.elf-footer-col ul li { font-size: 0.875rem; color: rgba(255, 255, 255, .85); }
.elf-footer-col ul a,
.elf-footer-col ul li span { transition: color .15s; }
.elf-footer-col ul a { display: flex; align-items: center; min-height: 40px; }
.elf-footer-col ul a:hover { color: #fff; }
.elf-contato { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.elf-footer-col .elf-contato a,
.elf-footer-col .elf-contato li > span { display: flex; align-items: center; gap: 12px; min-height: 44px; color: rgba(255, 255, 255, .9); }
/* os ícones que já estavam aqui, no quadradinho em degradê dos cartões do B52 (.elf-footer-col na frente: o texto ao lado é branco 90%) */
.elf-footer-col .elf-contato .elf-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--elf-roxo), var(--elf-rosa-escuro));
}
.elf-contato .elf-icon svg { stroke-width: 1.75; }
/* o e-mail quebra no <wbr> depois do @ (anywhere quebraria guloso no meio da palavra); o break-word só entra quando
   nem assim cabe — letra a 200% num celular (tela de ~195 px), em que ele alargava todos os quadros (V171) */
.elf-footer-col .elf-contato a > span { min-width: 0; overflow-wrap: break-word; color: rgba(255, 255, 255, .9); }

.elf-footer .elf-selos { display: block; margin-top: 0; font-size: 0.9375rem; }   /* .elf-footer na frente: o produto.css tem um .elf-selos dele (flex, 12 px) */
.elf-footer .elf-selos h2 { margin-top: 20px; }   /* a margem no próprio título, como na proposta (no bloco, a linha empurrava 1,5 px) */
.elf-footer .elf-selos-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }   /* o produto.css tem um .elf-selos > div { gap: 7px } */
/* selos e bandeiras em fundo branco: no roxo escuro, os de fundo transparente sumiam.
   O `.woocommerce-page img { height:auto }` do Woo tem especificidade de classe+tag: daí o .elf-footer na frente */
.elf-footer .elf-selo-img { height: 44px; width: auto; padding: 7px 8px; border-radius: 8px; background: #fff; object-fit: contain; }
.elf-selo-badge {
  display: inline-flex;
  align-items: center;
  height: 44px;
  max-width: 100%;
  padding: 0 8px;
  background: #fff;
  border-radius: 8px;
}
.elf-selo-badge img { height: 30px; width: auto; object-fit: contain; }

/* ── linha de baixo: copyright + política + bandeiras oficiais ── */
/* K09: embaixo, o canto do WhatsApp e do voltar-ao-topo — no fim da página a linha fica acima
   deles (o WhatsApp acaba a 90 px do chão no computador) com 16 de respiro */
.elf-footer-bottom { padding: 0 0 106px; }
.elf-footer-bottom .elf-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 19px;   /* 1 px do filete + 18 de respiro, como a borda da proposta */
  /* o filete fica no trilho dos quadros (24 de cada lado), não na largura toda */
  background: linear-gradient(rgba(255, 255, 255, .12), rgba(255, 255, 255, .12)) center top / calc(100% - 48px) 1px no-repeat;
}
.elf-footer-bottom span.elf-copy { font-size: 0.8125rem; line-height: 1.25rem; color: rgba(255, 255, 255, .7); }
.elf-footer .elf-priv { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.elf-payments { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.elf-footer .elf-band { height: 32px; width: auto; padding: 3px; border-radius: 6px; background: #fff; }
.elf-band-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 3px;
  background: #fff;
  border-radius: 6px;
}
.elf-band-badge img { height: 26px; width: auto; }

/* ═══ TOOLBAR INFERIOR (gabarito medido: 55px, sombra 0 0 9px, badge azul; safe-area corrigida) ═══ */
.elf-toolbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 350;
  display: none;
  background: #fff;
  box-shadow: 0 0 9px rgba(0, 0, 0, .12);
  padding-bottom: var(--elf-safe-b);
}
.elf-toolbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 55px;
  color: #333;
}
.elf-toolbar-label { font-size: 0.6875rem; font-weight: 600; line-height: 1; white-space: nowrap; }   /* R16 (V35): "Minha Conta" numa linha com letra grande */
.elf-toolbar-cart { position: relative; display: inline-flex; }
.elf-toolbar-count {
  position: absolute;   /* R16 (V209): idem a do topo */
  bottom: 10px;
  left: 13px;
  min-width: 15px;
  min-height: 15px;
  line-height: 1.2;
  padding: 0 3px;
  background: var(--elf-blue);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 600;
  border-radius: var(--elf-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══ FAB WHATSAPP — círculo com degradê verde, logo branco maior e sombra
   esverdeada (gabarito: mockup-mobile-topo / mockup-desktop-topo) ═══ */
.elf-fab {
  position: fixed;
  left: 15px;
  /* 36 e não 40: é onde o mockup do dono põe o FAB (borda de baixo em y=864 no quadro de
     900). O gabarito NÃO alinha o FAB com o scroll-top — este fica em bottom 20 lá e aqui;
     na dúvida entre alinhar os dois e seguir o desenho, o desenho manda. */
  bottom: 36px;
  z-index: 9999;
  /* 54 e não 56: medido no mockup do dono em três arquivos independentes
     (mockup-mobile-topo, mockup-mobile-bolinhas, header2-topo), com o logo branco a 32 */
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* as DUAS cores oficiais da marca WhatsApp — o mesmo #25D366 do botão redondo dos
     cards, fechando no teal #128C7E */
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(18, 140, 126, .34);
  transition: opacity .3s;
}
/* 32 e não 33: o path do WhatsApp tem bbox 23,886×24 num viewBox de 24×24, ou seja
   ENCOSTA em cima e embaixo — a caixa do svg é o tamanho pintado, sem desconto. O
   gabarito mede 32,00 de glifo branco (medido nos 5 PNGs mobile e no desktop). */
.elf-fab svg { display: block; width: 32px; height: 32px; }

/* ═══ SCROLL-TOP (gabarito: círculo branco .9; mobile corrigido 40→44px) ═══ */
.elf-scrolltop {
  position: fixed;
  right: 12px;
  bottom: calc(67px + var(--elf-safe-b));
  z-index: 350;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: #333;
  box-shadow: 0 0 5px rgba(0, 0, 0, .17);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  cursor: pointer;
  padding: 0;
}
.elf-scrolltop.elf-visivel { opacity: 1; pointer-events: auto; }
/* K09: com um controle passando por baixo (casco.js), o botão some na hora e volta com fade;
   com o foco do teclado ele aparece mesmo assim */
.elf-fab.elf-fora, .elf-scrolltop.elf-fora { opacity: 0; pointer-events: none; transition: none; }
.elf-fab.elf-fora:focus-visible, .elf-scrolltop.elf-visivel.elf-fora:focus-visible { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  .elf-scrolltop { right: 20px; bottom: 20px; width: 50px; height: 50px; }
}

/* ═══ RESPONSIVO ═══ */
@media (max-width: 1023.98px) {
  .elf-toolbar { display: flex; }
  body { padding-bottom: calc(55px + var(--elf-safe-b)); }
  /* K29: toda rolagem até um elemento (foco do Tab, aviso do Woo, resposta do frete) para ACIMA da barra
     (WCAG C43) e do WhatsApp, que acaba a 117 do chão (R12, V202) */
  html { scroll-padding-bottom: calc(117px + var(--elf-safe-b)); }
  /* K29 (A113, A135–A137): campo em uso = teclado aberto; a barra, o WhatsApp e o voltar-ao-topo saem da
     frente dele. :read-write é só campo de digitar (não pega rádio, caixinha, select nem botão) */
  html:has(:read-write:focus) :is(.elf-toolbar, .elf-fab, .elf-scrolltop) { visibility: hidden; }
  /* 63 (mockup) e não 67: sobram 8px acima da barra fixa de 55, que é a folga do desenho */
  .elf-fab { bottom: calc(63px + var(--elf-safe-b)); }
  /* o WhatsApp acaba a 117 do chão e o body já guarda os 55 da barra: 62 + 16 de respiro */
  .elf-footer-bottom { padding-bottom: 78px; }
  /* o gabarito só desenha 1440 e 390; no tablet as 4 colunas do rodapé ficariam com 170px
     e "Trocas, Devoluções e Garantias" quebrava em três linhas — aqui elas viram 2×2 */
  .elf-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
  /* ═══ HEADER EM DUAS LINHAS (gabarito docs/b15-gabarito/header2-*.png,
     medido a 3×: topbar 40 · linha 1 até 61 · campo de 44 · 10 de respiro · borda).
     Quem quebra a segunda linha é o flex-wrap: o formulário continua sendo UM só, e o
     autocomplete do B5 não muda de dono. ═══ */
  /* gap de 10 e não 8: com 8 o burger caía no lugar certo (medido, idêntico ao gabarito)
     mas o logo ficava 2px à esquerda do desenho */
  .elf-header-inner { flex-wrap: wrap; gap: 0 10px; padding: 8.5px 12px 0; }
  .elf-header .elf-logo { flex: 1; }        /* come a sobra e joga os ícones pra direita */
  .elf-header .elf-logo img { max-height: 36px; }
  /* o gabarito desenha os dois glifos 1px abaixo do centro da linha. Desce por
     `position`, NÃO por margem: margem engordaria a linha 1 e empurraria a busca. */
  .elf-header .elf-hicon svg { width: 25px; height: 25px; position: relative; top: 1px; }  /* o alvo continua 44 */
  .elf-header .elf-search-form {
    order: 3;
    flex: 0 0 100%;
    margin: 8.5px 0 10px;
    height: 44px;
    overflow: hidden;
    position: static;   /* a lista de sugestões se posiciona pelo topo e não é cortada por este overflow */
    transition: height .22s ease, opacity .16s ease, margin .22s ease;
  }
  /* K23 (A59): o overflow do recolher cortava o anel do campo e sobravam 4 quinas roxas.
     O anel passa pro pai, que tem a caixa do campo e não é cortado pelo próprio overflow;
     o raio do campo faz o anel acompanhar a curva */
  .elf-header .elf-search-form:has(input:focus-visible) {
    border-radius: var(--elf-radius);
    outline: 2px solid var(--elf-roxo);
    outline-offset: 1px;
  }
  .elf-header form.elf-search input[type="search"]:focus-visible { outline: none; }
  /* rolando pra baixo a linha da busca recolhe; pra cima ela volta (padrão Mercado Livre).
     O padding-top do body não muda — nada do conteúdo se mexe. Em tela baixa o topo rola junto (K10)
     e a busca não recolhe: encolher o header ali puxaria a página */
  @media (min-height: 540.02px) {
    html.elf-busca-oculta .elf-header .elf-search-form { height: 0; opacity: 0; margin: 0; }
  }
  /* busca TAMBÉM no header do 390: o mockup do dono mostra o campo —
     vence a área 1 do contrato, que descrevia o clone sem campo. O drawer mantém o dele. */
  .elf-header form.elf-search input[type="search"] {
    font-size: 1rem;             /* CONTROLE v2: mata o auto-zoom do iOS (o mockup usa 12.5px) */
    padding-right: 30px;
  }
  .elf-header .elf-search .elf-search-icon { padding-left: 12px; }
  .elf-header .elf-actions { gap: 0; }
  /* ── rodapé no 390: newsletter empilhada; Ajuda e Minha Conta viram sanfona na caixa de borda em degradê (B53) ── */
  .elf-footer { padding-top: 28px; }
  .elf-footer .elf-container { padding-left: 16px; padding-right: 16px; }
  .elf-news-faixa { padding: 0 16px; }
  /* nowrap (K21, A148): coluna que quebra linha deixa a linha na largura do maior item (o campo de 20 letras) e
     não na da tela — com zoom ou letra grande o título, os campos e o Assinar passavam da borda */
  .elf-footer .elf-news-in { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; padding: 16px; }
  .elf-newsletter-form { flex-direction: column; flex-wrap: nowrap; }
  form.elf-newsletter-form input[type="text"],
  form.elf-newsletter-form input[type="email"] { width: auto; font-size: 1rem; } /* iOS: sem auto-zoom */
  .elf-footer-corpo { padding-top: 20px; padding-bottom: 20px; }
  .elf-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }   /* minmax: o quadro mais largo não estica os outros (V171) */
  .elf-footer-col:not(.elf-footer-col-fixa) {
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(var(--elf-roxo-topo), var(--elf-roxo-topo)) padding-box, var(--elf-grad) border-box;
  }
  /* CONTROLE v2: a linha inteira do summary é o alvo (56), com a seta rosa das perguntas do B52 na direita */
  .elf-footer-col summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    margin-bottom: 0;
    cursor: pointer;
  }
  .elf-footer-col summary h2 { padding: 0; background: none; }   /* na sanfona o título é o botão: sem o filete */
  .elf-footer-col summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 2px solid #E59BC0;
    border-bottom: 2px solid #E59BC0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s;
  }
  .elf-footer-col[open] summary::after { transform: translateY(2px) rotate(225deg); }
  .elf-footer-col:not(.elf-footer-col-fixa) ul { border-top: 1px solid rgba(255, 255, 255, .14); padding-bottom: 6px; }
  .elf-footer-col ul a { min-height: 44px; }
  .elf-footer-bottom .elf-container { flex-direction: column; justify-content: center; gap: 14px; text-align: center; background-size: calc(100% - 32px) 1px; }
  .elf-payments { justify-content: center; }
}
/* K22 (A03, A26, A35, A79): no dedo, link miúdo responde em 44×44 (WCAG 2.5.5, Apple). A área cresce
   por um ::after invisível centrado no link, sem mexer no desenho (o z-index põe a área por cima do logo
   da marca, que o pulso deixa com transform); a Política não quebra mais no meio (uma caixa só).
   No rodapé os links ficam um embaixo do outro: lá cada linha passa a ter 44 */
@media (pointer: coarse) {
  .elf-bread a, .elf-cep-link, .reset_variations, .elf-footer .elf-priv { position: relative; z-index: 1; }
  .elf-footer .elf-priv { display: inline-block; }
  .elf-bread a::after, .elf-cep-link::after, .reset_variations::after, .elf-footer .elf-priv::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .elf-footer-col ul a { min-height: 44px; }
  /* K27 (A70): no iPad também — campo com menos de 16 px faz o Safari dar zoom ao tocar */
  form.elf-search input[type="search"],
  form.elf-newsletter-form input[type="text"],
  form.elf-newsletter-form input[type="email"] { font-size: 1rem; }
}

/* ═══ AUTOCOMPLETE DA BUSCA — mora aqui porque o campo é do casco e vive em TODA
   página (header e drawer). Números do gabarito: painel branco, borda
   1px #E8E8ED, raio 10, sombra 0 4px 16px rgba(0,0,0,.1), respiro 6; item 275×87 com foto
   45×48 raio 8, título 13/500 com o termo em negrito, e o 21º item "Ver todos".
   Correções v2: a foto vem do arquivo de 150px (o gabarito mandava o de 700px pra desenhar
   45×48) e o X de limpar tem alvo de 44px (gabarito 30×24). ═══ */
/* o X só existe quando há texto no campo — regra de CSS, sem uma linha de JS */
.elf-search-x {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--elf-text-tertiary); cursor: pointer; z-index: 2;
}
form.elf-search input[type="search"]:placeholder-shown ~ .elf-search-x { display: none; }
form.elf-search input[type="search"]:placeholder-shown { padding-right: 12px; }   /* R17 (V211): sem X, a dica usa a vaga dele (no ☰ com zoom faltavam 4px pro 'Buscar') */

.elf-sug {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 500;
  max-height: min(60vh, 420px, var(--elf-sug-livre, 420px)); overflow-y: auto; padding: 6px; text-align: start;   /* a 404 centraliza o texto */
  overscroll-behavior: contain;   /* K27 (A119): no fim da lista o dedo e a roda param nela, sem descer a página */
  background: var(--elf-bg); border: 1px solid var(--elf-border-light);
  border-radius: var(--elf-radius); box-shadow: var(--elf-shadow-hover);
}
.elf-sug-item {
  display: flex; align-items: center; gap: 10px; min-height: 87px; padding: 8px;
  border-radius: 8px; color: inherit; text-decoration: none;
}
.elf-sug-item:hover, .elf-sug-item:focus-visible { background: var(--elf-bg-secondary); }
.elf-sug-item img { width: 45px; height: 48px; flex: 0 0 45px; object-fit: contain; border-radius: 8px; }
.elf-sug-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.elf-sug-titulo { font-size: 0.8125rem; font-weight: 500; line-height: 1.3; color: var(--elf-text); overflow-wrap: anywhere; }   /* "MC25000" com zoom */
.elf-sug-titulo strong { font-weight: 700; }
.elf-sug-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }   /* com zoom o Pix desce em vez de cortar */
.elf-sug-preco del { font-size: 0.75rem; color: var(--elf-text-tertiary); }
.elf-sug-pix { font-size: 0.8125rem; font-weight: 700; color: var(--elf-rosa-escuro); }
.elf-sug-cartao { font-size: 0.75rem; color: var(--elf-text-secondary); }
.elf-sug-vazio { margin: 0; padding: 16px 10px; font-size: 0.8125rem; color: var(--elf-text-secondary); text-align: center; }
.elf-sug-todos {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  margin-top: 4px; border-top: 1px solid var(--elf-border-light);
  font-size: 0.8125rem; font-weight: 600; color: var(--elf-roxo); text-decoration: none;
}

@media (max-width: 767.98px) {
  /* o painel sai do campo e se posiciona pelo topo (.elf-topo-fixo): top:auto mantém a posição
     vertical de origem (logo abaixo do campo) e ele rola junto com o topo na tela baixa (K10) */
  .elf-header .elf-sug {
    top: auto; left: 12px; right: 12px; margin-top: 6px;
  }
  /* No 390 o campo do header tem 125px: um X de 44px comia 35% da largura e o texto digitado
     passava por baixo dele. O desenho encolhe pra 28px e o ALVO de 44px vem do retângulo
     invisível em volta (mesmo truque da lupa da galeria). */
  .elf-header .elf-search-x { width: 28px; min-width: 28px; }
  .elf-header .elf-search-x::after { content: ""; position: absolute; inset: 0 0 0 -16px; }   /* pra esquerda: o form corta o resto */
}

/* opção em foco pelo teclado no autocomplete: o cinza do hover é 1,09:1, a borda é o que se vê */
.elf-sug-item.elf-sug-ativo, .elf-sug-todos.elf-sug-ativo { background: var(--elf-bg-secondary); outline: 2px solid var(--elf-roxo); outline-offset: -2px; }
/* no cinza o rosa dá 4,24:1; o escuro passa de 4,5 (o mesmo do K23) */
:is(.elf-sug-item:hover, .elf-sug-item:focus-visible, .elf-sug-ativo) .elf-sug-pix { color: var(--elf-rosa-escuro-hover); }

/* ═══════════════════════════════════════════════════════════════════════════
 * TOPO GLOBAL — faixa do Pix + barra de CATEGORIAS.
 * Gabarito: mapa/mockup-header/index.html.
 * As três faixas do topo dividem o MESMO trilho do mockup: sangria total com 32px de
 * lado no desktop (a topbar usa os 24px do mockup).
 * ═══════════════════════════════════════════════════════════════════════════ */

.elf-catbar a { text-decoration: none; }

/* ═══ TOPBAR DO PIX ═══ (B51, dono 03/out: no lugar do chip de frete, na mesma altura — nada abaixo se move) */
.elf-pix-topbar {
  background: var(--elf-grad);
  padding-top: env(safe-area-inset-top);   /* o roxo sobe até a hora/bateria do iPhone */
}
.elf-pix {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;   /* = --elf-h-topbar; com letra grande o texto quebra, a faixa cresce e o casco.js (V16) leva a var junto */
  margin: 0;
  padding: 0 12px;
  color: #fff;
  font-size: 0.8125rem;
  line-height: normal;
  text-align: center;
}
.elf-pix b { font-weight: 800; }
@media (min-width: 768px) { .elf-pix { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .elf-footer-col summary::after { transition: none; }
  .elf-header .elf-search-form { transition: none; }
}

.elf-catbar { display: none; }

/* R14: fita que rola de lado mostra que tem mais — esfumado + seta presos na ponta direita enquanto falta
   chegar ao fim (o casco.js marca data-mais); a margem negativa não deixa a seta esticar a rolagem */
.elf-rola[data-mais]::after,
.woocommerce-MyAccount-navigation ul[data-mais]::after {
  content: "›"; content: "›" / "";
  position: sticky;
  right: 0;
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 44px;
  margin-left: -44px;
  background: linear-gradient(to right, transparent, var(--elf-bg) 60%);
  color: var(--elf-roxo);
  font-size: 1.375rem;
  pointer-events: none;
}

@media (min-width: 768px) {
  /* desktop: topbar 44 + header 75 + 1 de borda = os 120 do mockup (a barra CATEGORIAS
     fica FORA do bloco fixo e rola pra longe, como no mockup-desktop-rolado) */
  :root { --elf-h-topbar: 44px; --elf-h-linha1: 75px; --elf-h-busca: 0px; }
  /* V36: na tela larga o logo e o carrinho alinham com a borda do conteúdo (respiro 32 aqui, 12 lá) */
  .elf-header-inner { max-width: calc(var(--elf-container) + 40px); height: 75px; padding: 0 32px; gap: 34px; }
  /* o mockup marca POSIÇÃO da busca (620px centrados); o componente em si é o do B3.
     São TRÊS margens automáticas repartindo a sobra do trilho (esquerda e direita da busca
     + esquerda das ações) — com duas, a busca escorrega 68px pra direita. */
  .elf-header .elf-search-form { max-width: 620px; margin: 0 auto; }
  .elf-header .elf-actions { margin-left: auto; }
  .elf-header .elf-burger { display: none; }       /* no desktop quem abre o menu é a barra CATEGORIAS */
  .elf-header .elf-logo img { max-height: 46px; }

  /* ═══ BARRA DE CATEGORIAS (desktop) ═══ */
  .elf-catbar {
    display: block;
    background: var(--elf-bg);
    border-bottom: 1px solid #E8E8EE;
  }
  .elf-catbar-inner {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 47px;          /* + 1px da borda de baixo = os 48 do mockup */
    padding: 0 32px;
    max-width: calc(var(--elf-container) + 40px);   /* V36: alinha com o conteúdo, como o topo */
    margin: 0 auto;
    position: relative;                /* o painel acompanha o botão */
  }
  .elf-catbar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--elf-font);
    font-weight: 800;
    font-size: 0.84375rem;
    letter-spacing: .3px;
    color: var(--elf-roxo);
    cursor: pointer;
    flex-shrink: 0;
  }
  .elf-catbar-burg { display: inline-flex; flex-direction: column; gap: 3px; }
  .elf-catbar-burg i { width: 17px; height: 2.4px; background: var(--elf-roxo); border-radius: 2px; }
  .elf-catbar-btn svg { display: block; transition: transform .18s; }
  .elf-catbar-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  /* véu invisível sob o painel (z 90): o toque fora cai no botão e só fecha, sem abrir o card de baixo (V17) */
  .elf-catbar-btn[aria-expanded="true"]::before { content: ""; position: fixed; inset: 0; z-index: 89; cursor: default; }

  .elf-catbar-links {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
    /* K27 (A05): abaixo de 1180 os 8 atalhos não cabem — a fileira rola de lado (dedo, trackpad, Tab),
       como a fita do celular, em vez de cortar o fim */
    overflow-x: auto;
    scrollbar-width: none;
  }
  .elf-catbar-links::-webkit-scrollbar { display: none; }
  .elf-catbar-links[data-mais]::after { margin-left: -70px; }   /* a seta + o vão de 26 */
  .elf-catbar-links a {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: .3px;
    color: #333;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 44px;
  }
  .elf-catbar-links a:hover { color: var(--elf-roxo); }

  /* B54 (#80): o painel no padrão roxo, como a gaveta */
  .elf-catpainel {
    position: absolute;
    top: 48px;
    left: 32px;
    width: 290px;
    background: var(--elf-roxo-topo);
    border-radius: 0 0 16px 16px;
    box-shadow: 0 14px 30px rgba(30, 11, 54, .35);
    padding: 8px 0;
    z-index: 90;
  }
  .elf-catpainel :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .elf-catpainel a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 18px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
  }
  .elf-catpainel a:hover { background: rgba(255, 255, 255, .06); }
  .elf-catpainel .elf-icon { width: 24px; }
  .elf-catpainel a.elf-catpainel-todas {
    min-height: 49px;
    color: #E59BC0;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, .12);
    margin-top: 6px;
  }
  /* B82 (#109): os produtos da categoria numa 2ª coluna do mesmo painel, à direita, do topo até o pé dele */
  .elf-catpainel .elf-sub {
    position: absolute;
    top: 0;
    left: 100%;
    width: 290px;
    min-height: 100%;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--elf-roxo-topo);
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0 0 16px 0;
    box-shadow: 0 14px 30px rgba(30, 11, 54, .35);
  }
  /* o mouse abre a da linha onde está (e só ela); no toque não: o 1º toque abriria a lista em vez de levar à categoria.
     Com o foco no painel quem manda é o teclado (a seta): o mouse parado em cima não esconde a lista aberta por ela */
  @media (hover: hover) {
    .elf-catpainel:not(:focus-within):hover .elf-sub { display: none; }
    .elf-catpainel:not(:focus-within) .elf-tem-sub:hover > .elf-sub { display: block; }
    .elf-catpainel .elf-tem-sub:hover > :is(a, .elf-sub-seta) { background: rgba(255, 255, 255, .06); }   /* a linha inteira, e acesa enquanto o mouse anda na coluna dela */
  }
}

/* K10 + D15 (V38): tela baixa (celular deitado, zoom de 150–200%): o topo fixo de 120–156 px, as categorias
   e a barra de 55 comiam até 79% da altura. Aqui o topo volta pro fluxo e sai rolando com a página, numa faixa
   só (a roxa do frete fica), e as categorias e a barra de baixo saem: carrinho e conta seguem nos ícones do
   topo, as categorias no ☰. No computador (1024+) nada muda. Mora depois do 768+ pra vencer pela ordem */
@media (max-width: 1023.98px) and (max-height: 540px) {
  .elf-topo-fixo { position: relative; top: 0; }
  body { padding-top: 0; padding-bottom: 0; }
  html { scroll-padding-top: 12px; }
  .elf-catnav, .elf-catbar, .elf-toolbar { display: none; }
  .elf-header .elf-burger { display: inline-flex; }
  /* sem a barra os botões descem: o WhatsApp acaba a 70 do chão, dentro dos 78 de folga do rodapé */
  .elf-fab, .elf-scrolltop { bottom: calc(16px + var(--elf-safe-b)); }
  /* abaixo de 768 a busca sobe pra linha do logo: 40 do frete + 57 (com zoom no celular em pé, abaixo de 480, não cabe e fica em 2) */
  @media (min-width: 480px) and (max-width: 767.98px) {
    .elf-header-inner { flex-wrap: nowrap; padding: 6px 12px; }
    .elf-header .elf-logo { flex: none; }
    .elf-header .elf-search-form { order: 0; flex: 1; margin: 0; }
  }
}

/* a barra do wp-admin no celular tem 46px (e não 32) e só fica fixa acima de 782px */
@media (max-width: 782px) {
  body.admin-bar { --elf-h-admin: 46px; }
}

/* ═══ MIGALHA (mockup: 12px, delimitador ›, atual escuro; no 390 o atual some) — vive em toda tela;
   na barra da listagem (loop.css) e na conta (conta.css) ela ganha roupa própria por cima ═══ */
.elf-bread { font-size: 0.75rem; color: var(--elf-text-tertiary); padding: 14px 0 0; }
.elf-bread a { color: var(--elf-text-tertiary); text-decoration: none; }
.elf-bread a:hover { color: var(--elf-roxo); }
.elf-bread .elf-bread-sep { margin: 0 5px; }
.elf-bread .elf-bread-atual { color: var(--elf-text); font-weight: 500; }
@media (max-width: 767.98px) {
  .elf-bread.elf-bread-corta .elf-bread-fim { display: none; }
}
@media (min-width: 1024px) {
  .elf-bread { padding: 16px 0 0; }
}