/* ==========================================================================
   Villani Linhas — header, navegação, busca e gaveta do carrinho
   ========================================================================== */

/* ==========================================================================
   Faixa de anúncio
   ========================================================================== */

/* O Kadence nomeia a linha superior como "site-top-header-wrap", não
   "header-top-row" — o seletor errado deixava a faixa transparente e ela
   simplesmente desaparecia sobre o fundo branco. */
#masthead .site-top-header-wrap,
#masthead .site-top-header-wrap .site-header-row-container-inner,
#mobile-header .site-top-header-wrap,
#mobile-header .site-top-header-wrap .site-header-row-container-inner {
  background: var(--vl-ink);
}
#masthead .site-top-header-wrap,
#masthead .site-top-header-wrap a,
#masthead .site-top-header-wrap .header-html,
#mobile-header .site-top-header-wrap,
#mobile-header .site-top-header-wrap a,
#mobile-header .site-top-header-wrap .header-html {
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  letter-spacing: .01em;
}
#masthead .site-top-header-wrap .header-html p,
#mobile-header .site-top-header-wrap .header-html p { margin: 0; }
#masthead .site-top-header-wrap strong,
#mobile-header .site-top-header-wrap strong { color: #fff; font-weight: 600; }
#masthead .site-top-header-wrap .site-header-row-container-inner > .site-container { border-bottom: 0; }

/* ==========================================================================
   Letreiro da faixa de topo
   A frase é longa demais para caber parada numa faixa de 38px — no celular ela
   quebrava em duas linhas e estourava a barra. Rolando, cabe em qualquer
   largura e ainda chama o olho para a condição de frete.
   ========================================================================== */

.vl-letreiro {
  width: 100%;
  max-width: none;
  overflow: hidden;
}
.vl-letreiro__trilha {
  display: flex;
  width: max-content;
  animation: vl-letreiro-desliza 34s linear infinite;
}
.vl-letreiro__texto {
  padding-right: clamp(40px, 6vw, 90px);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11.5px;
}

/* A trilha tem duas cópias do texto; deslocar metade dela deixa a segunda
   exatamente onde a primeira começou, então a emenda não aparece. */
@keyframes vl-letreiro-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Quem pediu menos movimento no sistema operacional lê a faixa parada. */
@media (prefers-reduced-motion: reduce) {
  .vl-letreiro__trilha { animation: none; }
  .vl-letreiro { overflow-x: auto; }
}

/* A faixa atravessa a tela inteira: sem isto o container do tema a corta nos
   1320px e o letreiro ganha começo e fim visíveis. */
#masthead .site-top-header-wrap .site-container,
#mobile-header .site-top-header-wrap .site-container {
  max-width: none;
  padding-inline: 0;
}
#masthead .site-top-header-wrap .header-html,
#mobile-header .site-top-header-wrap .header-html {
  width: 100%;
}

/* ==========================================================================
   Linha principal: busca | logo | ações
   O logo carrega o nome da marca desenhado — centralizado, ele vira o eixo
   do header em vez de disputar espaço com o menu.
   ========================================================================== */

#masthead .site-header-row-container-inner { background: var(--vl-branco); }

#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right {
  flex: 1 1 0;
}
#masthead .site-header-main-section-right { justify-content: flex-end; }
#masthead .site-header-main-section-center { flex: 0 0 auto; }

.site-branding img.custom-logo,
.site-header-item-logo img {
  max-height: 78px;
  width: auto;
  transition: max-height var(--t-normal);
}

/* Header fixo encolhe o logo: mais produto visível durante a navegação. */
#masthead.item-is-fixed .site-branding img.custom-logo,
.site-header-sticky .site-branding img.custom-logo { max-height: 54px; }

#masthead .site-header-row-container-inner > .site-container {
  border-bottom: 1px solid var(--vl-linha);
}

/* ==========================================================================
   Navegação
   ========================================================================== */

.main-navigation .primary-menu-container > ul > li > a {
  font-family: var(--fonte-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vl-ink-70);
  padding: 0 clamp(10px, 1.1vw, 18px);
  transition: color var(--t-rapida);
}
.main-navigation .primary-menu-container > ul > li > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
  color: var(--vl-ink);
}

/* Indicador do menu: uma linha só, fina e contínua, com uma curva — um S
   deitado. A primeira versão era tracejada e ondulava várias vezes; de perto
   parecia sujeira sob a palavra. Aqui a curva estica junto com o item, e
   `non-scaling-stroke` impede que o traço engrosse ao esticar. */
.main-navigation .primary-menu-container > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 6px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0.5 4.4C25 0.7 75 5.3 99.5 1.6' fill='none' stroke='%23b5714f' stroke-width='1' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 6px;
  background-position: center;
  transform: translateX(-50%);
  transition: width var(--t-normal);
}

.main-navigation .primary-menu-container > ul > li > a:hover::after,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a::after {
  width: calc(100% - 2 * clamp(10px, 1.1vw, 18px));
}

/* ==========================================================================
   Mega menu
   O Kadence gratuito não traz um; este é construído sobre o submenu comum,
   então continua funcionando pelo painel de menus do WordPress.
   ========================================================================== */

.vl-mega {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(10px);
  width: min(1180px, calc(100vw - 48px));
  padding: var(--e-7);
  background: var(--vl-branco);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-elevada);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-normal), transform var(--t-normal), visibility var(--t-normal);
  z-index: var(--z-header);
}
.vl-mega.is-aberto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.vl-mega__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e-5);
}

.vl-mega__item {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
  overflow: hidden;
}
.vl-mega__figura {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vl-areia);
  margin-bottom: var(--e-3);
}
.vl-mega__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-lenta);
}
.vl-mega__item:hover .vl-mega__figura img { transform: scale(1.05); }

.vl-mega__nome {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 21px;
  color: var(--vl-ink);
  line-height: 1.2;
}
.vl-mega__ver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--vl-ink-50);
  transition: color var(--t-rapida), gap var(--t-rapida);
}
.vl-mega__item:hover .vl-mega__ver { color: var(--vl-terra); gap: 9px; }

.vl-mega__rodape {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-4);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--vl-linha);
  font-size: 14px;
}

/* ==========================================================================
   Busca
   ========================================================================== */

.vl-busca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: min(300px, 100%);
  padding: 0 6px 0 16px;
  border-radius: var(--r-pill);
  background: var(--vl-areia);
  transition: background var(--t-rapida), box-shadow var(--t-rapida), width var(--t-normal);
}
.vl-busca:focus-within {
  background: var(--vl-branco);
  box-shadow: 0 0 0 1px var(--vl-linha), var(--sombra-suave);
}
.vl-busca input[type="search"] {
  flex: 1;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 14px;
  color: var(--vl-ink);
}
.vl-busca input[type="search"]:focus { box-shadow: none; outline: none; }
.vl-busca input::placeholder { color: var(--vl-ink-30); }
.vl-busca button { flex: 0 0 auto; }

/* Sugestões */
.vl-busca-sugestoes {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(420px, calc(100vw - 32px));
  padding: var(--e-3);
  background: var(--vl-branco);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-elevada);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t-rapida), transform var(--t-rapida), visibility var(--t-rapida);
  z-index: var(--z-header);
  max-height: 60vh;
  overflow-y: auto;
}
.vl-busca-sugestoes.is-aberto { opacity: 1; visibility: visible; transform: translateY(0); }

.vl-sugestao {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--vl-ink);
  transition: background var(--t-rapida);
}
.vl-sugestao:hover, .vl-sugestao:focus-visible { background: var(--vl-areia); }
.vl-sugestao img {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: var(--r-xs);
  flex: 0 0 auto;
  background: var(--vl-areia);
}
.vl-sugestao__nome { font-size: 14px; line-height: 1.3; }
.vl-sugestao__preco { font-size: 13px; color: var(--vl-ink-50); }
.vl-busca-sugestoes__vazio,
.vl-busca-sugestoes__carregando {
  padding: var(--e-4);
  font-size: 14px;
  color: var(--vl-ink-50);
  text-align: center;
}

/* ==========================================================================
   Ações do header
   ========================================================================== */

.vl-acoes { display: flex; align-items: center; gap: var(--e-1); }

.vl-acao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--vl-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-rapida);
}
/* `flex: 0 0 auto` e `box-sizing` aqui não são zelo: o botão do carrinho é um
   <button>, herda o padding do agente de usuário, o conteúdo passa dos 46px e
   o ícone — único item encolhível — era espremido até largura zero. O ícone
   sumia do header e só o de conta aparecia. */
.vl-acao { box-sizing: border-box; padding: 0; }
.vl-acao svg { flex: 0 0 auto; width: 21px; height: 21px; stroke-width: 1.5; }

.vl-acao__contador {
  position: absolute;
  top: 6px; right: 5px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--vl-terra);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.vl-acao__contador[hidden] { display: none; }
.vl-acao__contador.is-pulsando { animation: vl-pulso .42s var(--t-rapida); }
@keyframes vl-pulso {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.32); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Gaveta do carrinho
   Painel lateral em vez de ida imediata para /carrinho: o cliente confere o
   que acabou de adicionar e volta a comprar sem perder o lugar.
   ========================================================================== */

.vl-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: min(430px, 100vw);
  height: 100dvh;
  background: var(--vl-cru);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  box-shadow: var(--sombra-drawer);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-lenta), visibility var(--t-lenta);
}
.vl-drawer.is-aberto { transform: translateX(0); visibility: visible; }

.vl-drawer__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-5) var(--e-4);
  border-bottom: 1px solid var(--vl-linha);
}
.vl-drawer__titulo {
  font-family: var(--fonte-titulo);
  font-size: 25px;
  margin: 0;
}

.vl-drawer__corpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--e-4) var(--e-5);
  overscroll-behavior: contain;   /* a rolagem não vaza para a página */
}

.vl-drawer__item {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: var(--e-3);
  align-items: start;
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--vl-linha);
}
.vl-drawer__item:last-child { border-bottom: 0; }
.vl-drawer__item img {
  width: 76px; height: 92px;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--vl-areia);
}
.vl-drawer__nome {
  font-size: 14px;
  font-weight: 500;
  color: var(--vl-ink);
  line-height: 1.35;
  text-decoration: none;
  display: block;
}
.vl-drawer__variacao { font-size: 12px; color: var(--vl-ink-50); margin-top: 3px; }
.vl-drawer__preco { font-size: 14px; font-weight: 600; color: var(--vl-ink); white-space: nowrap; }

.vl-qtd {
  display: inline-flex;
  align-items: center;
  margin-top: var(--e-3);
  border: 1px solid var(--vl-linha);
  border-radius: var(--r-pill);
  background: var(--vl-branco);
  overflow: hidden;
}
.vl-qtd button {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: var(--vl-ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-rapida);
}
.vl-qtd button:hover { background: var(--vl-areia); }
.vl-qtd__valor { min-width: 26px; text-align: center; font-size: 14px; font-weight: 500; }

.vl-drawer__remover {
  border: 0;
  background: transparent;
  color: var(--vl-ink-30);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: var(--e-2);
}
.vl-drawer__remover:hover { color: var(--vl-erro); }

.vl-drawer__rodape {
  padding: var(--e-5);
  border-top: 1px solid var(--vl-linha);
  background: var(--vl-branco);
  border-radius: var(--r-xl) 0 0 0;
}
.vl-drawer__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--e-2);
  font-size: 14px;
  color: var(--vl-ink-50);
}
.vl-drawer__total {
  font-size: 19px;
  font-weight: 600;
  color: var(--vl-ink);
}
.vl-drawer__obs { font-size: 12px; color: var(--vl-ink-30); margin: var(--e-2) 0 var(--e-4); }
.vl-drawer__rodape .vl-btn { margin-bottom: var(--e-3); }
.vl-drawer__ver {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--vl-ink-50);
  text-decoration: underline;
}

.vl-drawer__vazio { text-align: center; padding: var(--e-9) var(--e-4); }
.vl-drawer__vazio svg { color: var(--vl-ink-30); margin-bottom: var(--e-4); }
.vl-drawer__vazio p { color: var(--vl-ink-50); margin-bottom: var(--e-5); }

.vl-drawer.is-carregando .vl-drawer__corpo { opacity: .5; pointer-events: none; }

/* ==========================================================================
   Celular
   ========================================================================== */

@media (max-width: 1024px) {
  .vl-busca { width: 100%; }
  .vl-mega { display: none; }   /* no toque, o menu lateral do tema assume */
}

@media (max-width: 767px) {
  .site-branding img.custom-logo,
  .site-header-item-logo img { max-height: 54px; }

  .vl-drawer { width: 100vw; border-radius: 0; }
  .vl-drawer__rodape { border-radius: 0; }
  .vl-acao { width: 44px; height: 44px; }
}

/* Alvos de toque da gaveta: "Remover" tinha 19px de altura e "Ver carrinho"
   22px, pequenos demais para o polegar. */
.vl-drawer__remover {
  padding: 7px 0;
  min-height: 34px;
}
.vl-drawer__ver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* O botão do menu no celular tinha 31px de altura — um pixel abaixo do que já
   é o mínimo desconfortável. */
@media (max-width: 1024px) {
  .menu-toggle-open.drawer-toggle {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==========================================================================
   Header redesenhado
   Fundo creme com duas formas orgânicas quase imperceptíveis, ações com nome
   ao lado do ícone e o menu numa barra branca arredondada, solta sobre o
   creme. A referência do cliente pede exatamente esse arranjo.
   ========================================================================== */

#masthead .site-main-header-wrap,
#masthead .site-bottom-header-wrap,
#masthead .site-main-header-wrap .site-header-row-container-inner,
#masthead .site-bottom-header-wrap .site-header-row-container-inner {
  background: var(--vl-cru);
  border-bottom: 0;
}

/* As manchas do fundo são gradientes, não elementos.

   A primeira versão usava dois pseudo-elementos com border-radius orgânico e
   `overflow: hidden` no wrapper para contê-los — e isso criava um contexto de
   empilhamento que prendia o painel de sugestões da busca atrás do conteúdo, além
   de recortá-lo. Gradiente não vaza da caixa, então nada precisa ser recortado e
   a busca volta a abrir por cima da página. */
#masthead .site-main-header-wrap {
  background-image:
    radial-gradient(42% 78% at 2% 6%, var(--vl-areia) 0%, transparent 62%),
    radial-gradient(34% 66% at 99% 96%, var(--vl-areia) 0%, transparent 58%);
  background-repeat: no-repeat;
}

/* ==========================================================================
   Ações: ícone com o nome ao lado
   ========================================================================== */

.vl-acoes {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
}

.vl-acao {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: auto;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--vl-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-rapida), color var(--t-rapida);
}

.vl-acao__icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.vl-acao__icone svg { flex: 0 0 auto; }

.vl-acao__rotulo {
  font-family: var(--fonte-ui);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* O contador acompanha o ícone, não a caixa inteira do botão. */
.vl-acao__contador {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--vl-terra);
  color: var(--vl-branco);
  font-family: var(--fonte-ui);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.vl-acao__contador[hidden] { display: none; }

/* Em tela média o nome sai e sobra o ícone, que continua legível sozinho. */
@media (max-width: 1150px) {
  .vl-acao__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .vl-acao { width: 44px; justify-content: center; padding: 0; }
}

/* ==========================================================================
   Menu numa barra branca
   ========================================================================== */

#masthead .site-bottom-header-wrap .site-header-row-container-inner > .site-container {
  border-bottom: 0;
  padding-bottom: clamp(10px, 1.2vw, 16px);
}

.main-navigation .primary-menu-container > ul {
  display: inline-flex;
  align-items: center;
  padding: 5px clamp(10px, 1.2vw, 18px);
  border-radius: var(--r-pill);
  background: var(--vl-branco);
  box-shadow: var(--sombra-suave);
}

.main-navigation .primary-menu-container > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* A seta gira quando o painel abre — o único aviso de que ali há mais coisa. */
.vl-mega-seta {
  display: inline-flex;
  color: var(--vl-ink-30);
  transition: transform var(--t-rapida), color var(--t-rapida);
}
.vl-mega-seta svg { flex: 0 0 auto; }
.main-navigation .primary-menu-container > ul > li > a[aria-expanded="true"] .vl-mega-seta {
  transform: rotate(180deg);
  color: var(--vl-terra);
}
.main-navigation .primary-menu-container > ul > li > a:hover .vl-mega-seta { color: var(--vl-terra); }

/* A costura fica presa à barra branca, não à borda da tela. */
.main-navigation .primary-menu-container > ul > li > a::after { bottom: 2px; }

/* O painel do mega menu desce a partir da barra, com folga para ela respirar. */
.vl-mega { top: calc(100% + 8px); }

/* Uma regra para os dois: "Minha conta" é <a> e "Carrinho" é <button>, e cada
   um vinha com um padrão diferente do navegador e do tema — um ganhava fundo
   e sombra no ponteiro, o outro não. O estado é definido aqui, igual para
   ambos, e o foco só aparece para quem navega pelo teclado. */
.vl-acao,
.vl-acao:link,
.vl-acao:visited {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
  color: var(--vl-ink);
}
.vl-acao:hover,
.vl-acao:focus-visible {
  background: var(--vl-branco);
  color: var(--vl-terra-forte);
}
.vl-acao:focus { outline: none; }
.vl-acao:focus-visible { outline: 2px solid var(--vl-sage); outline-offset: 3px; }
.vl-acao:active { background: var(--vl-areia-forte); }

/* A linha sob a barra de busca vinha do `.site-container` de cada fileira do
   header. Com o menu já desenhado numa barra própria, ela só cortava o creme
   ao meio. */
#masthead .site-header-row-container-inner > .site-container,
#mobile-header .site-header-row-container-inner > .site-container {
  border-bottom: 0;
}

/* A barra do menu deixa a foto do hero aparecer por trás. A borda branca
   fecha o contorno da pílula: sem ela, sobre uma foto clara a barra perdia o
   limite e parecia derreter no fundo. */
.main-navigation .primary-menu-container > ul {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--vl-branco);
}

/* O painel abria 24px abaixo da barra: parecia solto, sem relação com o item
   clicado. Oito pixels bastam para separar sem desligar um do outro. */
.vl-mega { top: calc(100% + 8px); }

/* A sombra faz parte do estado de ponteiro das duas ações — a mesma regra
   vale para o <a> e para o <button>. Espalhada e clara: marca o elemento sem
   desenhar um contorno duro em volta dele. */
.vl-acao:hover,
.vl-acao:focus-visible {
  box-shadow: 0 6px 24px -6px rgba(45, 37, 28, .18), 0 2px 8px -2px rgba(45, 37, 28, .08);
}

/* "Minha conta" é <a> e "Carrinho" é <button>: o botão não herda a tipografia
   do documento, então vinha com a fonte e o tamanho padrão do navegador. Os
   dois rótulos passam a ser desenhados pela mesma regra, propriedade por
   propriedade — não basta herdar a família. */
.vl-acao,
.vl-acao__rotulo {
  font-family: var(--fonte-ui);
  font-size: 13.5px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
}

/* As sugestões da busca ficavam atrás do conteúdo: o painel herdava a camada
   do header, e o hero e a barra do menu são desenhados depois dele. */
.vl-busca-wrap { position: relative; z-index: calc(var(--z-header) + 5); }
.vl-busca-sugestoes { z-index: calc(var(--z-header) + 6); }

/* Nome e preço encostavam um no outro na lista de sugestões: eram duas caixas
   coladas, sem nada entre elas. */
.vl-busca-sugestoes a {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.vl-sugestao__nome {
  flex: 1;
  min-width: 0;
  padding-right: var(--e-3);
}
.vl-sugestao__preco {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--vl-ink-50);
}

/* ==========================================================================
   Menu lateral do celular
   ========================================================================== */

/* A busca sobe para o topo: é o primeiro gesto de quem já sabe o que quer,
   e ficava depois de seis categorias. */
#mobile-drawer .drawer-content { display: flex; flex-direction: column; }
/* O Kadence envolve cada elemento da gaveta num `.site-header-item` genérico;
   quem precisa subir é o invólucro, não a busca em si. */
#mobile-drawer .drawer-content .site-header-item:has(.vl-busca-wrap) {
  order: -1;
  margin-bottom: var(--e-5);
}
#mobile-drawer .vl-busca { width: 100%; }

#mobile-drawer .drawer-inner { background: var(--vl-cru); }

/* Linhas do menu com área de toque cheia e divisória sutil. */
#mobile-drawer .mobile-navigation li a {
  display: block;
  padding-block: var(--e-4);
  border-bottom: 1px solid var(--vl-linha);
}
#mobile-drawer .mobile-navigation li:last-child a { border-bottom: 0; }

/* Atalhos de conta e atendimento, no pé da gaveta. */
.vl-atalhos-menu {
  display: grid;
  gap: var(--e-2);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--vl-linha);
}
.vl-atalho-menu {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 48px;
  padding: 0 var(--e-4);
  border-radius: var(--r-md);
  background: var(--vl-areia);
  color: var(--vl-ink);
  font-family: var(--fonte-ui);
  font-size: 15px;
  text-decoration: none;
}
.vl-atalho-menu svg { flex: 0 0 auto; color: var(--vl-terra); }
.vl-atalho-menu:hover { background: var(--vl-terra-suave); color: var(--vl-terra-forte); }