.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: 177 / 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,
    img,
    video {
      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: hidden;
    position: relative;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;

    .category-hero__content {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-medium);
      position: absolute;
      top: var(--sizing-xl);
      left: var(--spacing-l);
      width: 100%;
      background: linear-gradient(351deg, rgb(0 0 0 0) 12.5%, var(--neutrals-sub-texts-paragraphs) 83.91%);
      color: var(--color-white);
      z-index: 1;

      @media (width >= 768px) {
        gap: var(--spacing-xs);
        top: var(--spacing-big);
      }

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

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

        .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: 2.8rem;
        font-weight: var(--fw-500);
        line-height: 3.4rem;
        word-break: break-word;
        overflow-wrap: break-word;

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

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

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

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

        .category-hero__cta-link {
          width: auto;
          max-width: 46%;
          padding: var(--spacing-xsmall) var(--spacing-small);
          color: var(--tertiary-color);
          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);
          }
        }
      }

      .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: var(--sizing-xl);
      left: 0;
      width: 100%;
      z-index: 1;
      padding: 0 var(--container-margin);

      @media (width >= 768px) {
        bottom: var(--spacing-big);
      }

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

      .splide__arrow {
        display: none;

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

        @media (width >= 1200px) {
          display: flex;
          position: relative;
          width: 42.7px;
          height: 42.7px;
          justify-content: center;
          align-items: center;
          z-index: 10;
          cursor: pointer;
          background-position: center;
          background-size: 26.68px;
          flex-shrink: 0;

          svg {
            display: block;
          }

          .splide__arrow-progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            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;
            }
          }
        }
      }

      .splide__arrow--next {
        @media (width >= 1200px) {
          background-repeat: no-repeat;
          background-image: url('/genuine-accessories/icons/carosuel-next-white-arrow.svg');
        }
      }

      .splide__arrow--prev {
        @media (width >= 1200px) {
          background-repeat: no-repeat;
          background-image: url('/genuine-accessories/icons/carosuel-prev-white-arrow.svg');
        }

        .progress-circle {
          display: none;
        }
      }

      .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);
            border: 1px solid var(--thin-border-color);
            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 103px;
              min-height: 76px;

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

            @media (width >= 1200px) {
              flex: 0 0 121px;
              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: center;
              align-items: center;
              padding: 11px;
              background: linear-gradient(0deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 60%) 100%);
              font: var(--text-medium-regular);

              .category-hero__subcategory-card-label {
                font-size: 1.3rem;
                font-weight: var(--fw-600);
                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: var(--spacing-l) 15px;

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

          .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);
      }
    }

    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));
    }
  }

  .banner__cta {
    bottom: 110px;
    right: var(--container-margin);
    position: absolute;
    padding: 0 var(--container-margin);
    width: 100%;
    left: 0;
    display: inline-flex;
    flex-direction: row-reverse;

    @media (width >= 768px) {
      bottom: 10px;
    }

    @media (width >= 1200px) {
      position: absolute;
      bottom: 54px;
    }

    .banner__ctalink {
      color: var(--tertiary-color);
      font-feature-settings: var(--font-settings);
      font-weight: var(--fw-300);
      font-size: var(--fs-xsmall);
      line-height: var(--lh-large);
      text-decoration: underline;
      text-decoration-skip-ink: none;
      font-style: italic;
      display: inline-block;
      white-space: normal;
      word-break: break-word;
      border: unset;
      background: transparent;

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

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

  /* Popup container */
  .termsConditionPopup {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 16px;
    transform: translateY(-16px);
    background: var(--subtext-grey);
    color: var(--tertiary-color);
    width: 231px;
    min-height: 215px;
    padding: var(--spacing-xsmall) var(--spacing-12);
    box-shadow: 0 2px 7px 0 var(--ui-divider-low);
    z-index: 9;

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

    ::after {
      content: '';
      background-image: url('/genuine-accessories/icons/tandcpopup_arrow.svg');
      background-repeat: no-repeat;
      background-position: center;
      display: block;
      bottom: -17px;
      position: absolute;
      width: 20px;
      height: 20px;
      right: 18px;
    }

    .termsConditionPopup__list {
      padding-inline: 15px 0;

      ul {
        list-style-type: disc;

        li {
          color: var(--tertiary-white);
          margin-top: 0;
          font-family: var(--nexa-font);
          font-size: var(--fs-xxsmall);
          font-style: normal;
          font-weight: var(--fw-300);
          line-height: var(--lh-17);
        }
      }
    }
  }

  .termsConditionPopup.showTermsPopup {
    display: block;
  }
}