/* Draive · Header / Navbar */

.dv-header {
  position: sticky;
  top: 0;
  z-index: var(--dv-z-header);
  background: var(--dv-cor-fundo);
  border-bottom: var(--dv-borda);
}

/* Barra principal: mobile first
   [menu] [logo] .................. [usuário] [lupa]
   [filial ............] [carrinho ..............]
   A lupa abre a busca em tela cheia (#dv-modal-busca). */
.dv-header__barra {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "menu logo . usuario lupa"
    "contexto contexto contexto contexto contexto";
  align-items: center;
  gap: var(--dv-esp-3) var(--dv-esp-2);  /* folga vertical para o contador do carrinho */
  padding-block: var(--dv-esp-2) var(--dv-esp-3);
}
.dv-header__hamburguer { grid-area: menu; }
.dv-header__logo {
  grid-area: logo;
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 var(--dv-esp-3);
  border: 2px solid var(--dv-cor-logo);
  border-radius: var(--dv-raio-md);
  color: var(--dv-cor-logo);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-decoration: none;
}
.dv-header__busca { grid-area: busca; }
.dv-header__barra .dv-header__busca { display: none; }
/* No mobile as ações viram itens da grade: usuário e lupa na 1ª linha, filial + carrinho na 2ª */
.dv-header__acoes { display: contents; }
.dv-header__usuario { grid-area: usuario; }
.dv-header__abrir-busca { grid-area: lupa; }
.dv-header__contexto { grid-area: contexto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dv-esp-2); }
.dv-header__contexto .dv-contexto { max-width: none; min-width: 0; }

/* Busca */
.dv-busca { position: relative; display: flex; }
.dv-busca__input { padding-right: 2.75rem; border-radius: var(--dv-raio-pill); }
/* Sugestões da busca (autocomplete.js) abaixo do campo */
.dv-busca .dv-autocomplete__lista { z-index: 30; }
.dv-busca__btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border-radius: var(--dv-raio-pill); height: calc(var(--dv-altura-controle) - 4px); width: calc(var(--dv-altura-controle) - 4px); }

/* Botões de contexto (filial e carrinho) */
.dv-contexto {
  display: inline-flex;
  align-items: center;
  gap: var(--dv-esp-2);
  min-height: var(--dv-altura-controle);
  max-width: 15rem;
  padding: var(--dv-esp-1) var(--dv-esp-3);
  border: var(--dv-borda);
  border-radius: var(--dv-raio-md);
  background: var(--dv-cor-fundo);
  text-align: left;
}
.dv-contexto:hover { background: var(--dv-cor-superficie); }

/* Botão da conta e lupa (mobile): mesma borda dos botões de contexto (filial e carrinho) */
.dv-header__usuario, .dv-header__abrir-busca { flex: none; align-self: stretch; width: auto; aspect-ratio: 1; border: var(--dv-borda); border-radius: var(--dv-raio-md); background: var(--dv-cor-fundo); }
.dv-contexto__textos { display: grid; min-width: 0; line-height: 1.2; }
/* Divisória vertical entre ícone e textos, na altura toda do botão */
.dv-contexto { align-items: stretch; padding-block: 0; }
.dv-contexto > svg, .dv-carrinho-btn__icone { align-self: center; }
.dv-carrinho-btn__icone { display: flex; margin-right: 10px; }  /* reserva o espaço do contador, que sai do ícone pela direita */
.dv-contexto__textos { align-content: center; padding: var(--dv-esp-1) 0 var(--dv-esp-1) var(--dv-esp-2); border-left: var(--dv-borda); }
.dv-contexto__rotulo { font-size: var(--dv-texto-xs); color: var(--dv-cor-texto-suave); }
.dv-contexto__valor { overflow: hidden; font-size: var(--dv-texto-sm); font-weight: var(--dv-peso-medio); text-overflow: ellipsis; white-space: nowrap; }

.dv-carrinho-btn { position: relative; }
.dv-carrinho-btn__icone { position: relative; }
.dv-carrinho-btn__badge {
  position: absolute;
  top: -19px; right: -12px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: var(--dv-raio-pill);
  background: var(--dv-cor-acento);
  color: var(--dv-cor-acento-texto);
  font-size: 0.6875rem;
  font-weight: var(--dv-peso-forte);
  line-height: 1.25rem;
  text-align: center;
}
.dv-carrinho-btn__badge:empty { display: none; }

/* Navegação secundária */
.dv-header__nav { border-top: var(--dv-borda); display: none; }
.dv-nav { display: flex; align-items: stretch; gap: var(--dv-esp-1); min-height: 2.75rem; }
.dv-nav__lista { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--dv-esp-1); }
.dv-nav__lista > li { display: flex; }
.dv-nav__catalogo, .dv-nav__divisor { align-self: center; }
.dv-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--dv-esp-3);
  border-radius: var(--dv-raio-md);
  font-size: var(--dv-texto-sm);
  text-decoration: none;
}
/* Indicador do item atual: 2px sobre a linha inferior do header (bottom: -1px cobre a borda) */
.dv-nav__link[aria-current="page"] { font-weight: var(--dv-peso-medio); }
.dv-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto var(--dv-esp-3) -1px;
  height: 2px;
  background: var(--dv-cor-acento);
}
.dv-nav__divisor { width: 1px; height: 1.25rem; margin-inline: var(--dv-esp-2); background: var(--dv-cor-borda); }
/* Carrossel de categorias em destaque */
.dv-carrossel { display: flex; flex: 1; align-items: stretch; gap: var(--dv-esp-1); min-width: 0; }
.dv-carrossel__trilho {
  position: relative;
  flex: 1;
  flex-wrap: nowrap;
  min-width: 0;
  margin-bottom: -1px;              /* a aba ativa encosta na borda do header (o overflow cortaria o -1px) */
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.dv-carrossel__trilho::-webkit-scrollbar { display: none; }
.dv-carrossel__trilho .dv-nav__link { white-space: nowrap; }
.dv-carrossel__trilho .dv-nav__link[aria-current="page"]::after { bottom: 0; }
/* Esmaece as bordas quando há mais categorias para o lado */
.dv-carrossel__trilho.tem-depois { mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.dv-carrossel__trilho.tem-antes { mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.dv-carrossel__trilho.tem-antes.tem-depois { mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.dv-carrossel__seta {
  display: grid;
  place-items: center;
  flex: none;
  align-self: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: var(--dv-borda);
  border-radius: 50%;
  background: var(--dv-cor-fundo);
}
.dv-carrossel__seta:hover:not(:disabled) { border-color: var(--dv-cor-borda-forte); }
.dv-carrossel__seta:disabled { opacity: 0.35; }

.dv-nav__catalogo { font-weight: var(--dv-peso-forte); gap: var(--dv-esp-1); padding-inline: var(--dv-esp-3); }
.dv-nav__catalogo:hover { background: transparent; }

@media (min-width: 1100px) {
  .dv-header__barra {
    grid-template-columns: auto minmax(240px, 1fr) auto;
    grid-template-areas: "logo busca acoes";
    gap: var(--dv-esp-5);
    padding-block: var(--dv-esp-3);
  }
  .dv-header__hamburguer, .dv-header__abrir-busca { display: none; }
  .dv-header__barra .dv-header__busca { display: flex; max-width: 560px; }
  .dv-header__acoes { grid-area: acoes; display: flex; align-items: center; }
  .dv-header__contexto { display: flex; gap: var(--dv-esp-2); }
  .dv-header__contexto .dv-contexto { max-width: 15rem; }
  .dv-header__nav { display: block; }
  .dv-header__acoes { gap: var(--dv-esp-2); }
}

/* Popover da filial */
/* Painel lateral de filiais (dialog .dv-drawer) */
.dv-pop-filial__busca { padding: var(--dv-esp-3) var(--dv-esp-4); border-bottom: var(--dv-borda); }
.dv-pop-filial .dv-drawer__corpo { padding: var(--dv-esp-2); }
.dv-pop-filial__lista { display: grid; gap: 2px; }
.dv-opcao-filial {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--dv-esp-2);
  padding: var(--dv-esp-2) var(--dv-esp-3);
  border-radius: var(--dv-raio-sm);
  cursor: pointer;
}
.dv-opcao-filial:hover { background: var(--dv-cor-superficie); }
.dv-opcao-filial[aria-selected="true"] { background: var(--dv-cor-acento-suave); }
/* Opção destacada pelo teclado (↑/↓): fundo mais escuro, sem contorno */
.dv-opcao-filial.is-destacada { background: var(--dv-cor-superficie-2); }
/* Filial ativa mantém o fundo no hover e no destaque do teclado */
.dv-opcao-filial[aria-selected="true"]:hover,
.dv-opcao-filial[aria-selected="true"].is-destacada { background: var(--dv-cor-acento-suave); }
/* Busca de filial: sem anel azul; o foco aparece pela borda escura */
#dv-filial-q:focus-visible { outline: none; border-color: var(--dv-cor-texto); }
.dv-opcao-filial__nome { font-size: var(--dv-texto-sm); font-weight: var(--dv-peso-medio); }
.dv-opcao-filial__meta { grid-column: 1; font-size: var(--dv-texto-xs); color: var(--dv-cor-texto-suave); }
.dv-opcao-filial[aria-selected="true"] .dv-opcao-filial__nome::after { content: " ✓"; }
.dv-pop-filial__vazio { padding: var(--dv-esp-4); font-size: var(--dv-texto-sm); color: var(--dv-cor-texto-suave); text-align: center; }

/* Mega menu do catálogo */
.dv-mega { padding: var(--dv-esp-5); }
.dv-mega__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--dv-esp-5);
}
.dv-mega__titulo { display: block; margin-bottom: var(--dv-esp-2); font-weight: var(--dv-peso-forte); text-decoration: none; }
.dv-mega__titulo:hover { text-decoration: underline; }
.dv-mega__lista { display: grid; gap: var(--dv-esp-1); font-size: var(--dv-texto-sm); }
.dv-mega__lista a { text-decoration: none; color: var(--dv-cor-texto-suave); }
.dv-mega__lista a:hover { color: var(--dv-cor-texto); text-decoration: underline; }
.dv-mega__lista .dv-mega__ver-mais { display: inline-block; margin-top: var(--dv-esp-1); color: var(--dv-cor-texto); font-weight: var(--dv-peso-medio); text-decoration: underline; text-underline-offset: 0.2em; }
.dv-mega__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dv-esp-2);
  margin-top: var(--dv-esp-5);
  padding-top: var(--dv-esp-4);
  border-top: var(--dv-borda);
}

/* Menu mobile (drawer) */
.dv-menu-mobile__secao { display: grid; gap: 2px; padding-block: var(--dv-esp-3); border-bottom: var(--dv-borda); }
.dv-menu-mobile__secao:last-child { border-bottom: 0; }
.dv-menu-mobile details summary { padding: var(--dv-esp-2) var(--dv-esp-3); font-size: var(--dv-texto-sm); font-weight: var(--dv-peso-medio); cursor: pointer; }
.dv-menu-mobile details .dv-menu { padding-left: var(--dv-esp-4); }

/* Mini cart */
.dv-minicart__contexto { display: grid; gap: var(--dv-esp-1); padding: var(--dv-esp-3) var(--dv-esp-4); background: var(--dv-cor-acento-suave); font-size: var(--dv-texto-sm); }
.dv-minicart__contexto-linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-esp-2); justify-content: space-between; }
/* "Trocar carrinho" abre o modal (carrinhos.js), mas tem cara de link */
.dv-minicart__trocar { font: inherit; color: var(--dv-cor-texto); }
.dv-minicart__itens { display: grid; gap: var(--dv-esp-4); }
.dv-minicart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--dv-esp-3); align-items: start; }
.dv-minicart-item__nome { font-size: var(--dv-texto-sm); font-weight: var(--dv-peso-medio); line-height: 1.3; }
.dv-minicart-item__meta { font-size: var(--dv-texto-xs); color: var(--dv-cor-texto-suave); }
.dv-minicart-item__controles { display: flex; align-items: center; gap: var(--dv-esp-2); margin-top: var(--dv-esp-2); }
.dv-minicart-item__preco { font-size: var(--dv-texto-sm); font-weight: var(--dv-peso-forte); text-align: right; }
.dv-minicart__total { display: flex; justify-content: space-between; font-weight: var(--dv-peso-forte); }

/* ---------- Busca mobile em tela cheia ----------
   Topo fixo (voltar + campo); o corpo rola com as sugestões do autocomplete. */
.dv-busca-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--dv-cor-fundo);
  color: var(--dv-cor-texto);
}
.dv-busca-modal[open] { display: flex; flex-direction: column; animation: dv-surgir var(--dv-duracao) ease-out; }
.dv-busca-modal::backdrop { background: var(--dv-cor-fundo); }
html:has(.dv-busca-modal[open]) { overflow: hidden; }

.dv-busca-modal__topo {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--dv-esp-2);
  padding: var(--dv-esp-2) var(--dv-gutter);
  padding-top: max(var(--dv-esp-2), env(safe-area-inset-top));
  border-bottom: var(--dv-borda);
  background: var(--dv-cor-fundo);
}
.dv-busca-modal__campo { flex: 1; min-width: 0; }
.dv-busca-modal__campo .dv-input { min-height: 2.75rem; font-size: var(--dv-texto-md); }  /* 16px: iOS não dá zoom no foco */
.dv-busca-modal__campo .dv-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.dv-busca-modal__corpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--dv-esp-2) var(--dv-gutter) max(var(--dv-esp-6), env(safe-area-inset-bottom));
}
/* A lista do autocomplete deixa de ser flutuante: ocupa o corpo do modal */
.dv-busca-modal .dv-busca-modal__lista {
  position: static;
  max-height: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
.dv-busca-modal .dv-autocomplete__opcao { padding: var(--dv-esp-3) var(--dv-esp-1); border-bottom: var(--dv-borda); border-radius: 0; }
.dv-busca-modal .dv-autocomplete__todos { margin-top: var(--dv-esp-2); padding: var(--dv-esp-3) var(--dv-esp-1); border-top: 0; }

.dv-busca-modal__inicio { display: grid; gap: var(--dv-esp-5); padding-top: var(--dv-esp-3); }
.dv-busca-modal__secao-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dv-esp-2); }
.dv-busca-modal__titulo { margin-bottom: var(--dv-esp-2); font-size: var(--dv-texto-xs); font-weight: var(--dv-peso-forte); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dv-cor-texto-suave); }
.dv-busca-modal__recente {
  display: flex;
  align-items: center;
  gap: var(--dv-esp-3);
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--dv-esp-1);
  border: 0;
  border-bottom: var(--dv-borda);
  background: none;
  text-align: left;
}
.dv-busca-modal__recente svg { color: var(--dv-cor-texto-suave); }
.dv-busca-modal__chips { display: flex; flex-wrap: wrap; gap: var(--dv-esp-2); }
.dv-busca-modal__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 var(--dv-esp-4);
  border: var(--dv-borda);
  border-radius: var(--dv-raio-pill);
  font-size: var(--dv-texto-sm);
  text-decoration: none;
}
.dv-busca-modal__chip:hover { background: var(--dv-cor-superficie); }