.car-compare.block {
  scroll-margin-top: 80px;
  @media (width >= 1024px) {
   scroll-margin-top: 140px;
 }
}

.car-compare-container {
  padding-top: 40px;

  .compare-section .title-wrapper .button.button-primary-blue.disabled {
    pointer-events: none;
  }


  .compare-section {
    position: relative;
    padding-bottom: 60px;
      .title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .compare-title * {
          color: #1D1D1D;
          font-size: 1.5rem;
          font-style: normal;
          font-weight: var(--fw-700);
          line-height: 1.75rem;
          margin: 0;
        }
        .button {
          position: absolute !important;
          bottom: 0;
          right: 24px;
        }
      }
      .compare-container{
        position: relative;
        margin-top: 16px;
        .divider {
          position: absolute;
          height: 52px;
          left: 50%;
          top: 10px;
          transform: translateX(-50%);
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="64" viewBox="0 0 38 64" fill="none"><path d="M0.606256 62.9667L36.8691 1.00002" stroke="url(%23paint0_linear_3598_1508)"/><defs><linearGradient id="paint0_linear_3598_1508" x1="38.4111" y1="0.999854" x2="-2.61704" y2="62.9048" gradientUnits="userSpaceOnUse"><stop offset="0.03" stop-color="%23A9A9A9" stop-opacity="0"/><stop offset="0.555"/><stop offset="0.966342" stop-color="%23A9A9A9" stop-opacity="0"/></linearGradient></defs></svg>');
          background-repeat: no-repeat;
          background-position: center center;
          @media (width < 768px) {
            width: 50px;
          }
        }
        .car-current-option,
        .car-compare-option {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 15px;
          width: 100%;
        }
        .car-image {
          width: 100%;
          height: clamp(77px, 10vw, 247px);
          position: relative;
          z-index: 9;
          img {
            height: 100%;
            width: 100%;
            object-fit: contain;
          }
        }
        .left-wrapper,
        .right-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .car-details {
          width: 100%;
          text-align: center;
          position: relative;

          /* Custom dropdown styles */
          .custom-select {
            position: relative;
            width: 100%;
            margin-top: 17px;
            &::after {
              --size: 2px;

              background: url('/icons/dropdown-arrow-down.svg') center;
              background-size: 16px;
              position: absolute;
              content: "";
              pointer-events: none;
              bottom: 4px;
              right: 0px;
              width: 16px;
              height: 16px;
            }
            &.open::after {
              transform: rotate(-180deg);
            }

            .car-model,
            .car-variant,
            .compare-car-model,
            .compare-variant {
              width: 100%;
              border-top: none;
              border-left: none;
              border-right: none;
              border-bottom: 1px solid var(--light-grey-shade-6);
              border-radius: 0;
              text-align: left;
              cursor: pointer;
              background-color: transparent;

              .dropdown-placeholder {
                padding: 0px 20px 4px 0px;
                font-size: 12px;
                font-style: normal;
                font-weight: var(--fw-400);
                line-height: 1rem;
              }

              .dropdown-list {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                max-height: 200px;
                overflow-y: auto;
                border: 1px solid var(--light-grey-shade-6);
                background-color: var(--tertiary-white);
                border-top: none;
                z-index: 9;
                margin: 0;
                padding: 0;
                list-style: none;
                text-align: left;

                li {
                  padding: 12px;
                  cursor: pointer;
                  color: var(--tertiary-black);
                  font-size: 12px;

                  &:hover {
                    background-color: var(--hover-gray-arena);
                  }
                  &.disabled {
                    color: var(--inactive-content);
                    pointer-events: none;
                  }
                }
              }
            }
          }
        }
    }

  }
}
/* Desktop layout */
@media (width >= 768px) {
  .car-compare-container {
    padding-block: clamp(40px, calc(100vh - 120px), 120px);
    .car-compare-wrapper {
      background: linear-gradient(359deg, rgba(255, 255, 255, 6.8) 27.76%, rgba(202, 202, 202, 0.80) 36.66%, rgba(255, 255, 255, 0.80) 68.52%);
      background-position: 0px 20px;
    }
    .compare-section {
      padding-bottom: 90px;
      .title-wrapper {
        .compare-title * {
          font-size: 2rem;
          line-height: 2.5rem;
        }
        .button {
          font-weight: 400;
          line-height: 1.125rem;
        }
      }
      .compare-container {
        margin-top: 40px;
        justify-content: space-between;
        .car-image {
          width: 100%;
          height: clamp(140px, 16vw, 200px);
          text-align: center;
          z-index: 9;
        }
        .car-current-option,
        .car-compare-option {
          gap: 12px;
        }
        .divider {
          position: static;
          height: 250px;
          left: 50%;
          top: 10px;
          transform: inherit;
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="177" height="300" viewBox="0 0 177 300" fill="none"><path d="M0.954348 299.745L175.78 1.00071" stroke="url(%23paint0_linear_3667_10685)"/><defs><linearGradient id="paint0_linear_3667_10685" x1="183.213" y1="0.999882" x2="-14.5853" y2="299.447" gradientUnits="userSpaceOnUse"><stop offset="0.03" stop-color="%23A9A9A9" stop-opacity="0"/><stop offset="0.555"/><stop offset="0.966342" stop-color="%23A9A9A9" stop-opacity="0"/></linearGradient></defs></svg>');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }
        .car-image img {
          height: 100%;
          width: auto;
        }
        .car-details {
          .custom-select {
            &::after {
              width: 24px;
              height: 24px;
              background-size: 24px;
              bottom: 7px;
            }

            .car-model,
            .car-variant,
            .compare-car-model,
            .compare-variant {
              margin-top: 24px;

              .dropdown-placeholder {
                font-size: 16px;
                line-height: 1.25rem;
                font-weight: var(--fw-500);
              }

              .dropdown-list li {
                font-size: 16px;
              }
            }
          }
        }
      }

    }
  }
}

@media (width >= 1024px) {
  .car-compare-container {
    padding-block: clamp(40px, calc(100vh - 120px), 120px);

    .compare-section .title-wrapper .button {
      right: 56px;
    }
  }
}