.cta-view-car,
.cta-view-3d {
  display: none;
}

.category-hero__image-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;

  @media (width >= 768px) {
    aspect-ratio: 250 / 75;
  }

  .splide__track {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .splide__list {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .splide__slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    picture {
      position: relative;
      width: 100%;
      height: 100%;
      display: block;

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gradient-hero-banner);;
        pointer-events: none;
      }
    }

    img,
    video,
    picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  .splide__slide[style] {
    width: 100% !important;
    height: 100% !important;
  }
}

.category-hero {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xsmall);

  .category-hero__wrapper {
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    text-align: center;

    @media (width >= 768px) {
      justify-content: center;
      text-align: left;
      align-items: flex-start;
    
    }

    .category-hero__content {
      display: flex;
      flex-direction: column;
      position: absolute;
      background: var(--gradient-hero-banner);
      color: var(--color-white);
      z-index: 1;
      margin-top: var(--spacing-big);
      max-width: 90%;

      @media (width >= 768px) {
        max-width: 50%;
        margin-top: auto;
        left: var(--spacing-l);
      }

      @media (width >= 1024px) {
        left: var(--container-margin);
      }

      @media (width >= 1200px) {
        .category-hero__cta-car-selection {
          padding: 0 var(--spacing-medium);
        }
      }

      .category-hero__title {
        color: var(--tertiary-color);
        font-feature-settings: var(--font-settings);
        font-size: var(--fs-28);
        font-weight: var(--fw-400);
        line-height: 3.4rem;
        word-break: break-word;
        overflow-wrap: break-word;
        margin-bottom: var(--spacing-medium);

        @media (width >= 768px) {
          font-size: var(--fs-xlarge);
          line-height: 2.9rem;
        }

        @media (width >= 1200px) {
          font-size: var(--fs-xxxlarge);
          font-weight: var(--fw-400);
          line-height: var(--lh-normal);
          letter-spacing: 0.1px;
        }
      }

      .category-hero__description {
        color: var(--tertiary-color);
        font-feature-settings: var(--font-settings);
        font-size: var(--fs-small);
        font-weight: var(--fw-300);
        line-height: var(--lh-16);
        margin: 0;
        word-break: break-word;
        overflow-wrap: break-word;
        margin-bottom: var(--spacing-medium);

        p {
          margin: 0 0 var(--spacing-xxsmall);
        }

        p:last-child {
          margin-bottom: 0;
        }

        @media (width >= 768px) {
          font-size: var(--fs-xsmall);
          line-height: var(--lh-normal);
        }

        @media (width >= 1200px) {
          font-size: var(--fs-small);
          line-height: var(--lh-normal);
          font-weight: var(--fw-300);
        }
      }

      .category-hero__cta-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-small);

        button {
          min-width: 157px;
        }

        @media (width >= 768px) {
          justify-content: flex-start;
        }

        @media (width >= 1200px) {
          gap: var(--spacing-medium);
        }

        .category-hero__cta-link {
          padding: var(--spacing-xsmall) var(--spacing-small);
          font-feature-settings: var(--font-settings);
          font-size: var(--fs-small);
          font-weight: var(--fw-400);
          line-height: var(--lh-small);

          @media (width >= 1200px) {
            padding: var(--spacing-xs) var(--spacing-medium);
            line-height: var(--lh-16);
          }
        }

        .button--secondary-white {
          @media (width >= 1200px) {
            line-height: var(--lh-18);
          }

          /* Arrow on second CTA only (when .button--icon is present), matching hero-banner */
          &.button--icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 8px;

            &::after {
              content: '';
              display: inline-block;
              width: 20px;
              height: 20px;
              background: url('/genuine-parts/icons/carosuel-next-white-arrow.svg') center / contain no-repeat;
              flex-shrink: 0;
            }

            @media (width >= 1200px) {
              &::after {
                width: 24px;
                height: 24px;
              }
            }
          }
        }
      }

      .category-hero__cta-car-selection {
        padding: var(--spacing-xsmall) var(--spacing-small);
        width: auto;
        max-width: 36%;
        color: var(--tertiary-color);
        text-decoration: underline;
        text-decoration-skip-ink: none;
        font-size: var(--fs-small);
        font-weight: var(--fw-400);
        line-height: var(--lh-small);
        border: 0;
        background: transparent;
        cursor: pointer;
        white-space: nowrap;

        @media (width >= 1200px) {
          padding: var(--spacing-xs) var(--spacing-medium);
        }

        &.selected-car {
          display: none;
        }
      }
    }

    .category-hero__carousel-container {
      position: absolute;
      bottom: -40px;
      left: auto;
      right:0;
      width: 100%;
      z-index: 2;
      pointer-events: auto;
      visibility: visible;
      display: flex;
      align-items: center;

      @media (width >= 768px) {
        padding: 0 var(--container-margin);
        max-width: 69.06%;
      }

      @media (width >= 1200px) {
        display: flex;
        align-items: center;
        width: fit-content;
        max-width: 41.06%;
        padding: 0 0 0 var(--container-margin);
      }

      .splide__arrow--prev {
        background: url('/genuine-parts/icons/carosuel-prev-white-arrow.svg') center / 26.68px no-repeat;

        .progress-circle {
          display: none;
        }
      }

      .splide__arrow--next {
        background: url('/genuine-parts/icons/carosuel-next-white-arrow.svg') center / 26.68px no-repeat;

        .progress-circle {
          display: none;
        }
      }

      .splide__arrow {
        &:disabled {
          cursor: not-allowed;
          display: none;
        }

        display: flex;
          position: relative;
          width: 32px;
          height: 32px;
          justify-content: center;
          align-items: center;
          z-index: 10;
          cursor: pointer;
          background-position: center;
          background-size: 26.68px;
          flex-shrink: 0;
          border-radius: 63.983px;
          background-color: var(--neutrals-sub-texts-grey);
          
          &.splide__arrow--prev {
            left: 15px;

            @media (width >= 1200px) {
              left: 20px;
            }
          }

          &.splide__arrow--next {
            right: 15px;

            @media (width >= 1200px) {
              right: 20px;
            }
          }

          svg {
            display: block;
          }

          .splide__arrow-progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            z-index: 1;

            .progress-circle {
              fill: none;
              stroke: var(--tertiary-color);
              stroke-width: 2;
              stroke-dasharray: 107 107;
              stroke-dashoffset: 107;
              transition: stroke-dashoffset 5s linear;
            }
          }

          @media (width >= 1200px) {
            width: 40px;
            height: 40px;
          }
      }

      .category-hero__subcategory-wrapper {
        overflow-x: hidden;
        flex-wrap: nowrap;

        @media (width >= 1200px) {
          flex: 1;
          overflow: hidden;
        }

        .splide__list {
          display: flex;
          align-items: center;
          flex-direction: row;
          list-style: none;

          .category-hero__subcategory-card {
            height: auto;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
            background: var(--ui-surface-glass-thin);
            display: flex;
            align-items: stretch;
            transition: all 0.3s ease;
            z-index: 1;
            flex: 0 0 92px;
            min-height: 68px;

            &.is-active {
              border: 1.5px solid var(--tertiary-color);
              flex: 0 0 92px;
              min-height: 76px;

              @media (width >= 768px) {
                flex: 0 0 76px;
                min-height: 68px;
              }

              @media (width >= 1200px) {
                min-height: 100px;
                flex: 0 0 108px;
              }
            }

            @media (width >= 768px) {
              flex: 0 0 76px;
              min-height: 68px;
            }

            @media (width >= 1200px) {
              flex: 0 0 103px;
              min-height: 89px;
            }
          }

          .category-hero__subcategory-card-content-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0;
            justify-content: stretch;
            align-items: center;
            width: 100%;
            min-height: 100%;
            overflow: hidden;
            text-decoration: none;
            color: var(--color-white);

            &:hover {
              text-decoration: none;
            }

            .category-hero__subcategory-card-image {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.5s ease;
              z-index: 1;
            }

            .category-hero__subcategory-card-content {
              position: relative;
              z-index: 2;
              width: 100%;
              height: 100%;
              display: flex;
              text-align: center;
              flex-direction: column;
              justify-content: flex-end;
              align-items: center;
              padding: 11px;
              background: var(--gradient-hero-banner-category);
              font: var(--text-medium-regular);

              .category-hero__subcategory-card-label {
                font-size: var(--fs-small);
                font-weight: var(--fw-500);
                line-height: var(--lh-normal);
                text-align: center;
                word-wrap: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
                max-width: 100%;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                min-height: calc(2 * var(--lh-normal));
              }

              @media (width >= 1200px) {
                padding: 8px;

                .category-hero__subcategory-card-label {
                  font-size: var(--fs-xsmall);
                }
              }
            }
          }

          .splide {
            visibility: visible !important;
          }
        }
      }

      .splide__arrow[disabled] ~ .category-hero__subcategory-wrapper .splide__list {
        transform: none !important;
      }
    }
  }
}

.category-hero-container {
  &.appear {
    display: block !important;
  }

  .default-content-wrapper {
    @media (width >= 1024px) {
      padding: 22px var(--container-margin);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font: var(--heading-regular);
      font-size: var(--fs-large);
      line-height: var(--lh-xlarge);
      letter-spacing: -0.3px;
      color: var(--neutrals-sub-texts-paragraphs);
      margin-bottom: var(--sizing-2xs);

      @media (width >= 1024px) {
        font: var(--heading-regular);
        line-height: var(--lh-xxlarge);
        margin-bottom: var(--sizing-s);
      }
    }

    /* stylelint-disable-next-line no-descending-specificity -- p in default-content-wrapper must follow .category-hero__description p in source */
    p {
      color: var(--neutrals-sub-texts-grey);
      line-height: var(--lh-xsmall);
      letter-spacing: 0.14px;

      @media (width >= 1024px) {
        line-height: 16.8px;
      }
    }

    .button {
      font-style: normal !important;
      text-decoration: none !important;
      padding: calc(var(--cta-padding-y) - var(--cta-border-width)) calc(var(--cta-padding-x) - var(--cta-border-width));
    }
  }

}