/* Loaded after Bootstrap to keep the profile menu in normal document flow. */
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
}

/* Keep localized account-menu labels in their natural casing. */
.profile-navigation-list > li > a,
.profile-navigation-list .profile-navigation-logout button {
  text-transform: none;
}

.profile-navigation-toggle {
  position: static;
  float: none;
}

/* A softer account-page canvas keeps the white cards readable without
   changing the global storefront or checkout background. */
body.my-area-page {
  background-color: #f7f4ef;
}

/* Keep signed-in account pages visually balanced even when the content is short. */
@media (min-width: 768px) {
  .width-1000px.my-wrap {
    min-height: max(620px, calc(100vh - 220px));
  }
}

/* Keep the account heading above the navigation while the first menu item
   starts on the same baseline as the content column. */
@media (min-width: 61.25em) {
  .my-wrapper {
    margin-top: 56px;
  }

  .my-navigation-wrapper {
    position: relative;
  }

  .profile-navigation-title {
    position: absolute;
    top: -56px;
    left: 0;
    right: 0;
    margin: 0 14px 20px;
  }
}

@media (max-width: 61.24em) {
  .profile-navigation .navbar-offcanvas {
    position: static !important;
    width: 100%;
    max-width: none;
    height: auto;
    overflow: visible;
    transform: none !important;
  }
}

/* The signed-in label is wider than the old "Profil" label. */
@media (min-width: 769px) {
  .header-top .header-main-search {
    flex: 1 1 360px;
    min-width: 0;
    max-width: 500px;
  }

  .header-top .header-main-quickLinks {
    flex: 0 0 auto;
    min-width: 0;
  }

  .header-top .header-profile {
    padding-right: 14px;
  }

  .header-top .header-profile > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 112px;
    min-width: 112px;
    padding: 0 4px;
    white-space: nowrap;
  }
}