:root{
  --hlb-safe-top: env(safe-area-inset-top, 0px);
  --hlb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --hlb-mobile-top-gap: 14px;
  --hlb-mobile-bottom-gap: 8px;
  --hlb-mobile-header-height: 74px;
}

@media (max-width: 900px){
  body.hlb-mobile-safe {
    padding-bottom: max(var(--hlb-safe-bottom), var(--hlb-mobile-bottom-gap));
  }

  body.hlb-mobile-safe [data-hlb-safe-header="1"]{
    padding-top: calc(max(var(--hlb-safe-top), var(--hlb-mobile-top-gap)) + 4px) !important;
    box-sizing: border-box;
  }

  body.hlb-mobile-safe [data-hlb-page-head="1"],
  body.hlb-mobile-safe .home-hero,
  body.hlb-mobile-safe .feed-heading,
  body.hlb-mobile-safe .account-hero,
  body.hlb-mobile-safe .profile-hero,
  body.hlb-mobile-safe .discover-hero,
  body.hlb-mobile-safe .library-hero,
  body.hlb-mobile-safe .members-hero{
    margin-top: 14px !important;
  }

  body.hlb-mobile-safe main,
  body.hlb-mobile-safe .page-main,
  body.hlb-mobile-safe .page-shell{
    scroll-padding-top: calc(var(--hlb-mobile-header-height) + 20px) !important;
  }

  body.hlb-mobile-safe .mobile-bottom-nav,
  body.hlb-mobile-safe .mobile-nav,
  body.hlb-mobile-safe .tabbar,
  body.hlb-mobile-safe .bottom-nav,
  body.hlb-mobile-safe .bottom-navigation,
  body.hlb-mobile-safe .player-bar,
  body.hlb-mobile-safe .player-dock,
  body.hlb-mobile-safe .global-player,
  body.hlb-mobile-safe .mobile-player,
  body.hlb-mobile-safe .mobile-player-dock{
    padding-bottom: max(var(--hlb-safe-bottom), var(--hlb-mobile-bottom-gap)) !important;
    box-sizing: border-box;
  }
}
