/* ==========================================
   GLOBAL: Treat <=1024px as "mobile mode"
   Works across pages by using body.hl-mobile
========================================== */

/* ✅ Show mobile bottom bar earlier (even if Bootstrap hides it) */
body.hl-mobile nav.mobile-bottom-bar{
  display: flex !important;
}

/* ✅ Hide desktop-only columns earlier (Dashboard + any page using d-lg-block rails) */
body.hl-mobile .d-none.d-lg-block,
body.hl-mobile .d-none.d-xl-block{
  display: none !important;
}

/* ✅ If you have any "desktop actions" that should NOT show in mobile */
body.hl-mobile .store-desktop-actions{
  display: none !important;
}

/* ✅ If you have any mobile pill toolbars that should show earlier (example: Store header pill) */
body.hl-mobile .store-mobile-pill{
  display: flex !important;
}

/* ✅ Your existing “mobile modal open” behaviors currently use 992 in some places
   This forces the same effect when <=1024 too */
body.hl-mobile.modal-open-mobile #topFloat,
body.hl-mobile.modal-open-mobile nav.mobile-bottom-bar{
  display: none !important;
}

/* Optional: if you rely on offcanvas-open hiding toolbars */
body.hl-mobile.offcanvas-open #topFloat,
body.hl-mobile.offcanvas-open nav.mobile-bottom-bar{
  display: none !important;
}
/* FORCE the bottom bar to show at <=1024 even if it has d-md-none */
body.hl-mobile nav.mobile-bottom-bar.d-md-none{
  display: flex !important;
}

/* (optional) make sure it stays visible even if something else sets display:none */
body.hl-mobile nav.mobile-bottom-bar{
  display: flex !important;
}

/* prevent content being hidden behind the fixed bottom bar */
body.hl-mobile{
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}