/* Mobile shell (< 768px): one deterministic layout for every page.
   Top bar, row 1: sidebar trigger | store scope | notifications | theme.
   Top bar, row 2: global search.
   The quick-action shortcuts (Home, Orders, Dispatch, Print, Calls) are a
   desktop-only affordance; on phones the sidebar covers navigation.
   The language pill is hidden here on phones; it stays in the sidebar footer.
   Replaces the conflicting absolute-positioning rules that came from the bundle
   CSS, index-gm-mobile.css and gm-unified-header-v1.css. Desktop untouched. */
@media (max-width: 767.98px) {
  header.premium-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 10px 10px !important;
    overflow: visible !important;
    /* the bundle animates the header with a transform, which would turn it
       into the containing block of the fixed children below */
    transform: none !important;
    animation: none !important;
  }

  /* ---- Row 1: scope row ------------------------------------------------- */
  header.premium-header .mobile-header-meta {
    position: static !important;
    order: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 40px !important;
    /* room for the fixed trigger (start) and bell + theme (end) */
    padding: 0 96px 0 48px !important;
  }
  [dir="rtl"] header.premium-header .mobile-header-meta {
    padding: 0 48px 0 96px !important;
  }
  header.premium-header .mobile-header-meta > div:first-child {
    order: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  header.premium-header .mobile-header-meta > div:first-child > button,
  header.premium-header .store-switcher-trigger {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    justify-content: flex-start !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  header.premium-header .mobile-live-sync,
  header.premium-header .mobile-search-host,
  header.premium-header .mobile-account-locale .gm-lang-toggle {
    display: none !important;
  }
  header.premium-header .mobile-account-locale {
    position: static !important;
    inset: auto !important;
    order: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }
  header.premium-header .mobile-account-locale > * {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
  }
  header.premium-header .mobile-account-locale .mobile-header-user {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
  }

  /* ---- Row 2: search ------------------------------------------------------ */
  header.premium-header .mobile-search-row {
    order: 1 !important;
    display: block !important;
    width: 100% !important;
  }
  header.premium-header .mobile-search-row .global-search-desktop {
    display: block !important;
  }
  header.premium-header .mobile-search-row .global-search-desktop > div {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  /* ---- Fixed controls in row 1 -------------------------------------------- */
  header.premium-header .mobile-header-actions > button:first-child,
  header.premium-header .mobile-header-actions > button[data-sidebar="trigger"],
  header.premium-header .mobile-header-actions .mobile-notification-shell,
  header.premium-header .mobile-header-actions .mobile-theme-toggle {
    position: fixed !important;
    top: 8px !important;
    z-index: 30 !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    flex: none !important;
  }
  header.premium-header .mobile-header-actions > button:first-child,
  header.premium-header .mobile-header-actions > button[data-sidebar="trigger"] {
    inset-inline-start: 10px !important;
    inset-inline-end: auto !important;
    border: 1px solid hsl(var(--border)) !important;
    background: hsl(var(--background) / 0.8) !important;
  }
  header.premium-header .mobile-header-actions .mobile-notification-shell {
    inset-inline-end: 58px !important;
    inset-inline-start: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  header.premium-header .mobile-header-actions .mobile-notification-shell > button {
    position: relative !important;
    inset: auto !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }
  header.premium-header .mobile-header-actions .mobile-theme-toggle {
    inset-inline-end: 10px !important;
    inset-inline-start: auto !important;
  }

  /* ---- Quick-action shortcuts: desktop only --------------------------------
     The container also hosts the fixed trigger / bell / theme buttons above, so
     it stays in the tree with no box of its own; the shortcut buttons
     (Home, Orders, Dispatch, Print, Calls) are hidden on phones. */
  header.premium-header .mobile-header-actions {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    z-index: 30 !important;
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none !important;
  }
  header.premium-header .mobile-header-actions > * {
    pointer-events: auto !important;
  }
  header.premium-header .mobile-header-actions > button:not(:first-child):not([data-sidebar="trigger"]):not(.mobile-theme-toggle),
  header.premium-header .mobile-header-actions > a {
    display: none !important;
  }
}