/* === Vignettes à gauche — compatible veh1.html et pages classiques (CSS only) === */

/* 0) Taille/Style des vignettes (valable pour les deux variantes) */
body.com_vikrentcar .car_moreimages img,
body.com_vikrentcar .cardetails_moreimages img{
  display:block !important;
  width:72px !important;
  height:auto !important;
  border:1px solid #ddd !important;
  border-radius:6px !important;
}

/* 1) Fallback universel : arracher les vignettes à gauche en float */
body.com_vikrentcar .car_moreimages,
body.com_vikrentcar .cardetails_moreimages{
  float:left !important;
  width:110px !important;
  margin:0 1rem 1rem 0 !important;
}

/* 2) Mise en page propre en GRILLE si le parent contient thumbs + image principale */

/* --- Variante veh1.html --- */
body.com_vikrentcar *:has(> .car_moreimages):has(> .vrc-showprc-right.car_img_box),
body.com_vikrentcar *:has(> .car_moreimages):has(> .car_img_box){
  display:grid !important;
  grid-template-columns:110px 1fr !important; /* vignettes | image principale */
  gap:1rem !important;
  align-items:start !important;
  clear:both !important;
}
body.com_vikrentcar *:has(> .car_moreimages):has(> .vrc-showprc-right.car_img_box) > .car_moreimages,
body.com_vikrentcar *:has(> .car_moreimages):has(> .car_img_box) > .car_moreimages{
  grid-column:1 !important;
  float:none !important; /* la grille prend le relais */
}
body.com_vikrentcar *:has(> .car_moreimages):has(> .vrc-showprc-right.car_img_box) > .vrc-showprc-right.car_img_box,
body.com_vikrentcar *:has(> .car_moreimages):has(> .car_img_box) > .car_img_box{
  grid-column:2 !important;
  min-width:0 !important;
  overflow:visible !important;
}

/* --- Variante pages classiques --- */
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .cardetails_mainimage),
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-car-image-main),
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-gallery-main){
  display:grid !important;
  grid-template-columns:110px 1fr !important;
  gap:1rem !important;
  align-items:start !important;
  clear:both !important;
}
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .cardetails_mainimage) > .cardetails_moreimages,
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-car-image-main) > .cardetails_moreimages,
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-gallery-main) > .cardetails_moreimages{
  grid-column:1 !important;
  float:none !important;
}
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .cardetails_mainimage) > .cardetails_mainimage,
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-car-image-main) > .vrc-car-image-main,
body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-gallery-main) > .vrc-gallery-main{
  grid-column:2 !important;
  min-width:0 !important;
  overflow:visible !important;
}

/* 3) Mobile : repasser sous l’image en ligne */
@media (max-width:768px){
  body.com_vikrentcar .car_moreimages,
  body.com_vikrentcar .cardetails_moreimages{
    float:none !important;
    width:auto !important;
    margin:.5rem 0 0 0 !important;
    display:flex !important;
    gap:.5rem !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  body.com_vikrentcar .car_moreimages img,
  body.com_vikrentcar .cardetails_moreimages img{
    width:64px !important;
  }

  body.com_vikrentcar *:has(> .car_moreimages):has(> .vrc-showprc-right.car_img_box),
  body.com_vikrentcar *:has(> .car_moreimages):has(> .car_img_box),
  body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .cardetails_mainimage),
  body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-car-image-main),
  body.com_vikrentcar *:has(> .cardetails_moreimages):has(> .vrc-gallery-main){
    display:block !important; /* casser la grille en mobile */
  }
}