:root {
  color-scheme: dark;

  --background: #080b09;
  --surface: #101511;
  --surface-raised: #151c17;
  --surface-soft: #19211b;
  --border: #29332c;
  --border-bright: #3c4a40;
  --text: #f3f6f3;
  --text-soft: #b8c2ba;
  --text-muted: #87918a;
  --green: #77e38e;
  --green-strong: #4dcc69;
  --green-dark: #122b18;
  --danger: #ff8a8a;
  --shell: 1280px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(77, 204, 105, 0.09),
      transparent 34rem
    ),
    var(--background);

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;
}

a {
  color: inherit;
}

button,
select,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

.shell {
  width: min(
    calc(100% - 40px),
    var(--shell)
  );

  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;

  padding: 10px 14px;

  border-radius: 8px;

  background: var(--green);
  color: #071009;

  font-weight: 800;

  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  border-bottom:
    1px solid var(--border);

  background:
    rgba(8, 11, 9, 0.95);

  backdrop-filter: blur(18px);
}

.header-top {
  min-height: 92px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;

  color: var(--text);
  text-decoration: none;
}

.brand-mark {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(119, 227, 142, 0.55);

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      rgba(119, 227, 142, 0.24),
      rgba(119, 227, 142, 0.06)
    );

  color: var(--green);

  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand-copy {
  display: grid;
  line-height: 1.15;
}

.brand-copy strong {
  font-size: 23px;
  letter-spacing: -0.035em;
}

.brand-copy small {
  margin-top: 6px;

  color: var(--text-muted);

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-nav {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-nav a {
  padding: 9px 13px;

  border:
    1px solid transparent;

  border-radius: 9px;

  color: var(--text-soft);
  text-decoration: none;

  font-size: 14px;
  font-weight: 750;
}

.account-nav a:hover,
.account-nav a:focus-visible {
  border-color:
    var(--border-bright);

  background:
    var(--surface-raised);

  color: var(--text);
}

.account-nav img,
.account-nav [class*="avatar"] {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  object-fit: cover;
}

.main-nav-row {
  border-top:
    1px solid rgba(41, 51, 44, 0.72);

  background:
    rgba(16, 21, 17, 0.8);
}

.main-nav {
  min-height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.main-nav a {
  min-width: 120px;

  padding: 10px 18px;

  border-radius: 9px;

  color: var(--text-soft);
  text-align: center;
  text-decoration: none;

  font-size: 14px;
  font-weight: 800;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current="page"] {
  background:
    var(--surface-soft);

  color: var(--green);
}

.search-hero {
  padding: 72px 0 56px;

  border-bottom:
    1px solid var(--border);
}

.eyebrow {
  margin: 0 0 13px;

  color: var(--green);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.search-hero h1 {
  margin: 0;

  font-size:
    clamp(42px, 6vw, 70px);

  line-height: 1;
  letter-spacing: -0.055em;
}

.search-hero p:last-child {
  max-width: 720px;

  margin: 22px 0 0;

  color: var(--text-soft);

  font-size: 18px;
}

.search-section {
  padding: 28px 0;

  border-bottom:
    1px solid var(--border);

  background: var(--surface);
}

.filters {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(130px, 1fr))
    minmax(250px, 1.6fr);

  gap: 13px;

  padding: 22px;

  border: 1px solid var(--border);
  border-radius: 20px;

  background:
    var(--surface-raised);
}

.filters label {
  min-width: 0;

  display: grid;
  gap: 8px;
}

.filters label > span {
  color: var(--text-muted);

  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filters select,
.filters input {
  width: 100%;
  height: 52px;

  padding: 0 14px;

  border:
    1px solid var(--border-bright);

  border-radius: 11px;

  outline: none;

  background: #0c110d;
  color: var(--text);
}

.filters select:focus,
.filters input:focus {
  border-color:
    rgba(119, 227, 142, 0.76);

  box-shadow:
    0 0 0 3px
    rgba(119, 227, 142, 0.1);
}

.filters select:disabled {
  cursor: not-allowed;

  opacity: 0.5;
}

.search-field {
  grid-column: span 2;
}

.filter-actions {
  grid-column: 1 / -1;

  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.primary-button,
.secondary-button,
.location-button,
.page-button {
  min-height: 45px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 17px;

  border-radius: 10px;

  cursor: pointer;

  font-weight: 850;
}

.primary-button {
  border: 1px solid var(--green);

  background: var(--green);
  color: #071009;
}

.primary-button:hover,
.primary-button:focus-visible {
  background: #8aeda0;
}

.secondary-button,
.location-button,
.page-button {
  border:
    1px solid var(--border-bright);

  background: var(--surface);
  color: var(--text-soft);
}

.secondary-button:hover,
.secondary-button:focus-visible,
.location-button:hover,
.location-button:focus-visible,
.page-button:hover,
.page-button:focus-visible {
  border-color:
    rgba(119, 227, 142, 0.5);

  color: var(--green);
}

.filter-footer {
  min-height: 44px;

  display: flex;
  align-items: center;
  gap: 13px;

  padding: 14px 4px 0;
}

.filter-footer p {
  margin: 0 auto 0 0;

  color: var(--text-muted);

  font-size: 13px;
}

.location-button {
  min-height: 38px;

  padding: 7px 12px;

  font-size: 12px;
}

#locationStatus {
  color: var(--text-muted);

  font-size: 12px;
}

.results-section {
  min-height: 600px;

  padding: 52px 0 86px;
}

.results-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;

  margin-bottom: 24px;
}

.results-toolbar h2 {
  margin: 0;

  font-size:
    clamp(27px, 4vw, 40px);

  letter-spacing: -0.04em;
}

#freshnessLabel {
  margin: 0;

  color: var(--text-muted);

  font-size: 12px;
}

.loading-state,
.empty-state {
  padding: 60px 24px;

  border:
    1px dashed
    var(--border-bright);

  border-radius: 18px;

  color: var(--text-muted);
  text-align: center;
}

.empty-state h3 {
  margin: 0;

  color: var(--text);

  font-size: 24px;
}

.empty-state p {
  margin: 8px 0 0;
}

.vehicle-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 16px;
}

.vehicle-card {
  min-width: 0;
  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: var(--surface);

  transition:
    transform 160ms ease,
    border-color 160ms ease;
}

.vehicle-card:hover {
  transform: translateY(-3px);

  border-color:
    rgba(119, 227, 142, 0.38);
}

.vehicle-image {
  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #172019,
      #0a0e0b
    );
}

.vehicle-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.vehicle-image-fallback {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: var(--text-muted);

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.state-badge {
  position: absolute;
  top: 12px;
  left: 12px;

  padding: 5px 8px;

  border:
    1px solid
    rgba(119, 227, 142, 0.42);

  border-radius: 999px;

  background:
    rgba(7, 16, 9, 0.9);

  color: var(--green);

  font-size: 10px;
  font-weight: 900;
}

.vehicle-card-body {
  padding: 18px;
}

.vehicle-card h3 {
  margin: 0;

  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.vehicle-yard {
  margin: 8px 0 0;

  color: var(--green);

  font-size: 13px;
  font-weight: 750;
}

.vehicle-meta {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 9px 14px;

  margin: 18px 0 0;
}

.vehicle-meta div {
  min-width: 0;
}

.vehicle-meta dt {
  color: var(--text-muted);

  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vehicle-meta dd {
  margin: 3px 0 0;

  overflow: hidden;

  color: var(--text-soft);
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 13px;
}

.vehicle-actions {
  display: flex;
  gap: 9px;

  margin-top: 18px;
}

.vehicle-actions a {
  min-height: 39px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;

  border:
    1px solid var(--border-bright);

  border-radius: 9px;

  color: var(--text-soft);
  text-decoration: none;

  font-size: 12px;
  font-weight: 850;
}

.vehicle-actions a:hover,
.vehicle-actions a:focus-visible {
  border-color:
    rgba(119, 227, 142, 0.55);

  color: var(--green);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;

  margin-top: 34px;
}

.page-button {
  min-width: 42px;
  min-height: 42px;

  padding: 8px 11px;
}

.page-button[aria-current="page"] {
  border-color: var(--green);

  background: var(--green);
  color: #071009;
}

.page-button:disabled {
  cursor: not-allowed;

  opacity: 0.45;
}

.site-footer {
  padding: 36px 0;

  border-top:
    1px solid var(--border);

  background: #060806;
}

.footer-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.footer-layout strong {
  font-size: 19px;
}

.footer-layout p {
  margin: 5px 0 0;

  color: var(--text-muted);

  font-size: 13px;
}

.footer-layout nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px;
}

.footer-layout nav a {
  color: var(--text-muted);
  text-decoration: none;

  font-size: 13px;
  font-weight: 750;
}

.footer-layout nav a:hover,
.footer-layout nav a:focus-visible {
  color: var(--green);
}

@media (max-width: 1240px) {
  .filters {
    grid-template-columns:
      repeat(4, minmax(150px, 1fr));
  }

  .search-field {
    grid-column: span 2;
  }

  .vehicle-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .filters {
    grid-template-columns:
      repeat(2, minmax(140px, 1fr));
  }

  .vehicle-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .results-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .filter-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .shell {
    width: min(
      calc(100% - 26px),
      var(--shell)
    );
  }

  .header-top {
    min-height: auto;

    padding: 17px 0;

    align-items: flex-start;
  }

  .brand-copy small {
    display: none;
  }

  .account-nav {
    max-width: 60%;

    flex-wrap: wrap;
    gap: 3px;
  }

  .account-nav a {
    padding: 7px;

    font-size: 12px;
  }

  .main-nav {
    gap: 4px;
  }

  .main-nav a {
    min-width: 0;
    flex: 1;

    padding-inline: 8px;
  }

  .search-hero {
    padding: 55px 0 44px;
  }

  .filters {
    grid-template-columns: 1fr;

    padding: 16px;
  }

  .search-field {
    grid-column: auto;
  }

  .filter-actions {
    grid-column: auto;

    display: grid;
    grid-template-columns: 1fr;
  }

  .filter-actions button {
    width: 100%;
  }

  .filter-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filter-footer p {
    margin: 0;
  }

  .vehicle-grid {
    grid-template-columns: 1fr;
  }

  .footer-layout {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-layout nav {
    justify-content: flex-start;
  }
}

/* YARDSNIPE VEHICLE ACCOUNT NAV FIX START */

.account-nav > a {
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
}

.account-nav .account-profile-link {
  gap: 9px;

  padding:
    5px
    13px
    5px
    6px;
}

.account-nav .account-avatar {
  position: relative;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  display: grid;
  place-items: center;
  overflow: hidden;

  border:
    1px solid
    rgba(119, 227, 142, 0.48);

  border-radius: 50%;

  background: #122b18;
  color: #77e38e;
}

.account-nav .account-avatar-fallback {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.account-nav .account-avatar img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: none;
  object-fit: cover;

  border-radius: inherit;
}

.account-nav .account-avatar.has-image img {
  display: block;
}

.account-nav
.account-avatar.has-image
.account-avatar-fallback {
  visibility: hidden;
}

.account-nav
.account-profile-link
> span:last-child {
  display: block;

  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .account-nav > a {
    min-height: 40px;
  }

  .account-nav .account-profile-link {
    gap: 6px;

    padding:
      3px
      7px
      3px
      3px;
  }

  .account-nav .account-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}

/* YARDSNIPE VEHICLE ACCOUNT NAV FIX END */

/* YARDSNIPE RELATED PARTS MODAL START */

.vehicle-actions {
  flex-wrap: wrap;
}

.vehicle-actions > a,
.vehicle-actions > button {
  min-height: 48px;
  flex: 1 1 145px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 11px 14px;

  border: 1px solid
    rgba(119, 227, 142, 0.48);
  border-radius: 12px;

  background: transparent;
  color: var(--green);

  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
}

.vehicle-actions > a:hover,
.vehicle-actions > a:focus-visible,
.vehicle-actions > button:hover,
.vehicle-actions > button:focus-visible {
  border-color: var(--green);
  background:
    rgba(119, 227, 142, 0.1);
  color: var(--green);
}

.vehicle-actions
.related-parts-button {
  border-color: var(--green);
  background: var(--green);
  color: #07110b;
}

.vehicle-actions
.related-parts-button:hover,
.vehicle-actions
.related-parts-button:focus-visible {
  background: #96f2a8;
  color: #07110b;
}

body.parts-modal-open {
  overflow: hidden;
}

.parts-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: grid;
  place-items: center;

  padding: 24px;
}

.parts-modal[hidden] {
  display: none;
}

.parts-modal-backdrop {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
  background:
    rgba(2, 8, 5, 0.82);
}

.parts-modal-card {
  position: relative;
  z-index: 1;

  width: min(980px, 100%);
  max-height: min(88vh, 920px);

  overflow: hidden;

  border: 1px solid
    rgba(119, 227, 142, 0.48);
  border-radius: 22px;

  background: #0d1710;
  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.55);
}

.parts-modal-header {
  min-height: 116px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  padding: 24px 26px;

  border-bottom: 1px solid
    rgba(255, 255, 255, 0.09);

  background:
    linear-gradient(
      135deg,
      rgba(119, 227, 142, 0.12),
      rgba(119, 227, 142, 0.025)
    );
}

.parts-modal-header h2 {
  margin: 5px 0 4px;

  font-size:
    clamp(25px, 4vw, 38px);
  line-height: 1;
}

.parts-modal-header .eyebrow {
  margin: 0;
}

.parts-modal-vehicle {
  margin: 0;

  color: var(--text-muted);
  font-weight: 700;
}

.parts-modal-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid
    rgba(255, 255, 255, 0.14);
  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.04);

  color: var(--text);
  font: inherit;
  font-size: 29px;
  line-height: 1;

  cursor: pointer;
}

.parts-modal-close:hover,
.parts-modal-close:focus-visible {
  border-color: var(--green);
  color: var(--green);
}

.parts-modal-body {
  max-height:
    calc(min(88vh, 920px) - 116px);

  overflow-y: auto;

  padding: 24px;
}

.related-parts-loading,
.related-parts-empty {
  padding: 56px 24px;

  border: 1px dashed
    rgba(119, 227, 142, 0.32);
  border-radius: 16px;

  color: var(--text-muted);
  text-align: center;
}

.related-parts-empty h3 {
  margin: 0 0 8px;
  color: var(--text);
}

.related-parts-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 18px;
}

.related-parts-summary p {
  max-width: 650px;

  margin: 5px 0 0;

  color: var(--text-muted);
}

.related-parts-summary
.related-parts-pricing-note {
  color: #a8b7ac;
  font-size: 13px;
}

.parts-list-switch {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 10px 15px;

  border: 1px solid var(--green);
  border-radius: 11px;

  background:
    rgba(119, 227, 142, 0.1);
  color: var(--green);

  font: inherit;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  cursor: pointer;
}

.parts-list-switch:hover,
.parts-list-switch:focus-visible {
  background: var(--green);
  color: #07110b;
}

.related-parts-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.related-part-card {
  min-width: 0;

  padding: 17px;

  border: 1px solid
    rgba(255, 255, 255, 0.09);
  border-radius: 15px;

  background:
    rgba(255, 255, 255, 0.025);
}

.related-part-card-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  margin-bottom: 14px;
}

.related-part-rank {
  min-width: 42px;
  height: 34px;

  display: inline-grid;
  place-items: center;

  padding-inline: 8px;

  border: 1px solid
    rgba(119, 227, 142, 0.46);
  border-radius: 9px;

  background:
    rgba(119, 227, 142, 0.1);

  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.related-part-card h3 {
  margin: 0;

  font-size: 17px;
  line-height: 1.2;
}

.related-part-card-heading p {
  margin: 5px 0 0;

  color: var(--text-muted);
  font-size: 12px;
}

.related-part-metrics {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.related-part-metric {
  min-width: 0;

  padding: 10px;

  border-radius: 10px;

  background:
    rgba(0, 0, 0, 0.2);
}

.related-part-metric span,
.related-part-metric strong {
  display: block;
}

.related-part-metric span {
  margin-bottom: 4px;

  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.related-part-metric strong {
  overflow-wrap: anywhere;

  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.related-part-warning {
  margin: 13px 0;

  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.45;
}

.related-part-detail-link {
  display: inline-flex;

  color: var(--green);
  font-size: 12px;
  font-weight: 850;
  text-decoration: none;
}

.related-part-detail-link:hover,
.related-part-detail-link:focus-visible {
  text-decoration: underline;
}

.related-parts-footer-action {
  display: flex;
  justify-content: center;

  margin-top: 20px;
}

@media (max-width: 760px) {
  .parts-modal {
    padding: 10px;
  }

  .parts-modal-card {
    max-height: 94vh;
    border-radius: 17px;
  }

  .parts-modal-header {
    min-height: 100px;
    padding: 18px;
  }

  .parts-modal-body {
    max-height:
      calc(94vh - 100px);

    padding: 16px;
  }

  .related-parts-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .parts-list-switch {
    width: 100%;
  }

  .related-parts-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .vehicle-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .related-part-metrics {
    grid-template-columns: 1fr;
  }
}

/* YARDSNIPE RELATED PARTS MODAL END */

/* YARDSNIPE SQUARE VEHICLE CARDS START */

/*
 * Small square-style vehicle tiles.
 * Six across on wide desktop, then progressively fewer
 * columns at narrower breakpoints.
 */
.vehicle-grid {
  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  gap: 12px !important;
}

.vehicle-card {
  position: relative !important;

  aspect-ratio: 1 / 1.12 !important;

  display: grid !important;
  grid-template-rows:
    minmax(0, 58%)
    minmax(0, 42%) !important;

  overflow: hidden !important;

  border-radius: 14px !important;
}

/*
 * Every listing keeps a dedicated image section.
 * The image itself uses contain so the whole supplied
 * photograph remains visible instead of being cropped.
 */
.vehicle-image-wrap {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  padding: 5px !important;

  background:
    radial-gradient(
      circle at center,
      rgba(119, 227, 142, 0.08),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      #172019,
      #080c09
    ) !important;
}

.vehicle-image-wrap > img.vehicle-image,
.vehicle-image-wrap > .vehicle-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  display: block !important;

  object-fit: contain !important;
  object-position: center !important;

  border-radius: 9px !important;
}

.vehicle-image-placeholder {
  display: grid !important;
  place-items: center !important;

  padding: 12px !important;

  color: var(--text-muted) !important;

  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  line-height: 1.25 !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/*
 * Compact lower section so the tile stays square instead
 * of stretching into a long card.
 */
.vehicle-card-body {
  min-width: 0 !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  padding: 9px 10px 10px !important;
}

.vehicle-card-body h2 {
  margin: 0 !important;

  overflow: hidden !important;

  font-size: 14px !important;
  line-height: 1.16 !important;
  letter-spacing: -0.025em !important;

  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

.vehicle-card-body .yard-name {
  margin: 4px 0 0 !important;

  overflow: hidden !important;

  color: var(--green) !important;

  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/*
 * Only the two most useful quick facts remain visible on
 * the compact tile. Full details still exist at the yard
 * and in the related-parts workflow.
 */
.vehicle-facts {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 4px 8px !important;

  margin: 6px 0 0 !important;
}

.vehicle-facts > div:nth-child(n + 3) {
  display: none !important;
}

.vehicle-facts dt {
  font-size: 8px !important;
  line-height: 1.1 !important;
}

.vehicle-facts dd {
  margin-top: 1px !important;

  font-size: 10px !important;
  line-height: 1.15 !important;
}

.vehicle-actions {
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 5px !important;

  margin-top: auto !important;
  padding-top: 6px !important;
}

.vehicle-actions > a,
.vehicle-actions > button {
  min-width: 0 !important;
  min-height: 28px !important;

  padding: 4px 5px !important;

  border-radius: 8px !important;

  font-size: 8.5px !important;
  line-height: 1.05 !important;
}

.state-badge {
  top: 7px !important;
  left: 7px !important;

  padding: 3px 6px !important;

  font-size: 8px !important;
}

/*
 * Responsive square-tile counts.
 */
@media (max-width: 1180px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 960px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 10px !important;
  }

  .vehicle-card {
    aspect-ratio: 1 / 1.18 !important;
  }
}

@media (max-width: 360px) {
  .vehicle-grid {
    grid-template-columns: 1fr !important;
  }

  .vehicle-card {
    aspect-ratio: 1 / 1.05 !important;
  }
}

/* YARDSNIPE SQUARE VEHICLE CARDS END */

/* YARDSNIPE VEHICLE RESULTS LAYOUT START */

/*
 * The filters now occupy the space where the large
 * loading/error square previously appeared.
 */
.results-section {
  padding-top: 34px !important;
}

.results-section .search-section {
  margin: 0 0 24px !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;
}

.results-section .search-section > .shell {
  width: 100% !important;
  max-width: none !important;
}

.loading-state {
  min-height: 0 !important;

  margin: 0 0 14px !important;
  padding: 2px 2px 12px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  color: var(--text-muted) !important;
  text-align: left !important;
}

.loading-state[hidden] {
  display: none !important;
}

/*
 * Slightly larger vehicle windows: five across on a
 * wide desktop rather than six.
 */
.vehicle-grid {
  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 15px !important;
}

.vehicle-card {
  aspect-ratio: 1 / 1.16 !important;

  grid-template-rows:
    minmax(0, 59%)
    minmax(0, 41%) !important;

  border-radius: 16px !important;
}

.vehicle-card-body {
  padding: 11px 12px 12px !important;
}

.vehicle-card-body h2,
.vehicle-card-body h3 {
  font-size: 15px !important;
  line-height: 1.18 !important;
}

.vehicle-card-body .yard-name,
.vehicle-card-body .vehicle-yard {
  font-size: 10.5px !important;
}

.vehicle-actions > a,
.vehicle-actions > button {
  min-height: 31px !important;

  padding: 5px 7px !important;

  font-size: 9px !important;
}

/*
 * The pager is always visible below a multi-page result
 * set and wraps cleanly on smaller screens.
 */
.pagination {
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;

  gap: 7px !important;

  margin-top: 30px !important;
}

.page-button {
  min-width: 42px !important;
  min-height: 42px !important;

  padding: 8px 12px !important;

  border: 1px solid var(--border-bright) !important;
  border-radius: 10px !important;

  background: var(--surface) !important;
  color: var(--text-soft) !important;

  cursor: pointer !important;

  font-size: 12px !important;
  font-weight: 850 !important;
}

.page-button:hover,
.page-button:focus-visible {
  border-color:
    rgba(119, 227, 142, 0.65) !important;

  color: var(--green) !important;
}

.page-button[aria-current="page"] {
  border-color: var(--green) !important;

  background: var(--green) !important;
  color: #071009 !important;
}

.page-button:disabled {
  cursor: not-allowed !important;

  opacity: 0.42 !important;
}

.page-spacer {
  padding: 0 4px !important;

  color: var(--text-muted) !important;
}

@media (max-width: 1180px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 650px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .vehicle-card {
    aspect-ratio: 1 / 1.2 !important;
  }
}

@media (max-width: 390px) {
  .vehicle-grid {
    grid-template-columns:
      1fr !important;
  }

  .vehicle-card {
    aspect-ratio: auto !important;
  }
}

/* YARDSNIPE VEHICLE RESULTS LAYOUT END */

/* YARDSNIPE FILTER WRAP V4 START */

/*
 * Balanced desktop layout:
 * six dropdowns on row one, then Sort + a wide Search
 * field + the two action buttons on row two.
 */
#vehicleFilterForm.filters {
  width: 100% !important;

  display: grid !important;
  grid-template-columns:
    repeat(12, minmax(0, 1fr)) !important;

  grid-template-areas:
    "state state make make model model year year yard yard arrival arrival"
    "sort sort sort search search search search search search actions actions actions" !important;

  align-items: end !important;

  gap: 14px !important;

  padding: 22px !important;

  border-radius: 20px !important;

  box-sizing: border-box !important;
}

#vehicleFilterForm > label,
#vehicleFilterForm > .filter-actions {
  min-width: 0 !important;
  width: 100% !important;

  margin: 0 !important;
}

#vehicleFilterForm > label:nth-of-type(1) {
  grid-area: state !important;
}

#vehicleFilterForm > label:nth-of-type(2) {
  grid-area: make !important;
}

#vehicleFilterForm > label:nth-of-type(3) {
  grid-area: model !important;
}

#vehicleFilterForm > label:nth-of-type(4) {
  grid-area: year !important;
}

#vehicleFilterForm > label:nth-of-type(5) {
  grid-area: yard !important;
}

#vehicleFilterForm > label:nth-of-type(6) {
  grid-area: arrival !important;
}

#vehicleFilterForm > label:nth-of-type(7) {
  grid-area: sort !important;
}

#vehicleFilterForm > label.search-field {
  grid-area: search !important;
}

#vehicleFilterForm > .filter-actions {
  grid-area: actions !important;

  display: grid !important;
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr) !important;

  gap: 10px !important;

  align-items: end !important;
}

#vehicleFilterForm label {
  display: grid !important;
  grid-template-rows:
    auto 56px !important;

  gap: 8px !important;
}

#vehicleFilterForm label > span {
  min-height: 16px !important;

  display: flex !important;
  align-items: center !important;

  white-space: nowrap !important;
}

#vehicleFilterForm select,
#vehicleFilterForm input,
#vehicleFilterForm button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 56px !important;
  min-height: 56px !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  border-radius: 13px !important;
}

#vehicleFilterForm .filter-actions button {
  padding-inline: 14px !important;

  white-space: nowrap !important;
}

/*
 * Keep the surrounding filter card snug around its
 * contents instead of leaving a large empty lower area.
 */
.results-section .search-section {
  margin-bottom: 20px !important;
}

.results-section .search-section > .shell {
  padding: 0 !important;
}

.results-section .search-section .filter-footer {
  margin-top: 12px !important;
  padding: 0 4px !important;
}

/*
 * Medium screens: four balanced columns, with Search and
 * actions using two columns each.
 */
@media (max-width: 1220px) {
  #vehicleFilterForm.filters {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    grid-template-areas:
      "state make model year"
      "yard arrival sort sort"
      "search search actions actions" !important;
  }
}

/*
 * Tablets: two columns. Search and actions span the width.
 */
@media (max-width: 760px) {
  #vehicleFilterForm.filters {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-areas:
      "state make"
      "model year"
      "yard arrival"
      "sort sort"
      "search search"
      "actions actions" !important;

    gap: 12px !important;

    padding: 16px !important;
  }
}

/*
 * Phones: one clean vertical stack.
 */
@media (max-width: 480px) {
  #vehicleFilterForm.filters {
    grid-template-columns: 1fr !important;

    grid-template-areas:
      "state"
      "make"
      "model"
      "year"
      "yard"
      "arrival"
      "sort"
      "search"
      "actions" !important;
  }

  #vehicleFilterForm > .filter-actions {
    grid-template-columns: 1fr !important;
  }
}

/* YARDSNIPE FILTER WRAP V4 END */

/* YARDSNIPE VEHICLE PAGE REDESIGN V3 START */

.vehicle-grid {
  display: grid !important;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(315px, 1fr)
    ) !important;
  align-items: stretch;
  gap: 1.3rem !important;
}

.vehicle-card.vehicle-card-redesign {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 480px;
  overflow: hidden;
  border-radius: 1rem;
  cursor: pointer;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.vehicle-card.vehicle-card-redesign:hover,
.vehicle-card.vehicle-card-redesign:focus-visible {
  transform: translateY(-3px);
  outline: none;
}

.vehicle-card-redesign .vehicle-image-wrap {
  position: relative;
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.1);
}

.vehicle-card-redesign .vehicle-image-wrap > img.vehicle-image,
.vehicle-card-redesign .vehicle-image-wrap > .vehicle-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  object-fit: cover;
}

.vehicle-card-redesign .vehicle-image-placeholder {
  display: grid !important;
  place-items: center;
  padding: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.vehicle-card-redesign .vehicle-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.1rem !important;
}

.vehicle-card-redesign .vehicle-card-title {
  display: block !important;
  visibility: visible !important;
  margin: 0 0 1rem !important;
  font-size: 1.25rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.vehicle-card-identity {
  display: grid;
  gap: 0.72rem;
}

.vehicle-card-identity p {
  display: grid;
  gap: 0.17rem;
  margin: 0;
}

.vehicle-card-identity span {
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.065em;
  line-height: 1;
  opacity: 0.65;
  text-transform: uppercase;
}

.vehicle-card-identity strong {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.vehicle-card-identity .vehicle-card-vin {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  letter-spacing: 0.015em;
}

.vehicle-card-open-hint {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.76rem;
  font-weight: 700;
  opacity: 0.68;
}

.vehicle-detail-open {
  overflow: hidden;
}

.vehicle-detail-modal[hidden] {
  display: none !important;
}

.vehicle-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.vehicle-detail-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(5px);
}

.vehicle-detail-dialog {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 1.2rem;
  background: var(--surface, #111713);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
}

.vehicle-detail-close {
  position: sticky;
  z-index: 5;
  top: 0.75rem;
  float: right;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0.75rem 0.75rem -3.35rem 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1;
}

.vehicle-detail-hero {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.95fr)
    minmax(340px, 1.05fr);
  gap: 1.6rem;
  padding: 1.4rem;
}

.vehicle-detail-image-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 0.9rem;
  background: rgba(127, 127, 127, 0.1);
  aspect-ratio: 4 / 3;
}

.vehicle-detail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-detail-image-placeholder {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  padding: 1rem;
  font-weight: 700;
}

.vehicle-detail-summary {
  min-width: 0;
  padding: 0.35rem 0.25rem;
}

.vehicle-detail-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.075em;
  opacity: 0.68;
  text-transform: uppercase;
}

.vehicle-detail-summary h2 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.08;
  text-transform: uppercase;
}

.vehicle-detail-location {
  margin: 0.65rem 0 1.2rem;
  font-size: 1rem;
  font-weight: 700;
  opacity: 0.82;
}

.vehicle-detail-facts {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 0.75rem;
  margin: 0;
}

.vehicle-detail-fact {
  min-width: 0;
  padding: 0.75rem;
  border-radius: 0.65rem;
  background: rgba(127, 127, 127, 0.09);
}

.vehicle-detail-fact dt {
  margin-bottom: 0.22rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  opacity: 0.64;
  text-transform: uppercase;
}

.vehicle-detail-fact dd {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.vehicle-detail-yard-link {
  display: inline-flex;
  margin-top: 1.1rem;
  padding: 0.72rem 1rem;
  border-radius: 0.62rem;
  font-weight: 800;
  text-decoration: none;
}

.vehicle-detail-parts-loading {
  margin: 0 1.4rem 1.4rem;
  padding: 1.25rem;
  border-radius: 0.8rem;
  text-align: center;
}

.vehicle-detail-parts-section {
  padding: 1.4rem;
  border-top: 1px solid rgba(127, 127, 127, 0.22);
}

.vehicle-detail-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vehicle-detail-section-heading h3 {
  margin: 0;
  font-size: 1.35rem;
}

.vehicle-detail-part-count {
  display: inline-grid;
  min-width: 2.2rem;
  min-height: 2.2rem;
  place-items: center;
  border-radius: 999px;
  font-weight: 800;
}

.vehicle-detail-pricing-note {
  margin: -0.35rem 0 1rem;
  font-size: 0.86rem;
  opacity: 0.72;
}

.vehicle-detail-parts-list {
  display: grid;
  gap: 0.9rem;
}

.vehicle-detail-parts-list .related-part-card {
  margin: 0;
}

.vehicle-detail-empty {
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem;
  border-radius: 0.7rem;
  background: rgba(127, 127, 127, 0.08);
}

@media (max-width: 820px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }

  .vehicle-detail-hero {
    grid-template-columns: 1fr;
  }

  .vehicle-detail-image-wrap {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 580px) {
  .vehicle-grid {
    grid-template-columns: 1fr !important;
  }

  .vehicle-card.vehicle-card-redesign {
    min-height: 440px;
  }

  .vehicle-detail-modal {
    padding: 0;
  }

  .vehicle-detail-dialog {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
  }

  .vehicle-detail-hero,
  .vehicle-detail-parts-section {
    padding: 1rem;
  }

  .vehicle-detail-facts {
    grid-template-columns: 1fr;
  }
}

/* YARDSNIPE VEHICLE PAGE REDESIGN V3 END */


/* YARDSNIPE VEHICLE CARD V4 START */

.vehicle-grid {
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(340px, 1fr)
    ) !important;
  gap: 1.35rem !important;
}

.vehicle-card.vehicle-card-v4 {
  min-height: 470px !important;
}

.vehicle-card-primary-heading {
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 1rem 1.1rem;
  border-bottom:
    1px solid
    rgba(127, 127, 127, 0.18);
}

.vehicle-card-v4
.vehicle-card-primary-heading
.vehicle-card-title {
  display: block !important;
  visibility: visible !important;
  margin: 0 !important;
  font-size: 1.28rem !important;
  font-weight: 850 !important;
  line-height: 1.16 !important;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.vehicle-card-v4 .vehicle-image-wrap {
  width: 100%;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(
      145deg,
      rgba(127, 127, 127, 0.13),
      rgba(127, 127, 127, 0.04)
    );
}

.vehicle-card-v4
.vehicle-image-wrap
> img.vehicle-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-card-v4
.vehicle-image-wrap
> [hidden] {
  display: none !important;
}

.vehicle-name-placeholder {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
}

.vehicle-name-placeholder[hidden] {
  display: none !important;
}

.vehicle-name-placeholder span {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.065em;
  opacity: 0.58;
  text-transform: uppercase;
}

.vehicle-name-placeholder strong {
  max-width: 90%;
  font-size: 1.3rem;
  font-weight: 850;
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.vehicle-card-v4 .vehicle-card-body {
  padding: 1.05rem 1.1rem 1.15rem !important;
}

.vehicle-detail-generic-link {
  margin-top: 1.1rem;
}

.vehicle-detail-generic-link
.vehicle-detail-yard-link {
  margin-top: 0;
}

.vehicle-detail-yard-link-secondary {
  opacity: 0.9;
}

.vehicle-detail-generic-link p {
  max-width: 32rem;
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  line-height: 1.35;
  opacity: 0.62;
}

@media (max-width: 760px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}

@media (max-width: 590px) {
  .vehicle-grid {
    grid-template-columns: 1fr !important;
  }

  .vehicle-card.vehicle-card-v4 {
    min-height: auto !important;
  }
}

/* YARDSNIPE VEHICLE CARD V4 END */

/* YARDSNIPE COMPACT VEHICLE CARD V6 START */

.vehicle-grid {
  display: grid !important;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(305px, 1fr)
    ) !important;
  align-items: stretch;
  gap: 1rem !important;
}

.vehicle-card.vehicle-card-redesign,
.vehicle-card.vehicle-card-v4 {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 500px !important;
  overflow: hidden !important;
}

.vehicle-card-primary-heading {
  display: flex !important;
  align-items: center !important;
  min-height: 70px !important;
  padding: 0.85rem 1rem !important;
}

.vehicle-card-v4
.vehicle-card-primary-heading
.vehicle-card-title {
  display: block !important;
  visibility: visible !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: 1.08rem !important;
  font-weight: 850 !important;
  line-height: 1.18 !important;
  opacity: 1 !important;
  overflow-wrap: anywhere !important;
  text-transform: uppercase !important;
}

.vehicle-card-v4 .vehicle-image-wrap {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

.vehicle-card-v4
.vehicle-image-wrap
> img.vehicle-image,
.vehicle-card-v4
.vehicle-image-wrap
> .vehicle-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

.vehicle-card-v4 .vehicle-card-body {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  min-height: 190px !important;
  padding: 0.9rem 1rem 1rem !important;
}

.vehicle-card-v4 .vehicle-card-identity {
  display: grid !important;
  gap: 0.58rem !important;
  width: 100% !important;
}

.vehicle-card-v4 .vehicle-card-identity p {
  display: grid !important;
  gap: 0.12rem !important;
  width: 100% !important;
  margin: 0 !important;
}

.vehicle-card-v4 .vehicle-card-identity span {
  display: block !important;
  visibility: visible !important;
  color: inherit !important;
  font-size: 0.67rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  opacity: 0.65 !important;
  text-transform: uppercase !important;
}

.vehicle-card-v4 .vehicle-card-identity strong {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  max-width: 100% !important;
  color: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  opacity: 1 !important;
  overflow-wrap: anywhere !important;
}

.vehicle-card-v4
.vehicle-card-identity
.vehicle-card-vin {
  font-size: 0.78rem !important;
}

.vehicle-card-v4 .vehicle-card-open-hint {
  display: block !important;
  visibility: visible !important;
  margin-top: auto !important;
  padding-top: 0.75rem !important;
  font-size: 0.7rem !important;
  line-height: 1.25 !important;
  opacity: 0.62 !important;
}

@media (max-width: 1000px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;
  }
}

@media (max-width: 780px) {
  .vehicle-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }
}

@media (max-width: 560px) {
  .vehicle-grid {
    grid-template-columns: 1fr !important;
  }

  .vehicle-card.vehicle-card-redesign,
  .vehicle-card.vehicle-card-v4 {
    min-height: 480px !important;
  }
}

/* YARDSNIPE COMPACT VEHICLE CARD V6 END */


/* YARDSNIPE VEHICLE CARD SPACING V7 START */

.vehicle-grid {
  display: grid !important;
  column-gap: 1.35rem !important;
  row-gap: 1.35rem !important;
  padding: 0.35rem !important;
}

.vehicle-grid > .vehicle-card {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none;
}

.vehicle-grid > .vehicle-card:hover,
.vehicle-grid > .vehicle-card:focus-visible {
  transform: translateY(-2px);
}

@media (max-width: 1000px) {
  .vehicle-grid {
    column-gap: 1rem !important;
    row-gap: 1rem !important;
  }
}

@media (max-width: 560px) {
  .vehicle-grid {
    padding: 0.15rem !important;
    column-gap: 0.85rem !important;
    row-gap: 0.85rem !important;
  }
}

/* YARDSNIPE VEHICLE CARD SPACING V7 END */

/* YARDSNIPE POPUP LISTING BUTTON V1 START */

.vehicle-detail-summary {
  display: flex !important;
  flex-direction: column !important;
}

.vehicle-detail-summary
.vehicle-detail-eyebrow {
  order: 1;
}

.vehicle-detail-summary
#vehicleDetailTitle {
  order: 2;
}

.vehicle-detail-summary
.vehicle-detail-location {
  order: 3;
}

.vehicle-detail-summary
> .vehicle-detail-yard-link,
.vehicle-detail-summary
> .vehicle-detail-generic-link {
  order: 4;
}

.vehicle-detail-summary
.vehicle-detail-facts {
  order: 5;
}

.vehicle-detail-summary
> .vehicle-detail-yard-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0 0 1rem !important;
  padding: 0.8rem 1rem !important;
  border: 1px solid currentColor;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.vehicle-detail-summary
> .vehicle-detail-generic-link {
  width: 100%;
  margin: 0 0 1rem !important;
}

.vehicle-detail-generic-link
.vehicle-detail-yard-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: 0 !important;
  padding: 0.8rem 1rem !important;
  border: 1px solid currentColor;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.vehicle-detail-yard-link:hover,
.vehicle-detail-yard-link:focus-visible {
  transform: translateY(-1px);
  text-decoration: underline;
}

.vehicle-detail-generic-link p {
  margin: 0.45rem 0 0 !important;
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.66;
  text-align: center;
}

/* YARDSNIPE POPUP LISTING BUTTON V1 END */


/* YARDSNIPE_BRANDED_NO_PIC_20260811 */
.vehicle-image-placeholder{grid-template-rows:auto auto auto!important;align-content:center!important;gap:7px!important}.vehicle-placeholder-logo{width:64px!important;height:64px!important;margin:0 auto 2px!important;display:block!important;object-fit:cover!important;border-radius:50%!important;border:2px solid rgba(119,227,142,.45)!important;box-shadow:0 0 18px rgba(119,227,142,.12)!important}.vehicle-placeholder-label{color:var(--green)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em!important}.vehicle-image-placeholder strong{max-width:95%!important;overflow:hidden!important;color:var(--text-muted)!important;font-size:9px!important;line-height:1.2!important;text-overflow:ellipsis!important}


/* YARDSNIPE 60 VEHICLE 3-COLUMN MANUAL ADS 20260812 */
.vehicle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ys-manual-ad{width:min(100%,1180px);box-sizing:border-box;margin:28px auto;padding:14px 18px;overflow:hidden;text-align:center}.ys-manual-ad>.adsbygoogle{display:block;width:100%;min-height:90px}.ys-manual-ad-header{margin-top:24px;margin-bottom:24px}.ys-manual-ad-middle{margin-top:30px;margin-bottom:30px}.ys-manual-ad-footer{margin-top:34px;margin-bottom:24px}@media(max-width:860px){.vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.vehicle-grid{grid-template-columns:1fr}.ys-manual-ad{margin-top:22px;margin-bottom:22px;padding:10px 8px}}


/* YARDSNIPE VEHICLE SHARE BUTTON START */

.vehicle-card-share-button {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 0.65rem;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.vehicle-card-share-button:hover,
.vehicle-card-share-button:focus-visible {
  background: rgba(127, 127, 127, 0.12);
}

.vehicle-card-share-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* YARDSNIPE VEHICLE SHARE BUTTON END */