@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

@keyframes spin {
    0 {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotateImageLoading {
    from {
        transform: translate(-50%,-50%) rotateY(0) scale(1.01)
    }

    to {
        transform: translate(-50%,-50%) rotateY(360deg) scale(1.01)
    }
}

.swiper-initialized.swiper-horizontal .swiper-button-prev, .swiper-initialized.swiper-horizontal .swiper-button-next {
    display: flex;
    position: absolute;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--dg-icon-button-border-radius-base,6px);
    border: var(--dg-icon-button-border-width-base,1px) solid var(--dg-icon-button-border-color-quaternary-default,#c49678);
    background: var(--dg-gradient-bg-copper-default,linear-gradient(47deg,#b77f58 0,#9b613b 62.52%,#804620 96.18%));
    padding: var(--dg-spacing-s-5) var(--dg-spacing-m-1)
}

    .swiper-initialized.swiper-horizontal .swiper-button-prev:before, .swiper-initialized.swiper-horizontal .swiper-button-next:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%
    }

    .swiper-initialized.swiper-horizontal .swiper-button-prev:after, .swiper-initialized.swiper-horizontal .swiper-button-next:after {
        position: absolute;
        content: '';
        width: 24px;
        height: 24px;
        background-color: var(--dg-icon-button-icon-color-quaternary-default,#fafafa)
    }

    .swiper-initialized.swiper-horizontal .swiper-button-prev:hover:before, .swiper-initialized.swiper-horizontal .swiper-button-next:hover:before {
        border: var(--dg-icon-button-border-width-base,1px) solid var(--dg-icon-button-border-color-quaternary-hover,#c49678);
        background: var(--dg-gradient-bg-copper-hover,linear-gradient(47deg,#996642 0,#764a2d 52.9%,#562f15 96.18%));
        border-radius: var(--dg-icon-button-border-radius-base,6px)
    }

.swiper-initialized.swiper-horizontal .swiper-button-prev {
    left: 32px
}

    .swiper-initialized.swiper-horizontal .swiper-button-prev:after {
        mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-left-line.svg") no-repeat 100% 100%;
        -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-left-line.svg") no-repeat 100% 100%;
        -webkit-mask-size: cover;
        mask-size: cover
    }

.swiper-initialized.swiper-horizontal .swiper-button-next {
    right: 32px
}

    .swiper-initialized.swiper-horizontal .swiper-button-next:after {
        mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-right-line.svg") no-repeat 100% 100%;
        -webkit-mask: url("https://www.prod.websites.seat.cloud.vwgroup.com/icons/cupra-diagonal/arrow-right-line.svg") no-repeat 100% 100%;
        -webkit-mask-size: cover;
        mask-size: cover
    }

.swiper-initialized.swiper-horizontal .swiper-button-disabled {
    opacity: 0;
    pointer-events: none
}

.swiper-initialized.swiper-horizontal .swiper-pagination {
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: var(--dg-spacing-s-3)
}

.swiper-initialized.swiper-horizontal .swiper-pagination-bullet {
    width: 40px;
    height: 4px;
    transition: all .3s ease;
    border-radius: var(--dg-border-radius-full,100000px);
    background: var(--dg-color-field-bg-disabled,#5a5c67)
}

.swiper-initialized.swiper-horizontal .swiper-pagination-bullet-active {
    width: 64px;
    height: 4px;
    background: var(--dg-gradient-bg-copper-default,linear-gradient(47deg,#b77f58 0,#9b613b 62.52%,#804620 96.18%))
}

.swiper-button-prev, .swiper-button-next {
    display: none
}

@media(min-width:1440px) {
    .swiper-initialized.swiper-horizontal .swiper-button-prev, .swiper-initialized.swiper-horizontal .swiper-button-next {
        width: 48px;
        height: 48px;
        padding: var(--dg-spacing-m-1) var(--dg-spacing-m-2)
    }

    .swiper-initialized.swiper-horizontal .swiper-button-prev {
        left: 48px
    }

    .swiper-initialized.swiper-horizontal .swiper-button-next {
        right: 48px
    }
}

.cmp-car-range-hero {
    height: 100vh;
    min-height: 640px;
    position: relative;
    overflow: hidden;
    width: 100%
}

.cmp-car-range-hero__container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0 var(--dg-layout-margin)
}

.cmp-car-range-hero__slider-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0 var(--dg-layout-margin);
    width: 100vw;
    padding: var(--dg-spacing-s-5) var(--dg-layout-margin);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2
}

    .cmp-car-range-hero__slider-wrapper .swiper-button-prev, .cmp-car-range-hero__slider-wrapper .swiper-button-next {
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

@media(hover:hover) and (pointer:fine) {
    .cmp-car-range-hero__slider-wrapper:hover .swiper-button-prev, .cmp-car-range-hero__slider-wrapper:hover .swiper-button-next {
        opacity: 1;
        pointer-events: auto
    }
}

.cmp-car-range-hero__slider-wrapper:not(.swiper-initialized) .cmp-car-range-hero__slider-container {
    gap: var(--dg-spacing-s-5)
}

.cmp-car-range-hero__slider-container {
    display: inline-flex;
    align-items: center;
    min-width: fit-content;
    justify-content: center;
    width: 100%
}

.cmp-car-range-hero__car {
    border-radius: var(--dg-border-radius-m,12px);
    width: 117px;
    height: 94px;
    padding: var(--dg-spacing-s-3) var(--dg-spacing-s-5);
    text-align: center;
    background: var(--dg-color-bg-opacity-specific-default,#fafafa 0 D);
    cursor: pointer;
    backdrop-filter: blur(12px);
    margin: 1px
}

    .cmp-car-range-hero__car:hover:not(.mod__active) {
        background: var(--dg-color-bg-opacity-specific-hover,#fafafa 1)
    }

    .cmp-car-range-hero__car.mod__active {
        outline: 1px solid var(--dg-color-border-strong,#4dfafa FA);
        background: var(--dg-color-bg-opacity-specific-selected,#fafafa 26)
    }

.cmp-car-range-hero__car-img {
    width: 101px;
    height: 57px;
    aspect-ratio: 1.77192982;
    display: flex;
    justify-content: center;
    align-items: center
}

.cmp-car-range-hero__car-text {
    font-size: var(--dg-font-size-body-s);
    line-height: var(--dg-font-height-body-s);
    font-weight: 400;
    letter-spacing: var(--dg-font-letter-spacing-m);
    text-transform: uppercase;
    width: 101px;
    height: 29px;
    display: flex;
    justify-content: center;
    align-items: center
}

@media(min-width:480px) {
    .cmp-car-range-hero {
        min-height: 680px
    }

    .cmp-car-range-hero__slider-wrapper {
        padding: 0 var(--dg-layout-margin);
        margin-bottom: 24px
    }

        .cmp-car-range-hero__slider-wrapper:not(.swiper-initialized) .cmp-car-range-hero__slider-container {
            gap: var(--dg-spacing-m-2)
        }

    .cmp-car-range-hero__car {
        width: 158px;
        height: 112px;
        padding: var(--dg-spacing-s-3) 16px
    }

    .cmp-car-range-hero__car-img {
        width: 126px;
        height: 64px;
        aspect-ratio: 1.96875
    }

    .cmp-car-range-hero__car-text {
        font-size: var(--dg-font-size-body-m);
        line-height: var(--dg-font-height-body-m);
        width: 126px;
        height: 40px
    }
}

@media(min-width:768px) {
    .cmp-car-range-hero {
        min-height: 700px
    }

    .cmp-car-range-hero__slider-wrapper {
        margin-bottom: 45px
    }

    .cmp-car-range-hero__car {
        padding: var(--dg-spacing-s-4) 16px;
        width: 158px;
        height: 116px
    }
}

@media(min-width:1024px) {
    .cmp-car-range-hero {
        min-height: 680px
    }

    .cmp-car-range-hero__slider-wrapper {
        margin-bottom: var(--dg-layout-margin)
    }
}

@media(min-width:1440px) {
    .cmp-car-range-hero {
        min-height: 800px
    }

    .cmp-car-range-hero__car {
        width: 192px;
        height: 134px;
        padding: var(--dg-spacing-s-5) 16px;
        gap: 8px
    }

    .cmp-car-range-hero__car-img {
        width: 160px;
        height: 90px
    }

    .cmp-car-range-hero__car-text {
        font-size: var(--dg-font-size-body-m);
        line-height: var(--dg-font-height-body-m);
        width: 160px;
        height: 20px
    }
}

@media(min-width:1920px) {
    .cmp-car-range-hero {
        min-height: 860px
    }

    .cmp-car-range-hero__car {
        width: 198px;
        height: 129px
    }

    .cmp-car-range-hero__car-img {
        width: 166px;
        height: 85px
    }

    .cmp-car-range-hero__car-text {
        width: 166px
    }
}

.cmp-car-range-hero-item {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    top: -9999px;
    transition: opacity 3s ease
}

    .cmp-car-range-hero-item.mod__active {
        top: 0;
        opacity: 1
    }

    .cmp-car-range-hero-item .cmp-video-spinner {
        display: none
    }

.cmp-car-range-hero-item__background {
    position: absolute;
    top: 0;
    z-index: -2;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%)
}

    .cmp-car-range-hero-item__background::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(200deg,rgba(0,0,0,0) 27.38%,rgba(1,3,7,0.8) 101.14%);
        z-index: 1;
        transform: translateZ(0);
        will-change: opacity
    }

    .cmp-car-range-hero-item__background .cmp-image__image, .cmp-car-range-hero-item__background .cmp-video-v2__video {
        position: relative;
        z-index: 0;
        object-fit: cover;
        width: 100%;
        height: 100vh;
        min-height: 640px
    }

.cmp-car-range-hero-item__container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100vh;
    min-height: 640px;
    padding-bottom: 120px;
    gap: 16px
}

.cmp-car-range-hero-item__info-container {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
    word-break: break-word;
    overflow-wrap: break-word
}

.cmp-car-range-hero-item__small-title {
    font-size: var(--dg-font-size-headline-xs);
    line-height: var(--dg-font-height-headline-xs);
    font-weight: 400;
    letter-spacing: var(--dg-font-letter-spacing-m);
    text-transform: uppercase
}

.cmp-car-range-hero-item__title {
    font-size: var(--dg-font-size-display-l);
    line-height: var(--dg-font-height-display-l);
    font-weight: 300;
    letter-spacing: var(--dg-font-letter-spacing-l);
    text-transform: uppercase
}

.cmp-car-range-hero-item__description {
    letter-spacing: var(--dg-font-letter-spacing-m);
    max-height: 100px;
    overflow: hidden
}

    .cmp-car-range-hero-item__description .cmp-text p {
        color: var(--dg-global-color-neutral-10,#fafafa);
        font-weight: 400;
        font-size: var(--dg-font-size-body-m);
        line-height: var(--dg-font-height-body-m)
    }

        .cmp-car-range-hero-item__description .cmp-text p > a {
            color: var(--dg-global-color-neutral-10,#fafafa);
            text-decoration: underline
        }

.cmp-car-range-hero-item__all-prices-container, .cmp-car-range-hero-item__price-container {
    display: flex;
    align-items: flex-start
}

.cmp-car-range-hero-item__all-prices-container {
    gap: var(--dg-spacing-layout-xxs)
}

.cmp-car-range-hero-item__price-container {
    gap: var(--dg-spacing-layout-xxxs);
    flex-direction: column;
    min-width: 125px;
    max-width: 50%
}

    .cmp-car-range-hero-item__price-container > div {
        display: flex;
        flex-direction: row;
        gap: 5px;
        flex-wrap: wrap
    }

    .cmp-car-range-hero-item__price-container:only-child {
        max-width: 100%
    }

.cmp-car-range-hero-item__price-title {
    font-size: var(--dg-font-size-body-m);
    line-height: var(--dg-font-height-body-m);
    font-weight: 400;
    letter-spacing: var(--dg-font-letter-spacing-m);
    width: 100%
}

.cmp-car-range-hero-item__price-suffix {
    font-size: var(--dg-font-size-body-xs);
    line-height: var(--dg-font-height-body-xs);
    font-weight: 350;
    letter-spacing: var(--dg-font-letter-spacing-m);
    text-align: left;
    max-height: 56px;
    overflow: hidden
}

.cmp-car-range-hero-item__ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--dg-spacing-m-2)
}

.cmp-car-range-hero-item__cta-button {
    width: 100%;
    display: block
}

.cmp-car-range-hero-item-price-box, .cmp-car-range-hero-item-big-price-box {
    display: flex;
    gap: 5px;
    font-size: var(--dg-font-size-body-m);
    line-height: var(--dg-font-height-body-m);
    font-weight: 400;
    letter-spacing: var(--dg-font-letter-spacing-m);
    position: relative;
    flex-wrap: wrap
}

.cmp-car-range-hero-item-price-box__prefix, .cmp-car-range-hero-item-big-price-box__prefix {
    word-break: normal
}

.cmp-car-range-hero-item-price-box__currency_disclaimer_index, .cmp-car-range-hero-item-big-price-box__currency_disclaimer_index {
    font-size: var(--dg-font-size-body-s);
    line-height: var(--dg-font-height-body-s);
    position: relative;
    bottom: 6px
}

.car-range-hero-item {
    position: relative;
    width: 100%;
    height: 100%
}

@media(min-width:480px) {
    .cmp-car-range-hero-item {
        gap: 16px
    }

    .cmp-car-range-hero-item__background .cmp-image__image, .cmp-car-range-hero-item__background .cmp-video-v2__video {
        min-height: 680px
    }

    .cmp-car-range-hero-item__container {
        padding-bottom: 168px;
        gap: 20px;
        min-height: 680px
    }

    .cmp-car-range-hero-item__title {
        font-size: var(--dg-font-size-display-m);
        line-height: var(--dg-font-height-display-m)
    }

    .cmp-car-range-hero-item__description {
        max-height: 50px
    }

        .cmp-car-range-hero-item__description .cmp-text p {
            font-size: var(--dg-font-size-body-l);
            line-height: var(--dg-font-height-body-l)
        }

            .cmp-car-range-hero-item__description .cmp-text p > a {
                text-decoration: underline
            }

    .cmp-car-range-hero-item__price-title {
        font-size: var(--dg-font-size-body-l);
        line-height: var(--dg-font-height-body-l)
    }

    .cmp-car-range-hero-item__price-suffix {
        max-height: 45px
    }

    .cmp-car-range-hero-item-price-box, .cmp-car-range-hero-item-big-price-box {
        font-size: var(--dg-font-size-body-l);
        line-height: var(--dg-font-height-body-l)
    }
}

@media(min-width:768px) {
    .cmp-car-range-hero-item {
        gap: var(--dg-spacing-m-4)
    }

    .cmp-car-range-hero-item__background::after {
        background: linear-gradient(262deg,rgba(0,0,0,0) 36.21%,rgba(0,0,0,0.8) 94.03%)
    }

    .cmp-car-range-hero-item__background .cmp-image__image, .cmp-car-range-hero-item__background .cmp-video-v2__video {
        min-height: 700px
    }

    .cmp-car-range-hero-item__container {
        justify-content: center;
        padding-bottom: 116px;
        gap: var(--dg-spacing-m-4);
        min-height: 700px
    }

    .cmp-car-range-hero-item__info-container {
        text-align: left;
        align-items: flex-start;
        gap: 0;
        width: 573px
    }

    .cmp-car-range-hero-item__small-title, .cmp-car-range-hero-item__title {
        width: 435px
    }

    .cmp-car-range-hero-item__small-title {
        font-weight: 300
    }

    .cmp-car-range-hero-item__description {
        width: 418px;
        max-height: 100px
    }

    .cmp-car-range-hero-item__divider {
        display: none
    }

    .cmp-car-range-hero-item__all-prices-container {
        gap: var(--dg-spacing-layout-xl);
        margin-top: var(--dg-spacing-m-4)
    }

    .cmp-car-range-hero-item__price-container {
        min-width: 140px
    }

        .cmp-car-range-hero-item__price-container > div {
            flex-direction: column
        }

    .cmp-car-range-hero-item__price-title {
        text-transform: uppercase;
        font-size: var(--dg-font-size-body-m);
        line-height: var(--dg-font-height-body-m);
        font-weight: 350
    }

    .cmp-car-range-hero-item__price-suffix {
        font-size: var(--dg-font-size-body-s);
        line-height: var(--dg-font-height-body-s);
        max-height: 50px
    }

    .cmp-car-range-hero-item__ctas {
        flex-direction: row;
        justify-content: flex-start
    }

    .cmp-car-range-hero-item__cta-button {
        min-width: 170px;
        width: auto
    }

    .cmp-car-range-hero-item-price-box {
        font-size: var(--dg-font-size-headline-xs);
        line-height: var(--dg-font-height-headline-xs)
    }

    .cmp-car-range-hero-item-big-price-box {
        font-size: var(--dg-font-size-headline-m);
        line-height: var(--dg-font-height-headline-m)
    }

    .cmp-car-range-hero-item-big-price-box__currency_disclaimer_index {
        bottom: 18px
    }
}

@media(min-width:1024px) {
    .cmp-car-range-hero-item__background::after {
        background: linear-gradient(256deg,rgba(0,0,0,0) 50.7%,rgba(0,0,0,0.8) 87.53%)
    }

    .cmp-car-range-hero-item__background .cmp-image__image, .cmp-car-range-hero-item__background .cmp-video-v2__video {
        min-height: 680px
    }

    .cmp-car-range-hero-item__container {
        min-height: 680px
    }

    .cmp-car-range-hero-item__info-container {
        width: 435px
    }

    .cmp-car-range-hero-item__small-title, .cmp-car-range-hero-item__title {
        width: auto
    }

    .cmp-car-range-hero-item__description {
        width: 381px
    }

    .cmp-car-range-hero-item__price-container {
        flex: 0 0 auto
    }
}

@media(min-width:1440px) {
    .cmp-car-range-hero-item__background .cmp-image__image, .cmp-car-range-hero-item__background .cmp-video-v2__video {
        min-height: 800px
    }

    .cmp-car-range-hero-item__container {
        min-height: 800px;
        padding-bottom: 134px
    }

    .cmp-car-range-hero-item__info-container {
        width: 576px
    }

    .cmp-car-range-hero-item__description {
        width: 418px
    }

    .cmp-car-range-hero-item-price-box__currency_disclaimer_index {
        bottom: 12px
    }

    .cmp-car-range-hero-item-big-price-box__currency_disclaimer_index {
        bottom: 26px
    }
}

@media(min-width:1920px) {
    .cmp-car-range-hero-item__background .cmp-image__image, .cmp-car-range-hero-item__background .cmp-video-v2__video {
        min-height: 860px
    }

    .cmp-car-range-hero-item__container {
        min-height: 860px
    }

    .cmp-car-range-hero-item__info-container {
        width: 900px
    }

    .cmp-car-range-hero-item__title {
        font-size: var(--dg-font-size-display-l);
        line-height: var(--dg-font-height-display-l)
    }
}