.plp-header-categories {
  --color-shadow: 0, 0, 0;
  padding: 0;

  .plp-header-categories-content {
    padding: 0;

    .grid {
      padding-top: 0.4rem;
      gap: 1.6rem;
      @media screen and (min-width: 990px) {
        justify-content: space-evenly;
      }

      @media screen and (max-width: 743px) {
        &.grid--1-col-tablet-down .grid__item {
          width: calc(85% - var(--grid-mobile-horizontal-spacing) - 3rem);
        }
      }

      .plp-header-categories__card {
        @media screen and (min-width: 990px) {
          max-width: 100%;
        }
        .full-unstyled-link:focus-visible {
          outline: 0.2rem solid;
          outline-offset: 0.2rem;
        }

        .plp-categories-image-container {
          overflow: hidden;
          line-height: 0;

          .plp-categories-image {
            width: 100%;
            object-fit: cover;
            background-color: var(--color-white-3);
          }
        }

        &:hover .plp-categories-image {
          transform: scale(1.03);
          transition: transform var(--duration-long) ease;
        }

        .plp-header-categories__card-content {
          h3 {
            margin: 1.6rem 0 0.8rem;
          }

          p {
            color: rgb(var(--color-foreground));
            margin: 0;
            max-width: 50%;
            text-wrap: initial;
          }
        }
      }
    }
    ul.grid::after{
      display: none;
    }
  }

  .slider-buttons {
    justify-content: space-between;
    padding: 0 4rem;
    position: absolute;
    width: 100%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    pointer-events: none;

    @media screen and (max-width: 743px) {
      display: none;
    }

    .plp-categories-slider-button {
      pointer-events: all !important;
      cursor: pointer;
      transform: rotate(90deg);
      background-color: rgb(var(--color-background));
      border: none;
      padding: 0.9rem;
      border-radius: 50%;

      svg {
        display: flex;
      }

      &:hover {
        background-color: rgb(var(--color-foreground));

        svg path {
          stroke: rgb(var(--color-background));
        }
      }

      &:focus {
        outline: 0.2rem solid;
      }

      &:disabled {
        visibility: hidden;
      }
    }
  }

  &.plp-header-sub-category-type .grid .grid__item {
    background-color: var(--color-white-3);
    padding: 2rem 1.6rem;
  }

  &.plp-header-sub-category-alt-type {
    background-color: var(--color-white-3);

    .plp-header-categories-image-alt {
      position: relative;
      line-height: 0;

      &:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(
            0deg,
            rgba(var(--color-shadow), 0.2) 0%,
            rgba(var(--color-shadow), 0.2) 100%
          ),
          linear-gradient(
            270deg,
            rgba(var(--color-shadow), 0) 52.65%,
            rgba(var(--color-shadow), 0.4) 98.34%
          );
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        max-height: 32rem;

        @media screen and (min-width: 744px) {
          max-height: 40rem;
        }
      }

      .plp-header-categories-image-alt-title-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        display: flex;
        align-items: end;

        h2 {
          color: rgb(var(--color-background));
          max-width: 30rem;
          margin: 2.4rem 1.6rem;

          @media screen and (min-width: 744px) {
            margin: 4rem;
            font-size: 5.4rem;
            line-height: 5.2rem;
          }
        }
      }
    }

    .grid {
      gap: 0;
      margin-top: 0;

      .grid__item {
        @media screen and (max-width: 743px) {
          &.grid--1-col-tablet-down .grid__item {
            width: calc(72% - var(--grid-mobile-horizontal-spacing) - 3rem);
          }
        }

        &:first-of-type {
          margin-left: 0;
        }

        &:not(:last-child) {
          border-right: solid 0.1rem rgb(var(--color-foreground));
        }

        .full-unstyled-link {
          height: 100%;
          @media screen and (min-width: 990px) {
            margin: 0 auto;
            max-width: 329px;
          }
        }

        .plp-header-categories__card-content {
          padding: 2.4rem 1.6rem;

          @media screen and (min-width: 744px) {
            padding-right: 2.4rem;
            padding-left: 4.8rem;
          }
          
          @media screen and (min-width: 990px) {
            padding-right: 3.6rem;
            padding-left: 3.6rem;
          }

          h3 {
            margin-top: 0;
          }

          p {
            max-width: 75%;
            @media screen and (min-width: 990px) {
              max-width: 100%;
              text-wrap: normal;
            }
          }
        }
      }
    }
  }

  &.plp-header-collection-type {
    background: linear-gradient(
      to bottom right,
      var(--color-white-1) 40%,
      var(--color-gold-2) 100%
    );

    .plp-header-categories-container {
      display: flex;
      flex-direction: column;

      @media screen and (min-width: 1440px) {
        position: relative;
        min-height: 51.5rem;
      }

      .plp-header-categories-heading {
        max-width: 16.5rem;

        @media screen and (min-width: 744px) {
          z-index: 1;
          max-width: 23rem;
        }

        @media screen and (min-width: 1440px) {
          max-width: 33rem;
        }

        h2 {
          margin: 0;
        }

        > * + * {
          margin-top: 1.6rem;

          @media screen and (min-width: 744px) {
            margin-top: 2.4rem;
          }
          @media screen and (min-width: 1440px) {
            margin-top: 3.2rem;
          }
        }
      }

      div[role='tablist'] {
        display: flex;
        column-gap: 1.6rem;
        padding-bottom: 0.5rem;

        .tab-button {
          @media screen and (min-width: 744px) {
            font-size: 2rem;
          }

          @media screen and (min-width: 1440px) {
            font-size: 2.4rem;
          }
        }
      }

      .plp-header-categories-tabpanel:not([hidden]) {
        @media screen and (min-width: 1440px) {
          display: flex;
          flex-direction: row-reverse;
          justify-content: start;
          align-items: start;
        }

        .plp-header-categories-tabpanel-image {
          padding-left: 4.5rem;

          @media screen and (min-width: 744px) {
            padding-left: 16.5rem;
          }

          @media screen and (min-width: 1440px) {
            padding: 0;
            position: absolute;
            top: 4rem;
            left: calc(33rem + 4.8rem);
            right: 0;
            margin: 0 auto;
            height: 100%;
            max-height: 45rem;
            aspect-ratio: 16 / 9;
          }

          img {
            aspect-ratio: 16 / 9;
            width: 100%;
            height: auto;
            object-fit: contain;

            &.media-fit-cover {
              object-fit: cover;
            }

            @media screen and (min-width: 744px) and (max-width: 1439px) {
              margin-top: -13rem;
            }

            @media screen and (min-width: 1440px) {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }

        .plp-header-categories-tabpanel-details-list {
          list-style: none;
          padding: 0;
          margin: 2.4rem 0;
          display: flex;

          @media screen and (min-width: 744px) {
            margin: 3.2rem 0;
          }

          @media screen and (min-width: 1440px) {
            flex-direction: column;
            margin: 6.4rem 0 0;
            max-width: 33rem;
          }

          li {
            display: flex;
            flex-direction: column;
            flex-basis: 100%;
            row-gap: 0.4rem;
            column-gap: 0.8rem;
            padding-bottom: 1.2rem;

            @media screen and (min-width: 744px) {
              flex-direction: row;
            }

            @media screen and (min-width: 1440px) {
              border-top: solid 0.1rem rgb(var(--color-foreground));
              padding: 1.6rem 0;
            }

            &:not(:first-child) {
              padding-left: 0.8rem;

              @media screen and (min-width: 744px) {
                padding-left: 1.6rem;
              }

              @media screen and (min-width: 1440px) {
                padding-left: 0;
              }
            }

            &:not(:last-child) {
              padding-right: 0.8rem;
              border-right: solid 0.1rem rgb(var(--color-foreground));

              @media screen and (min-width: 1440px) {
                border-right: none;
              }
            }

            svg {
              flex: 0 0 3.2rem;
            }
          }
        }
      }
    }
  }
}
.slider--desktop.grid--3-col-desktop .grid__item {
  max-width: 278px;
}
.slider--desktop.grid--3-col-desktop .grid__item .plp-categories-image {
  height: 375px;
}
.plp-header-categories .plp-categories-slider-button {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 744px) {
  .slider--desktop.grid--3-col-desktop .grid__item {
    max-width: 330px;
  }
  .slider--desktop.grid--3-col-desktop .grid__item .plp-categories-image {
    height: 445px;
  }
}
@media screen and (min-width: 990px) {
  .slider--desktop.grid--3-col-desktop .grid__item {
    width:25% !important;
  }
}
@media screen and (min-width: 1920px) {
  .slider--desktop.grid--3-col-desktop .grid__item {
    max-width: 360px;
  }
  .slider--desktop.grid--3-col-desktop .grid__item .plp-categories-image {
    height: 445px;
  }
}
.plp-header-categories-container {
  position: relative;
}
.plp-header-categories-logo {
  position: absolute;
  top: 0;
  right: 1.6rem;
}
@media screen and (max-width: 767px) {
  .plp-header-categories-logo img {
    width: var(--logo-width-mobile);
    height: auto;
  }
}
@media screen and (min-width: 1280px) {
  .plp-header-categories-logo {
    right: 2.4rem;
  }
}