.header-category-navigation-container {
  display: flex;
  padding: var(--Category-Menu-Navigation-Top-Vertical-Padding, 1rem) var(--Category-Menu-Navigation-Horizontal-Padding, 1rem) var(--Category-Menu-Navigation-Bottom-Vertical-Padding, 1.25rem) var(--Category-Menu-Navigation-Horizontal-Padding, 1rem);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Category-Menu-Navigation-Gap-Link, 1.25rem);
}

.header-category-tab-container {
  display: flex;
  width: 100%;
  padding: var(--Header-Category-Navigation-Vertical-Padding, 0.25rem) var(--Header-Category-Navigation-Horizontal-Padding, 0.25rem);
  justify-content: space-between;
  align-items: center;
  border-radius: var(--Header-Category-Navigation-Radius, 624.9375rem);
  background: var(--Header-Category-Navigation-Background, #DFE2E5);

  & .navigation-tab span.icon.un-icon-plus,
  .navigation-tab span.icon.un-icon-minus {
    display: none;
  }
}

.header-category-pill-container {
  display: flex;
  padding: var(--Header-Category-Vertical-Padding, 4px) var(--Header-Category-Horizontal-Padding, 4px);
  justify-content: space-between;
  align-items: center;
  border-radius: var(--Header-Category-Radius, 9999px);
  background: var(--Header-Category-Background, #DFE2E5);

  & .category-pill-active,
   .category-pill-active:hover{
        background-color: var(--Navigation-Pill-Active-Background, #f9f9f7);
        color: var(--Navigation-Pill-Active-Text);
        outline: var(--Stroke-S) solid var(--Border-Key-Brand-Mild-Focused);
  }
}

.header-category-boxes-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;

}

.header-category-box {
  display: none;
  flex-wrap: wrap;

  & .item-menu-wrapper{
    display: flex;
  }

& .category-link-button-wrapper,
  .highlight-list-menu-wrapper {
      flex: 0 0 100%;
  }
}

.header-category-box.is-open {
  display: flex;
  padding-left: var(--Category-Menu-Navigation-Horizontal-Padding-List, 1.25rem);
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;

  & .item-menu-cont{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--Category-Menu-Navigation-Gap-Link, 1.25rem);

    & .item-menu-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--Category-Menu-Navigation-Gap-Link, 1.25rem);
    }
  }

  & .highlight-list-menu-wrapper ,
  & .category-link-button-wrapper {
    margin-top: var(--Category-Menu-Navigation-Vertical-Gap, 2rem);
  }
}

.navigation-tab-unica:hover {
  color: var(--Link-Button-Link-Hover-Text);
}

@media (width > 1200px) {
  .header-category-tab-container {
    width: fit-content;
  }
}

@media (width < 1200px) {
  .item-menu-text {
    display: none;
  }

  .header-category-navigation-container {
    padding: 0;

    & .header-category-mobile-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--Nav-Link-List-Content-Gap, 24px);

      & button.navigation-tab{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: var(--Nav-Link-List-Text, #001C35);
        font: var(--Subtitle-Manrope-Fixed);
        border:none;
        background: none;
        padding: 0;
      }

      & button.navigation-tab:focus {
        outline: none;
      }

      & button.navigation-tab:focus-visible {
        outline: var(--Stroke-S) solid var(--Border-Key-Brand-Mild-Focused);
      }

      & .navigation-tab span {
        text-align: left;
      }

      & .item-menu-link {
        color: var(--Nav-Link-List-Text, #001C35);

        & .item-menu-title{
          font: var(--Heading-Fixed);
          text-decoration-line: none;
        }
      }

      & .navigation-tab-unica {
            & .navigation-tab-unica-label{
              font: var(--Single-Line-Body-Small-Link);
            }

            & .un-icon-arrow-right {
              display: none;
            }
      }
    }
  }

  .header-category-box {
    flex-flow: column nowrap;
    gap: var(--Nav-Link-List-Gap, 20px);
    margin-top: var(--Nav-Link-List-Gap, 20px);

    & .item-menu-container {
      display: flex;
      flex-direction: column;
      gap: var(--Nav-Link-List-Gap, 20px);
    }
  }
}

@media (width < 768px) {
  .header-category-navigation-container {
    & .header-category-mobile-container {
      & button.navigation-tab{
        width: 100%;
        display: flex;
        justify-content: space-between;
        color: var(--Nav-Link-List-Text, #001C35);
        font: var(--Subtitle-Manrope-Fixed);
        border:none;
        background: none;
        padding: 0;
      }

      & .item-menu-link {
        & .item-menu-title{
          font: var(--Body-Medium);
          text-decoration-line: none;
        }
      }
    }
  }
}