/* Vehicle Selector – vs-selector.css  v4.0
   Mobile-first, flat UI: one accent color for selection, black for actions,
   no shadows / tinted panels / decorative chrome. Everything inherits the
   theme font; sizes are in em so the widget scales with the theme body size. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */

.vs-selector-wrap,
.vs-finder-wrap,
.vs-banner,
.vs-results-wrap,
.vs-wizard,
.vs-field,
.vs-fq-wrap,
.vs-color-wrap,
.vs-row-wrap,
.vs-logo-wrap,
.vs-tl-wrap,
.vs-trunk-wrap,
.vs-steering-wrap,
.vs-custom-field-wrap {
  --vs-accent:  #007cba;   /* selected state */
  --vs-cta:     #111;      /* primary action buttons */
  --vs-ink:     #111;
  --vs-muted:   #666;
  --vs-line:    #ccc;      /* control borders */
  --vs-line-2:  #e5e5e5;   /* dividers */
  --vs-alert:   #e00404;
  --vs-radius:  4px;
  box-sizing: border-box;
}
.vs-wizard *,
.vs-selector-wrap *,
.vs-finder-wrap * { box-sizing: border-box; }

/* Neutralise theme <button> styling (Flatsome uppercases every button and
   gives it letter-spacing, 2.5em min-height and outer margins). */
.vs-selector-wrap button,
.vs-finder-wrap button,
.vs-banner button,
.vs-results-wrap button,
.vs-wizard button:not(.vs-wiz-btn),
.vs-field button,
.vs-fq-wrap button,
.vs-color-wrap button,
.vs-row-wrap button,
.vs-logo-wrap button,
.vs-tl-wrap button,
.vs-trunk-wrap button,
.vs-steering-wrap button,
.vs-custom-field-wrap button {
  margin: 0;
  min-height: 0;
  min-width: 0;
  line-height: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  position: static;
}

/* ── Field headings (one style for every field) ──────────────────────────── */

.vs-selector-heading,
.vs-finder-heading,
.vs-fq-label,
.vs-color-heading,
.vs-row-heading,
.vs-logo-heading,
.vs-logo-section-label,
.vs-tl-heading,
.vs-tl-sub-label,
.vs-logo-sub-label,
.vs-trunk-heading,
.vs-steering-heading,
.vs-custom-field-heading,
.vs-field-label {
  display: block;
  margin: 0 0 10px;
  font-size: .9em;
  font-weight: 700;
  line-height: 1.3;
  color: #222;
}

/* Required mark */
.vs-required-note {
  margin-left: .2em;
  font-weight: 700;
  font-size: 1em;
  font-style: normal;
  color: var(--vs-alert);
  border: 0;
  text-decoration: none;
}

/* "Color: Black" – the live selection echoed in the heading */
.vs-color-selected,
.vs-row-selected {
  font-weight: 400;
  color: var(--vs-accent);
}

/* Price hint inside any option: "(+$20.00)" */
.vs-price-hint,
.vs-logo-type-srch,
.vs-row-surcharge,
.vs-cf-btn-srch,
.vs-cf-price,
.vs-tl-opt-price {
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  opacity: .7;
  margin: 0;
}

/* ── Errors (plain red text, no boxes) ───────────────────────────────────── */

.vs-error,
.vs-color-error,
.vs-row-error,
.vs-logo-error,
.vs-tl-error,
.vs-trunk-error,
.vs-steering-error,
.vs-custom-field-error,
.vs-cf-error {
  margin: 8px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: .875em;
  line-height: 1.4;
  color: var(--vs-alert);
}

/* ── Field spacing ───────────────────────────────────────────────────────── */

.vs-field,
.vs-color-wrap,
.vs-row-wrap,
.vs-logo-wrap,
.vs-tl-wrap,
.vs-trunk-wrap,
.vs-steering-wrap,
.vs-custom-field-wrap,
.vs-fq-question {
  margin: 0 0 1.5em;
}

/* ── Vehicle Make / Model / Year ─────────────────────────────────────────── */

.vs-selector-wrap,
.vs-finder-wrap {
  margin: 0 0 1.5em;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* The three selects always share one row – on phones too. */
.vs-selector-row,
.vs-finder-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.vs-finder-row { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }

.vs-selector-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.vs-label { display: none; }

.vs-select {
  width: 100%;
  min-width: 0;
  height: 2.75em;
  margin: 0;
  padding: 0 2em 0 .75em;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius);
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right .5em center / 1em;
  box-shadow: none;
  font: inherit;
  font-size: 16px;            /* ≥16px prevents iOS zoom-on-focus */
  line-height: normal;
  color: var(--vs-ink);
  cursor: pointer;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .1s;
}
.vs-select:focus {
  outline: none;
  border-color: var(--vs-ink);
  box-shadow: none;
}
.vs-select:disabled {
  color: #999;
  background-color: #f7f7f7;
  cursor: not-allowed;
}

.vs-finder-btn-col { min-width: 0; }
.vs-finder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 2.75em;
  margin: 0;
  padding: 0 1.25em;
  background: var(--vs-cta);
  color: #fff;
  border: 0;
  border-radius: var(--vs-radius);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.vs-finder-btn:hover:not(:disabled) { background: #000; }
.vs-finder-btn:disabled { opacity: .35; cursor: not-allowed; }

@media (max-width: 520px) {
  .vs-finder-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs-finder-btn-col { grid-column: 1 / -1; }
}

/* ── Vehicle banner ──────────────────────────────────────────────────────── */

.vs-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25em .5em;
  margin: 0 0 1em;
  padding: .6em 0;
  border-top: 1px solid var(--vs-line-2);
  border-bottom: 1px solid var(--vs-line-2);
  font-size: .9em;
  color: var(--vs-ink);
}
.vs-banner-label   { color: var(--vs-muted); }
.vs-banner-vehicle { font-weight: 700; }
.vs-banner-clear {
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: var(--vs-ink);
  text-decoration: underline;
  cursor: pointer;
}

/* ── Results page ────────────────────────────────────────────────────────── */

.vs-results-wrap { margin: 1.5em 0; }

.vs-results-static-heading {
  margin: 0 0 .75em;
  font-size: 1.125em;
  font-weight: 700;
}
.vs-results-heading {
  margin: 0 0 1em;
  min-height: 1.4em;
  font-size: .9375em;
  color: var(--vs-muted);
}
.vs-results-heading strong { color: var(--vs-ink); }

.vs-results-loading {
  width: 28px;
  height: 28px;
  margin: 2.5em auto;
  border: 2px solid var(--vs-line-2);
  border-top-color: var(--vs-ink);
  border-radius: 50%;
  animation: vs-spin .7s linear infinite;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }

.vs-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .vs-results-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}

.vs-result-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vs-line-2);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: var(--vs-ink);
  transition: border-color .1s;
}
.vs-result-card:hover { border-color: var(--vs-ink); color: var(--vs-ink); text-decoration: none; }

.vs-result-card-img { aspect-ratio: 1; overflow: hidden; background: #f7f7f7; }
.vs-result-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.vs-result-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .25em;
  padding: .75em;
}
.vs-result-card-title { font-size: .9375em; font-weight: 700; line-height: 1.35; }
.vs-result-card-price { font-size: .875em; color: var(--vs-muted); }
.vs-results-empty     { padding: 1.5em 0; color: var(--vs-muted); }

/* ── Text buttons (one style for every text-type option) ─────────────────── */
/* Row text buttons, color text buttons, fitment options, logo type buttons,
   top-layer color buttons, custom text buttons. Inline, wrapping; the whole
   button fills with the accent color when selected. */

.vs-row-options:not(.vs-swatch-grid),
.vs-color-options:not(.vs-swatch-grid),
.vs-fq-options,
.vs-logo-type-row,
.vs-tl-color-list,
.vs-cf-options:not(.vs-swatch-grid) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vs-row-btn--text,
.vs-color-btn--text,
.vs-fq-option,
.vs-logo-type-btn,
.vs-tl-color-btn,
.vs-custom-field-btn:not(.vs-swatch),
.vs-cf-btn,
.vs-steering-btn:not(.vs-swatch) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  margin: 0;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius);
  box-shadow: none;
  font: inherit;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vs-ink);
  text-align: center;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
}
.vs-row-btn--text.is-selected,
.vs-color-btn--text.is-selected,
.vs-fq-option:has(input:checked),
.vs-fq-option.is-selected,
.vs-logo-type-btn.is-selected,
.vs-tl-color-btn.is-selected,
.vs-custom-field-btn:not(.vs-swatch).is-selected,
.vs-custom-field-btn:not(.vs-swatch)[aria-pressed="true"],
.vs-cf-btn.is-selected,
.vs-steering-btn:not(.vs-swatch).is-selected {
  border-color: var(--vs-accent);
  background: var(--vs-accent);
  color: #fff;
  font-weight: 400;
}
.vs-row-btn--text.is-selected *,
.vs-color-btn--text.is-selected *,
.vs-fq-option:has(input:checked) *,
.vs-fq-option.is-selected *,
.vs-logo-type-btn.is-selected *,
.vs-tl-color-btn.is-selected *,
.vs-custom-field-btn:not(.vs-swatch).is-selected *,
.vs-cf-btn.is-selected *,
.vs-steering-btn:not(.vs-swatch).is-selected * {
  color: #fff;
}
.vs-row-btn[hidden] { display: none; }

/* Fitment option = <label><input radio><span>: hide the native radio, the button is the control */
.vs-fq-option input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.vs-fq-option { position: relative; }
.vs-fq-option input:checked ~ span { font-weight: 400; }

/* Text-only steering fallback (no images uploaded) */
.vs-steering-options:not(.vs-swatch-grid) { display: flex; flex-wrap: wrap; gap: 10px; }
.vs-steering-btn:not(.vs-swatch) { flex: 1 1 0; }
.vs-steering-btn:not(.vs-swatch) img { display: none; }

/* Custom-field card buttons: text button with a description line */
.vs-cf-options-card_button .vs-custom-field-btn {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  min-width: 180px;
}
.vs-cf-btn-label { display: inline; }
.vs-cf-btn-desc {
  display: block;
  font-size: .875em;
  color: var(--vs-muted);
}
.vs-cf-options-card_button .vs-custom-field-btn.is-selected .vs-cf-btn-desc { color: #fff; opacity: .85; }

/* Lock overlay when Add-to-Cart is disabled due to unanswered fitment questions */
.single_add_to_cart_button.vs-fq-locked,
button.vs-fq-locked { opacity: .45; cursor: not-allowed; }

/* Fitment question blocks: plain, no panels */
.vs-fq-wrap { margin-top: 1.25em; }
.vs-fq-question {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  animation: vs-fq-in .15s ease;
}
@keyframes vs-fq-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Image swatch buttons (shared) ───────────────────────────────────────── */
/* Used by every image-button widget: color, row, steering, logo presets and
   image_button custom fields. Classic image-swatch grid: fixed column count
   per field, 10px gutters, image fills the cell, label underneath, no border
   until selected, selected = filled with the accent color.
   --vs-cols   : columns per row (desktop). Set per field in Fields Library.
   --vs-cols-m : columns per row on mobile (≤768px); falls back to --vs-cols.
   --vs-col-w  : "Fixed" image width — omit for "Flexible" (default), where the
                 N columns share the row width equally. */

.vs-swatch-grid {
  display: grid;
  grid-template-columns: repeat(var(--vs-cols, 3), var(--vs-col-w, minmax(0, 1fr)));
  gap: 10px;
}
@media (max-width: 768px) {
  .vs-swatch-grid { grid-template-columns: repeat(var(--vs-cols-m, var(--vs-cols, 3)), var(--vs-col-w, minmax(0, 1fr))); }
}

.vs-swatch-grid .vs-swatch,
.vs-swatch-grid .vs-swatch:hover,
.vs-swatch-grid .vs-swatch:focus {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  color: inherit;
  text-align: center;
  line-height: inherit;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: none;
  -webkit-appearance: none;
  appearance: none;
}
.vs-swatch-grid .vs-swatch[hidden] { display: none; }
.vs-swatch-grid .vs-swatch:focus-visible {
  outline: 2px solid var(--vs-accent);
  outline-offset: 2px;
}
.vs-swatch-grid .vs-swatch img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0;
  background: none;
  vertical-align: bottom;
}
.vs-swatch-grid .vs-swatch .vs-swatch-label {
  display: block;
  padding: 4px;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.3;
  color: inherit;
}
.vs-swatch-grid .vs-swatch .vs-swatch-price {
  display: inline;
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  color: inherit;
  opacity: .7;
}
.vs-swatch-grid .vs-swatch .vs-swatch-desc {
  display: block;
  padding: 0 4px 4px;
  font-size: .875em;
  color: inherit;
  opacity: .75;
}
.vs-swatch-grid .vs-swatch.is-selected,
.vs-swatch-grid .vs-swatch[aria-pressed="true"] {
  border-color: var(--vs-accent);
  background: var(--vs-accent);
  color: #fff;
}
.vs-swatch-grid .vs-swatch.is-selected .vs-swatch-label,
.vs-swatch-grid .vs-swatch.is-selected .vs-swatch-desc {
  color: #fff;
  font-weight: 400;
}
.vs-swatch-grid .vs-swatch.is-selected .vs-swatch-price {
  color: #fff;
  opacity: .85;
}
/* Phones: swatch text is a touch smaller so 3-up labels stay on ≤2 lines */
@media (max-width: 520px) {
  .vs-swatch-grid .vs-swatch .vs-swatch-label { font-size: .875em; }
}

/* ── Logo: preset grid + upload form ─────────────────────────────────────── */

.vs-logo-type-row { margin-bottom: 1em; }
.vs-logo-presets-area { margin-bottom: 1em; }

/* Logo: style switcher — one scrollable row of small pills (10+ styles stay on one line) */
.vs-logo-styles {
  margin: 18px 0 14px;
  padding-top: 16px;
  border-top: 1px solid var(--vs-line-2);
}
.vs-logo-style-nav { position: relative; }
.vs-logo-style-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 1px 4px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.vs-logo-style-row::-webkit-scrollbar { display: none; }
.vs-logo-style-nav.has-next .vs-logo-style-row {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.vs-logo-style-nav.has-prev .vs-logo-style-row {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to left, #000 calc(100% - 44px), transparent);
}
.vs-logo-style-nav.has-prev.has-next .vs-logo-style-row {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.vs-logo-wrap .vs-logo-style-row .vs-logo-style-btn {
  flex: none;
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--vs-line);
  border-radius: 999px;
  background: #fff;
  color: var(--vs-ink);
  font-size: .88em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.vs-logo-wrap .vs-logo-style-row .vs-logo-style-btn:hover { border-color: var(--vs-ink); background: #fff; color: var(--vs-ink); }
.vs-logo-wrap .vs-logo-style-row .vs-logo-style-btn.is-selected,
.vs-logo-wrap .vs-logo-style-row .vs-logo-style-btn.is-selected:hover {
  border-color: var(--vs-ink);
  background: var(--vs-ink);
  color: #fff;
  font-weight: 600;
}
.vs-logo-wrap .vs-logo-style-row .vs-logo-style-btn:focus-visible,
.vs-logo-wrap .vs-logo-style-nav .vs-logo-style-arrow:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; }
.vs-logo-wrap .vs-logo-style-nav .vs-logo-style-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -1px 0 0;
  padding: 0 0 2px;
  border: 1px solid var(--vs-line);
  border-radius: 50%;
  background: #fff;
  color: var(--vs-ink);
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
  cursor: pointer;
}
.vs-logo-style-arrow.is-prev { left: 0; }
.vs-logo-style-arrow.is-next { right: 0; }
/* Touch screens swipe; the arrows are for mouse users */
@media (hover: none) { .vs-logo-style-arrow { display: none !important; } }

.vs-logo-upload-ui {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}
.vs-logo-describe-section,
.vs-logo-upload-section { margin: 0; }

.vs-logo-desc-ta {
  display: block;
  width: 100%;
  min-height: 120px;
  margin: 0;
  padding: .7em .75em;
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius);
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--vs-ink);
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
}
.vs-logo-desc-ta:focus { outline: none; border-color: var(--vs-ink); box-shadow: none; }

/* "— OR —" as on the reference page: light, centered, roomy */
.vs-logo-or-divider {
  margin: 1.25em 0;
  text-align: center;
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.3;
  color: var(--vs-ink);
}
.vs-logo-or-divider::before,
.vs-logo-or-divider::after { content: none; }

.vs-logo-dropzone {
  display: flex;
  flex-flow: column-reverse;
  width: 100%;
  padding: 20px;
  background: transparent;
  border: 2px dashed currentColor;
  border-radius: 6px;
  color: var(--vs-ink);
  text-align: center;
  cursor: pointer;
}
.vs-logo-dropzone p { margin: 0; padding: 10px 0; }
.vs-logo-dropzone:focus-visible,
.vs-logo-dropzone.is-dragover { border-style: solid; opacity: .7; outline: none; }

.vs-logo-browse-btn {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.vs-logo-file-name {
  display: block;
  padding-bottom: 6px;
  font-weight: 700;
  word-break: break-all;
}
.vs-logo-drop-hint {
  margin: 6px 0 0;
  font-size: .8125em;
  color: var(--vs-muted);
}
/* Logo upload: collapsible "Where We Embroider" / "How It Works" */
.vs-logo-info {
  margin: 1.25em 0 0;
  border-top: 1px solid var(--vs-line-2);
}
.vs-logo-info-item { border-bottom: 1px solid var(--vs-line-2); }
.vs-logo-info-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 2px;
  list-style: none;
  cursor: pointer;
  font-size: .95em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vs-ink);
}
.vs-logo-info-item > summary::-webkit-details-marker { display: none; }
.vs-logo-info-item > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 4px 0 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.vs-logo-info-item[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.vs-logo-info-item > summary:focus-visible { outline: 2px solid var(--vs-accent); outline-offset: 2px; }
.vs-logo-info-body {
  padding: 0 2px 16px;
  font-size: .92em;
  line-height: 1.65;
  color: #333;
}
.vs-logo-info-body p { margin: 0 0 10px; }
.vs-logo-info-body > :last-child { margin-bottom: 0; }
.vs-logo-info-body strong { font-weight: 700; color: var(--vs-ink); }
.vs-logo-info-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: vs-step;
}
.vs-logo-info-body ol li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 32px;
  counter-increment: vs-step;
}
.vs-logo-info-body ol li:last-child { margin-bottom: 0; }
.vs-logo-info-body ol li::before {
  content: counter(vs-step);
  position: absolute;
  left: 0;
  top: .15em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vs-ink);
  color: #fff;
  font-size: .8em;
  font-weight: 700;
  line-height: 1;
}
/* Plain bullet lists in the editable logo info content */
.vs-logo-info-body ul { margin: 0 0 10px 1.2em; padding: 0; list-style: disc; }
.vs-logo-info-body ul li { margin: 0 0 6px; }

/* ── Option cards (Top Layer material, Trunk protection) ─────────────────── */

.vs-tl-intro { margin: 0 0 .75em; font-size: .875em; color: var(--vs-muted); }

.vs-tl-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: .75em;
}

.vs-tl-opt {
  display: flex;
  align-items: flex-start;
  gap: .75em;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  transition: none;
}
.vs-tl-opt.is-selected {
  border-color: var(--vs-accent);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--vs-accent);
}

.vs-tl-opt-dot {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: .15em;
  border: 2px solid var(--vs-line);
  border-radius: 50%;
  background: #fff;
}
.vs-tl-opt.is-selected .vs-tl-opt-dot { border-color: var(--vs-accent); border-width: 6px; }

.vs-tl-opt-main { display: flex; flex: 1; flex-direction: column; gap: .15em; min-width: 0; }
.vs-tl-opt-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25em .75em;
  font-weight: 700;
  color: var(--vs-ink);
}
.vs-tl-opt-price { white-space: nowrap; }
.vs-tl-opt-sub   { font-size: .875em; line-height: 1.45; color: var(--vs-muted); }
.vs-tl-opt-best  { font-size: .8125em; color: var(--vs-muted); }

.vs-tl-video-link {
  display: inline-block;
  margin-bottom: .75em;
  font-size: .875em;
  color: var(--vs-ink);
  text-decoration: underline;
}
.vs-tl-sub-label { margin-top: 1em; }

.vs-tl-preview,
.vs-trunk-preview { margin-top: .875em; }
.vs-tl-preview-img,
.vs-trunk-preview-img {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: 0;
}

/* ── Wizard ──────────────────────────────────────────────────────────────── */

.vs-wizard { margin: 1em 0 1.5em; }

/* Step tabs: plain text with an underline for the current step; scrolls
   horizontally on narrow screens instead of wrapping. */
.vs-wiz-nav {
  display: flex;
  gap: 0;
  margin: 0 0 1.5em;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--vs-line-2);
  border-radius: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vs-wiz-nav::-webkit-scrollbar { display: none; }

.vs-wiz-nav-step {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 0 -1px;
  padding: .6em .9em;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: .875em;
  font-weight: 700;
  line-height: 1.2;
  color: #aaa;
  white-space: nowrap;
  cursor: default;
  transition: color .1s, border-color .1s;
}
.vs-wiz-nav-step:first-child { padding-left: 0; }
.vs-wiz-step-num { display: none; }
/* Three states at a glance: upcoming = light grey · current = black + underline ·
   done = black with an accent check mark, clickable to go back */
.vs-wiz-nav-step { font-weight: 400; color: #aaa; }
.vs-wiz-nav-step.is-done { color: var(--vs-ink); cursor: pointer; }
.vs-wiz-nav-step.is-done::before {
  content: "\2713";
  margin-right: .4em;
  font-weight: 700;
  color: var(--vs-accent);
}
.vs-wiz-nav-step.is-done:hover { background: none; text-decoration: underline; }
.vs-wiz-nav-step.is-current {
  color: var(--vs-ink);
  font-weight: 700;
  background: none;
  border-bottom-color: var(--vs-ink);
  box-shadow: none;
}
.vs-wiz-nav-step:disabled { opacity: 1; cursor: default; }

/* Step panels; the title repeats the active tab so it is for screen readers only */
.vs-wiz-step { display: none; }
.vs-wiz-step.vs-wiz-step-active { display: block; }
.vs-wiz-step-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Footer: Back (outline) + Next / Add to Cart (black). Full-width stack on phones. */
.vs-wiz-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid var(--vs-line-2);
}
/* Footer buttons (scoped under .vs-wizard so they outrank the theme's .button rules) follow the theme's (Flatsome) button metrics: .97em bold
   uppercase, .03em tracking, 2.4em line-height, 2.5em min-height, 0 1.2em
   padding. Only the colours are ours: Back outlined, Next / Add to Cart black. */
.vs-wizard .vs-wiz-btn,
.vs-wizard .vs-wiz-btn:hover,
.vs-wizard .vs-wiz-btn:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 2.5em;
  min-width: 8em;
  padding: 0 1.2em;
  border: 1px solid var(--vs-cta);
  border-radius: var(--vs-radius);
  box-shadow: none;
  font-size: .97em;
  font-weight: bolder;
  letter-spacing: .03em;
  line-height: 2.4em;
  text-transform: uppercase;
  text-shadow: none;
  cursor: pointer;
  opacity: 1;
  transition: background .15s, color .15s, opacity .15s;
}
.vs-wizard .vs-wiz-next,
.vs-wizard .vs-wiz-submit {
  flex: 1 1 auto;
  margin-left: auto;
  background: var(--vs-cta);
  color: #fff;
}
.vs-wizard .vs-wiz-next:hover,
.vs-wizard .vs-wiz-submit:hover,
.vs-wizard .vs-wiz-next:focus,
.vs-wizard .vs-wiz-submit:focus { background: #000; color: #fff; }
.vs-wizard .vs-wiz-back,
.vs-wizard .vs-wiz-back:focus {
  flex: 0 0 auto;
  background: #fff;
  color: var(--vs-ink);
}
.vs-wizard .vs-wiz-back:hover { background: #f5f5f5; color: var(--vs-ink); }
/* Greyed-out Next: step not complete yet. Still clickable – it highlights the missing field. */
.vs-wizard .vs-wiz-next.is-disabled,
.vs-wizard .vs-wiz-next.is-disabled:hover,
.vs-wizard .vs-wiz-next.is-disabled:focus {
  background: #c8c8c8;
  border-color: #c8c8c8;
  color: #fff;
  cursor: not-allowed;
}
@media (min-width: 640px) {
  .vs-wiz-next,
  .vs-wiz-submit { flex: 0 0 auto; }
}

/* Hide WC add-to-cart when wizard is active */
.vs-wiz-form .single_add_to_cart_button { display: none !important; }

/* ── Chosen vehicle: "2020 BMW M4  [✎ Edit]" ─────────────────────────────── */

.vs-vehicle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 2.75em;
  padding: 0 0 0 .75em;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius);
  background: #fff;
}
.vs-vehicle-summary-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--vs-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vs-vehicle-edit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .35em;
  align-self: stretch;
  margin: 0;
  padding: 0 .9em;
  background: none;
  border: 0;
  border-left: 1px solid var(--vs-line);
  border-radius: 0;
  font: inherit;
  font-size: .875em;
  font-weight: 700;
  color: var(--vs-ink);
  cursor: pointer;
}
.vs-vehicle-edit svg { display: block; }

/* ── Progressive reveal inside a step ────────────────────────────────────── */

.vs-wiz-step .vs-gated { display: none !important; }
.vs-reveal { animation: vs-reveal .25s ease; }
@keyframes vs-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-reveal { animation: none; }
}

/* ── Review step ─────────────────────────────────────────────────────────── */

.vs-wiz-review-intro {
  margin: 0 0 1em;
  font-size: .9em;
  color: var(--vs-muted);
}
.vs-review-section {
  padding: .9em 0;
  border-top: 1px solid var(--vs-line-2);
}
.vs-review-section:last-child { border-bottom: 1px solid var(--vs-line-2); }
.vs-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: .5em;
}
.vs-review-title {
  margin: 0;
  font-size: .9em;
  font-weight: 700;
  line-height: 1.3;
  color: #222;
}
.vs-review-edit {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .875em;
  font-weight: 700;
  color: var(--vs-ink);
  text-decoration: underline;
  cursor: pointer;
}
.vs-review-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: .4em 1em;
  margin: 0;
}
.vs-review-rows dt {
  margin: 0;
  font-weight: 400;
  color: var(--vs-muted);
}
.vs-review-rows dd {
  margin: 0;
  font-weight: 700;
  color: var(--vs-ink);
  overflow-wrap: anywhere;
}
.vs-review-rows dd .vs-price-hint { font-weight: 400; }
.vs-review-empty { grid-column: 1 / -1; font-weight: 400 !important; color: var(--vs-muted) !important; }

.vs-review-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: .9em 0;
  font-weight: 700;
  color: var(--vs-ink);
}
.vs-review-total-value { font-size: 1.125em; }

/* ── Field help link + popup ─────────────────────────────────────────────── */

/* A quiet, optional hint: small grey "i" icon + small grey text, tucked right
   under the heading. No underline / dark colour so it never competes with the
   options themselves. */
.vs-help-line {
  margin: -6px 0 10px;
  line-height: 1.3;
}
.vs-help-link {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .8125em;
  font-weight: 400;
  color: #8a8a8a;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}
.vs-help-icon { flex: 0 0 auto; display: block; opacity: .85; }
.vs-help-text { border-bottom: 1px dotted #b5b5b5; }

.vs-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .55);
  -webkit-overflow-scrolling: touch;
}
.vs-help-overlay[hidden] { display: none; }
html.vs-help-open { overflow: hidden; }

.vs-help-popup {
  --vs-ink: #111; --vs-muted: #666; --vs-line-2: #e5e5e5; --vs-accent: #007cba; --vs-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  max-width: 650px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--vs-ink);
  border-radius: var(--vs-radius);
  overflow: hidden;
  animation: vs-reveal .2s ease;
}
.vs-help-popup[hidden] { display: none; }
.vs-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vs-line-2);
}
.vs-help-title {
  margin: 0;
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--vs-ink);
}
.vs-help-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: -6px -8px -6px 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  font: inherit;
  font-size: 1.1em;
  line-height: 1;
  color: var(--vs-ink);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  min-height: 0;
}
.vs-help-close:hover { background: #f2f2f2; }
.vs-help-body {
  padding: 20px;
  overflow: auto;
  line-height: 1.6;
  -webkit-overflow-scrolling: touch;
}
.vs-help-body > :first-child { margin-top: 0; }
.vs-help-body > :last-child  { margin-bottom: 0; }
.vs-help-body img { max-width: 100%; height: auto; }
.vs-help-body table { width: 100%; border-collapse: collapse; font-size: .9375em; }
.vs-help-body th,
.vs-help-body td { padding: .5em .6em; border-bottom: 1px solid var(--vs-line-2); text-align: left; }


/* ── Keep last: the hidden attribute always wins ─────────────────────────── */
.vs-selector-wrap [hidden],
.vs-finder-wrap [hidden],
.vs-banner[hidden],
.vs-results-wrap [hidden],
.vs-wizard [hidden],
.vs-field [hidden],
.vs-fq-wrap [hidden],
.vs-color-wrap [hidden],
.vs-row-wrap[hidden],
.vs-row-wrap [hidden],
.vs-logo-wrap [hidden],
.vs-tl-wrap [hidden],
.vs-trunk-wrap [hidden],
.vs-steering-wrap [hidden],
.vs-custom-field-wrap [hidden] {
  display: none !important;
}