.sol-model-years {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin: 8px 0 8px;
}

.sol-model-years .model-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #444;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid #d9d9d9;
    transition: all .2s ease;
}

.sol-model-years .model-year.active {
    color: #000;
    border-bottom-color: #da5e27;
}

.sol-model-years .model-year:hover {
    color: #da5e27;
}

.model-year-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #b45309;
    background: #fff3d6;
    border: 1px solid #f2c879;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Shared max-width for RV series landing pages.
   Hero/header can stay full-width; everything below uses this content shell. */
:root {
    --rv-series-content-max: 1500px;
    --rv-series-content-width: min(92vw, var(--rv-series-content-max));
    --rv-series-model-card-max: 1750px;
    --rv-series-model-card-width: min(96vw, var(--rv-series-model-card-max));
}

.rv-series-content-shell {
    width: var(--rv-series-content-width);
    margin-left: auto;
    margin-right: auto;
}

.rv-series-model-card-shell {
    width: var(--rv-series-model-card-width);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    :root {
        --rv-series-content-width: min(94vw, 720px);
        --rv-series-model-card-width: min(94vw, 720px);
    }
}

/* Series landing page feature rows
   Keeps lower series-page image/text rows constrained like model-page content. */
.rv-series-feature-rows {
    padding: 4rem 0 !important;
    background-color: #fff;
}

.rv-series-feature-row {
    width: var(--rv-series-content-width);
    max-width: var(--rv-series-content-max);
    margin: 0 auto 4rem auto;
    padding: 0 1.5rem;
}

.rv-series-feature-row:last-child {
    margin-bottom: 0;
}

.rv-series-feature-image img {
    display: block;
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.18);
}

.rv-series-feature-text {
    padding: 1.5rem 2.5rem;
}

@media (max-width: 991px) {
    .rv-series-feature-row {
        margin-bottom: 2.5rem;
        padding: 0 1rem;
    }

    .rv-series-feature-text {
        padding: 1.5rem 0;
    }

    .rv-series-feature-image img {
        max-height: none;
    }
}


/* Series landing page feature-card grid
   Slightly narrows the 3-column card section without making it as tight as model-page content.
*/
.rv-series-card-section {
    background-color: #f5f6f7;
}

.rv-series-card-wrap {
    width: var(--rv-series-content-width);
    margin: 0 auto;
}

.rv-series-card-grid {
    margin-left: -12px;
    margin-right: -12px;
}

.rv-series-card-grid > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}

.rv-series-card-grid img.feature-image {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    aspect-ratio: 3 / 2;
    object-fit: cover !important;
}

@media (max-width: 991px) {
    .rv-series-card-wrap {
        width: min(94vw, 720px);
    }

    .rv-series-card-grid img.feature-image {
        max-height: none;
    }
}

/* Keep RV option cards and thumbnails the same size regardless of option count. */
#options-section .tabs {
    justify-content: center;
    gap: 16px;
}

#options-section .tabs-title {
    flex: 0 0 220px !important;
    max-width: 220px !important;
}

#options-section .tabs-title > a {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#options-section .tabs-title img.cms-option-thumb {
    display: block !important;
    width: 100% !important;
    height: 120px !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    object-position: center !important;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    #options-section .tabs-title {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}

@media (max-width: 480px) {
    #options-section .tabs-title {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Let the complete Options UI inherit the selected section background.
   This prevents transparent thumbnails and the larger option detail panel from
   showing a mismatched white or gray rectangular canvas. */
body.model main [data-cms-section="options"] > .grid-container,
body.model main [data-cms-section="options"] > .grid-container > .grid-x,
body.model main [data-cms-section="options"] .large-12.cell,
body.model main [data-cms-section="options"] .tabs,
body.model main [data-cms-section="options"] .tabs-content,
body.model main [data-cms-section="options"] .tabs-panel,
body.model main [data-cms-section="options"] .tabs-panel.is-active,
body.model main [data-cms-section="options"] .tabs-panel > .grid-x,
body.model main [data-cms-section="options"] .tabs-panel > .grid-x > .cell {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.model main [data-cms-section="options"] .tabs-title,
body.model main [data-cms-section="options"] .tabs-title > a,
body.model main [data-cms-section="options"] .tabs-title > a:hover,
body.model main [data-cms-section="options"] .tabs-title > a:focus,
body.model main [data-cms-section="options"] .tabs-title.is-active > a,
body.model main [data-cms-section="options"] .tabs-title .title {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* CMS model-page section themes.
   These use !important so a saved section choice can override older model-specific
   inline background and text rules without changing fixed-light sections. */
body.model main .rv-theme-light {
    background-color: #fff !important;
    color: #222 !important;
}

body.model main .rv-theme-gray {
    background-color: #f4f4f4 !important;
    color: #222 !important;
}

body.model main .rv-theme-dark {
    background-color: #151515 !important;
    color: #fff !important;
}

body.model main .rv-theme-light .section-header,
body.model main .rv-theme-light .point-header,
body.model main .rv-theme-light .rv-p,
body.model main .rv-theme-light p,
body.model main .rv-theme-light li,
body.model main .rv-theme-gray .section-header,
body.model main .rv-theme-gray .point-header,
body.model main .rv-theme-gray .rv-p,
body.model main .rv-theme-gray p,
body.model main .rv-theme-gray li {
    color: #222 !important;
}

body.model main .rv-theme-dark .section-header,
body.model main .rv-theme-dark .point-header,
body.model main .rv-theme-dark .rv-p,
body.model main .rv-theme-dark p,
body.model main .rv-theme-dark li {
    color: #fff !important;
}

/* Dimensions and Specifications intentionally remain fixed light.
   Options now follows its saved section theme so all transparent content blends
   into the same background. */
body.model main [data-cms-section="dimensions"],
body.model main [data-cms-section="specifications"] {
    background-color: #fff !important;
    color: #222 !important;
}

/* Editable model hero theme.
   The hero photo remains unchanged; the theme controls the information bar/overlay
   so Marketing can choose light, light gray, or dark without replacing the image. */
body.model main [data-cms-section="hero"].rv-theme-light .title-bar {
    background: rgba(255, 255, 255, 0.90) !important;
    color: #222 !important;
}

body.model main [data-cms-section="hero"].rv-theme-gray .title-bar {
    background: rgba(244, 244, 244, 0.92) !important;
    color: #222 !important;
}

body.model main [data-cms-section="hero"].rv-theme-dark .title-bar {
    background: rgba(21, 21, 21, 0.88) !important;
    color: #fff !important;
}

body.model main [data-cms-section="hero"].rv-theme-light .title-bar h1,
body.model main [data-cms-section="hero"].rv-theme-light .title-bar .weight,
body.model main [data-cms-section="hero"].rv-theme-gray .title-bar h1,
body.model main [data-cms-section="hero"].rv-theme-gray .title-bar .weight {
    color: #222 !important;
}

body.model main [data-cms-section="hero"].rv-theme-dark .title-bar h1,
body.model main [data-cms-section="hero"].rv-theme-dark .title-bar .weight {
    color: #fff !important;
}