/* Perfex Customers Header: prevent wrapping when many menu items */
@media (min-width: 768px) {
  /* Container as flex to keep logo + menu aligned */
  .customers .navbar-default.header .container {
    display: flex;
    align-items: center;
  }

  .customers .navbar-default.header .navbar-header {
    float: none; /* override bootstrap */
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }

  /* Keep collapse content on one line and shrink */
  .customers .navbar-default.header .navbar-collapse {
    float: none; /* override bootstrap */
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0; /* allow flex children to shrink properly */
  }

  /* Main nav horizontally scrollable and non-wrapping */
  .customers .navbar-default.header .navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    float: none; /* override bootstrap float right */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    white-space: nowrap;
    gap: 0.25rem; /* small spacing between items */
  }

  /* Prevent items from shrinking and keep them inline */
  .customers .navbar-default.header .navbar-nav > li {
    flex: 0 0 auto;
  }

  /* Keep profile/avatar pinned to the far right */
  .customers .navbar-default.header .navbar-nav > li.customers-nav-item-profile {
    margin-left: auto;
  }
}