.vehicle-details{
  background: linear-gradient(rgb(25, 25, 25), rgb(3, 3, 3));
  grid-template-rows: auto 1fr auto;
}

.vd-top{
  grid-column: 1 / -1;
  padding-inline: clamp(10px, 4vw, 70px);
  padding-top: clamp(18px, 4vh, 40px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.vd-brand{
  justify-self: center; 
  gap: 10px;
  white-space: nowrap;
}

.vd-brand svg{
  height:25px;
}

.vd-top .vd-left{ justify-self: start; }
.vd-top .vd-right{ justify-self: end; }

.vd-top .vd-left,
.vd-top .vd-right{
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .8;
}

/* Outer shell padding */
.vd-shell{
  grid-column: 1 / -1;
  padding: clamp(18px, 4vw, 70px);
  padding-top: clamp(22px, 3vw, 50px);
}

/* Big card */
.vd-card{
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}

/* Use your existing .grid for layout + add a sensible gap */
.vd-grid{
  gap: 22px;
  padding: 22px;
}

@media (min-width: 900px){
  .vd-grid{ padding: 26px; gap: 26px; }
  .vd-main{ grid-column: span 8; }
  .vd-side{ grid-column: span 4; }
}
@media (max-width: 899px){
  .vd-main, .vd-side{ grid-column: 1 / -1; }
}

/* Gallery */
.vd-gallery{ display:grid; gap: 12px; }

.vd-hero{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  aspect-ratio: 16 / 9;
  min-height: 260px;
}

.vd-hero img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.00);
}

.vd-badges{
  position:absolute;
  left: 14px;
  bottom: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  z-index: 2;
}

.vd-badge{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: .92;
}

.vd-gallery-controls{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 10px;
  z-index: 3;
  pointer-events:none;
}

.vd-gbtn{
  pointer-events:auto;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.6);
  display:grid;
  place-items:center;
  color:#fff;
  cursor:pointer;
  transition: all 0.18s ease-in-out;
}

.vd-gbtn:hover{ background: rgba(255,255,255,0.10); }

.vd-thumbs{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.vd-thumb{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  overflow:hidden;
  padding: 2px;
  width: 120px;
  aspect-ratio: 16/10;
  flex: 0 0 auto;
  cursor:pointer;
  scroll-snap-align: start;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.vd-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  opacity: .8;
  border-radius:12px;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}

.vd-thumb[aria-current="true"]{
  border-color: rgba(255,255,255,0.35);
}

.vd-thumb:hover img{
  opacity: 1;
  transform: scale(1.1);
}

/* Content */
.vd-title{
  margin: 14px 0 10px 0;
  font-size: clamp(1.2rem, 2.2vw, 2.2rem);
  letter-spacing: 0.10em;
}

.vd-sub{ max-width: 70ch; }

.vd-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 14px;
}

.vd-chip{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: .9;
  display:flex;
  align-items:center;
  gap: 10px;
  white-space: nowrap;
}

.vd-chip .dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  opacity: .7;
}

.vd-chip .muted{ opacity: .7; }

.vd-section-title{
  margin: 20px 0 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: .75;
}

.vd-specs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 740px){
  .vd-specs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vd-spec{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 62px;
}

.vd-spec span{
  display:block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 7px;
}

.vd-spec strong{
  display:block;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: .92;
  font-weight: 600;
}

.vd-options{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 6px;
}

.vd-opt{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: .9;
}

/* Sidebar */
@media (min-width: 900px){
  .vd-side{
    position: sticky;
    top: 16px;
    align-self: start;
  }
}

.vd-pricebox{
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow:hidden;
}

.vd-pricehead{
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
}

.vd-pricehead small{
  display:block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 8px;
}

.vd-price{
  font-size: 24px;
  font-family: Raleway, "Helvetica Neue", "Lucida Grande", Arial, Verdana, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 300;
}

.vd-status{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: .88;
  white-space: nowrap;
}

.vd-actions{
  padding: 14px 16px 16px;
  display:grid;
  gap: 10px;
}

.vd-actions .btn{
  padding: 9px 14px;
  letter-spacing: 0.12em;
  width: 100%;
}

/* Primary button as a modifier (no inline) */
.btn.is-primary{
  background: rgba(255,255,255,0.92);
  color: #07070a;
  border-color: rgba(255,255,255,0.92);
}
.btn.is-primary:hover{ background: rgba(255,255,255,1); }

.vd-mini{
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.vd-mini h5{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.18em;
}

.vd-kv{
  display:grid;
  gap: 10px;
}

.vd-kv div{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px dashed rgba(255,255,255,0.10);
  padding-bottom: 8px;
  font-size: 13px;
  opacity: .85;
}

.vd-kv div span{ opacity: .7; }
.vd-kv div strong{
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vd-mini p{ margin: 0; opacity: .75; }

@media (min-width: 900px){
  .fullpage{ scroll-snap-type: none; }
  .page{ scroll-snap-align: start; scroll-snap-stop: always; }
}

@media (max-width: 768px){
    .vd-hero {
        min-height:auto;
    }
    .vd-gbtn,
    .vd-badges {
        display:none;
    }
}