#vehicles .model-head { margin-bottom:24px; }
#vehicles .model-head h2 { margin-bottom:8px; }
#vehicles .model-head p { font-size:14px; line-height:1.7; }
.model-picker { padding:26px; border:1px solid #e1e7f0; border-radius:18px; background:white; }
.picker-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
.picker-step { display:flex; flex-direction:column; gap:6px; min-width:0; padding:16px 18px; min-height:82px; border:1px solid #e2e8f1; border-radius:10px; background:#f8f9fb; text-align:left; }
.picker-step span { color:#8793a5; font-size:11px; line-height:16px; }
.picker-step strong { font-size:16px; font-weight:700; line-height:23px; color:#263b59; overflow-wrap:anywhere; word-break:keep-all; }
.picker-step[aria-current="step"] { border-color:#255aed; background:#eef4ff; }
.picker-step[aria-current="step"] span,.picker-step[aria-current="step"] strong { color:#255aed; }
.picker-step:disabled { cursor:default; }
.picker-step:disabled strong { color:#98a3b4; }
.picker-title { margin:0 0 16px; font-size:20px; line-height:28px; font-weight:750; outline:none; }
.model-search { display:flex; align-items:center; gap:12px; min-height:54px; border:1px solid #dbe3f0; border-radius:10px; padding:0 16px; background:#f7f9fc; }
.model-search:focus-within { border-color:#255aed; box-shadow:0 0 0 3px #255aed12; }
.model-search svg { flex:0 0 20px; width:20px; height:20px; color:#718096; }
.model-search input { min-width:0; width:100%; min-height:52px; margin:0; padding:12px 0; border:0; outline:0; background:transparent; font-size:14px; }
.model-search input::placeholder { color:#8b96a7; }
.model-toolbar { display:flex; justify-content:flex-end; margin:14px 0 12px; }
.model-toolbar p { font-size:12px; line-height:20px; }
.model-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.model-grid.is-grades { grid-template-columns:repeat(2,minmax(0,1fr)); }
.model-option { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:5px; min-width:0; min-height:64px; padding:16px 36px 16px 16px; border:1px solid #e3e8f0; border-radius:10px; background:white; text-align:left; transition:border-color .15s,background .15s; }
.model-option:hover { border-color:#9cb8ff; background:#f8faff; }
.model-option[aria-pressed="true"] { border-color:#255aed; background:#eff5ff; }
.model-option strong { color:#172944; font-size:15px; font-weight:700; line-height:22px; letter-spacing:-.02em; overflow-wrap:anywhere; word-break:keep-all; }
.model-option small { color:#7a8799; font-size:12px; line-height:18px; word-break:keep-all; overflow-wrap:anywhere; }
.model-option:after { content:'›'; position:absolute; right:16px; top:50%; color:#8593a8; font-size:20px; transform:translateY(-50%); }
.model-option[aria-pressed="true"]:after { content:'✓'; color:#255aed; font-size:15px; }
.model-more { display:block; width:100%; margin-top:16px; min-height:44px; padding:10px; border:0; border-radius:8px; background:#f5f7fa; color:#596981; font-size:13px; font-weight:600; }
.model-more[hidden],.model-empty[hidden] { display:none; }
.model-empty { padding:28px 12px; text-align:center; }
.model-empty p { color:#65748a; font-size:14px; }
.picker-footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #e6ebf3; margin-top:24px; padding-top:22px; }
.picker-summary { display:flex; min-width:0; flex-direction:column; gap:5px; }
.picker-summary small { color:#8793a5; font-size:11px; line-height:17px; }
.picker-summary strong { color:#3f516b; font-size:13px; font-weight:600; line-height:21px; word-break:keep-all; overflow-wrap:anywhere; }
.picker-footer .btn { flex-shrink:0; min-height:48px; }
.picker-footer .btn:disabled { border-color:#e7edf6; background:#eef2f7; color:#99a5b6; cursor:default; }
@media(max-width:900px) { .model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
 .model-picker { padding:16px; border-radius:14px; }
 #vehicles .model-head p { font-size:13px; }
 .picker-steps { gap:6px; margin-bottom:24px; }
 .picker-step { padding:12px 9px; min-height:78px; gap:5px; }
 .picker-step strong { font-size:13px; line-height:19px; }
 .picker-step span { font-size:10px; }
 .picker-title { font-size:18px; line-height:26px; }
 .model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .model-grid.is-grades { grid-template-columns:minmax(0,1fr); }
 .model-search { padding:0 12px; gap:8px; }
 .model-search input { font-size:13px; }
 .model-option { padding:13px 28px 13px 12px; }
 .model-option:after { right:12px; }
 .model-option strong { font-size:14px; line-height:21px; }
 .picker-footer { flex-direction:column; align-items:stretch; gap:16px; }
 .picker-footer .btn { width:100%; }
}
@media(prefers-reduced-motion:reduce) { .model-option { transition:none; } }

/* Compact brand tray: the final cell expands or collapses all brands. */
.model-grid.is-brands { --brand-columns:13; grid-template-columns:repeat(var(--brand-columns),minmax(0,1fr)); gap:4px 2px; padding:10px 6px; border:1px solid #e1e6ed; border-radius:10px; }
.model-grid.is-brands .model-option { align-items:center; justify-content:flex-start; height:66px; min-height:66px; gap:5px; padding:8px 2px 5px; border-color:transparent; border-radius:6px; background:transparent; text-align:center; }
.model-grid.is-brands .model-option:hover { background:#f2f6ff; border-color:#dce7ff; }
.model-grid.is-brands .model-option[aria-pressed="true"] { background:#edf3ff; border-color:#255aed; }
.model-grid.is-brands .brand-mark { display:flex; align-items:center; justify-content:center; width:44px; height:28px; flex:0 0 28px; }
.model-grid.is-brands .brand-mark img { display:block; width:42px; height:28px; max-width:100%; object-fit:contain; }
.model-grid.is-brands .model-option strong { display:block; width:100%; min-height:18px; font-size:11px; font-weight:500; line-height:18px; letter-spacing:-.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.model-grid.is-brands .model-option:after { display:none; }
.model-grid.is-brands .brand-mark.is-unavailable:before { content:'—'; color:#8492a6; font-size:18px; }
.brand-toggle { grid-column:-2 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; height:66px; padding:3px 0; border:0; border-radius:6px; background:transparent; color:#748093; font-size:10px; line-height:16px; }
.brand-toggle-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#f1f3f6; color:#687789; font-size:24px; font-weight:400; line-height:1; }
.brand-toggle:hover .brand-toggle-icon { color:#255aed; background:#eaf1ff; }
.model-grid.is-brands button:focus-visible { outline:2px solid #255aed; outline-offset:1px; }
@media(max-width:1100px) { .model-grid.is-brands { --brand-columns:10; } }
@media(max-width:900px) { .model-grid.is-brands { --brand-columns:8; } }
@media(max-width:600px) { .model-grid.is-brands { --brand-columns:4; gap:5px 2px; padding:8px 4px; } .model-grid.is-brands .model-option,.brand-toggle { height:68px; min-height:68px; } .model-grid.is-brands .model-option strong { font-size:11px; line-height:18px; } }

/* Small representative vehicle images only in the model selection step. */
.model-grid.is-models .model-option { align-items:center; justify-content:flex-start; gap:8px; padding:12px 12px 10px; min-height:120px; text-align:center; }
.model-grid.is-models .model-visual { display:flex; align-items:center; justify-content:center; width:min(100%,140px); height:70px; flex:0 0 70px; }
.model-grid.is-models .model-visual img { display:block; width:100%; height:100%; max-width:100%; object-fit:contain; }
.model-grid.is-models .model-visual.is-unavailable { border-radius:8px; background:#f6f8fb; color:#8a96a6; font-size:11px; line-height:18px; }
.model-grid.is-models .model-option strong { width:100%; line-height:21px; font-size:14px; word-break:keep-all; overflow-wrap:anywhere; }
.model-grid.is-models .model-option:after { display:none; }
.model-grid.is-models .model-option[aria-pressed="true"]:after { display:block; top:10px; right:10px; transform:none; }
@media(max-width:600px) {
 .model-grid.is-models .model-option { padding:10px 8px; min-height:112px; gap:7px; }
 .model-grid.is-models .model-visual { height:62px; flex-basis:62px; width:min(100%,116px); }
 .model-grid.is-models .model-option strong { font-size:13px; line-height:20px; }
}