/*
 * Car-selection wizard.
 * Swiss grid: white surface, hairline rules, one red accent, numerals as markers.
 */
.nvc-wizard-main {
    --nvc-ink: #111214;
    --nvc-muted: #62656b;
    --nvc-line: #d9dadd;
    --nvc-soft: #f3f3f4;
    --nvc-accent: #e03e43;
    background: #fff;
    color: var(--nvc-ink);
    font-family: inherit;
}

.nvc-wizard-main,
.nvc-wizard-main *,
.nvc-wizard-main *::before,
.nvc-wizard-main *::after {
    box-sizing: border-box;
}

.nvc-wizard-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(24px, 3vw, 40px) 20px 64px;
}

/*
 * The theme reserves a large top margin on .site-content for regular pages.
 * The wizard runs its own rhythm, so the gap under the site header is set
 * here instead of being inherited twice.
 */
body.nvc-wizard-page #page .site-content {
    margin-top: 0;
    margin-bottom: 0;
}

.nvc-wizard-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(16px, 2vw, 24px);
    color: var(--nvc-muted);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nvc-wizard-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.nvc-wizard-breadcrumb a:hover {
    color: var(--nvc-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nvc-wizard-hero {
    display: block;
    padding: clamp(12px, 1.6vw, 20px) 0 clamp(20px, 2.4vw, 28px);
    border-bottom: 1px solid var(--nvc-line);
    text-align: center;
}

.nvc-wizard-hero-copy {
    max-width: 760px;
    margin: 0 auto;
}

/*
 * The page title is no longer displayed: the breadcrumb already labels the
 * page. It stays in the markup for screen readers only.
 */
.nvc-wizard-hero h1 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

.nvc-wizard-lede {
    max-width: 620px;
    margin: 10px auto 0;
    color: #45474c;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
}

.nvc-wizard-picker {
    padding: clamp(18px, 2.2vw, 24px) 0 0;
}

.nvc-wizard-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 0;
}

.nvc-wizard-field {
    min-width: 0;
}

.nvc-wizard-field label {
    display: block;
    margin-bottom: 8px;
    color: var(--nvc-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nvc-wizard-field select {
    width: 100%;
    height: 58px;
    padding: 0 44px 0 16px;
    border: 1px solid #bfc1c5;
    border-radius: 0;
    background-color: #fff;
    color: var(--nvc-ink);
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--nvc-ink) 50%), linear-gradient(135deg, var(--nvc-ink) 50%, transparent 50%);
    background-position: calc(100% - 21px) 26px, calc(100% - 15px) 26px;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
}

.nvc-wizard-field select:focus {
    border-color: var(--nvc-ink);
    outline: 2px solid var(--nvc-ink);
    outline-offset: 1px;
}

.nvc-wizard-field select:disabled {
    cursor: not-allowed;
    color: #898b90;
    background-color: var(--nvc-soft);
}

.nvc-wizard-submit {
    min-height: 58px;
    padding: 0 26px;
    border: 1px solid var(--nvc-ink);
    border-radius: 0;
    background: var(--nvc-ink);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}

.nvc-wizard-submit:hover,
.nvc-wizard-submit:focus-visible {
    background: var(--nvc-accent);
    border-color: var(--nvc-accent);
    color: #fff;
}

.nvc-wizard-preview-note {
    margin: 12px 0 0;
    color: var(--nvc-muted);
    font-size: 12px;
    line-height: 1.5;
}

.nvc-wizard-results {
    min-height: 150px;
    padding-top: clamp(18px, 2.2vw, 24px);
}

.nvc-wizard-results[aria-busy="true"] {
    cursor: progress;
    opacity: .55;
}

.nvc-wizard-prompt {
    max-width: 620px;
    padding: 28px 0;
    border-top: 1px solid var(--nvc-line);
}

.nvc-wizard-prompt p {
    margin: 0;
    color: var(--nvc-muted);
    font-size: 16px;
    line-height: 1.55;
}

.nvc-wizard-prompt .nvc-wizard-prompt-title {
    margin-bottom: 6px;
    color: var(--nvc-ink);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.nvc-wizard-results-head {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 40px;
    align-items: end;
    justify-content: space-between;
    padding: 0 0 18px;
    border-bottom: 1px solid var(--nvc-ink);
}

.nvc-wizard-result-count {
    margin: 0 0 5px;
    color: var(--nvc-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nvc-wizard-results-head h2 {
    margin: 0;
    color: var(--nvc-ink);
    font-size: clamp(25px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.nvc-wizard-result-note {
    max-width: 390px;
    margin: 0;
    color: var(--nvc-muted);
    font-size: 13px;
    line-height: 1.5;
}

.nvc-generation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid var(--nvc-line);
    border-left: 1px solid var(--nvc-line);
    background: #fff;
    list-style: none;
}

.nvc-generation-grid > li {
    min-width: 0;
}

.nvc-generation-grid:has(> li:only-child),
.nvc-generation-grid:has(> li:nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 700px;
    margin-right: auto;
    margin-left: auto;
}

.nvc-generation-grid:has(> li:only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 350px;
}

.nvc-generation-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-right: 1px solid var(--nvc-line);
    border-bottom: 1px solid var(--nvc-line);
    background: #fff;
    color: var(--nvc-ink);
    text-decoration: none;
}

.nvc-generation-card.is-available:hover {
    background: #fafafa;
}

.nvc-generation-card.is-selected {
    outline: 2px solid var(--nvc-accent);
    outline-offset: -2px;
    background: #fffafa;
}

.nvc-generation-media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: 16px;
    background: var(--nvc-soft);
    overflow: hidden;
}

.nvc-generation-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .22s ease;
}

.nvc-generation-card.is-available:hover .nvc-generation-media img,
.nvc-generation-card.is-available:focus-visible .nvc-generation-media img {
    transform: scale(1.025);
}

.nvc-generation-card:focus-visible {
    outline: 2px solid var(--nvc-accent);
    outline-offset: -2px;
}

.nvc-generation-placeholder {
    max-width: 180px;
    color: #8a8c91;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.nvc-generation-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 16px 18px;
    border-top: 1px solid var(--nvc-line);
}

.nvc-generation-copy h3 {
    margin: 0;
    color: var(--nvc-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.nvc-generation-years {
    margin: 6px 0 18px;
    color: var(--nvc-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.nvc-generation-status {
    display: inline-block;
    margin-top: auto;
    color: var(--nvc-ink);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nvc-generation-card.is-available .nvc-generation-status::after {
    content: " →";
    color: var(--nvc-accent);
}

.nvc-generation-card.is-preparing {
    opacity: .68;
}

.nvc-generation-card.is-preparing .nvc-generation-status {
    color: var(--nvc-muted);
}

@media (max-width: 860px) {
    .nvc-wizard-form {
        grid-template-columns: 1fr 1fr;
    }

    .nvc-wizard-submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .nvc-wizard-inner {
        padding: 20px 16px 48px;
    }

    .nvc-wizard-form {
        grid-template-columns: 1fr;
    }

    .nvc-wizard-submit {
        grid-column: auto;
    }

    .nvc-wizard-results-head {
        align-items: start;
    }

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

    .nvc-generation-media {
        padding: 10px;
    }

    .nvc-generation-copy {
        padding: 12px;
    }

    .nvc-generation-copy h3 {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nvc-wizard-submit,
    .nvc-generation-media img {
        transition: none;
    }
}