main:has(.compare-cars-wrapper) {
  background-color: var(--tertiary-light-grey);
}

html:has(.save-share-modal[open]) {
  overflow: hidden;
}

body:has(.compare-cars-container .sticky-pannel) {
  header {
    visibility: hidden;
  }
}

.compare-cars-container {
  position: relative;
}

.compare-cars-fragment[data-compare-cars-redirection-url] {
  .compare-cars-wrapper {
    background: var(--tertiary-white);

    .title-wrapper {
      display: none;
    }
  }
}

.compare-cars-wrapper {
  min-height: 300px;
  padding-block: 48px 32px;
  background: var(--tertiary-light-grey);

  @media (width >=768px) {
    padding-block-end: 48px;
  }

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

  .justify-end {
    justify-content: flex-end;
    position: relative;
  }

  .heading {
    margin-bottom: 32px;

    @media (width >=1024px) {
      margin-bottom: 40px;
    }
  }

  .car-item {
    position: relative;

    &.g-lg-4:nth-child(3),&.g-lg-3:nth-child(3) {
      display: none;

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

    .delete-car {
      content: '';
      border: none;
      background: url('/icons/delete.svg') center / cover no-repeat;
      position: absolute;
      top: 4px;
      left: 4px;
      width: 12px;
      height: 12px;
      padding: 2px;
      cursor: pointer;
      color: var(--secondary-main);

      @media (width >=1024px) {
        top: 12px;
        left: 1px;
        height: 24px;
        width: 24px;
        padding: 3px 4px;
      }

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

    }
  }

  .compare-car-img-container {
    padding: 0;
    display: flex;

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

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

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

      @media (width >=1366px) {
        height: 234px;
      }

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

  .compar-btn {
    margin-block: 48px;
    width: 100%;
    height: 40px;
    text-transform: capitalize;

    &:disabled {
      background-color: var(--tertiary-medium-grey);
      cursor: default;

      &:hover {
        background-color: var(--tertiary-medium-grey);
      }
    }

    &:hover {
      background-color: var(--secondary-main);
    }
  }

  .color-disclaimer {
    position: absolute;
    left: 0;
    right: 0;
    top: 95px;
    display: none;
    justify-content: center;
    font-style: italic;
    color: var(--secondary-main);

    &.active {
      display: flex;
    }
  }

  .addMoreCars {
    justify-content: center;
    align-items: center;
    display: none;

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

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

    .addcarsBtn {
      display: flex;
      width: 20px;
      height: 20px;
      border: none;
      cursor: pointer;
      background-image: url('/icons/add-white.svg');
      background-color: var(--primary-main);
      background-repeat: no-repeat;
      background-position: center;
      padding: 6px;
      box-sizing: content-box;

      &:disabled {
        background-color: var(--tertiary-medium-grey);
        cursor: default;
      }
    }
  }

  .blank-item {
    display: none;
  }

  .vehicle-dropdown {
    margin-top: 24px;

    .dropdown {
      position: relative;
      display: inline-block;
      width: 100%;
    }

    .hidden {
      display: none;
    }

    .dropdown-button {
      display: flex;
      width: 100%;
      padding: 6px 0px;
      justify-content: space-between;
      align-items: center;
      position: relative;
      background: none;
      border: none;
      border-bottom: 1px solid var(--tertiary-deep-Grey);
      cursor: pointer;
      color: var(--secondary-main);
      opacity: 1;
      min-height: 32px;

      &:disabled {
        cursor: default;
        opacity: 0.5;
      }
    }

    .dropdown-button::after {
      content: '';
      position: absolute;
      display: flex;
      width: 24px;
      height: 24px;
      right: 0;
      background-image: url('/icons/arrow-dropdown.svg');
    }

    .dropdown.open .dropdown-lists {
      display: block;
    }

    .dropdown-list {
      min-height: 100px;
      max-height: 150px;
      overflow: hidden auto;
      position: absolute;
      width: calc(100% - 2px);
      margin-top: 0;
      z-index: 99;
    }


    .dropdown-list-container {
      position: absolute;
      width: 100%;
      height: 150px;
      z-index: 2;
      margin-top: 2px;
      overflow: hidden;
      background-color: var(--tertiary-white);
      box-shadow: 0 2px 8px 0 rgb(0 0 0 / 0.06);
    }

    .dropdown-list li {
      display: flex;
      padding: 12px 16px;
      flex-direction: column;
      gap: 4px;
      align-items: flex-start;
      justify-content: space-between;
      cursor: pointer;
    }

    .dropdown-list li:hover {
      background-color: var(--tertiary-light-grey);
    }

    .variant-dropdown {
      @media (width<768px) {
        .add-margin {
          margin-top: 23.5px;
        }

        button {
          padding-inline-end: 22px;
        }
      }

      .dropdown-content {
        position: absolute;
        margin-top: 2px;
        box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 0.06);
        background-color: var(--tertiary-white);
        width: 100%;
        z-index: 2;

        .dropdown-list {
          position: static;
          margin: 0;
          box-shadow: none;

          li {
            padding: 12px 16px;
            position: relative;

            .item-category {
              display: none;
            }

            &.preselected {
              pointer-events: none;
              cursor: default;

              * {
                color: var(--tertiary-medium-grey);
              }
            }

            &.no-results {
              cursor: default;

              &:hover {
                background-color: transparent;
              }
            }
          }
        }

        .tabs {
          display: flex;
          justify-content: unset;
          align-items: flex-start;
          margin: 0 4px 12px;
          overflow: hidden;

          .tab-button {
            width: 100%;
            color: var(--secondary-main);
            display: flex;
            padding: 12px 24px;
            justify-content: center;
            align-items: center;
            gap: 10px;
            background: none;
            border: none;
            cursor: pointer;
            overflow: hidden;
            position: relative;

            &::after {
              content: '';
              position: absolute;
              height: 1px;
              width: 100%;
              background-color: var(--tertiary-medium-grey);
              bottom: 0px;
            }

            &.active {
              color: var(--primary-main);
              font-weight: var(--fw-500);

              &::after {
                height: 2px;
                background-color: var(--primary-main);
              }
            }
          }
        }

        .filters {
          display: inline-flex;
          justify-content: flex-start;
          align-items: flex-start;
          gap: 11px;
          margin: 0 4px 16px;
          max-width: -webkit-fill-available;
          overflow: scroll;
          scrollbar-width: none;

          .filter-button {
            display: flex;
            padding: 4px 12px;
            align-items: flex-start;
            gap: 4px;
            background: none;
            border-radius: 18px;
            border: 1px solid var(--tertiary-medium-grey);
            color: var(--tertiary-deep-Grey);
            min-width: max-content;
            cursor: pointer;

            &.active {
              color: var(--tertiary-white);
              background: var(--primary-main);
            }
          }
        }
      }
    }
  }

  .d-flex {
    display: flex;
  }

  .align-items-center {
    align-items: center;
  }

  .justify-content-center {
    justify-content: center;
  }

  .justify-content-space-between {
    justify-content: space-between;
  }

  .carColor-wrapper {
    .colorBox {
      gap: 8px;
      margin: 16px 0 20px;

      @media (width<768px) {
        padding-bottom: 9px;
      }

      .color-btn {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        border: 1px solid var(--tertiary-medium-grey);

        input[type='radio'] {
          appearance: none;
        }
      }
    }
  }

  .compare__colors-wrapper {
    display: flex;
    align-items: flex-start;
    min-width: 154px;
    margin-top: 16px;
    justify-content: space-evenly;

    .compare__colors-list {
      display: flex;
      gap: 8px;
      width: calc(100% - 54px);
      height: 42px;
      overflow: hidden hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
      position: relative;

      /* justify-content: center; */
      @media (width<768px) {
        height: 54px;

        &::before {
          content: attr(selected-content);
          font-size: var(--body-xs-nexa, var(--body-xxs-arena));
          color: var(--secondary-main);
          font-weight: var(--fw-400);
          line-height: var(--lh-16px-nexa, var(--lh-16px-arena));
          position: absolute;
          top: 24px;
        }
      }

      div {
        cursor: pointer;
        flex-shrink: 0;

        &[data-content*="Arctic"][data-content$="White"] {
          box-shadow: 1px 1px 1px 0px #cecece;
          border: 1px solid #cecece;
        }

        &.compare__colors-white span {
          content: '';
          position: absolute;
          height: 24px;
          width: 24px;
          top: 0;
          left: 0;
        }

        &::before {
          font-size: var(--body-xs-nexa, var(--body-xxs-arena));
          color: var(--secondary-main);
          font-weight: var(--fw-400);
          line-height: var(--lh-16px-nexa, var(--lh-16px-arena));
          position: absolute;
          top: 28px;
          width: max-content;
        }

        &.selected {
          &::after {
            content: '';
            width: 24px;
            height: 24px;
            margin: auto;
            position: relative;
            display: flex;
            background-image: url('/icons/check.svg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
          }

          &::before {
            content: attr(data-content);
          }

          &.selected.compare__colors-white::after {
            background-image: url('/icons/check_grey.svg');
          }
        }
      }
    }

    .slide-icon {
      cursor: pointer;
      content: '';
      width: 24px;
      height: 24px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .slide-right {
      background-image: url('/icons/slide_right.svg');

      &.disabled {
        opacity: 0.4;
        cursor: default;
      }
    }

    .slide-left {
      background-image: url('/icons/slide-left.svg');

      &.disabled {
        opacity: 0.4;
        cursor: default;
      }
    }

    .compare__colors-list .selected::before {
      white-space: nowrap;
    }

    .colorbox-start::before {
      left: 0;
      transform: translateX(0);
      text-align: left;
    }

    .colorbox-center {
      display: flex;
      justify-content: center;
      align-items: center;

      &.selected {
        &::after {
          top: 0px !important;
        }
      }
    }

    .colorbox-end::before {
      left: 100%;
      transform: translateX(-100%);
      text-align: right;
    }
  }

  .explore-vehicle-wrapper {
    display: flex;
    flex-direction: column;

    .exploreVehicle-content {
      display: flex;
      flex-direction: column;
      gap: 4px;

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

        .exploreVehicle-price {
          margin-top: 26px;
        }
      }


      .exploreVehicle-text {
        line-height: var(--lh-20px-nexa, var(--lh-16px-arena));
        text-transform: uppercase;
        color: var(--secondary-main);
        margin-top: 25px;

        @media (width >=768px) {
          margin-top: 27px;
        }
      }
    }

    .exploreVehicle-btn a {
      display: flex;
      width: 152px;
      height: 32px;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      border: 1px solid var(--primary-main);
      margin-top: 12px;
      color: var(--primary-main);

      @media (width >=768px) {
        margin-top: 13px;
      }
    }
  }

  .car-info-wrapper {
    margin-block: 64px;

    ul,
    li {
      margin: 0px;
      padding: 0px;
    }

    .heading {
      margin-bottom: 24px;
    }

    .accordion-lists {
      transition: all 0.5s ease-in-out;

      .accordion-item {
        border-bottom: 1px solid var(--tertiary-medium-grey);
        background: var(--tertiary-white);
        margin-bottom: 8px;
        cursor: default;

        &.active {
          .accordion-content {
            height: auto;
            overflow: visible;
            display: flex;
          }

          .accordion-btn {
            background-image: url('/icons/minus-black.svg');
          }
        }
      }

      .accordion-header {
        display: flex;
        justify-content: space-between;
        height: 40px;
        padding: 12px 8px;
        cursor: pointer;
        border: 0px;
        width: 100%;
        background: var(--tertiary-white);

        .accordion-header-text {
          color: var(--primary-main);
        }

        .accordion-btn {
          width: 16px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-image: url('/icons/add.svg');
        }
      }

      .accordion-content {
        margin-block: 12px 16px;
        display: none;
        flex-flow: column wrap;
        gap: 32px;
        height: 0px;
        overflow: hidden;

        .column:first-child {
          padding-left: 8px;
        }

        .g-row.active {
          background: var(--secondary-blue);
          scroll-margin-top: 332px;
          padding-block: 8px;
        }

        .column:last-child {
          padding-right: 8px;
        }

        .column:nth-last-of-type(1) {
          display: none;
        }

        .title {
          color: var(--secondary-main);
          font-style: italic;
          margin-bottom: 8px;
        }

        .detail {
          margin-bottom: 4px;

          &:last-child {
            margin-bottom: 0px;
          }
        }
      }
    }

    .accordion-wrapper .buildYourOwn {
      display: none;
    }

    .accordion-wrapper.overview .g-sm-2:nth-child(4) {
      display: none;
    }

    .cards {
      margin-top: 25px;
      padding: 8px 8px 8px 8px;
      display: flex;
      gap: 4px;
      position: relative;
      justify-content: space-between;
      background: var(--gradient-4);
      align-items: flex-start;
      height: calc(100% - 25px);

      &::before {
        content: '';
        clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 15px, calc(100% - 15px) -68px);
        top: -12px;
        position: absolute;
        right: 0px;
        width: 68px;
        height: 12px;
        background: #d9d9d9;
        opacity: 0.4;

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

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

      .content {
        display: flex;
        align-items: center;

        .title {
          color: var(--tertiary-black);
        }

        .description {
          color: var(--secondary-main);
          display: none;
        }
      }

      .anchor {
        background: url('/icons/teaser_arrow-dark.svg') no-repeat;
        height: 24px;
        width: 24px;
        display: block;
        background-size: 24px 24px;
        flex-shrink: 0;
      }

      margin-bottom: -2px;
    }

    .save-and-comparision {
      margin-top: 24px;
      display: flex;
      justify-content: flex-start;

      .btn-save-and-comparision {
        display: inline-flex;
        height: 32px;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        border: none;
        cursor: pointer;
        color: var(--primary-main);
        background-color: transparent;

        .save-icon {
          background: url('/icons/download.svg') -1px -3px no-repeat;
          width: 16px;
          height: 16px;
        }
      }
    }

    .buildYourOwn,
    .bookTestDrive,
    .bookVehicle {
      & .g-lg-4:nth-child(3) {
        display: none;
      }
    }

    .tick {
      background: url('/icons/tick.svg') no-repeat;
    }

    .minus {
      background: url('/icons/minus-black.svg') no-repeat;
    }

    .tick,
    .minus {
      height: 32px;
      width: 32px;
      display: block;
      background-size: 32px 32px;
    }
  }

  .save-share-modal {
    width: 100%;
    padding: 32px 12px;
    border: none;
    overflow: visible;
    max-width: 320px;
    place-self: center;

    &::backdrop {
      background: rgb(0 0 0 / 0.55);
      backdrop-filter: blur(6px);
    }

    &::before {
      content: '';
      clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 15px, calc(100% - 16px) -124px);
      top: -15px;
      position: absolute;
      right: -1px;
      width: 124px;
      height: -webkit-fill-available;
      background: var(--tertiary-white);
      z-index: -1;
    }

    .close-modal {
      display: block;
      height: 16px;
      width: 16px;
      background: url('/icons/tooltip-close.svg') no-repeat;
      appearance: none;
      border: none;
      justify-self: flex-end;
      margin-bottom: 0;
      cursor: pointer;
      margin-left: auto;
    }

    .pdf-saved-msg {
      display: none;
      justify-content: space-between;
      color: var(--toast-green-main);
      background: var(--toast-green);
      padding: 12px 16px;

      a {
        font-weight: var(--fw-400);
        color: inherit;
      }

      &.show {
        display: flex;
      }
    }

    .modal-title {
      padding-top: 16px;
      padding-bottom: 8px;

      &:nth-child(5) {
        padding-top: 0;
      }
    }

    .modal-desc {
      color: var(--secondary-main);
      margin: 0;
    }

    .download-buttons {
      padding-top: 32px;
      padding-bottom: 20px;
      display: flex;
      flex-direction: column;
      row-gap: 20px;
    }

    .social-icons {
      padding-top: 24px;
      display: flex;
      gap: 14px;

      a {
        display: flex;
        width: 36px;
        height: 36px;
        padding: 6px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 149.422px;
        border: 0.498px solid var(--questionnaire-white);
        background: var(--nav-background-color);
        cursor: pointer;
        position: relative;

        .clipboard-popup {
          position: absolute;
          top: -50px;
          left: 0;
          padding: 8px 12px;
          width: max-content;
          background: var(--secondary-main);
          box-shadow: 0px 2px 7px 0px rgb(0 0 0 / 0.12);
          display: none;

          &.active {
            display: block;
          }
        }
      }
    }

    .modal-btn {
      display: inline-flex;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      border: none;
      cursor: pointer;
      color: var(--primary-main);
      background: var(--gradient-1);
      width: 100%;
      position: relative;

      .save-icon {
        background: url('/icons/download-blue.svg') -1px 0 no-repeat;
        width: 16px;
        height: 16px;
      }

      &.hide {
        display: none;
      }

      &::before {
        content: '';
        clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 15px, calc(100% - 8px) -68px);
        top: -7.7px;
        position: absolute;
        right: 0px;
        width: 68px;
        height: 8px;
        background: var(--questionnaire-white);
        opacity: 0.6;
      }
    }
  }

  .search-block-wrapper {
    &.sticky-pannel {
      position: sticky;
      top: 0px;
      margin-inline: -20px;
      padding-inline: 20px;
      padding-block: 24px;
      background: var(--gradient-3, var(--gradient-5-arena));
      z-index: 9;
    }

    .sticky-row {
      display: none;
    }

    display: flex;
    justify-content: space-between;

    .sm-order {
      order: 1;
    }

    .anchor-tab {
      display: flex;
      overflow-x: auto;
      flex-wrap: nowrap;
      scrollbar-width: none;
      scroll-behavior: smooth;
      margin-top: 24px;

      a {
        color: var(--secondary-main);
        display: flex;
        padding: 12px 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-wrap-mode: nowrap;
        border-bottom: 1px solid var(--tertiary-medium-grey);

        &.active {
          position: relative;
          color: var(--primary-main);
          font-weight: var(--fw-500);

          &:after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0px;
            right: 0px;
            height: 2px;
            width: 100%;
            border-bottom: 2px solid var(--primary-main);
          }
        }
      }
    }

    .search-input-wrapper {
      display: flex;
      padding: 8px 0px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--tertiary-deep-Grey);
      position: relative;
      font-size: var(--body-m-nexa);
      font-weight: var(--fw-400);
      line-height: var(--lh-20px-nexa);
      color: var(--secondary-main);

      .search-close-btn {
        background: url('/icons/close_black.svg') transparent no-repeat;
        width: 24px;
        height: 24px;
        right: 0px;
        top: 12px;
        cursor: pointer;
        display: none;
        position: absolute;
        border: none;
      }

      &.close {
        &:after {
          background: none;
        }

        .search-close-btn {
          display: block;
        }
      }

      form {
        width: 100%;
      }

      input {
        overflow: hidden;
        color: var(--secondary-main);
        text-overflow: ellipsis;
        font-size: var(--body-m-nexa, var(--body-xs-arena));
        font-weight: var(--fw-400);
        line-height: var(--lh-20px-nexa, var(--lh-18px-arena));
        display: -webkit-box;
        width: 100%;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        border: 0px;
        position: relative;
        background: transparent;

        &::placeholder {
          font-size: var(--body-m-nexa, var(--body-xs-arena));
          color: var(--secondary-main);
          font-weight: var(--fw-400);
          line-height: var(--lh-20px-nexa, var(--lh-18px-arena));
        }

        &:focus {
          outline: 0px;
        }
      }

      &:after {
        content: '';
        background: url('/icons/search_icon_grey.svg') transparent no-repeat;
        right: 0px;
        top: 0px;
        height: 24px;
        width: 24px;
      }

      .searchdropdown {
        max-height: 150px;
        overflow-y: auto;
        position: absolute;
        width: 100%;
        background-color: var(--tertiary-white);
        margin-top: 0px;
        top: 45px;
        box-shadow: 0px 2px 8px 0px rgb(0 0 0 / 0.06);
        z-index: 99;

        .searchdropdown-list {
          margin-block: 0px;

          li {
            padding: 12px 24px 12px 16px;
            color: var(--primary-main);
            cursor: pointer;

            &:hover {
              background-color: var(--tertiary-light-grey);
            }

            .highlight-letters {
              color: var(--primary-main);
            }
          }
        }

        .no-results {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 12px 50px 16px 12px;
          gap: 16px;

          .no-results-icon {
            color: var(--tertiary-deep-Grey);
            font-size: var(--heading-xl-nexa);
            line-height: var(--lh-54px-nexa);
            letter-spacing: 1.92px;
          }

          .no-results-title {
            color: var(--primary-main);
          }

          .no-results-text {
            color: var(--secondary-main);
            padding-top: 4px;
            margin: 0;
          }
        }
      }
    }
  }

  .checkbox-wrapper {
    display: flex;
    gap: 48px;
    margin-top: 24px;
    align-items: center;

    .checkbox-group {
      display: flex;
      gap: 8px;
      align-items: center;

      input {
        appearance: none;
        border: 1px solid var(--secondary-main);
        margin: 0px;
        height: 16px;
        width: 16px;

        &:checked {
          background: url('/icons/checkbox-tick.svg') no-repeat 3px 4px #000;
          border: 0px;
        }
      }
    }
  }

  .visible-hidden {
    visibility: hidden;
  }

  .tooltip-wrapper {
    display: inline;
    position: relative;

    .tooltip-icon {
      width: 12px;
      height: 12px;
      border: none;
      border-radius: 50%;
      position: relative;
      margin-left: 4px;
      display: inline-flex;
      cursor: pointer;
      background: var(--Gradients-Gradient-4---60,
          linear-gradient(238deg, rgb(56 79 110 / 0.6) -11.12%, rgb(91 91 91 / 0.6) 111.5%));

      &:after {
        content: 'i';
        color: var(--tertiary-white, #fff);
        font-size: 8px;
        font-weight: var(--fw-400);
        line-height: 17.143px;
        height: 12px;
        width: 12px;
        position: absolute;
        display: flex;
        align-items: center;
        top: 1px;
        border-radius: 50%;
        justify-content: center;
        left: 0%;
      }
    }

    .tooltip-overlay {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100vw;
      background: rgb(0 0 0 / 0.5);
      z-index: 9;
      display: none;
    }

    &.active {

      .tooltip-content,
      .tooltip-overlay {
        display: flex;
      }
    }

    .tooltip-content {
      position: fixed;
      justify-content: flex-start;
      align-items: flex-start;
      background: var(--tertiary-white);
      box-shadow: 0px 2px 7px 0px rgb(0 0 0 / 0.12);
      width: 100%;
      padding: 12px;
      gap: 8px;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 99;
      display: none;

      &>img {
        width: 180px;
        height: 141px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }

      &::before {
        content: '';
        background-color: var(--tertiary-white);
        clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 16px, calc(100% - 0px) -124px);
        height: 16px;
        position: absolute;
        top: -15px;
        right: 0px;
        width: 124px;
      }

      .tooltip-close {
        display: block;
        height: 16px;
        min-width: 16px;
        background: url(/icons/tooltip-close.svg) no-repeat;
        appearance: none;
        border: none;
        margin: 4px 0px 0px 2px;
        padding: 0px;
      }
    }
  }

  .sticky-pannel {
    padding-inline: -20px;

    .g-sm-2:first-child,
    .g-sm-4 {
      padding-left: 8px;
    }

    .sticky-row {
      display: flex;
    }

    .anchor-tab {
      margin-top: 16px;
    }

    .search {
      margin-top: 21px;
      margin-bottom: 0px;
    }

    .sticky-column:nth-child(3) {
      display: none;
    }

    .sticky-title {
      margin: 0px;
    }

    .sticky-sub-title {
      margin: 0px;
      margin-top: 2px;
      min-height: 39px;
    }

    .sticky-price-wrapper {
      display: flex;
      gap: 4px;
      align-items: center;
      margin-top: 0px;

      .sticky-price-text {
        color: var(--secondary-main);
        text-transform: uppercase;
        margin: 0px;
      }

      .sticky-price {
        color: var(--primary-main);
        font-size: var(--body-xs-nexa, var(--body-xs-arena));
        font-weight: var(--fw-500);
        line-height: var(--lh-16px-nexa, var(--lh-18px-arena));
        margin: 0px;
      }
    }
  }

  .icons-360View {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .icon-360 {
      position: relative;
      height: 12px;
      width: 12px;
      margin: 4px 0px 0px 4px;

      &::before {
        content: '';
        height: 12px;
        width: 12px;
        background: var(--gradient-1);
        opacity: 0.6;
        position: absolute;
        border-radius: 50%;
      }

      &::after {
        content: '';
        height: 12px;
        width: 12px;
        background: url('/icons/switch-360.svg') no-repeat;
        position: absolute;
        background-size: 8px;
        top: 2px;
        left: 2px;
      }
    }

    .icon-fullscreen {
      height: 12px;
      width: 12px;
      position: relative;
      border: none;
      background: transparent;
      margin: 4px 4px 0px 0px;

      &::after {
        content: '';
        height: 12px;
        width: 12px;
        background: url('/icons/fullscreen-gray.svg') no-repeat;
        position: absolute;
        background-size: 12px;
        top: 0px;
        right: 0px;
        cursor: pointer;
      }

      &.interior {
        &::after {
          background-image: url('/icons/fullscreen.svg');
        }
      }
    }

    .text-360 {
      display: flex;
      justify-content: center;
      margin-top: 12px;
      line-height: 7.242px;
      font-size: 4.345px;
      font-weight: var(--fw-400);
      text-transform: uppercase;
    }
  }

  .accordion-360-content {
    canvas {
      width: 100%;
      height: auto;
      aspect-ratio: 16/9;
      object-fit: contain;
    }

    .interior-row,
    .exterior-row {
      .column {
        position: relative;
        padding-left: 8px;

        .icons-360View {
          position: absolute;
          width: calc(100% - 12px);
          z-index: 3;
        }

        .detail {
          position: relative;
        }
      }
    }

    .interior-row {
      display: none;
      min-height: 96px;
    }

    .interior-disclaimer {
      color: var(--secondary-main);
      font-style: italic;
      padding-left: 8px;
      margin-top: -32px;
    }
  }

  .carousel-360 {
    width: 100vw;
    border: none;
    overflow: visible;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0px;
    height: 100vh;

    .splide {
      visibility: visible;
      width: 100vw;
      position: relative;

      .splide__arrows {
        display: none;
      }

      .splide__track {

        /* display: flex; */
        .splide__list {
          flex-wrap: wrap;
          backface-visibility: hidden;
          display: flex;
          height: 100%;
          margin: 0 !important;
          padding: 0 !important;

          .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%;
            margin-top: 90px;

            &[aria-hidden='true'] {
              .icon-close {
                display: none !important;
              }
            }

            @media (width < 1024px) {
              &:nth-of-type(2) {
                margin-top: 0px;

                .splide__slide__container {
                  margin-top: -1px;
                  padding-top: 0px;

                  &::before {
                    top: 0px;
                    height: 0px;
                  }

                  .m-carousel-360-title,
                  .m-carousel-360-sub-title,
                  .carousel-360-wrapper {
                    display: none;
                  }

                  .carousel-360-text-wrapper {
                    .carousel-360-title {
                      margin: 28px -12px 0px 12px;
                    }

                    .carousel-360-sub-title {
                      margin: 33px 12px 0px 12px;
                    }
                  }
                }
              }
            }

            .splide__slide__container {
              background: var(--tertiary-light-grey);
              padding: 16px;
              position: relative;
              margin-top: 15px;

              &::before {
                content: '';
                height: 16px;
                width: 124px;
                background: var(--tertiary-light-grey);
                clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 16px, calc(100% - 0px) -124px);
                display: block;
                position: absolute;
                right: 0px;
                top: -15px;
              }

              .carousel-360-text-wrapper {
                display: flex;
                justify-content: space-between;

                .carousel-360-text {
                  flex: 1;
                }

                .m-carousel-360-sub-title {
                  color: var(--secondary-main);
                  margin: 4px 0px 0px 0px;
                  padding: 0px;
                }

                .carousel-360-sub-title {
                  color: var(--secondary-main);
                  margin: 57px -12px 0px 12px;
                }

                .carousel-360-title {
                  margin: 52px -12px 0px 12px;
                }

                .titles {
                  display: flex;
                  justify-content: space-between;
                }

                .icon-360 {
                  position: relative;
                  height: 36px;
                  width: 36px;
                  display: flex;
                  margin: 6px 0px 0px 12px;

                  &::before {
                    content: '';
                    height: 36px;
                    width: 36px;
                    background: var(--gradient-1);
                    opacity: 0.6;
                    position: absolute;
                    border-radius: 50%;
                  }

                  &::after {
                    content: '';
                    height: 24px;
                    width: 24px;
                    background: url('/icons/switch-360.svg') no-repeat;
                    position: absolute;
                    background-size: 24px;
                    top: 6px;
                    left: 6px;
                  }
                }

                .text-360 {
                  display: flex;
                  justify-content: center;
                  color: var(--primary-main);
                  font-weight: var(--fw-400);
                  text-transform: uppercase;
                  margin-top: 38px;
                  font-size: var(--body-xs-nexa);
                  line-height: var(--lh-20px-nexa);
                  width: 100%;
                }

                .icon-close {
                  background: url('/icons/close_black.svg') no-repeat;
                  border: none;
                  width: 16px;
                  height: 16px;
                  cursor: pointer;
                  background-size: 16px;
                  display: flex;
                  margin: 6px 4px 0px 0px;
                }
              }

              .carousel-360-canvash-wrapper {
                canvas {
                  width: 100%;
                  object-fit: contain;
                  height: 161px;
                  margin-top: -18px;
                  aspect-ratio: 16/9;
                }
              }
            }
          }
        }
      }
    }

    .carousel-360-backdrop {
      position: absolute;
      inset: 0 0 0 0;
      width: 100vw;
      height: 100vh;
      background: var(--background-overlay, rgb(0 0 0 / 0.55));
      backdrop-filter: blur(6px);
    }
  }

  .view360-loading-overlay {
    position: absolute;
    inset: 0 0 0 0;
    z-index: 2;
    background: var(--tertiary-black);
    min-height: 70px;

    img {
      object-fit: cover;
      /* filter: blur(6px); */
      opacity: 0.6;
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: -1;
    }

    .view360-loading-overlay-content {
      position: absolute;
      color: var(--tertiary-white);
      inset: 0 0 0 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;

      .view360-loading-text {
        width: 75%;
        margin: 0;
      }

      .view360-progress-bar {
        display: block;
        height: 0.375rem;
        background-color: var(--tertiary-deep-Grey);
        width: 50%;
        clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
        margin-top: 0.2rem;
        margin-bottom: 0.2rem;
      }
    }
  }
}

header.second-scroll+main {
  .compare-cars-wrapper {
    .sticky-pannel {
      top: 84px;
    }

    .car-info-wrapper {
      scroll-margin: 0px;
    }
  }
}

@media (width >=768px) {
  .compare-cars-wrapper {
    .compar-btn {
      width: 100%;
      max-width: 320px;
      margin-block-end: 28px;

      &:disabled {
        width: 100%;
        max-width: 320px;
      }
    }

    .g-row:has(.compar-btn) {
      justify-content: center;
    }

    .carColor-wrapper {
      .colorBox .color-btn {
        height: 32px;
        width: 32px;
      }
    }

    .compare__colors-wrapper {
      margin-top: 16px;
      gap: 8px;
      min-width: 100%;

      .compare__colors-list {
        height: 54px;
        gap: 16px;
        width: calc(100% - 64px);

        div {
          &::before {
            top: 32px;
          }

          &.selected {
            &::before {
              margin-top: 8px;
            }

            &::after {
              width: 32px;
              height: 32px;
            }
          }
        }
      }

      .slide-icon {
        margin-top: 4px;
      }
    }

    .tooltip-wrapper {
      .tooltip-icon {
        &:hover+.tooltip-content {
          display: flex;
        }
      }

      &.active {

        .tooltip-content,
        .tooltip-overlay {
          display: none;
        }
      }

      .tooltip-content {
        position: absolute;
        display: none;
        justify-content: center;
        align-items: flex-start;
        background: var(--secondary-main);
        box-shadow: 0px 2px 7px 0px rgb(0 0 0 / 0.12);
        width: 237px;
        height: max-content;
        padding: 8px;
        gap: 8px;
        top: 0;
        left: 0;
        transform: translate(14%, -42%);
        cursor: pointer;

        &>img {
          width: 94px;
          height: 89px;
        }

        &::before {
          content: '';
          background: url('/icons/tooltip-arrow.svg') no-repeat;
          width: 17px;
          height: 19px;
          position: absolute;
          left: -17px;
          top: 50%;
          transform: translateY(-50%);
          clip-path: none;
        }

        .tooltip-desc {
          color: var(--tertiary-white);
        }

        .tooltip-close {
          display: none;
        }
      }
    }

    .search-block-wrapper {
      .sticky-row {
        display: none;
      }

      &.sticky-pannel {
        .sticky-row {
          display: flex;
        }

        padding-inline: 56px;
        margin-inline: -56px;
        top: 0px;

        .g-sm-2:first-child,
        .g-sm-4 {
          padding-left: 8px;
        }

        .anchor-tab {
          margin-top: 16px;
        }

        .search {
          margin-top: 21px;
          margin-bottom: 0px;
        }
      }
    }

    .icons-360View {
      .icon-360 {
        position: relative;
        height: 36px;
        width: 36px;
        margin: 8px 0px 0px 8px;

        &::before {
          height: 36px;
          width: 36px;
          opacity: 0.6;
          position: absolute;
        }

        &::after {
          height: 24px;
          width: 24px;
          background: url('/icons/switch-360.svg') no-repeat;
          background-size: 24px;
          top: 6px;
          left: 6px;
        }
      }

      .icon-fullscreen {
        height: 24px;
        width: 24px;
        margin: 4px 4px 0px 0px;

        &::after {
          content: '';
          height: 24px;
          width: 24px;
          background-size: 24px;
        }
      }

      .text-360 {
        margin-top: 36px;
        font-size: var(--body-xs-nexa);
        line-height: var(--lh-20px-nexa);
      }
    }
  }

  header.second-scroll+main {
    .compare-cars-wrapper {
      .sticky-pannel {
        top: 64px;
      }
    }
  }
}

@media (width >=1024px) {
  .compare-cars-wrapper {

    .addMoreCars,
    .blank-item {
      display: flex;
    }

    @media (width >=1366px) {
      .compare-cars-wrapper {
        margin-top: 25px;
      }
    }

    .g-row:has(.compar-btn) {
      justify-content: end;
    }

    .compar-btn {
      margin-block: 96px 121px;
      width: 128px;
      height: 52px;

      &:disabled {
        width: auto;
      }
    }

    .color-disclaimer {
      top: auto;
      bottom: 0;
      right: auto;
      align-items: center;
    }

    .carColor-wrapper {
      &:has(.colorBox) {
        height: 70px;
      }

      .colorBox {
        gap: 14px;
        margin: 16px 0 24px;

        .color-btn {
          width: 32px;
          height: 32px;
          flex-shrink: 0;
          border: 1px solid var(--tertiary-medium-grey);

          input[type='radio'] {
            appearance: none;
          }
        }
      }
    }

    .vehicle-dropdown {
      margin-top: 24px;

      .dropdown-button {
        padding: 10px 0px;
        height: 40px;
      }

      .dropdown-list li {
        align-items: center;
        flex-direction: row;
        gap: 0;
      }

      .variant-dropdown {
        .dropdown-content {
          .tabs {
            margin: 0 4px 12px 12px;

            .tab-button {
              padding: 12px 48px;
            }
          }

          .filters {
            margin: 0 12px 12px;
          }

          .dropdown-list {
            li {
              padding: 12px 16px 34px;

              .item-category {
                position: absolute;
                bottom: 10px;
                color: var(--secondary-main);
                display: block;
              }

              &.preselected {
                pointer-events: none;
                cursor: default;

                * {
                  color: var(--tertiary-medium-grey);
                }
              }
            }
          }
        }
      }
    }

    .compare__colors-wrapper {
      margin-top: 16px;
      gap: 8px;
      min-width: 100%;

      .compare__colors-list {
        width: calc(100% - 64px);

        div {
          &::before {
            top: 32px;
          }

          &.selected {
            &::before {
              margin-top: 8px;
            }

            &::after {
              width: 32px;
              height: 32px;
            }
          }
        }
      }

      .slide-icon {
        margin-top: 4px;
      }
    }

    .explore-vehicle-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .exploreVehicle-content {
        display: flex;
        gap: 8px;

        .exploreVehicle-text {
          margin-top: 38px;
        }

        .exploreVehicle-price {
          margin-top: 35px;
        }
      }

      .exploreVehicle-btn a {
        margin-top: 32px;
      }
    }

    .checkbox-wrapper {
      margin-top: 40px;
      gap: 83px;
    }

    .save-share-modal {
      max-width: 1041px;
      padding: 32px 24px;

      &::before {
        clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 24px, calc(100% - 24px) -284px);
        top: -22px;
        width: 284px;
      }

      .close-modal {
        height: 24px;
        width: 24px;
        background-size: 100%;
        margin: 0;
      }

      .pdf-saved-msg {
        padding: 10px 24px;
        max-width: 815px;

        a {
          text-decoration: underline;
        }
      }

      .modal-title {
        padding-top: 40px;
        padding-bottom: 4px;

        &:nth-child(5) {
          padding-top: 0;
        }
      }

      .download-buttons {
        padding-top: 32px;
        padding-bottom: 0;
        display: flex;
        flex-direction: row;
        column-gap: 32px;
      }

      .social-icons {
        padding-top: 32px;
        display: flex;
        gap: 16px;
      }

      .modal-btn {
        padding: 10px 8px;
        width: auto;

        .save-icon {
          width: 24px;
          height: 24px;
          background-size: 100%;
        }
      }
    }

    .car-info-wrapper {
      margin-block: 120px;

      .heading {
        margin-bottom: 32px;
      }

      .accordion-lists {
        .accordion-item {
          margin-bottom: 16px;

          &.active {
            .accordion-content {
              height: auto;
              overflow: visible;
            }
          }
        }

        .accordion-header {
          height: 52px;
          padding: 16px;

          .accordion-btn {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
          }
        }

        .accordion-content {
          margin-block: 16px 16px;
          gap: 40px;

          .column:first-child {
            padding-left: 16px;
          }

          .g-row.active {
            background: var(--secondary-blue);
            scroll-margin: 332px;
            padding-block: 12px;
          }

          .column:last-child {
            padding-right: 16px;

            &:has(canvas) {
              padding-right: 0px;
            }
          }

          .column:nth-last-of-type(1) {
            display: block;
          }

          .title {
            margin-bottom: 12px;
          }

          .detail {
            margin-bottom: 8px;
          }
        }
      }

      .cards {
        &::before {
          content: '';
          clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 15px, calc(100% - 15px) -68px);
          position: absolute;
          right: 0px;
          width: 68px;
          height: 12px;
          background: #d9d9d9;
        }

        margin-top: 28px;
        padding: 16px 16px 16px 24px;
        display: flex;
        position: relative;
        align-items: flex-start;
        width: 100%;
        justify-content: space-between;

        .content {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          max-width: 224px;
          height: 100%;
          width: 100%;
          justify-content: space-between;

          .title {
            font-weight: var(--fw-500);
            color: var(--primary-main);
            margin-bottom: 12px;
            top: 25px;

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

          .description {
            display: flex;
            position: relative;
          }
        }

        .anchor {
          background: url('/icons/teaser_arrow-dark.svg') no-repeat;
          height: 60px;
          width: 60px;
          background-size: 60px 60px;
          display: flex;
        }
      }

      .save-and-comparision {
        justify-content: flex-end;
      }

      .buildYourOwn,
      .bookTestDrive,
      .bookVehicle {
        & .g-lg-4:nth-child(3) {
          display: flex;
        }
      }
    }

    .search-block-wrapper {
      display: flex;
      justify-content: space-between;
      margin-top: 26px;

      .search {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
      }

      .sm-order {
        order: unset;
      }

      .anchor-tab {
        margin-top: 0px;
        overflow-x: unset;

        a {
          padding: 12px 48px;
        }
      }

      .search-input-wrapper {
        width: 354px;
      }

      &.sticky-pannel {
        padding-block: 40px;

        .g-sm-2:first-child,
        .g-sm-4 {
          padding-left: 16px;
        }

        .sticky-row {
          display: flex;

          .sticky-column:nth-child(3) {
            display: block;
          }
        }

        .anchor-tab {
          margin-top: 41px;
        }

        .search {
          margin-top: 42px;
          margin-bottom: 0px;
        }

        .sticky-sub-title {
          margin-top: 4px;
          min-height: auto;
        }

        .sticky-price-wrapper {
          margin-top: 23px;

          .sticky-price {
            font-size: var(--body-xl-nexa);
            line-height: var(--lh-24px-nexa);
          }
        }
      }
    }

    .carousel-360 {
      width: 100vw;
      border: none;
      overflow: visible;
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      bottom: 0;
      margin: 0;
      padding: 0px;
      height: 100vh;

      .splide {
        visibility: visible;

        .splide__track {
          .splide__list {
            flex-wrap: nowrap;

            .splide__slide {
              width: 100%;
              margin-top: 75px;
              margin-bottom: 74px;

              .splide__slide__container {
                padding: 24px;
                margin-top: 24px;
                min-height: clamp(506px, 80vh, 596px);

                &::before {
                  content: '';
                  height: 24px;
                  width: 284px;
                  clip-path: polygon(calc(100% - 0px) 0, 100% 0, 100% 100%, 0 100%, 0 26px, calc(100% - 0px) -284px);
                  top: -23px;
                }

                .carousel-360-text-wrapper {
                  display: flex;
                  justify-content: space-between;

                  .m-carousel-360-title,
                  .m-carousel-360-sub-title {
                    display: none;
                  }

                  .titles {
                    justify-content: flex-start;
                    flex-flow: column wrap;
                  }

                  .carousel-360-title {
                    margin: 0;
                  }

                  .carousel-360-sub-title {
                    margin: 4px 0px 0px 0px;
                    padding: 0px;
                  }

                  .icon-360 {
                    position: relative;
                    height: 36px;
                    width: 36px;
                    display: flex;
                    margin-top: 48px;
                    margin-left: 0px;

                    &::before {
                      content: '';
                      height: 36px;
                      width: 36px;
                      background: var(--gradient-1);
                      opacity: 0.6;
                      position: absolute;
                      border-radius: 50%;
                    }

                    &::after {
                      content: '';
                      height: 24px;
                      width: 24px;
                      background: url('/icons/switch-360.svg') no-repeat;
                      position: absolute;
                      background-size: 24px;
                      top: 6px;
                      left: 6px;
                    }
                  }

                  .icon-close {
                    background: url('/icons/close_black.svg') no-repeat;
                    border: none;
                    width: 24px;
                    height: 24px;
                    cursor: pointer;
                    margin: 0px;
                  }
                }

                .carousel-360-canvash-wrapper {
                  canvas {
                    min-height: 407px;
                    position: absolute;
                    top: 113px;
                    left: 0px;
                  }
                }
              }
            }
          }
        }

        .splide__arrows {
          display: flex;
          gap: 24px;
          position: absolute;
          bottom: 100px;
          right: calc(11.94% + 24px);

          .splide__arrow {
            width: 48px;
            height: 48px;
            border: none;
            cursor: pointer;
            background-size: 19.2px;

            &:disabled {
              cursor: default;
              opacity: 0.45;
            }

            &.splide__arrow--prev {
              background: url('/icons/left-arrow.svg') no-repeat center;
              padding: 0px;
            }

            &.splide__arrow--next {
              background: url('/icons/right-arrow.svg') no-repeat center;
              padding: 0px;
            }
          }
        }
      }

      .carousel-360-backdrop {
        position: absolute;
        inset: 0 0 0 0;
        width: 100vw;
        height: 100vh;
        background: var(--background-overlay, rgb(0 0 0 / 0.55));
        backdrop-filter: blur(6px);
      }
    }

    .accordion-360-content {

      .interior-row,
      .exterior-row {
        .column {
          padding-left: 16px;

          .icons-360View {
            position: absolute;
            width: calc(100% - 26px);
          }
        }
      }

      .interior-row {
        min-height: 210px;
      }

      .interior-disclaimer {
        padding-left: 16px;
        margin-top: -32px;
      }

      .view360-loading-overlay {
        min-height: 180px;
      }
    }
  }

  header.second-scroll+main {
    .compare-cars-wrapper {
      .sticky-pannel {
        top: 64px;
      }
    }
  }
}

@media (width >=768px) and (width <=1199px) {
  .compare-cars-wrapper {
    .car-item-row {
      justify-content: space-between;

      .g-lg-4 {
        .explore-vehicle-wrapper {
          flex-direction: column;

          .exploreVehicle-btn a {
            margin-top: 8px;
            width: 100%;
          }
        }
      }
    }
  }
}

.section+.section.compare-cars-fragment-container {
  .compare-cars-wrapper {
    .compar-btn {
      @media (width >=1024px) {
        margin-bottom: 0px;
      }
    }
  }
}

main:has(.immersive-teaser-container + .compare-cars-fragment-container) {
  .compare-cars-wrapper {
    .clip__path-inner {
      left: 0;
      top: -15px;
      width: 100%;
      height: 16px;
      position: absolute;
      background-color: var(--tertiary-light-grey);
      clip-path: polygon(calc(80% - 28px) 12px, calc(80% - 20px) 0px, 100% 0%, 100% 100%, 0% 100%, 0% 12px);

      @media (width >=768px) {
        clip-path: polygon(calc(78% - 28px) 12px, calc(78% - 20px) 0px, 100% 0%, 100% 100%, 0% 100%, 0% 12px);
      }

      @media (width >=1024px) {
        top: -24px;
        height: 25px;
        clip-path: polygon(calc(30% - 34px) 24px, calc(30% - 20px) 0px, 100% 0%, 100% 100%, 0% 100%, 0% 24px);
      }

      @media (width >=1600px) {
        clip-path: polygon(calc(29% - 34px) 24px, calc(29% - 20px) 0px, 100% 0%, 100% 100%, 0% 100%, 0% 24px);
      }
    }
  }
}


body.arena {
  .compare-cars-wrapper {
    padding-block: 48px;
    background: var(--tertiary-white);

    .car-item {
      .delete-car {
        background: url(/icons/trash-arena.svg) center / cover no-repeat;
        width: 16px;
        height: 16px;

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


    .car-separator {
      background: url('/icons/separator.svg') no-repeat top;
    }

    .carColor-wrapper {
      .colorBox {

        @media (width >=768px) {
          gap: 16px;
          margin: 15.85px 0px 0px 0px;
          align-items: flex-start;
          height: 54px;
          padding: 0px;
        }

        .color-btn {
          width: 16px;
          height: 16px;

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

    .compare__colors-wrapper {
      .slide-icon {
        width: 16px;
        height: 16px;

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

      .compare__colors-list {
        @media (width < 768px) {
          height: 46px;

          &::before {
            top: 18px;
            color: var(--tertiary-black);
          }
        }

        @media (width < 1024px) {
          width: calc(100% - 45px);
          column-gap: 4px;
        }

        div {
          &.selected {
            &::after {
              content: '';
              width: 16px;
              height: 16px;

              @media (width >=768px) {
                height: 32px;
                width: 32px;
                background-size: 32px;
              }
            }
          }
        }
      }

      .slide-left {
        background-image: url(/icons/arena-slide-left.svg);
      }

      .slide-right {
        background-image: url(/icons/arena-slide_right.svg);
      }
    }

    .vehicle-dropdown {
      margin-top: 12px;

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

      .dropdown-button {
        color: var(--tertiary-black);
        font-weight: var(--fw-600);
        text-align: left;

        &::after {
          background: url(/icons/arena-arrow-dropdown.svg) center/cover no-repeat;
          width: 16px;
          height: 16px;

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

        }

        &:disabled {
          color: var(--bars-unselected);
          opacity: 1;
        }
      }
    }

    .explore-vehicle-wrapper {
      .exploreVehicle-btn a {
        border: none;
        text-decoration: underline;
        color: var(--Primary-main-arena);
        font-size: var(--body-xxs-arena);
        line-height: var(--lh-16px-arena);
        font-weight: var(--fw-400);
        position: relative;
        width: max-content;
        justify-content: flex-start;
        height: auto;
        padding: 0px;
        margin-top: 14px;
        padding-right: 18px;

        @media (width >=1024px) {
          font-size: var(--body-xs-arena);
          line-height: var(--lh-20px-arena);
        }


        &::after {
          content: '';
          position: absolute;
          width: 17px;
          height: 17px;
          background-image: url(/icons/explore-arrow.svg);
          right: 0px;
          top: 0px;
          background-position: center;
        }
      }

      .exploreVehicle-content {
        flex-direction: row;
        align-items: center;

        .exploreVehicle-text {
          margin-top: 11px;
          color: var(--tertiary-black);
          text-transform: none;
        }

        .exploreVehicle-price {
          font-weight: var(--fw-700);
          font-size: var(--body-xs-arena);
          line-height: var(--lh-18px-arena);
          margin-top: 11px;

          @media (width >=768px) {
            margin-top: 10px;
          }

          @media (width >=1024px) {
            line-height: var(--lh-20px-arena);
          }
        }
      }
    }

    .color-disclaimer {
      max-width: 177px;
      right: unset;
      top: 50px;
      justify-content: center;
      color: var(--inactive-content);

      @media (width >=768px) {
        max-width: fit-content;
        top: 60px;
      }

    }

    .compar-btn {
      width: auto;
      margin-top: 52px;
      margin-block-end: 0;
      height: 34px;
      padding: 8px 16px;

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

    }

    .title-wrapper {
      .heading {
        margin-bottom: 24px;
      }

      .description {
        font-size: var(--body-xs-arena);
        line-height: var(--lh-20px-arena);
        margin-bottom: 32px;
        font-weight: var(--fw-300);

        @media (width >=1024px) {
          margin-bottom: 64px;
        }
      }
    }

    .search-block-wrapper {
      margin-top: 16px;

      .anchor-tab {
        gap: 40px;
        border-bottom: 1px solid var(--tertiary-medium-grey);
        width: max-content;
        max-width: 100%;
        margin-top: 24px;

        a {
          padding: 0 0 4px 0;
          border-bottom: 0;
          text-transform: uppercase;
          color: var(--tertiary-black);

          &.active {
            color: var(--Primary-main-arena);
            font-weight: var(--fw-700);

            &:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0px;
              right: 0px;
              height: 2px;
              width: 100%;
              border-bottom: 2px solid var(--Primary-main-arena);
            }
          }
        }
      }

      .search-input-wrapper {
        &::after {
          background: url(/icons/search_icon_blue.svg) no-repeat transparent;
        }

        input {
          font-weight: var(--fw-500);
          color: var(--inactive-content);

          &::placeholder {
            font-weight: var(--fw-500);
            color: var(--inactive-content);
          }
        }
      }
    }

    .sticky-pannel {
      .sticky-title {
        font-size: var(--heading-s-arena);
        line-height: var(--lh-20px-arena);

        @media (width >=1024px) {
          font-size: var(--heading-s-arena);
          line-height: var(--lh-20px-arena);
        }
      }

      .sticky-sub-title {
        margin-top: 12px;
        padding-bottom: 12px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: var(--gradient-6-arena);
        }
      }

      .sticky-price-wrapper {
        margin-top: 12px;

        .sticky-price {
          font-weight: var(--fw-700);
        }

        .sticky-price-text {
          text-transform: inherit;
        }
      }

      .search {
        margin-top: 16px;
      }


    }

    .checkbox-wrapper {
      width: 100%;
      justify-content: flex-end;
      gap: 24px;

      .checkbox-group {
        input {
          &:checked {
            background-color: var(--Primary-main-arena);
          }
        }
      }
    }

    .car-info-wrapper {
      margin-block: 48px 0;

      .accordion-lists {
        .accordion-content {
          .column {
            flex: 1;
            justify-content: stretch;
            display: flex;
            flex-direction: column;
            &:nth-last-of-type(1) {
              display: none;
              @media (width >=1024px) {
                display: flex;
              }
            }
          }
        }

        .accordion-header {
          height: auto;
          padding: 16px 0px;
          align-items: center;

          .accordion-btn {
            background-size: 100%;
            width: 32px;
            height: 32px;
            background-image: url(/icons/add-blue.svg);
          }

          .accordion-header-text {
            font-size: var(--heading-s-arena);
            line-height: var(--lh-20px-arena);
            font-weight: var(--fw-600);
            color: var(--tertiary-black);

            @media (width >=1024px) {
              font-size: var(--heading-s-arena);
              line-height: var(--lh-20px-arena);
            }
          }
        }

        .accordion-item {
          margin-bottom: 0;
          border-image: var(--gradient-7-arena);

          &:first-child {
            .accordion-header {
              padding-top: 0;
            }
          }

          &.active {
            border: none;

            .accordion-btn {
              background-image: url(/icons/minus-blue.svg);
            }
          }
        }
      }

      .accordion-content {
        .column:first-child {
          padding-left: unset;
        }

        .title {
          margin-bottom: 20px;
          color: var(--inactive-content);
          font-style: normal;
          font-size: var(--body-xs-arena);
          line-height: var(--lh-18px-arena);

          @media (width >=1024px) {
            font-size: var(--body-xs-arena);
            line-height: var(--lh-20px-arena);
          }
        }

        .detail {
          padding-bottom: 8px;
          border-bottom: 1px solid var(--grayish-blue);
          font-weight: var(--fw-500);
          line-height: var(--lh-32px-arena);
          flex: 1;
        }
      }

      .cards {
        border: 1px solid var(--light-grey-shade-5);
        background: var(--gradient-5);
        padding: 10px 8px 9px;
        align-items: center;

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


        &::before {
          display: none;
        }

        .anchor {
          background: url(/icons/arena-teaser_arrow-dark.svg) no-repeat;
          height: 24px;
          width: 24px;
          display: block;
          background-size: 24px 24px;
          flex-shrink: 0;

          @media (width >=1024px) {
            width: 48px;
            height: 48px;
            background-size: 100%;
          }

        }

        .content {
          .title {
            color: var(--tertiary-black);
            font-size: var(--body-xxs-arena);
            line-height: var(--lh-16px-arena);
            font-weight: var(--fw-600);
            text-transform: uppercase;

            @media (width >=1024px) {
              font-size: var(--heading-l-arena);
              line-height: var(--lh-28px-arena);
              width: 230px;
            }

          }

          .description {
            color: var(--tertiary-black);
          }
        }
      }

      .save-and-comparision {
        justify-content: flex-end;

        .btn-save-and-comparision {
          flex-direction: row-reverse;
          color: var(--Primary-main-arena);
          text-decoration: underline;
          gap: 2px;
          padding: 0;

          .save-icon {
            background: url(/icons/download-blue.svg) no-repeat;
            width: 18px;
            height: 18px;
          }
        }
      }
    }

    .accordion-360-content {
      .exterior-row {
        canvas {
          position: relative;
          z-index: 1;
          padding: 0 20px;
        }

        .column {
          .icons-360View {
            width: 100%;
            justify-content: flex-end;

            .icon-fullscreen {
              margin: 8px 8.05px 0px 0px;

              @media (width >=1024px) {
                margin: 21.76px 22.48px 0px 0px;
              }

              &::after {
                background: url(/icons/arena-fullscreen-black.svg) no-repeat;
                background-size: 8px 8px;
                width: 8.053px;
                height: 8px;

                @media (width >=1024px) {
                  background-size: 21.503px 23.124px;
                  width: 21.503px;
                  height: 23.124px;
                }
              }
            }

            .icon-360 {
              display: none;
            }
          }

          .detail {
            background: url(/icons/360view-bg-arena.jpg) 0px 0px no-repeat;
            background-size: contain;

            &:after {
              content: '';
              position: absolute;
              inset: 0 0 0 0;
              background: var(--tertiary-white);
              opacity: 0.4;
            }

            &:before {
              content: '';
              bottom: 22px;
              left: calc(50% - 5px);
              position: absolute;
              width: 15px;
              height: 15px;
              background: url(/icons/360-icon.png) no-repeat;
              background-size: 100%;
              z-index: 3;

              @media (width >=1024px) {
                width: 32px;
                height: 32px;
                bottom: 30px;
                left: calc(50% - 20px);
              }
            }
          }
        }
      }
    }

    .save-share-modal {
      padding: 56px 16px 40px;

      &::before {
        content: none;
      }

      .close-modal {
        width: 24px;
        height: 24px;
        background-size: 100%;
        margin-bottom: 0;
        position: absolute;
        top: 16px;
        right: 16px;
      }

      .modal-title {
        display: none;

        &.sub-heading {
          display: block;
          padding-top: 0;
          padding-bottom: 4px;
          color: var(--tertiary-black);
          font-weight: var(--fw-600);
        }
      }

      .modal-desc {
        &.caption {
          font-size: var(--body-xs-arena);
          line-height: var(--lh-18px-arena);
          color: var(--inactive-content);
        }
      }

      .download-buttons {
        padding-top: 16px;
        padding-bottom: 24px;
        position: relative;
        flex-flow: row wrap;
        justify-content: space-between;

        .modal-btn {
          padding: 0;
          gap: 0;
          width: auto;
          color: var(--Primary-main-arena);
          text-decoration: underline;

          &::before {
            content: none;
          }
        }
      }

      .social-icons {
        a {
          padding: 6px 3px;
          border: 0.5px solid var(--questionnaire-white);
          background: var(--tertiary-light-grey);
          border-radius: 0;
        }
      }
    }

    .carousel-360 {
      max-width: 100%;
      max-height: 100%;

      .carousel-360-backdrop {
        background: var(--tertiary-black);
        opacity: 0.8;
      }

      .splide {
        .splide__track {
          .splide__list {
            .splide__slide {
              .splide__slide__container {
                padding: 12px;
                position: relative;
                background: url(/icons/360view-bg-arena.jpg) 0px 0px / 131.346% 128.276% no-repeat;
                margin-top: 0;

                &:after,
                &::before {
                  content: '';
                  position: absolute;
                  top: 0px;
                  bottom: 0px;
                  width: 100%;
                  height: 100%;
                  clip-path: unset;
                  display: block;
                }

                &::after {
                  right: 0px;
                  width: 100%;
                }

                &::before {
                  left: 0px;
                  background: var(--gradient-8-arena);
                  width: 100%;
                }

                .carousel-360-text-wrapper {
                  .icon-close {
                    background: url('/icons/close.svg') no-repeat;
                    background-size: 24px 24px;
                    height: 24px;
                    width: 24px;
                    margin: 4px 4px;
                    position: relative;
                    z-index: 1;
                  }

                  .icon-360 {
                    display: none;
                  }

                  .titles {
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-direction: column;
                    position: relative;
                    z-index: 1;

                    .carousel-360-title {
                      margin: 0;
                    }

                    .carousel-360-title-logo {
                      height: 16px;
                      max-width: 100%;
                      max-height: 100%;
                      object-fit: contain;
                      display: inline-block;
                    }

                    .carousel-360-sub-title {
                      margin: 0px;
                      margin-top: 8px;
                    }
                  }

                  .m-carousel-360-title,
                  .m-carousel-360-sub-title {
                    display: none;
                  }
                }

                & .carousel-360-canvash-wrapper {
                  &::before {
                    content: '';
                    bottom: 16px;
                    left: calc(50% - 15px);
                    position: absolute;
                    width: 2.5rem;
                    height: 2.5rem;
                    background: url(/icons/360-icon.png) no-repeat;
                    background-size: 100%;
                    z-index: 2;

                    @media (width >=1024px) {
                      width: 5rem;
                      height: 5rem;
                      bottom: 4rem;
                    }
                  }

                  canvas {
                    position: relative;
                    z-index: 1;
                    min-height: 195px;

                    @media (width >=1024px) {
                      min-height: 66.2471%;
                      position: absolute;
                    }

                  }
                }
              }

              &:nth-of-type(2) {
                & .splide__slide__container {
                  padding-top: 12px;

                  &::before {
                    top: 0px;
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }
      }
    }

    .info-heading {
      margin-bottom: 24px;
    }

    .g-row:has(.compar-btn) {
      justify-content: end;
    }

    .addMoreCars {
      .addcarsBtn {
        background-color: var(--Primary-main-arena);

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

        &:disabled {
          background-color: var(--inactive-content);
        }
      }
    }
  }

  .compare-cars-fragment[data-compare-cars-redirection-url] {
    .compare-cars-wrapper {
      .compare-cars-block-title-wrapper {
        .heading {
          margin-bottom: 32px;
        }
      }
    }
  }
}

@media print {
  @page {
    padding: 5mm 0 20mm 0;
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;

    .quick-cards-container {
      margin-top: 40px;
      break-before: page;
    }

    header {
      position: absolute;
      top: 0 !important;
      width: 100%;
      z-index: 997;
      background-color: var(--primary-main);
    }

    header.header-scroll.header-hidden {
      visibility: hidden;
      opacity: 1;
    }

    .menu.menu-nexa,
    .shadow-footer {
      visibility: hidden;
    }

    .compare-cars-wrapper {
      display: flex;

      .g-lg-4 {
        width: 30%;
      }
      .g-lg-3 {
        width: 30%;
      }


      .search-block-wrapper {
        display: block;
        position: relative;

        .search {
          position: absolute;
          right: 0;
          top: 0;
        }

        &.sticky-pannel {
          background: none;
          position: relative;
          margin-right: -20px;
          padding-top: 10px;
          padding-right: 10px;
          right: 20px;

          .sticky-row {
            display: none;
          }
        }
      }

      .compare__colors-wrapper {
        & .compare__colors-list {
          flex: 1;
          height: 64px;
          flex-wrap: nowrap;
          gap: 4px !important;
          row-gap: 16px !important;
          overflow: unset;

          & div {
            display: flex;
            align-items: center;
            width: auto;
            height: 24px !important;
            transform: none !important;
            overflow: unset;

            &.selected {
              &::before {
                margin-top: 8px;
              }
            }

            &[data-content*="Arctic"][data-content$="White"] {
              box-shadow: none;
              border: none;
            }
          }
        }

        .slide-icon {
          display: none;
        }
      }

      .car-item {
        &.g-lg-4:nth-child(3) {
          display: block;
        }
        &.g-lg-3:nth-child(3) {
          display: block;
        }
      }
       .car-item-row {
        .g-lg-3:nth-child(3)  {
          display: block;
        }
      }
      .accordion-item.active:has(.accordion-360-content) {
        break-before: page;
      }

      .compar-btn {
        width: auto;
        margin-block: 15px;
      }

      .color-disclaimer {
        top: 0;
        bottom: 0;
        right: auto;
        align-items: center;
      }

      .explore-vehicle-wrapper {
        .exploreVehicle-content {
          flex-direction: unset;

          .exploreVehicle-price {
            margin-top: 25px;
          }
        }
      }

      .car-info-wrapper {

        .buildYourOwn,
        .bookTestDrive,
        .bookVehicle {
          .g-lg-4:nth-child(3),.g-lg-3:nth-child(3)  {
            display: block;
          }

          .g-lg-4, .g-lg-3 {
            width: 30%;
          }
        }

        .accordion-lists {
          .accordion-content {

            .g-row {
              padding: 8px 0;
            }

            .column:nth-last-of-type(1) {
              display: block !important;
            }

            .g-lg-4 {
              width: 30%;
            }
             .g-lg-3 {
              width: 30%;
            }
          }
        }
      }
    }
  }
}