/* One top edge for public page banners, below the shared header. */
html:has(#fhSharedHeader) body.fhSidebarLayout {
  --fhPageTopGap: 10px;
}

html:has(#fhSharedHeader) body.fhSidebarLayout:is(.homePageActive, .replaysPageActive, .videosPageActive, .livePageActive, .aboutPageActive, .marksPageActive) #app {
  padding-top: var(--fhPageTopGap) !important;
}

html:has(#fhSharedHeader) body.fhSidebarLayout #app > :is(.homeApprovedHero, .replaysDiscoveryPage, .videoHubPageApproved, .livePageV408, .aboutHeroV390, .marksPageV363) {
  margin-top: 0 !important;
}

/* Standalone pages share the same frame as the application pages. */
html:has(#fhSharedHeader) body.fhSidebarLayout.loadoutStandaloneV2 main {
  margin-top: var(--fhPageTopGap) !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep the mod's hero and cards; remove only their extra outer shell. */
html:has(#fhSharedHeader) body.fhSidebarLayout #app > .marksPageV363.marksRedesignR2.marksRedesignR4 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (min-width: 1101px) {
  html:has(#fhSharedHeader) body.fhSidebarLayout #app > :is(.homeApprovedHero, .replaysDiscoveryPage, .videoHubPageApproved, .livePageV408, .aboutHeroV390, .marksPageV363) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 1100px) {
  html:has(#fhSharedHeader) body.fhSidebarLayout.loadoutStandaloneV2 main {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}