/* Staff-only Browse header: match public Browse layout, with measured sticky stop below staff/admin mode bar. Public Browse untouched. */
@media (max-width:760px){
  html:has(.site-header .header-mode-switch){
    --staff-browse-sticky-top:0px;
  }

  html:has(.site-header .header-mode-switch) body main.site-main,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page{
    padding-top:0!important;
    margin-top:0!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed{
    position:sticky!important;
    top:var(--staff-browse-sticky-top)!important;
    z-index:75!important;
    width:100vw!important;
    max-width:100vw!important;
    margin:0 0 .48rem calc(50% - 50vw)!important;
    transform:none!important;
    overflow:visible!important;
    box-shadow:0 10px 24px rgba(0,0,0,.30)!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section .browse-secondary-header,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated .browse-secondary-header,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed .browse-secondary-header{
    display:block!important;
    min-height:0!important;
    padding:calc(.30rem - (.10rem * var(--browse-collapse-progress, 0))) 1.25rem calc(.16rem - (.04rem * var(--browse-collapse-progress, 0)))!important;
    overflow:visible!important;
    background:linear-gradient(180deg,rgba(4,15,10,.99),rgba(4,17,11,.98))!important;
    border-top:0!important;
    border-bottom:0!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section .browse-header-row,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed .browse-header-row{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    margin:0!important;
    overflow:visible!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section .browse-heading-copy,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated .browse-heading-copy,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed .browse-heading-copy{
    min-height:42px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section .browse-page-title,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated .browse-page-title,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed .browse-page-title{
    display:block!important;
    margin:0!important;
    padding:0!important;
    font-size:clamp(2.9rem, calc(4.0rem - (1.10rem * var(--browse-collapse-progress, 0))), 4.0rem)!important;
    line-height:.94!important;
    min-height:42px!important;
    transform:translateY(calc(.03rem * (1 - var(--browse-collapse-progress, 0))))!important;
    overflow:visible!important;
    transition:none!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section .browse-page-subtitle,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated .browse-page-subtitle{
    display:block!important;
    max-height:calc(3.9rem * (1 - var(--browse-collapse-progress, 0)))!important;
    margin-top:calc(.20rem * (1 - var(--browse-collapse-progress, 0)))!important;
    margin-bottom:calc(.28rem * (1 - var(--browse-collapse-progress, 0)))!important;
    opacity:calc(1 - var(--browse-collapse-progress, 0))!important;
    transform:translateY(calc(-.28rem * var(--browse-collapse-progress, 0)))!important;
    overflow:hidden!important;
    pointer-events:auto!important;
    transition:none!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed .browse-page-subtitle{
    max-height:0!important;
    margin:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section .browse-after-hero-action,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated .browse-after-hero-action,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed .browse-after-hero-action{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    min-height:calc(42px - (4px * var(--browse-collapse-progress, 0)))!important;
    padding:calc(.12rem - (.04rem * var(--browse-collapse-progress, 0))) .08rem 0!important;
    margin:0!important;
    transform:none!important;
    border-top:2px solid rgba(217,157,18,.62)!important;
    border-bottom:0!important;
    overflow:visible!important;
  }

  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page #listing-grid,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-animated ~ #listing-grid,
  html:has(.site-header .header-mode-switch) body main.site-main .container.browse-page .browse-page-header-section.is-browse-header-collapsed ~ #listing-grid{
    padding-top:.50rem!important;
  }
}
