.variant-carousel.block {
  scroll-margin-top: 60px;
  @media (width >= 1024px) {
    scroll-margin-top: 100px;
  }
  .hidden {
    display:none;
  }
}

.variant-carousel {
  position: relative;

  .container {
    @media (width >= 1200px) {
      max-width: 100%;
    }
  }
}

.variant-carousel .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.variant-carousel .container-wrapper {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(248, 248, 248, 0.5) 47.08%, rgba(229, 229, 229, 0.5) 63.28%, rgba(255, 255, 255, 0.5) 100%);

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

.variant-carousel .container-wrapper .container {
  position: relative;

  .splide__sr {
    display: none;
  }
}

.variant-carousel .container-wrapper::after {
  content: '';
  position: absolute;
  height: 125px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background: linear-gradient(0deg, #fff -11.15%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0) 100%);

  @media (width >= 1024px) {
    height: 80px;
    background: linear-gradient(0deg, #fff -11.15%, rgba(255, 255, 255, 0.9) 45.05%, rgba(255, 255, 255, 0) 97.09%);
  }
}

.variant-carousel-title-wrapper {
  @media (width >= 768px) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
  }
  @media (width >= 1024px) {
    margin-bottom: 46px;
  }
}

.variant-carousel-title-wrapper .title * {
  font-size: 1.5rem;
  font-weight: var(--fw-700);
  line-height: normal;
  margin-top: 0;
  margin-bottom: 16px;
  color: var(--secondary-black);

  @media (width >= 768px) {
    margin-bottom: 0;
  }

  @media (width >= 1024px) {
    font-size: 2rem;
  }
}

.variant-carousal-wrapper {
  display: flex;
  justify-content: end;

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

  @media (width >= 1024px) {
    display: flex;
    align-items: center;
    margin-top: 42px;
    margin-bottom: 33px;
  }
}

.variant-carousal-wrapper .carousel-controls {
  position: relative;
  top: -44px;

  @media (width >= 1024px) {
    position: static;
    top: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.variant-carousal-wrapper .carousel-controls .nav-arrow {
  display: none;

  @media (width >= 1024px) {
    display: block;
    height: 24px;
    width: 24px;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
}

.variant-carousal-wrapper .carousel-controls .slide-count {
  color: var(--tertiary-black);
  font-family: var(--body-font-family);
  font-size: 0.675rem;
  font-weight: var(--fw-300);
  line-height: 1rem;
  height: 14px;

  @media (width >=1024px) {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }
}

.variant-carousal-wrapper .carousel-controls .slide-count .current {
  font-size: 0.875rem;
  font-weight: var(--fw-500);
  line-height: 1.125rem;

  @media (width >= 1024px) {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.variant-carousel-title-wrapper .brochure {
  z-index: 3;
  margin-bottom: 16px;

  @media (width >= 768px) {
    position: static;
    bottom: inherit;
    left: inherit;
    margin-bottom: 0;
  }

  /* Position dropdown */
  .brochure-dropdown {
    &::before{
      content: '';
      position: absolute;
      height: 15px;
      width: 15px;
      background: url('/icons/download-brochure.png') no-repeat;
      background-position: center;
      background-size: cover;
      top: calc(50% - 7.5px);
      @media (width >= 768px) {
        top: calc(50% - 12px);
        height: 24px;
        width: 24px;
      }
    }
    summary {
        width: 100%;
        padding-inline: 15px 0px;
        font-size: var(--heading-font-11-mob-text-small);
        line-height: var(--heading-lh-11-des-text-small);
        gap:0px;
        @media (width >= 768px) {
            padding-inline: 24px 0px;
            font-size: var(--body-font-size-xxs);
            line-height: var(--heading-lh-20-des-text-small);
          }
        &:hover {
          background-color: unset;
        }
        .dropdown_arrow {
          width: 16px;
          height: 16px;
          background: url('/icons/up-arrow.svg') no-repeat center / 10px 10px;
          display: inline-flex;
          transform: rotate(180deg);
          @media (width >= 768px) {
            width: 20px;
            height: 20px;
          }
        }

      }
     &[open] {
        summary {
          background-color: transparent;
          border-color: transparent;
        }
        .dropdown_arrow {
          transform: rotate(0deg);
        }
      }
    }

}

.variant-carousel-title-wrapper .brochure .button {
  padding: 12px 16px;
  text-decoration: underline;
  color: var(--primary-blue-700);
  font-family: var(--body-font-arena);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: var(--fw-400);
  line-height: 1rem;

  @media (width >=768px) {
    padding-right: 0;
  }

  @media (width >=1024px) {
    font-size: 0.875rem;
    line-height: 1.125rem;
    width: 153px;
    height: 40px;
    justify-content: end;
    padding-right: 5px;
  }
}

.variant-carousel-title-wrapper .brochure a.button-icon::before {
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  background: url('/icons/download-brochure.png') no-repeat;
  background-position: center;
  background-size: cover;

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

.variant-carousel-title-wrapper .button-primary-clear.button-icon::before {
  left: 0px;
  z-index: 1;
}

.variant-filters {
  @media (width >= 1024px) {
    display: flex;
    align-items: end;
    justify-content: space-between;
  }
}

.variant-carousel-content-wrapper .variant-filters .filter-tabs {
  margin: 0;
  display: flex;
  gap: 40px;
  justify-content: space-between;
  border-bottom: 1px solid var(--bars-unselected);
  @media (width >= 1024px) {
    gap: 80px;
    justify-content: flex-start;
  }
}

.variant-carousel-content-wrapper .variant-filters .filter-tabs li {
  color: var(--tertiary-black);
  text-align: center;
  font-family: var(--body-font-family);
  font-size: 0.75rem;
  cursor: pointer;
  font-weight: var(--fw-400);
  line-height: 1rem;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 8px;
  margin-bottom: -0.5px;

  @media (width >= 1024px) {
    font-weight: var(--fw-600);
    letter-spacing: 0px;
    font-size: 0.875rem;
    line-height: 1.125rem;
    padding-bottom: 12px;
  }
}

.variant-carousel-content-wrapper .variant-filters .filter-tabs li.active {
  color: var(--primary-blue-700);
  font-weight: var(--fw-700);
  border-bottom: 1px solid var(--primary-blue-700);
  letter-spacing: 0px;

  @media (width >= 1024px) {
    font-weight: var(--fw-600);
    border-bottom: 2px solid var(--primary-blue-700);
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}

.variant-carousel-content-wrapper .variant-filters .gearbox-filter {
  padding-top: 24px;
  padding-bottom: 28px;
  display: flex;
  gap: 24px;

  @media (width >= 1024px) {
    padding-top: 0;
    padding-bottom: 0;
    gap: 40px;
  }
}

.variant-carousel-content-wrapper .variant-filters .gearbox-filter label {
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: var(--fw-400);
  line-height: 1rem;
  display: flex;
  gap: 8px;

  @media (width >= 1024px) {
    font-size: 0.875rem;
    line-height: 1.125rem;
    gap: 8px;
  }
}

.variant-carousel-content-wrapper .variant-filters .gearbox-filter .custom-checkbox.hidden {
  display: none;
}

.variant-carousal-wrapper .subtitle {
  display: block;
  color: var(--inactive-content);
  font-family: var(--body-font-arena);
  font-size: 0.625rem;
  font-weight: var(--fw-400);
  line-height: 1.25rem;

  @media (width >= 1366px) {
    font-size: 0.75rem;
  }
}

.variant-carousel .variant-cards {
  display: flex;
  position: relative;
  z-index: 2;
}

.variant-carousel .variant-cards .variant-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  justify-content: center;
  align-items: center;
  gap: 6px;

  @media (width >= 768px) {
    flex: 0 0 50%;
  }

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

.variant-carousel .variant-cards .variant-card img {
  width: 239px;
  height: 134px;
  object-fit: contain;
  margin-bottom: -16px;

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

.variant-carousel .variant-cards .variant-card .card-content {
  width: 100%;
  padding: 16px 13px 22px 16px;
  background: linear-gradient(180deg, #fefefe 0%, #e3e3e3 100%);

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

  @media (width >= 768px) {
    padding-bottom: 14px;
    position: relative;
    display:flex;
    flex-direction: column;
    flex:1;
  }
}

.card-content .variant-heading {
  display: flex;
  margin-bottom: 4px;
  min-height: 24px;

  .variant-title {
    flex: 1;
    border-bottom: 1px solid var(--light-grey-shade-6);
  }
}

.card-content{
  .custom-dropdown {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
  }

  .dropdown-selected {
    width: 90%;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--tertiary-black);
    transition: all 0.3s ease;
    position: relative;
    min-height: 32px;
  }

  .dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--bars-unselected);
    background-color: var(--tertiary-white);
    max-height: 200px;
    overflow-y: auto;
    z-index: 9;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
  }

 .custom-dropdown::after {
    content: "";
    position: absolute;
    right: 0px;
    top: 40%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M12.0005 12.9462L16.6005 8.34619L17.6543 9.39994L12.0005 15.0537L6.3468 9.39994L7.40055 8.34619L12.0005 12.9462Z' fill='black'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
  }

  .custom-dropdown.active .dropdown-options {
    display: block;
  }

  .dropdown-option {
    align-items: center;
    padding: 10px;
    cursor: pointer;
    font-size: var(--body-font-size-xxs);
    font-weight:  var(--fw-700);
    color: var(--tertiary-black);
    transition: all 0.2s ease;
  }

  .dropdown-option:hover {
    background-color: var(--hover-gray-arena);
  }

  .variant-name {
    font-weight: var(--fw-700);
  }

  .separator {
    margin: 0 4px;
    font-weight: var(--fw-700);
  }

  .color-type {
    font-weight: var(--fw-500);
  }

  .variant-ex-showroom {
    display: flex;
    flex-direction: row;
    text-align: end;
    justify-content: space-between;
    align-items: center;
  }
}

.card-content .variant-ex-showroom .price-text {
  display: flex;
  align-items: center;
  color: var(--inactive-content);
  font-size: 0.625rem;
  font-weight: var(--fw-300);
  line-height: 18.088px;
  margin: 0;
  text-align: left;
}

.card-content .variant-ex-showroom .price-block {
  display: flex;
  margin-bottom: 16px;
  @media (width >= 1024px) {
    flex-direction: column;
    margin: 0;
  }
}

.card-content .variant-ex-showroom .price-value {
  color: var(--tertiary-black);
  text-align: right;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-xs);
  font-weight: var(--fw-700);
  margin: 0 0 0 4px ;
  @media (width >= 1024px) {
    font-size: var(--body-font-size-xs);
    line-height: 18px;
    margin: 0 0 16px 2px;
  }
}

.card-content .variant-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-content .variant-title-static{
  display: flex;
  font-size: var(--body-font-size-xxs);
  font-weight: var(--fw-700);
  min-height: 32px;
  align-items: center;
}

.card-content .variant-overview p {
  display: flex;
  align-items: center;
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 0.625rem;
  font-weight: var(--fw-300);
  line-height: 1.125rem;
  gap: 8px;
  margin: 0;
}

.card-content .waiting-tag {
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 0.625rem;
  font-weight: var(--fw-300);
  line-height: calc(20px - 1px);
  border: 0.5px solid #dbdbdb;
  backdrop-filter: blur(20px);
  padding: 0 5px;
  height: 20px;
  display: none; /*hidden as of 25/4/25 due to API unavailability, can be removed in future releases*/
}

.card-content .features {
  margin: 0;
  position: relative;
  padding-top: 12px;
  padding-bottom: 16px;
  flex:1;
  list-style: inside;
}

.card-content .features::after {
  content: '';
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #ccc 50%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: 0;
}

.card-content .features li {
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 10px;
  font-weight: var(--fw-300);
  line-height: 18px;
  overflow: hidden;
  white-space: wrap;
}

.card-content .action-buttons {
  display: flex;
  gap: 8px;
  align-items: baseline;

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

  .button,
  a.button,
  button.button,
  input[type='button'],
  input[type='submit'],
  input[type='reset'] {
    font-weight: var(--fw-400);
    letter-spacing: 0;
    height: 34px;

    @media (width >= 768px) {
      padding: 10px 16px;
      height: 40px;
      font-size: 14px;
      line-height: 18px;
    }

    @media (width >= 1366px) {
      height: 42px;
      padding: 12px 24px;
    }
  }
}

.variant-carousel .links-section .button.button-secondary-blue {
  color: var(--primary-blue-700);
  font-size: 14px;
  font-weight: var(--fw-400);
  line-height: 0.875rem;
  text-decoration-line: underline;
  position: relative;
  padding: 0 30px 0 0;
  border: none;
}

.variant-carousel .links-section .button.button-secondary-blue:hover {
  background: none;
}

.variant-carousel .links-section .button.button-secondary-blue::after {
  content: '';
  height: 24px;
  width: 24px;
  position: absolute;
  right: 0;
  top: -10px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="36" viewBox="0 0 34 36" fill="none"><path d="M20.6065 15.2682L12.0314 23.8433L10.9904 22.7634L19.5654 14.1883L11.5843 14.1151L11.6091 12.6003L22.1175 12.6967L22.0193 23.3997L20.5319 23.3971L20.6065 15.2682Z" fill="%23171C8F"/></svg>');
  transition: all 0.2s linear;
}

.variant-carousel .links-section .button.button-secondary-blue:hover::after {
  transform: scale(1.6);
  transform-origin: bottom left 0;
}

.variant-carousel .links-section-wrapper {
  justify-content: space-between;
  display: flex;
  flex-flow: column-reverse;
  .links-section {
    display: flex;
    flex-flow: wrap;
    position: relative;
    z-index: 3;
    gap: 27.71px;
    padding-top: 25.12px;
    padding-bottom: 8px;
  }

  .image-disclaimer {
    color: var(--inactive-content);
    font-family: var(--body-font-arena);
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1rem;
    text-align: right;
    margin-top: 16px;
    position: relative;
    z-index: 1;
  }
  @media (width >= 768px) {
    flex-flow: row;
  }
  @media (width >= 1024px) {
    .links-section {
      padding-top: 57px;
      gap: 51px;
      padding-bottom: 0;
    }
    .image-disclaimer {
      line-height: 1.25rem;
      font-size: 0.875rem;
      margin-top: 55px;
      z-index: 9;
    }
  }
}

/* Hide the default checkbox appearance */
.custom-checkbox input[type='checkbox'] {
  display: none;
}

/* Style the custom checkbox box */
.custom-checkbox .checkbox-box {
  width: 20px;
  height: 20px;
  border: 1px solid var(--bars-unselected);
  background-color: transparent;
  display: inline-block;
  transition: all 0.3s ease;

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

/* Change the border color when checkbox is checked (but no checkmark) */
.custom-checkbox input[type='checkbox']:checked + .checkbox-box {
  border: 1px solid var(--bars-unselected);
  display: flex;
  align-items: center;
  justify-content: center;

  &::after {
    content: '';
    background-color: var(--primary-blue-700);
    width: 12px;
    height: 12px;

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

.custom-checkbox input[type='checkbox']:checked + .checkbox-box + span {
  @media (width >= 1024px) {
    font-weight: var(--fw-600);
  }
}

/* Optional: Style the label text */
.custom-checkbox {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
}
.custom-checkbox .checkbox-box:hover {
  border-color: #888;
}
.custom-checkbox input[type='checkbox']:disabled + .checkbox-box:hover {
  border-color: var(--bars-unselected);
}
.custom-checkbox input[type='checkbox']:focus + .checkbox-box {
  border-color: var(--primary-blue-700);
}

@media (width >=1024px) {
  .variant-carousal-wrapper .carousel-controls .nav-arrow.next {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15.7016 12.6H6V11.4H15.7016L11.1446 6.843L12 6L18 12L12 18L11.1446 17.157L15.7016 12.6Z" fill="black"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .variant-carousal-wrapper .carousel-controls .nav-arrow.prev {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M8.2984 12.6H18V11.4H8.2984L12.8554 6.843L12 6L6 12L12 18L12.8554 17.157L8.2984 12.6Z" fill="black"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .variant-carousal-wrapper .carousel-controls .nav-arrow.next.disabled,
  .variant-carousal-wrapper .carousel-controls .nav-arrow.prev.disabled {
    pointer-events: none;
    opacity: 0.5;
  }

}