/** Shopify CDN: Minification failed

Line 1055:0 Unexpected "}"

**/
/* VWC V5.21 homepage section styles: hero, vehicle finder, SEO intro, product rows and card,
   category grid, promos, brand story, trust strip, FAQ, fitment CTA, reviews band, recently viewed.
   Loaded by layout/theme.liquid on the homepage, collection pages and the FAQ page (not product pages:
   those load the copies in vwc-finder.css and vwc-cards.css, which must be kept in step with this file).
   Tokens and helpers stay in vwc-v513.css, which loads on every page. */

/* Slice 1: SEO intro (the homepage H1). Mockup .seo-intro */
.vwc-seo-intro {
  border-bottom: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
}
.vwc-seo-intro .vwc-shell {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
  padding-top: 46px;
  padding-bottom: 46px;
}
.vwc-seo-intro__heading {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ink);
}
.vwc-seo-intro__text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}
@media (max-width: 820px) {
  .vwc-seo-intro .vwc-shell {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 22px;
    padding-bottom: 22px;
  }
  .vwc-seo-intro__heading { font-size: 21px; }
  .vwc-seo-intro__text { font-size: 13.5px; line-height: 1.55; }
}

/* ============================================================
   Slice 5: vehicle finder section (moved out of the header).
   Mockup .finder. The selects keep Dawn/legacy ids and the
   .collection-select class; old custom.css rules for
   .center-column and .vehiclefindspace are now dead but harmless.
   ============================================================ */
.vwc-finder {
  background: radial-gradient(130% 170% at 50% -30%, #1a212c 0, #0b0f15 52%, #07090d 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.vwc-finder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 0 34px;
}
.vwc-finder__title { text-align: center; }
.vwc-finder__title h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: .95;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.015em;
  color: #fff;
}
.vwc-finder__title p {
  margin: 8px 0 0;
  color: #99a1ac;
  font-size: 13px;
}
.vwc-eyebrow {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--red);
}
.vwc-finder__fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: center;
}
.vwc-finder__fields .collection-select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  max-width: none;
  min-height: 64px;
  height: auto;
  padding: 0 46px 0 18px;
  border: 0;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312161c' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 15px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
}
.vwc-button,
.vwc-finder__go {
  display: inline-flex;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(215, 23, 32, .28);
  transition: background .2s, box-shadow .2s;
}
.vwc-finder__go { grid-column: 1 / -1; width: 100%; }
.vwc-finder__go:hover,
.vwc-finder__go:focus-visible {
  background: var(--red-dark);
  box-shadow: 0 14px 30px rgba(168, 14, 21, .34);
  color: #fff;
}
.vwc-finder__clear {
  justify-self: center;
  color: #99a1ac;
  line-height: 0;
}
.vwc-finder__note {
  margin: -6px 0 0;
  color: #8b93a0;
  font-size: 11.5px;
  text-align: center;
}
.vwc-finder__toggle { display: none; }

@media screen and (max-width: 820px) {
  .vwc-finder__grid { padding: 6px 0; gap: 0; }
  .vwc-finder__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .vwc-finder__toggle svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .25s; }
  .vwc-finder.is-open .vwc-finder__toggle svg { transform: rotate(180deg); }
  .vwc-finder__body { display: none; }
  .vwc-finder.is-open .vwc-finder__body {
    display: grid;
    gap: 20px;
    padding: 4px 0 22px;
  }
  .vwc-finder.is-open .vwc-finder__title { display: none; }
  .vwc-finder__fields { grid-template-columns: 1fr; gap: 16px; }
}

/* Slice 5 fix 2: Find parts button red (custom.css styles #my_button blue by id, so this
   needs the section id in front), and visible dropdowns share the row instead of leaving
   empty grid cells when the script hides the empty selects. */
#vwc-vehicle-finder #my_button {
  top: 0;
  height: auto;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
}
#vwc-vehicle-finder #my_button:hover,
#vwc-vehicle-finder #my_button:focus-visible {
  background: var(--red-dark);
  color: #fff;
}
.vwc-finder__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.vwc-finder__fields .collection-select {
  flex: 1 1 160px;
  width: auto;
}
.vwc-finder__fields .vwc-finder__go { flex: 1 1 100%; }
.vwc-finder__fields .vwc-finder__clear { flex: 0 0 auto; align-self: center; }
@media screen and (max-width: 820px) {
  .vwc-finder__fields .collection-select { flex-basis: 100%; }
}

/* ============================================================
   Slice 9: reviews (Judge.me featured carousel, app block) and
   Recently Viewed, restyled to V5.21. Judge.me class names below
   were read from the rendered preview DOM on 15 Oct 2026
   (jdgm-carousel-wrapper, jdgm-carousel-title, jdgm-carousel-item,
   jdgm-carousel-item__review, jdgm-star). The section id suffix
   1785505104ddaf1f3f is the homepage apps section key in
   templates/index.json, so none of this touches PDP reviews.
   ============================================================ */
.vwc-head { padding: 64px 0 0; background: #fff; }
.vwc-head--soft { background: var(--paper); }
.vwc-head__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
}
.vwc-head__title {
  margin: 0;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ink);
}
.vwc-head__link {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  white-space: nowrap;
}

[id$="__1785505104ddaf1f3f"] {
  margin-top: 0 !important;
  background: var(--paper);
}
[id$="__1785505104ddaf1f3f"] .page-width { max-width: var(--max); }
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-wrapper {
  width: 100%;
  max-width: none;
  padding: 0 0 56px;
}
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-title { display: none; }
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-title-and-link {
  text-align: left;
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
}
[id$="__1785505104ddaf1f3f"] .jdgm-star { color: #f5a623; }
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-item {
  box-sizing: border-box;
  border: 9px solid transparent;
  border-radius: 27px;
  background: #fff;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 24px;
  text-align: left;
}
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-item * { text-align: left; }
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-item__review {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-item__reviewer-name-wrapper {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

#recently-viewed-section { padding-top: 48px; padding-bottom: 48px; }
#recently-viewed-section h2.title {
  margin: 0 0 26px;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--ink);
  text-align: left;
}

@media screen and (max-width: 820px) {
  .vwc-head { padding-top: 40px; }
  .vwc-head__inner { flex-direction: column; align-items: flex-start; margin-bottom: 16px; }
  [id$="__1785505104ddaf1f3f"] .jdgm-carousel-item { padding: 18px; }
  [id$="__1785505104ddaf1f3f"] .jdgm-carousel-item__review { font-size: 15px; line-height: 1.5; }
}

/* Slice 9 fix: the heading's bottom margin collapsed out of the grey band and showed
   as a white strip; use padding instead. Align the carousel with the heading
   (Dawn's .page-width adds 50px side padding on desktop) and left-align the
   Judge.me rating line under the heading. */
.vwc-head { padding-bottom: 26px; }
.vwc-head__inner { margin-bottom: 0; }
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-title-and-link,
[id$="__1785505104ddaf1f3f"] .jdgm-carousel-title-and-link * {
  text-align: left;
  justify-content: flex-start;
  margin-left: 0;
}
@media screen and (min-width: 750px) {
  [id$="__1785505104ddaf1f3f"] > .page-width {
    width: min(var(--max), calc(100% - 48px));
    padding-left: 0;
    padding-right: 0;
  }
}
@media screen and (max-width: 820px) {
  .vwc-head { padding-bottom: 16px; }
}

/* ============================================================
   Slice 8a: trust strip, FAQ, fitment CTA (mockup .trust,
   .faq-wrap, .footer-help). Our own sections, copy in settings.
   ============================================================ */
.vwc-trust { background: var(--ink); color: #fff; }
.vwc-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.vwc-trust__item { padding: 34px 28px; border-right: 1px solid #30343b; }
.vwc-trust__item:last-child { border-right: 0; }
.vwc-trust__icon { width: 34px; height: 34px; margin-bottom: 13px; color: var(--red); display: block; }
.vwc-trust__item h3 { margin: 0 0 5px; font-size: 16px; color: #fff; }
.vwc-trust__item p { margin: 0; color: #adb3bd; font-size: 13px; line-height: 1.45; }

.vwc-faq { padding: 76px 0; background: #fff; color: var(--ink); }
.vwc-faq__wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: 64px; align-items: start; }
.vwc-faq__intro h2 { margin: 0; font-size: clamp(34px, 4vw, 52px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.vwc-faq__intro p:not(.vwc-eyebrow) { color: var(--muted); }
.vwc-faq__list { border-top: 1px solid var(--line); }
.vwc-faq__list details { border-bottom: 1px solid var(--line); }
.vwc-faq__list summary {
  position: relative;
  padding: 22px 50px 22px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--ink);
}
.vwc-faq__list summary::-webkit-details-marker { display: none; }
.vwc-faq__list summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  font-weight: 400;
}
.vwc-faq__list details[open] summary::after { content: "\2212"; }
.vwc-faq__list details p { margin: -4px 50px 24px 0; color: var(--muted); line-height: 1.55; }

.vwc-cta-wrap { padding: 0 0 64px; background: #fff; }
.vwc-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 28px 30px;
  border-radius: 18px;
  background: #11161e;
  color: #fff;
}
.vwc-cta__icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: rgba(214, 34, 40, .16);
  color: #f04449;
}
.vwc-cta__icon svg { width: 26px; height: 26px; }
.vwc-cta .vwc-eyebrow { margin-bottom: 6px; }
.vwc-cta h2 { margin: 0; font-size: 25px; letter-spacing: -.025em; color: #fff; }
.vwc-cta__text { margin: 5px 0 0; color: #b8bec7; font-size: 14px; }
.vwc-cta__button { min-height: 48px; border-radius: 999px; white-space: nowrap; }
.vwc-cta__button:hover { background: var(--red-dark); color: #fff; }

@media screen and (max-width: 820px) {
  .vwc-trust__grid { grid-template-columns: repeat(2, 1fr); }
  .vwc-trust__item { padding: 20px 16px; border-right: 1px solid #30343b; border-bottom: 1px solid #30343b; }
  .vwc-trust__item:nth-child(2n) { border-right: 0; }
  .vwc-trust__item:nth-child(n+3) { border-bottom: 0; }
  .vwc-trust__icon { width: 26px; height: 26px; margin-bottom: 9px; }
  .vwc-trust__item h3 { font-size: 13.5px; line-height: 1.3; }
  .vwc-trust__item p { font-size: 11.5px; }
  .vwc-faq { padding: 44px 0; }
  .vwc-faq__wrap { grid-template-columns: 1fr; gap: 24px; }
  .vwc-faq__list details p { margin-right: 0; }
  .vwc-cta-wrap { padding-bottom: 44px; }
  .vwc-cta { grid-template-columns: 1fr; padding: 24px 20px; text-align: left; }
  .vwc-cta__button { width: 100%; }
}

/* ============================================================
   Slice 6: campaign hero (mockup .campaign). Slides are blocks
   in sections/vwc-campaign-hero.liquid; rotation in vwc-v513.js.
   ============================================================ */
.vwc-hero { background: #05080d; color: #fff; }
.vwc-hero__wrap { position: relative; overflow: hidden; min-height: clamp(480px, 43vw, 650px); }
.vwc-slide { position: relative; min-height: inherit; display: none; }
.vwc-slide.is-active { display: grid; }
.vwc-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(4,8,15,.98) 0%, rgba(4,8,15,.89) 36%, rgba(4,8,15,.18) 72%, rgba(4,8,15,.42) 100%);
}
.vwc-slide--blue { background: radial-gradient(115% 95% at 76% 38%, #123a78 0, #0a2148 30%, #060d19 68%, #04070c 100%); }
.vwc-slide--red { background: radial-gradient(115% 95% at 76% 38%, #4a1216 0, #200d10 36%, #06080d 72%); }
.vwc-slide--orange { background: radial-gradient(115% 95% at 76% 38%, #613410 0, #291a0d 36%, #06080d 72%); }
.vwc-slide__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.vwc-slide__copy { max-width: 610px; padding: 72px 0 96px; }
.vwc-slide__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  color: #fff;
  opacity: .82;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.vwc-slide__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--red); flex: 0 0 auto; }
.vwc-slide__copy h2 {
  margin: 0;
  max-width: 650px;
  color: #fff;
  font-size: clamp(46px, 5.6vw, 80px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.vwc-slide__text { max-width: 540px; margin: 22px 0 30px; color: #c3ccd9; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.vwc-slide__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 24px; }
.vwc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.vwc-chip:hover, .vwc-chip:focus-visible { border-color: #fff; background: rgba(255,255,255,.14); color: #fff; }
.vwc-slide__button { min-height: 48px; border-radius: 999px; }
.vwc-slide__button:hover, .vwc-slide__button:focus-visible { background: var(--red-dark); color: #fff; }
.vwc-slide__art {
  position: absolute;
  right: max(2vw, calc((100vw - var(--max)) / 2));
  top: 50%;
  width: min(47vw, 680px);
  height: 80%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
}
.vwc-slide__art::before {
  content: "";
  position: absolute;
  width: 82%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.08), transparent 72%);
}
.vwc-slide__art img {
  position: relative;
  width: 88%;
  height: auto;
  max-height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 30px 44px rgba(0,0,0,.5)) drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.vwc-slide--blue .vwc-slide__art img { width: 58%; }
.vwc-slider-controls {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}
.vwc-slider-dot {
  width: 30px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.vwc-slider-dot::after { content: ""; display: block; height: 24px; margin-top: -11px; }
.vwc-slider-dot.is-active { width: 52px; background: var(--red); }
.vwc-slider-pause {
  margin-left: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(0,0,0,.3);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  cursor: pointer;
}
.vwc-slider-pause[aria-pressed="true"] { border-color: var(--red); color: #fff; }

@media screen and (max-width: 820px) {
  .vwc-hero__wrap { min-height: 520px; }
  .vwc-slide__grid { grid-template-columns: 1fr; }
  .vwc-slide__copy { padding: 30px 0 210px; max-width: 94%; }
  .vwc-slide__copy h2 { font-size: 37px; }
  .vwc-slide__text { margin: 12px 0 18px; font-size: 15px; }
  .vwc-slide__chips { margin: 0 0 16px; }
  .vwc-slide__art { right: -3%; top: auto; bottom: 34px; width: 82%; height: 34%; transform: none; opacity: .82; }
  .vwc-slide::before { background: linear-gradient(180deg, rgba(4,8,15,.98) 0%, rgba(4,8,15,.85) 53%, rgba(4,8,15,.22) 100%); }
  .vwc-slider-controls { left: 15px; transform: none; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vwc-slider-dot { transition: none; }
}

/* ============================================================
   Slice 7: product rows and the homepage product card
   (mockup .section-head, .product-grid, .product-card).
   ============================================================ */
.vwc-row { padding: 76px 0; background: #fff; color: var(--ink); }
.vwc-row--soft { background: var(--paper); }
.vwc-row__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.vwc-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--red); font-weight: 800; white-space: nowrap; text-decoration: none; }
.vwc-text-link::after { content: "\2192"; transition: transform .2s ease; }
.vwc-text-link:hover::after { transform: translateX(4px); }
.vwc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vwc-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.vwc-card:hover { transform: translateY(-5px); border-color: #c7cbd1; box-shadow: var(--shadow); }
.vwc-card__media { position: relative; aspect-ratio: 1 / .82; display: grid; place-items: center; padding: 26px; background: #f7f8f9; overflow: hidden; }
.vwc-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s ease; }
.vwc-card:hover .vwc-card__media img { transform: scale(1.035); }
.vwc-card__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vwc-card__info { flex: 1; display: flex; flex-direction: column; padding: 19px; }
.vwc-stock { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vwc-stock--in { color: var(--success); }
.vwc-stock--ship { color: #b45309; }
.vwc-stock--out { color: var(--muted); }
.vwc-card__title { margin: 0; font-size: 15px; line-height: 1.38; color: var(--ink); }
.vwc-card__title a { color: inherit; text-decoration: none; }
.vwc-card__title a::after { content: ""; position: absolute; inset: 0; }
.vwc-card__price { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; gap: 9px; }
.vwc-card__now { font-size: 20px; font-weight: 900; letter-spacing: -.02em; color: var(--ink); }
.vwc-card__was { color: #8c929b; font-size: 13px; text-decoration: line-through; }
.vwc-card__form { display: block; }
.vwc-card__action {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.vwc-card__action:hover, .vwc-card__action:focus-visible { background: var(--ink); color: #fff; }
.vwc-card__action .loading__spinner { width: 18px; }
.vwc-card__action.loading > span:first-child { visibility: hidden; }

@media screen and (max-width: 820px) {
  .vwc-row { padding: 44px 0; }
  .vwc-row__head { flex-direction: column; align-items: flex-start; margin-bottom: 20px; }
  .vwc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vwc-card { border-radius: 12px; }
  .vwc-card__media { padding: 14px; }
  .vwc-card__info { padding: 12px; }
  .vwc-card__title { font-size: 13px; line-height: 1.35; }
  .vwc-stock { margin-bottom: 5px; font-size: 10px; }
  .vwc-card__badge { left: 10px; top: 10px; padding: 5px 8px; font-size: 9px; }
  .vwc-card__price { padding-top: 10px; gap: 7px; flex-wrap: wrap; }
  .vwc-card__now { font-size: 17px; }
  .vwc-card__was { font-size: 12px; }
  .vwc-card__action { margin-top: 10px; min-height: 38px; border-radius: 8px; font-size: 13px; }
}
@media (hover: none) {
  .vwc-card:hover { transform: none; box-shadow: none; }
}

/* ============================================================
   Slice 8b: shop by category + vehicle ranges, promo pair,
   brand story, recently viewed, 4 cards per row on phones
   (mockup .browse-grid, .vehicle-row, .promo-grid, .story).
   ============================================================ */
.vwc-browse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vwc-cat { position: relative; display: block; min-height: 270px; overflow: hidden; border-radius: var(--radius); background: #15191f; color: #fff; isolation: isolate; text-decoration: none; }
.vwc-cat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,7,10,.05), rgba(4,7,10,.9)); }
.vwc-cat img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.vwc-cat:hover img { transform: scale(1.05); }
.vwc-cat__copy { position: absolute; inset: auto 24px 24px; }
.vwc-cat__copy h3 { margin: 0 0 5px; font-size: 24px; letter-spacing: -.025em; color: #fff; }
.vwc-cat__copy p { margin: 0; color: #d7dbe1; font-size: 13px; }
.vwc-vehicles { margin-top: 28px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.vwc-vehicles__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.vwc-vehicles__top h3 { margin: 0; font-size: 20px; color: var(--ink); }
.vwc-vehicles__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.vwc-vchip { display: grid; place-items: center; min-height: 118px; padding: 18px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, #f6f7f8, #edeff2); color: var(--ink); text-align: center; text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.vwc-vchip span { font-size: clamp(24px, 1.9vw, 31px); font-weight: 900; line-height: 1; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; }
.vwc-vchip:hover { border-color: var(--red); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(14,22,34,.12); }
.vwc-vchip:hover span { color: var(--red); }

.vwc-promos { display: grid; grid-template-columns: 1.08fr .92fr; gap: 20px; }
.vwc-promo { position: relative; min-height: 410px; overflow: hidden; border-radius: 24px; background: var(--ink); color: #fff; isolation: isolate; }
.vwc-promo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,11,16,.96), rgba(8,11,16,.58) 56%, rgba(8,11,16,.12)); }
.vwc-promo img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vwc-focus, 70% center); }
.vwc-promo__copy { position: absolute; inset: auto auto 42px 40px; max-width: 56%; }
.vwc-promo__copy h2 { margin: 0; font-size: clamp(31px, 3vw, 47px); line-height: 1; letter-spacing: -.04em; color: #fff; }
.vwc-promo__copy p:not(.vwc-slide__eyebrow) { margin: 15px 0 22px; color: #d3d6da; }
.vwc-ghost { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font-weight: 700; text-decoration: none; backdrop-filter: blur(10px); }
.vwc-ghost:hover, .vwc-ghost:focus-visible { background: rgba(255,255,255,.17); color: #fff; }

.vwc-story { background: #11161e; color: #fff; overflow: hidden; }
.vwc-story__grid { display: grid; grid-template-columns: 1.07fr .93fr; align-items: stretch; min-height: 520px; }
.vwc-story__img { position: relative; min-height: 520px; }
.vwc-story__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vwc-story__copy { display: flex; flex-direction: column; justify-content: center; padding: 64px 5vw 64px 7vw; }
.vwc-story__copy h2 { max-width: 650px; margin: 0; font-size: clamp(38px, 4.2vw, 62px); line-height: .98; letter-spacing: -.045em; color: #fff; }
.vwc-story__copy p:not(.vwc-eyebrow) { max-width: 610px; margin: 22px 0 26px; color: #c6cbd3; font-size: 17px; }

.section-vwc-recent .vwc-card__media img { max-height: 100%; }

@media screen and (max-width: 820px) {
  .vwc-browse { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vwc-cat { min-height: 170px; border-radius: 12px; }
  .vwc-cat__copy { inset: auto 14px 14px; }
  .vwc-cat__copy h3 { font-size: 17px; }
  .vwc-cat__copy p { font-size: 11px; }
  .vwc-vehicles { padding: 18px; }
  .vwc-vehicles__top { flex-direction: column; align-items: flex-start; }
  .vwc-vehicles__chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .vwc-vehicles__chips::-webkit-scrollbar { display: none; }
  .vwc-vchip { flex: 0 0 58%; scroll-snap-align: start; min-height: 128px; }
  .vwc-vchip span { font-size: 28px; }
  .vwc-promos { grid-template-columns: 1fr; }
  .vwc-promo { min-height: 470px; }
  .vwc-promo__copy { max-width: calc(100% - 48px); inset: auto 24px 28px; }
  .vwc-story__grid { grid-template-columns: 1fr; }
  .vwc-story__img { min-height: 330px; }
  .vwc-story__copy { padding: 44px 24px 54px; }
  .vwc-row .vwc-grid > .vwc-card:nth-child(n+5) { display: none; }
}

/* ============================================================
   Slice 5b: finder fields to the V5.21 mockup: four numbered
   fields, 2 x 2 on desktop, one column on phones; fields after
   the current step stay visible but greyed and disabled.
   (Overrides the slice 5 flex layout.)
   ============================================================ */
.vwc-finder__fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vwc-field { position: relative; min-width: 0; }
.vwc-field .collection-select { display: block !important; width: 100%; padding-left: 76px; }
.vwc-step {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  border-right: 1px solid #262b33;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  pointer-events: none;
  transition: color .2s, border-color .2s;
}
.vwc-field .collection-select:disabled {
  background-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .55);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
.vwc-field.is-locked .vwc-step { color: rgba(255, 255, 255, .5); border-right-color: rgba(255, 255, 255, .22); }
.vwc-finder__fields .vwc-finder__go { grid-column: 1 / -1; }
.vwc-finder__fields .vwc-finder__clear { grid-column: 1 / -1; justify-self: center; }
@media screen and (max-width: 820px) {
  .vwc-finder__fields { grid-template-columns: 1fr; }
  .vwc-field .collection-select { padding-left: 80px; font-size: 17px; }
  .vwc-step { width: 62px; top: 12px; bottom: 12px; }
}

/* Slice 5b fix: custom.css styles div#vehicle-filter as a centred flex column under 700px;
   the section id is needed to outrank it so the fields stay a grid on phones. */
#vwc-vehicle-finder .vwc-finder__fields { display: grid; align-items: stretch; padding: 0; text-align: left; }
#vwc-vehicle-finder .vwc-field .collection-select { margin-bottom: 0; }

/* ============================================================
   Slice 5b fix 2 (UX): three finder fields by default, in one row
   on desktop; the 4th (sub model) appears only when the chosen
   generation has sub models, and the row becomes four.
   Stacking fix: every VWC homepage section is its own stacking
   context, so nothing inside it (card buttons, hero dots, badges)
   can paint over the sticky header while scrolling.
   ============================================================ */
#vwc-vehicle-finder .vwc-finder__grid { max-width: 1180px; }
#vwc-vehicle-finder .vwc-finder__fields { grid-template-columns: repeat(3, 1fr); }
#vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: repeat(4, 1fr); }
#vwc-vehicle-finder .vwc-field.is-hidden { display: none; }
@media screen and (max-width: 820px) {
  #vwc-vehicle-finder .vwc-finder__fields,
  #vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: 1fr; }
}
.vwc-hero, .vwc-finder, .vwc-row, .vwc-seo-intro, .vwc-trust, .vwc-faq,
.vwc-cta-wrap, .vwc-story, .vwc-head { position: relative; isolation: isolate; }
.vwc-card__action { z-index: 1; }

/* ============================================================
   Astra fixes (18 Oct 2026): A4 contrast (story link, struck
   prices, review arrows); A3 the finder stops below the sticky
   header when a link jumps to it.
   ============================================================ */
.vwc-story__copy .vwc-text-link { color: #fff; }
.vwc-card__was { color: #5b636d; }
[id$="__1785505104ddaf1f3f"] .jdgm-carousel__left-arrow,
[id$="__1785505104ddaf1f3f"] .jdgm-carousel__right-arrow { filter: brightness(0.15); }
#vwc-vehicle-finder { scroll-margin-top: 120px; }

/* ============================================================
   V5.22 A1 (19 Oct 2026, Dean approved from mockups)
   Finder: desktop = three fields, Find Parts and a Clear icon
   button on one row (generation field widest so names such as
   "MK7.5 TSI WAGON (2017+)" fit); when the sub-model field shows,
   Find Parts and Clear drop to their own row. Phones: the desktop
   look (eyebrow, big heading, numbered fields), open by default,
   a chevron collapses it to a bar that keeps eyebrow and heading.
   Note line adds "Can't find your car? Ask us".
   CarPlay panel: second link "Help me choose".
   ============================================================ */
#vwc-vehicle-finder .vwc-finder__fields { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.35fr) auto auto; }
#vwc-vehicle-finder .vwc-finder__fields .vwc-finder__go,
#vwc-vehicle-finder .vwc-finder__fields .vwc-finder__clear { box-sizing: border-box; }
#vwc-vehicle-finder .vwc-finder__fields .vwc-finder__go { grid-column: auto; width: auto; min-width: 170px; }
#vwc-vehicle-finder .vwc-finder__fields .vwc-finder__clear {
  grid-column: auto; justify-self: start; align-self: stretch;
  width: 60px; min-height: 60px; padding-top: 20px; line-height: 0; text-align: center;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 6px; color: #fff;
  transition: border-color .2s, background .2s;
}
#vwc-vehicle-finder .vwc-finder__clear svg { width: 18px; height: 18px; }
#vwc-vehicle-finder .vwc-finder__clear:hover,
#vwc-vehicle-finder .vwc-finder__clear:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .08); }
#vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr); }
#vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__go { grid-column: 1 / 4; width: 100%; }
#vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__clear { grid-column: 4; }
#vwc-vehicle-finder .vwc-finder__help { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media screen and (min-width: 821px) and (max-width: 1099px) {
  #vwc-vehicle-finder .vwc-finder__fields { grid-template-columns: minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.3fr); }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-finder__go { grid-column: 1 / 3; width: 100%; }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-finder__clear { grid-column: 3; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__go { grid-column: 1; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__clear { grid-column: 2; }
}
@media screen and (max-width: 820px) {
  #vwc-vehicle-finder .vwc-finder__grid { position: relative; }
  #vwc-vehicle-finder .vwc-finder__toggle-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
  #vwc-vehicle-finder .vwc-finder__toggle-eyebrow { color: #e2484f; font-size: 10.5px; letter-spacing: .18em; }
  #vwc-vehicle-finder .vwc-finder__toggle-heading { font-size: 15px; letter-spacing: .04em; }
  #vwc-vehicle-finder.is-open .vwc-finder__toggle { position: absolute; top: 10px; right: 0; z-index: 2; width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  #vwc-vehicle-finder.is-open .vwc-finder__toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #vwc-vehicle-finder.is-open .vwc-finder__body { padding-top: 16px; }
  #vwc-vehicle-finder.is-open .vwc-finder__title { display: block; padding: 0 40px; }
  #vwc-vehicle-finder .vwc-finder__title h2 { font-size: clamp(27px, 8.4vw, 36px); line-height: 1; }
  #vwc-vehicle-finder .vwc-finder__fields,
  #vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-field { grid-column: 1 / -1; }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-finder__go,
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__go { grid-column: 1; width: 100%; min-width: 0; }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-finder__clear,
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__clear { grid-column: 2; }
  #vwc-vehicle-finder .vwc-finder__fields:not(:has(#clear_button[style*="inline-block"])) .vwc-finder__go { grid-column: 1 / -1; }
  #vwc-vehicle-finder .vwc-finder__note { line-height: 1.6; }
}
.vwc-promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vwc-promo__help { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.vwc-promo__help:hover, .vwc-promo__help:focus-visible { color: #fff; text-decoration-thickness: 2px; }

/* V5.22 A1b (19 Oct 2026): custom.css (max-width 700px) still positions #clear_button absolutely for the
   old finder; keep the Clear icon in the grid beside Find Parts. */
#vwc-vehicle-finder .vwc-finder__fields .vwc-finder__clear { position: static; top: auto; right: auto; }

/* ============================================================
   V5.22 A2a (19 Oct 2026, Dean approved from mockups)
   Shared: 2 x 2 pages that swipe on phones ([data-vwc-pager]);
   on desktop the pages flatten into the parent grid.
   ============================================================ */
.vwc-pager__page { display: contents; }
.vwc-pager__dots { display: none; }
@media screen and (max-width: 820px) {
  .vwc-pager { display: flex !important; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0 4px; }
  .vwc-pager::-webkit-scrollbar { display: none; }
  .vwc-pager__page { flex: 0 0 88%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; scroll-snap-align: start; }
  .vwc-pager__page:only-child { flex-basis: 100%; }
  .vwc-pager__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
  .vwc-pager__dots span { width: 7px; height: 4px; border-radius: 2px; background: #c9ced4; transition: width .2s, background .2s; }
  .vwc-pager__dots span.is-active { width: 18px; background: var(--red); }
}

/* Vehicle buttons: big model name + small generation line; MK7 GTI / MK7 R carry two generation links */
.vwc-vchip { gap: 8px; align-content: center; }
.vwc-vchip .vwc-vchip__gen { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5b636d; line-height: 1.2; }
.vwc-vchip .vwc-vchip__gen * { font-size: inherit; font-weight: inherit; text-transform: none; letter-spacing: 0; }
.vwc-vchip--split { cursor: default; }
.vwc-vchip--split:hover { transform: none; border-color: var(--line); box-shadow: none; }
.vwc-vchip--split:hover .vwc-vchip__name { color: var(--ink); }
.vwc-vchip__gen a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vwc-vchip__gen a:hover, .vwc-vchip__gen a:focus-visible { color: var(--red); }
.vwc-vchip__sep { margin: 0 2px; color: #9aa2ad; }
.vwc-vchip:not(.vwc-vchip--split):hover .vwc-vchip__gen { color: var(--red); }
.vwc-collapse { display: none; }
@media screen and (max-width: 820px) {
  .vwc-vehicles__top { position: relative; padding-right: 48px; }
  .vwc-collapse { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .vwc-collapse svg { width: 20px; height: 20px; transition: transform .25s; }
  .vwc-vehicles.is-collapsed .vwc-collapse svg { transform: rotate(180deg); }
  .vwc-vehicles.is-collapsed .vwc-vehicles__body { display: none; }
  .vwc-vehicles.is-collapsed .vwc-vehicles__top { margin-bottom: 0; }
  .vwc-vehicles__chips.vwc-pager .vwc-vchip { min-height: 98px; padding: 14px 8px; flex: none; }
  .vwc-vehicles__chips.vwc-pager .vwc-vchip__name { font-size: 22px; }
  .vwc-vchip .vwc-vchip__gen { font-size: 13px; }
}

/* Brand strip */
.vwc-brands { padding: 46px 0; }
.vwc-brands__head { margin-bottom: 18px; }
.vwc-brands__title { margin: 0; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.02em; color: var(--ink); }
.vwc-brands__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.vwc-brand { display: flex; align-items: center; justify-content: center; min-height: 62px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: border-color .2s, color .2s; }
.vwc-brand:hover, .vwc-brand:focus-visible { border-color: var(--red); color: var(--red); }
@media screen and (max-width: 1099px) {
  .vwc-brand { font-size: 13px; }
}
@media screen and (max-width: 820px) {
  .vwc-brands { padding: 34px 0; }
  .vwc-brand { min-height: 56px; font-size: 13.5px; }
}

/* Slim reassurance row under the hero */
.vwc-reassure { background: #fff; border-bottom: 1px solid var(--line); }
.vwc-reassure__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; margin: 0 auto; padding: 13px 0; list-style: none; }
.vwc-reassure__item { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.vwc-reassure__icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vwc-reassure__icon--star { fill: var(--red); stroke: none; }
.vwc-reassure__short { display: none; }
@media screen and (max-width: 820px) {
  .vwc-reassure__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; justify-content: stretch; padding: 13px 16px; width: 100%; }
  .vwc-reassure__item { gap: 7px; font-size: clamp(12.5px, 3.35vw, 13px); }
  .vwc-reassure__icon { width: 16px; height: 16px; flex-basis: 16px; }
  .vwc-reassure__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vwc-reassure__short { display: inline; overflow: hidden; text-overflow: ellipsis; }
}

/* Reviews heading: live score and Read more reviews */
.vwc-head__aside { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.vwc-head__score { display: flex; align-items: baseline; gap: 8px; margin: 0; color: var(--ink); }
.vwc-head__score-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.vwc-head__stars { color: var(--red); font-size: 16px; letter-spacing: 1px; }
.vwc-head__score-count { color: #5b636d; font-size: 14px; }

/* Finder polish: space under the subheading and above the note on desktop */
@media screen and (min-width: 821px) {
  #vwc-vehicle-finder .vwc-finder__title p { margin-bottom: 18px; }
  #vwc-vehicle-finder .vwc-finder__note { margin-top: 16px; }
}

/* V5.22 A2b (19 Oct 2026): touch screens keep the last-tapped tile in :hover, which left a red border on the
   tile peeking in from the next page; turn tile hover effects off where there is no real hover. */
@media (hover: none) {
  .vwc-vchip:hover { border-color: var(--line); transform: none; box-shadow: none; }
  .vwc-vchip:hover span, .vwc-vchip:not(.vwc-vchip--split):hover .vwc-vchip__gen { color: inherit; }
  .vwc-vchip:hover .vwc-vchip__name { color: var(--ink); }
  .vwc-vchip:not(.vwc-vchip--split):hover .vwc-vchip__gen { color: #5b636d; }
  .vwc-brand:hover { border-color: var(--line); color: var(--ink); }
}

/* V5.22 A6 (20 Oct 2026): compact finder for collection pages (desktop: fields only; phones: closed bar) */
.vwc-finder--compact .vwc-finder__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media screen and (min-width: 821px) { .vwc-finder--compact .vwc-finder__grid { padding-top: 14px; padding-bottom: 10px; gap: 10px; } }
/* Quick add: cart errors under the button */
.vwc-card__error { margin: 0 0 8px; color: #b3261e; font-size: 13px; line-height: 1.35; }
.vwc-card__error[hidden] { display: none; }

/* V5.22 A7 (20 Oct 2026): finder in narrower desktop windows (a sidebar open, small laptops).
   1000-1099px: fields and Find Parts stay on one row. 821-999px: Find Parts spans the whole second row
   until the clear button appears (same :has test as the phone layout), so no empty cell. */
@media screen and (min-width: 1000px) and (max-width: 1099px) {
  #vwc-vehicle-finder .vwc-finder__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto auto; gap: 12px; }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-finder__go { grid-column: auto; width: auto; min-width: 150px; }
  #vwc-vehicle-finder .vwc-finder__fields .vwc-finder__clear { grid-column: auto; }
}
@media screen and (min-width: 821px) and (max-width: 999px) {
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four):not(:has(#clear_button[style*="inline-block"])) .vwc-finder__go { grid-column: 1 / -1; }
}

/* ============================================================
   V5.22 A8 (20 Oct 2026): hero in Astra's layout. Copy column is a fixed-height flex column with the action row
   pushed to its bottom, so Add to cart / Shop buttons sit in the same place on every slide. Phones: label,
   headline, action row and picture only.
   ============================================================ */
.vwc-hero__wrap { display: grid; touch-action: pan-y; }
/* all slides share one grid cell, so the hero is as tall as its tallest slide and never changes height */
.vwc-slide, .vwc-slide.is-active { display: grid; grid-area: 1 / 1; }
.vwc-slide { visibility: hidden; opacity: 0; transition: opacity .35s ease; }
.vwc-slide.is-active { visibility: visible; opacity: 1; }
.vwc-slide__grid { align-items: stretch; }
.vwc-slide__copy { display: flex; flex-direction: column; box-sizing: border-box; padding: 56px 0 84px; max-width: 690px; }
.vwc-slide__copy h2 { font-size: clamp(44px, 5.1vw, 74px); max-width: 690px; }
.vwc-slide__text { margin: 18px 0 22px; }
.vwc-slide__text--mobile { display: none; }
.vwc-slide__chips { margin: 0; }
.vwc-chip--static { cursor: default; }
.vwc-chip--static:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.vwc-slide__actions { margin-top: auto; padding-top: 24px; }
.vwc-slide__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; min-height: 72px; }
.vwc-slide__buy .form { margin: 0; }
.vwc-slide__price { display: flex; flex-direction: column; line-height: 1.15; }
.vwc-slide__price strong { color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.vwc-slide__price s { color: #aab3c0; font-size: 14px; }
.vwc-slide__fine { min-height: 1.5em; margin: 10px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #bec5ce; font-size: 12px; line-height: 1.5; }
.vwc-slide__fine a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.vwc-slide__error { margin-top: 10px; color: #ffb4b4; font-size: 13px; }
.vwc-slide__error[hidden] { display: none; }
/* photo style: picture fills the right side and fades into the dark copy side */
.vwc-slide--photo .vwc-slide__art { top: 0; right: 0; width: 58%; height: 100%; transform: none; display: block; }
.vwc-slide--photo .vwc-slide__art::before { display: none; }
.vwc-slide--photo .vwc-slide__art img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); }
.vwc-slide--photo::before { background: linear-gradient(90deg, rgba(4,8,15,.98) 0%, rgba(4,8,15,.9) 38%, rgba(4,8,15,.25) 70%, rgba(4,8,15,.1) 100%); }
@media screen and (max-width: 820px) {
  .vwc-hero__wrap { min-height: 0; }
  .vwc-slide__copy { padding: 24px 0 176px; }
  .vwc-slide__copy h2 { font-size: clamp(28px, 8.4vw, 36px); line-height: 1; }
  .vwc-slide__text--desktop { display: none; }
  .vwc-slide__text--mobile { display: block; margin: 16px 0 0; color: #c3ccd9; font-size: 16px; line-height: 1.45; }
  .vwc-slide__fine { display: block; white-space: normal; margin-top: 8px; font-size: 12px; }
  .vwc-slide__art { height: 36%; bottom: 40px; }
  .vwc-slide--photo .vwc-slide__art { top: auto; bottom: 0; right: 0; width: 100%; height: 42%; opacity: 1; }
  .vwc-slide--photo .vwc-slide__art img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 40%); mask-image: linear-gradient(180deg, transparent 0, #000 40%); }
  .vwc-slide--photo::before { background: linear-gradient(180deg, rgba(4,8,15,.98) 0%, rgba(4,8,15,.94) 52%, rgba(4,8,15,.45) 66%, rgba(4,8,15,.05) 100%); }
  .vwc-slide__chips { display: none; }
  .vwc-slide__actions { padding-top: 24px; }
  .vwc-slide__buy { gap: 16px; }
  .vwc-slide__price strong { font-size: 24px; }
  #vwc-vehicle-finder.is-open .vwc-finder__title { cursor: pointer; }
}
@media (prefers-reduced-motion: reduce) { .vwc-slide { transition: none; } }
.vwc-slide__fine:empty { display: block; }

/* V5.22 A9 (20 Oct 2026): instant feedback on hero and card Add to Cart. Dawn's product-form adds .loading to the
   button as soon as it is tapped and removes it when the cart answers; the add takes ~2 s on live and V5.22 alike. */
.vwc-slide__button .loading__spinner, .vwc-card__action .loading__spinner { display: none !important; }
.vwc-slide__button.loading, .vwc-card__action.loading { position: relative; opacity: .82; pointer-events: none; }
.vwc-slide__button.loading > span, .vwc-card__action.loading > span { visibility: hidden; }
.vwc-slide__button.loading::after, .vwc-card__action.loading::after {
  content: "Adding\2026"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-left: 26px; color: inherit; font: inherit; }
.vwc-slide__button.loading::before, .vwc-card__action.loading::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: calc(50% - 52px); width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: vwc-spin .7s linear infinite; }
@keyframes vwc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vwc-slide__button.loading::before, .vwc-card__action.loading::before { animation-duration: 2s; } }

/* ============================================================
   V5.22 A10 (20 Oct 2026): finder fixes shared with assets/vwc-finder.css
   ============================================================ */
/* A10 fix: compact finder on phones keeps its full "Find parts for your car" bar when opened (the standard open
   state turns it into a 44px chevron pinned top-right, which sat over the Brand box on compact finders) */
@media screen and (max-width: 820px) {
  #vwc-vehicle-finder.vwc-finder--compact.is-open .vwc-finder__toggle { position: relative; top: auto; right: auto; width: 100%; justify-content: space-between; padding: 0 2px; }
  #vwc-vehicle-finder.vwc-finder--compact.is-open .vwc-finder__toggle-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
/* A10 (Dean): "collapsed" finder (product pages) is a closed bar on desktop too; clicking it opens the fields and
   clicking again folds them away (same toggle as phones) */
/* V6.02 (12 Nov 2026, Dean): the bar applies to every compact finder on desktop, so collection pages get the same
   full-width row as product pages and phones (collections start open, see the section script); chevron at the
   right like phones. Before V6.02 this block was .vwc-finder--collapsed only with justify-content flex-start. */
@media screen and (min-width: 821px) {
  #vwc-vehicle-finder.vwc-finder--compact .vwc-finder__grid { padding-top: 4px; padding-bottom: 4px; }
  #vwc-vehicle-finder.vwc-finder--compact .vwc-finder__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 0 2px; border: 0; background: none; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
  #vwc-vehicle-finder.vwc-finder--compact .vwc-finder__toggle-text { display: flex; align-items: baseline; gap: 16px; }
  #vwc-vehicle-finder.vwc-finder--compact .vwc-finder__toggle-eyebrow { font-size: 11px; letter-spacing: .2em; }
  #vwc-vehicle-finder.vwc-finder--compact .vwc-finder__toggle svg { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .25s; }
  #vwc-vehicle-finder.vwc-finder--compact.is-open .vwc-finder__toggle svg { transform: rotate(180deg); }
  #vwc-vehicle-finder.vwc-finder--compact:not(.is-open) .vwc-finder__body { display: none; }
  #vwc-vehicle-finder.vwc-finder--compact.is-open .vwc-finder__body { padding-bottom: 14px; }
}
}
/* V5.22 A11 (Dean 20 Oct): compact product cards on phones, Add to Cart kept */
@media screen and (max-width: 820px) {
  .vwc-grid { gap: 8px; }
  .vwc-card__media { aspect-ratio: 1 / .78; padding: 8px; }
  .vwc-card__badge { left: 8px; top: 8px; padding: 4px 7px; font-size: 9px; }
  .vwc-card__info { padding: 10px; }
  .vwc-stock { margin: 0 0 4px; font-size: 10px; }
  .vwc-card__title { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .vwc-card__price { padding-top: 8px; gap: 6px; flex-wrap: wrap; }
  .vwc-card__now { font-size: 16px; }
  .vwc-card__was { font-size: 12px; }
  .vwc-card__action { margin-top: 8px; min-height: 34px; border-radius: 8px; font-size: 13px; }
}
/* ============================================================
   V5.22 A13 (21 Oct 2026, Dean; idea from hideaway.online): homepage product rows page sideways.
   Products come in groups of 4. Phones: one 2 x 2 group per page, swipe for the next. Desktop: two groups
   stacked (8 products, two rows of 4) per page, arrows or a trackpad swipe for the next. Hero-style bars
   (grey, current one red) show the page. "See Everything" still opens the full collection.
   ============================================================ */
.vwc-pages { position: relative; }
.vwc-pages__track {
  display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: 18px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  margin: -8px -4px 0; padding: 8px 4px 4px;
}
.vwc-pages__track::-webkit-scrollbar { display: none; }
.vwc-pages__page { grid-template-columns: repeat(4, 1fr); align-content: start; scroll-snap-align: none; }
.vwc-pages__page:nth-child(odd) { scroll-snap-align: start; scroll-snap-stop: always; }
.vwc-pages__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 22px; }
.vwc-pages__nav[hidden] { display: none; }
.vwc-pages__dots { display: flex; gap: 6px; }
.vwc-pages__dot { position: relative; width: 34px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.vwc-pages__dot::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: #c9ced5; transition: background .2s; }
.vwc-pages__dot[aria-current="true"]::before { background: var(--red); }
.vwc-pages__arrow { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #c9ced5; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.vwc-pages__arrow:hover:not([disabled]) { border-color: var(--ink); background: var(--ink); color: #fff; }
.vwc-pages__arrow[disabled] { opacity: .35; cursor: default; }
.vwc-pages__arrow svg { width: 18px; height: 18px; }
@media screen and (max-width: 820px) {
  .vwc-pages__track { grid-template-rows: auto; gap: 10px; }
  .vwc-pages__page { grid-template-columns: repeat(2, 1fr); }
  .vwc-pages__page:nth-child(n) { scroll-snap-align: start; scroll-snap-stop: always; }
  .vwc-pages__arrow { display: none; }
  .vwc-pages__nav { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .vwc-pages__track { scroll-behavior: auto; } }

/* ============================================================
   V5.22 A14 (21 Oct 2026, Dean): the Fitment Support panel above the footer is a full-width black band (square,
   no white space above or below), flowing into the dark footer with a thin line between them.
   ============================================================ */
.vwc-cta-wrap { padding: 0; background: #0b0f15; border-bottom: 1px solid #262c35; }
.vwc-cta { padding-top: 52px; padding-bottom: 52px; border-radius: 0; background: transparent; }
.vwc-cta__button { box-sizing: border-box; max-width: 100%; }
@media screen and (max-width: 820px) {
  .vwc-cta-wrap { padding: 0; }
  .vwc-cta { padding: 40px 0; }
}

/* ============================================================
   V5.22 final tweaks (21 Oct 2026, Dean): finder with a 4th box on desktop stays on ONE row with Find Parts and
   the X. A 4th box only appears for Audi RS / S / TT and VW Polo, so boxes 1-3 hold short names there; the
   space goes to box 4 (longest: "TT RS MK2 (2010-2014)"). Boxes get a slimmer number cell and 16px text in
   this state only. Under 1200px it falls back to two rows: Find Parts full width with the X at the far right.
   ============================================================ */
@media screen and (min-width: 1200px) {
  #vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.45fr) auto auto; gap: 12px; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__go { grid-column: auto; width: auto; min-width: 140px; padding-left: 18px; padding-right: 18px; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__clear { grid-column: auto; width: 56px; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-step { width: 46px; min-width: 46px; flex-basis: 46px; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .collection-select { font-size: 16px; padding-left: 58px; padding-right: 30px; background-position: right 11px center; }
}
@media screen and (min-width: 1100px) and (max-width: 1199px) {
  #vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__go { grid-column: 1 / -1; grid-row: 2; width: auto; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__clear { grid-column: 4; grid-row: 2; justify-self: end; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four:has(.vwc-finder__clear:not([style*="none"])) .vwc-finder__go { margin-right: 76px; }
}
@media screen and (min-width: 821px) and (max-width: 1099px) {
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__go { grid-column: 1 / -1; grid-row: 3; width: auto; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-finder__clear { grid-column: 2; grid-row: 3; justify-self: end; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four:has(.vwc-finder__clear:not([style*="none"])) .vwc-finder__go { margin-right: 76px; }
}

/* V5.22 A15b (21 Oct 2026): 4-box finder at 1100-1199px: box 4 gets the room (same proportions and slimmer number
   cell / 16px text as the one-row layout), so "TT RS MK2 (2010-2014)" fits; Find Parts stays full width below. */
@media screen and (min-width: 1100px) and (max-width: 1199px) {
  #vwc-vehicle-finder .vwc-finder__fields.has-four { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.05fr) minmax(0, 1.45fr); gap: 12px; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .vwc-step { width: 46px; min-width: 46px; flex-basis: 46px; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four .collection-select { font-size: 16px; padding-left: 58px; padding-right: 30px; background-position: right 11px center; }
  #vwc-vehicle-finder .vwc-finder__fields.has-four:has(.vwc-finder__clear:not([style*="none"])) .vwc-finder__go { margin-right: 68px; }
}

/* ============================================================
   V5.22 A16 (21 Oct 2026, Dean): collection pages use the homepage product card.
   ============================================================ */
/* A16: a card fills its grid cell so prices and buttons line up across a row (collections, You may also like) */
.product-grid > .grid__item { display: flex; }
.product-grid > .grid__item > .vwc-card { width: 100%; height: 100%; }
.vwc-card__action { box-sizing: border-box; }  /* A16: the View Product link matches the Add to Cart button height */

/* V5.22 A16 (21 Oct 2026): 3-box finder on desktop fits the real menu names. Slimmer number cell and tighter padding
   (as the 4-box layout), and box 2 gets a little more room ("Octavia Combi 5E5 (2012+)", "Transporter/Multivan").
   The very longest generation names (e.g. Hyundai "N-line Sedan CN7.V1 1.6L TURBO DCT (2020+)") still trim at the end. */
@media screen and (min-width: 1000px) {
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.35fr) auto auto; gap: 12px; }
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four) .vwc-step { width: 46px; min-width: 46px; flex-basis: 46px; }
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four) .collection-select { padding-left: 58px; padding-right: 30px; background-position: right 11px center; }
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four) .vwc-finder__go { min-width: 140px; padding-left: 18px; padding-right: 18px; }
  #vwc-vehicle-finder .vwc-finder__fields:not(.has-four) .vwc-finder__clear { width: 56px; }
}

/* ============================================================
   V5.22 A18 (21 Oct 2026): hero slogans and trust points are paragraphs now (SEO heading tidy-up); their
   styles are copied here from the old h2 / h3 rules unchanged so the design is identical.
   ============================================================ */
.vwc-trust__item .vwc-trust__h { margin: 0 0 5px; font-size: 16px; color: #fff; }
@media screen and (max-width: 820px) {
  .vwc-trust__item .vwc-trust__h { font-size: 13.5px; line-height: 1.3; }
}
.vwc-slide__copy .vwc-slide__h {
  margin: 0;
  max-width: 650px;
  color: #fff;
  font-size: clamp(46px, 5.6vw, 80px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.05em;
  text-wrap: balance;
}
@media screen and (max-width: 820px) {
  .vwc-slide__copy .vwc-slide__h { font-size: 37px; }
}
.vwc-slide__copy .vwc-slide__h { font-size: clamp(44px, 5.1vw, 74px); max-width: 690px; }
@media screen and (max-width: 820px) {
  .vwc-slide__copy .vwc-slide__h { font-size: clamp(28px, 8.4vw, 36px); line-height: 1; }
}
.vwc-trust__item .vwc-trust__h { line-height: 1.3; }  /* was the heading line-height; outranks .vwc-trust__item p */