/* Storefront staff toolbar: keep management controls usable above storefront widgets. */
:root {
  --staff-toolbar-height: 45px;
}

body.has-admin-toolbar {
  scroll-padding-top: calc(var(--staff-toolbar-height) + 12px);
}

.staff-toolbar {
  position: sticky !important;
  top: 0;
  min-height: var(--staff-toolbar-height);
  isolation: isolate;
  z-index: 2147483000 !important;
}

.staff-toolbar > *,
.staff-toolbar__primary,
.staff-toolbar__secondary,
.staff-toolbar__context {
  min-width: 0;
}

.staff-toolbar a {
  min-height: 28px;
  white-space: nowrap;
}

/* Fixed storefront layers must begin below the staff toolbar. */
.has-admin-toolbar #storefront-messages {
  top: calc(var(--staff-toolbar-height) + 1rem) !important;
}

.has-admin-toolbar #mobile-store-menu {
  top: var(--staff-toolbar-height) !important;
  height: calc(100dvh - var(--staff-toolbar-height));
}

.has-admin-toolbar #cart-add-modal {
  padding-top: calc(var(--staff-toolbar-height) + 1rem);
}

@media (max-width: 767px) {
  :root {
    --staff-toolbar-height: 47px;
  }

  .staff-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 10px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .staff-toolbar::-webkit-scrollbar {
    display: none;
  }

  .staff-toolbar__primary,
  .staff-toolbar__secondary,
  .staff-toolbar__context {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px !important;
  }

  .staff-toolbar__label,
  .staff-toolbar__separator,
  .staff-toolbar__user {
    display: none !important;
  }

  .staff-toolbar a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding-inline: 8px;
    border-radius: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .staff-toolbar {
    gap: 8px !important;
  }

  .staff-toolbar__label,
  .staff-toolbar__separator {
    display: none !important;
  }
}