/*
 * Tekniska data – specifikationstabell i butiken.
 *
 * Temaoberoende: alla färger ligger som variabler med fallback via currentColor
 * och neutrala toner, så tabellen ärver temats textfärg och funkar i både ljust
 * och mörkt tema. Vill ett tema styra utseendet räcker det att skriva över
 * variablerna på .wbnt-td.
 */
.wbnt-td {
	--wbnt-td-ram: color-mix(in srgb, currentColor 16%, transparent);
	--wbnt-td-zebra: color-mix(in srgb, currentColor 5%, transparent);
	--wbnt-td-etikett: color-mix(in srgb, currentColor 72%, transparent);
	margin: 0 0 1em;
	overflow-x: auto;
}

.wbnt-td__tabell {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
	line-height: 1.5;
}

.wbnt-td__tabell th,
.wbnt-td__tabell td {
	text-align: left;
	vertical-align: top;
	padding: 0.5em 0.9em;
	border-bottom: 1px solid var(--wbnt-td-ram);
}

.wbnt-td__tabell th {
	width: 38%;
	font-weight: 600;
	color: var(--wbnt-td-etikett);
	white-space: normal;
}

.wbnt-td__tabell tr:nth-child(odd) th,
.wbnt-td__tabell tr:nth-child(odd) td {
	background: var(--wbnt-td-zebra);
}

@media (max-width: 480px) {
	.wbnt-td__tabell,
	.wbnt-td__tabell tbody,
	.wbnt-td__tabell tr,
	.wbnt-td__tabell th,
	.wbnt-td__tabell td {
		display: block;
		width: auto;
	}
	.wbnt-td__tabell th {
		border-bottom: 0;
		padding-bottom: 0;
	}
	.wbnt-td__tabell td {
		padding-top: 0.15em;
	}
}