/* =====================================================================
   VEHICLE CATALOG — automotive section, model-list layout.
   Structure follows the reference product listing skeleton:
   dark intro -> trade note -> filter panel (brand tiles + selects)
   -> results count -> model card grid -> export price index.
   Scoped with the v- prefix so the global NORTHSTAR styles stay intact.
   ===================================================================== */
:root {
  --v-ink: #0a0e14;
  --v-ink-soft: #14202c;
  --v-blue: #4684e5;
  --v-blue-light: #a8cbff;
  --v-paper: #f2f5f6;
  --v-line: #dce2e7;
  --v-text: #1b2631;
  --v-muted: #687783;
}

.v-wrap { width: min(100% - 40px, 1440px); margin-inline: auto; }

/* ---------- dark intro ---------- */
.v-intro {
  background: radial-gradient(circle at 82% 24%, rgba(58, 113, 181, .26), transparent 34%),
              linear-gradient(125deg, #080c12, #172332 58%, #0a121c);
  color: #fff; padding: 78px 0 84px; overflow: hidden;
}
.v-intro-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(28px, 5vw, 76px); align-items: center;
}
.v-intro-copy, .v-intro-visual { min-width: 0; }
.v-intro .eyebrow { color: var(--v-blue-light); }
.v-intro h1 {
  font-size: clamp(38px, 5.2vw, 76px); letter-spacing: -.06em;
  line-height: 1.06; margin: 20px 0 24px; font-weight: 600; color: #fff;
}
.v-intro h1 em { font-style: normal; color: var(--v-blue-light); }
.v-intro p { max-width: 680px; color: #c5d2db; line-height: 1.85; font-size: 15px; margin: 0 0 12px; }
.v-intro .v-intro-lead { color: #fff; font-size: 17px; font-weight: 600; line-height: 1.6; }
.v-intro .v-intro-media { margin: 0; border: 1px solid rgba(168, 203, 255, .28); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: 0 22px 48px rgba(0, 0, 0, .28); }
.v-intro-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; }
.v-intro-aside { display: flex; align-items: baseline; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .25); color: #d2dce3; font-size: 12px; line-height: 1.7; }
.v-intro-aside strong { flex: none; color: #fff; font-size: 34px; letter-spacing: -.06em; line-height: 1; margin: 0; }
.v-intro .btn-row { margin-top: 26px; }

/* ---------- trade note ---------- */
.v-trade-note { padding: 22px 0; background: #dfeaf5; color: #1a2e43; }
.v-trade-note .v-wrap { display: flex; gap: 24px; align-items: center; }
.v-trade-note strong { flex: none; font-size: 16px; }
.v-trade-note p { margin: 0; font-size: 12px; line-height: 1.65; }

/* ---------- dark catalog main ---------- */
.v-main { background: var(--v-ink); padding: 0 0 100px; color: #f5f8fb; }
.v-filter {
  padding: 22px; background: #111a24;
  border: 1px solid rgba(174, 204, 236, .22); margin-top: -1px;
}
.v-filter-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 15px; }
.v-filter-head h2 { color: #fff; font-size: 24px; letter-spacing: -.045em; margin: 7px 0 0; }
.v-filter-head .eyebrow { color: var(--v-blue-light); }
.v-filter-note { margin: 0; color: #9aaab9; font-size: 12px; max-width: 340px; line-height: 1.7; }

/* ---------- brand tiles ---------- */
.v-brand-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 7px; }
.v-brand-tile {
  min-width: 0; min-height: 68px; gap: 3px; padding: 6px 4px;
  background: #eaf0f6; border: 1px solid #c9d6e2; color: #1b2b3d;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: inherit; cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.v-brand-tile:hover { background: #fff; border-color: #6d9bdb; transform: translateY(-2px); }
.v-brand-tile.is-active { background: #d6e8ff; border-color: #4383d4; box-shadow: inset 0 0 0 1px #4383d4; }
.v-brand-logo { height: 35px; width: 100%; display: flex; align-items: center; justify-content: center; }
.v-brand-logo img { width: auto; height: auto; max-width: 72px; max-height: 34px; object-fit: contain; }
.v-brand-tile[data-brand-select="zongheng"] .v-brand-logo img,
.v-brand-tile[data-brand-select="lixiang"] .v-brand-logo img { filter: brightness(0); }
/* A few reference logos ship in very light tints; darken them for the light tiles. */
.v-brand-tile[data-brand-select="aion"] .v-brand-logo img,
.v-brand-tile[data-brand-select="galaxy"] .v-brand-logo img,
.v-brand-tile[data-brand-select="icar"] .v-brand-logo img { filter: brightness(0) opacity(.82); }
.v-brand-name { color: #31475e; font-size: 10px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.v-brand-tile.is-active .v-brand-name { color: #123f78; }
.v-brand-glyph { font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 15px; font-weight: 900; letter-spacing: -.045em; line-height: 1.1; white-space: nowrap; color: #1b2b3d; }
.v-brand-glyph.v-brand-all { color: #245ba5; font-size: 13px; letter-spacing: .04em; }

/* ---------- filter selects ---------- */
.v-filter-row { display: flex; align-items: end; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.v-field { width: min(240px, 35%); }
.v-field-label { display: block; margin: 0 0 8px; color: #a5b6c8; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.v-select { width: 100%; height: 45px; padding: 0 14px; border: 1px solid #44576a; border-radius: 0; background: #172431; color: #fff; font: inherit; font-size: 13px; outline: none; }
.v-select:focus { border-color: var(--v-blue); box-shadow: 0 0 0 2px rgba(70, 132, 229, .14); }
.v-reset { margin: 0 0 8px; border: 0; border-bottom: 1px solid currentColor; background: none; padding: 4px 0; color: #acd0ff; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }

/* ---------- results ---------- */
.v-results { padding-top: 47px; }
.v-results-title { display: flex; justify-content: space-between; align-items: end; gap: 14px; border-bottom: 1px solid rgba(197, 219, 240, .28); padding-bottom: 16px; margin-bottom: 21px; }
.v-results-title h2 { color: #fff; font-size: clamp(25px, 2.3vw, 34px); letter-spacing: -.045em; margin: 7px 0 0; }
.v-results-title .eyebrow { color: var(--v-blue-light); }
.v-results-count { color: #b0c1d1; font-size: 12px; }
.v-results-count b { color: #fff; font-size: 18px; }
.v-source { color: #8fa4b8; font-size: 11px; line-height: 1.7; margin: 0 0 20px; max-width: 980px; }
.v-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v-empty { display: none; padding: 50px 20px; text-align: center; color: #b0c1d1; border: 1px dashed rgba(197, 219, 240, .28); font-size: 14px; }
.v-empty.is-visible { display: block; }
.v-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.v-pager[hidden] { display: none; }
.v-pager-btn { background: #172431; border: 1px solid #44576a; color: #dbe9ff; padding: 10px 20px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.v-pager-btn:hover:not(:disabled) { border-color: #8dbaff; background: #20364f; }
.v-pager-btn:disabled { opacity: .35; cursor: default; }
.v-pager-middle { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #d6e4f2; font-size: 12px; white-space: nowrap; }
.v-pager-of { color: #8fa4b8; font-size: 11px; }

/* ---------- model card ---------- */
.v-card { min-width: 0; background: #121d28; border: 1px solid #2a3b4d; color: #fff; display: flex; flex-direction: column; transition: transform .2s, border-color .2s, box-shadow .2s; }
.v-card:hover { transform: translateY(-4px); border-color: #749cd1; box-shadow: 0 18px 36px rgba(0, 0, 0, .22); }
.v-card[hidden] { display: none; }
.v-card-image { height: 180px; position: relative; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #e1e8ed, #f2f5f7); overflow: hidden; }
.v-card-image img { width: 94%; height: 94%; object-fit: contain; }
.v-card-image::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(0deg, rgba(10, 16, 24, .24), transparent); pointer-events: none; }
/* HD cutout art fills the frame; scene photos are cropped like the reference. */
.v-card-image--hd img { width: 96%; height: 96%; object-fit: contain; }
.v-card-image--photo img { width: 100%; height: 100%; object-fit: cover; }
/* Excel thumbnails are 110x82 px: show near native size, never stretch. */
.v-card-image--thumb { background: linear-gradient(145deg, #eef2f5, #f8fafb); }
.v-card-image--thumb::after { display: none; }
.v-card-image--thumb img { width: 176px; height: auto; max-height: 132px; object-fit: contain; border: 3px solid #fff; box-shadow: 0 8px 20px rgba(18, 39, 60, .16); }
.v-card-year { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; background: rgba(10, 16, 24, .78); padding: 3px 8px; }
.v-card-image--thumb .v-card-year { background: rgba(49, 71, 94, .9); }
.v-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.v-card-brand { display: block; color: #a7c8f4; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 8px; }
.v-card-body h3 { font-size: 21px; line-height: 1.22; margin: 0 0 8px; letter-spacing: -.04em; color: #fff; }
.v-card-series { color: #8fa4b8; font-size: 11px; margin: 0 0 10px; }
.v-card-tags { display: flex; flex-wrap: wrap; gap: 5px; min-height: 27px; margin-bottom: 12px; }
.v-card-tags span { display: inline-block; background: #213347; color: #b8cde2; padding: 5px 7px; font-size: 10px; }
.v-card-trim { color: #b0becc; font-size: 12px; line-height: 1.6; margin: 0 0 14px; }
.v-card-spec { margin: 0 0 14px; }
.v-card-spec summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid #33495e; border-bottom: 1px solid #33495e; color: #9dc3ff; font-size: 11px; font-weight: 700; }
.v-card-spec summary::-webkit-details-marker { display: none; }
.v-card-spec summary::after { content: "+"; font-size: 15px; font-weight: 400; line-height: 1; }
.v-card-spec[open] summary::after { content: "\2212"; }
.v-card-spec[open] summary { border-bottom: 0; }
.v-specs { margin: 8px 0 0; border-top: 0; font-size: 11px; }
.v-specs div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(51, 73, 94, .55); }
.v-specs dt { color: #8fa4b8; }
.v-specs dd { margin: 0; color: #e8f0f8; text-align: right; font-variant-numeric: tabular-nums; }
.v-card-link { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #33495e; padding-top: 14px; font-size: 12px; font-weight: 700; color: #9dc3ff; text-decoration: none; }
.v-card-link:hover { color: #fff; }
.v-card-link span:last-child { font-size: 20px; font-weight: 400; line-height: 1; }

/* ---------- preserved price catalog ---------- */
.v-export { padding: 66px 0 74px; background: var(--v-paper); color: var(--v-text); }
.v-export .section-head h2 { color: var(--v-text); }
.v-export .eyebrow { color: #3977b9; }
.v-export-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.v-export-card { display: block; text-decoration: none; background: #fff; border: 1px solid var(--v-line); color: var(--v-text); transition: transform .2s, border-color .2s, box-shadow .2s; overflow: hidden; }
.v-export-card:hover { transform: translateY(-4px); border-color: #6d9bdb; box-shadow: 0 14px 30px rgba(18, 39, 60, .12); }
.v-export-card .cat-media { aspect-ratio: 16 / 10; }
.v-export-card .v-export-meta { padding: 12px 14px 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.v-export-card h3 { margin: 0; font-size: 13px; line-height: 1.25; }
.v-export-card .v-export-go { color: #255f9e; font-size: 16px; }
.v-export .cat-missing p { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) { .v-brand-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); } }
@media (max-width: 1150px) { .v-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .v-brand-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .v-intro-grid { gap: 5vw; } }
@media (max-width: 800px) {
  .v-intro { padding: 56px 0 60px; }
  .v-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .v-intro .v-intro-media { aspect-ratio: 16 / 9; }
  .v-intro-aside { margin-top: 14px; padding-top: 12px; }
  .v-intro h1 { font-size: 44px; }
  .v-trade-note .v-wrap { display: block; }
  .v-trade-note p { margin-top: 8px; }
  .v-main { padding-bottom: 70px; }
  .v-filter-head { display: block; }
  .v-filter-note { margin-top: 10px; }
  .v-brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .v-field { width: calc(50% - 7px); }
  .v-results { padding-top: 35px; }
  .v-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .v-wrap { width: min(100% - 32px, 1440px); }
  .v-filter { padding: 16px; }
  .v-brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .v-brand-tile { min-height: 64px; padding: 5px 2px; }
  .v-brand-logo { height: 32px; }
  .v-brand-logo img { max-width: 58px; max-height: 30px; }
  .v-brand-name { font-size: 9px; }
  .v-field { width: 100%; }
  .v-reset { margin-top: 3px; }
  .v-filter-head h2 { font-size: 21px; }
  .v-grid { grid-template-columns: 1fr; }
  .v-card-image { height: 190px; }
}