/* Joa Data Spesifikasjoner – nettsiden. Fargene settes under Produkter → Spesifikasjoner → Innstillinger. */

:root {
	--jds-gruppe-bg: #1b3f8b;
	--jds-gruppe-tekst: #fff;
	--jds-kant: #dfe3ea;
	--jds-etikett: 35%;
}

/* ---------- Seksjonen ---------- */
.jds-spes {
	clear: both;
	margin: 2em 0;
	border-top: 1px solid var(--jds-kant);
}
.jds-detaljer > summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 0;
	cursor: pointer;
}
.jds-detaljer > summary::-webkit-details-marker { display: none; }
.jds-tittel {
	margin: 0 !important;
	font-size: 1.6em;
	line-height: 1.2;
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 2px;
}
.jds-pil {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-right: 6px;
	border-right: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg) translate(-3px, -3px);
	transition: transform .2s;
}
.jds-detaljer[open] > summary .jds-pil { transform: rotate(-135deg) translate(-3px, -3px); }
.jds-detaljer > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.jds-grupper { padding-bottom: .5em; }

.jds-tabell {
	width: 100%;
	margin: 0 0 1.5em !important;
	border-collapse: collapse !important;
	border-spacing: 0;
	table-layout: fixed;
	border: 0 !important;
	font-size: 1em;
}
.jds-tabell thead th {
	background: var(--jds-gruppe-bg) !important;
	color: var(--jds-gruppe-tekst) !important;
	text-align: left;
	font-weight: 700;
	font-size: 1.1em;
	padding: .9em 1.1em !important;
	border: 1px solid var(--jds-gruppe-bg) !important;
	border-radius: 4px 4px 0 0;
}
.jds-tabell tbody th,
.jds-tabell tbody td {
	padding: .9em 1.1em !important;
	border: 1px solid var(--jds-kant) !important;
	text-align: left;
	vertical-align: middle;
	background: #fff;
	color: inherit;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.jds-tabell tbody th {
	width: var(--jds-etikett);
	font-weight: 400;
}
.jds-tom { opacity: .5; }
.jds-i-fane .jds-tabell:last-child { margin-bottom: 0 !important; }

@media (max-width: 600px) {
	.jds-tabell tbody th { width: 45%; }
	.jds-tabell tbody th,
	.jds-tabell tbody td { padding: .75em .8em !important; }
}

/* ---------- Hovedpunkter ved prisen ---------- */
.jds-hovedpunkter {
	margin: 0 0 .4em !important;
	padding: 0 0 0 1.2em !important;
	list-style: disc;
}
.jds-hovedpunkter li { margin: .15em 0; }
.jds-hp-navn { opacity: .75; }
.jds-se-alle { display: inline-block; margin: 0 0 1.2em; font-size: .92em; }

/* ---------- Sammenlign-knapp ---------- */
.jds-sml-knapp {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin: .5em 0 1em;
	padding: .45em .9em;
	font: inherit;
	font-size: .92em;
	color: inherit;
	background: transparent;
	border: 1px solid var(--jds-kant);
	border-radius: 4px;
	cursor: pointer;
}
.jds-sml-knapp:hover { border-color: var(--jds-gruppe-bg); }
.jds-sml-knapp[aria-pressed="true"] {
	background: var(--jds-gruppe-bg);
	border-color: var(--jds-gruppe-bg);
	color: var(--jds-gruppe-tekst);
}
.jds-sml-knapp.jds-sml-liten { margin: .5em 0 0; padding: .3em .7em; font-size: .85em; }
.jds-sml-ikon { font-size: 1.1em; line-height: 1; }

/* ---------- Linjen nederst ---------- */
.jds-sml-linje {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 9999;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(100vw - 32px);
	padding: 10px 12px 10px 16px;
	background: #fff;
	color: #1e1e1e;
	border: 1px solid var(--jds-kant);
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
	font-size: 14px;
}
.jds-sml-linje[hidden] { display: none; }
.jds-sml-linje-produkter { display: flex; gap: 8px; overflow-x: auto; }
.jds-sml-linje-produkt { position: relative; flex: 0 0 auto; }
.jds-sml-linje-produkt img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: contain;
	background: #f6f7f7;
	border: 1px solid var(--jds-kant);
	border-radius: 6px;
}
.jds-sml-linje-produkt button {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 20px;
	height: 20px;
	padding: 0;
	line-height: 18px;
	font-size: 11px;
	color: #fff;
	background: #50575e;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}
.jds-sml-linje-handling { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.jds-sml-linje a.jds-sml-ga {
	display: inline-block;
	padding: .55em 1.1em;
	background: var(--jds-gruppe-bg);
	color: var(--jds-gruppe-tekst);
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
}
.jds-sml-linje a.jds-sml-ga[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.jds-sml-linje .jds-sml-tom-knapp {
	padding: 0;
	font: inherit;
	color: #646970;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}
@media (max-width: 600px) {
	.jds-sml-linje { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; }
	.jds-sml-linje-produkt img { width: 40px; height: 40px; }
}

/* ---------- Sammenligningssiden ---------- */
/* Bryter ut av temaets smale innholdskolonne, så tabellen får plass. */
.jds-sammenlign {
	position: relative;
	left: 50%;
	width: min(1240px, calc(100vw - 32px));
	max-width: none !important;
	margin: 1em 0 2em;
	transform: translateX(-50%);
}
.jds-sammenlign.jds-sml-tom { left: auto; width: auto; transform: none; }
.jds-sml-valg { margin: 0 0 1em; }
.jds-sml-rull { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.jds-sml {
	width: 100%;
	min-width: calc(160px + var(--jds-sml-antall, 2) * 200px);
	border-collapse: collapse !important;
	table-layout: fixed;
	border: 0 !important;
}
.jds-sml th,
.jds-sml td {
	padding: .8em 1em !important;
	border: 1px solid var(--jds-kant) !important;
	text-align: left;
	vertical-align: top;
	background: #fff;
	overflow-wrap: anywhere;
}
.jds-sml tbody th[scope="row"],
.jds-sml .jds-sml-hjorne {
	width: 180px;
	font-weight: 400;
	position: sticky;
	left: 0;
	z-index: 1;
}
.jds-sml .jds-sml-hjorne { border: 0 !important; background: transparent; }
.jds-sml-produkt { position: relative; font-weight: 400; vertical-align: top !important; }
.jds-sml-lenke { display: block; color: inherit; text-decoration: none; }
.jds-sml-bilde { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto .6em; aspect-ratio: 1; object-fit: contain; }
.jds-sml-navn { display: block; font-weight: 700; line-height: 1.3; margin-bottom: .4em; }
.jds-sml-pris { display: block; font-size: 1.15em; font-weight: 700; }
.jds-sml-lager { display: block; font-size: .85em; opacity: .7; margin: .2em 0 .6em; }
.jds-sml-kjop { display: inline-block; }
.jds-sml-fjern {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 24px;
	color: #50575e;
	background: #fff;
	border: 1px solid var(--jds-kant);
	border-radius: 50%;
	cursor: pointer;
	z-index: 2;
}
.jds-sml-gruppe th {
	background: var(--jds-gruppe-bg) !important;
	color: var(--jds-gruppe-tekst) !important;
	font-weight: 700;
	border-color: var(--jds-gruppe-bg) !important;
}
.jds-sml-gruppe th { position: sticky; left: 0; }
.jds-sml.jds-bare-ulike .jds-sml-lik { display: none; }
.jds-sml tr.jds-sml-rad:not(.jds-sml-lik) td { background: #fbfcfe; }
.jds-sml-ingen { text-align: center !important; opacity: .7; }