/* Top bar that slims down once the page is scrolled. Presentation only; toggled by header-compact.js with a hysteresis so it never flickers. */
/* No height transition on purpose: the margin compensation below is computed in the same frame, so the page never shifts under the reader. */
@media(min-width:1000px){
.mol-brand body.mol-scrolled .site-header{padding-top:calc(5px + env(safe-area-inset-top,0px))!important;padding-bottom:5px!important;min-height:0!important}
.mol-brand body.mol-scrolled .site-header .brand img{height:26px!important;width:auto!important;max-width:130px}
.mol-brand body.mol-scrolled .site-header :is(.mol-header-note,.brand small){display:none!important}
.mol-brand body.mol-scrolled .site-header :is(.phone,.mol-header-order,#notificationBell){min-height:36px!important;height:36px;padding-block:0!important}
.mol-brand body.mol-scrolled .site-header #notificationBell{width:36px;padding:0!important}
.mol-brand body.mol-scrolled .site-header .phone small{display:none}
/* Top navigation (desktop/tablet): same links, tighter box. The mobile bottom dock is a different layout and is left alone. */
 .mol-brand body.mol-scrolled .main-nav{padding-block:2px!important}
 .mol-brand body.mol-scrolled .main-nav :is(a,button){min-height:36px!important;padding-block:4px!important}
 .mol-brand body.mol-scrolled .main-nav svg{width:18px;height:18px}
}
@media(max-width:999px){
 /* Never collapse into the iOS status area on scroll. The same geometry applies before/after scrolling. */
 .mol-brand body .site-header:not([hidden]){position:sticky;top:0;transform:none;padding-top:calc(12px + env(safe-area-inset-top,0px))!important;padding-bottom:12px!important;min-height:calc(68px + env(safe-area-inset-top,0px))!important}
 .mol-brand body .site-header :is(.phone,#notificationBell){min-height:44px!important;height:44px;flex-shrink:0}
 .mol-brand body .site-header #notificationBell{width:44px;min-width:44px}
}