/* Black, Dongfeng red and white. All appearance-specific surfaces live here. */
:root { color-scheme:dark; --ink:#f5f5f6; --paper:#101113; --muted:#b1b2b8; --line:#35363c; --red:#d92332; --surface:#1b1c20; --surface-alt:#232429; --soft:#d0d1d5; }
:root[data-theme=light] { color-scheme:light; --ink:#18191d; --paper:#eeeef0; --muted:#5f6069; --line:#d0d1d6; --surface:#fff; --surface-alt:#e5e5e9; --soft:#50515a; }
body { background:var(--paper); color:var(--ink); }
.header,.advice,.footer-logos,.btn-dark,.quick-contact>button { background:#111215; color:#fff; }
.header { border-bottom:1px solid #ffffff24; gap:20px; }
.header-identity { flex-shrink:1; }
.header nav { gap:20px; }
.header-contact { min-width:auto; white-space:nowrap; }
.theme-toggle { order:2; flex-shrink:0; border:1px solid #ffffff50; border-radius:30px; padding:10px 14px; min-height:44px; color:#fff; font-size:11px; white-space:nowrap; }
.theme-toggle::before { content:''; display:inline-block; width:12px; height:12px; margin-right:7px; border:1px solid currentColor; border-radius:50%; background:linear-gradient(90deg,white 50%,transparent 50%); vertical-align:-1px; }
.theme-toggle:hover { background:#ffffff15; }
.header-contact { order:3; }
.showcase { background:#121316; border-bottom:3px solid var(--red); }
.showcase .hero-heading em { color:#ff4050; }
.showcase .is-banner { background:#121316; color:#fff; }
.showcase .is-banner .eyebrow { visibility:visible; color:#c9c9cf; }
.showcase .is-banner .showcase-description { color:#d1d1d7; }
.showcase .is-banner .showcase-link { color:#fff; border-color:#ffffff50; }
.showcase .is-banner .showcase-terms { color:#bdbdc5; }
.showcase .is-banner .showcase-copy { padding-top:0; }
.showcase .is-banner .showcase-photo { width:52%; right:3%; background:transparent; display:flex; align-items:center; }
.showcase .is-banner .campaign-image-button { height:auto; padding:0; border:1px solid #ffffff20; }
.showcase .is-banner .showcase-photo img { height:auto; width:100%; }
.showcase .is-banner .hero-heading { max-width:42%; font-size:clamp(52px,5.1vw,76px); }
.showcase .showcase-bottom { border-color:#ffffff26; }
.showcase .showcase-signature,.showcase .showcase-pause,.showcase .showcase-arrow { color:#dddde2; }
.showcase .showcase-signature span { color:#a9a9b2; }
.showcase .showcase-arrow { width:auto; padding:8px; font-size:10px; border:0; }
.showcase .showcase-dot::after { border-color:#d1d1d7; }
.showcase .showcase-dot[aria-current=true]::after { border-color:var(--red); }
.showcase .showcase-pause { font-size:10px; min-width:65px; }
.benefit-strip { color:var(--soft); padding-block:25px; }
.benefit-strip .mini-icon { display:none; }
.benefit-strip p::before { content:''; width:5px; height:5px; background:var(--red); flex-shrink:0; }
.catalog { padding-top:65px; }
.section-heading h2 span { color:var(--muted); }
.section-heading .eyebrow { color:var(--red); }
.search-field,.extra-filters { background:var(--surface-alt); border-color:var(--line); }
.search-field input { color:var(--ink); }
.search-field input::placeholder { color:var(--muted); opacity:1; }
.search-field svg { color:var(--muted); }
select,.sort-label select,.extra-filters select,.version-picker select { background:var(--surface); color:var(--ink); border-color:var(--line); }
.category-tab { color:var(--muted); }
.category-tab[aria-pressed=true] { color:var(--ink); }
.category-tab[aria-pressed=true] span { color:var(--muted); }
.vehicle-card { background:var(--surface); border:1px solid var(--line); overflow:hidden; border-radius:8px; box-shadow:0 8px 22px #0000000a; }
.vehicle-card:hover { border-color:#74757e; box-shadow:0 12px 30px #0002; }
.card-image { aspect-ratio:1.6; background:#ececef; }
.card-image img,.card-image.is-photo img { object-fit:contain; padding:20px 10px 10px; }
.card-image.is-studio img { padding:28px 20px 12px; }
.card-image:has(img[src*="sx6-pro-sheet"]) { background:#f8f8f8; }
.card-image:has(img[src*="sx6-pro-sheet"]) img { padding:28px 10px 8px; }
.card-category { top:10px; left:12px; background:#151619; color:#fff; border:0; font-size:8px; }
.card-body { padding-top:22px; }
.card-brand,.card-year,.card-tagline,.card-version { color:var(--muted); }
.spec-pills span { color:var(--soft); border-color:var(--line); }
.card-detail { border-color:var(--line); }
.card-actions { background:var(--surface); border-top:1px solid var(--line); padding-block:14px; }
.card-cta { display:inline-flex; justify-content:center; align-items:center; background:var(--red); color:#fff; padding:10px 25px; min-height:44px; font-size:13px; border-radius:3px; }
.card-cta:hover { background:#b81b29; }
.no-image { background:#232429; color:#dedee3; }
.collection-video .video-entry,.video-entry { background:var(--surface); border-color:var(--line); }
.detail-media { background:var(--surface-alt); }
.detail-main-image,.compare-photo { background:#eeeef0; object-fit:contain; }
.source-pdf { background:var(--surface); }
.feature-groups ul,.historical-price,.historical-price strong { color:var(--muted); }
.version-list span { background:var(--surface-alt); }
.color-list>span,.model-videos,.video-entry[open] summary { border-color:var(--line); }
.campaign-dialog,.campaign-dialog-heading { background:var(--surface); }
.close-dialog { color:var(--ink); background:var(--surface); border-color:var(--line); }
.comparison-table thead td { background:var(--surface-alt); }
.contact-dialog textarea { background:var(--surface); border-color:var(--line); color:var(--ink); }
.quick-contact { background:var(--surface); border-color:var(--line); }
.compare-tray { background:var(--surface); color:var(--ink); border:1px solid var(--line); }
.tray-chip { background:var(--surface-alt); color:var(--ink); }
.advice { border-top:1px solid #ffffff12; border-bottom:1px solid #ffffff12; }
.advice-title h2 em { color:#ff4050; }
@media(min-width:901px) { .showcase .is-banner .showcase-description { max-width:38%; } .showcase .is-banner .showcase-terms { max-width:38%; } }
@media(max-width:1150px) { .header-contact { display:none; } .header nav>a:last-child { display:none; } }
@media(min-width:651px) and (max-width:900px) {
 .showcase .is-banner { padding:34px 0 100px; flex-direction:column; }
 .showcase .is-banner .showcase-copy { order:0; }
 .showcase .is-banner .eyebrow { display:flex; margin-bottom:18px; }
 .showcase .is-banner .hero-heading { max-width:100%; font-size:54px; }
 .showcase .is-banner .showcase-photo { position:relative; width:calc(100% - 64px); right:auto; order:1; height:auto; margin:24px auto 0; }
 .showcase .is-banner .showcase-terms { display:none; }
}
@media(max-width:650px) {
 .header { height:82px; padding-inline:16px; gap:12px; flex-wrap:wrap; }
 .header-identity { flex:1; gap:12px; }
 .header .brand-copy { display:none; }
 .header .brand-mark { width:53px; height:53px; }
 .header .partner-logo { width:42px; height:42px; }
 .header nav { margin-left:auto; }
 .theme-toggle { font-size:10px; padding:9px 10px; }
 .theme-toggle::before { width:10px; height:10px; margin-right:5px; }
 .showcase.has-campaign .showcase-slides,.showcase.has-campaign .showcase-slide { height:660px; min-height:660px; }
 .showcase .is-banner .hero-heading { max-width:100%; font-size:clamp(46px,12.8vw,64px); }
 .showcase .is-banner .showcase-photo { width:calc(100% - 40px); right:20px; height:190px; bottom:96px; }
 .showcase .is-banner .showcase-description { max-width:100%; font-size:12px; }
 .showcase .is-banner .eyebrow { font-size:8px; margin-bottom:20px; }
 .showcase .showcase-actions { gap:10px 20px; }
 .showcase .showcase-actions .btn { padding:15px 18px; }
 .showcase .showcase-arrow { font-size:9px; padding:4px; }
 .showcase .showcase-controls { gap:1px; }
 .showcase .showcase-dot { width:20px; }
 .showcase .showcase-pause { min-width:48px; font-size:0; }
 .benefit-strip { gap:15px; }
 .catalog { padding-top:44px; }
 .card-image { aspect-ratio:1.55; }
 .card-actions { padding-block:14px; }
 input,select,textarea,.search-field input,.version-picker select,.extra-filters select { font-size:16px; }
 .search-field input { width:100%; }
 .quick-contact>button { background:var(--red); }
}
@media(max-width:360px) {
 .header { padding-inline:12px; gap:7px; }
 .header .brand-mark { width:43px; height:43px; }
 .header .partner-logo { width:32px; height:32px; }
 .header-identity { gap:8px; }
 .header .partner-mark { padding-left:8px; }
 .theme-toggle { padding:8px; font-size:9px; }
 .showcase .showcase-dot { width:17px; }
 .showcase .is-banner .showcase-photo { bottom:85px; }
}
@media(max-width:650px) {
 .showcase.has-campaign.showing-banner .showcase-slides,.showcase.has-campaign.showing-banner .showcase-slide { height:570px; min-height:570px; }
}