/* VintageModern Neo Cars Integration
 * Scoped runtime fixes for /collection/, single car pages, and Kermit product embeds.
 */

body.post-type-archive-lte-cars,
body.page-id-collection,
body.single-lte-cars,
body.single-cars {
  background: #fbfaf6 !important;
}

/* Product page black-section fix: the earlier global side-page navigation patch turns
   non-home custom nav dark. Single-car pages need the refined light nav and a clean canvas. */
body.single-lte-cars .site,
body.single-lte-cars .main-wrapper,
body.single-lte-cars .lte-text-page,
body.single-lte-cars .lte-entry-content,
body.single-lte-cars .lte-rentals-full,
body.single-cars .site,
body.single-cars .main-wrapper,
body.single-cars .lte-text-page,
body.single-cars .lte-entry-content {
  background: #fbfaf6 !important;
  box-shadow: none !important;
}

body.single-lte-cars .vm-vehicle-refined .vm-nav,
body.single-cars .vm-vehicle-refined .vm-nav,
body.single-lte-cars .vm-nav.vm-navbar-streamlined,
body.single-cars .vm-nav.vm-navbar-streamlined {
  background: rgba(250,246,237,.86) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  border-bottom: 1px solid rgba(35,31,24,.10) !important;
  box-shadow: 0 12px 34px rgba(32,26,18,.08) !important;
}

body.single-lte-cars .vm-vehicle-refined .vm-nav a,
body.single-cars .vm-vehicle-refined .vm-nav a,
body.single-lte-cars .vm-vehicle-refined .vm-nav .vm-nav-trigger,
body.single-cars .vm-vehicle-refined .vm-nav .vm-nav-trigger,
body.single-lte-cars .vm-vehicle-refined .vm-brand span,
body.single-cars .vm-vehicle-refined .vm-brand span {
  color: #17130f !important;
  text-shadow: none !important;
}

body.single-lte-cars .vm-ref-main,
body.single-cars .vm-ref-main {
  background: #fbfaf6 !important;
  margin: 0 !important;
}

/* Root-cause collection fix: the current Neo collection markup is auto-paragraphed into
   an empty image anchor followed by a second anchor wrapped in <p>. The empty anchor is
   the beige spacer. Hide the empty anchor and normalize the actual image anchor. */
.vm-inventory-refined .vm-ref-card > a.vm-ref-card-image:empty,
.vm-inventory-refined .vm-ref-card > a.vm-ref-card-image:not(:has(img)),
.vm-inventory-refined .vm-ref-card > a.vm-ref-card-image:first-child:not(:has(img)) {
  display: none !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.vm-inventory-refined .vm-ref-card > p:has(> a.vm-ref-card-image),
.vm-inventory-refined .vm-ref-card > p:has(a.vm-ref-card-image img) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}

.vm-inventory-refined .vm-ref-card > p > a.vm-ref-card-image,
.vm-inventory-refined .vm-ref-card a.vm-ref-card-image:has(img) {
  display: block !important;
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #eee5d7 !important;
}

.vm-inventory-refined .vm-ref-card a.vm-ref-card-image:has(img) br {
  display: none !important;
}

.vm-inventory-refined .vm-ref-card a.vm-ref-card-image:has(img) img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

.vm-inventory-refined .vm-ref-card a.vm-ref-card-image:has(img) .vm-ref-img-secondary {
  opacity: 0 !important;
}

.vm-inventory-refined .vm-ref-card:hover a.vm-ref-card-image:has(img) .vm-ref-img-primary {
  opacity: 0 !important;
  transform: scale(1.035) !important;
}

.vm-inventory-refined .vm-ref-card:hover a.vm-ref-card-image:has(img) .vm-ref-img-secondary {
  opacity: 1 !important;
  transform: scale(1.035) !important;
}

/* New product-page Kermit hero. */
.vm-kermit-hero-360 {
  background: radial-gradient(circle at center, #fff 0%, #efe5d7 74%) !important;
  border: 1px solid rgba(42,33,24,.10);
}

.vm-kermit-hero-360 .vm-rotate-hitarea {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: grab;
  display: block;
}

.vm-kermit-hero-360 .vm-rotate-hitarea:active {
  cursor: grabbing;
}

.vm-kermit-hero-360 img,
.vm-main-image.vm-kermit-hero-360 img {
  object-fit: contain !important;
  background: transparent !important;
}

.vm-kermit-hero-360 span {
  text-transform: uppercase;
  letter-spacing: .12em;
}

.vm-hero-360-controls,
.vm-product-rotate-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

.vm-hero-360-controls {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  margin: 0;
}

.vm-hero-360-controls button,
.vm-product-rotate-controls button,
.vm-product-config-stage .vm-view-tab,
.vm-btn-customize {
  border: 1px solid rgba(23,19,15,.82);
  border-radius: 999px;
  background: #fffaf3;
  color: #17130f;
  padding: 10px 14px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.vm-hero-360-controls button {
  width: 42px;
  height: 42px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  background: rgba(255,250,243,.90);
}

.vm-ref-ctas:has(.vm-btn-customize) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.vm-btn-customize {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #17130f;
  color: #fff !important;
}

.vm-kermit-product-interactive {
  background: #f6efe3 !important;
  text-align: center;
}

.vm-product-config-stage {
  margin-top: 30px;
  background: rgba(255,253,248,.94);
  border: 1px solid rgba(42,33,24,.12);
  border-radius: 30px;
  box-shadow: 0 18px 48px rgba(35,27,18,.07);
  padding: 22px;
}

.vm-product-config-toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.vm-product-config-stage .vm-view-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.vm-product-config-stage .vm-view-tab[aria-pressed="true"] {
  background: #17130f;
  color: #fff;
}

.vm-product-config-stage .vm-config-image-wrap {
  position: relative;
  min-height: min(620px, 58vw);
  background: radial-gradient(circle at center, #fff 0%, #f0e5d6 70%);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vm-product-config-stage .vm-config-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 720px;
  object-fit: contain;
}

.vm-product-config-stage .vm-config-loading {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: rgba(24,21,17,.86);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Configurator option-thumbnail repair: Kermit schema often provides nested thumbnail
   fields. JS fills CSS custom-property --vm-option-thumb-url when no <img> was possible. */
.vm-native-configurator-page .vm-option-thumb[style*="--vm-option-thumb-url"] {
  background-image: var(--vm-option-thumb-url), linear-gradient(135deg,#efe2d0,#fff) !important;
  background-size: cover !important;
  background-position: center !important;
}

@media (max-width: 900px) {
  .vm-ref-ctas:has(.vm-btn-customize) {
    grid-template-columns: 1fr !important;
  }
  .vm-product-config-stage .vm-config-image-wrap {
    min-height: 320px;
  }
}