/* ==========================================================================
   De specificatietabellen op een machinepagina.

   Het thema laat de kolombreedte door de browser bepalen: bij de ene machine
   begint de waarde op een derde, bij de andere halverwege. En omdat de cellen
   in het midden uitlijnen, zweeft een kort label naast een waarde van drie
   regels. Hier ligt de indeling vast en beginnen label en waarde op dezelfde
   regel, op elke machinepagina hetzelfde.
   ========================================================================== */

section.product .product-specifications table,
section.product .product-header table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

section.product .product-specifications table td,
section.product .product-specifications table th,
section.product .product-header table td,
section.product .product-header table th {
	padding: 9px 0;
	/* Bovenaan uitlijnen: het label hoort bij de eerste regel van de waarde. */
	vertical-align: top;
	text-align: left;
	line-height: 1.4;
}

/* De labelkolom: vaste breedte, rustig van kleur. */
section.product .product-specifications table td,
section.product .product-header table td {
	width: 38%;
	padding-right: 16px;
	font-weight: 400;
	color: rgba(0, 57, 77, 0.6);
	hyphens: auto;
}

/* De waardekolom. */
section.product .product-specifications table th {
	font-weight: 700;
	color: #00394d;
}

/* Een fijne lijn tussen de regels, zodat elk paar bij elkaar hoort. */
section.product .product-specifications table tr + tr td,
section.product .product-specifications table tr + tr th,
section.product .product-header table tr + tr td,
section.product .product-header table tr + tr th {
	border-top: 1px solid rgba(0, 57, 77, 0.1);
}

section.product .product-specifications table tr:first-child td,
section.product .product-specifications table tr:first-child th {
	padding-top: 0;
}

section.product .product-specifications table tr:last-child td,
section.product .product-specifications table tr:last-child th {
	padding-bottom: 0;
}

/* Het blok zelf iets ruimer, zodat de tabel lucht houdt. */
section.product .product-specifications {
	padding: 24px 26px;
}

section.product .product-specifications h3 {
	margin-bottom: 12px;
}

section.product .product-specifications hr {
	margin: 0 0 16px;
	border: 0;
	border-top: 1px solid rgba(0, 57, 77, 0.12);
}

/* --------------------------------------------------------------------------
   Telefoon

   Eerder stond hier het label boven de waarde. Dat werkte wel, maar het maakte
   de lijst twee keer zo lang en het las als een opsomming in plaats van als een
   specificatieblad. Nu blijft het een tabel: een raster met het label links op
   een vaste breedte en de waarde ernaast. Een lange waarde loopt door binnen
   zijn eigen kolom, dus "Dewatering roller after the wash tanks" komt niet meer
   in de knoop met het label ernaast.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	section.product .product-specifications {
		padding: 18px 18px 8px;
	}

	section.product .product-specifications h3 {
		margin-bottom: 2px;
		font-size: 1.2rem;
	}

	section.product .product-specifications hr {
		display: none;
	}

	section.product .product-specifications table,
	section.product .product-specifications table tbody {
		display: block;
	}

	section.product .product-specifications table tr {
		display: grid;
		grid-template-columns: 40% minmax(0, 1fr);
		gap: 0 14px;
		align-items: baseline;
		padding: 11px 0;
	}

	section.product .product-specifications table tr + tr {
		border-top: 1px solid rgba(0, 57, 77, 0.12);
	}

	section.product .product-specifications table td,
	section.product .product-specifications table th,
	section.product .product-specifications table tr + tr td,
	section.product .product-specifications table tr + tr th {
		display: block;
		width: auto;
		padding: 0;
		border: 0;
		text-align: left;
		hyphens: none;
		-webkit-hyphens: none;
		overflow-wrap: break-word;
	}

	section.product .product-specifications table td {
		font-size: 0.82rem;
		line-height: 1.35;
		color: rgba(0, 57, 77, 0.6);
	}

	section.product .product-specifications table th {
		font-size: 0.92rem;
		font-weight: 700;
		line-height: 1.35;
		color: #00394d;
	}

	/* Het blokje bovenaan houdt twee kolommen: die labels zijn kort. */
	section.product .product-header table td {
		width: 40%;
		padding-right: 12px;
		font-size: 0.9rem;
	}
}