/* Expowera Lånjämförelse
   Tre stilar på samma HTML: .elj--villkor (standard), .elj--prislapp, .elj--lista.
   Typsnitt ärvs från temat. Färger styrs med variablerna, t.ex.
   .elj { --elj-cta: #1c3d6e; } i temats CSS. */

/* ---------- Gemensam grund ---------- */
.elj {
	--elj-ink: #16233a;
	--elj-muted: #5b6779;
	--elj-line: #dde3ea;
	--elj-wash: #f3efe7;
	--elj-bg: #fcfbf8;
	--elj-ja: #1e7a4f;
	--elj-ja-wash: #e6f3ec;
	--elj-nej: #7b8594;
	--elj-nej-wash: #f1f3f5;
	--elj-cta: #1c3d6e;
	--elj-cta-text: #fff;
	--elj-accent: #1c3d6e;
	--elj-radius: 14px;
	color: var(--elj-ink);
	margin: 1.75em 0;
	font-variant-numeric: tabular-nums;
	container: elj / inline-size;
}
.elj *, .elj *::before, .elj *::after { box-sizing: border-box; }
.elj-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.elj ol, .elj ul, .elj dl, .elj dd, .elj p, .elj h3 { margin: 0; padding: 0; }
.elj ol, .elj ul { list-style: none; }
.elj h3 { font-size: 1.125rem; line-height: 1.25; font-weight: 700; color: var(--elj-ink); }

.elj-kort-lista { display: grid; gap: 14px; }
.elj-kort { position: relative; background: var(--elj-bg); }
.elj-kort__huvud { display: flex; align-items: center; gap: 12px; min-width: 0; }
.elj-kort__titel { display: flex; flex-direction: column; min-width: 0; }
.elj-kort__typ { color: var(--elj-muted); font-size: .85rem; }
.elj-kort__logga {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 12px; border: 1px solid var(--elj-line); background: #fcfbf8; overflow: hidden;
}
.elj-kort__logga img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.elj-kort__logga--monogram { background: var(--elj-wash); color: var(--elj-accent); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; }

.elj-ikon { flex: 0 0 auto; }
.elj-villkor__post { display: inline-flex; align-items: center; gap: 6px; }
.elj-villkor__post.is-ja { color: var(--elj-ja); }
.elj-villkor__post.is-nej { color: var(--elj-nej); }

.elj-knapp {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--elj-cta); color: var(--elj-cta-text) !important; text-decoration: none !important;
	font-weight: 700; font-size: 1rem; line-height: 1.2; padding: 13px 22px; border-radius: 10px; border: 0;
	transition: filter .15s ease;
}
.elj-knapp:hover { filter: brightness(1.12); }
.elj-knapp:focus-visible { outline: 3px solid var(--elj-cta); outline-offset: 3px; }
.elj-knapp--liten { padding: 8px 14px; font-size: .9rem; white-space: nowrap; }

.elj-kort__mer > summary { cursor: pointer; }
.elj-kort__mer > summary::-webkit-details-marker { display: none; }
.elj-fordelar li { position: relative; padding-left: 18px; margin: 4px 0; font-size: .95rem; line-height: 1.45; }
.elj-fordelar li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--elj-ja); }
.elj-exempel { color: var(--elj-muted); font-size: .78rem; line-height: 1.5; margin-top: 12px; }

.elj-tabell-wrap { overflow-x: auto; margin-top: 24px; border: 1px solid var(--elj-line); border-radius: var(--elj-radius); }
.elj-tabell { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0; }
.elj-tabell th, .elj-tabell td { padding: 11px 14px; border-bottom: 1px solid var(--elj-line); text-align: left; vertical-align: middle; }
.elj-tabell thead th { background: var(--elj-wash); font-weight: 600; white-space: nowrap; color: var(--elj-muted); font-size: .82rem; }
.elj-tabell tbody tr:last-child > * { border-bottom: 0; }
@container elj (max-width: 639px) {
	.elj-tabell thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.elj-tabell, .elj-tabell tbody, .elj-tabell tr, .elj-tabell th, .elj-tabell td { display: block; width: 100%; }
	.elj-tabell tr { border-bottom: 1px solid var(--elj-line); padding: 10px 0; }
	.elj-tabell th[scope="row"] { border: 0; font-size: 1.05rem; padding-bottom: 4px; }
	.elj-tabell td { border: 0; padding: 4px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
	.elj-tabell td[data-label]::before { content: attr(data-label); color: var(--elj-muted); text-align: left; }
	.elj-tabell td:last-child { padding-top: 10px; }
}
.elj-fot { color: var(--elj-muted); font-size: .8rem; margin-top: 14px; }
.elj-fel { background: #fff4e5; border: 1px solid #f0c27b; padding: 8px 12px; border-radius: 6px; }

/* ---------- 1. Villkoren först ---------- */
.elj--villkor .elj-kort {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px;
	grid-template-areas: "huvud huvud" "villkor nyckel" "mer cta";
	border: 1px solid var(--elj-line); border-radius: var(--elj-radius); padding: 20px 22px;
}
.elj--villkor .elj-kort:first-child { border-color: var(--elj-accent); box-shadow: inset 4px 0 0 var(--elj-accent); }
.elj--villkor .elj-kort__huvud { grid-area: huvud; }
.elj--villkor .elj-kort__pos { color: var(--elj-muted); font-weight: 700; font-size: .95rem; min-width: 1.2em; }
.elj--villkor .elj-kort__etikett { margin-left: auto; background: var(--elj-wash); color: var(--elj-accent); font-weight: 700; font-size: .8rem; padding: 5px 12px; border-radius: 999px; }
.elj--villkor .elj-villkor { grid-area: villkor; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; align-self: center; }
.elj--villkor .elj-villkor__post { gap: 10px; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.elj--villkor .elj-villkor__post.is-ja { background: var(--elj-ja-wash); }
.elj--villkor .elj-villkor__post.is-nej { background: var(--elj-nej-wash); }
.elj--villkor .elj-villkor__post .elj-ikon { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: currentColor; }
.elj--villkor .elj-villkor__post .elj-ikon path { stroke: #fff; }
.elj--villkor .elj-nyckeltal { grid-area: nyckel; display: grid; gap: 10px; min-width: 210px; text-align: right; align-content: start; }
.elj--villkor .elj-nyckeltal dt { color: var(--elj-muted); font-size: .8rem; }
.elj--villkor .elj-nyckeltal dd { font-weight: 700; font-size: 1.05rem; }
.elj--villkor .elj-nyckeltal__post--effranta dd { font-size: 1.35rem; letter-spacing: -.01em; }
.elj--villkor .elj-kort__mer { grid-area: mer; border-top: 1px solid var(--elj-line); padding-top: 14px; }
.elj--villkor .elj-kort__mer > summary { display: none; }
.elj--villkor .elj-fakta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 10px; font-size: .88rem; }
.elj--villkor .elj-fakta__post { display: flex; gap: 6px; }
.elj--villkor .elj-fakta dt { color: var(--elj-muted); }
.elj--villkor .elj-fakta dd { font-weight: 600; }
.elj--villkor .elj-kort__cta { grid-area: cta; align-self: end; }
.elj--villkor .elj-knapp { min-width: 210px; }
@container elj (max-width: 719px) {
	.elj--villkor .elj-kort { grid-template-columns: 1fr; grid-template-areas: "huvud" "villkor" "nyckel" "cta" "mer"; padding: 16px; gap: 14px; }
	.elj--villkor .elj-nyckeltal { grid-template-columns: 1fr 1fr; text-align: left; min-width: 0; }
	.elj--villkor .elj-villkor { grid-template-columns: 1fr; gap: 6px; }
	.elj--villkor .elj-villkor__post { padding: 9px 12px; }
	.elj--villkor .elj-knapp { width: 100%; }
	.elj--villkor .elj-kort__etikett { order: -1; margin-left: 0; flex-basis: 100%; width: fit-content; }
	.elj--villkor .elj-kort__huvud { flex-wrap: wrap; }
}

/* ---------- 2. Prislappen ---------- */
.elj--prislapp {
	--elj-ink: #1f2328;
	--elj-muted: #656b73;
	--elj-line: #d5d9de;
	--elj-wash: #f3f5f4;
	--elj-cta: #1f2328;
	--elj-accent: #a86a12;
	--elj-ja: #237a52;
	--elj-ja-wash: #e8f3ed;
}
.elj--prislapp .elj-kort-lista { gap: 18px; }
.elj--prislapp .elj-kort {
	display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0;
	grid-template-areas: "pris huvud" "pris mer" "pris villkor" "pris cta";
	border: 1px solid var(--elj-line); border-radius: var(--elj-radius); overflow: hidden;
}
.elj--prislapp .elj-kort__huvud { grid-area: huvud; padding: 20px 24px 12px; }
.elj--prislapp .elj-kort__pos {
	position: absolute; top: 0; left: 0; z-index: 1;
	background: var(--elj-accent); color: #fff; font-weight: 700; font-size: .85rem;
	padding: 6px 14px 6px 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
}
.elj--prislapp .elj-kort__pos .elj-sr { position: static !important; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; }
.elj--prislapp .elj-kort__etikett { margin-left: auto; color: var(--elj-accent); font-weight: 700; font-size: .85rem; }
.elj--prislapp .elj-nyckeltal {
	grid-area: pris; background: var(--elj-wash); padding: 48px 24px 24px;
	display: flex; flex-direction: column; gap: 20px; border-right: 1px solid var(--elj-line);
}
.elj--prislapp .elj-nyckeltal dt { color: var(--elj-muted); font-size: .82rem; order: 2; }
.elj--prislapp .elj-nyckeltal__post { display: flex; flex-direction: column; }
.elj--prislapp .elj-nyckeltal dd { font-weight: 700; font-size: 1.1rem; }
.elj--prislapp .elj-nyckeltal__post--effranta dd { font-size: 2rem; line-height: 1.05; letter-spacing: -.02em; }
.elj--prislapp .elj-kort__mer { grid-area: mer; padding: 0 24px; }
.elj--prislapp .elj-kort__mer > summary { display: none; }
.elj--prislapp .elj-fakta__post { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: .93rem; }
.elj--prislapp .elj-fakta__post dt { color: var(--elj-muted); white-space: nowrap; }
.elj--prislapp .elj-fakta__post dt { flex: 0 0 auto; }
.elj--prislapp .elj-fakta__post dd { order: 3; margin-left: auto; font-weight: 600; text-align: right; }
.elj--prislapp .elj-fakta__post::before { content: ""; order: 2; flex: 1 1 auto; border-bottom: 2px dotted var(--elj-line); transform: translateY(-4px); min-width: 16px; }
.elj--prislapp .elj-fordelar { margin-top: 12px; }
.elj--prislapp .elj-exempel { margin-top: 10px; }
.elj--prislapp .elj-villkor { grid-area: villkor; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 24px 0; font-size: .9rem; font-weight: 600; }
.elj--prislapp .elj-kort__cta { grid-area: cta; padding: 18px 24px 22px; }
@container elj (max-width: 719px) {
	.elj--prislapp .elj-kort { grid-template-columns: 1fr; grid-template-areas: "huvud" "pris" "villkor" "mer" "cta"; }
	.elj--prislapp .elj-kort__huvud { padding: 40px 16px 12px; }
	.elj--prislapp .elj-nyckeltal { flex-direction: row; flex-wrap: wrap; gap: 16px 28px; padding: 16px; border-right: 0; border-block: 1px solid var(--elj-line); }
	.elj--prislapp .elj-nyckeltal__post--effranta dd { font-size: 1.6rem; }
	.elj--prislapp .elj-villkor { padding: 14px 16px 6px; }
	.elj--prislapp .elj-kort__mer { padding: 6px 16px 0; }
	.elj--prislapp .elj-kort__cta { padding: 16px; }
	.elj--prislapp .elj-knapp { width: 100%; }
}

/* ---------- 3. Kompakt lista ---------- */
.elj--lista {
	--elj-ink: #1e293b;
	--elj-muted: #64748b;
	--elj-line: #e2e8f0;
	--elj-wash: #f1f5f9;
	--elj-cta: #0f766e;
	--elj-accent: #0f766e;
}
.elj--lista .elj-kort-lista { gap: 0; border: 1px solid var(--elj-line); border-radius: var(--elj-radius); overflow: hidden; }
.elj--lista .elj-kort {
	display: grid; align-items: center; gap: 10px 24px; padding: 16px 20px;
	grid-template-columns: minmax(170px, 1fr) 258px 150px 150px;
	grid-template-areas: "huvud nyckel villkor cta" "mer mer mer mer";
	border-top: 1px solid var(--elj-line);
}
.elj--lista .elj-kort:first-child { border-top: 0; }
.elj--lista .elj-kort__huvud { grid-area: huvud; gap: 10px; }
.elj--lista .elj-kort__pos { color: var(--elj-muted); font-weight: 600; font-size: .9rem; width: 1.2em; }
.elj--lista .elj-kort__logga { width: 44px; height: 44px; border-radius: 10px; }
.elj--lista .elj-kort__logga img { max-width: 34px; max-height: 34px; }
.elj--lista .elj-kort__titel { flex-direction: column-reverse; }
.elj--lista .elj-kort__etikett { position: absolute; top: 10px; left: 94px; color: var(--elj-accent); font-size: .72rem; font-weight: 700; }
.elj--lista .elj-kort:has(.elj-kort__etikett) { padding-top: 26px; }
.elj--lista h3 { font-size: 1rem; }
.elj--lista .elj-nyckeltal { grid-area: nyckel; display: grid; grid-template-columns: 112px 128px; gap: 18px; }
.elj--lista .elj-nyckeltal__post { display: flex; flex-direction: column; }
.elj--lista .elj-nyckeltal dt { color: var(--elj-muted); font-size: .76rem; order: 2; white-space: nowrap; }
.elj--lista .elj-nyckeltal dd { font-weight: 700; font-size: .98rem; white-space: nowrap; }
.elj--lista .elj-villkor { grid-area: villkor; display: grid; gap: 2px; font-size: .84rem; font-weight: 600; }
.elj--lista .elj-kort__cta { grid-area: cta; }
.elj--lista .elj-kort__cta .elj-knapp { width: 100%; }
.elj--lista .elj-knapp { padding: 11px 18px; font-size: .95rem; }
.elj--lista .elj-kort__mer { grid-area: mer; }
.elj--lista .elj-kort__mer > summary {
	display: inline-flex; align-items: center; gap: 6px; list-style: none;
	color: var(--elj-accent); font-size: .85rem; font-weight: 600; padding: 2px 0;
}
.elj--lista .elj-kort__mer > summary::after {
	content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.elj--lista .elj-kort__mer[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.elj--lista .elj-kort__mer > summary:focus-visible { outline: 2px solid var(--elj-accent); outline-offset: 2px; border-radius: 4px; }
.elj--lista .elj-kort__mer[open] { background: var(--elj-wash); margin: 4px -20px -16px; padding: 12px 20px 16px; }
.elj--lista .elj-fakta { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 20px; margin: 12px 0; }
.elj--lista .elj-fakta dt { color: var(--elj-muted); font-size: .76rem; }
.elj--lista .elj-fakta dd { font-weight: 600; font-size: .9rem; }
@container elj (max-width: 859px) {
	.elj--lista .elj-kort { grid-template-columns: 1fr auto; grid-template-areas: "huvud huvud" "nyckel nyckel" "villkor villkor" "cta cta" "mer mer"; padding: 16px; }
	.elj--lista .elj-kort__etikett { left: 86px; }
	.elj--lista .elj-villkor { grid-template-columns: 1fr 1fr; }
	.elj--lista .elj-knapp { width: 100%; }
	.elj--lista .elj-kort__mer[open] { margin: 4px -16px -16px; padding: 12px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.elj *, .elj *::before, .elj *::after { transition: none !important; }
}

/* ---------- 4. Premium (standard) ---------- */
.elj--premium {
	--elj-ink: #1b2420;
	--elj-muted: #66706b;
	--elj-line: #e6e9e7;
	--elj-wash: #f5f7f6;
	--elj-cta: #1d6b48;
	--elj-ja: #1d7a4c;
	--elj-mint: #e8f5ee;
	--elj-svart: #171a19;
	--elj-gul: #f2b01e;
}
.elj-pk-lista { display: grid; gap: 30px; padding-top: 14px; }
.elj-pk {
	position: relative; background: #fcfbf8; border: 1px solid var(--elj-line); border-radius: 18px;
	padding: 24px 26px 20px; box-shadow: 0 1px 2px rgba(20, 30, 25, .04), 0 6px 18px rgba(20, 30, 25, .06);
}
.elj-pk--forst { border-color: #cfe3d7; }
.elj-pk__pos {
	position: absolute; top: -13px; left: -13px; width: 32px; height: 32px; border-radius: 50%;
	background: var(--elj-svart); color: #fff; font-weight: 700; font-size: .9rem;
	display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fff;
}
.elj-pk__etikett {
	position: absolute; top: -13px; right: 24px; display: inline-flex; align-items: center; gap: 6px;
	background: var(--elj-svart); color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
	padding: 5px 12px; border-radius: 6px;
}
.elj-pk__etikett-stjarna { color: var(--elj-gul); }

.elj-pk__topp { display: grid; grid-template-columns: minmax(170px, 200px) minmax(0, 1fr) 200px; align-items: center; gap: 20px 24px; }
.elj-pk__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.elj-pk__logga {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: #fcfbf8; border: 1px solid var(--elj-line);
}
.elj-pk__logga img { max-width: 44px; max-height: 44px; object-fit: contain; }
.elj-pk__logga--monogram { background: var(--elj-mint); border-color: transparent; color: var(--elj-cta); font-weight: 800; font-size: 1.05rem; }
.elj-pk__namnblock { display: flex; flex-direction: column; min-width: 0; }
.elj .elj-pk__namn { font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.elj-pk__typ { color: var(--elj-muted); font-size: .82rem; }
.elj-pk__betyg { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .9rem; color: var(--elj-muted); }
.elj-pk__betyg strong { color: var(--elj-ink); }
.elj-pk__stjarnor {
	--elj-fyllt: 0%; width: 80px; height: 15px; display: inline-block;
	background: linear-gradient(90deg, var(--elj-gul) var(--elj-fyllt), #dadfdc var(--elj-fyllt));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 15'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7.5 .6l2 4.3 4.7.6-3.4 3.2.9 4.6-4.2-2.3-4.2 2.3.9-4.6L.8 5.5l4.7-.6z'/%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 15'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M7.5 .6l2 4.3 4.7.6-3.4 3.2.9 4.6-4.2-2.3-4.2 2.3.9-4.6L.8 5.5l4.7-.6z'/%3E%3Cuse href='%23s' x='16'/%3E%3Cuse href='%23s' x='32'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='64'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}

.elj-pk__nyckel { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 16px 22px; }
.elj-pk__nt dt { color: var(--elj-muted); font-size: .74rem; font-weight: 600; letter-spacing: .03em; margin-bottom: 3px; white-space: nowrap; }
.elj-pk__nt dd { font-size: 1.06rem; font-weight: 700; color: var(--elj-ink); line-height: 1.3; white-space: nowrap; }
.elj-pk__nt--utbetalning small { display: block; font-size: .75rem; font-weight: 600; color: var(--elj-muted); line-height: 1.2; }
.elj-pk__nt--utbetalning dd > span { display: block; }
.elj-pk__nt--svar dd { white-space: normal; max-width: 9em; }
.elj-pk__nt--utbetalning dd { display: flex; align-items: center; gap: 6px; color: var(--elj-ja); }
.elj-pk__nt-ikon { flex: 0 0 auto; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--elj-ja); }
.elj-pk__nt-ikon path { stroke: #fff; }

.elj-pk__knapp {
	display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
	background: var(--elj-cta); color: #fff !important; text-decoration: none !important;
	font-weight: 800; font-size: 1.02rem; padding: 16px 20px; border-radius: 999px;
	box-shadow: 0 4px 12px rgba(29, 107, 72, .25); transition: filter .15s ease, transform .15s ease;
}
.elj-pk__knapp:hover { filter: brightness(1.1); }
.elj-pk__knapp:active { transform: translateY(1px); }
.elj-pk__knapp:focus-visible { outline: 3px solid var(--elj-cta); outline-offset: 3px; }

.elj .elj-pk__egenskaper {
	display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--elj-line);
	font-size: .9rem; font-weight: 500;
}
.elj-pk__egenskaper li { display: inline-flex; align-items: center; gap: 6px; }
.elj-pk__egenskaper .is-ja .elj-pk__ikon { color: var(--elj-ja); }
.elj-pk__egenskaper .is-nej { color: var(--elj-muted); }

.elj .elj-pk__trustpilot {
	display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
	margin-top: 18px; padding: 10px 14px; border-radius: 10px; background: var(--elj-mint); font-size: .9rem; color: var(--elj-ink);
}
.elj-pk__tp-stjarna { width: 16px; height: 16px; color: #00b67a; }
.elj .elj-pk__exempel { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--elj-line); color: var(--elj-muted); font-size: .78rem; line-height: 1.5; text-align: left; }

.elj .elj-pk__mer { margin-top: 12px; }
.elj-pk__mer > summary {
	list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	color: var(--elj-muted); font-size: .88rem; font-weight: 600; padding: 4px 0;
}
.elj-pk__mer > summary::-webkit-details-marker { display: none; }
.elj-pk__mer > summary:hover { color: var(--elj-ink); }
.elj-pk__mer > summary:focus-visible { outline: 2px solid var(--elj-cta); outline-offset: 3px; border-radius: 4px; }
.elj-pk__plus { position: relative; width: 12px; height: 12px; }
.elj-pk__plus::before, .elj-pk__plus::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .15s ease; }
.elj-pk__plus::after { transform: rotate(90deg); }
.elj-pk__mer[open] .elj-pk__plus::after { transform: rotate(0deg); }
.elj-pk__mer-inre { padding-top: 12px; }
.elj-pk__fakta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.elj-pk__fakta > div {
	text-align: center; padding: 8px 10px; border-radius: 8px;
	background: repeating-linear-gradient(135deg, var(--elj-wash) 0 6px, #eef1ef 6px 12px);
}
.elj-pk__fakta dt { color: var(--elj-muted); font-size: .76rem; }
.elj-pk__fakta dd { font-weight: 700; font-size: .92rem; }
.elj .elj-pk__formot { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.elj .elj-pk__formot h4 { margin: 0 0 6px; font-size: .9rem; font-weight: 700; }
.elj-pk__formot li { position: relative; padding-left: 18px; margin: 4px 0; font-size: .88rem; line-height: 1.45; }
.elj-pk__for li::before, .elj-pk__mot li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; }
.elj-pk__for li::before { background: var(--elj-ja); }
.elj-pk__mot li::before { background: #c9cfcb; }

.elj .elj-pk__varning {
	display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center;
	margin: 18px -26px -20px; padding: 14px 26px 16px; border-top: 1px solid var(--elj-line);
	font-size: .72rem; line-height: 1.45; color: #3a423e;
}
.elj-pk__varning strong { display: block; color: var(--elj-ink); font-size: .78rem; }
.elj-pk__varning a { color: inherit; text-decoration: underline; }

@container elj (max-width: 899px) {
	.elj-pk__topp { grid-template-columns: minmax(0, 1fr) 200px; }
	.elj-pk__nyckel { justify-content: start; gap: 16px 36px; }
	.elj-pk__nyckel { grid-column: 1 / -1; grid-row: 2; }
	.elj-pk__cta { grid-column: 2; grid-row: 1; }
}
@container elj (max-width: 599px) {
	.elj-pk { padding: 22px 16px 16px; }
	.elj-pk__pos { left: -8px; }
	.elj-pk__etikett { right: 14px; }
	.elj-pk__topp { grid-template-columns: 1fr; gap: 16px; }
	.elj-pk__nyckel { grid-row: auto; grid-template-columns: 1fr 1fr; gap: 12px 16px; justify-content: stretch; }
	.elj-pk__nt--utbetalning { grid-column: 1 / -1; }
	.elj-pk__cta { grid-column: 1; grid-row: auto; }
	.elj .elj-pk__egenskaper { gap: 8px 12px; margin-top: 16px; font-size: .86rem; }
	.elj-pk__egenskaper li { flex: 0 0 calc(50% - 6px); align-items: flex-start; }
	.elj-pk__egenskaper .elj-pk__ikon { margin-top: 2px; }
	.elj-pk__fakta { grid-template-columns: 1fr 1fr; }
	.elj .elj-pk__formot { grid-template-columns: 1fr; }
	.elj .elj-pk__varning { grid-template-columns: 36px 1fr; margin: 16px -16px -16px; padding: 14px 16px; }
	.elj-pk__varningsikon { width: 36px; height: 33px; }
}

/* ---------- 5. Faktaruta ---------- */
.elj--faktaruta {
	--elj-ink: #2f3a37;
	--elj-muted: #5f6b68;
	--elj-line: #e4e7e6;
	--elj-cta: #4e8577;
	--elj-lank: #4e7b70;
	--elj-rand-1: #f6f7f7;
	--elj-rand-2: #eceeed;
}
.elj-fr-lista { display: grid; gap: 18px; }
.elj-fr-lista > .elj-fr--extra { display: none; }
.elj-visa-alla { display: flex; justify-content: center; margin-top: 20px; }
.elj-visa-alla[hidden] { display: none; }
.elj-visa-alla__knapp {
	appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem;
	padding: 13px 28px; border-radius: 999px; border: 2px solid var(--elj-cta, #1e7f45);
	background: #fcfbf8; color: var(--elj-cta, #1e7f45);
}
.elj-visa-alla__knapp:hover { background: var(--elj-cta, #1e7f45); color: #fff; }
.elj-visa-alla__knapp:focus-visible { outline: 3px solid var(--elj-cta, #1e7f45); outline-offset: 3px; }
.elj-fr {
	background: #fcfbf8; border: 1px solid var(--elj-line); border-radius: 6px;
	box-shadow: 0 1px 3px rgba(30, 40, 38, .06); overflow: hidden;
}
.elj-fr__grid {
	display: grid; grid-template-columns: 180px minmax(0, 1fr) 200px;
	grid-template-areas: "id namn cta" "id fakta cta" "id exempel cta";
	column-gap: 32px; padding: 12px 26px 16px;
}
.elj-fr__namnrad { grid-area: namn; display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 12px; }
.elj .elj-fr__namn {
	text-align: center; font-size: .82rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--elj-muted); margin: 0;
}
.elj-fr__plats, .elj-fr__typ { display: none; }
.elj-fr__id { grid-area: id; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.elj-fr__logga { max-width: 140px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.elj-fr__logga--text { font-size: 1.35rem; font-weight: 800; color: var(--elj-lank); letter-spacing: -.01em; }
.elj-fr__recension { color: var(--elj-lank) !important; font-weight: 700; font-size: .88rem; text-decoration: none !important; }
.elj-fr__recension:hover { text-decoration: underline !important; }

.elj-fr__fakta { grid-area: fakta; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; }
.elj-fr__ruta { display: flex; flex-direction: column; }
.elj-fr__ruta dd { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.elj-fr__ruta { text-align: center; min-width: 0; }
.elj-fr__ruta dt { font-size: .82rem; color: var(--elj-muted); margin-bottom: 3px; }
.elj-fr__ruta dd {
	font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--elj-ink);
	padding: 3px 6px; border-radius: 3px; line-height: 1.3; overflow-wrap: anywhere;
	background: repeating-linear-gradient(135deg, var(--elj-rand-1) 0 5px, var(--elj-rand-2) 5px 6px);
}
.elj .elj-fr__exempel {
	margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--elj-line);
	text-align: left; font-size: .78rem; line-height: 1.55; color: var(--elj-muted);
}
.elj .elj-fr__exempel strong, .elj .elj-pk__exempel strong { display: block; color: var(--elj-ink); font-size: .8rem; margin-bottom: 2px; }

.elj-fr__cta { grid-area: cta; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; }
.elj-fr__knapp {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--elj-cta); color: #fff !important; text-decoration: none !important;
	font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .02em;
	padding: 14px 16px; border-radius: 4px; box-shadow: 0 3px 6px rgba(0, 0, 0, .22); transition: filter .15s ease;
}
.elj-fr__knapp:hover { filter: brightness(1.08); }
.elj-fr__knapp:focus-visible { outline: 3px solid var(--elj-cta); outline-offset: 3px; }
.elj-fr__merknapp {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 0; cursor: pointer;
	font: inherit; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--elj-muted); padding: 4px;
}
.elj-fr__merknapp[hidden] { display: none; }
.elj-fr__merknapp:hover { color: var(--elj-ink); }
.elj-fr__merknapp:focus-visible { outline: 2px solid var(--elj-cta); outline-offset: 2px; border-radius: 3px; }
.elj-fr__plus { position: relative; width: 11px; height: 11px; }
.elj-fr__plus::before, .elj-fr__plus::after { content: ""; position: absolute; left: 0; top: 4.5px; width: 11px; height: 2px; background: currentColor; transition: transform .15s ease; }
.elj-fr__plus::after { transform: rotate(90deg); }
.elj-fr__merknapp[aria-expanded="true"] .elj-fr__plus::after { transform: rotate(0deg); }

.elj-fr__mer[hidden] { display: none; }
.elj .elj-fr__formot { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.elj .elj-fr__formot h4 { margin: 0 0 6px; font-size: .9rem; font-weight: 700; }
.elj-fr__formot li { position: relative; padding-left: 18px; margin: 4px 0; font-size: .86rem; line-height: 1.45; }
.elj-fr__for li::before, .elj-fr__mot li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; }
.elj-fr__for li::before { background: var(--elj-cta); }
.elj-fr__mot li::before { background: #c4cbc9; }

.elj-fr__varning {
	display: grid; grid-template-columns: 38px 1fr; gap: 18px; align-items: center;
	margin: 0 26px; padding: 12px 0 14px 30px; border-top: 1px solid var(--elj-line);
	font-size: .74rem; line-height: 1.5; color: var(--elj-ink);
}
.elj-fr__varningsikon { width: 38px; height: 34px; }
.elj-fr__varning strong { font-weight: 700; }
.elj-fr__varning a { color: inherit; text-decoration: none; }
.elj-fr__varning a:hover { text-decoration: underline; }

@container elj (max-width: 1099px) {
	.elj-fr__grid { grid-template-columns: 140px minmax(0, 1fr) 180px; column-gap: 20px; padding-left: 20px; padding-right: 20px; }
	.elj-fr__fakta { gap: 10px 12px; }
	.elj-fr__ruta dt { font-size: .78rem; }
	.elj-fr__ruta dd { font-size: .82rem; letter-spacing: 0; white-space: nowrap; }
	.elj-fr__logga { max-width: 120px; }
	.elj-fr__knapp { font-size: .88rem; padding: 13px 12px; }
}
@container elj (max-width: 899px) {
	.elj-fr__ruta dd { white-space: normal; }
	.elj-fr__grid { grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "id namn" "id fakta" "cta cta" "exempel exempel"; column-gap: 20px; padding: 12px 18px 14px; }
	.elj-fr__fakta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elj-fr__cta { flex-direction: row; justify-content: space-between; margin-top: 16px; }
	.elj-fr__knapp { flex: 1 1 auto; }
	.elj-fr__varning { margin: 0 18px; padding-left: 0; gap: 18px; }
}
@container elj (max-width: 559px) {
	.elj-fr__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "fakta" "cta" "exempel"; padding: 14px 14px 14px; }
	.elj-fr__id { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 14px; }
	.elj-fr__logga { max-width: 128px; max-height: 38px; }
	/* Loggan visar redan namnet. Rubriken finns kvar för skärmläsare och sökmotorer. */
	.elj-fr__namnrad { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.elj .elj-fr__id .elj-fr__recension { font-size: .86rem; text-align: right; }
	.elj-fr__fakta { gap: 10px 12px; }
	.elj-fr__ruta dd { font-size: .86rem; }
	.elj-fr__cta { flex-direction: column; gap: 10px; }
	.elj-fr__mer { padding: 14px; }
	.elj .elj-fr__formot { grid-template-columns: 1fr; }
	.elj-fr__varning { grid-template-columns: 40px 1fr; margin: 0 14px; gap: 14px; font-size: .72rem; }
	.elj-fr__varningsikon { width: 40px; height: 36px; }
}

/* ---------- Flagga (övre vänstra hörnet) ---------- */
.elj-fr, .elj-pk { position: relative; }
.elj-fr { overflow: visible; }
.elj-flagga {
	--elj-flagga-bg: #1d6b48; --elj-flagga-mork: #0f3b28;
	position: absolute; top: 12px; left: -8px; z-index: 2; max-width: calc(100% - 40px);
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
}
.elj-flagga__band {
	display: flex; align-items: center; gap: 6px;
	background: var(--elj-flagga-bg); color: #fff;
	font-size: .76rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
	padding: 7px 20px 7px 12px; border-radius: 3px 0 0 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%);
}
.elj-flagga__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elj-flagga::after {
	content: ""; position: absolute; left: 0; top: 100%; width: 8px; height: 7px;
	background: var(--elj-flagga-mork); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.elj-flagga__ikon { flex: 0 0 auto; color: #ffe08a; }
.elj-flagga--guld  { --elj-flagga-bg: #b98512; --elj-flagga-mork: #6b4c08; }
.elj-flagga--guld .elj-flagga__ikon { color: #fff3c4; }
.elj-flagga--rod   { --elj-flagga-bg: #c62f2f; --elj-flagga-mork: #6f1717; }
.elj-flagga--bla   { --elj-flagga-bg: #1f4f8f; --elj-flagga-mork: #0f2b52; }
.elj-flagga--svart { --elj-flagga-bg: #1d2120; --elj-flagga-mork: #000; }
.elj-fr--flagga .elj-fr__grid { padding-top: 42px; }
.elj-fr--flagga .elj-fr__namnrad { margin-top: -28px; }
.elj-pk .elj-flagga { top: -13px; left: 30px; filter: none; }
.elj-pk .elj-flagga__band { border-radius: 6px; clip-path: none; padding: 6px 12px; }
.elj-pk .elj-flagga::after { display: none; }
@container elj (max-width: 559px) {
	.elj-fr--flagga .elj-fr__grid { padding-top: 48px; }
	.elj-fr--flagga .elj-fr__namnrad { margin-top: 0; }
}

/* ---------- Bred lista: växer åt höger ut ur textspalten ----------
   Den yttre rutan ligger kvar i textspalten som allt annat innehåll, så temat
   placerar den som vanligt. Listan inuti blir bredare och växer åt höger,
   men aldrig längre än skärmen (skriptet räknar ut --elj-plats). */
.elj-bredd { position: relative; z-index: 3; } /* över temats högra sidofält, som annars täcker den breda listan */
.elj-bredd > .elj {
	width: min(var(--elj-bredd, 980px), var(--elj-plats, 100%));
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
@media (max-width: 782px) {
	.elj-bredd > .elj { width: 100%; }
}

/* ---------- Faktaruta: "Mer information" utan temats knappstil ---------- */
.elj .elj-fr__merknapp,
.elj .elj-fr__merknapp:hover,
.elj .elj-fr__merknapp:focus,
.elj .elj-fr__merknapp:active,
.elj .elj-fr__merknapp[aria-expanded="true"] {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: var(--elj-muted) !important;
	min-height: 0; width: auto; line-height: 1.3; text-decoration: none;
}
.elj .elj-fr__merknapp:hover,
.elj .elj-fr__merknapp[aria-expanded="true"] { color: var(--elj-ink) !important; }
.elj .elj-fr__merknapp:focus { outline: none !important; }
.elj .elj-fr__merknapp:focus-visible { outline: 2px solid var(--elj-cta) !important; outline-offset: 2px; }

/* ---------- Faktaruta: Mer information i grupper ---------- */
.elj-fr__mer { border-top: 1px solid var(--elj-line); padding: 20px 26px 22px; background: #f8f9f9; }
.elj-fr__grupper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
.elj .elj-fr__grupprubrik {
	margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--elj-line);
	font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--elj-ink); letter-spacing: .01em; line-height: 1.3;
}
.elj-fr__rader { margin: 0; }
.elj-fr__rad { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px solid #edf0ef; font-size: .84rem; line-height: 1.35; }
.elj-fr__rad:last-child { border-bottom: 0; }
.elj-fr__rad dt { color: var(--elj-muted); margin: 0; flex: 0 1 auto; }
.elj-fr__rad dd { margin: 0; font-weight: 700; color: var(--elj-ink); text-align: right; flex: 0 1 auto; min-width: 0; }
.elj-jn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.elj-jn.is-ja { color: #1d6b48; }
.elj-jn.is-nej { color: var(--elj-muted); font-weight: 600; }
.elj-jn svg { flex: 0 0 auto; }
.elj .elj-fr__formot { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; padding-top: 4px; }
.elj-fr__formot li { font-size: .84rem; }
@container elj (max-width: 899px) {
	.elj-fr__grupper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.elj-fr__mer { padding: 18px; }
}
@container elj (max-width: 559px) {
	.elj-fr__grupper { grid-template-columns: 1fr; gap: 14px; }
	.elj .elj-fr__formot { grid-template-columns: 1fr; gap: 14px; }
	.elj-fr__mer { padding: 14px; }
}

/* ---------- Varningstexten: alltid synlig, oavsett temats regler för stycken ---------- */
.elj .elj-fr__varningstext { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; }
.elj .elj-fr__varningsrubrik { display: block !important; font-weight: 700; margin-bottom: 2px; }
.elj .elj-fr__varningsbrod { display: block !important; visibility: visible !important; }


/* =====================================================================
   Faktaruta: Panel och Linjer (Expoweras färger)
   ===================================================================== */
.elj--panel, .elj--linje {
	--elj-ink: #1d1b4f;          /* Expowera indigo */
	--elj-muted: #5c5f78;
	--elj-line: #e4e4ef;
	--elj-cta: #1f8a4c;          /* Expowera grön */
	--elj-lank: #1f8a4c;
	--elj-tint: #f4f4fb;
	--elj-gron-ljus: #e9f6ee;
}
.elj--panel .elj-flagga, .elj--linje .elj-flagga { --elj-flagga-bg: #1d1b4f; --elj-flagga-mork: #0b0a26; }
.elj--panel .elj-flagga--guld, .elj--linje .elj-flagga--guld { --elj-flagga-bg: #b98512; --elj-flagga-mork: #6b4c08; }
.elj--panel .elj-flagga--rod, .elj--linje .elj-flagga--rod { --elj-flagga-bg: #c62f2f; --elj-flagga-mork: #6f1717; }
.elj--panel .elj-flagga--bla, .elj--linje .elj-flagga--bla { --elj-flagga-bg: #1f4f8f; --elj-flagga-mork: #0f2b52; }
.elj--panel .elj-flagga--gron, .elj--linje .elj-flagga--gron { --elj-flagga-bg: #1f8a4c; --elj-flagga-mork: #0f4a28; }

/* Namnrad: vänsterställd, vanlig stil, med produkttyp */
.elj--panel .elj-fr__namnrad, .elj--linje .elj-fr__namnrad { justify-content: flex-start; gap: 10px; }
.elj--panel .elj .elj-fr__namn, .elj.elj--panel .elj-fr__namn, .elj.elj--linje .elj-fr__namn {
	text-transform: none; letter-spacing: -.005em; font-size: 1.15rem; font-weight: 800; color: var(--elj-ink); text-align: left;
}
.elj--panel .elj-fr__typ, .elj--linje .elj-fr__typ { display: inline; font-size: .78rem; color: var(--elj-muted); }

/* Knapp: rundad, grön, pil i cirkel */
.elj--panel .elj-fr__knapp, .elj--linje .elj-fr__knapp {
	text-transform: none; letter-spacing: 0; font-size: 1rem; font-weight: 700;
	border-radius: 999px; padding: 13px 14px 13px 22px; justify-content: space-between;
	box-shadow: 0 4px 12px rgba(31, 138, 76, .22);
}
.elj--panel .elj-fr__pil, .elj--linje .elj-fr__pil {
	width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2);
}
.elj.elj--panel .elj-fr__merknapp, .elj.elj--linje .elj-fr__merknapp { text-transform: none; letter-spacing: 0; font-size: .88rem; }

/* Varning: tonad list i stället för linje + stor triangel */
.elj--panel .elj-fr__varning, .elj--linje .elj-fr__varning {
	margin: 0; padding: 12px 26px; border-top: 1px solid #f3dcd8; background: #fff7f5;
	grid-template-columns: 26px 1fr; gap: 14px; font-size: .78rem; line-height: 1.55;
}
.elj--panel .elj-fr__varningsikon, .elj--linje .elj-fr__varningsikon { width: 26px; height: 24px; }
.elj--panel .elj-fr__varningsrubrik, .elj--linje .elj-fr__varningsrubrik { display: inline !important; margin-right: 6px; }
.elj--panel .elj-fr__varningsbrod, .elj--linje .elj-fr__varningsbrod { display: inline !important; }

/* Prisexempel: vänsterställt med etikett */
.elj--panel .elj-fr__exempel, .elj--linje .elj-fr__exempel { text-align: left; font-size: .78rem; }

/* ---------- Panel ---------- */
.elj--panel .elj-fr { border-radius: 14px; border-color: var(--elj-line); box-shadow: 0 1px 2px rgba(29, 27, 79, .04), 0 8px 24px rgba(29, 27, 79, .06); overflow: hidden; }
.elj--panel .elj-fr__grid { grid-template-columns: 190px minmax(0, 1fr) 200px; padding: 0 24px 0 0; column-gap: 28px; }
.elj--panel .elj-fr__id {
	align-self: stretch; background: var(--elj-tint); border-right: 1px solid var(--elj-line);
	padding: 24px 16px; gap: 12px;
}
.elj--panel .elj-fr__namnrad { margin: 22px 0 12px; }
.elj--panel .elj-fr__exempel { margin-bottom: 18px; }
.elj--panel .elj-fr__cta { padding: 22px 0; }
.elj--panel .elj-fr__fakta { gap: 8px; }
.elj--panel .elj-fr__ruta {
	text-align: left; background: #fcfbf8; border: 1px solid var(--elj-line); border-radius: 10px; padding: 8px 12px;
}
.elj--panel .elj-fr__ruta dt { font-size: .72rem; margin-bottom: 2px; }
.elj.elj--panel .elj-fr__ruta dd {
	background: none; padding: 0; text-transform: none; letter-spacing: 0; justify-content: flex-start;
	font-size: .95rem; font-weight: 800; color: var(--elj-ink); white-space: nowrap;
}
.elj--panel .elj-fr__ruta--eff { background: var(--elj-gron-ljus); border-color: #bfe3cc; }
.elj--panel .elj-fr__ruta--eff dt { color: #1f6b3e; }
.elj--panel .elj-fr__recension { font-size: .82rem; }
.elj--panel .elj-fr--flagga .elj-fr__grid { padding-top: 0; }
.elj--panel .elj-fr--flagga .elj-fr__namnrad { margin-top: 22px; }
.elj--panel .elj-fr--flagga .elj-fr__id { padding-top: 44px; }

/* ---------- Linjer ---------- */
.elj--linje .elj-fr { border-radius: 12px; border-color: var(--elj-line); box-shadow: none; }
.elj--linje .elj-fr__grid { grid-template-columns: 170px minmax(0, 1fr) 200px; }
.elj--linje .elj-fr__id { border-right: 1px solid var(--elj-line); padding-right: 24px; }
.elj--linje .elj-fr__plats {
	display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--elj-ink); color: #fff; font-size: .82rem; font-weight: 800; flex: 0 0 auto; align-self: center;
}
.elj--linje .elj-fr__fakta { gap: 12px 0; }
.elj--linje .elj-fr__ruta { text-align: left; padding: 2px 16px; border-left: 1px solid var(--elj-line); }
.elj--linje .elj-fr__ruta:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.elj--linje .elj-fr__ruta dt { font-size: .74rem; }
.elj.elj--linje .elj-fr__ruta dd {
	background: none; padding: 0; text-transform: none; letter-spacing: 0; justify-content: flex-start;
	font-size: 1.02rem; font-weight: 800; color: var(--elj-ink); white-space: nowrap;
}
.elj--linje .elj-fr__ruta--eff dd { color: #1f8a4c; }
.elj--linje .elj-fr--flagga .elj-fr__namnrad { margin-left: 0; }

/* Mellanbredd och mobil för Panel och Linjer */
@container elj (max-width: 1099px) {
	.elj--panel .elj-fr__grid { grid-template-columns: 150px minmax(0, 1fr) 180px; padding-right: 20px; padding-left: 0; }
	.elj--linje .elj-fr__grid { grid-template-columns: 140px minmax(0, 1fr) 180px; }
	.elj.elj--panel .elj-fr__ruta dd, .elj.elj--linje .elj-fr__ruta dd { font-size: .88rem; }
	.elj--linje .elj-fr__ruta { padding: 2px 10px; }
}
@container elj (max-width: 899px) {
	.elj--panel .elj-fr__grid { grid-template-columns: 140px minmax(0, 1fr); padding: 0 18px 0 0; }
	.elj--panel .elj-fr__id { grid-row: 1 / span 2; }
	.elj--panel .elj-fr__cta, .elj--panel .elj-fr__exempel { padding-left: 18px; }
	.elj--linje .elj-fr__ruta:nth-child(4n+1) { border-left: 1px solid var(--elj-line); padding-left: 10px; }
	.elj--linje .elj-fr__ruta:nth-child(2n+1) { border-left: 0; padding-left: 0; }
	.elj--panel .elj-fr__varning, .elj--linje .elj-fr__varning { padding: 12px 18px; }
}
@container elj (max-width: 559px) {
	.elj--panel .elj-fr__grid { grid-template-columns: 1fr; padding: 0 14px 14px; }
	.elj--panel .elj-fr__id { grid-row: auto; margin: 0 -14px; border-right: 0; border-bottom: 1px solid var(--elj-line); padding: 18px 14px; flex-direction: row; justify-content: space-between; }
	.elj--panel .elj-fr--flagga .elj-fr__id { padding-top: 44px; }
	.elj--panel .elj-fr__cta, .elj--panel .elj-fr__exempel { padding-left: 0; }
	.elj--panel .elj-fr__namnrad { margin: 14px 0 10px; }
	.elj--panel .elj-fr__cta { padding: 14px 0 0; }
	.elj--linje .elj-fr__id { border-right: 0; padding-right: 0; }
	.elj--panel .elj-fr__varning, .elj--linje .elj-fr__varning { padding: 12px 14px; grid-template-columns: 22px 1fr; gap: 10px; font-size: .72rem; }
	.elj--panel .elj-fr__namnrad, .elj--linje .elj-fr__namnrad { justify-content: flex-start; }
}

/* Panel och Linjer: flaggan håller sig inom vänsterkolumnen */
.elj--panel .elj-flagga { max-width: 182px; }
.elj--linje .elj-flagga { max-width: 166px; }
.elj--panel .elj-flagga__text, .elj--linje .elj-flagga__text { white-space: normal; line-height: 1.25; }
.elj--panel .elj-flagga__band, .elj--linje .elj-flagga__band { align-items: flex-start; }
.elj--panel .elj-flagga__ikon, .elj--linje .elj-flagga__ikon { margin-top: 1px; }
.elj--panel .elj-fr__grid { padding-bottom: 20px; }
.elj--panel .elj-fr__exempel { margin-bottom: 0; }
.elj--panel .elj-fr__id { margin-bottom: -20px; }
@container elj (max-width: 1099px) {
	.elj--panel .elj-flagga { max-width: 142px; }
	.elj--linje .elj-flagga { max-width: 136px; }
}
@container elj (max-width: 559px) {
	.elj--panel .elj-flagga, .elj--linje .elj-flagga { max-width: calc(100% - 40px); }
	.elj--panel .elj-fr__id { margin-bottom: 0; }
	.elj--panel .elj-fr__grid { padding-bottom: 14px; }
}
@container elj (max-width: 559px) {
	.elj--panel .elj-fr__grid { grid-template-areas: "id" "namn" "fakta" "cta" "exempel"; }
	.elj--panel .elj-fr--flagga .elj-fr__grid { padding-top: 0; }
	.elj--panel .elj-fr--flagga .elj-fr__namnrad { margin-top: 14px; }
	.elj--panel .elj-fr__id { padding: 16px 14px; }
	.elj--panel .elj-fr--flagga .elj-fr__id { padding-top: 48px; }
}
@container elj (max-width: 899px) {
	.elj--linje .elj-fr__grid { grid-template-columns: 140px minmax(0, 1fr); }
}
@container elj (max-width: 559px) {
	.elj--linje .elj-fr__grid { grid-template-columns: 1fr; }
	.elj--linje .elj-fr__id { flex-direction: row; justify-content: space-between; border-bottom: 1px solid var(--elj-line); padding-bottom: 12px; }
	.elj.elj--linje .elj-fr__ruta dd { white-space: normal; font-size: .95rem; }
	.elj--linje .elj-fr__ruta { padding: 2px 0 2px 12px; }
	.elj--linje .elj-fr__fakta { gap: 12px 0; }
	.elj--linje .elj-fr--flagga .elj-fr__grid { padding-top: 48px; }
}

/* =====================================================================
   Panel v2: namnet i panelen, centrerad knapptext, lista på mobil
   ===================================================================== */
.elj--panel .elj-fr__grid { grid-template-areas: "id fakta cta" "id exempel cta"; }
.elj--panel .elj-fr__fakta { margin-top: 20px; }
.elj--panel .elj-fr__id { gap: 10px; }
.elj--panel .elj-fr__id .elj-fr__namnrad,
.elj--panel .elj-fr--flagga .elj-fr__id .elj-fr__namnrad {
	flex-direction: column; align-items: center; gap: 1px; margin: 2px 0 0; text-align: center;
}
.elj.elj--panel .elj-fr__id .elj-fr__namn { font-size: 1rem; text-align: center; }
.elj--panel .elj-fr__id .elj-fr__typ { font-size: .76rem; }

/* Knapptexten centrerad, pilen i högerkanten */
.elj--panel .elj-fr__knapp { position: relative; justify-content: center; padding: 14px 48px; text-align: center; }
.elj--panel .elj-fr__pil { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); }

@container elj (max-width: 899px) {
	.elj--panel .elj-fr__grid { grid-template-areas: "id fakta" "cta cta" "exempel exempel"; }
	.elj--panel .elj-fr__id { grid-row: auto; }
	.elj--panel .elj-fr__cta { padding-left: 18px; }
}

@container elj (max-width: 559px) {
	.elj--panel .elj-fr__grid { grid-template-areas: "id" "fakta" "cta" "exempel"; }

	/* Logga till vänster, namn och recension till höger */
	.elj--panel .elj-fr__id {
		display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
		align-items: center; justify-content: stretch; text-align: left;
	}
	.elj--panel .elj-fr__id > .elj-fr__logga { grid-row: 1 / span 2; max-width: 110px; max-height: 40px; }
	.elj--panel .elj-fr__id .elj-fr__namnrad,
	.elj--panel .elj-fr--flagga .elj-fr__id .elj-fr__namnrad {
		flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; text-align: left; justify-content: flex-start;
	}
	.elj.elj--panel .elj-fr__id .elj-fr__namn { text-align: left; }
	.elj--panel .elj-fr__id .elj-fr__recension { justify-self: start; }

	/* De åtta uppgifterna som lista: etikett till vänster, värde till höger */
	.elj--panel .elj-fr__fakta { grid-template-columns: 1fr; gap: 0; margin-top: 10px; }
	.elj--panel .elj-fr__ruta {
		display: flex; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px;
		background: none; border: 0; border-bottom: 1px solid var(--elj-line); border-radius: 0; padding: 9px 0;
	}
	.elj--panel .elj-fr__ruta:last-child { border-bottom: 0; }
	.elj--panel .elj-fr__ruta dt { font-size: .9rem; margin: 0; }
	.elj.elj--panel .elj-fr__ruta dd { flex: 0 1 auto; font-size: .95rem; text-align: right; justify-content: flex-end; white-space: normal; }
	.elj--panel .elj-fr__ruta--eff { background: var(--elj-gron-ljus); border-radius: 8px; margin: 2px -10px; padding: 9px 10px; border-bottom-color: transparent; }

	/* Knapp och Mer information på samma rad */
	.elj--panel .elj-fr__cta { flex-direction: row; align-items: center; gap: 8px; padding-left: 0; }
	.elj--panel .elj-fr__knapp { flex: 1 1 auto; min-width: 0; padding: 13px 40px 13px 16px; font-size: .95rem; }
	.elj--panel .elj-fr__pil { width: 24px; height: 24px; padding: 5px; right: 8px; }
	.elj.elj--panel .elj-fr__merknapp { flex: 0 0 auto; white-space: nowrap; font-size: .82rem; padding: 4px 2px; }
}
.elj--panel .elj-fr__id .elj-fr__namnrad { grid-area: auto; }
.elj--panel .elj-fr__knapp { padding: 14px 40px; white-space: nowrap; }
.elj--panel .elj-fr--flagga .elj-fr__id { padding-top: 58px; }
@container elj (max-width: 1099px) {
	.elj--panel .elj-fr__knapp { padding: 13px 36px 13px 22px; font-size: .92rem; }
}
@container elj (max-width: 559px) {
	.elj--panel .elj-fr__id .elj-fr__namnrad { grid-column: 2; grid-row: 1; align-self: end; }
	.elj--panel .elj-fr__id .elj-fr__recension { grid-column: 2; grid-row: 2; align-self: start; }
	.elj--panel .elj-fr__id > .elj-fr__logga { grid-column: 1; grid-row: 1 / span 2; }
	.elj--panel .elj-fr--flagga .elj-fr__id { padding-top: 50px; }
	.elj--panel .elj-fr__knapp { padding: 13px 40px 13px 16px; }
}

/* =====================================================================
   Filter, sortering och flikar (1.8)
   Hög specificitet (.elj .x) och återställning av knappar och fält, så att
   temats stilar för button, input och select inte slår igenom.
   ===================================================================== */
.elj [hidden] { display: none !important; }

.elj .elj-filter {
	--elj-f-ink: var(--elj-ink);
	--elj-f-accent: var(--elj-ink);
	--elj-f-valt: #1d1b4f;
	background: var(--elj-tint, #f4f6fa); border: 1px solid var(--elj-line); border-radius: 14px;
	padding: 16px; margin: 0 0 16px; display: grid; gap: 12px;
}
.elj .elj-filter button, .elj .elj-filter select, .elj .elj-filter input {
	font: inherit; letter-spacing: normal; text-transform: none; line-height: 1.2; margin: 0; box-shadow: none;
}
.elj .elj-filter button { cursor: pointer; }
.elj .elj-filter__topp { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 14px 22px; align-items: end; }
.elj .elj-filter__etikett { display: block; font-weight: 700; font-size: .9rem; margin: 0 0 6px; color: var(--elj-f-ink); }
.elj .elj-filter__beloppfalt { position: relative; display: flex; align-items: center; }
.elj .elj-filter__beloppfalt input {
	width: 100%; height: 46px; padding: 0 42px 0 14px; border: 1px solid #c9cbe0; border-radius: 10px;
	background: #fcfbf8; color: var(--elj-f-ink); font-size: 1.05rem; font-weight: 700; outline: none;
}
.elj .elj-filter__beloppfalt input:focus { border-color: var(--elj-f-valt); box-shadow: 0 0 0 3px rgba(29, 27, 79, .15); }
.elj .elj-filter__beloppfalt span { position: absolute; right: 14px; color: var(--elj-muted); font-weight: 600; pointer-events: none; }
.elj .elj-filter__forval { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.elj .elj-filter__forval::-webkit-scrollbar { display: none; }
.elj .elj-filter__forvalknapp {
	background: #fcfbf8; border: 1px solid #c9cbe0; color: var(--elj-f-ink); border-radius: 999px;
	padding: 6px 12px; font-size: .82rem; font-weight: 600; white-space: nowrap; flex: 0 0 auto;
}
.elj .elj-filter__forvalknapp:hover { border-color: var(--elj-f-valt); background: #fcfbf8; color: var(--elj-f-ink); }
.elj .elj-filter__forvalknapp[aria-pressed="true"] { background: var(--elj-f-valt); border-color: var(--elj-f-valt); color: #fff; }

.elj .elj-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.elj .elj-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.elj .elj-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.elj .elj-chip__text {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px;
	background: #fcfbf8; border: 1px solid #c9cbe0; color: var(--elj-f-ink); font-size: .9rem; font-weight: 600;
	transition: background .12s ease, border-color .12s ease;
}
.elj .elj-chip__text::before {
	content: ""; width: 16px; height: 16px; margin-right: 8px; border-radius: 4px; border: 1.6px solid #a6a9c4; flex: 0 0 auto;
	background: #fcfbf8 center / 12px 12px no-repeat;
}
.elj .elj-chip input[data-grupp]:not([data-grupp=""]) + .elj-chip__text::before { border-radius: 50%; }
.elj .elj-chip:hover .elj-chip__text { border-color: var(--elj-f-valt); }
.elj .elj-chip input:checked + .elj-chip__text { background: #eceafd; border-color: var(--elj-f-valt); }
.elj .elj-chip input:checked + .elj-chip__text::before {
	border-color: var(--elj-f-valt); background-color: var(--elj-f-valt);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.elj .elj-chip input:focus-visible + .elj-chip__text { outline: 3px solid rgba(29, 27, 79, .35); outline-offset: 2px; }
.elj .elj-chip.is-av { cursor: not-allowed; }
.elj .elj-chip.is-av .elj-chip__text { opacity: .45; }
.elj .elj-chip__antal { color: var(--elj-muted); font-weight: 500; }

.elj .elj-filter__verktyg { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--elj-line); }
.elj .elj-filter__fler {
	display: inline-flex; align-items: center; gap: 8px; background: #fcfbf8; border: 1px solid #c9cbe0;
	color: var(--elj-f-ink); border-radius: 10px; padding: 9px 14px; font-weight: 700; font-size: .9rem;
}
.elj .elj-filter__fler:hover { border-color: var(--elj-f-valt); background: #fcfbf8; color: var(--elj-f-ink); }
.elj .elj-filter__fler[aria-expanded="true"] { border-color: var(--elj-f-valt); }
.elj .elj-filter__valda {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: var(--elj-f-valt); color: #fff; font-size: .75rem;
}
.elj .elj-filter__status { margin: 0 auto 0 0; color: var(--elj-muted); font-size: .88rem; font-weight: 600; }
.elj .elj-filter__sortera { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .88rem; color: var(--elj-muted); font-weight: 600; }
.elj .elj-filter__sortera select {
	height: 40px; padding: 0 34px 0 12px; border: 1px solid #c9cbe0; border-radius: 10px; color: var(--elj-f-ink);
	font-weight: 700; font-size: .9rem; -webkit-appearance: none; appearance: none; max-width: 100%;
	background: #fcfbf8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%231d1b4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 12px no-repeat;
}

/* Fler filter: på större skärmar fälls panelen ut i flödet */
.elj .elj-filter__panel {
	position: static; inset: auto; width: auto; max-width: none; margin: 0; padding: 14px 0 0; border: 0;
	border-top: 1px solid var(--elj-line); background: transparent; color: var(--elj-f-ink);
}
.elj .elj-filter__panel:not([open]) { display: none; }
.elj .elj-filter__panelhuvud { display: none; }
.elj .elj-filter__grupper { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 22px; }
.elj .elj-filter__grupp { margin: 0; padding: 0; border: 0; min-width: 0; }
.elj .elj-filter__grupp legend { padding: 0; margin: 0 0 8px; font-weight: 700; font-size: .9rem; color: var(--elj-f-ink); }
.elj .elj-filter__panelfot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.elj .elj-filter__rensa {
	background: transparent; border: 0; color: var(--elj-f-ink); text-decoration: underline; text-underline-offset: 3px;
	padding: 10px 6px; font-weight: 600; font-size: .9rem;
}
.elj .elj-filter__rensa:hover { background: transparent; color: var(--elj-f-ink); }
.elj .elj-filter__visa { display: none; }

/* Mobil: samma panel som bottenpanel (modal <dialog>, ligger överst oavsett tema) */
.elj .elj-filter__panel.is-modal {
	position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 85vh; margin: 0;
	padding: 0; border: 0; border-radius: 18px 18px 0 0; background: #fcfbf8; overflow: auto;
	box-shadow: 0 -12px 40px rgba(0, 0, 0, .18); animation: elj-upp .22s ease-out;
}
.elj .elj-filter__panel.is-modal::backdrop { background: rgba(14, 14, 40, .45); }
.elj .elj-filter__panel.is-modal .elj-filter__panelhuvud {
	display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1;
	background: #fcfbf8; padding: 16px 18px 12px; border-bottom: 1px solid var(--elj-line);
}
.elj .elj-filter__panelrubrik { margin: 0; font-size: 1.1rem; }
.elj .elj-filter__stang { background: transparent; border: 0; color: var(--elj-f-ink); padding: 6px; border-radius: 8px; display: inline-grid; place-items: center; }
.elj .elj-filter__stang:hover { background: var(--elj-tint, #f4f6fa); color: var(--elj-f-ink); }
.elj .elj-filter__panel.is-modal .elj-filter__grupper { grid-template-columns: 1fr; padding: 16px 18px; gap: 18px; }
.elj .elj-filter__panel.is-modal .elj-filter__panelfot {
	position: sticky; bottom: 0; background: #fcfbf8; margin: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--elj-line); justify-content: space-between; align-items: center;
}
.elj .elj-filter__panel.is-modal .elj-filter__visa {
	display: inline-block; text-align: center; background: var(--elj-cta); color: #fff;
	border: 0; border-radius: 10px; padding: 13px 20px; font-weight: 800; flex: 1 1 auto; margin-left: 12px;
}
@keyframes elj-upp { from { transform: translateY(30px); opacity: .4; } to { transform: none; opacity: 1; } }

.elj .elj-filter__sa { font-size: .85rem; color: var(--elj-muted); }
.elj .elj-filter__sa summary { cursor: pointer; display: inline; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.elj .elj-filter__sa p { margin: 8px 0 0; max-width: 70ch; line-height: 1.5; }

.elj .elj-filter__tomt {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: #fff7e6; border: 1px solid #f1d9a6; color: #5a4310;
}
.elj .elj-filter__tomt p { margin: 0; line-height: 1.45; }
.elj .elj-fr__narmast {
	margin: 0; padding: 9px 16px; background: #fff7e6; color: #6b4c08; font-size: .85rem; font-weight: 600;
	border-bottom: 1px solid #f1d9a6;
}

/* Flikar i kortet: lån och kredit hos samma långivare */
.elj .elj-fr__flikar {
	display: flex; gap: 6px; padding: 10px 12px; background: var(--elj-tint, #f4f6fa); border-bottom: 1px solid var(--elj-line);
	overflow-x: auto;
}
.elj .elj-fr--flagga .elj-fr__flikar { padding-left: 170px; }
.elj .elj-fr__flik {
	display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0;
	background: #fcfbf8; border: 1px solid #c9cbe0; color: var(--elj-ink); border-radius: 10px; padding: 7px 14px;
	font: inherit; font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: normal; line-height: 1.2;
	cursor: pointer; box-shadow: none; white-space: nowrap;
}
.elj .elj-fr__flik:hover { border-color: var(--elj-ink); background: #fcfbf8; color: var(--elj-ink); }
.elj .elj-fr__flik[aria-selected="true"] { background: var(--elj-ink); border-color: var(--elj-ink); color: #fff; }
.elj .elj-fr__flik:focus-visible { outline: 3px solid rgba(29, 27, 79, .35); outline-offset: 2px; }
.elj .elj-fr__flikinfo { font-size: .75rem; font-weight: 500; opacity: .8; }

@container elj (max-width: 699px) {
	.elj .elj-filter { padding: 14px; gap: 10px; border-radius: 12px; }
	.elj .elj-filter__topp { grid-template-columns: 1fr; gap: 12px; }
	.elj .elj-filter__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 2px 14px 4px; scrollbar-width: none; }
	.elj .elj-filter__chips::-webkit-scrollbar { display: none; }
	.elj .elj-filter__panel .elj-filter__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
	.elj .elj-chip__text { white-space: nowrap; font-size: .85rem; min-height: 38px; padding: 7px 12px; }
	.elj .elj-filter__verktyg { gap: 8px; }
	.elj .elj-filter__status { order: 3; flex-basis: 100%; margin: 0; }
	.elj .elj-filter__sortera { margin-left: auto; }
	.elj .elj-filter__sortera > span { display: none; }
	.elj .elj-filter__sortera select { max-width: 160px; font-size: .85rem; padding-right: 30px; }
	.elj .elj-filter__fler { padding: 9px 12px; }
	.elj .elj-fr--flagga .elj-fr__flikar { padding-left: 12px; padding-top: 44px; }
}
/* Rader som rullar i sidled får aldrig trycka ut rutan */
.elj .elj-filter, .elj .elj-filter__topp > *, .elj .elj-filter__belopp, .elj .elj-filter__chips { min-width: 0; }
.elj .elj-filter__topp > * { max-width: 100%; }
.elj .elj-fr__avgiftstext { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--elj-tint, #f4f6fa); font-size: .88rem; line-height: 1.5; color: var(--elj-ink); }

/* iOS Safari zoomar in på fält med text under 16px. */
@media (hover: none) and (pointer: coarse) {
	.elj .elj-filter__sortera select, .elj .elj-filter__beloppfalt input { font-size: 16px; }
}

/* [kostnad] – vad ett belopp kostar hos varje långivare */
.elj-kostnad { margin: 1.5em 0; }
.elj-kostnad__rulla { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.elj-kostnad table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fcfbf8; font-size: .92rem; }
.elj-kostnad th, .elj-kostnad td { padding: 10px 12px; border-bottom: 1px solid #e6e1d7; text-align: left; vertical-align: top; }
.elj-kostnad thead th { font-size: .8rem; color: #5b6779; font-weight: 700; background: #f3efe7; }
.elj-kostnad tbody th { font-weight: 700; }
.elj-kostnad__typ { display: block; font-weight: 400; font-size: .78rem; color: #5b6779; }
.elj-kostnad__tak { display: block; font-size: .72rem; color: #8a5a00; }
.elj-kostnad tbody tr:first-child td strong { color: #1e7f45; }
@media (max-width: 781px) {
	.elj-kostnad tbody th { position: sticky; left: 0; background: #fcfbf8; box-shadow: 1px 0 0 #e6e1d7; }
}

/* Länk till omdömet under loggan */
.elj .elj-pk__omdome, .elj .elj-kort__omdome { display: block; margin-top: 2px; color: var(--elj-lank) !important; font-weight: 700; font-size: .82rem; text-decoration: none !important; }
.elj .elj-pk__omdome:hover, .elj .elj-kort__omdome:hover { text-decoration: underline !important; }

/* [lanvarning] fristående, utan kortets ram */
.elj-varning-fri { margin: 1.5em 0; }
.elj-varning-fri .elj-fr__varning { margin: 0; padding: 14px 16px; border: 1px solid var(--elj-line, #e3e7e6); border-radius: 10px; }

/* ---------- Stilen "Kreditochfinans.se" (värdet faktaruta). Panel och Linje påverkas inte. ---------- */
.elj--faktaruta:not(.elj--panel):not(.elj--linje) {
	--elj-ink: #13221e; --elj-muted: #5f7069; --elj-line: #e3ebe7; --elj-cta: #0e7a5a; --elj-lank: #0e7a5a;
	--elj-kf-yta: #edf4f0; --elj-kf-skugga: 0 1px 2px rgba(12,47,41,.04), 0 12px 32px -16px rgba(12,47,41,.18);
}
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr-lista { gap: 16px; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr { background: #fff; border: 1px solid var(--elj-line); border-radius: 22px; box-shadow: var(--elj-kf-skugga); overflow: hidden; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__grid { grid-template-columns: 190px minmax(0, 1fr) 220px; column-gap: 28px; padding: 22px 28px; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__namnrad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.elj.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__namn { font-size: .78rem; letter-spacing: .08em; color: var(--elj-muted); }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__id { align-items: flex-start; text-align: left; gap: 12px; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__logga { max-width: 150px; max-height: 50px; object-position: left center; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__recension { color: var(--elj-cta) !important; font-size: .9rem; }
/* Loggan länkar till omdömet. Under den visas banker och Swish med direktutbetalning. */
.elj-fr__loggalank { display: inline-flex; border-radius: 8px; transition: opacity .15s; }
.elj-fr__loggalank:hover { opacity: .8; }
.elj-fr__loggalank:focus-visible { outline: 2px solid var(--elj-cta); outline-offset: 4px; }
.elj-fr__utb { display: flex; flex-direction: column; gap: 6px; }
.elj-fr__utb-rubrik { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--elj-muted); line-height: 1; }
.elj-fr__utb-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.elj-fr__utb-stack { display: flex; padding-left: 8px; }
.elj-fr__utb-stack img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; box-shadow: 0 1px 3px rgba(12,47,41,.18); background: #fff; object-fit: cover; display: block; }
.elj-fr__utb-swish { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--elj-line); border-radius: 999px; background: #fff; font-size: .8rem; font-weight: 700; color: var(--elj-ink); white-space: nowrap; }
.elj-fr__utb-swish img { width: auto; height: 17px; display: block; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__fakta { gap: 10px; grid-template-columns: repeat(4, minmax(min-content, 1fr)); }
/* Värden bryts aldrig mitt i ett intervall, rutan blir bredare i stället. */
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta dd { overflow-wrap: normal; word-break: normal; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta { text-align: left; background: var(--elj-kf-yta); border-radius: 14px; padding: 11px 14px; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta dt { font-size: .76rem; font-weight: 600; color: var(--elj-muted); margin: 0 0 2px; overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta dd { background: none; padding: 0; margin: 0; justify-content: flex-start; text-transform: none; letter-spacing: 0; font-size: .98rem; font-weight: 800; color: var(--elj-ink); font-variant-numeric: tabular-nums; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__cta { gap: 10px; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__knapp { border-radius: 999px; text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 1rem; padding: 15px 18px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -8px rgba(14,122,90,.6); }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__knapp:hover { filter: none; background: #0b6249; }
.elj.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__merknapp { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: .9rem; color: #33463f; }
.elj.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__exempel { border-top-color: var(--elj-line); font-size: .78rem; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__mer { background: var(--elj-kf-yta); border-top-color: var(--elj-line); }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__varning { margin: 0; padding: 14px 28px; background: #fff6f5; border-top: 1px solid #f4d6d2; color: #4a2a28; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-visa-alla__knapp { background: #fff; border: 1px solid #d6e2dd; color: #0c2f29; padding: 14px 28px; }
.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-visa-alla__knapp:hover { background: #0c2f29; border-color: #0c2f29; color: #fff; }
@container elj (max-width: 1099px) {
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__grid { grid-template-columns: 150px minmax(0, 1fr) 190px; column-gap: 20px; padding: 20px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta dd { font-size: .9rem; white-space: normal; }
}
@container elj (max-width: 899px) {
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__grid { grid-template-columns: 140px minmax(0, 1fr); }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__fakta { grid-template-columns: repeat(2, minmax(min-content, 1fr)); }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__varning { padding: 14px 20px; }
}
@container elj (max-width: 559px) {
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr { border-radius: 20px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__id { flex-direction: row; justify-content: space-between; align-items: center; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__utb { align-items: flex-end; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__utb-stack img { width: 26px; height: 26px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__utb-swish { height: 26px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__fakta { grid-template-columns: repeat(2, minmax(min-content, 1fr)); gap: 8px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta { padding: 10px 12px; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__ruta dd { font-size: .86rem; }
	.elj--faktaruta:not(.elj--panel):not(.elj--linje) .elj-fr__varning { padding: 12px 16px; grid-template-columns: 34px 1fr; }
}

/* ---------- [lantopp] ---------- */
.elj-topp { --t-ink: var(--kf-forest, #0c2f29); --t-green: var(--kf-green, #0e7a5a); --t-line: var(--kf-line, #e3ebe7); --t-yta: var(--kf-surface, #f3f8f6); --t-muted: #5f7069; font-variant-numeric: tabular-nums; }
.elj-topp__rader { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.elj-topp__rad { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--t-line); border-radius: 14px; background: #fff; margin: 0; }
.elj-topp__rad--forst { background: var(--t-yta); border-color: #cfe6dc; }
.elj-topp__logga { width: 100px; height: 32px; object-fit: contain; object-position: left center; display: block; }
.elj-topp__namn { font-weight: 800; color: var(--t-ink); }
.elj-topp__summa { display: flex; flex-direction: column; line-height: 1.25; }
.elj-topp__etikett { font-size: .75rem; color: var(--t-muted); }
.elj-topp__summa strong { font-size: 1.02rem; color: var(--t-ink); }
.elj-topp__markor { display: inline-flex; color: var(--t-green); line-height: 0; justify-self: end; }
.elj-topp__markor svg { display: block; filter: drop-shadow(0 4px 8px rgba(14,122,90,.28)); }
.elj-topp .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.elj-topp__visa { font-size: .85rem; font-weight: 700; color: var(--t-green) !important; text-decoration: none !important; white-space: nowrap; }
.elj-topp__alla { display: flex; justify-content: center; align-items: center; margin-top: 16px; height: 52px; border-radius: 999px; background: var(--t-green); color: #fff !important; font-weight: 700; text-decoration: none !important; }
.elj-topp__alla:hover { background: #0b6249; }
.elj-topp--tabell .elj-topp__alla { background: #fff; color: var(--t-ink) !important; border: 1px solid #d6e2dd; width: max-content; margin: 18px auto 0; padding: 0 28px; }
.elj-topp__tabell { background: #fff; border: 1px solid var(--t-line); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(12,47,41,.04), 0 12px 32px -16px rgba(12,47,41,.18); }
.elj-topp__huvud, .elj-topp__trad { display: grid; grid-template-columns: 44px 170px 1fr 1.2fr 1fr 1fr 180px; gap: 16px; align-items: center; padding: 18px 26px; }
.elj-topp__huvud { padding: 13px 26px; background: var(--t-yta); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
.elj-topp__trad { border-top: 1px solid #e9efec; font-size: .95rem; color: #33463f; }
.elj-topp__trad strong { color: var(--t-ink); }
.elj-topp__plats { width: 32px; height: 32px; border-radius: 50%; background: var(--t-line); color: var(--t-ink); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.elj-topp__plats--forst { background: var(--t-green); color: #fff; }
.elj-topp__id { display: flex; flex-direction: column; gap: 6px; }
.elj-topp__omdome { font-size: .82rem; font-weight: 700; color: var(--t-green) !important; text-decoration: none !important; }
.elj-topp__chip { display: inline-block; background: #d8f3e6; color: var(--t-ink); font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.elj-topp__total { font-size: 1.15rem; white-space: nowrap; }
.elj-topp__knapp { display: flex; justify-content: center; align-items: center; height: 46px; border-radius: 999px; background: var(--t-green); color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: 0 8px 20px -8px rgba(14,122,90,.6); }
.elj-topp__knapp:hover { background: #0b6249; }
@media (max-width: 900px) {
	.elj-topp__huvud { display: none; }
	.elj-topp__trad { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "plats id id" ". eff kuk" ". avg avg" ". tot tot" "knapp knapp knapp"; gap: 12px 14px; padding: 18px; }
	.elj-topp__trad > * { min-width: 0; }
	.elj-topp__trad > [data-etikett] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: .9rem; }
	.elj-topp__trad > [data-etikett]::before { content: attr(data-etikett); font-size: .72rem; color: var(--t-muted); font-weight: 600; }
	.elj-topp__trad > .elj-topp__plats { grid-area: plats; }
	.elj-topp__trad > .elj-topp__id { grid-area: id; }
	.elj-topp__trad > [data-etikett="Effektiv ränta"] { grid-area: eff; }
	.elj-topp__trad > [data-etikett="Kreditupplysning"] { grid-area: kuk; }
	.elj-topp__trad > [data-etikett="Avgifter"] { grid-area: avg; }
	.elj-topp__trad > [data-etikett="Totalt att betala"] { grid-area: tot; }
	.elj-topp__trad > :last-child { grid-area: knapp; }
	.elj-topp__chip { white-space: normal; word-break: normal; overflow-wrap: normal; hyphens: none; }
}

/* ---------- [lansidfakta] ---------- */
.elj-sidfakta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin: 0; padding: 20px 22px; background: #fff; border: 1px solid #e3ebe7; border-radius: 20px; box-shadow: 0 1px 2px rgba(12,47,41,.04), 0 12px 32px -16px rgba(12,47,41,.18); font-variant-numeric: tabular-nums; }
.elj-sidfakta div { min-width: 0; }
.elj-sidfakta dt { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5f7069; margin: 0; }
.elj-sidfakta dd { margin: 2px 0 0; font-size: 1.5rem; font-weight: 800; color: var(--kf-forest, #0c2f29); line-height: 1.2; }
@media (max-width: 640px) { .elj-sidfakta { padding: 16px; gap: 12px; } .elj-sidfakta dd { font-size: 1.2rem; } }

/* ---------- [lanstat falt="loggor" visa="karusell"] ---------- */
.elj-karusell { display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.elj-karusell__spar { display: flex; flex: 0 0 auto; align-items: center; gap: 48px; padding-right: 48px; animation: elj-karusell 40s linear infinite; }
.elj-karusell__spar img { height: 30px !important; width: auto !important; max-width: 120px; object-fit: contain; flex: 0 0 auto; }
.elj-karusell:hover .elj-karusell__spar { animation-play-state: paused; }
@keyframes elj-karusell { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .elj-karusell__spar { animation: none; } .elj-karusell__spar[aria-hidden] { display: none; } .elj-karusell { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } }
@media (max-width: 640px) { .elj-karusell__spar { gap: 32px; padding-right: 32px; animation-duration: 30s; } .elj-karusell__spar img { height: 26px !important; max-width: 100px; } }
@media (max-width: 480px) {
	.elj-topp__rad { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 6px 12px; }
	.elj-topp__logga { width: 92px; }
}
