.rd-header-nav a {
  color: var(--color-black-txt);
  text-decoration: none;
}
.rd-header-nav {
  background-color: var(--color-light-grey);
  padding: 20px 0;
  height: calc(100dvh - 75px);
  overflow-y: auto;
  overflow-x: clip;
  @media (min-width: 768px) {
    padding: 30px 0;
  }
  @media (min-width: 1280px) {
    padding: 0;
    overflow: visible;
    background-color: transparent;
    height: auto;
    justify-self: flex-end;
  }
}

.rd-header-nav__list {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
  @media (min-width: 768px) {
    gap: 20px;
  }
  @media (min-width: 1280px) {
    flex-flow: row nowrap;
    gap: 35px;
    align-items: center;
  }
}

.rd-header-nav__item {
  list-style: none;
  display: grid;
}

.rd-header-nav__item_about {
  @media (min-width: 1280px) {
    position: relative;
  }
}

.rd-header-nav__item_search {
  display: none;
  @media (min-width: 1280px) {
    display: grid;
  }
}

.rd-header-nav__separator {
  list-style: none;
  height: 1px;
  background-color: var(--color-med-grey);
  @media (min-width: 1280px) {
    height: 14px;
    width: 2px;
    background-color: var(--color-black-txt);
  }
}

.rd-header-nav__link {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  transition: color 0.2s ease-in-out;
  @media (min-width: 768px) {
    padding: 10px 30px;
  }
  @media (min-width: 1280px) {
    column-gap: 10px;
    padding: 0;
  }
  & > span {
    font-family: var(--font-family-body);
    font-weight: 700;
    font-size: var(--font-size-subtitle-s);
    line-height: var(--font-line-height-subtitle-s);
    text-box: trim-both cap alphabetic;
    text-transform: uppercase;
    color: var(--color-black-txt);
    border: 0;
    transition: color 0.2s ease-in-out;
    @media (min-width: 1280px) {
      font-size: var(--font-size-body-s);
      line-height: var(--font-line-height-body-s);
    }
    &::before {
      display: none;
    }
  }
  & > svg {
    width: 24px;
    aspect-ratio: 1;
    transition: color 0.2s ease-in-out;
    color: var(--color-black-txt);
    @media (min-width: 1280px) {
      width: 16px;
    }
  }
  &[aria-expanded='true'] {
    & > svg {
      transform: rotate(180deg);
      /* color: var(--color-brand-orange); */
    }
    & > span {
      /* color: var(--color-brand-orange); */
    }
    &:before {
      @media (min-width: 1280px) {
        content: '';
        position: absolute;
        top: 100%;
        left: 0%;
        width: 100%;
        height: 40px;
      }
    }
  }
  &:hover {
    & > span {
      color: var(--color-brand-orange);
    }
    & > svg {
      color: var(--color-brand-orange);
    }
  }
  &:focus {
    & > span {
      color: var(--color-brand-orange);
    }
    & > svg {
      color: var(--color-brand-orange);
    }
  }
  &:focus-visible {
    & > span {
      color: var(--color-brand-orange);
    }
    & > svg {
      color: var(--color-brand-orange);
    }
  }
  &:focus {
    outline: none !important;
    & > span {
      color: var(--color-black-txt);
    }
    & > svg {
      color: var(--color-black-txt);
    }
  }
}

button.rd-header-nav__link {
  width: 100%;
}

button.rd-header-nav__link[aria-expanded] {
  @media (min-width: 1280px) {
    position: relative;
    &:after {
      pointer-events: none;
      content: '';
      position: absolute;
      top: calc(100% + 19px);
      left: calc(50% - 15px);
      width: 30px;
      aspect-ratio: 1;
      transform: rotate(45deg);
      background-color: var(--color-white);
      z-index: 2;
      opacity: 0;
    }
    &[aria-expanded='true'] {
      &:after {
        opacity: 1;
      }
    }
  }
}

a.rd-header-nav__link,
button.rd-header-nav__link_cart {
  justify-self: flex-start;
  width: auto;
  &:after {
    content: '';
    height: 24px;
    @media (min-width: 1280px) {
      display: none;
    }
  }
}

button.rd-header-nav__link_cart {
  & > svg {
    display: none;
    @media (min-width: 1280px) {
      display: block;
      width: 25px;
      height: 20px;
    }
  }
  & > span {
    @media (min-width: 1280px) {
      display: none;
    }
  }
}

.rd-header-nav__link_search {
  & > svg {
    @media (min-width: 1280px) {
      width: 20px;
    }
  }
}

.rd-header-nav__dropdown {
  display: none;
  padding: 10px 20px;
  background-color: var(--color-white);
  row-gap: 20px;
  @media (min-width: 768px) {
    padding: 10px 30px;
  }
  @media (min-width: 1280px) {
    position: absolute;
    z-index: 1;
    border-radius: 14px;
    box-shadow: 0 11.456px 22.912px 0 rgba(0, 0, 0, 0.15);
    padding: 40px;
    overflow-y: auto;
    overflow-x: clip;
    max-height: calc(100dvh - 76px);
  }
  &[data-open='true'] {
    display: grid;
  }
}

.rd-header-nav__dropdown_sport,
.rd-header-nav__dropdown_brand {
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 27px;
  }
}

.rd-header-nav__dropdown_sport {
  grid-template-rows: repeat(var(--_rows-mob), auto);
  grid-auto-flow: column;
  @media (min-width: 768px) {
    grid-template-rows: repeat(var(--_rows-tab), auto);
  }
  @media (min-width: 1280px) {
    grid-template-rows: repeat(var(--_rows-desk), auto);
    top: 100%;
    width: var(--container-width);
    left: var(--desk-edge);
    gap: 20px;
  }
}

.rd-header-nav__dropdown_brand {
  @media (min-width: 1280px) {
    top: 100%;
    width: 1100px;
    left: calc((100% - 1100px) / 2);
    grid-template-columns: repeat(5, 1fr);
    row-gap: 14px;
    column-gap: 30px;
  }
}

.rd-header-nav__dropdown_about {
  @media (min-width: 1280px) {
    width: max-content;
    top: calc(100% + 28px);
    left: 50%;
    transform: translateX(-50%);
  }
}

.rd-header-nav__dropdown-item {
  list-style: none;
  display: grid;
}

.rd-header-nav__dropdown-link {
  padding: 10px 0;
  justify-self: flex-start;
  transition: color 0.2s ease-in-out;
  @media (min-width: 1280px) {
    padding: 15px 0;
  }
  & > span {
    display: block;
    font-family: var(--font-family-headings-bold);
    font-size: var(--font-size-h6);
    line-height: var(--font-line-height-h6);
    text-box: trim-both cap alphabetic;
    text-transform: uppercase;
    border: 0;
    color: var(--color-black-txt);
    transition: color 0.2s ease-in-out;
    &::before {
      display: none;
    }
  }
  & > svg {
    display: none;
    color: var(--color-black-txt);
    transition: color 0.2s ease-in-out;
  }
  &:hover {
    & > span {
      color: var(--color-brand-orange);
    }
    & > svg {
      color: var(--color-brand-orange);
    }
  }
  &:focus {
    & > span {
      color: var(--color-brand-orange);
    }
    & > svg {
      color: var(--color-brand-orange);
    }
  }
  &:focus-visible {
    & > span {
      color: var(--color-brand-orange);
    }
    & > svg {
      color: var(--color-brand-orange);
    }
  }
  &:focus {
    outline: none !important;
    & > span {
      color: var(--color-black-txt);
    }
    & > svg {
      color: var(--color-black-txt);
    }
  }
}

.rd-header-nav__dropdown-link_sport {
  @media (min-width: 1280px) {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    & > svg {
      display: block;
      width: 26px;
      height: 24px;
    }
  }
}

.rd-header-nav__dropdown-link_brand {
  @media (min-width: 1280px) {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 14px;
    padding: 0;
    width: 100%;
    & > span {
      font-family: var(--font-family-body);
      font-size: var(--font-size-body-s);
      line-height: var(--font-line-height-body-s);
      font-weight: 500;
      text-align: center;
      text-transform: capitalize;
    }
    @media (hover: hover) {
      &:hover {
        & > .rd-header-nav__dropdown-brand-icon {
          border-color: var(--color-black-bg);
        }
        & > span {
          color: var(--color-black-txt);
        }
        & svg {
          color: var(--color-black-txt);
        }
      }
    }
    &:focus-visible {
      & > .rd-header-nav__dropdown-brand-icon {
        border-color: var(--color-black-bg);
      }
      & > span {
        color: var(--color-black-txt);
      }
      & svg {
        color: var(--color-black-txt);
      }
    }
  }
}

.rd-header-nav__dropdown-link_disabled {
  pointer-events: none;
}

.rd-header-nav__dropdown-brand-icon {
  display: none;
  @media (min-width: 1280px) {
    display: flex;
    width: 100%;
    height: 90px;
    border-radius: 14px;
    border: 1px solid var(--color-light-grey);
    padding: 10px 25px;
    transition: border-color 0.2s ease-in-out;
  }
  & > img {
    @media (min-width: 1280px) {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}