.vehicle-detail-root { scroll-snap-type: none; scroll-padding-top: calc(var(--header) + 62px); }
.vehicle-detail { --vehicle-line: #383838; --vehicle-subtle: #b7beb7; background: #0a0a0a; color: #f0f3ef; }
.vehicle-detail main { padding-top: var(--header); }
.vehicle-detail h2, .vehicle-detail legend { font-weight: 500; letter-spacing: -.033em; }
.vehicle-header { gap: 20px; }
.vehicle-header nav { display: flex; gap: clamp(16px, 3vw, 45px); color: var(--vehicle-subtle); font-size: 13px; }
.vehicle-header nav a:hover { color: #fff; }
.vehicle-header .button { min-width: 0; min-height: 42px; padding: 10px 20px; white-space: nowrap; }

.vehicle-cover { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; height: clamp(560px, calc(100svh - var(--header)), 920px); overflow: hidden; text-align: center; background: #232722; padding: 42px var(--gutter) 32px; }
.vehicle-cover-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 61%; }
.vehicle-cover::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, #090b0ae0 0%, #090b0a91 24%, #090b0a00 49%, #090b0a28 73%, #090b0af0 100%); }
.vehicle-cover h1 { font-size: clamp(46px, 6.3vw, 92px); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; }
.vehicle-cover h1 strong { font-weight: 700; }
.vehicle-cover-copy p { margin-top: 13px; font-size: clamp(16px, 2vw, 22px); }
.vehicle-cover-bottom { display: grid; justify-items: center; gap: 17px; }
.vehicle-cover-bottom p { color: #f0f3ef; font-size: 13px; }
.vehicle-cover-bottom p span { margin: 0 5px; }
.vehicle-cover-bottom .button { min-width: 0; gap: 17px; }
.vehicle-section-tabs { position: sticky; z-index: 9; top: var(--header); display: flex; justify-content: center; gap: clamp(16px, 5vw, 52px); min-height: 56px; padding: 0 12px; background: #0a0a0a; border-bottom: 1px solid var(--vehicle-line); }
.vehicle-section-tabs a { display: flex; align-items: center; border-bottom: 1px solid transparent; color: var(--vehicle-subtle); font-size: 16px; font-weight: 600; text-align: center; }
.vehicle-section-tabs a[aria-current], .vehicle-section-tabs a:hover { color: #f0f3ef; border-color: #f0f3ef; }

.vehicle-section, .vehicle-config { max-width: 1520px; margin: auto; padding: clamp(60px, 8vw, 112px) var(--gutter) 0; }
.vehicle-section-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 24px; margin-bottom: 26px; }
.vehicle-section-heading h2 { font-size: clamp(33px, 4.4vw, 66px); line-height: 1.12; }
.vehicle-section-heading p { max-width: 42ch; color: var(--vehicle-subtle); justify-self: end; }
.vehicle-detail figure { margin: 0; }
.vehicle-gallery, .vehicle-cabin-photo { background: #141414; }
.vehicle-cabin-photo img { width: 100%; height: auto; aspect-ratio: 16 / 8.4; object-fit: cover; object-position: center; }
.vehicle-gallery-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #171717; }
.vehicle-gallery-frame img { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none; }
.vehicle-gallery figcaption, .vehicle-cabin-photo figcaption { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 13px 18px; color: var(--vehicle-subtle); font-size: 13px; }
.vehicle-view-buttons, .vehicle-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.vehicle-view-buttons button, .vehicle-swatches button { min-height: 42px; min-width: 64px; padding: 8px 15px; border: 1px solid #4e4e4e; background: #111; color: #edf0eb; }
.vehicle-view-buttons button[aria-pressed=true], .vehicle-swatches button[aria-pressed=true] { border-color: #eee; background: #edf3eb; color: #101610; }
.vehicle-view-buttons button:hover, .vehicle-swatches button:hover { border-color: #edf3eb; }
.vehicle-swatches { margin-bottom: 15px; }
.vehicle-swatches button { display: inline-flex; align-items: center; gap: 9px; }
.vehicle-swatches button span { width: 17px; height: 17px; border: 1px solid #ffffff63; border-radius: 50%; }
.vehicle-swatches button:disabled { opacity: .48; cursor: not-allowed; }
.vehicle-paint-note { margin: 0 0 12px; }
.vehicle-paint-note:empty { display: none; }
.vehicle-exterior-angles { margin-bottom: 12px; }
.paint-grey { background: #4c5562; }
.paint-bamboo { background: #3b575e; }
.paint-black { background: #151719; }
.paint-white { background: #e5e9ec; }
.paint-silver { background: #a5b4c1; }
.paint-olive { background: linear-gradient(145deg, #202424 0 39%, #66786a 40%); }
.swatch-grey { background: #b5b4ac; }
.swatch-red { background: #a7493d; }
.vehicle-gallery figcaption strong, .vehicle-cabin-photo figcaption strong { color: #f1f3ef; }

.vehicle-config { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: clamp(32px, 5vw, 84px); align-items: start; padding-bottom: 100px; }
.vehicle-options { min-width: 0; }
.vehicle-option-section { margin: 0 0 44px; }
.vehicle-option-section:last-child { margin-bottom: 0; }
.vehicle-option-section h2, .vehicle-option-section legend, .vehicle-quote h2 { font-size: clamp(27px, 3vw, 42px); line-height: 1.18; margin-bottom: 14px; }
#version h2, .vehicle-quote h2 { font-size: clamp(29px, 3vw + 2px, 44px); }
.vehicle-option-section > p, .vehicle-note { color: var(--vehicle-subtle); }
.vehicle-note { font-size: 13px; line-height: 1.65; margin-top: 13px; }
#version .vehicle-note, .vehicle-quote .vehicle-note { font-size: 15px; }
.vehicle-config-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.vehicle-config-controls label { min-width: 0; margin: 0; color: var(--vehicle-subtle); font-size: 15px; }
.vehicle-config-controls label:last-child { grid-column: 1 / -1; }
.vehicle-config-controls select { display: block; width: 100%; min-height: 46px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--vehicle-line); border-radius: 0; background: #161616; color: #f0f3ef; color-scheme: dark; font: inherit; font-size: 18px; text-overflow: ellipsis; }
.vehicle-config-controls select:hover { border-color: #8c948b; }
#trim-price { font-weight: 650; font-variant-numeric: tabular-nums; }
.vehicle-reference { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 0; border-block: 1px solid var(--vehicle-line); }
.vehicle-reference h3 { text-align: left; font-size: 19px; font-weight: 600; }
.vehicle-reference p { font-size: 15px; color: var(--vehicle-subtle); }
.vehicle-reference > span { font-size: 14px; padding: 3px 8px; border: 1px solid #626a62; }
.vehicle-detail dl { margin: 0; }
.vehicle-facts { font-size: 17px; }
.vehicle-facts > div, .vehicle-quote-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--vehicle-line); }
.vehicle-quote-lines > div[hidden] { display: none; }
.vehicle-detail dt { color: var(--vehicle-subtle); }
.vehicle-detail dd { margin: 0; text-align: right; }
.vehicle-fieldset { border: 0; padding: 0; min-inline-size: 0; }
.vehicle-fieldset legend { padding: 0; }
.vehicle-detail input[type=radio] { appearance: auto; width: 17px; height: 17px; margin: 2px 0 0; padding: 0; accent-color: #e6f2e7; }
.vehicle-price { display: grid; gap: 3px; }
.vehicle-price strong { font-size: 14px; font-weight: 650; }
.vehicle-price > span { color: var(--vehicle-subtle); font-size: 12px; font-weight: 400; line-height: 1.5; }
.vehicle-price { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vehicle-accessories { display: grid; gap: 18px; margin-top: 20px; }
.vehicle-accessory { overflow: clip; background: #161616; border-radius: 4px; }
.vehicle-accessory > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #232323; }
.vehicle-accessory-body { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 9px 12px; padding: 16px; }
.vehicle-accessory-body h3 { font-size: 17px; text-align: left; font-weight: 650; }
.vehicle-accessory-body .vehicle-price { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; text-align: left; margin-top: 4px; }
.vehicle-accessory-body p { grid-column: 1 / -1; font-size: 13px; color: var(--vehicle-subtle); }
.vehicle-install-location { grid-column: 1 / -1; font-size: 12px; color: #e2e7e0; }
.vehicle-add { min-height: 42px; min-width: 78px; padding: 7px 13px; border: 1px solid #edf3eb; border-radius: 22px; background: #edf3eb; color: #101610; font-size: 13px; font-weight: 650; }
.vehicle-add[aria-pressed=true] { background: #242824; color: #f0f3ef; }
.vehicle-add[aria-pressed=true] > span[aria-hidden=true] { display: none; }
.vehicle-warranty-options, .vehicle-delivery-options { display: grid; gap: 7px; margin-top: 12px; }
.vehicle-warranty-options label, .vehicle-delivery-options label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid var(--vehicle-line); cursor: pointer; }
.vehicle-warranty-options label:has(input:checked), .vehicle-delivery-options label:has(input:checked) { border-color: #d4ded3; background: #242824; }
.vehicle-warranty-options .vehicle-price { margin-left: auto; }
.vehicle-service-photos { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.vehicle-service-photos img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; background: #171717; }
.vehicle-service-photos figcaption { padding-top: 8px; color: #eef2ec; font-size: 13px; }

.vehicle-quote { min-width: 0; padding: clamp(17px, 2.8vw, 34px); background: #141414; border: 1px solid var(--vehicle-line); }
.vehicle-quote-column { min-width: 0; align-self: stretch; container: vehicle-quote / inline-size; }
.vehicle-compact-quote { display: none; }
.vehicle-quote h2 { margin-bottom: 20px; }
.vehicle-delivery { margin: 0; }
.vehicle-delivery legend { font-size: 16px; font-weight: 650; letter-spacing: 0; }
.vehicle-delivery-options { grid-template-columns: 1fr 1fr 1.45fr; }
.vehicle-delivery-options label { justify-content: center; padding-inline: 8px; text-align: center; }
.vehicle-quote label { font-size: 14px; }
.vehicle-quote-lines { padding-top: 7px; font-size: 15px; }
.vehicle-quote-lines dd { font-variant-numeric: tabular-nums; }
.vehicle-estimate { display: grid; gap: 2px; padding-top: 16px; font-variant-numeric: tabular-nums; }
.vehicle-estimate > span { color: var(--vehicle-subtle); font-size: 16px; }
.vehicle-estimate > strong { font-size: clamp(26px, 3.2vw + 2px, 41px); font-weight: 650; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.vehicle-quote form { margin-top: 20px; border-top: 1px solid var(--vehicle-line); }
.vehicle-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.vehicle-contact-fields input { margin-top: 7px; }
.vehicle-quote input:not([type=radio]), .vehicle-quote textarea { font-size: 18px; }
.vehicle-quote textarea::placeholder { font-size: 14px; }
.vehicle-submit { min-width: 0; width: 100%; margin-top: 14px; justify-content: space-between; gap: 8px; font-size: 14px; }
.vehicle-submit:disabled { cursor: not-allowed; }
.vehicle-request-preview { margin-top: 20px; border-top: 1px solid var(--vehicle-line); padding-top: 16px; }
.vehicle-request-preview h3 { font-size: 19px; text-align: left; }
.vehicle-request-preview pre { font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.65; color: var(--vehicle-subtle); }
.vehicle-footer { border-top: 1px solid var(--vehicle-line); background: #070707; }
.vehicle-footer-inner { max-width: 1520px; margin-inline: auto; padding: clamp(28px, 4vw, 56px) var(--gutter) 24px; }
.vehicle-footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 84px); }
.vehicle-footer-nav h2 { margin-bottom: 10px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.vehicle-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 0; padding: 0; list-style: none; }
.vehicle-footer-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 5px; color: var(--vehicle-subtle); font-size: 15px; }
.vehicle-footer-links a:hover, .vehicle-footer-links a:focus-visible { color: #f0f3ef; text-decoration: underline; text-underline-offset: 3px; }
.vehicle-footer-links .vehicle-footer-collection { color: #f0f3ef; font-weight: 650; }
.vehicle-footer-collection svg { width: 14px; height: 14px; }
.vehicle-footer-meta { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--vehicle-line); color: var(--vehicle-subtle); font-size: 13px; }

.vehicle-family .vehicle-cover { max-width: 1860px; margin-inline: auto; }
.vehicle-family .vehicle-cover h1 { font-size: clamp(35px, 5.5vw, 82px); }
.vehicle-cover-picture { position: absolute; z-index: -2; inset: 0; }
.vehicle-family .vehicle-cover-image { object-position: var(--portrait-cover-position, 50% 61%); }
@media (min-width: 821px) {
  .vehicle-family .vehicle-cover-image { object-position: var(--wide-cover-position, var(--portrait-cover-position, 50% 61%)); }
  .vehicle-family[data-family="nio-es9"] .vehicle-cover-image { object-position: 50% 85%; }
}
.vehicle-family .vehicle-gallery-frame { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 56%, #262626, #111 72%); }
.vehicle-family .vehicle-gallery-frame img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.vehicle-reference-page .vehicle-gallery-frame img { height: auto; padding: 0; mask-composite: intersect; }
.vehicle-family[data-family="nio-es9"] .vehicle-gallery-frame img { width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; padding: 0; mask-image: none; }
.vehicle-plate-overlay { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); fill: #747474; stroke: none; pointer-events: none; }
.vehicle-family:is([data-family="xpeng-g7"], [data-family="xpeng-x9"], [data-family="xpeng-p7"]) .vehicle-gallery-frame img { object-fit: cover; padding: 0; }
.vehicle-family[data-family="xpeng-p7"] .vehicle-gallery-frame .vehicle-plate-overlay { inset: 0; width: 100%; height: 100%; }
.vehicle-family[data-family="yuan"] .vehicle-gallery-frame { background: #d1c7b9 url("assets/byd-config/yuan-gallery-pavilion.webp") center / cover no-repeat; }
.vehicle-family[data-family="han"] .vehicle-gallery-frame { background: #c6beb1 url("assets/byd-config/han-gallery-architecture.webp") center / cover no-repeat; }
.vehicle-family:is([data-family="yuan"], [data-family="han"]) .vehicle-gallery-frame img { left: 50%; width: min(100%, 1149px); translate: -50% 0; }
.vehicle-family:is([data-family="yuan"], [data-family="han"]) .vehicle-plate-overlay { left: 50%; right: auto; width: min(calc(100% - 24px), 1125px); translate: -50% 0; }
.vehicle-plate-overlay[hidden] { display: none; }
.vehicle-image-mask { position: absolute; stroke: none; pointer-events: none; }
.vehicle-cover-plate { z-index: -2; fill: #747474; }
.vehicle-family .vehicle-cabin-photo { position: relative; overflow: hidden; }
.cabin-screen-mask { fill: #12171d; }
.vehicle-family:is([data-family="tai7"], [data-family="bao5"]) .vehicle-gallery-frame :is(img, .vehicle-plate-overlay) { transform: scale(1.62); }
.vehicle-family[data-family="d9"] .vehicle-gallery-frame :is(img, .vehicle-plate-overlay) { transform: scale(1.27); }
.vehicle-family[data-family="d9"] .vehicle-gallery-frame img[src*="d9-paint-office-"] { transform: none; }
.vehicle-family:is([data-family="d9"], [data-family="xpeng-gx"], [data-family="seal08"]) :is(#exterior-gallery[aria-busy="true"] #exterior-image, #exterior-image[hidden]) { visibility: hidden; }
.vehicle-family[data-family="seal08"] .vehicle-gallery-frame img { padding: 0; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame :is(img, .vehicle-plate-overlay) {
  inset: auto;
  left: var(--gx-left, 0%);
  top: var(--gx-top, 0%);
  width: var(--gx-width, 100%);
  height: auto;
  aspect-ratio: 2640 / 1280;
  padding: 0;
}
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-0.webp"]) { --gx-width: 132.74%; --gx-left: -17.54%; --gx-top: -7.35%; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-1.webp"]) { --gx-width: 126.13%; --gx-left: -19.04%; --gx-top: -3.60%; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-2.webp"]) { --gx-width: 145.95%; --gx-left: -19.92%; --gx-top: -8.40%; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-3.webp"]) { --gx-width: 137.32%; --gx-left: -18.81%; --gx-top: -5.45%; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-4.webp"]) { --gx-width: 133.38%; --gx-left: -20.36%; --gx-top: -12.98%; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-5.webp"]) { --gx-width: 138%; --gx-left: -15.05%; --gx-top: -13.96%; }
.vehicle-family[data-family="xpeng-gx"] .vehicle-gallery-frame:has(img[src$="/gx-s6-6.webp"]) { --gx-width: 138%; --gx-left: -24.77%; --gx-top: -16.67%; }
.vehicle-family:is([data-family="tai7"], [data-family="bao5"]) .vehicle-cabin-photo img { object-position: center 51%; }
.vehicle-family[data-family="d9"] .vehicle-cabin-photo img { object-position: center 65%; }
.vehicle-family:is([data-family="d9"], [data-family="seal08"]) :is(#cabin-gallery[aria-busy="true"] #cabin-image, #cabin-image[hidden]) { visibility: hidden; }
.vehicle-family:is([data-family="tai7"], [data-family="yuan"]) .vehicle-cabin-photo img[src*="-rear-"] { aspect-ratio: 3 / 2; }
.vehicle-config-link { display: inline-flex; align-items: center; min-height: 44px; margin: -9px 0 10px; font-size: 14px; color: var(--vehicle-subtle); text-decoration: underline; text-underline-offset: 4px; }
.vehicle-section-heading .vehicle-config-link { display: inline; margin: 0; }

@media (min-width: 1010px) and (min-height: 1050px) {
  .vehicle-quote { position: sticky; top: calc(var(--header) + 70px); }
}
@media (min-width: 821px) and (max-height: 1049px), (min-width: 821px) and (max-width: 1009px) {
  .vehicle-compact-quote:not([hidden]) { position: sticky; top: calc(var(--header) + 70px); display: grid; gap: 6px; margin-top: 16px; padding: 18px; border: 1px solid var(--vehicle-line); background: #141414; }
  .vehicle-compact-quote > span { color: var(--vehicle-subtle); font-size: 15px; }
  .vehicle-compact-quote strong { font-variant-numeric: tabular-nums; font-size: 19px; }
  .vehicle-compact-quote a { justify-self: start; padding-block: 7px; text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
}
@media (max-width: 820px) {
  .vehicle-header nav { display: none; }
  .vehicle-config { grid-template-columns: 1fr; }
  .vehicle-section-heading { grid-template-columns: 1fr; gap: 10px; }
  .vehicle-section-heading p { justify-self: start; }
}
@media (max-width: 600px) {
  .vehicle-header .button { padding-inline: 12px; }
  .vehicle-cover { height: clamp(475px, calc(100svh - var(--header)), 660px); padding: 36px var(--gutter) 25px; }
  .vehicle-cover-image { inset: 49% auto auto -15%; width: 130%; max-width: none; height: auto; transform: translateY(-44%); mask-image: linear-gradient(transparent, black 16%, black 83%, transparent); }
  .vehicle-cabin-photo img { aspect-ratio: 4 / 3; }
  .vehicle-family:is([data-family="tai7"], [data-family="bao5"]) .vehicle-cabin-photo img { object-position: center 59%; }
  .vehicle-gallery figcaption, .vehicle-cabin-photo figcaption { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .vehicle-config-controls { grid-template-columns: 1fr; }
  .vehicle-footer-nav { grid-template-columns: 1fr; }
  .vehicle-family .vehicle-cover-image { inset: 0; width: 100%; height: 100%; transform: none; mask-image: none; }
}
@media (max-width: 820px) {
  .vehicle-reference-page .vehicle-cover-image {
    inset: 52% 0 auto;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transform: translateY(-50%);
    mask-image: linear-gradient(transparent, #000 14%, #000 88%, transparent);
  }
}
@container vehicle-quote (max-width: 400px) {
  .vehicle-contact-fields { grid-template-columns: 1fr; gap: 0; }
}
@container vehicle-quote (max-width: 340px) {
  .vehicle-delivery-options { grid-template-columns: 1fr; }
  .vehicle-delivery-options label { justify-content: flex-start; }
}
@media (max-width: 365px) {
  .vehicle-quote-lines > div { flex-wrap: wrap; gap: 2px 16px; }
  .vehicle-quote-lines dd { text-align: left; }
}
.quote-fx-note { color:var(--muted); font-size:12px; line-height:1.7; margin:16px 0; }