/* ══ VANS FOR SALE — shared listing styles ══
   Used by the inventory grid at /vans-for-sale and by every generated van
   page at /vans-for-sale/{slug}/. Site chrome (nav/footer/announcement/sticky)
   and the canonical classes (.section, .container, .btn, .section-label,
   .popup-input, .popup-submit, .trust-strip-*) come from style.css — only the
   listing card, grid, gallery, spec table, badges and inline forms live here,
   all prefixed .vfs-. */

/* ── VANS FOR SALE — page-specific styles ──
   Chrome (nav/footer/announcement/sticky) + canonical classes
   (.section, .container, .btn, .section-label, .popup-input,
   .popup-submit, .trust-strip-*) come from the site. Only the
   listing card, gallery, spec table, badges, and inline forms
   live here, prefixed .vfs-. */

/* Status badge */
.vfs-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
.vfs-badge-available {
  background: rgba(77,122,138,0.16);
  border: 1px solid rgba(77,122,138,0.5);
  color: var(--teal-light);
}
.vfs-badge-pending {
  background: rgba(181,68,15,0.14);
  border: 1px solid rgba(181,68,15,0.45);
  color: var(--rust);
}
.vfs-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Listing card */
.vfs-listing {
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(13,27,42,0.07);
  max-width: 1080px;
  margin: 0 auto;
}
.vfs-listing-head {
  padding: 2rem 2.25rem 1.5rem;
  border-bottom: 1px solid rgba(13,27,42,0.07);
}
.vfs-listing-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: 0.03em;
  color: var(--ink);
  line-height: 1;
  margin: 0.85rem 0 0.35rem;
}
.vfs-listing-sub {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-style: italic;
  color: #5a6f7d;
  margin: 0;
}
.vfs-price {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--teal);
  margin-top: 1rem;
}

/* Gallery */
.vfs-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 1.5rem;
}
.vfs-gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; display: block; }
.vfs-gallery .vfs-gallery-hero { grid-column: 1 / -1; height: clamp(280px, 42vw, 480px); }
.vfs-photo-placeholder {
  height: 220px;
  border: 2px dashed rgba(13,27,42,0.18);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--cream);
  color: #8aa0b0;
  text-align: center;
  padding: 1rem;
}
.vfs-photo-placeholder svg { width: 34px; height: 34px; opacity: 0.6; }
.vfs-photo-placeholder span {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Spec table + highlights */
.vfs-body-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5rem;
  padding: 1rem 2.25rem 2.5rem;
}
.vfs-spec-table { width: 100%; border-collapse: collapse; }
.vfs-spec-table th, .vfs-spec-table td {
  text-align: left;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(13,27,42,0.08);
  vertical-align: top;
}
.vfs-spec-table th {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  width: 38%;
}
.vfs-spec-table td {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: #3a4a55;
  line-height: 1.55;
}
.vfs-highlights h3, .vfs-specs h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 1rem;
}
.vfs-highlights p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.75;
  color: #4a5c68;
  margin: 0 0 1rem;
}
.vfs-note {
  background: var(--cream);
  border-left: 3px solid var(--teal);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.65;
  color: #5a6f7d;
  margin-top: 1.25rem;
}

/* Confidence / trust band */
.vfs-confidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
.vfs-conf-card { text-align: center; padding: 0.5rem; }
.vfs-conf-icon {
  width: 52px; height: 52px; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(77,122,138,0.14);
  color: var(--teal-light);
}
.vfs-conf-icon svg { width: 26px; height: 26px; }
.vfs-conf-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--off-white);
  margin: 0 0 0.5rem;
}
.vfs-conf-card p {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-light);
  margin: 0;
}

/* Inline forms (canonical .popup-input / .popup-submit) */
.vfs-form-card {
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(13,27,42,0.06);
}
.vfs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.vfs-form-row-full { grid-column: 1 / -1; }
.vfs-form-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.vfs-form-fineprint {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-mid);
  margin: 1rem 0 0;
}
.vfs-honeypot { display: none; }

/* Waitlist (single field) */
.vfs-waitlist-form {
  display: flex;
  gap: 0.75rem;
  max-width: 520px;
  margin: 1.5rem auto 0;
}
.vfs-waitlist-form .popup-input { margin: 0; }
.vfs-waitlist-form .popup-submit { margin: 0; white-space: nowrap; width: auto; padding-left: 1.75rem; padding-right: 1.75rem; }

/* Consignment cross-link banner */
.vfs-cross {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 2.5rem 2.75rem;
}
.vfs-cross h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: 0.03em;
  color: var(--off-white);
  margin: 0 0 0.5rem;
}
.vfs-cross p { font-family: var(--font-serif); font-size: 1.05rem; color: var(--sand); margin: 0; max-width: 520px; line-height: 1.6; }

@media (max-width: 860px) {
  .vfs-body-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .vfs-gallery { grid-template-columns: repeat(2, 1fr); }
  .vfs-confidence-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .vfs-form-grid { grid-template-columns: 1fr; }
  .vfs-cross { flex-direction: column; text-align: center; }
  .vfs-waitlist-form { flex-direction: column; }
  .vfs-waitlist-form .popup-submit { width: 100%; }
}

/* ══ ADDED WITH THE LISTING CMS ══
   The grid (many vans on the index), the Sold treatments, the generated
   highlight list, and the detail-page sold banner. */

/* Sold badge — muted, so a sold van reads as a record, not an offer */
.vfs-badge-sold {
  background: rgba(13,27,42,0.08);
  border: 1px solid rgba(13,27,42,0.22);
  color: #5a6f7d;
}

/* ── Inventory grid ── */
.vfs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
.vfs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(13,27,42,0.07);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vfs-card:hover { transform: translateY(-4px); box-shadow: 0 16px 50px rgba(13,27,42,0.13); }
/* Every card photo is the same box, whatever shape the uploaded photo is. */
.vfs-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--cream); }
.vfs-card-media picture { position: absolute; inset: 0; display: block; }
.vfs-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vfs-card-media .vfs-badge { position: absolute; top: 1rem; left: 1rem; background: rgba(255,255,255,0.94); }
.vfs-card-body { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.vfs-card-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.vfs-card-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #6a8292;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.vfs-card-foot {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(13,27,42,0.08);
}
.vfs-card-price {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--teal);
}
.vfs-card-price-sold { color: #8aa0b0; }
.vfs-card-cta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.vfs-card-sold .vfs-card-media img { filter: saturate(0.45); }
.vfs-card-sold:hover .vfs-card-media img { filter: saturate(0.8); }

.vfs-empty {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-style: italic;
  color: #5a6f7d;
  max-width: 520px;
  margin: 0 auto;
}

/* ── Detail page ── */
.vfs-price-sold { color: #8aa0b0; }
.vfs-sold-banner {
  background: rgba(13,27,42,0.05);
  border: 1px solid rgba(13,27,42,0.12);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 1.5rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.6;
  color: #4a5c68;
}
.vfs-sold-banner a { color: var(--teal); }

.vfs-highlight-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.vfs-highlight-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.93rem;
  line-height: 1.7;
  color: #3a4a55;
}
.vfs-highlight-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.vfs-note-condition { border-left-color: #b5440f; }

/* The gallery grid is reused on detail pages; a picture element is the grid
   item there, so it needs the sizing the bare img used to carry. */
.vfs-gallery picture { display: block; }
.vfs-gallery picture img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; display: block; }
.vfs-gallery picture.vfs-gallery-hero { grid-column: 1 / -1; }
.vfs-gallery picture.vfs-gallery-hero img { height: clamp(280px, 42vw, 480px); }

.vfs-back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.vfs-back:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .vfs-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ══ NEW vs PRE-OWNED, AND THE GRID FILTERS ══ */

/* Kind badge — sits opposite the status badge on a card */
.vfs-kind-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
.vfs-kind-new { background: var(--teal); color: #fff; }
.vfs-kind-preowned { background: rgba(255,255,255,0.94); color: var(--navy); border: 1px solid rgba(13,27,42,0.14); }
/* On a detail page the badge sits in the flow beside the status pill */
.vfs-kind-inline { position: static; display: inline-block; margin-right: 0.5rem; vertical-align: middle; }

/* Filter bar */
.vfs-filters {
  max-width: 1080px;
  margin: 0 auto 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vfs-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.vfs-filter {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(13,27,42,0.18);
  background: transparent;
  color: #5a6f7d;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vfs-filter:hover { border-color: var(--teal); color: var(--teal); }
.vfs-filter.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.vfs-filter:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.vfs-filter-count {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8aa0b0;
  margin: 0 0 1.5rem;
  min-height: 1em;
}
.vfs-no-match { margin-top: 2rem; }
.vfs-reset {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--teal);
  text-decoration: underline;
  cursor: pointer;
}

/* "Request Pricing" reads as a prompt, not a number */
.vfs-price-ask { font-size: clamp(1.3rem, 2.6vw, 1.8rem); }

/* New-build layout cross-link */
.vfs-layout-link {
  margin: 0 2.25rem 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--cream);
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.vfs-layout-link p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: #4a5c68;
  margin: 0;
  max-width: 34rem;
  min-width: 0;
}

@media (max-width: 860px) {
  .vfs-layout-link { margin: 0 1.25rem 1.75rem; flex-direction: column; align-items: flex-start; }
  .vfs-filter { font-size: 0.68rem; padding: 0.5rem 0.9rem; }
}

/* ── Gallery lightbox ─────────────────────────────────────────────────────── */
.vfs-lb-trigger { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
.vfs-lb-trigger:focus-visible { outline: 3px solid var(--teal, #4d7a8a); outline-offset: 2px; }
.vfs-gallery .vfs-lb-trigger.vfs-gallery-hero { grid-column: 1 / -1; height: auto; }
.vfs-gallery .vfs-lb-trigger.vfs-gallery-hero img { height: clamp(280px, 42vw, 480px); }
.vfs-lb { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 20, 0.96); }
.vfs-lb[hidden] { display: none; }
.vfs-lb-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; user-select: none; }
.vfs-lb-close { position: fixed; top: 0.75rem; right: 1rem; padding: 0.5rem; background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; opacity: 0.75; }
.vfs-lb-close:hover, .vfs-lb-close:focus-visible { opacity: 1; }
.vfs-lb-prev, .vfs-lb-next { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.6rem; cursor: pointer; }
.vfs-lb-prev { left: 0.75rem; }
.vfs-lb-next { right: 0.75rem; }
.vfs-lb-prev:hover, .vfs-lb-next:hover { background: rgba(255, 255, 255, 0.28); }
.vfs-lb-count { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.6); font-size: 0.75rem; letter-spacing: 0.14em; }