/* =========================================================
   AIO RESISPAR · SEPARAÇÃO REAL DESKTOP / MOBILE
   Desktop >= 992px | Mobile/tablet <= 991px
   ========================================================= */

/* DESKTOP: header no fluxo e sem espaço fantasma */
@media (min-width: 992px){
  .application{
    padding-top:0 !important;
  }
  .header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    width:100% !important;
  }
  .header-mobile{
    display:none !important;
  }
}

/* MOBILE/TABLET: nunca herdar estrutura desktop */
@media (max-width: 991px){
  html,body{
    overflow-x:hidden !important;
  }

  .application{
    padding-top:0 !important;
    transform:none !important;
  }

  /* usa apenas o header principal em versão mobile; elimina duplicação sticky antiga */
  .header-mobile{
    display:none !important;
  }

  .header{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-height:none !important;
    transform:none !important;
    z-index:1010 !important;
    background:#fff !important;
  }

  .header > .bg,
  .header .bg{
    position:relative !important;
    z-index:1012 !important;
    overflow:visible !important;
    background:#fff !important;
    border-bottom:1px solid #e7edf5 !important;
    box-shadow:none !important;
  }

  /* PRIMEIRA LINHA: hamburger + logo. SEGUNDA LINHA: busca */
  .header .bg .line.container,
  .header .line.container,
  .header .line{
    position:relative !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    gap:0 !important;
    padding:10px 12px 12px !important;
    overflow:visible !important;
  }

  /* hamburger sempre dentro do topo mobile */
  .header .header-menu{
    display:flex !important;
    position:absolute !important;
    top:15px !important;
    left:14px !important;
    z-index:4 !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    width:38px !important;
    height:38px !important;
    margin:0 !important;
    padding:10px 8px !important;
    border:1px solid #e2e9f2 !important;
    border-radius:12px !important;
    background:#fff !important;
    box-shadow:none !important;
    cursor:pointer !important;
  }
  .header .header-menu div{
    display:block !important;
    width:100% !important;
    height:2px !important;
    margin:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:#17386f !important;
  }

  /* logo centralizada e sem blocos desktop ao redor */
  .header .logo{
    order:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    max-width:none !important;
    min-height:48px !important;
    margin:0 !important;
    padding:0 52px !important;
  }
  .header .logo img,
  .header .logo svg{
    display:block !important;
    width:auto !important;
    max-width:185px !important;
    max-height:48px !important;
    margin:0 auto !important;
  }
  .header .title-store{
    display:none !important;
  }

  /* atendimento / rastreio / conta / carrinho ficam SOMENTE no drawer */
  .header .options-wrapper,
  .header .bg .line > .cart-toggle,
  .header .line > .cart-toggle,
  .header .dropHelp,
  .header .orderList,
  .header .account{
    display:none !important;
  }

  /* busca fica em uma segunda linha limpa, e não sobre o banner */
  .header .header-search-wrapper{
    order:3 !important;
    position:relative !important;
    display:flex !important;
    flex:0 0 100% !important;
    align-items:center !important;
    width:100% !important;
    max-width:none !important;
    min-height:48px !important;
    height:48px !important;
    margin:9px 0 0 !important;
    padding:0 7px 0 14px !important;
    border:1px solid #dfe7f1 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:visible !important;
  }
  .header .header-search-wrapper .input-search{
    display:block !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    height:46px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#172b52 !important;
    font-size:15px !important;
    line-height:46px !important;
  }
  .header .header-search-wrapper .button-search{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 38px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:11px !important;
    background:#f2f6fb !important;
    color:#17386f !important;
    box-shadow:none !important;
  }
  .header .header-search-wrapper .button-search svg,
  .header .header-search-wrapper .button-search .icon{
    width:20px !important;
    height:20px !important;
    color:#17386f !important;
    fill:#17386f !important;
  }

  /* nenhum menu desktop entra no viewport mobile */
  .header .aio-mega-nav,
  .header .nav,
  .aio-mega-nav{
    display:none !important;
  }

  /* sugestões de busca devem cair abaixo da barra */
  .header .header-search-wrapper .suggestion,
  .header .suggestion{
    top:calc(100% + 6px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:100% !important;
    z-index:9999 !important;
  }

  /* drawer sempre acima do site */
  .menu-mobile.aio-mobile-menu{
    z-index:10050 !important;
  }
  .overlay-shadow,
  .menu-mobile-backdrop{
    z-index:10040 !important;
  }
}

@media (max-width: 420px){
  .header .bg .line.container,
  .header .line.container,
  .header .line{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .header .header-menu{
    left:10px !important;
    width:36px !important;
    height:36px !important;
    padding:9px 8px !important;
  }
  .header .logo img,
  .header .logo svg{
    max-width:165px !important;
    max-height:44px !important;
  }
  .header .header-search-wrapper{
    height:46px !important;
    min-height:46px !important;
  }
}