/* Voertuig-detailpagina: twee kolommen die in de hero leven.
     Links  (hero-single-product__visual): galerij, daaronder Algemeen / Afmetingen / Chassis /
            Opties en Meer informatie (.vehicle-details--column).
     Rechts (hero-single-product__inner):  info, contactkaart, daaronder video en assen
            (.vehicle-details--side).
   Zo staan de specificaties direct onder de galerij en volgen ze de kolombreedte van de hero.
   Onder 992px klapt alles in één kolom: info, galerij, contact, specificaties, video/assen. */

.vehicle-details { display: grid; gap: 56px; } /* ruimte tussen subvoertuigen bij combinaties */
.vehicle-details__vehicle { display: grid; gap: 24px; }

.vehicle-details__vehicle-title {
	color: var(--dark-blue);
	font-family: var(--font-secondary);
	font-style: italic;
	font-weight: 800;
	font-size: 20px;
	line-height: 1.3;
	margin: 0;
}

/* Cel: stapelt de blokken (Algemeen, Afmetingen, ...) met vaste tussenruimte */
.vehicle-details__cell { display: grid; gap: 44px; align-content: start; min-width: 0; }

/* Ruimte tussen galerij en specificaties (de standaard 76px van de hero is te veel) */
@media (min-width: 768px) {
	.hero-single-product__visual { gap: 40px; }
}

/* Video vult de rechterkolom */
.vehicle-details .video-teaser,
.vehicle-details .video-embed { width: 100%; }
.vehicle-details .video-teaser { max-height: none; }

/* Elk spec-blok een wit blok als achtergrond, net als axles (die heeft z'n eigen paneel).
   Kop (oranje balk + titel) blijft erboven; de inhoud eronder wordt de witte kaart. */
.vehicle-details .product-specifications__group:not(.vehicle-axles) > :not(.product-specifications__label) {
	background: #fff;
	border: 1px solid var(--white-second);
}
/* Tekst/opties krijgen padding; tabellen vullen de kaart randloos (eigen celpadding) */
.vehicle-details .product-specifications__group:not(.vehicle-axles) .product-specifications__text,
.vehicle-details .product-options { padding: 1.25rem 1.5rem; }

/* Tabellen: schoon wit (geen zebra), subtiele scheidingslijnen, gedempte labels + duidelijke waarden */
.vehicle-details .product-specifications__group .product-specifications__row { background: #fff; }
.vehicle-details .product-specifications__group .product-specifications__row:not(:last-child) { border-bottom: 1px solid var(--white-second); }
.vehicle-details .product-specifications__group .product-specifications__cell { padding: 11px 16px; font-size: .9375rem; line-height: 1.5; vertical-align: top; }
.vehicle-details .product-specifications__group .product-specifications__cell--name { min-width: 0; font-weight: 500; color: rgba(var(--darkest-blue-rgb), .65); text-transform: lowercase; }
.vehicle-details .product-specifications__group .product-specifications__cell--name::first-letter { text-transform: uppercase; }
.vehicle-details .product-specifications__group .product-specifications__cell--value { color: var(--darkest-blue); font-weight: 600; }

/* More Information: iets meer regelhoogte */
.vehicle-details .product-specifications__text { line-height: 1.7; }

/* Options: chips naast elkaar i.p.v. een lange verticale lijst */
.product-options { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; list-style: none; }
.product-options__item {
	padding: .375rem .75rem;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--darkest-blue);
	background: var(--white-soft);
	border: 1px solid var(--white-second);
}

/* Contactkaart vult nu de hele sidebar (video verplaatst naar Rij 1);
   rechterkolom (foto + naam) krijgt meer ruimte zodat de naam op 1 regel blijft */
.hero-single-product__aside .manager-card { flex-basis: 100%; }
.hero-single-product__aside .manager-card__visual { flex: 0 0 auto; max-width: none; }
.hero-single-product__aside .manager-card__name { white-space: nowrap; }

/* Iets meer lucht boven de gerelateerde producten op de detailpagina */
.page--single-product .related-products { padding-top: 60px; }

/* Eén kolom: de hero-kolommen worden doorzichtig (display: contents) zodat de volgorde per blok
   te sturen is. De pagina begint met de foto's, dan info, contact, specificaties, video/assen. */
@media (max-width: 991.98px) {
	.hero-single-product__visual { display: contents; }
	.hero-single-product__sliders { order: 0; }
	.hero-single-product__info { order: 1; }
	.hero-single-product__aside { order: 2; }
	.vehicle-details--column { order: 3; }
	.vehicle-details--side { order: 4; }
	.vehicle-details__cell { gap: 32px; }
}