@charset "utf-8";

/*
Theme Name: Servora - Car Dealership & Marketplace HTML5 Template.
Author: Metropolitanthemes
Version: 2.0.0

%%%%%%% Responsive Breakpoints %%%%%%%

1. Max Width 1399px
2. Max Width 1199px
3. Max Width 991px
4. Max Width 767px
5. Max Width 575px
6. Later Components
7. Phone Width Corrections
8. Servora 2.0 Components
9. Body Rail
10. Showroom Configurator
11. Compare Table
12. Phone Layouts
*/

/*======================
1. Max Width 1399px
========================*/
@media (max-width: 1399px) {
  .sec-pt-130 {
    padding-top: 110px;
  }

  .sec-pb-130 {
    padding-bottom: 110px;
  }

  .mv-body-grid {
    gap: 18px;
  }

  .mv-spotlight-body {
    padding: 46px 40px;
  }

}

/*======================
2. Max Width 1199px
========================*/
@media (max-width: 1199px) {
  :root {
    --mv-fs-lead: 17px;
  }

  .sec-pt-130 {
    padding-top: 90px;
  }

  .sec-pb-130 {
    padding-bottom: 90px;
  }

  .sec-pt-90 {
    padding-top: 70px;
  }

  .sec-pb-90 {
    padding-bottom: 70px;
  }

  .mv-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-trust-item:nth-child(odd) {
    border-left: none;
  }

  .mv-trust-item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--mv-color-line);
  }

  .mv-body-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-sec-head {
    margin-bottom: 44px;
  }

  .mv-sec-bar {
    margin-bottom: 44px;
  }

  .mv-why-media {
    margin-bottom: 40px;
  }

  .mv-spotlight-grid {
    grid-template-columns: 1fr;
  }

  .mv-spotlight-media {
    min-height: 380px;
  }

  .mv-counter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-counter-cell {
    padding: 48px 16px;
  }

  .mv-counter-cell:nth-child(3n) {
    border-right: none;
  }

  .mv-counter-shot {
    min-height: 190px;
  }

  .mv-sell-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .mv-sell p {
    max-width: none;
  }

}

/*======================
3. Max Width 991px
========================*/
@media (max-width: 991px) {
  :root {
    --mv-fs-h3: 21px;
    --mv-fs-lead: 16.5px;
  }

  .sec-pt-130 {
    padding-top: 80px;
  }

  .sec-pb-130 {
    padding-bottom: 80px;
  }

  .mv-body-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .mv-filter-nav {
    flex-wrap: wrap;
    border-radius: var(--mv-radius-lg);
  }

  .mv-spotlight-body {
    padding: 38px 30px;
  }

  .mv-spotlight-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .mv-post-lead {
    min-height: 400px;
    margin-bottom: 40px;
  }

  .mv-post-lead-inner {
    padding: 30px 30px 28px;
  }

  .mv-counter-shot {
    display: none;
  }

  .mv-counter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-counter-cell:nth-child(3n) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mv-counter-cell:nth-child(even) {
    border-right: none;
  }

  .mv-sell {
    padding: 70px 0;
  }

  .mv-compare-inner {
    flex-wrap: wrap;
  }

  .mv-compare-slots {
    order: 3;
    width: 100%;
  }
}

/*======================
4. Max Width 767px
========================*/
@media (max-width: 767px) {
  .sec-pt-130 {
    padding-top: 70px;
  }

  .sec-pb-130 {
    padding-bottom: 70px;
  }

  .sec-pt-90 {
    padding-top: 60px;
  }

  .sec-pb-90 {
    padding-bottom: 60px;
  }

  .mv-trust-grid {
    grid-template-columns: 1fr;
  }

  .mv-trust-item {
    padding: 22px 24px;
    border-left: none !important;
    border-bottom: 1px solid var(--mv-color-line);
  }

  .mv-trust-item:last-child {
    border-bottom: none;
  }

  .mv-sec-head p {
    margin-top: 14px;
  }

  .mv-sec-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .mv-body-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-why-media {
    padding-right: 40px;
    padding-bottom: 46px;
  }

  .mv-gauge {
    width: 120px;
    height: 120px;
  }

  .mv-gauge-core b {
    font-size: 27px;
  }

  .mv-spotlight-thumbs {
    left: 20px;
    bottom: 20px;
  }

  .mv-spotlight-thumbs button {
    width: 68px;
    height: 50px;
  }

  .mv-spotlight-specs {
    grid-template-columns: 1fr;
  }

  .mv-spotlight-specs li:nth-child(odd) {
    padding-right: 4px;
    border-right: none;
  }

  .mv-spotlight-specs li:nth-child(even) {
    padding-left: 4px;
  }

  .mv-post-row {
    gap: 16px;
  }

  .mv-post-row-media {
    width: 110px;
  }

  .mv-post-row-body p {
    display: none;
  }

  .mv-counter-cell {
    padding: 38px 14px;
  }

  .mv-sell-row {
    grid-template-columns: 1fr;
  }

  .mv-top {
    right: 18px;
    bottom: 18px;
  }
}

/*======================
5. Max Width 575px
========================*/
@media (max-width: 575px) {
  :root {
    --mv-fs-h1: 38px;
    --mv-fs-h2: 28px;
  }

  .mv-btn {
    padding: 14px 24px;
    font-size: 14px;
  }

  .mv-body-grid {
    grid-template-columns: 1fr;
  }

  .mv-why-media {
    padding-right: 0;
    padding-bottom: 0;
  }

  .mv-why-media .mv-why-inset {
    display: none;
  }

  .mv-gauge {
    left: auto;
    right: 14px;
    bottom: 14px;
    width: 104px;
    height: 104px;
  }

  .mv-gauge-core b {
    font-size: 23px;
  }

  .mv-gauge-core span {
    font-size: 9px;
  }

  .mv-step {
    padding: 32px 24px 30px;
  }

  .mv-spotlight-body {
    padding: 30px 22px;
  }

  .mv-countdown {
    flex-wrap: wrap;
  }

  .mv-countdown li {
    flex: 1 1 calc(50% - 5px);
  }

  .mv-post-row {
    flex-direction: column;
  }

  .mv-post-row-media {
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .mv-counter-grid {
    grid-template-columns: 1fr;
  }

  .mv-counter-cell {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mv-quote {
    padding: 30px 24px 28px;
  }

  .mv-compare-actions {
    width: 100%;
  }

  .mv-compare-actions .mv-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/*======================
6. Later Components
========================*/
/* Everything added after the original ladder: the homepage variants, the
   listings family, the account pages and the content pages. */

@media (max-width: 1399px) {
  .mv-edit-nav {
    right: 30px;
  }

  .mv-auth-form {
    padding: 46px 42px;
  }

  .mv-listrow-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
  }
}

@media (max-width: 1199px) {
  /* The search masthead runs out of room before the nav folds away */
  .mv-header-search {
    display: none;
  }

  .mv-search-form.is-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-search-form.is-advanced .mv-field-range {
    grid-column: span 2;
  }

  .mv-gallery-grid,
  .mv-maplayout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mv-gallery-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .mv-gallery-nav button {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .mv-maplayout-list {
    padding-right: 0;
    max-height: none;
    overflow: visible;
    margin-bottom: 34px;
  }

  .mv-mapframe {
    position: relative;
    top: auto;
    height: 480px;
  }

  .mv-auth-media {
    min-height: 380px;
  }

  .mv-tabs {
    grid-template-columns: 220px 1fr;
    gap: 30px;
  }

  .mv-model-grid,
  .mv-social-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-rail-card {
    grid-template-columns: 180px 1fr;
  }

  /* beside the filter sidebar the body is too narrow for three columns: the price rail drops under it */
  .mv-listrow {
    grid-template-columns: 220px 1fr;
  }

  .mv-listrow-side {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-left: none;
    border-top: 1px solid var(--mv-color-line);
  }

  .mv-dash {
    grid-template-columns: 240px 1fr;
    gap: 28px;
  }

  .mv-detail-keys {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-detail-keys li:nth-child(4) {
    border-left: none;
  }

  .mv-detail-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-edit-slide {
    height: 700px;
  }

  .mv-edit-foot {
    gap: 26px;
  }

  .mv-info-grid,
  .mv-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-info-item:nth-child(even) {
    border-right: none;
  }

  .mv-info-item:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 991px) {

  .mv-inline-hero-inner {
    padding: 150px 0 88px;
  }

  /* The dashboard sheds its rail and the table sheds its softer columns */
  .mv-dash {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .mv-dash-table th:nth-child(4),
  .mv-dash-table td:nth-child(4),
  .mv-dash-table th:nth-child(5),
  .mv-dash-table td:nth-child(5) {
    display: none;
  }

  .mv-tabs {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mv-model-grid,
  .mv-social-wall,
  .mv-detail-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-social-tile.is-tall {
    grid-row: span 1;
  }

  .mv-social-wall {
    grid-auto-rows: 250px;
  }

  .mv-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-media-item:nth-child(3n + 1) {
    border-left: none;
  }

  .mv-media-item:nth-child(-n + 3) {
    border-bottom: 1px solid var(--mv-color-line);
  }

  .mv-cat-grid {
    grid-template-columns: 1fr;
  }

  .mv-cat.is-tall {
    min-height: 420px;
  }

  .mv-listrow {
    grid-template-columns: 200px 1fr;
  }

  .mv-rank a {
    grid-template-columns: 44px 44px 1fr 80px;
    gap: 14px;
    padding: 16px 20px;
  }

  .mv-rank .bar {
    display: none;
  }

  .mv-steps-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-steps-nav li:nth-child(even) {
    border-right: none;
  }

  .mv-steps-nav li:nth-child(-n + 2) {
    border-bottom: 1px solid var(--mv-color-line);
  }

  .mv-detail-specs,
  .mv-form-row,
  .mv-postnav,
  .mv-auth-social {
    grid-template-columns: 1fr;
  }

  .mv-detail-specs li:nth-child(odd) {
    padding-right: 4px;
    border-right: none;
  }

  .mv-detail-specs li:nth-child(even) {
    padding-left: 4px;
  }

  .mv-postnav .is-next {
    text-align: left;
  }

  .mv-subheader-inner {
    padding: 72px 0 70px;
  }

  .mv-edit-slide {
    height: 620px;
  }

  .mv-edit-nav {
    top: auto;
    bottom: 34px;
    transform: none;
    flex-direction: row;
  }

  .mv-comment.is-reply {
    margin-left: 40px;
  }

  .mv-author {
    flex-direction: column;
    gap: 18px;
  }

  .mv-plan {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  /* Sideways reveals nudge content past the viewport edge on a phone, so the
     horizontal variants fall back to the vertical one below this width. */
  .js .fade-left,
  .js .fade-right {
    transform: translateY(32px);
  }

  .mv-subheader-inner {
    padding: 58px 0 56px;
  }

  .mv-model-grid,
  .mv-detail-features,
  .mv-stat-grid,
  .mv-info-grid,
  .mv-auth-social {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-info-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mv-social-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-social-tile.is-wide {
    grid-column: span 2;
  }

  .mv-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-media-item:nth-child(odd) {
    border-left: none;
  }

  .mv-media-item:nth-child(even) {
    border-left: 1px solid var(--mv-color-line);
  }

  .mv-gallery-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-detail-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-detail-keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-detail-keys li:nth-child(odd) {
    border-left: none;
  }

  .mv-detail-keys li {
    border-bottom: 1px solid var(--mv-color-line);
  }

  /* Tables shed columns rather than scrolling sideways */
  .mv-spec-table th:nth-child(4),
  .mv-spec-table td:nth-child(4),
  .mv-compare-table thead td:nth-child(4),
  .mv-compare-table tbody td:nth-child(4),
  .mv-dash-table th:nth-child(3),
  .mv-dash-table td:nth-child(3) {
    display: none;
  }

  .mv-spec-table th,
  .mv-spec-table td,
  .mv-compare-table th,
  .mv-compare-table td {
    padding: 14px 16px;
  }

  .mv-spec-table tbody th,
  .mv-compare-table tbody th {
    width: 130px;
  }

  .mv-listrow {
    grid-template-columns: 1fr;
  }

  .mv-listrow-media {
    min-height: 220px;
  }

  .mv-listrow-side {
    grid-column: span 1;
  }

  .mv-listrow-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 0;
  }

  .mv-rank a {
    grid-template-columns: 38px 40px 1fr;
  }

  .mv-rank .count {
    display: none;
  }

  .mv-finder {
    padding: 32px 26px;
  }

  .mv-dealer-hero {
    padding: 26px 24px;
  }

  .mv-inline-hero-inner {
    padding: 128px 0 72px;
  }

  .mv-edit-slide {
    height: 560px;
  }

  .mv-edit-rail {
    flex-wrap: wrap;
    gap: 14px 0;
  }

  .mv-edit-rail li {
    padding-right: 20px;
  }

  .mv-edit-rail li + li {
    padding-left: 20px;
  }

  .mv-trim-nav button,
  .mv-design-nav button {
    padding: 10px 18px;
    font-size: 13px;
  }

  .mv-soon-clock {
    flex-wrap: wrap;
    gap: 12px;
  }

  .mv-soon-clock li {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .mv-footer-cta,
  .mv-footer-appband {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mv-footer-cta {
    padding: 32px 26px;
  }

  .mv-article-foot {
    gap: 20px;
  }

  .mv-comment {
    gap: 16px;
  }

  .mv-comment img {
    width: 52px;
    height: 52px;
  }

  .mv-comment.is-reply {
    margin-left: 22px;
  }
}

@media (max-width: 575px) {
  .mv-crumb {
    gap: 9px;
    letter-spacing: 1.2px;
  }

  .mv-crumb li + li::before {
    width: 16px;
    margin-right: 9px;
  }

  .mv-model-grid,
  .mv-detail-features,
  .mv-stat-grid,
  .mv-info-grid,
  .mv-auth-social,
  .mv-social-wall,
  .mv-media-grid,
  .mv-gallery-nav,
  .mv-listrow-specs,
  .mv-maplayout .mv-listrow-specs {
    grid-template-columns: 1fr;
  }

  .mv-social-tile.is-wide {
    grid-column: span 1;
  }

  .mv-social-wall {
    grid-auto-rows: 300px;
  }

  .mv-media-item:nth-child(even) {
    border-left: none;
  }

  .mv-media-item {
    border-bottom: 1px solid var(--mv-color-line);
  }

  .mv-detail-thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-detail-keys {
    grid-template-columns: 1fr;
  }

  .mv-detail-keys li {
    border-left: none !important;
  }

  /* One car per screen on the compare table, and the softer rows go */
  .mv-compare-table thead td:nth-child(3),
  .mv-compare-table tbody td:nth-child(3),
  .mv-spec-table th:nth-child(3),
  .mv-spec-table td:nth-child(3),
  .mv-dash-table th:nth-child(2),
  .mv-dash-table td:nth-child(2) {
    display: none;
  }

  .mv-compare-table th,
  .mv-compare-table td,
  .mv-spec-table th,
  .mv-spec-table td,
  .mv-dash-table th,
  .mv-dash-table td {
    padding: 12px 12px;
    font-size: 13.5px;
  }

  .mv-compare-table tbody th,
  .mv-spec-table tbody th {
    width: 110px;
    font-size: 10.5px;
    letter-spacing: 1px;
  }

  .mv-steps-nav {
    grid-template-columns: 1fr;
  }

  .mv-steps-nav li {
    border-right: none;
    border-bottom: 1px solid var(--mv-color-line);
  }

  .mv-steps-nav li:last-child {
    border-bottom: none;
  }

  .mv-rank a {
    grid-template-columns: 34px 1fr;
    gap: 12px;
  }

  .mv-rank img {
    display: none;
  }

  .mv-pager a,
  .mv-pager span {
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
  }

  .mv-widget,
  .mv-filters .mv-widget {
    padding: 24px 22px 26px;
  }

  .mv-edit-slide {
    height: 520px;
  }

  .mv-edit-rail li:last-child {
    display: none;
  }

  .mv-bare-logo {
    width: 168px;
    margin-bottom: 30px;
  }

  .mv-recent-post-media {
    width: 68px;
  }

  .mv-author img {
    width: 84px;
    height: 84px;
  }

  .mv-post-body,
  .mv-post-quote {
    padding: 24px 22px 26px;
  }

  .mv-article-quote {
    padding: 26px 24px;
  }
}

@media (max-width: 767px) {

  .mv-header-right {
    gap: 6px;
  }

  .mv-icon-btn {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 991px) {
  /* These rows carry a 70px gutter so two half-width columns do not read as one
     block. The columns stack here, so the gutter only buys a -35px margin that
     hangs off both sides of the container. */
  .mv-why .row,
  .mv-journal .row,
  .mv-story .row,
  .mv-history .row,
  .mv-contactinfo .row,
  .mv-contactform .row,
  .mv-faq .row {
    --bs-gutter-x: 30px;
  }
}

@media (max-width: 767px) {
  /* the boxed variant pads its own panel, which leaves too little for the logo
     and the control group once the container padding is counted too */
  .mv-header.is-boxed .mv-header-main {
    padding: 0 16px;
  }
}

@media (max-width: 575px) {
  /* Bootstrap gives .container a 24px gutter, so 12px of padding, while .row
     here runs a 30px gutter, so -15px margins. The container is full width at
     this step, so the 3px difference reaches the screen edge. */
  .container {
    --bs-gutter-x: 30px;
  }

  /* the logo and the control group need the last 8px of the boxed panel */
  .mv-header.is-boxed .mv-header-main {
    padding: 0 12px;
  }
}

/*======================
8. Servora 2.0 Components
========================*/
/* selectors kept from v1 rules whose other members were replaced */
@media (max-width: 1199px) {
  .mv-fav-grid,
  .mv-design-grid,
  .mv-newsband-inner,
  .mv-finder,
  .mv-dealer-hero,
  .mv-auth {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 767px) {
  .mv-auth-form,
  .mv-contact-form,
  .mv-panel {
    padding: 30px 24px;
  }

  .mv-header.is-minimal .mv-nav-toggler > i {
    font-size: 18px;
  }
}

@media (max-width: 1399px) {
  .mv-nav > ul > li > a {
    padding-left: 11px;
    padding-right: 11px;
    font-size: 14.5px;
  }

  .mv-search-form {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 170px;
  }

  .mv-footer-grid {
    grid-template-columns: 1.3fr 0.8fr 0.95fr 1fr 1.3fr;
    gap: 36px;
  }

  .mv-brand-grid {
    gap: 12px;
  }

  .mv-brand img {
    width: 64px;
    height: 64px;
  }

  .mv-header.is-search .mv-header-search {
    flex-basis: 190px;
  }

  .mv-header.is-search .mv-icon-btn[href="user-dashboard.html"],
  .mv-header.is-search .mv-header-cta {
    display: none;
  }

  .mv-offer {
    right: 36px;
    width: 410px;
  }
}

@media (max-width: 1199px) {
  .mv-header-main {
    height: 80px;
  }

  .mv-logo img {
    width: 180px;
  }

  /* the desktop nav folds into the offcanvas */
  .mv-nav {
    display: none;
  }

  .mv-nav-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mv-topbar-notice {
    display: none;
  }

  .mv-topbar-inner {
    gap: 20px;
  }

  .mv-hero-inner {
    padding: 110px 0 230px;
  }

  .mv-hero-slide h1,
  .mv-hero-slide h2 {
    font-size: clamp(40px, 6vw, 64px);
  }

  .mv-search-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-search-form .mv-field-search {
    grid-column: 1 / -1;
  }

  .mv-brand-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mv-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-footer-about {
    grid-column: 1 / -1;
    max-width: 640px;
  }

  .mv-split-hero-media {
    width: 46%;
  }

  .mv-split-hero-card {
    display: none;
  }

  .mv-leasecalc {
    grid-template-columns: 1fr;
  }

  /* the planner leaves the hero and sits under it */
  .mv-hero.is-used .mv-hero-slide {
    height: auto;
    min-height: 680px;
  }

  .mv-hero-aside {
    position: relative;
    top: auto;
    transform: none;
    padding: 0 0 70px;
    background-color: #07090C;
  }

  .mv-hero-aside .container {
    justify-content: center;
  }

  .mv-budget {
    width: 100%;
    max-width: 640px;
  }

  .mv-hero.is-used .mv-hero-chrome {
    bottom: 60px;
  }

  .mv-boxed-hero-inner {
    min-height: 0;
  }

  .mv-boxed-slider {
    position: relative;
    inset: auto;
  }

  .mv-boxed-copy {
    padding: 80px 48px 140px;
  }

  .mv-boxed-chrome {
    left: 48px;
    bottom: 50px;
  }

  .mv-offer {
    position: relative;
    top: auto;
    right: auto;
    width: auto;
    margin: 0 24px 24px;
    transform: none;
  }

  .mv-tradecalc {
    grid-template-columns: 1fr;
  }

  .mv-inline-chrome {
    top: auto;
    bottom: 40px;
    flex-direction: row;
    align-items: center;
  }
}

@media (max-width: 991px) {
  .mv-header-cta {
    display: none;
  }

  .mv-hero-chrome {
    bottom: 170px;
  }

  .mv-hero-chrome-inner {
    justify-content: flex-start;
  }

  .mv-search {
    margin-top: -90px;
  }

  .mv-search::before {
    top: 90px;
  }

  .mv-search-tabs-note {
    display: none;
  }

  .mv-service {
    aspect-ratio: 4 / 5;
  }

  .mv-financeband .mv-fincalc,
  .mv-drive,
  .mv-viewing .mv-drive {
    margin-top: 40px;
  }

  .mv-footer-actions {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 56px 0 46px;
  }

  .mv-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-footer-cta {
    grid-template-columns: 1fr;
    padding: 40px;
  }

  .mv-split-hero-media {
    width: 100%;
    clip-path: none;
    opacity: 0.35;
  }

  .mv-split-hero > .mv-gl {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mv-split-nav {
    right: auto;
    left: 24px;
    bottom: 140px;
  }

  .mv-svc-card,
  .mv-stages-head {
    position: static;
  }

  .mv-stages-head {
    margin-bottom: 40px;
  }

  .mv-stage:not(:last-child) {
    margin-bottom: 22vh;
  }

  .mv-lease-out {
    grid-template-columns: 1fr;
  }

  .mv-charge-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .mv-trade-out {
    grid-template-columns: 1fr;
  }

  .mv-evresult {
    margin-top: 0;
  }

  .mv-plancard.is-featured {
    transform: none;
  }
}

@media (max-width: 767px) {
  .mv-topbar-links > a {
    display: none;
  }

  .mv-topbar-status {
    font-size: 12.5px;
  }

  .mv-header-right {
    gap: 6px;
  }

  .mv-header-right .mv-icon-btn:not(.mv-theme-btn) {
    display: none;
  }

  .mv-hero-inner {
    padding: 100px 0 240px;
  }

  .mv-hero-slide .ln,
  .mv-split-hero-body .ln,
  .mv-boxed-copy .ln,
  .mv-inline-hero .ln {
    white-space: normal;
  }

  .mv-faces {
    margin: 6px 0 0;
  }

  .mv-hero-rail li {
    padding-right: 18px;
  }

  .mv-hero-rail li + li {
    padding-left: 18px;
  }

  .mv-hero-rail b {
    font-size: 26px;
  }

  .mv-search-card {
    padding: 22px 20px;
  }

  .mv-search-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .mv-search-form {
    grid-template-columns: 1fr;
  }

  .mv-search-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mv-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-facts {
    grid-template-columns: 1fr;
  }

  .mv-fincalc,
  .mv-evcalc,
  .mv-evresult,
  .mv-charge,
  .mv-lease-inputs,
  .mv-lease-card,
  .mv-drive,
  .mv-trade-inputs,
  .mv-trade-out,
  .mv-svc-card,
  .mv-budget,
  .mv-offer {
    padding: 24px;
  }

  .mv-charge-pick .mv-seg-field {
    min-width: 0;
    width: 100%;
  }

  .mv-jobs label {
    grid-template-columns: 44px 1fr;
  }

  .mv-jobs .ico {
    width: 44px;
    height: 44px;
  }

  .mv-jobs .cost {
    grid-column: 2;
    display: flex;
    gap: 10px;
    align-items: baseline;
    text-align: left;
  }

  .mv-footer-grid {
    grid-template-columns: 1fr;
  }

  .mv-footer-bottom-inner {
    flex-wrap: wrap;
    gap: 14px 24px;
  }

  .mv-footer-minimal {
    flex-direction: column;
  }

  .mv-boxed-hero {
    padding-top: 108px;
  }

  .mv-boxed-copy {
    padding: 56px 24px 130px;
  }

  .mv-boxed-chrome {
    left: 24px;
  }

  .mv-offer {
    margin: 0 12px 12px;
  }

  .mv-inline-chrome {
    display: none;
  }

  .mv-specialist {
    width: 100%;
  }
}

@media (max-width: 575px) {
  .mv-topbar-links {
    gap: 12px;
  }

  .mv-logo img {
    width: 160px;
  }

  .mv-hero-slide h1,
  .mv-hero-slide h2,
  .mv-split-hero-body h1,
  .mv-split-hero-body h2,
  .mv-boxed-copy h1,
  .mv-boxed-copy h2 {
    font-size: 36px;
  }

  .mv-hero-actions .mv-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .mv-hero-rail li:last-child {
    display: none;
  }

  .mv-hero-bar {
    width: 70px;
  }

  .mv-seg label {
    padding: 9px 4px;
    font-size: 13px;
  }

  .mv-fincalc-head b,
  .mv-evresult > b {
    font-size: 44px;
  }

  .mv-steplist li {
    grid-template-columns: 46px 1fr;
  }

  .mv-stage {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .mv-stage .ico {
    grid-row: auto;
    margin-bottom: 10px;
  }

  .mv-battery {
    height: 64px;
  }

  .mv-search-form.is-advanced {
    grid-template-columns: 1fr;
  }
}

/*======================
9. Body Rail
========================*/
/* the docked rail clears the next section's own top padding at each step */
@media (max-width: 1399px) {
  .mv-bodyrail,
  .mv-bodyrail + * {
    --mv-rail-pad: 110px;
  }
}

@media (max-width: 1199px) {
  .mv-bodyrail,
  .mv-bodyrail + * {
    --mv-rail-pad: 90px;
  }

  .mv-bodyrail-card {
    grid-template-columns: 228px minmax(0, 1fr);
  }

  .mv-bodyrail-head {
    padding: 0 24px;
  }

  .mv-bodyrail-title {
    font-size: 21px;
  }
}

@media (max-width: 991px) {
  .mv-bodyrail,
  .mv-bodyrail + * {
    --mv-rail-pad: 80px;
  }
}

/* phones: the label panel becomes a row above the shapes */
@media (max-width: 767px) {
  .mv-bodyrail,
  .mv-bodyrail + * {
    --mv-rail-h: 222px;
    --mv-rail-pad: 70px;
    --mv-rail-lift: 24px;
  }

  .mv-bodyrail-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 78px minmax(0, 1fr);
  }

  .mv-bodyrail-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }

  .mv-bodyrail-title {
    margin-top: 2px;
    font-size: 19px;
  }

  .mv-bodyrail-nav button {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .mv-bodytype > i {
    height: 40px;
    font-size: 80px;
  }

  .mv-bodytype-name {
    margin-top: 8px;
    font-size: 15px;
  }

  /* the boxed hero's offer card ends on the edge: the rail lands below it */
  .mv-boxed-hero.has-rail {
    padding-bottom: 28px;
  }
}

/*======================
10. Showroom Configurator
========================*/
@media (max-width: 1399px) {
  .mv-showroom {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .mv-showroom-stage {
    padding: 38px 36px 0;
  }

  .mv-showroom-specs {
    margin: 16px -36px 0;
  }

  .mv-showroom-side {
    padding: 34px 28px 30px;
  }
}

/* the panel moves under the stage */
@media (max-width: 1199px) {
  .mv-showroom {
    grid-template-columns: minmax(0, 1fr);
  }

  .mv-showroom-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    align-items: start;
  }

  .mv-showroom-label,
  .mv-showroom-versions {
    grid-column: 1;
  }

  .mv-showroom-label {
    grid-row: 1;
  }

  .mv-showroom-versions {
    grid-row: 2 / span 4;
  }

  .mv-showroom-price,
  .mv-showroom-side .mv-field,
  .mv-showroom-pay,
  .mv-showroom-actions {
    grid-column: 2;
  }

  .mv-showroom-price {
    grid-row: 1 / span 2;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 991px) {
  .mv-showroom-specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-showroom-specs li:nth-child(4) {
    border-left: 0;
  }

  .mv-showroom-specs li:nth-child(n + 4) {
    border-top: 1px solid rgba(16, 20, 24, 0.08);
  }
}

@media (max-width: 767px) {
  .mv-showroom-stage {
    padding: 30px 22px 0;
  }

  .mv-showroom-car {
    min-height: 200px;
  }

  .mv-showroom-specs {
    margin: 12px -22px 0;
  }

  .mv-showroom-side {
    display: flex;
    align-items: stretch;
    padding: 28px 22px 26px;
  }

  .mv-showroom-price {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 575px) {
  .mv-showroom-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-showroom-specs li:nth-child(4) {
    border-left: 1px solid rgba(16, 20, 24, 0.08);
  }

  .mv-showroom-specs li:nth-child(odd) {
    border-left: 0;
  }

  .mv-showroom-specs li:nth-child(n + 3) {
    border-top: 1px solid rgba(16, 20, 24, 0.08);
  }

  .mv-showroom-actions,
  .mv-showroom-pay {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*======================
11. Compare Table
========================*/
/* the table lays its columns out from the head row: the label column and the
   last slot narrow down the ladder so the cars keep their share */
@media (max-width: 991px) {
  .mv-compare-head:last-child {
    width: 160px;
  }
}

@media (max-width: 767px) {
  .mv-compare-head:first-child {
    width: 130px;
  }
}

@media (max-width: 575px) {
  .mv-compare-head:first-child {
    width: 110px;
  }

  .mv-compare-table thead td:last-child,
  .mv-compare-table tbody td:last-child {
    display: none;
  }
}

/*======================
12. Phone Layouts
========================*/
/* Phones keep two or three across where the content is short, instead of a
   single column of tall boxes; nothing is cut at a card's edge. */
@media (max-width: 575px) {
  /* the condition tabs sit in a two-by-two grid instead of a strip cut at the card edge */
  .mv-search-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .mv-search-tabs button {
    width: 100%;
    justify-content: center;
    padding: 0 12px;
  }

  .mv-filter-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-filter-nav button {
    width: 100%;
    padding: 10px 6px;
    text-align: center;
  }

  .mv-service {
    aspect-ratio: 4 / 3;
  }

  /* sponsored rail: the photograph goes on top, the copy gets the full width */
  .mv-rail-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .mv-rail-media {
    aspect-ratio: 16 / 10;
  }

  .mv-spec-figs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }

  .mv-gallery-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-detail-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mv-detail-keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-detail-keys li:nth-child(even) {
    border-left: 1px solid var(--mv-color-line) !important;
  }

  .mv-detail-keys li:nth-child(n + 3) {
    border-top: 1px solid var(--mv-color-line);
  }

  .mv-detail-keys li:last-child:nth-child(odd) {
    grid-column: span 2;
    border-left: none !important;
  }

  .mv-detail-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mv-detail-price {
    text-align: left;
  }

  .mv-contact-map {
    min-height: 340px;
  }
}