.explore-product-range.block {
  display: flex;
  user-select: none;
  background: var(--tertiary-white);

  h1,
  h2,
  h3,
  p {
    margin: unset;
  }

  .epr-wrapper {
    overflow: hidden;
    padding-block: 48px;

    @media (width >=1024px) {
      padding-block: 80px;
    }
  }

  .epr-header {
    gap: 24px;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;

    .heading {
      letter-spacing: normal;
    }

    @media (width >=1024px) {
      gap: 34px;
      justify-content: space-between;
    }

    @media (width >=1366px) {
      gap: unset;
      align-items: center;
    }
  }

  .epr-filter-wrapper {
    width: 100%;
    display: flex;
    scrollbar-width: none;

    @media (width >=1024px) {
      width: auto;
    }
  }


  .filters-container {
    overflow-x: auto;
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    align-items: center;
    padding-inline-end: 40px;

    /* ios scroll fix */
    &::-webkit-scrollbar {
      display: none;
    }

    .switchList-next-arrow {
      right: 0;
      background: url('/icons/menu-header-left-angle-bracket-black.svg') center no-repeat;
    }

    .switchList-prev-arrow {
      left: 0;
      background: url('../../icons/menu-header-left-angle-bracket-black.svg') center no-repeat;
      transform: rotate(180deg);
    }

    .switchList-next-arrow,
    .switchList-prev-arrow {
      z-index: 1;
      width: 40px;
      height: 40px;
      position: absolute;
      background-color: var(--tertiary-white);

      @media (width >=1024px) {
        display: none;
      }
    }

    .epr-filters {
      display: flex;
      flex-direction: row;
      width: max-content;
      align-items: center;
      white-space: nowrap;
      margin: unset;
      border-bottom: 1px solid var(--secondary-main);
      overflow: scroll;
      scrollbar-width: none;
      padding: 0;

      &::-webkit-scrollbar {
        display: none;
      }

      .filter {
        padding: 12px 24px;
        text-align: center;
        text-decoration: none;
        position: relative;
        word-wrap: break-word;
        cursor: pointer;

        @media (width >=1024px) {
          padding-inline: 32px;
        }

        &.selected {
          font-weight: var(--fw-500);
          border-bottom: 2px solid var(--primary-main);
        }
      }

      p,
      h2,
      h3 {
        margin: unset;
      }
    }
  }

  .cars {
    position: relative;
    overflow: hidden;
    max-width: 100%;
  }

  .epr-cars {
    position: relative;
    overflow: hidden;
    margin-top: 32px;

    @media (width >=1366px) {
      margin-top: 36px;
    }
  }

  .carousel-track {
    gap: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
    width: 100%;
  }

  .epr-car-list {
    backface-visibility: hidden;
    display: flex;
    align-items: flex-start;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
  }

  .card-item-inner {
    gap: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;

    @media (width >=1024px) {
      gap: 32px;
    }
  }

  .car-item--details {
    gap: 40px;
    display: flex;
    flex-direction: column;

    @media (width >=768px) {
      gap: 32px;
    }
  }


  .price-range {
    gap: 13px;
    display: flex;
    align-items: center;
    flex-direction: column;

    @media (width >=768px) {
      gap: 16px;
    }

    @media (width >=1024px) {
      gap: 12px;
    }
  }

  .price-range .car-logo {
    display: flex;
    justify-content: center;
  }

  .car-logo img {
    width: 255px;
    height: 40px;
    max-width: 100%;
    filter: brightness(0);

    @media (width >=1024px) {
      width: 306px;
      height: 48px;
    }
  }

  .epr-price {
    gap: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cta-container {
    gap: 24px;
    display: flex;
    position: relative;
    width: 100vw;
    align-items: stretch;
    justify-content: center;
    flex-direction: column;

    .btn {
      &[href=""] {
        opacity: 0.5;
        pointer-events: none;
      }
    }

    @media (width >=768px) {
      gap: 14px;
    }

    @media (width >=1024px) {
      align-items: center;
      gap: 16px;
    }
  }

  img {
    height: auto;
    display: block;
    line-height: 1;
    object-fit: contain;
  }

  .car-image {
    display: flex;
    justify-content: center;
  }

  .car-image img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    height: 147px;

    @media (width >=768px) {
      height: 178px;
    }

    @media (width >=1024px) {
      height: 250px;
    }

    @media (width >=1280px) {
      height: 346px;
    }

    @media (width >=1920px) {
      height: 499px;
    }
  }

  .compare-emi__wrapper {
    gap: 16px;
    display: flex;
    justify-content: space-between;

    a,
    button {
      color: var(--primary-main);

    }

    .compare-emi__item {

      .compare-cta,
      button {
        gap: 8px;
        display: flex;
        padding: 8px 16px;
        align-items: center;

        &::before {
          content: '';
          width: 20px;
          height: 20px;
          display: block;
        }

        &:disabled {
          opacity: 0.3;
        }

        @media (width >=768px) {
          gap: 12px;
          padding-inline: 12px;
        }
      }

      &.calculate-emi__wrapper button::before {
        background: url('/icons/calculate_emi.svg') center/auto no-repeat;
      }

      &.compare-cars-cta__wrapper .compare-cta::before {
        background: url('/icons/compare_arrows.svg') center/auto no-repeat;
      }
    }

    .compare-cars-cta__wrapper {
      justify-content: flex-end;

      &.disabled-link {
        opacity: 0.3;
        pointer-events: none;
      }
    }

    .calculate-emi__wrapper,
    .compare-cars-cta__wrapper {
      flex: 1;
      display: flex;
      white-space: nowrap;

      @media (width >=768px) and (width < 1024px) {
        justify-content: center;
      }
    }

  }

  .ctas {
    gap: 16px;
    display: flex;
    flex-direction: column;

    &:has(.hidden) {
      justify-content: center;
    }

    @media (width < 1024px) {
      a {
        flex: 1;
      }
    }

    @media (width >=768px) {
      flex-direction: row;
    }

    @media (width >=768px) and (width < 1024px) {
      gap: 16px
    }

    .btn {
      @media (width >=1024px) {
        font-size: var(--body-m-nexa, var(--heading-s-arena));
      }

      &.btn-primary-outline-2 {
        color: var(--primary-main);
      }
    }
  }

  .download-icon {
    width: 20px;
    height: 20px;
    display: block;
    background: url('/icons/download.svg');
  }

  .splide__arrows {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 42px;
    width: 100vw;
    pointer-events: none;

    @media (width >=768px) {
      top: 60px;
    }

    @media (width >=1024px) {
      top: 86px;
    }

    @media (width >=1366px) {
      top: 132px;
    }

    @media (width >=1920px) {
      top: 212px;
    }
  }

  .splide__arrow {
    width: 32px;
    height: 32px;
    padding: 9px;
    pointer-events: auto;
    background: url('/icons/carousel-tailed-arrow-right-black.svg') center / 14px 14px no-repeat;
    background-color: var(--tertiary-white);

    @media (width >=1024px) {
      width: 36px;
      height: 36px;
      padding: 10px;
      background-size: 15px 15px;
    }
  }

  .splide__arrow--prev {
    transform: rotate(180deg);
  }

  .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
  }

  .splide__track--draggable {
    user-select: none;
  }

  .splide.hide-pagination {
    .splide__arrows {
      display: none;
    }
  }

  .splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position: relative;
    width: 100%;
  }

  .splide.is-active {

    .splide__slide {

      &.is-prev,
      &.is-next {
        .car-item--details {
          opacity: 0;
        }
      }

      &:not(.is-active) {
        pointer-events: none;

        .car-item--details {
          opacity: 0;
        }
      }

    }
  }
}


body.arena {
  .explore-product-range {
    flex-direction: column;
    .epr-header {
      @media (width >=1024px) {
        gap: 40px;
      }

      @media (width >=1366px) {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .epr-cars {
      margin-top: 16px;

      @media (width >=1024px) {
        margin-top: 32px;
      }
    }

    .epr-wrapper {
      @media (width >=768px) {
        padding-bottom: 48px;
      }

      @media (width >=1024px) {
        padding-bottom: 80px;
      }
    }

    .filters-container {
      padding-inline: 0;

      .epr-filters {
        border-bottom: 1px solid var(--bars-unselected);

        .filter {
          padding: 12px 48px;
          text-transform: uppercase;

          &.selected {
            color: var(--egyptian-blue);
            border-bottom: 2px solid var(--Primary-main-arena);
            font-weight: var(--fw-700);
          }
        }
      }
    }

    .splide__slide {
      @media (width >=768px) {
        margin: 0 24px;
      }
    }

    .card-item-inner {
      gap: 16px;
    }

    .car-logo img {
      aspect-ratio: 31 / 5;
      object-fit: contain;
      filter: none;
    }

    .price-range {
      gap: 12px;
      padding-top: calc(24px + 32px);

      @media (width >=1366px) {
        padding-top: 48px;
      }
    }

    .splide__arrows {
      @media (width >=768px) {
        top: 95px;
      }

      @media (width >=1024px) {
        top: 120px;

        .splide__arrow {
          width: 48px;
          height: 48px;
        }
      }

      @media (width >=1280px) {
        top: 132px;
      }

      @media (width >=1600px) {
        top: 212px;
      }
    }

    .splide__arrow {
      background: var(--tertiary-white) url(/icons/carousel-tailed-arrow-right-blue.svg) center no-repeat;
      border: 1px solid var(--Primary-main-arena);
      padding: 5.5px;
    }

    .carousel-track {
      gap: 0;
      flex-direction: row;
    }

    .pagination {
      display: none;
    }

    .ctas {
      @media (width < 1024px) {
        a {
          flex: none;
          flex-shrink: 0;
        }
      }

      .btn {
        padding: 12px 24px;
        height: 42px;

        &.btn-primary-outline-2 {
          color: var(--Primary-main-arena);

          .download-icon {
            filter: var(--primary-arena-filter);
          }

          &:hover {
            color: var(--tertiary-white);

            .download-icon {
              filter: var(--white-filter);
            }
          }
        }
      }
    }

    .cta-container {
      width: auto;
    }

    .car-image img {
      @media (width >=768px) {
        height: 254px;
      }

      @media (width >=1024px) {
        height: 298px;
      }

      @media (width >=1280px) {
        height: 362px;
      }

      @media (width >=1600px) {
        height: 592px;
      }
    }

    .compare-emi__wrapper {
      .text-medium {
        color: var(--tertiary-black);
      }
    }
  }
}