/* Featured Section Home Page */
#featuredSection-wrapper {
    background: #000;
    color: #fff;
    padding-left: 40px;
    padding-right: 40px;
}

.featuredSection-heading {
    color: #fff;
    font-size: 22px;
    letter-spacing: 1px;
    font-weight: 600;
}

.featuredSection-imgWrap {
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: #111;
    position: relative;
}

.featuredSection-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featuredSection-textWrap {
    padding-top: 15px;
}

.featuredSection-textWrap h4,
.featuredSection-textWrap h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.featuredSection-textWrap p {
    font-size: 13px;
    opacity: 0.85;
    margin-bottom: 10px;
}

.featuredSection-link {
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #fff;
}

.featuredSection-link:hover {
    color: #ff6a00;
}

.featuredSection-rightImage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        #ff6a00 0%,
        rgba(255, 106, 0, 0.35) 60%,
        transparent 100%
    );
}

.featuredSection-imageText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    z-index: 2;
}

@media (max-width: 768px) {
    .featuredSection-imgWrap {
        height: 240px;
    }
    .featuredSection-imageText {
        font-size: 24px;
    }
}
/* Featured Section Home Page | End */

/* News Room Carausal */
#NewsRoomCarouselUniqueContainer {
    width: 100%;
    background: #f5f5f5;
    padding-top: 20px;
    padding-bottom: 40px;
    box-sizing: border-box;
    font-family:
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
}

.NewsRoomCarouselContainer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    max-width: 1700px;
    margin: 0 auto;
}

.NewsRoomNavBtn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    font-size: 24px;
    line-height: 1;
    color: #333;
    z-index: 2;
}

.NewsRoomNavBtn:hover {
    background: #f0f0f0;
    border-color: #aaa;
}

.NewsRoomNavBtn:active {
    transform: scale(0.96);
}

.NewsRoomTrackWrapper {
    flex: 1;
    overflow: hidden;
    border-radius: 4px;
}

.NewsRoomTrack {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    gap: 30px;
}

.NewsRoomCard {
    flex: 0 0 calc((100% - (2 * 30px)) / 3);
    display: flex;
    flex-direction: column;
    background: transparent;
    box-sizing: border-box;
    height: auto;
}

.NewsRoomImage {
    overflow: hidden;
    background: #eaeaea;
    aspect-ratio: 16/9;
}

.NewsRoomImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.NewsRoomCard:hover .NewsRoomImage img {
    transform: scale(1.05);
}

.NewsRoomContent {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.NewsRoomDate {
    font-size: 13px;
    color: #707070;
    display: block;
    margin-bottom: 15px;
    letter-spacing: 0.3px;
}

.NewsRoomHeading {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 72px;
    max-height: 72px;
}

.NewsRoomExplore {
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
    display: inline-block;
    margin-top: auto;
}

.NewsRoomExplore:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .NewsRoomCard {
        flex: 0 0 calc((100% - 30px) / 2);
    }

    .NewsRoomTrack {
        gap: 30px;
    }

    .NewsRoomHeading {
        min-height: 72px;
        max-height: 72px;
    }
}

@media (max-width: 576px) {
    .NewsRoomCard {
        flex: 0 0 100%;
    }

    .NewsRoomTrack {
        gap: 0;
    }

    .NewsRoomImage img {
        aspect-ratio: 16/9;
    }

    .NewsRoomNavBtn {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .NewsRoomHeading {
        min-height: 72px;
        max-height: 72px;
        -webkit-line-clamp: 3;
    }
}

@media (max-width: 480px) {
    #NewsRoomCarouselUniqueContainer {
        padding: 50px 3%;
    }

    .NewsRoomCarouselContainer {
        gap: 5px;
    }
}

.NewsRoomNavBtn.NewsRoomDisabled {
    opacity: 0.25;
    pointer-events: none;
    border-color: #eee;
}
.NewsRoomHeader {
    max-width: 1700px;
    margin: 0 auto 35px auto;
    padding: 0 5%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.NewsRoomHeaderIcon {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
}

.NewsRoomHeaderIcon span {
    height: 3px;
    width: 100%;
    background: #ff6a00;
    display: block;
    border-radius: 2px;
}

.NewsRoomTitle {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #111;
    margin: 0;
}

/* News Room Carausal | End */

/* Vehicle model pages (S06-S09): on phones and portrait tablets the 60-70 px section paddings left large empty bands between
   sections. They are cut to 32 px (40 px on tablets); the hero/design films and the desktop layout are not affected. `body`
   raises the specificity above the pages' own inline rules. */
@media (max-width: 767px) {
    body #s06ColorSection, body #s07ColorSection, body #s08ColorSection, body #s09ColorSection,
    body #s06CockpitSection, body #s07CockpitSection,
    body #s06AudioSection, body #s07AudioSection,
    body #s06SafetySection, body #s07SafetySection, body #s09SafetySection {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    body #s09QualitySection, body #s09PerformanceSection { padding-top: 32px; }
    body .s09SpecSection { padding-top: 40px; padding-bottom: 40px; }
    body #s06HeroImageWrap + .s06SpecSection, body #s07HeroImageWrap + .s07SpecSection, body #s09HeroImageWrap + .s09SpecSection { padding-top: 24px; padding-bottom: 16px; }
    body .s06SpecSection .s06SpecContainer, body .s07SpecSection .s07SpecContainer, body .s09SpecSection .s09SpecContainer { gap: 20px; }
    body #s06ColorSection, body #s07ColorSection, body #s09ColorSection { padding-top: 16px; }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    body #s06ColorSection, body #s07ColorSection, body #s08ColorSection, body #s09ColorSection,
    body #s06CockpitSection, body #s07CockpitSection,
    body #s06AudioSection, body #s07AudioSection,
    body #s06SafetySection, body #s07SafetySection, body #s09SafetySection {
        padding-top: 44px;
        padding-bottom: 44px;
    }
    body #s09QualitySection, body #s09PerformanceSection { padding-top: 44px; }
    body .s06SpecSection, body .s07SpecSection, body .s09SpecSection { padding-top: 44px; padding-bottom: 48px; }
    body #s06HeroImageWrap + .s06SpecSection, body #s07HeroImageWrap + .s07SpecSection, body #s09HeroImageWrap + .s09SpecSection { padding-top: 40px; }
    body .v360Section { padding-bottom: 44px; }
    body #s08SpecSection, body #s08FeatureSection, body #s08FeatureSection2, body #s08PresetSection, body #s08AdasSection, body #s08GallerySection,
    body .s08DarkTabSection, body .s08LightTabSection { padding-top: 44px; padding-bottom: 44px; }
}

/* Model pages: the spec numbers count up from 0 (script), and every extra digit widened the line and shifted its neighbours
   (0.04-0.08 CLS on S06-S09). An invisible copy of the final value reserves the final width from the start; the finished
   numbers look exactly as before. */
.s06SpecValue .counter, .s07SpecValue .counter, .s08SpecValue .counter, .s09SpecValue .counter {
    display: inline-block;
}
.s06SpecValue .counter::before, .s07SpecValue .counter::before, .s08SpecValue .counter::before, .s09SpecValue .counter::before {
    content: attr(data-target);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}