/* ==========================================================================
   Car pages on phones (599px and under): rethought for the thumb, not shrunk from desktop.
   Shorter hero, features two to a row, the detail photos as a swipe strip, colours that all fit,
   a comparison that scrolls sideways across every version, and even breathing room between sections.
   Loaded after the shared stylesheets on the nine car pages only.
   ========================================================================== */
@media (max-width: 599px) {

  /* ---------- Hero: a shorter photo, the car whole, the price and actions straight after ---------- */
  .hero.hero--car { padding-bottom: 22px; }
  .hero--car .hero__media { height: min(74vw, 320px); min-height: 0; }
  .hero--car .hero__slide img { object-position: 50% 58%; }
  .hero--car .hero__veil { background: linear-gradient(0deg, #0e0f11 0%, rgba(14, 15, 17, .55) 14%, rgba(14, 15, 17, 0) 36%); }
  .hero--car .hero__title { margin-top: 6px; font-size: 2rem; }
  .hero--car .hero__from { margin-top: 6px; }
  .hero--car .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 16px; }
  .hero--car .hero__actions .btn { min-height: 48px; padding: 0 10px; font-size: .9rem; white-space: nowrap; }
  .hero--car .hero__badges { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .hero--car .hbadge { min-width: 0; padding: 10px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
  .hero--car .hbadge b { font-size: .98rem; }
  .hero--car .hbadge span { font-size: .74rem; }
  .hero--car .hbadge .hbadge__stars { font-size: .78rem; margin-bottom: 2px; }

  /* ---------- Sections: one rhythm of space, so each block reads as its own ---------- */
  .keyf, .explore, .cost, .tour, .duel, .fit, .whyus, .proof, .others, .faqs, #vmx { padding-top: 56px; }
  .cost { padding-bottom: 24px; }

  /* ---------- Key features: two to a row, icon above the words ---------- */
  .keyf__acts { margin-top: 18px; }
  .keyf__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 22px; border: 0; }
  .keyf__grid .keyf__item { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--white); }
  .keyf__grid .keyf__item .keyf__ico { width: 36px; height: 36px; margin-bottom: 10px; }
  .keyf__grid .keyf__item h3 { font-size: .95rem; line-height: 1.3; }
  .keyf__grid .keyf__item p { margin-top: 4px; font-size: .82rem; line-height: 1.45; }

  /* ---------- Price: the car larger, inset from the edges ---------- */
  .cost__car { margin: 0; padding: 10px 12px; border-radius: var(--r-lg); }
  .cost__car figure { aspect-ratio: 16 / 9; overflow: hidden; }
  .cost__car img { object-fit: contain; transform: scale(1.18); }

  /* ---------- Up close: the film inset from the edges, a little taller ---------- */
  .tour__screen { margin: 0; border-radius: var(--r-lg); aspect-ratio: 16 / 10; }
}

/* The detail strip is a phone layout; larger screens keep the panel beside the car */
.dstrip { display: none; }

@media (max-width: 599px) {
  /* ---------- What does it look like: every colour in sight, details as a swipe strip ---------- */
  .viewer .paint__list { flex-wrap: wrap; gap: 9px; overflow: visible; padding: 4px 2px; }
  .viewer .paint__dot { width: 30px; height: 30px; }
  .viewer .spots { margin-top: 18px; gap: 10px; }
  .viewer .spots .dtl__img, .viewer .spots .dtl, .viewer .spots .dnav { display: none; }
  .dstrip { position: relative; display: flex; gap: 12px; list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .dstrip::-webkit-scrollbar { display: none; }
  .dstrip > li { flex: 0 0 80%; scroll-snap-align: start; display: flex; }
  .dcard { display: flex; flex-direction: column; width: 100%; padding: 0 0 14px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color .2s var(--ease); }
  .dcard.is-active { border-color: var(--ink); }
  .dcard__img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--tint); }
  .dcard__img img { width: 100%; height: 100%; object-fit: cover; }
  .dcard__img i { position: absolute; top: 10px; left: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: .8rem; font-weight: 600; }
  .dcard b { display: block; margin: 12px 14px 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
  .dcard__text { display: -webkit-box; margin: 4px 14px 0; font-size: .86rem; line-height: 1.5; color: var(--graphite); -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .dcard em { align-self: flex-start; margin: 10px 14px 0; padding: 4px 8px; border-radius: var(--r); background: var(--tint); font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

  /* ---------- Versions and prices: every version side by side, swiped across, with room to read ---------- */
  #vmx .vmx__scroll { position: relative; max-height: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); overflow-x: auto; overflow-y: visible; border-left: 0; border-right: 0; border-radius: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  #vmx .vmx__grid { --label: 128px; grid-template-columns: var(--label) repeat(var(--n), 112px); }
  #vmx .vmx__corner, #vmx .vmx__label { position: sticky; left: 0; z-index: 2; background: var(--white); box-shadow: 1px 0 0 var(--rule); }
  #vmx .vmx__corner { z-index: 4; }
  #vmx .vmx__head { padding: 14px 8px 12px; scroll-snap-align: start; scroll-margin-left: var(--label); }
  #vmx .vmx__head b { font-size: .95rem; }
  #vmx .vmx__label { padding: 12px 12px; font-size: .84rem; line-height: 1.4; }
  #vmx .vmx__cell { min-height: 52px; padding: 10px 8px; font-size: .84rem; }
  #vmx .vmx__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; }
  #vmx .vmx__chips::-webkit-scrollbar { display: none; }
  #vmx .vmx__hint { margin-top: 12px; font-size: .86rem; }
  #vmx .vmx__swipe { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .82rem; font-weight: 600; color: var(--graphite); }
  #vmx .vmx__swipe::after { content: "→"; font-size: 1rem; animation: vmx-nudge 1.6s ease-in-out infinite; }

  /* ---------- Book the drive: name and phone side by side ---------- */
  .final__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  .final__fields .field:not(.field--select) { grid-column: auto; }

  /* ---------- Explore more Kia cars: one car at a time, an arrow at each side ---------- */
  #others { display: grid; grid-template-columns: minmax(0, 1fr); }
  #others .others__head { display: contents; }
  #others .others__head > div:first-child { grid-row: 1; }
  #others .range__help { grid-row: 2; justify-self: start; margin-top: 10px; }
  #others .others__row { grid-row: 3; grid-column: 1; margin-right: 0; margin-top: 20px; }
  #others .others__list--row { grid-auto-columns: 100%; gap: 12px; padding-right: 0; }
  #others .rail__nav { grid-row: 3; grid-column: 1; z-index: 2; align-self: start; display: flex; justify-content: space-between; margin: calc(20px + 14px + 54px) -8px 0; pointer-events: none; }
  #others .rail__nav .round { width: 40px; height: 40px; pointer-events: auto; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(14, 15, 17, .14); }
  #others .ocar__img { padding-left: 52px; padding-right: 52px; }
}
@keyframes vmx-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { #vmx .vmx__swipe::after { animation: none; } }

.vmx__swipe { display: none; }
@media (max-width: 599px) {
  /* Compare all: no version chips to read past, just the swipe cue and the table */
  #vmx .vmx__chips.is-all, #vmx .vmx__chips.is-all ~ .vmx__hint { display: none; }
  #others .note { grid-row: 4; }
}
@media (max-width: 599px) {
  /* The table scrolls sideways in its own box: headers sit at its top (not under the page header), and
     with only two or three versions chosen the columns share the full width */
  #vmx .vmx__corner, #vmx .vmx__head { top: 0 !important; }
  #vmx .vmx__scroll { overflow-y: hidden; }
  #vmx .vmx__grid { grid-template-columns: var(--label) repeat(var(--n), minmax(112px, 1fr)); min-width: 100%; }
  #vmx .vmx__corner { align-content: end; }
}
@media (max-width: 599px) {
  /* Detail cards, compact: a small photograph beside the name and line, numbered like the marks on the car */
  .viewer .spots .dpanel__top::after { content: " · Tap a number on the car or a card to see it"; text-transform: none; letter-spacing: 0; font-weight: 400; }
  .dstrip > li { flex: 0 0 86%; }
  .dcard { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; align-items: start; padding: 10px; }
  .dcard__img { grid-row: 1 / -1; width: 96px; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; }
  .dcard__img i { display: none; }
  .dcard b { margin: 2px 0 0; font-size: .95rem; }
  .dcard b::before { content: attr(data-n); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .7rem; vertical-align: 2px; }
  .dcard__text { margin: 4px 0 0; font-size: .8rem; -webkit-line-clamp: 2; }
  .dcard em { margin: 8px 0 0; font-size: .6rem; padding: 3px 6px; }
  .dcard.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
}

.step__pic { display: none; }
@media (max-width: 599px) {
  /* After you enquire: each step shows its own photograph under its words; the shared photograph above goes */
  #steps-photo { display: none; }
  .step .step__pic { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; margin-top: 12px; object-fit: cover; border-radius: var(--r-lg); background: var(--tint); }
}
@media (max-width: 599px) {
  /* Hero: the photograph melts into the panel below with no seam (same black, a longer fade) */
  .hero--car .hero__media { background: rgb(11, 12, 14); margin-bottom: 0; }
  .hero--car .hero__veil { background: linear-gradient(0deg, rgb(11, 12, 14) 0%, rgba(11, 12, 14, .7) 16%, rgba(11, 12, 14, 0) 46%); }
  /* The Syros photograph is a wide scene: closer in, so the car fills the frame */
  .hero--car picture:has(source[srcset*="models/syros/hero-m"]) img { transform: scale(1.55); transform-origin: 52% 64%; }
  /* Steps: the photograph runs under the words, in the text column */
  .step .step__pic { grid-column: 2; }
}
@media (max-width: 599px) {
  /* After the film's note, the same clear gap before the next section as elsewhere */
  .tour { padding-bottom: 28px; }
}
@media (max-width: 599px) {
  /* Group headings (Safety, Exterior…) stay in view while the table is swiped sideways: the bar is one
     screen wide and held at the left; its tint carries on to the right edge of the table */
  /* Car banners: a longer fade, so the photograph never shows an edge against the panel */
  .hero--car .hero__veil { background: linear-gradient(0deg, rgb(11, 12, 14) 0%, rgb(11, 12, 14) 4%, rgba(11, 12, 14, .7) 22%, rgba(11, 12, 14, 0) 55%) !important; }
}
@media (max-width: 599px) {
  /* Car banner: the photograph runs on behind the name, price and buttons and fades out under them,
     so there is no edge where the picture stops (user: no line; the image covers the background) */
  .hero.hero--car { position: relative; padding-top: calc(min(74vw, 320px) - 34px); }
  .hero--car .hero__media { position: absolute; top: 0; left: 0; right: 0; height: calc(min(74vw, 320px) + 150px); margin: 0; }
  .hero--car .hero__slide img { object-position: 50% 56%; }
  .hero--car picture:has(source[srcset*="models/syros/hero-m"]) img { transform: none; object-position: 54% 60%; }
  .hero--car .hero__veil { background: linear-gradient(0deg, rgb(11, 12, 14) 0%, rgba(11, 12, 14, .92) 22%, rgba(11, 12, 14, .55) 42%, rgba(11, 12, 14, 0) 64%) !important; }
  .hero--car .hero__inner > *, .hero--car .hero__title, .hero--car .hero__from, .hero--car .hero__actions, .hero--car .hero__badges { position: relative; z-index: 1; }
}

@media (max-width: 599px) {
  /* Comparison, phones: each feature name on its own line above its row of ticks. A name and a group heading
     each span the full table, so the browser itself holds them at the left while the versions are swiped
     (no script, so no lag or bounce) */
  #vmx .vmx__grid { grid-template-columns: repeat(var(--n), minmax(112px, 1fr)); min-width: 100%; }
  #vmx .vmx__corner { grid-column: 1 / -1; position: sticky; left: 0; justify-self: start; width: 100vw; min-height: 0; padding: 10px 16px 4px; box-shadow: none; border-bottom: 0; transform: none; z-index: 1; }
  #vmx .vmx__group { position: sticky; left: 0; z-index: 2; justify-self: start; width: 100vw; transform: none; }
  #vmx .vmx__group > span { position: static; }
  #vmx .vmx__label { grid-column: 1 / -1; position: sticky; left: 0; z-index: 1; justify-self: start; width: 100vw; padding: 12px 16px 2px; background: var(--white); border-top: 1px solid #eef0f2; box-shadow: none; transform: none; font-weight: 600; }
  #vmx .vmx__cell { border-top: 0; min-height: 44px; padding: 6px 8px 12px; }
}
@media (max-width: 599px) {
  /* The table is as wide as its columns (never narrower than the screen), so pinned names have room to stay put */
  #vmx .vmx__grid { width: max-content; min-width: 100%; }
}
/* Phone detail cards: the colour-matched close-up, cut from the turntable frame (same maths as the desktop panel) */
.dcard__img.is-crop { position: relative; overflow: hidden; background: #f3f4f6; }
.dcard__img.is-crop img { position: absolute; left: calc(50% - var(--x) * var(--s) * 150%); top: 50%; width: calc(var(--s) * 150%); height: auto; max-width: none; object-fit: fill; transform: translateY(calc(var(--y) * -100%)); }

/* =====================================================================
   Comparison, phones, choosing versions (the default): a plain side-by-side table that fits the screen.
   Feature name on the left of its row, one column per chosen version, nothing to swipe. The stacked,
   swipeable layout above applies only to "Compare all".
   ===================================================================== */
@media (max-width: 599px) {
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__scroll { overflow: visible; margin-left: 0; margin-right: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__grid { --label: 42%; width: 100%; min-width: 0; grid-template-columns: var(--label) repeat(var(--n), minmax(0, 1fr)); }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__corner { grid-column: auto; position: sticky; top: var(--nav-h, 64px); left: auto; width: auto; justify-self: stretch; padding: 10px 12px; border-bottom: 1px solid var(--ink); z-index: 4; }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__head { position: sticky; top: var(--nav-h, 64px); z-index: 4; padding: 10px 4px; scroll-snap-align: none; }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__group { position: static; width: auto; justify-self: stretch; }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__label { grid-column: auto; position: static; width: auto; justify-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 12px; border-top: 1px solid #eef0f2; font-weight: 500; font-size: .84rem; line-height: 1.35; }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__cell { min-height: 52px; padding: 8px 4px; border-top: 1px solid #eef0f2; font-size: .8rem; line-height: 1.3; }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__head b { font-size: .9rem; }
  /* the chips say which versions are side by side */
  #vmx .vmx__chips:not(.is-all) { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0; padding: 0; }
}
@media (max-width: 599px) {
  /* Compare all: the table is its own window (one screen tall), so the version names stay at its top while the
     features scroll under them, and the feature names stay at its left while the versions are swiped */
}
@media (max-width: 599px) {
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__corner, #vmx:not(:has(.vmx__chips.is-all)) .vmx__head { top: var(--nav-h, 64px) !important; background: var(--white); }
  #vmx:not(:has(.vmx__chips.is-all)) .vmx__head.is-mine { background: #f7f8f9; }
}
@media (max-width: 599px) {
  /* After the four steps (the last one ends with its photo), a clear gap before "Who else bought from here?" */
  .whyus { padding-bottom: 28px; }
  /* Google ratings: the three cards line up (score on top, place and count below) */
  .rates li { align-content: start; }
}

.vmx__headbar { display: none; }
@media (max-width: 599px) {
  /* Compare all: the page scrolls normally; the table only scrolls sideways */
  #vmx:has(.vmx__chips.is-all) .vmx__scroll { max-height: none; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  /* The version names ride under the menu while the table is on screen, moving sideways with it */
  #vmx:has(.vmx__chips.is-all) .vmx__headbar:not([hidden]) { display: block; position: sticky; top: var(--nav-h, 64px); z-index: 6; margin: 0 calc(-1 * var(--gutter)) -1px; overflow: hidden; background: var(--white); border-bottom: 1px solid var(--ink); box-shadow: 0 8px 12px -10px rgba(20, 23, 26, .35); }
  .vmx__headgrid { width: max-content; min-width: 100%; will-change: transform; }
  .vmx__headgrid .vmx__corner { display: none; }
  .vmx__headgrid .vmx__head { position: static !important; border-bottom: 0; }
  /* The table header row sits under the strip, so it is not shown twice */
  #vmx:has(.vmx__chips.is-all) .vmx__headbar:not([hidden]) + .vmx__scroll .vmx__head,
  #vmx:has(.vmx__chips.is-all) .vmx__headbar:not([hidden]) + .vmx__scroll .vmx__corner { visibility: hidden; height: 0; min-height: 0; padding: 0; border: 0; overflow: hidden; }
}
@media (max-width: 599px) {
  #vmx:has(.vmx__chips.is-all) .vmx__headbar:not([hidden]) { margin-top: 18px; }
  #vmx:has(.vmx__chips.is-all) .vmx__headbar:not([hidden]) + .vmx__scroll { margin-top: 0; border-top: 0; }
}