/* LEVEL-ONE header layer */
.site-header-shell {
  gap: clamp(0.65rem, 1.6vw, 1.2rem);
}

.site-brand-level-one {
  object-fit: contain;
  object-position: left center;
}

.site-header-theme-toggle,
.site-header-notification,
.mobile-nav-toggle {
  border-radius: var(--lo-radius-pill);
}

@media (max-width: 820px) {
  body .site-header .desktop-main-nav {
    display: none !important;
  }

  body .site-header .mobile-nav {
    display: block !important;
  }

  body .site-header .site-header-shell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 0.75rem !important;
    row-gap: 0.72rem !important;
    padding: 0.88rem 0 0.92rem !important;
    min-height: auto !important;
  }

  body .site-header .site-brand,
  body .site-header .site-header-logo-slot {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    max-width: 18.2rem !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body .site-header .site-brand-level-one-wrap {
    display: block !important;
    width: var(--lo-header-logo-mobile-w) !important;
    max-width: 18.2rem !important;
    min-width: 0 !important;
  }

  body .site-header img.site-brand-level-one,
  body .site-header [data-level-one-logo] {
    display: block !important;
    width: var(--lo-header-logo-mobile-w) !important;
    max-width: 18.2rem !important;
    height: var(--lo-header-logo-mobile-h) !important;
    max-height: var(--lo-header-logo-mobile-h) !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body .site-header .mobile-nav,
  body .site-header .site-header-menu-slot {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    margin: 0 !important;
  }

  body .site-header .mobile-nav-toggle {
    min-height: 2.1rem !important;
    padding: 0.3rem 0.54rem !important;
    border-radius: 0.72rem !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
  }

  body .site-header .site-header-theme,
  body .site-header .site-header-theme-slot {
    grid-column: 1 / 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    width: auto !important;
    margin: 0 !important;
  }

  body .site-header .site-header-theme-toggle {
    min-height: var(--lo-header-action-mobile) !important;
    padding: 0.38rem 0.72rem !important;
  }

  body .site-header .site-header-notification,
  body .site-header .site-header-notification-slot {
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--lo-header-action-mobile) !important;
    height: var(--lo-header-action-mobile) !important;
    min-width: var(--lo-header-action-mobile) !important;
    min-height: var(--lo-header-action-mobile) !important;
    margin: 0 !important;
  }

  body .site-header .site-header-notification-badge {
    top: -0.34rem !important;
    right: -0.34rem !important;
  }
}