/* ==========================================================
   VAPEZERA — Header/Menu desktop no padrão Express Tabacaria
   Escopo: SOMENTE topo, busca, ações e menu de categorias desktop.
   Mobile permanece controlado pelo arquivo vapezera-mobile-header.css.
   ========================================================== */

@media (min-width: 901px) {
  body .header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  body .header-top {
    height: 44px !important;
    min-height: 44px !important;
    background: #f3f3f3 !important;
    border-bottom: 1px solid #e6e6e6 !important;
    color: #111 !important;
  }

  body .header-top .container,
  body .header-top .express-topbar-clone {
    max-width: 1065px !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: 1fr 1.65fr 1fr !important;
    align-items: center !important;
    gap: 18px !important;
  }

  body .topbar-item {
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    text-transform: uppercase !important;
    color: #111 !important;
    white-space: nowrap !important;
  }

  body .topbar-left { text-align: left !important; }
  body .topbar-center { text-align: center !important; }
  body .topbar-right {
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    text-transform: none !important;
  }

  body .topbar-right > span {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111 !important;
  }

  body .topbar-social {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #111 !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transition: color .18s ease !important;
  }

  body .topbar-social:hover { color: #c90000 !important; background: transparent !important; }

  body .header-main {
    background: #fff !important;
    padding: 0 !important;
    height: 86px !important;
    border: 0 !important;
  }

  body .header-main .container {
    max-width: none !important;
    width: 100% !important;
    height: 86px !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    display: grid !important;
    grid-template-columns: 295px minmax(300px, 400px) 1fr 205px 150px 62px !important;
    align-items: center !important;
    column-gap: 22px !important;
  }

  body .menu-toggle,
  body .header-search-row { display: none !important; }

  body .logo {
    grid-column: 1 !important;
    width: 210px !important;
    min-width: 210px !important;
    height: 86px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  body .logo img {
    width: 170px !important;
    max-width: 170px !important;
    height: auto !important;
    max-height: 92px !important;
    object-fit: contain !important;
    display: block !important;
    transform: none !important;
  }

  body .logo:hover img { transform: none !important; }

  body .search-bar {
    grid-column: 2 !important;
    width: 400px !important;
    max-width: 400px !important;
    height: 46px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 9px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
  }

  body .search-bar:focus-within {
    border-color: #c90000 !important;
    box-shadow: 0 0 0 3px rgba(201,0,0,.08) !important;
    transform: none !important;
  }

  body .search-bar input {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px !important;
    border: 0 !important;
    outline: 0 !important;
    background: #fff !important;
    color: #1b1b1b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: 'Inter', Arial, sans-serif !important;
  }

  body .search-bar input::placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  body .search-bar button {
    flex: 0 0 58px !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #c90000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition: color .18s ease, transform .18s ease !important;
  }

  body .search-bar button:hover {
    background: transparent !important;
    color: #a80000 !important;
    transform: scale(1.04) !important;
  }

  body .header-contact {
    grid-column: 4 !important;
    justify-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 1px !important;
    color: #111 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .header-contact__label {
    display: block !important;
    color: #c90000 !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }

  body .header-contact__phone {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #111 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  body .header-contact:hover .header-contact__label,
  body .header-contact:hover .header-contact__phone { color: #a80000 !important; }

  body .header-actions {
    grid-column: 5 / 7 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 24px !important;
    margin: 0 !important;
  }

  body .header-btn {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    transition: color .18s ease !important;
  }

  body .header-btn svg {
    width: 25px !important;
    height: 25px !important;
    stroke-width: 2 !important;
  }

  body .header-btn:hover { color: #c90000 !important; background: transparent !important; transform: none !important; }
  body .header-btn--favorites { display: none !important; }

  body .cart-btn {
    position: relative !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    gap: 0 !important;
  }

  body .cart-btn > span:not(.cart-badge) { display: none !important; }
  body .cart-btn svg { width: 30px !important; height: 30px !important; }

  body .cart-badge {
    position: absolute !important;
    top: -9px !important;
    right: -9px !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #c90000 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 19px !important;
    text-align: center !important;
    box-shadow: none !important;
  }

  body .header-nav.vapezera-category-menu,
  body .vapezera-category-menu {
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    background: #c90000 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 880 !important;
  }

  body .vapezera-category-menu__inner,
  body .header-nav.vapezera-category-menu > .container {
    max-width: none !important;
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu,
  body .express-menu.vapezera-icon-menu {
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  body .vapezera-icon-menu__item {
    min-width: 0 !important;
    height: 90px !important;
    position: relative !important;
    display: block !important;
  }

  body .vapezera-icon-menu__link {
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    padding: 14px 10px 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    line-height: 1.05 !important;
    transition: background .18s ease !important;
  }

  body .vapezera-icon-menu__link:before { display: none !important; }
  body .vapezera-icon-menu__link:hover,
  body .vapezera-icon-menu__item:hover > .vapezera-icon-menu__link,
  body .vapezera-icon-menu__link:focus-visible {
    background: #b60000 !important;
    outline: 0 !important;
  }

  body .vapezera-icon-menu__icon {
    width: 33px !important;
    height: 33px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    filter: none !important;
    transform: none !important;
  }

  body .vapezera-icon-menu__icon svg {
    width: 33px !important;
    height: 33px !important;
    display: block !important;
    stroke: currentColor !important;
  }

  body .vapezera-icon-menu__item:hover .vapezera-icon-menu__icon { transform: none !important; filter: none !important; }

  body .vapezera-icon-menu__text {
    display: block !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
  }

  body .vapezera-icon-menu__submenu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translate(-50%, 8px) !important;
    min-width: 240px !important;
    background: #fff !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 14px 28px rgba(0,0,0,.18) !important;
    padding: 8px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1100 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  body .vapezera-icon-menu__item:hover .vapezera-icon-menu__submenu,
  body .vapezera-icon-menu__item:focus-within .vapezera-icon-menu__submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
  }

  body .vapezera-icon-menu__submenu a {
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-transform: none !important;
    transition: background .16s ease, color .16s ease !important;
  }

  body .vapezera-icon-menu__submenu a:hover,
  body .vapezera-icon-menu__submenu a:focus-visible {
    background: #fff0f0 !important;
    color: #c90000 !important;
    transform: none !important;
    outline: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1160px) {
  body .header-main .container {
    grid-template-columns: 220px minmax(280px, 390px) 1fr 180px 130px 50px !important;
    column-gap: 16px !important;
  }
  body .logo { width: 170px !important; min-width: 170px !important; }
  body .logo img { width: 155px !important; max-width: 155px !important; }
  body .search-bar { width: 390px !important; max-width: 390px !important; }
  body .header-contact__label { font-size: 13px !important; }
  body .header-contact__phone { font-size: 13px !important; }
  body .header-btn { font-size: 14px !important; gap: 8px !important; }
}

@media (max-width: 900px) {
  .vapezera-category-menu { display: none !important; }
}


/* Ícones premium do menu: imagens tratadas com fundo transparente */
@media (min-width: 901px) {
  body .vapezera-icon-menu__icon img {
    width: 33px !important;
    height: 33px !important;
    display: block !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body .vapezera-icon-menu__icon svg {
    display: none !important;
  }

  body .vapezera-icon-menu__item:nth-child(1) .vapezera-icon-menu__icon img {
    width: 35px !important;
    height: 35px !important;
  }

  body .vapezera-icon-menu__item:nth-child(2) .vapezera-icon-menu__icon img {
    width: 31px !important;
    height: 31px !important;
  }

  body .vapezera-icon-menu__item:nth-child(3) .vapezera-icon-menu__icon img {
    width: 33px !important;
    height: 33px !important;
  }

  body .vapezera-icon-menu__item:nth-child(4) .vapezera-icon-menu__icon img {
    width: 33px !important;
    height: 33px !important;
  }
}


/* ==========================================================
   AJUSTE FINAL — Menu igual à referência Express
   Mantém o mesmo header e troca apenas proporção/posição do menu.
   ========================================================== */
@media (min-width: 901px) {
  body .main-content {
    padding-top: 0 !important;
  }

  body .header-top {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  body .header-top .container {
    height: 44px !important;
    min-height: 44px !important;
    grid-template-columns: 1fr 1.65fr 1fr !important;
    align-items: center !important;
  }

  body .topbar-item {
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  body .header-nav.vapezera-category-menu,
  body .vapezera-category-menu {
    height: 90px !important;
    min-height: 90px !important;
    background: #c90000 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
  }

  body .vapezera-category-menu__inner,
  body .header-nav.vapezera-category-menu > .container {
    max-width: 1260px !important;
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu,
  body .express-menu.vapezera-icon-menu {
    width: 100% !important;
    height: 90px !important;
    min-height: 90px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
  }

  body .vapezera-icon-menu__item {
    height: 90px !important;
    min-width: 0 !important;
    display: block !important;
    position: relative !important;
  }

  body .vapezera-icon-menu__link {
    height: 90px !important;
    min-height: 90px !important;
    width: 100% !important;
    padding: 12px 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: transparent !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
  }

  body .vapezera-icon-menu__link:hover,
  body .vapezera-icon-menu__item:hover > .vapezera-icon-menu__link,
  body .vapezera-icon-menu__link:focus-visible {
    background: #b80000 !important;
    outline: none !important;
  }

  body .vapezera-icon-menu__link::before,
  body .vapezera-icon-menu__link::after,
  body .vapezera-icon-menu__item.has-submenu > .vapezera-icon-menu__link::after {
    content: none !important;
    display: none !important;
  }

  body .vapezera-icon-menu__icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    filter: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu__icon img {
    display: block !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu__item:nth-child(1) .vapezera-icon-menu__icon img {
    width: 40px !important;
    height: 40px !important;
  }

  body .vapezera-icon-menu__item:nth-child(2) .vapezera-icon-menu__icon img {
    width: 34px !important;
    height: 34px !important;
  }

  body .vapezera-icon-menu__item:nth-child(3) .vapezera-icon-menu__icon img {
    width: 37px !important;
    height: 37px !important;
  }

  body .vapezera-icon-menu__item:nth-child(4) .vapezera-icon-menu__icon img {
    width: 36px !important;
    height: 36px !important;
  }

  body .vapezera-icon-menu__text {
    display: block !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -0.15px !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
  }

  body .vapezera-icon-menu__item:first-child .vapezera-icon-menu__text {
    font-weight: 900 !important;
    text-transform: uppercase !important;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  body .vapezera-category-menu__inner,
  body .header-nav.vapezera-category-menu > .container {
    max-width: 1240px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1160px) {
  body .vapezera-category-menu__inner,
  body .header-nav.vapezera-category-menu > .container {
    max-width: 1120px !important;
  }

  body .vapezera-icon-menu__text {
    font-size: 15px !important;
  }
}


/* ==========================================================
   AJUSTE MOBILE/TABLET — mesmo menu do desktop renderizando
   proporcionalmente conforme a largura da tela.
   ========================================================== */

/* Tablet e telas médias: mantém o menu visível e proporcional */
@media (max-width: 900px) {
  body .header-nav.vapezera-category-menu,
  body .vapezera-category-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: #c90000 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body .vapezera-category-menu__inner,
  body .header-nav.vapezera-category-menu > .container {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu,
  body .express-menu.vapezera-icon-menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
  }

  body .vapezera-icon-menu__item {
    display: block !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu__item + .vapezera-icon-menu__item {
    border-left: 1px solid rgba(255,255,255,.14) !important;
  }

  body .vapezera-icon-menu__link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: clamp(64px, 12vw, 82px) !important;
    min-height: clamp(64px, 12vw, 82px) !important;
    padding: 8px 3px 9px !important;
    gap: 5px !important;
    background: #c90000 !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body .vapezera-icon-menu__link:hover,
  body .vapezera-icon-menu__link:focus-visible,
  body .vapezera-icon-menu__item:hover > .vapezera-icon-menu__link {
    background: #b80000 !important;
    outline: none !important;
  }

  body .vapezera-icon-menu__link::before,
  body .vapezera-icon-menu__link::after,
  body .vapezera-icon-menu__item.has-submenu > .vapezera-icon-menu__link::after {
    content: none !important;
    display: none !important;
  }

  body .vapezera-icon-menu__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(26px, 6vw, 36px) !important;
    height: clamp(26px, 6vw, 36px) !important;
    flex: 0 0 clamp(26px, 6vw, 36px) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    filter: none !important;
    transform: none !important;
  }

  body .vapezera-icon-menu__icon img {
    display: block !important;
    width: clamp(24px, 5.4vw, 34px) !important;
    height: clamp(24px, 5.4vw, 34px) !important;
    object-fit: contain !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .vapezera-icon-menu__item:nth-child(1) .vapezera-icon-menu__icon img {
    width: clamp(26px, 6vw, 36px) !important;
    height: clamp(26px, 6vw, 36px) !important;
  }

  body .vapezera-icon-menu__text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    color: #fff !important;
    font-size: clamp(10px, 2.35vw, 13px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -0.25px !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .vapezera-icon-menu__item:first-child .vapezera-icon-menu__text {
    text-transform: uppercase !important;
  }

  /* No mobile, submenu não abre para não quebrar o layout */
  body .vapezera-icon-menu__submenu,
  body .express-submenu.vapezera-icon-menu__submenu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Remove o comportamento antigo de menu mobile dropdown */
  body .header-nav.active.vapezera-category-menu {
    display: block !important;
  }
}

/* Celulares bem pequenos: mantém 4 botões sem quebrar linha */
@media (max-width: 430px) {
  body .vapezera-icon-menu__link {
    height: 62px !important;
    min-height: 62px !important;
    padding: 7px 2px 8px !important;
    gap: 4px !important;
  }

  body .vapezera-icon-menu__icon,
  body .vapezera-icon-menu__icon img {
    width: 24px !important;
    height: 24px !important;
    flex-basis: 24px !important;
  }

  body .vapezera-icon-menu__item:nth-child(1) .vapezera-icon-menu__icon img {
    width: 26px !important;
    height: 26px !important;
  }

  body .vapezera-icon-menu__text {
    font-size: 10px !important;
    letter-spacing: -0.35px !important;
  }
}

/* Celulares muito estreitos: abrevia só para não cortar feio */
@media (max-width: 360px) {
  body .vapezera-icon-menu__text {
    font-size: 9.5px !important;
  }
}


/* ==========================================================
   COMPORTAMENTO AO ROLAR — menu de categorias some fora do topo
   Funciona no desktop, tablet e mobile.
   ========================================================== */
body .vapezera-category-menu {
  transition:
    opacity .22s ease,
    transform .22s ease,
    max-height .22s ease,
    min-height .22s ease,
    height .22s ease,
    visibility .22s ease !important;
  will-change: opacity, transform, height, max-height;
}

body.vz-category-menu-hidden .vapezera-category-menu {
  opacity: 0 !important;
  transform: translateY(-100%) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

body.vz-category-menu-hidden .vapezera-category-menu__inner,
body.vz-category-menu-hidden .header-nav.vapezera-category-menu > .container,
body.vz-category-menu-hidden .vapezera-icon-menu,
body.vz-category-menu-hidden .express-menu.vapezera-icon-menu {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* No topo da página, o menu aparece normalmente */
body.vz-category-menu-visible .vapezera-category-menu {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}


/* ==========================================================
   AJUSTE FINAL — Menu em fluxo normal da página
   O menu não some por JS e não fica pulando no scroll.
   Ele se comporta como parte real do layout: ao rolar, sobe junto
   com o conteúdo normalmente, igual seção/banner/produto.
   ========================================================== */

html body .header {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  transition: none !important;
}

html body .header.express-hidden,
html body .header.express-scrolled {
  transform: none !important;
}

html body .vapezera-category-menu,
html body .header-nav.vapezera-category-menu {
  position: relative !important;
  top: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
  height: 90px !important;
  min-height: 90px !important;
  max-height: none !important;
}

/* Neutraliza qualquer classe antiga de esconder menu caso fique no body por cache */
html body.vz-category-menu-hidden .vapezera-category-menu,
html body.vz-category-menu-visible .vapezera-category-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  height: 90px !important;
  min-height: 90px !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.vz-category-menu-hidden .vapezera-category-menu__inner,
html body.vz-category-menu-hidden .header-nav.vapezera-category-menu > .container,
html body.vz-category-menu-hidden .vapezera-icon-menu,
html body.vz-category-menu-hidden .express-menu.vapezera-icon-menu {
  height: 90px !important;
  min-height: 90px !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Garante que o conteúdo comece logo depois do menu, sem espaço artificial */
html body .main-content {
  padding-top: 0 !important;
}

/* Mobile/tablet: também segue o fluxo normal, sem pular */
@media (max-width: 900px) {
  html body .header {
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

  html body .vapezera-category-menu,
  html body .header-nav.vapezera-category-menu {
    display: block !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.vz-category-menu-hidden .vapezera-category-menu,
  html body.vz-category-menu-visible .vapezera-category-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.vz-category-menu-hidden .vapezera-category-menu__inner,
  html body.vz-category-menu-hidden .header-nav.vapezera-category-menu > .container,
  html body.vz-category-menu-hidden .vapezera-icon-menu,
  html body.vz-category-menu-hidden .express-menu.vapezera-icon-menu {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* ==========================================================
   AJUSTE FINAL — Cabeçalho principal fixo + menu em fluxo normal
   - Topbar (+18, 5% off, parcelamento) rola junto com a página.
   - Menu vermelho de categorias rola junto com a página.
   - Cabeçalho principal (logo, busca, atendimento, conta, carrinho) fica travado.
   - Animação leve quando fixa no topo.
   ========================================================== */

html body .header {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  transition: none !important;
  z-index: 1000 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* A faixa de ofertas de cima NÃO fica fixa: ela sobe junto com o site */
html body .header-top {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  transform: none !important;
}

/* Cabeçalho central fica fixo/travado no topo */
html body .header-main {
  position: sticky !important;
  top: 0 !important;
  z-index: 1200 !important;
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
  transition:
    box-shadow .22s ease,
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease !important;
  will-change: box-shadow, transform, background-color;
}

/* Estado após rolar um pouco: sombra premium e micro animação */
html body.vz-header-stuck .header-main {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.10) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}

/* Micro ajuste visual: logo/busca suavizam sem pulo */
html body .header-main .container,
html body .header-main .logo,
html body .header-main .search-bar,
html body .header-main .header-contact,
html body .header-main .header-actions {
  transition:
    transform .22s ease,
    opacity .22s ease,
    height .22s ease,
    min-height .22s ease !important;
}

html body.vz-header-stuck .header-main .container {
  transform: translateY(0) !important;
}

/* Menu vermelho continua sendo parte da página, sem fixar e sem pular */
html body .vapezera-category-menu,
html body .header-nav.vapezera-category-menu {
  position: relative !important;
  top: auto !important;
  z-index: 880 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Neutraliza classes antigas de esconder menu caso fiquem em cache */
html body.vz-category-menu-hidden .vapezera-category-menu,
html body.vz-category-menu-visible .vapezera-category-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Conteúdo começa logo depois do menu, sem espaço branco artificial */
html body .main-content {
  padding-top: 0 !important;
}

/* Mobile/tablet: mesmo comportamento, header central fixo e menu rolando */
@media (max-width: 900px) {
  html body .header {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    background: transparent !important;
  }

  html body .header-top {
    position: relative !important;
    top: auto !important;
  }

  html body .header-main {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: none !important;
  }

  html body.vz-header-stuck .header-main {
    box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }

  html body .vapezera-category-menu,
  html body .header-nav.vapezera-category-menu {
    position: relative !important;
    top: auto !important;
    z-index: 880 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    overflow: visible !important;
  }
}

/* Acessibilidade: reduz animações se o usuário pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  html body .header-main,
  html body .header-main * {
    transition: none !important;
  }
}


/* ==========================================================
   CORREÇÃO REAL — Header principal fixo sem quebrar topbar/menu
   - Topbar rola junto com a página.
   - Menu vermelho rola junto com a página.
   - Header principal fica normal no topo e vira FIXED depois que a topbar sai.
   - Spacer evita pulo no layout.
   ========================================================== */

/* Estado normal: header no fluxo da página */
html body .header {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  z-index: 1000 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body .header-top {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  transform: none !important;
}

/* Desliga sticky antigo; o JS aplica fixed no momento correto */
html body .header-main {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  z-index: 1200 !important;
  background: rgba(255,255,255,.98) !important;
  transform: none !important;
  transition:
    box-shadow .22s ease,
    background-color .22s ease,
    border-color .22s ease !important;
  will-change: box-shadow, background-color;
}

/* Spacer fica invisível enquanto o header está no fluxo */
html body .header-main-spacer {
  display: none !important;
  height: 0 !important;
}

/* Quando rolar além da topbar, o header principal fica realmente fixo */
html body.vz-header-main-fixed .header-main {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 5000 !important;
  background: rgba(255,255,255,.97) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.12) !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  animation: vzHeaderFixedIn .18s ease both;
}

html body.vz-header-main-fixed .header-main-spacer {
  display: block !important;
  height: var(--vz-header-main-height, 86px) !important;
}

/* Menu continua fazendo parte da página normal */
html body .vapezera-category-menu,
html body .header-nav.vapezera-category-menu {
  position: relative !important;
  top: auto !important;
  z-index: 880 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Neutraliza regras antigas que escondiam menu/cabeçalho */
html body.vz-category-menu-hidden .vapezera-category-menu,
html body.vz-category-menu-visible .vapezera-category-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: visible !important;
}

html body .main-content {
  padding-top: 0 !important;
}

@keyframes vzHeaderFixedIn {
  from {
    transform: translateY(-6px);
    opacity: .98;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  html body .header-main {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  html body.vz-header-main-fixed .header-main {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 5000 !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.12) !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
  }

  html body.vz-header-main-fixed .header-main-spacer {
    display: block !important;
    height: var(--vz-header-main-height, 74px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.vz-header-main-fixed .header-main {
    animation: none !important;
  }
}