/* VBEN V10 — categorias da vitrine na MESMA linha do menu principal.
   Promoções do canto direito permanece intacto. Desktop: uma única faixa azul.
   A barra branca de categorias dentro da vitrine deixa de competir com o topo. */

@media (min-width:981px){
  .topbar{
    display:flex!important;
    align-items:center!important;
    overflow:visible!important;
  }
  .brand,.top-actions{flex:0 0 auto!important}

  /* Toda a navegação do topo vira uma única faixa horizontal rolável. */
  .desktop-nav{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch;
    padding:4px 2px!important;
  }
  .desktop-nav::-webkit-scrollbar{display:none!important}
  .desktop-nav>a,.desktop-nav>.nav-flyout-wrap{flex:0 0 auto!important}

  /* Categorias de PROMOÇÕES entram à esquerda de Ofertas/Lojas/Serviços. */
  .vben-top-category-nav{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    flex:0 0 auto!important;
    min-width:max-content!important;
  }
  .vben-top-category-nav button{
    appearance:none!important;
    border:1px solid transparent!important;
    border-radius:999px!important;
    background:transparent!important;
    color:rgba(255,255,255,.90)!important;
    min-height:30px!important;
    padding:0 9px!important;
    font:850 10px/1 Arial,sans-serif!important;
    letter-spacing:.01em!important;
    cursor:pointer!important;
    white-space:nowrap!important;
    transition:background .15s ease,border-color .15s ease,color .15s ease!important;
  }
  .vben-top-category-nav button:hover{
    background:rgba(255,255,255,.10)!important;
    border-color:rgba(255,255,255,.16)!important;
    color:#fff!important;
  }
  .vben-top-category-nav button.is-active{
    background:#ff6a1a!important;
    border-color:#ff6a1a!important;
    color:#fff!important;
  }
  .vben-top-category-separator{
    flex:0 0 1px!important;
    width:1px!important;
    height:24px!important;
    margin:0 4px!important;
    background:rgba(255,255,255,.24)!important;
  }

  /* O menu geral continua igual, só fica mais compacto para caber na mesma linha. */
  .desktop-nav>a,.desktop-nav .nav-flyout-trigger{
    font-size:11px!important;
    padding-left:4px!important;
    padding-right:4px!important;
    white-space:nowrap!important;
  }

  /* Categorias já estão no topo: dentro de Promoções fica somente o botão Lateral/Vertical. */
  #promocoes-home .vben-vertical-toolbar{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    min-height:0!important;
    margin:0 0 6px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    display:flex!important;
    justify-content:flex-end!important;
  }
  #promocoes-home .vben-vertical-toolbar__title,
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories{
    display:none!important;
  }
  #promocoes-home .vben-vertical-toolbar .mobile-feed-mode{
    margin:0!important;
    display:flex!important;
  }
  #promocoes-home .vben-vertical-toolbar .mobile-feed-mode small{display:none!important}

  /* Ao saltar de categoria, considera o cabeçalho fixo. */
  #promocoes-home.is-mobile-vertical .promotions-main>.promo-group.is-vben-vertical-active{
    scroll-margin-top:86px!important;
  }
}

/* Mobile mantém o comportamento que já estava funcionando, mas a barra fica azul e mais visível. */
@media (max-width:980px){
  #promocoes-home .vben-vertical-toolbar{
    background:linear-gradient(90deg,#06345e,#075b9e)!important;
    border-color:#075b9e!important;
    box-shadow:0 6px 16px rgba(4,39,72,.20)!important;
  }
  #promocoes-home .vben-vertical-toolbar__title{color:#fff!important}
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories button{
    background:rgba(255,255,255,.08)!important;
    border-color:rgba(255,255,255,.20)!important;
    color:#fff!important;
  }
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories button.is-active{
    background:#ff6a1a!important;
    border-color:#ff6a1a!important;
    color:#fff!important;
  }
}


/* =========================================================
   VBEN V10.1 — MOBILE: somente categorias, maiores e fixas
   Remove "PROMOÇÕES" e "Lateral" da barra da vitrine.
   ========================================================= */
@media (max-width:980px){
  /* Título da seção e seletor Lateral/Vertical deixam de ocupar espaço. */
  #promocoes-home > .section-title,
  #promocoes-home #mobileFeedMode,
  #promocoes-home .vben-vertical-toolbar__title{
    display:none!important;
  }

  /* A barra passa a ser exclusivamente das categorias. */
  #promocoes-home .vben-vertical-toolbar{
    position:sticky!important;
    top:var(--vben-mobile-categories-top,118px)!important;
    z-index:85!important;
    width:100%!important;
    margin:0 0 14px!important;
    padding:10px 8px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:18px!important;
    background:linear-gradient(90deg,#06345e,#075b9e)!important;
    box-shadow:0 8px 20px rgba(4,39,72,.24)!important;
    display:block!important;
    overflow:hidden!important;
  }

  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
  }
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories::-webkit-scrollbar{
    display:none!important;
  }

  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories button{
    flex:0 0 auto!important;
    min-height:44px!important;
    padding:0 18px!important;
    border-radius:999px!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1!important;
    white-space:nowrap!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    color:#fff!important;
  }

  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories button.is-active{
    background:#ff6a1a!important;
    border-color:#ff6a1a!important;
    color:#fff!important;
  }

  #promocoes-home.is-mobile-vertical .promotions-main>.promo-group.is-vben-vertical-active{
    scroll-margin-top:calc(var(--vben-mobile-categories-top,118px) + 74px)!important;
  }
}


/* =========================================================
   VBEN V10.2 — MOBILE MODELO VIOLET
   Categorias em cima + Busca Inteligente embaixo.
   Um único bloco sticky. Desktop intacto.
   ========================================================= */
@media (max-width:980px){
  /* Evita duas buscas sticky concorrendo no mobile. */
  #vbenStickySearch{
    display:none!important;
  }

  /* A busca original da hero continua no desktop; no mobile usamos a compacta da barra. */
  .hero .intelligent-search{
    display:none!important;
  }

  #promocoes-home .vben-vertical-toolbar{
    position:sticky!important;
    top:var(--vben-mobile-categories-top,72px)!important;
    z-index:90!important;
    padding:9px 8px 8px!important;
    border-radius:0 0 18px 18px!important;
    background:linear-gradient(90deg,#06345e 0%,#075b9e 100%)!important;
    box-shadow:0 10px 24px rgba(4,39,72,.26)!important;
  }

  /* Linha 1 — categorias */
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories{
    order:1!important;
    display:flex!important;
    gap:7px!important;
    padding:0 0 8px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories::-webkit-scrollbar{
    display:none!important;
  }
  #promocoes-home .vben-vertical-toolbar .vben-vertical-categories button{
    min-height:38px!important;
    padding:0 15px!important;
    font-size:13px!important;
  }

  /* Linha 2 — busca */
  #promocoes-home .vben-mobile-smart-search{
    order:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 102px!important;
    gap:7px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  #promocoes-home .vben-mobile-smart-search input{
    min-width:0!important;
    width:100%!important;
    height:42px!important;
    border:1px solid rgba(255,255,255,.35)!important;
    border-radius:13px!important;
    background:#fff!important;
    color:#172331!important;
    padding:0 12px!important;
    font-size:13px!important;
    outline:none!important;
  }

  #promocoes-home .vben-mobile-smart-search input:focus{
    border-color:#ff6a1a!important;
    box-shadow:0 0 0 2px rgba(255,106,26,.22)!important;
  }

  #promocoes-home .vben-mobile-smart-search button{
    height:42px!important;
    border:0!important;
    border-radius:13px!important;
    background:#ff6a1a!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
    cursor:pointer!important;
  }
}


/* =========================================================
   VBEN V10.3 — CATEGORIAS NO TOPO TAMBÉM NO MOBILE
   Mesmo conceito do notebook: categorias junto ao cabeçalho VBEN.
   ========================================================= */
@media (max-width:980px){

  /* Cabeçalho VBEN vira o conjunto sticky: marca/ações + categorias. */
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:10020!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    overflow:visible!important;
    padding-bottom:7px!important;
    box-shadow:0 7px 20px rgba(4,39,72,.24)!important;
  }

  .brand,
  .top-actions{
    flex:0 0 auto!important;
  }

  /* Categorias ficam dentro da "caixa" azul do VBEN, abaixo da marca. */
  .vben-mobile-top-category-nav{
    order:20!important;
    flex:1 0 100%!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:7px 0 0!important;
    padding:0 8px 1px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
  }
  .vben-mobile-top-category-nav::-webkit-scrollbar{
    display:none!important;
  }

  .vben-mobile-top-category-nav button{
    appearance:none!important;
    flex:0 0 auto!important;
    min-height:34px!important;
    padding:0 13px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    font:850 11px/1 Arial,sans-serif!important;
    white-space:nowrap!important;
    cursor:pointer!important;
  }
  .vben-mobile-top-category-nav button.is-active{
    background:#ff6a1a!important;
    border-color:#ff6a1a!important;
    color:#fff!important;
  }

  /* A Busca Inteligente ORIGINAL continua na capa também no celular. */
  .hero .intelligent-search{
    display:block!important;
  }

  /* Não cria outra busca/categorias lá em Promoções. */
  #vbenStickySearch{
    display:none!important;
  }
  #promocoes-home .vben-vertical-toolbar{
    display:none!important;
  }
  #promocoes-home .vben-mobile-smart-search{
    display:none!important;
  }

  /* Ao clicar numa categoria do topo e descer para a vitrine,
     deixa o conteúdo abaixo do cabeçalho sticky. */
  #promocoes-home.is-mobile-vertical .promotions-main>.promo-group.is-vben-vertical-active{
    scroll-margin-top:132px!important;
  }
}

@media (max-width:560px){
  .vben-mobile-top-category-nav{
    gap:6px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .vben-mobile-top-category-nav button{
    min-height:32px!important;
    padding:0 11px!important;
    font-size:10.5px!important;
  }
}


/* =========================================================
   VBEN V10.4 — TOPO MOBILE MAIS ALTO + TECNOLOGIA VISÍVEL
   ========================================================= */
@media (max-width:980px){
  .topbar{
    height:auto!important;
    min-height:0!important;
    padding-bottom:0!important;
    background:linear-gradient(90deg,#075b9e,#0868aa)!important;
  }

  /* Continuação azul do próprio cabeçalho: cobre totalmente as categorias. */
  .vben-mobile-top-category-nav{
    box-sizing:border-box!important;
    width:100%!important;
    margin:0!important;
    padding:9px 8px 11px!important;
    min-height:54px!important;
    background:linear-gradient(90deg,#075b9e,#0868aa)!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
  }

  .vben-mobile-top-category-nav button{
    min-height:36px!important;
    background:rgba(2,38,69,.34)!important;
    border-color:rgba(255,255,255,.23)!important;
    color:#fff!important;
  }

  .vben-mobile-top-category-nav button.is-active{
    background:#ff6a1a!important;
    border-color:#ff6a1a!important;
    color:#fff!important;
  }

  /* O conteúdo começa depois do cabeçalho ampliado. */
  #promocoes-home.is-mobile-vertical .promotions-main>.promo-group.is-vben-vertical-active{
    scroll-margin-top:150px!important;
  }
}


/* =========================================================
   VBEN V10.5 — MOBILE: TOPO AZUL + CATEGORIAS + BUSCA FIXOS
   Desktop permanece intacto.
   ========================================================= */
@media (max-width:980px){

  /* Cabeçalho inteiro vira o bloco fixo azul. */
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:10030!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    height:auto!important;
    min-height:0!important;
    padding-bottom:0!important;
    overflow:visible!important;
    background:linear-gradient(90deg,#075b9e,#0868aa)!important;
    box-shadow:0 8px 22px rgba(4,39,72,.26)!important;
  }

  /* Categorias totalmente dentro da área azul. */
  .vben-mobile-top-category-nav{
    order:20!important;
    flex:1 0 100%!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:8px 8px 7px!important;
    min-height:50px!important;
    background:linear-gradient(90deg,#075b9e,#0868aa)!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    display:flex!important;
    gap:7px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .vben-mobile-top-category-nav::-webkit-scrollbar{display:none!important;}

  .vben-mobile-top-category-nav button{
    flex:0 0 auto!important;
    min-height:35px!important;
    padding:0 13px!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.28)!important;
    background:#0a4c7f!important;
    color:#fff!important;
    font:850 11px/1 Arial,sans-serif!important;
    white-space:nowrap!important;
  }

  .vben-mobile-top-category-nav button.is-active{
    background:#ff6a1a!important;
    border-color:#ff6a1a!important;
    color:#fff!important;
  }

  /* Busca compacta sobe para dentro do mesmo topo azul. */
  .vben-mobile-header-search{
    order:21!important;
    flex:1 0 100%!important;
    width:100%!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 110px!important;
    gap:7px!important;
    padding:0 8px 10px!important;
    margin:0!important;
    background:linear-gradient(90deg,#075b9e,#0868aa)!important;
  }

  .vben-mobile-header-search input{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    border-radius:13px!important;
    border:1px solid rgba(255,255,255,.55)!important;
    background:#fff!important;
    color:#172331!important;
    padding:0 12px!important;
    font-size:13px!important;
    outline:none!important;
  }

  .vben-mobile-header-search input:focus{
    border-color:#ff6a1a!important;
    box-shadow:0 0 0 2px rgba(255,106,26,.22)!important;
  }

  .vben-mobile-header-search button{
    height:42px!important;
    border:0!important;
    border-radius:13px!important;
    background:#ff6a1a!important;
    color:#fff!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.02em!important;
  }

  /* No mobile, esconde a busca antiga da hero para não duplicar. */
  .hero .intelligent-search{
    display:none!important;
  }

  /* Qualquer busca sticky antiga também fica fora. */
  #vbenStickySearch{
    display:none!important;
  }

  /* Remove toolbar/busca duplicada dentro da seção de promoções. */
  #promocoes-home .vben-vertical-toolbar,
  #promocoes-home .vben-mobile-smart-search{
    display:none!important;
  }

  /* A frase/curadoria fica no fluxo normal, abaixo do topo fixo. */
  .vben-curadoria-strip,
  .vben-curadoria-line,
  .hero .vben-curadoria-strip,
  .hero .vben-curadoria-line{
    position:relative!important;
    z-index:1!important;
    margin-top:10px!important;
  }

  /* Evita que âncoras parem escondidas atrás do cabeçalho fixo. */
  #promocoes-home,
  #promocoes-home.is-mobile-vertical .promotions-main>.promo-group.is-vben-vertical-active{
    scroll-margin-top:190px!important;
  }
}

@media (max-width:560px){
  .vben-mobile-top-category-nav{
    gap:6px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  .vben-mobile-top-category-nav button{
    min-height:33px!important;
    padding:0 11px!important;
    font-size:10.5px!important;
  }
  .vben-mobile-header-search{
    grid-template-columns:minmax(0,1fr) 104px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
}


/* =========================================================
   VBEN V11 — DESKTOP: menu não some ao navegar com TAB
   Dropdowns de Lojas/Eventos/Parceiros abrem por cima, sem empurrar a faixa.
   ========================================================= */
@media (min-width:981px){
  .topbar{overflow:visible!important;z-index:10040!important;}
  .desktop-nav{
    position:relative!important;
    overflow:visible!important;
    scrollbar-width:none!important;
    gap:7px!important;
  }
  .desktop-nav>.nav-flyout-wrap{
    position:relative!important;
    overflow:visible!important;
    z-index:10045!important;
  }
  .desktop-nav .nav-flyout{
    z-index:10060!important;
  }
  .desktop-nav:focus-within{
    overflow:visible!important;
  }
}