.header {
  background-color: var(--color-blue1);
  color: var(--color-white);
  z-index: 4;
  position: sticky;
  top: 0;
}

.header__cart-popup {
  position: relative;
}

.header__container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 20px;
  max-width: var(--container-width-lg);
  margin-inline: auto;
}

.header__controls {
  display: flex;
  align-self: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.header__divider--horizontal {
  display: block;
}

.header__divider--vertical {
  display: none;
}

.header__language {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header__link {
  padding: 4px 10px;
  border-radius: 6px;
}

.header__link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.header__link.is-active {
  background-color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.header__links {
  display: none;
}

.header__links--mobile {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(100vh - 106px); /* viewport height - header height */
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background-color: var(--color-background);
  color: var(--color-gray1);
  overflow-y: auto;
}

.header__links--mobile.is-active {
  display: flex;
  animation: fade-in calc(var(--transition-duration) * 2), slide-in-from-top calc(var(--transition-duration) * 2);
  gap: 32px;
}

.header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0px;
  /* Absolute positioning takes this row out of .header__top's flex centring,
     so without an explicit height the box collapses to the logo and its
     vertical position drifts with the artwork's height. Match the controls
     row, whose height comes from the tallest control (the 34px avatar), so
     the logo stays centred against them at any logo height. */
  height: 34px;
}

.header__mobile-menu {
  display: block;
  cursor: pointer;
}

.header__networks {
  display: none;
}

.header__networks--mobile {
  display: flex;
  align-items: start;
  gap: 12px;
}

.header__networks--mobile .dropdown__menu-items svg {
  color: var(--color-blue1);
}

.header__pages {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 20px;
}

.header__pages a.is-active {
  color: var(--color-blue1);
  pointer-events: none;
}

.header__pages p {
  font-size: var(--font-size-base);
}

.header__search.input--secondary .input__control {
  background-color: var(--color-white);
}

.header__section {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

.header__social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__social .dropdown__menu-item svg {
  color: var(--color-blue1);
}

.header__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header__wishlist {
  position: relative;
  display: inline-flex;
}

.header__wishlist-badge-counter {
  background-color: var(--color-blue2);
}

@media (min-width: 640px) {
  .header__controls {
    align-self: auto;
    margin-bottom: 0;
    margin-left: 12px;
  }

  .header__links--mobile {
    height: calc(100vh - 60px); /* viewport height - header height */
  }

  .header__main {
    position: static;
    /* Back in normal flow, .header__top centres this row and it also has to
       grow around the nav links, so drop the mobile-only fixed height. */
    height: auto;
  }

  .header__search.input--secondary .input__control {
    background-color: var(--color-gray6);
  }

  .header__section {
    flex-direction: row;
    align-items: center;
    width: auto;
  }
}

@media (min-width: 1200px) {
  .header__container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .header__controls {
    margin-left: 0;
  }

  .header__divider--horizontal {
    display: none;
  }

  .header__divider--vertical {
    display: block;
    height: 20px;
  }

  .header__links {
    display: flex;
    gap: 12px;
    flex-direction: row;
    align-items: center;
  }

  .header__links--mobile {
    display: none;
  }

  .header__links--mobile.is-active {
    display: none;
  }

  .header__main {
    justify-content: start;
    gap: 32px;
  }

  .header__mobile-menu.icon {
    display: none;
  }

  .header__networks {
    display: flex;
    gap: 12px;
  }

  .header__networks--mobile {
    display: none;
  }

  .header__section {
    gap: 20px;
  }
}