/* Reserve the measured desktop header height before the first layout. */
@media(min-width:1351px){html{--touch-order-header-height:164px}}
/* Async margin and stock lines reserve their final height from the start. */
html[data-touch-theme] #mainOrderList .o-i-code>[data-action=marginItem],html[data-touch-theme] #mainOrderList .o-i-code>[data-action=stockInfo]{display:block;min-height:18px;line-height:18px}
html[data-touch-theme] #mainOrderList .o-i-code>.title,html[data-touch-theme] #mainOrderList .o-i-code>.title.alone{margin-top:0!important;margin-bottom:0!important}
/* The page controls sit on the horizontal centre, independently of the count. */
body.menu-item-1 .order-pages{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;gap:12px!important;width:100%!important;box-sizing:border-box!important}
body.menu-item-1 .order-pages>span{grid-column:1;min-width:0}
body.menu-item-1 .order-pages>div{grid-column:2;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;flex-wrap:wrap}
@media(max-width:900px){body.menu-item-1 .order-pages{display:flex!important;flex-wrap:wrap;justify-content:center!important}body.menu-item-1 .order-pages>span{flex:1 1 100%;text-align:center}body.menu-item-1 .order-pages>div{justify-content:center!important}}
/* Pagination remains right aligned with balanced vertical breathing room. */
body.menu-item-1 .order-pages{display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:8px 12px!important;padding-top:10px!important;padding-bottom:10px!important;margin-top:0!important;margin-bottom:0!important;min-height:0!important}
body.menu-item-1 .order-pages>span{flex:0 1 auto!important;text-align:left!important}
body.menu-item-1 .order-pages>div{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;margin-left:auto!important;gap:6px!important}
@media(max-width:900px){body.menu-item-1 .order-pages>span{flex:0 1 auto!important}body.menu-item-1 .order-pages>div{margin-left:auto!important;justify-content:flex-end!important}}
/* The normal 8px list inset must not add extra space above the pager. */
html[data-touch-theme] body:has(#mainOrderList):has(.order-pages)>#body{padding-top:var(--touch-order-header-height,164px)!important}
body.menu-item-1 .order-pages{padding-left:0!important;padding-right:0!important}
body.menu-item-1 .order-pages>div>*{margin-top:0!important;margin-bottom:0!important;align-self:center!important}
/* Keep the header in normal flow: Safari must not count its height twice. */
html[data-touch-theme] body:has(#mainOrderList)>header{position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:100%!important;box-sizing:border-box!important}
html[data-touch-theme] body:has(#mainOrderList)>#body{padding-top:8px!important;margin-top:0!important}
html[data-touch-theme] body:has(#mainOrderList):has(.order-pages)>#body{padding-top:0!important}
/* Narrow desktop windows scroll instead of crushing product names in Safari. */
html[data-touch-theme] body:has(label.switchDisplayMode:not(.active)) .orders-view{overflow-x:auto!important;min-width:0!important;max-width:100%!important}
html[data-touch-theme] body:has(label.switchDisplayMode:not(.active)) #mainOrderList .o-i-name{min-width:220px!important}
@media(max-width:1600px){html[data-touch-theme] body:has(label.switchDisplayMode:not(.active)) #mainOrderList{min-width:1500px!important}}

/* PD invoice-only results still use the same navigation flow as the order list. */
html[data-touch-theme] body:has(.invoice-view)>header{position:sticky!important;top:0!important;left:auto!important;right:auto!important;width:100%!important;box-sizing:border-box!important}
html[data-touch-theme] body:has(.invoice-view)>#body{padding-top:8px!important;margin-top:0!important}
html[data-touch-theme] body:has(.invoice-view){scroll-padding-top:calc(var(--touch-order-header-height,156px) + 8px)}