.header {
  z-index: 999;
  position: sticky;
  top: -2.0625rem;
  background-color: #f3f3f1;
}

.header__categories--wrapper {
  border-bottom: 1px solid #dddddd;
}

.header__categories {
  font-family: "Oswald", sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  text-align: center;
  padding-block: 0.5rem;
}

.header__category-item {
  padding-inline: 2rem;
  line-height: 1;
  display: inline-block;
  transition: color 300ms;
}

.header__category-item:not(:last-child) {
  border-right: 1px solid #dddddd;
}

.header__category-item:hover {
  color: #db1215;
}

.header__navigation-wrapper {
  width: 100%;
  background-color: #f3f3f1;
}

.header__navigation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  align-items: center;
}

.header__menu,
.header__actions {
  display: flex;
  align-items: center;
}

.header__actions {
  justify-content: flex-end;
  gap: 1.5rem;
}

.header__control {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 300ms ease;
}

.header__control svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header__control--icon {
  justify-content: center;
}

.header__wishlist {
  position: relative;
}

.header__wishlist-count {
  position: absolute;
  top: -0.4rem;
  right: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: #111;
  border-radius: 50%;
  color: #fff;
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.header__control:hover,
.header__control:focus-visible {
  color: #db1215;
}

.header__logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header__logo img {
  max-width: 14rem;
}

.home .header__logo img {
  margin-bottom: -2rem;
}

.custom-logo-link {
  z-index: 1;
}

.header__logo-substrate {
  display: none;
  position: absolute;
  top: 50%;
  translate: 0 -25%;
  width: 18rem;
  height: 10rem;
  background-color: #f3f3f1;
  clip-path: polygon(50% 0, 100% 50%, 50% 80%, 0 50%);
}

.home .header__logo-substrate {
  display: block;
}

@media (max-width: 940px) {
  .header__navigation {
    grid-template-columns: 1fr auto 1fr;
    padding-inline: 1rem;
    padding-block: 0.75rem;
  }

  .header__control > span,
  .header__control--cart > span {
    display: none;
  }

  .header__actions {
    gap: 0.75rem;
  }

  .header__categories {
    overflow-x: auto;
    white-space: nowrap;
    text-align: left;
  }

  .home .header__logo img {
    margin-bottom: unset;
  }

  .header__logo-substrate {
    width: 10rem;
    height: 5rem;
  }

  .header__logo img {
    max-width: 10rem;
  }
}

@media (max-width: 440px) {
  .header__control[aria-label="Аккаунт"],
  .header__control[aria-label="Избранное"] {
    display: none;
  }
}

@media (max-width: 1250px) {
  .header__categories--wrapper {
    display: none;
  }
}
