/*
 * Frozen public-header baseline.
 * This sheet deliberately owns only the shared cinema_brush_header geometry.
 * Page bodies, the library hero, episode grid, and recharge modal are out of
 * scope so their locked visual baselines cannot be affected.
 */
@media (min-width:761px) {
  .hg-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100% !important;
    min-height: 76px !important;
    margin: 0 !important;
  }

  .hg-topbar__inner {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 1880px !important;
    min-height: 76px !important;
    height: 76px !important;
    margin: 0 auto !important;
    padding: 0 32px !important;
  }

  /* The continuous-reel stylesheet previously made its copy of the same
     header relative.  Keep the shared header behavior consistent without
     altering the reel stage or its scroll container. */
  .hg-app--reels .hg-topbar {
    position: sticky !important;
    top: 0 !important;
  }

  /* Legacy detail CSS reserved a header-sized blank band before the shared
     component.  The header itself now supplies the only top edge. */
  body.detail-wrap.hg-detail-page {
    padding-top: 0 !important;
  }

  /* The legacy standalone play shell used the same obsolete reserved band. */
  body.hg-play-page {
    padding-top: 0 !important;
  }
}

/* Keep every desktop navigation entry reachable when the viewport is narrower
   than the new wide layout, without altering the dedicated mobile header. */
@media (min-width: 761px) and (max-width: 1280px) {
  .hg-topbar__inner {
    gap: 10px !important;
    padding: 0 20px !important;
  }

  .hg-nav { gap: 0 !important; }
  .hg-nav a { padding-left: 8px !important; padding-right: 8px !important; }
  .hg-search { width: clamp(160px, 18vw, 210px) !important; }
  .hg-reel-account { gap: 6px !important; }
  .hg-reel-account > a { min-height: 38px !important; padding: 0 9px !important; font-size: 12px !important; }
  .hg-reel-account__recharge, .hg-reel-account__vip { min-width: 78px !important; }
}

@media (min-width: 761px) and (max-width: 1120px) {
  .hg-search { width: 40px !important; padding: 0 8px !important; }
  .hg-search input { display: none !important; }
}