/* Komponenterna på startsidan (varv 1). Färger, storlekar och avstånd kommer ur tokens.css (designsystemet);
   här står bara hårlinjer, procent, em och brytpunkter som egna värden. kontrollera-tokens.py provar det. */

/* Knappar och länkar med pil */
.knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--knapp-hojd);
	padding: 0 var(--wp--preset--spacing--50);
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radie);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-tat);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.knapp--primar {
	background: var(--wp--preset--color--gron);
	border-color: var(--wp--preset--color--gron);
	color: var(--wp--preset--color--bas);
}

.knapp--primar:hover {
	background: var(--wp--preset--color--gron-mork);
	border-color: var(--wp--preset--color--gron-mork);
	color: var(--wp--preset--color--bas);
}

.knapp--ljus {
	background: var(--wp--preset--color--bas);
	border-color: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
}

.knapp--ljus:hover {
	background: var(--wp--preset--color--yta);
	border-color: var(--wp--preset--color--yta);
	color: var(--wp--preset--color--text);
}

.knapp--kontur {
	background: transparent;
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--text);
}

.knapp--kontur:hover {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bas);
}

.knappar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

@media (max-width: 47.99rem) {
	.knappar .knapp {
		padding-inline: var(--wp--preset--spacing--40);
	}
}

.lank-pil {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tryckyta);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

.lank-pil .ikon {
	transition: transform 0.15s;
}

.lank-pil:hover .ikon {
	transform: translateX(var(--wp--preset--spacing--10));
}

/* Sidhuvudet */
.sidhuvud {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--bas);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.sidhuvud__inre {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	height: var(--wp--custom--sidhuvud-hojd);
}

.sidhuvud__logga {
	flex: 0 1 auto;
	min-width: 0;
}

/* Logotypen får krympa lite på de smalaste skärmarna (320 px), så att varukorgen och Meny ryms utan sidledsrullning */
.sidhuvud__logga img {
	width: var(--wp--custom--logga-bredd);
	max-width: 100%;
	height: auto;
	border-radius: 0;
}

.huvudmeny {
	display: none;
}

.huvudmeny > ul {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
}

.huvudmeny a,
.huvudmeny__knapp,
.mobilmeny a {
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.huvudmeny a,
.huvudmeny__knapp {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-height: var(--wp--custom--tryckyta);
	font-size: var(--wp--preset--font-size--bas);
}

.huvudmeny__knapp {
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.huvudmeny a:hover,
.huvudmeny__knapp:hover {
	color: var(--wp--preset--color--gron-mork);
}

/* Sidan som visas är understruken i menyn (aria-current), så att man ser var man är */
.huvudmeny a[aria-current="page"],
.mobilmeny a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

.huvudmeny__knapp .ikon {
	transition: transform 0.15s;
}

.huvudmeny__knapp[aria-expanded="true"] .ikon {
	transform: rotate(180deg);
}

/* Genvägar i mobilen: de två viktigaste länkarna syns utan att menyn öppnas (F-1, F-2). Raden följer inte med när
   sidan rullas, så att det fasta sidhuvudet förblir litet (F-13). På dator står länkarna i huvudmenyn. */
.snabblankar {
	border-bottom: 1px solid var(--wp--preset--color--linje);
	background: var(--wp--preset--color--bas);
}

.snabblankar ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--50);
	margin: 0;
}

.snabblankar a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

.snabblankar a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

@media (min-width: 64rem) {
	.snabblankar {
		display: none;
	}
}

.kassalage .snabblankar {
	display: none;
}

/* Undermenyn Hjälp: en lista som visas med knappen (WAI-ARIA, mönstret disclosure navigation). Den hänger från
   sidhuvudets underkant. */
.huvudmeny__grupp {
	position: relative;
}

.undermeny {
	position: absolute;
	top: calc(100% + (var(--wp--custom--sidhuvud-hojd) - var(--wp--custom--tryckyta)) / 2);
	left: calc(-1 * var(--wp--preset--spacing--40));
	display: grid;
	margin: 0;
	padding: var(--wp--preset--spacing--20) 0;
	border: 1px solid var(--wp--preset--color--linje);
	background: var(--wp--preset--color--bas);
}

.undermeny a {
	display: flex;
	padding-inline: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	white-space: nowrap;
}

.undermeny a:hover {
	background: var(--wp--preset--color--yta);
}

.sidhuvud__verktyg {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-left: auto;
}

.sidhuvud__korg,
.sidhuvud__menyknapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	min-width: var(--wp--custom--tryckyta);
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--20);
	border: 0;
	background: none;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	cursor: pointer;
}

/* Mobilmenyn: ett lager under sidhuvudet som täcker sidan och rullar för sig, som kärnblocket navigation gör
   (overlayMenu). Sidan bakom rullar inte medan menyn är öppen. */
.mobilmeny {
	position: fixed;
	inset: var(--wp--custom--sidhuvud-hojd) 0 0;
	z-index: 19;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-top: 1px solid var(--wp--preset--color--linje);
	background: var(--wp--preset--color--bas);
}

.meny-oppen {
	overflow: hidden;
}

.mobilmeny ul {
	margin: 0;
	padding: 0;
}

.mobilmeny > ul {
	padding: var(--wp--preset--spacing--30) var(--wp--custom--marginal) var(--wp--preset--spacing--50);
}

.mobilmeny a {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--knapp-hojd);
	font-size: var(--wp--preset--font-size--rubrik-4);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.mobilmeny__grupp {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--knapp-hojd);
	color: var(--wp--preset--color--text-dampad);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

.mobilmeny__grupp + ul a {
	padding-left: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--bas);
}

@media (min-width: 64rem) {
	.huvudmeny {
		display: block;
	}

	.sidhuvud__menyknapp,
	.mobilmeny {
		display: none;
	}
}

/* Hjälten: egen drönarbild i hela bredden, texten på en toning som ger minst 4,7:1 */
.hjalte {
	position: relative;
	display: grid;
	min-height: var(--wp--custom--hjalte-hojd);
	overflow: hidden;
	background: var(--wp--preset--color--skog);
	color: var(--wp--preset--color--bas);
}

/* Under 64rem står genvägsraden mellan sidhuvudet och hjälten; hjälten blir lika mycket lägre, så att rubriken och
   länken till reservdelarna fortfarande ryms i första skärmen */
@media (max-width: 63.99rem) {
	.hjalte {
		min-height: calc(var(--wp--custom--hjalte-hojd) - var(--wp--custom--tryckyta));
	}
}

.hjalte__media,
.hjalte__film {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hjalte__bild,
.hjalte__film {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

.hjalte__film {
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hjalte__film.spelar {
	opacity: 1;
}

.hjalte::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--toning);
	pointer-events: none;
}

.hjalte__text {
	position: relative;
	z-index: 1;
	align-self: end;
	display: grid;
	gap: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--custom--avstand-block);
}

.hjalte h1 {
	max-width: 14em;
	color: var(--wp--preset--color--bas);
}

.hjalte__ingress {
	max-width: 34em;
	font-size: var(--wp--preset--font-size--ingress);
	line-height: var(--wp--custom--radavstand-ingress);
}

/* Länken till testet i ingressen (beslut 60): vit och understruken på toningen, som länkarna i löftesraden */
.hjalte__ingress a {
	color: inherit;
}

.hjalte__ingress a:hover {
	color: var(--wp--preset--color--bas);
	text-decoration-thickness: 2px;
}

/* Länken till reservdelarna i hjälten: vit på toningen, som knapparna där */
.hjalte .lank-pil {
	justify-self: start;
	color: var(--wp--preset--color--bas);
}

.hjalte .lank-pil:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Löftena och Trustpilot i första skärmen (S-1, beslut 48): fri frakt, leveranstiden och betyget, med länken till
   upplysningen om omdömena bredvid betyget (J-16) */
.hjalte__loften {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--liten);
}

.hjalte__loften li {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tryckyta-tat);
}

.hjalte__loften a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	min-height: var(--wp--custom--tryckyta-tat);
	color: inherit;
}

.hjalte__loften a:hover {
	color: var(--wp--preset--color--bas);
	text-decoration-thickness: 2px;
}

/* Överraden ovanför rubriken (varv 7, beslut 83): produkten och formerna, i små versaler på toningen */
.hjalte__over {
	margin: 0;
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Knappen Se studsmattorna och länken till reservdelarna på en rad (T-8: ledarna har en knapp i hjälten) */
.hjalte .hjalte__val {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.hjalte .hjalte__val .lank-pil {
	margin: 0;
}

/* I mobilen och på stående skärmar står studsmattan i bildens övre del och texten under den (T-6: bilden bär
   produkten). Bilden är 30 % högre än ytan och fäst i nederkanten, så att bildens övre del skärs bort, inte produkten. */
@media (max-width: 47.99rem), (orientation: portrait) {
	.hjalte__media {
		top: -30%;
		height: 130%;
	}

	.hjalte__bild {
		object-position: 50% 100%;
	}
}

.hjalte__paus {
	position: absolute;
	top: var(--wp--preset--spacing--50);
	right: var(--wp--custom--marginal);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--linje-pa-bild);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--custom--yta-pa-bild);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	cursor: pointer;
}

/* Liggande skärm från 64rem: texten till höger och bilden förskjuten åt vänster, så att studsmattan står fri
   bredvid texten också på surfplatta och liten dator. Toningen följer textblocket och är 62 % svart vid dess
   vänsterkant, så kontrasten håller i alla bredder. Stående skärmar behåller texten nedtill, med den stående
   bilden (källorna i index.html). */
@media (min-width: 64rem) and (orientation: landscape) {
	.hjalte::after {
		background: var(--wp--custom--toning-sida);
	}

	.hjalte__bild,
	.hjalte__film {
		object-position: 100% 30%;
	}

	/* Textblocket står mot högerkanten, på breda skärmar i linje med innehållets högerkant (sidokanten) */
	.hjalte__text {
		justify-self: end;
		max-width: calc(var(--wp--custom--bildtext-bredd) + 2 * var(--wp--custom--marginal));
		margin: 0 var(--wp--custom--sidokant) 0 0;
	}

	.hjalte h1 {
		max-width: none;
	}

	.hjalte__paus {
		top: auto;
		right: auto;
		bottom: var(--wp--custom--avstand-block);
		left: calc(var(--wp--custom--sidokant) + var(--wp--custom--marginal));
	}
}

/* Siffrorna under hjälten: det som skiljer Orbit Stellar från en billigare studsmatta, i mått */
.siffror {
	padding-block: var(--wp--custom--avstand-block);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.siffror__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.siffror__lista div {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--10);
}

.siffror dt {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.siffror dd {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.siffror .tal {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-3);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
	letter-spacing: var(--wp--custom--spatiering-rubrik);
}

@media (min-width: 64rem) {
	.siffror__lista {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.siffror__lista div + div {
		padding-left: var(--wp--preset--spacing--50);
		border-left: 1px solid var(--wp--preset--color--linje);
	}
}

/* Sektioner. Två vita sektioner i rad delar på ett avstånd; en färgyta får hela avståndet runt sig. */
.sektion {
	padding-block: var(--wp--custom--sektion);
}

.sektion:not(.sektion--yta) + .sektion:not(.sektion--yta) {
	padding-top: 0;
}

.sektion--yta {
	background: var(--wp--preset--color--yta);
}

.sektion__rubrik {
	margin-bottom: var(--wp--custom--avstand-block);
}

.sektion__huvud {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--custom--avstand-block);
}

.sektion__huvud .ingress {
	max-width: var(--wp--custom--textbredd);
}

/* Orbit Stellar i två former */
.former {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.form__bildlank img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Priset och knappen står längst ned i kortet, så att de ligger i linje i båda korten oavsett textens längd */
.form__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.form h3 a {
	color: inherit;
	text-decoration: none;
}

.form h3 a:hover {
	color: var(--wp--preset--color--gron-mork);
}

.form__for {
	color: var(--wp--preset--color--text-dampad);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.form__pris {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

@media (min-width: 48rem) {
	.former {
		grid-template-columns: 1fr 1fr;
	}
}

/* Oval mot rund i text, två spalter (startsidans "Osäker på formen?") */
.formen__lista {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.formen__del {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--text);
}

.formen__for {
	color: var(--wp--preset--color--text-dampad);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.formen__fakta {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

/* På produktsidan: länken till den andra formen sist i dess kolumn */
.formen__del .lank-pil {
	justify-self: start;
}

.formen__fakta dt {
	display: inline;
	font-weight: 600;
}

.formen__fakta dt::after {
	content: ":";
}

.formen__fakta dd {
	display: inline;
}

@media (min-width: 48rem) {
	.formen__lista {
		grid-template-columns: 1fr 1fr;
	}
}

/* Bild och text bredvid varandra (köpguiden) */
.bild-text {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.bild-text__bild {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.bild-text__text {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
	max-width: var(--wp--custom--textbredd);
}

@media (min-width: 48rem) {
	.bild-text {
		grid-template-columns: 1fr 1fr;
	}
}

/* Tre argument med bild (Varför välja Trampolinspecialisten?) */
.argument {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
}

.argument li {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
}

.argument img {
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--wp--preset--spacing--20);
	object-fit: cover;
}

.argument h3 {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

@media (min-width: 48rem) {
	.argument {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.argument {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Omdömen: rubriken och betyget bredvid varandra på dator */
.omdomen__inre {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.omdomen .betyg {
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
	padding-top: 0;
	border-top: 0;
}

/* Rubriken och betyget i en spalt vid innehållets vänsterkant, i textbredd (varv 7, fynd 15) */
.omdomen__inre > h2,
.omdomen__inre > .betyg {
	max-width: var(--wp--custom--textbredd);
}

/* Länkkort: bild, rubrik, en rad och en knapp (Fler frågor? och Monteringshjälp) */
.lankkort {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
}

.lankkort li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
}

.lankkort img {
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: var(--wp--preset--spacing--20);
	object-fit: cover;
}

.lankkort .knapp {
	margin-top: auto;
}

@media (min-width: 48rem) {
	.lankkort {
		grid-template-columns: 1fr 1fr;
	}
}

/* Brödsmulor */
.brodsmulor ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--40) 0;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.brodsmulor li + li::before {
	content: "/";
	margin-right: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--linje-mork);
}

.brodsmulor li {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
}

.brodsmulor a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
	color: inherit;
}

/* Produktblocket: galleriet till vänster och köprutan till höger på dator, under varandra i mobilen */
.produkt {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	align-items: start;
}

@media (min-width: 64rem) {
	.produkt {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.kopruta {
		position: sticky;
		top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
	}
}

.galleri {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.galleri__visning {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wp--preset--color--yta);
}

.galleri__post {
	position: absolute;
	inset: 0;
	margin: 0;
}

.galleri__post img,
.galleri__post video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.galleri__post--contain {
	background: var(--wp--preset--color--bas);
}

.galleri__post--contain img {
	object-fit: contain;
}

.galleri__pil {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	cursor: pointer;
	transform: translateY(-50%);
}

.galleri__pil--fore {
	left: var(--wp--preset--spacing--30);
}

.galleri__pil--fore .ikon {
	transform: scaleX(-1);
}

.galleri__pil--nasta {
	right: var(--wp--preset--spacing--30);
}

.galleri__tummar {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}

.galleri__tummar button {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid transparent;
	background: var(--wp--preset--color--yta);
	cursor: pointer;
}

.galleri__tummar button[aria-current="true"] {
	border-color: var(--wp--preset--color--text);
}

.galleri__tummar img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.galleri__spela {
	position: absolute;
	top: 50%;
	left: 50%;
	color: var(--wp--preset--color--bas);
	fill: currentColor;
	transform: translate(-50%, -50%);
}

/* Köprutan */
.kopruta {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

/* Produktnamnet i storlek med marknadsledarnas och premiumgruppens (varv 0: 16–32 px), inte som en sidrubrik */
.kopruta h1 {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.kopruta__pris {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-3);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
}

.kopruta__tillagg {
	color: var(--wp--preset--color--text-dampad);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

.storlekar {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	border: 0;
}

.storlekar legend {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
}

.storlek {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	cursor: pointer;
}

.storlek input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.storlek:has(input:checked) {
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
}

.storlek:has(input:focus-visible) {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: var(--wp--custom--fokus);
}

.storlek__namn {
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
}

.storlek__matt {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kopruta__lager {
	font-size: var(--wp--preset--font-size--liten);
}

/* Betyget i köprutan med länken till upplysningen om hur omdömena kommer till (J-16) */
.kopruta__betyg {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--liten);
}

.kopruta__betyg a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
	color: var(--wp--preset--color--text-dampad);
}

.lager {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	margin-right: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--gron-mork);
	font-weight: 600;
}

.lager::before {
	content: "";
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: var(--wp--preset--color--gron);
}

.knapp--bred {
	width: 100%;
}

.kopruta__loften {
	display: grid;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--liten);
}

.kopruta__loften li {
	border-top: 1px solid var(--wp--preset--color--linje);
	color: var(--wp--preset--color--text-dampad);
}

/* Löftena är länkar till villkoren och kundtjänst (S-5, S-6): hela raden är tryckytan */
.kopruta__loften a {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--wp--preset--spacing--20);
	min-height: var(--wp--custom--tryckyta);
	padding-block: var(--wp--preset--spacing--20);
	color: inherit;
	text-decoration: none;
}

.kopruta__loften a::after {
	content: "›";
	margin-left: auto;
	color: var(--wp--preset--color--text-dampad);
}

.kopruta__loften a:hover strong {
	text-decoration: underline;
}

.kopruta__loften strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

/* Produktens beskrivning: rubrik till vänster, text till höger på dator */
.beskrivning__inre {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80);
}

.beskrivning__text {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

.fordelar {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.fordelar dt {
	display: inline;
	font-weight: 600;
}

.fordelar dt::after {
	content: ":";
}

.fordelar dd {
	display: inline;
}

@media (min-width: 64rem) {
	.beskrivning__inre {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* Fördelarna som fyra punkter: rubriken tydlig och texten under, en linje ovanför varje */
.punkter {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	margin: var(--wp--custom--avstand-block) 0 0;
}

.punkter div {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--text);
}

.punkter dt {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

.punkter dd {
	color: var(--wp--preset--color--text-dampad);
}

@media (min-width: 48rem) {
	.punkter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.punkter {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Det som ingår, framhävt i en ljusgrön rand under punkterna */
.beskrivning__ingar {
	margin-top: var(--wp--custom--avstand-block);
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--gron-ljus);
}

/* Stor bild och kortare text bredvid, sju mot fem; i mellanbredderna under varandra, så att bilden får hela bredden */
@media (min-width: 48rem) {
	.bild-text--stor {
		grid-template-columns: minmax(0, 1fr);
	}

	.bild-text--stor.bild-text--bild-hoger .bild-text__bild {
		order: 0;
	}
}

@media (min-width: 64rem) {
	.bild-text--stor {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.bild-text--stor.bild-text--bild-hoger {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.bild-text--stor.bild-text--bild-hoger .bild-text__bild {
		order: 1;
	}
}

/* Film och text på mörk botten: filmen spelar när den syns, på dator. Bredvid varandra först från 80rem, eftersom
   filmen annars beskärs till en hög remsa; utsnittet följer studsmattan, som står till vänster om mitten */
.film-text {
	display: grid;
	background: var(--wp--preset--color--skog);
	color: var(--wp--preset--color--skog-text);
}

.film-text h2 {
	color: var(--wp--preset--color--bas);
}

.film-text__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.film-text__media img,
.film-text__film {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 40% 50%;
}

.film-text__film {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.film-text__film.spelar {
	opacity: 1;
}

.film-text__text {
	display: grid;
	align-content: center;
	gap: var(--wp--preset--spacing--40);
	max-width: calc(var(--wp--custom--textbredd) + 2 * var(--wp--custom--marginal));
	padding: var(--wp--custom--avstand-block) var(--wp--custom--marginal);
}

@media (min-width: 80rem) {
	.film-text {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.film-text__media {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.film-text__media picture {
		position: absolute;
		inset: 0;
	}

	.film-text__text {
		padding-block: var(--wp--custom--sektion);
	}
}

/* Kvaliteten: texten bredvid en mosaik av bilder med detaljerna som texten nämner */
.kvalitet {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	align-items: center;
}

.kvalitet__text {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

.mosaik {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.mosaik figure {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.mosaik__stor {
	grid-column: 1 / -1;
}

.mosaik img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.mosaik figcaption {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

@media (min-width: 64rem) {
	.kvalitet {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* Bild och text med bilden till höger, för omväxling i säljtexten */
@media (min-width: 48rem) {
	.bild-text--bild-hoger .bild-text__bild {
		order: 1;
	}
}

/* Specifikationerna */
.jamfor .fakta-tabell__grupp {
	padding-top: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
}

.fakta-tabell__not {
	max-width: var(--wp--custom--textbredd);
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Varningarna enligt GPSR artikel 19 (beslut 71): ett dragspel under tillverkaren i Fakta */
.dragspel.varningar {
	margin-top: var(--wp--preset--spacing--60);
}

/* Montering: filmen och manualerna */
.montering {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
}

.montering__film,
.montering__manualer {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
}

.video-lank {
	position: relative;
	display: block;
	color: var(--wp--preset--color--bas);
}

.video-lank img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.video-lank::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--yta-pa-bild);
}

.video-lank__spela {
	position: absolute;
	inset: auto auto var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
}

.video-lank__spela .ikon {
	fill: currentColor;
}

.video-lank:hover .video-lank__spela {
	text-decoration: underline;
}

.dokument {
	display: grid;
	margin: 0;
	padding: 0;
}

.dokument a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--tryckyta);
	padding-block: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--linje);
}

.dokument__typ {
	flex: none;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

@media (min-width: 64rem) {
	.montering {
		grid-template-columns: 1fr 1fr;
	}
}

/* Oval mot rund i en tabell (S-4, H-1) */
.jamfor {
	margin-top: var(--wp--custom--avstand-block);
	overflow-x: auto;
}

.jamfor table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--liten);
}

.jamfor th,
.jamfor td {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--linje);
	text-align: left;
	vertical-align: top;
}

.jamfor thead th {
	border-top: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

.jamfor tbody th {
	width: 28%;
	color: var(--wp--preset--color--text-dampad);
	font-weight: 400;
}

@media (min-width: 48rem) {
	.jamfor table {
		font-size: var(--wp--preset--font-size--bas);
	}

	.jamfor tbody th {
		width: 22%;
	}
}

/* Får den plats? Ytorna i samma skala */
.plats {
	margin-top: var(--wp--custom--avstand-block);
}

.plats__huvud {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
	margin-bottom: var(--wp--preset--spacing--60);
}

.ytor {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
}

.yta a {
	display: grid;
	align-content: start;
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--liten);
	text-decoration: none;
}

.yta svg {
	width: 100%;
	height: auto;
	margin-bottom: var(--wp--preset--spacing--30);
	overflow: visible;
	background: var(--wp--preset--color--yta);
	transition: background-color 0.15s;
}

.yta a:hover svg {
	background: var(--wp--preset--color--gron-ljus);
}

.yta a:hover .yta__namn {
	text-decoration: underline;
}

/* Strecket ritas i skärmpixlar, så att det syns lika tydligt i alla storlekar (G6) */
.yta__fri {
	fill: none;
	stroke: var(--wp--preset--color--text-dampad);
	stroke-width: var(--wp--custom--streck);
	stroke-dasharray: 4 3;
	vector-effect: non-scaling-stroke;
}

.yta__matta {
	fill: var(--wp--preset--color--gron);
}

.yta__namn {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
}

.yta__matt {
	color: var(--wp--preset--color--text-dampad);
}

.plats__not {
	max-width: var(--wp--custom--textbredd);
	margin-top: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

@media (min-width: 64rem) {
	.ytor {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Reservdelar */
.delar {
	background: var(--wp--preset--color--yta);
}

.delar__inre {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.delar__text {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
}

.modeller {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}

.modeller a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font-weight: 500;
	text-decoration: none;
}

.modeller a:hover {
	border-color: var(--wp--preset--color--gron);
	color: var(--wp--preset--color--gron-mork);
}

.delar__vanligast a {
	font-weight: 500;
}

.delar__lankar {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
}

.delar__bild {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 48rem) {
	.delar__inre {
		grid-template-columns: 1fr 1fr;
	}
}

/* Testvinnare och betyg */
.bevis__inre {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}

.bevis__bild {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.bevis__text {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	justify-items: start;
	max-width: var(--wp--custom--textbredd);
}

.betyg {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	width: 100%;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--linje);
}

.betyg__tal {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-2);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
}

.betyg__tal .ikon {
	width: 0.8em;
	height: 0.8em;
	color: var(--wp--preset--color--gron);
}

/* Hur omdömena kommer till (J-16, marknadsföringslagen 12 c §) */
.betyg__not {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

@media (min-width: 48rem) {
	.bevis__inre {
		grid-template-columns: 1fr 1fr;
	}
}

/* Hjälp: samma vita botten som testvinnaren ovanför, så att bara reservdelarna har en egen färgyta. Två
   sektioner i rad på samma botten delar på ett avstånd. */
.bevis + .hjalp {
	padding-top: 0;
}

.hjalp h2 {
	margin-bottom: var(--wp--custom--avstand-block);
}

.hjalp__lista {
	display: grid;
	gap: 0 var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
}

.hjalp__lista a {
	display: grid;
	overflow-wrap: anywhere;
	align-content: start;
	gap: var(--wp--preset--spacing--10);
	min-height: 100%;
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--text);
	color: var(--wp--preset--color--text-dampad);
	text-decoration: none;
}

.hjalp__namn {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}

.hjalp__lista a:hover .hjalp__namn {
	color: var(--wp--preset--color--gron-mork);
	text-decoration: underline;
}

@media (min-width: 48rem) {
	.hjalp__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.hjalp__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 80rem) {
	.hjalp__lista {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* Avslutningen: bild i hela bredden med samma toning som hjälten */
.avslut {
	position: relative;
	display: grid;
	min-height: var(--wp--custom--avslut-hojd);
	overflow: hidden;
	color: var(--wp--preset--color--bas);
}

/* I mobilen beskärs bilden på höjden; studsmattan står till höger i bilden och ska synas (G7) */
.avslut__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% 50%;
}

.avslut::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--toning);
	pointer-events: none;
}

.avslut__text {
	position: relative;
	z-index: 1;
	align-self: end;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--custom--avstand-block);
}

.avslut h2 {
	color: var(--wp--preset--color--bas);
}

.avslut p {
	font-size: var(--wp--preset--font-size--ingress);
}

.avslut .knappar {
	margin-top: var(--wp--preset--spacing--20);
}

@media (min-width: 64rem) {
	.avslut__bild {
		object-position: 50% 50%;
	}

	.avslut::after {
		background: var(--wp--custom--toning-vanster);
	}

	.avslut__text {
		max-width: calc(var(--wp--custom--bildtext-bredd) + 2 * var(--wp--custom--marginal));
		margin: 0 0 0 var(--wp--custom--sidokant);
	}
}

/* Sidfoten */
.sidfot {
	background: var(--wp--preset--color--skog);
	color: var(--wp--preset--color--skog-text);
	font-size: var(--wp--preset--font-size--liten);
}

.sidfot a {
	color: var(--wp--preset--color--skog-text);
	text-decoration: none;
}

.sidfot a:hover {
	color: var(--wp--preset--color--bas);
	text-decoration: underline;
}

.sidfot__inre {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding-block: var(--wp--custom--avstand-block);
}

.sidfot__varumarke {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

.sidfot__logga {
	width: var(--wp--custom--logga-bredd);
	height: auto;
	border-radius: 0;
	filter: brightness(0) invert(1);
}

.sidfot__betyg {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.sidfot__betyg .ikon {
	color: var(--wp--preset--color--bas);
}

.sidfot__betyg a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
}

.sidfot__kolumn h2 {
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--bas);
}

.sidfot__kolumn ul {
	display: grid;
	margin: 0;
	padding: 0;
}

.sidfot__kolumn li a {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta-tat);
	overflow-wrap: anywhere;
}

.sidfot__kolumn .sidfot__sociala {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}

.sidfot__sociala a {
	justify-content: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	border: 1px solid var(--wp--custom--linje-skog);
	border-radius: 50%;
}

.sidfot__botten {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--linje-skog);
}

/* Företagsuppgifterna (J-4): lagret är adressen, men tar inte emot besök (Hugo 2026-10-12) */
.sidfot__juridik {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

@media (min-width: 48rem) {
	.sidfot__inre {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sidfot__botten {
		grid-template-columns: auto 1fr;
		align-items: center;
	}

	.sidfot__juridik {
		text-align: right;
	}
}

@media (min-width: 64rem) {
	.sidfot__inre {
		grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
	}
}

/* Sidtoppen på sidor utan hjälte och produktblock: rubriken och ingressen, och nästa sektion börjar direkt under */
.sidtopp {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--50) var(--wp--custom--avstand-block);
}

.sidtopp .ingress {
	max-width: var(--wp--custom--textbredd);
}

.sidtopp + .sektion:not(.sektion--yta) {
	padding-top: 0;
}

/* Produktkort i en lista: bilden på ljus botten, namnet som länk över hela kortet och priset. Två i mobilen och
   tre på dator som på sajten; studsmattorna en i taget i mobilen och två bredvid varandra från 48rem */
.produktlista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
}

.produktlista--stor {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
}

@media (min-width: 48rem) {
	.produktlista--stor {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.produktlista:not(.produktlista--stor) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.produktkort {
	position: relative;
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--20);
}

.produktkort__bild {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--wp--preset--spacing--20);
	object-fit: contain;
	background: var(--wp--preset--color--bas);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: var(--wp--custom--radie-bild);
}

.produktkort__namn {
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.produktlista--stor .produktkort__namn {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.produktkort__namn a {
	color: inherit;
	text-decoration: none;
}

/* Hela kortet är länken; fokus och pekaren syns på namnet */
.produktkort__namn a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.produktkort:hover .produktkort__namn a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.produktkort__pris {
	color: var(--wp--preset--color--text-dampad);
}

.produktkort__lager {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Varianten som passar, under produktnamnet på modellsidorna */
.produktkort__variant {
	font-size: var(--wp--preset--font-size--liten);
}

/* Nyckeltal: etiketten över värdet, med en linje ovanför, två i bredd i mobilen och fyra från 48rem. Modellens
   kännetecken på modellsidan och i kalkylatorns svar (Canyon visar nyckeltalen under bilden) */
.nyckeltal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--textbredd);
	margin: 0;
}

.nyckeltal div {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linje);
}

.nyckeltal dt {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.nyckeltal dd {
	margin: 0;
	font-weight: 600;
}

@media (min-width: 48rem) {
	.nyckeltal {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.modellsida__not {
	max-width: var(--wp--custom--textbredd);
	margin-top: var(--wp--preset--spacing--60);
}

.modellsida__not + .modellsida__not {
	margin-top: var(--wp--preset--spacing--30);
}

.modellsida__mer {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--custom--avstand-block);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--linje);
}

/* Frågan under en rubrik i argumenten (sajtens H4, skrivna som frågor för sökmotorer och AI-svar) */
.argument__fraga {
	color: var(--wp--preset--color--text-dampad);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 600;
	letter-spacing: 0;
}

/* Frågor och svar som dragspel: details och summary, som fungerar utan skript och med tangentbordet */
.dragspel {
	max-width: var(--wp--custom--textbredd);
	border-bottom: 1px solid var(--wp--preset--color--linje-mork);
}

.dragspel details {
	border-top: 1px solid var(--wp--preset--color--linje-mork);
}

.dragspel summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--tryckyta);
	padding-block: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
	list-style: none;
	cursor: pointer;
}

.dragspel summary::-webkit-details-marker {
	display: none;
}

.dragspel summary .ikon {
	flex-shrink: 0;
	transition: transform 0.2s;
}

.dragspel details[open] > summary .ikon {
	transform: rotate(180deg);
}

.dragspel summary:hover {
	color: var(--wp--preset--color--gron-mork);
}

.dragspel__svar {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--50);
}

.dragspel__svar ul {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-left: var(--wp--preset--spacing--50);
}

/* Dragspel i dragspel (frågornas kategorier på Vanliga frågor): kategorin som en större rad, frågorna indragna */
.dragspel--grupper > details > summary {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.dragspel--grupper .dragspel {
	border-bottom: 0;
}

/* Genvägar: korta frågor med en länk var, i tre spalter på dator */
.genvagar {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
}

.genvagar li {
	display: grid;
	align-content: start;
	justify-items: start;
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--text);
}

.genvagar h2 {
	font-size: var(--wp--preset--font-size--rubrik-4);
}

@media (min-width: 48rem) {
	.genvagar {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Köpvalen: formerna med pris och knapp, som avslutning på sidan om studsmattorna */
.kopval {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
}

.kopval li {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
}

.kopval__namn {
	font-size: var(--wp--preset--font-size--rubrik-2);
}

.kopval p {
	color: var(--wp--preset--color--text-dampad);
}

@media (min-width: 48rem) {
	.kopval {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mosaiken till vänster om texten, och filmen till höger om texten, för omväxling mellan produktsidorna */
@media (min-width: 64rem) {
	.kvalitet--bild-vanster {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.kvalitet--bild-vanster .mosaik {
		order: -1;
	}
}

@media (min-width: 80rem) {
	.film-text--film-hoger {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.film-text--film-hoger .film-text__media {
		order: 1;
	}
}

/* Tabeller med fyra spalter (Orbit Stellar Rund) rullar i sidled i mobilen, med radrubrikerna fasta till vänster;
   rutan går att nå och rulla med tangentbordet (WCAG 2.1.1) */
.jamfor--bred table {
	min-width: var(--wp--custom--textbredd);
}

.jamfor--bred tbody th[scope="row"],
.jamfor--bred thead th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--wp--preset--color--bas);
}

.sektion--yta .jamfor--bred tbody th[scope="row"],
.sektion--yta .jamfor--bred thead th:first-child {
	background: var(--wp--preset--color--yta);
}

.jamfor:focus-visible {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: var(--wp--custom--fokus);
}

/* Tre storlekar (Orbit Stellar Rund) står på en rad */
.storlekar--tre {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Knappar som inte går att använda (en vara som är slut) */
.knapp:disabled {
	background: var(--wp--preset--color--yta);
	border-color: var(--wp--preset--color--linje);
	color: var(--wp--preset--color--text-dampad);
	cursor: not-allowed;
}

/* Antalet varor vid varukorgen i sidhuvudet */
.sidhuvud__korg {
	position: relative;
}

.sidhuvud__antal {
	position: absolute;
	top: var(--wp--preset--spacing--10);
	right: 0;
	display: grid;
	place-items: center;
	min-width: var(--wp--custom--ikon-liten);
	min-height: var(--wp--custom--ikon-liten);
	padding: 0 var(--wp--preset--spacing--10);
	border-radius: var(--wp--custom--ikon-liten);
	background: var(--wp--preset--color--gron);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 600;
	line-height: var(--wp--custom--radavstand-tat);
}

/* Varukorgslådan: en dialog som glider in från höger (WooCommerces minivarukorg). Fokus stannar i lådan,
   Escape och klick utanför stänger den, och fokus går tillbaka till knappen som öppnade den. */
.korglada {
	box-sizing: border-box;
	width: 100%;
	max-width: min(100%, calc(var(--wp--custom--textbredd) - var(--wp--preset--spacing--80)));
	height: 100%;
	max-height: none;
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
}

.korglada::backdrop {
	background: var(--wp--custom--yta-pa-bild);
}

.korglada[open] {
	animation: korglada-in 0.2s ease-out;
}

@keyframes korglada-in {
	from {
		transform: translateX(100%);
	}
}

.korglada__panel {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
}

.korglada__huvud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--marginal);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.korglada__huvud h2:focus {
	outline: none;
}

.korglada__stang {
	display: grid;
	place-items: center;
	min-width: var(--wp--custom--tryckyta);
	min-height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.korglada__tom {
	padding: var(--wp--preset--spacing--50) var(--wp--custom--marginal);
}

/* Listan rullar för sig mellan huvudet och foten; marginalen sätts på raderna, eftersom listans egen utfyllnad
   nollställs av grundstilen för listor (ul[role="list"]) */
.korglada__lista {
	overflow-y: auto;
	margin: 0;
}

.korglada__lista .korgrad {
	margin-inline: var(--wp--custom--marginal);
}

.korglada__fot {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50) var(--wp--custom--marginal);
	border-top: 1px solid var(--wp--preset--color--linje);
}

.korglada__lank {
	justify-self: center;
	min-height: var(--wp--custom--tryckyta-tat);
	color: var(--wp--preset--color--text);
	font-size: var(--wp--preset--font-size--liten);
}

/* Betalsätten syns innan kunden fyller i något (J-3): i varukorgen och i kassans sammanfattning */
.betalsatt {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.betalsatt__rubrik {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.betalsatt__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.betalsatt__lista li {
	display: grid;
	place-items: center;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
}

.betalsatt__lista img {
	width: auto;
	height: var(--wp--custom--ikon-liten);
}

html.korg-oppen {
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.korglada[open] {
		animation: none;
	}
}

/* En rad i varukorgen: bild, namn och variant, pris, antal och ta bort */
.korgrad {
	display: grid;
	grid-template-columns: var(--wp--preset--spacing--90) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	align-items: center;
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

.korgrad__bild {
	grid-row: span 2;
	align-self: start;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--wp--preset--color--yta);
}

.korgrad__text {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.korgrad__namn {
	color: inherit;
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

.korgrad__namn:hover {
	text-decoration: underline;
}

.korgrad__variant {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.korgrad__pris {
	font-weight: 600;
}

.korgrad .antal {
	grid-column: 2;
	justify-self: start;
}

.korgrad__ta-bort {
	grid-column: 2;
	justify-self: start;
	min-height: var(--wp--custom--tryckyta-tat);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	text-decoration: underline;
	cursor: pointer;
}

@media (min-width: 48rem) {
	.korgrad--stor {
		grid-template-columns: var(--wp--preset--spacing--90) minmax(0, 1fr) auto auto;
	}

	.korgrad--stor .korgrad__bild {
		grid-row: auto;
	}

	.korgrad--stor .antal,
	.korgrad--stor .korgrad__ta-bort {
		grid-column: auto;
		justify-self: end;
	}
}

/* Antal: minus, siffran och plus */
.antal {
	display: inline-grid;
	grid-template-columns: var(--wp--custom--tryckyta) minmax(var(--wp--custom--tryckyta-tat), auto) var(--wp--custom--tryckyta);
	align-items: center;
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
}

.antal button {
	min-height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: var(--wp--preset--font-size--rubrik-4);
	cursor: pointer;
}

.antal button:disabled {
	color: var(--wp--preset--color--linje-mork);
	cursor: not-allowed;
}

.antal output {
	text-align: center;
	font-weight: 600;
}

/* Summorna: delsumma, frakt och totalt */
.summor {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.summor div {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.summor dd {
	margin: 0;
	font-weight: 600;
}

.summor dd {
	text-align: right;
}

.summor__val {
	display: block;
}

.summor__totalt {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linje-mork);
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.summor__not {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Varukorgssidan: raderna till vänster och summorna till höger på dator */
.varukorg-tom {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--40);
}

.varukorg {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.varukorg__lista {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--linje);
}

.varukorg__summor {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--yta);
}

@media (min-width: 64rem) {
	.varukorg {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}

	.varukorg__summor {
		position: sticky;
		top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
	}
}

/* Variantvalet för reservdelarna och frågorna i modellkalkylatorn: en grupp knappar per val */
.variantval,
.kalkylator__steg {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.variant {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	border: 0;
}

.variant legend {
	margin-bottom: var(--wp--preset--spacing--20);
	padding: 0;
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
}

.variant__alternativ {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.variant__val {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	cursor: pointer;
}

.variant__val input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.variant__val:has(input:checked) {
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
	font-weight: 600;
}

.variant__val:has(input:focus-visible) {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: var(--wp--custom--fokus);
}

.variant__val:hover {
	border-color: var(--wp--preset--color--text);
}

/* Ett alternativ som inte finns med de andra valen: synligt men avstängt (F-5), med streck och dämpad text */
.variant__val--av {
	border-style: dashed;
	color: var(--wp--preset--color--text-dampad);
	text-decoration: line-through;
}

.variant__val--av:hover {
	border-color: var(--wp--preset--color--linje-mork);
}

/* Köprutan för en reservdel: kort text, variantens text, lagret, antal och knapp */
.kopruta__kort,
.kopruta__variant {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.kopruta__variant {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--yta);
}

.kopruta__kop {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
}

.kopruta__fel {
	color: var(--wp--preset--color--orange-mork);
	font-weight: 600;
}

.lager--slut {
	color: var(--wp--preset--color--orange-mork);
}

.lager--slut::before {
	background: var(--wp--preset--color--orange);
}

/* Bevakning: e-post och knapp på en rad */
.bevaka {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.bevaka__rad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--20);
}

/* Formulärfält: etikett ovanför, hjälptext under etiketten, fältet i hela bredden */
.formular {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	gap: var(--wp--preset--spacing--50);
}

.falt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.falt label {
	font-weight: 600;
}

.falt__valfritt,
.falt__hjalp {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
	width: 100%;
	min-height: var(--wp--custom--knapp-hojd);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font: inherit;
}

textarea {
	resize: vertical;
}

input[type="file"] {
	width: 100%;
	max-width: 100%;
	font: inherit;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: var(--wp--custom--fokus) solid var(--wp--preset--color--gron);
	outline-offset: 0;
	border-color: var(--wp--preset--color--text);
}

.falt--fel input,
.falt--fel textarea {
	border-color: var(--wp--preset--color--orange-mork);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--orange-mork);
}

.falt__krav {
	color: var(--wp--preset--color--orange-mork);
}

/* "+ Lägg till ..." för ihopfällda valfria fält */
.kassa__tillagg {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--50);
}

.falt__lagg-till {
	min-height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--gron-mork);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Totalen vid knappen Köp och betala, också i mobilen (J-6) */
.kassa__att-betala {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--linje-mork);
}

.kassa__att-betala strong {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

.kassa__att-betala span {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kassa__sammanfattning {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.falt__fel {
	color: var(--wp--preset--color--orange-mork);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 600;
}

/* Kontakt: texten bredvid formuläret på dator */
.kontakt {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.kontakt__text {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

@media (min-width: 64rem) {
	.kontakt {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* En ensam genväg: en mening och en knapp */
.genvag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
}

/* Modellkalkylatorn: frågorna i en ljus ruta, resultatet med modellens mått och delarna som passar */
.kalkylator {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--50);
	max-width: calc(var(--wp--custom--textbredd) + var(--wp--preset--spacing--90));
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--linje);
	border-radius: var(--wp--custom--radie);
}

/* Kalkylatorn på en färgyta (reservdelssidan) får vit botten, så att den syns som ett eget verktyg */
.kalkylator--pa-yta {
	max-width: none;
	background: var(--wp--preset--color--bas);
}

.kalkylator__rubrik {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.kalkylator__steg {
	width: 100%;
}

.kalkylator__resultat {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--gron-ljus);
}

.kalkylator__resultat:focus {
	outline: none;
}

.kalkylator__resultat--ogiltig {
	background: var(--wp--preset--color--orange-ljus);
}

.kalkylator__namn {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

/* Delarna som passar, direkt i svaret (Hugo 2026-10-13): rader som varukorgens, med bilden, namnet, varianten och
   priset, och hela raden är länken till delen med varianten vald, som på produktkorten. Inga rutor i rutan: raderna
   står på svarets gröna yta med en linje emellan. */
.kalkylator__delrubrik {
	margin-top: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--bas);
}

.kalkylator__delar {
	display: grid;
	border-top: 1px solid var(--wp--preset--color--linje-mork);
}

.kalkylator__del {
	position: relative;
	display: grid;
	grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--40);
	align-items: center;
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--linje-mork);
}

.kalkylator__del-bild {
	grid-row: span 3;
	align-self: start;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--bas);
	border-radius: var(--wp--custom--radie-bild);
}

.kalkylator__del-namn {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.kalkylator__del-namn::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kalkylator__del:hover .kalkylator__del-namn {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.kalkylator__del-variant {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kalkylator__del-pris {
	font-size: var(--wp--preset--font-size--liten);
}

.kalkylator__not {
	font-size: var(--wp--preset--font-size--liten);
}

/* Svarets nyckeltal: tre i bredd från 48rem (svaret har tre) och samma linje som raderna */
.kalkylator__resultat .nyckeltal div {
	border-top-color: var(--wp--preset--color--linje-mork);
}

@media (min-width: 48rem) {
	.kalkylator__resultat .nyckeltal {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Från 48rem står priset till höger om namnet */
@media (min-width: 48rem) {
	.kalkylator__del {
		grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr) auto;
	}

	.kalkylator__del-bild {
		grid-row: span 2;
	}

	.kalkylator__del-pris {
		grid-column: 3;
		grid-row: 1;
		font-size: var(--wp--preset--font-size--bas);
	}
}

@media (max-width: 47.99rem) {
	.kalkylator {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}
}

/* Modellerna en reservdel passar: en lista med linjer, i två spalter på dator */
.passar {
	display: grid;
	margin: 0;
	padding: 0;
}

.passar li {
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--linje);
}

/* Modellerna länkar till sina sidor (beslut 49): hela raden är tryckytan */
.passar a {
	display: block;
	margin-block: calc(-1 * var(--wp--preset--spacing--30));
	padding-block: var(--wp--preset--spacing--30);
}

@media (min-width: 48rem) {
	.passar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--60);
	}
}

/* Ankare inom en sida hamnar under det fasta sidhuvudet, inte bakom det */
[data-sida] [id] {
	scroll-margin-top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
}

/* En mindre rubrik i löptext (sajtens H3 under en H2 i samma spalt) */
.rubrik--mindre {
	font-size: var(--wp--preset--font-size--rubrik-4);
}

/* Punktlista i löptext */
.lista {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-left: var(--wp--preset--spacing--50);
}

.lista li::marker {
	color: var(--wp--preset--color--gron-mork);
}

/* Två textspalter med var sin rubrik */
.spalter {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--80);
	align-items: start;
}

.spalter > div {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

@media (min-width: 64rem) {
	.spalter {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* En ruta med ljus botten för det som ska läsas först (Hoppskolans säkerhetsråd) */
.ruta {
	padding: var(--wp--preset--spacing--60);
	background: var(--wp--preset--color--gron-ljus);
}

/* Punkterna med rubrik och lista i stället för dt och dd (Monteringstips), i tre spalter */
.punkter--tre h3 {
	font-size: var(--wp--preset--font-size--rubrik-4);
}

@media (min-width: 64rem) {
	.punkter--tre {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Studsmattans delar: dragspelet bredvid två bilder på dator */
.delguide {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	align-items: start;
}

.delguide__bilder {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.delguide__bilder img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 64rem) {
	.delguide {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

/* Uppmaning: en mening eller en rubrik med text, och en knapp */
.uppmaning {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	justify-items: start;
}

.uppmaning > div {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--textbredd);
}

.uppmaning__text {
	max-width: var(--wp--custom--textbredd);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-3);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-rubrik);
}

@media (min-width: 48rem) {
	.uppmaning {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--wp--preset--spacing--60);
	}
}

/* Hoppskolans filmer: en nivå per rad med siffran i en ring, filmerna som länkar till YouTube */
.nivaer {
	display: grid;
	gap: var(--wp--custom--avstand-block);
}

.niva {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--text);
}

.niva__rubrik {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.niva__siffra {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	border: 2px solid var(--wp--preset--color--gron);
	border-radius: 50%;
	color: var(--wp--preset--color--gron-mork);
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.filmlista {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
}

.filmlista a {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--knapp-hojd);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

.filmlista a:hover {
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--gron-mork);
}

.filmlista .ikon {
	flex-shrink: 0;
	color: var(--wp--preset--color--gron);
	fill: currentColor;
}

@media (min-width: 48rem) {
	.filmlista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Textsidor: avsnittens rubriker i en spalt till vänster och texten till höger på dator */
.textsida {
	display: grid;
	gap: var(--wp--custom--avstand-block);
}

.textavsnitt {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--80);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--linje-mork);
}

.textavsnitt h2 {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.textavsnitt__text {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

@media (min-width: 64rem) {
	.textavsnitt {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

/* Vanliga frågor: grupperna i en innehållslista till vänster (fast på dator), frågorna som dragspel till höger */
.faq {
	display: grid;
	gap: var(--wp--custom--avstand-block) var(--wp--preset--spacing--80);
	align-items: start;
}

.faq__innehall ul {
	display: grid;
	margin: 0;
	border-left: 2px solid var(--wp--preset--color--linje);
}

.faq__innehall a {
	display: flex;
	align-items: center;
	min-height: var(--wp--custom--tryckyta);
	padding-left: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-weight: 500;
	text-decoration: none;
}

.faq__innehall a:hover {
	color: var(--wp--preset--color--gron-mork);
	text-decoration: underline;
}

.faq__grupper {
	display: grid;
	gap: var(--wp--custom--avstand-block);
}

.faq-grupp {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.faq-grupp__rubrik {
	font-size: var(--wp--preset--font-size--rubrik-3);
}

.faq-grupp__text {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-width: var(--wp--custom--textbredd);
}

@media (min-width: 64rem) {
	.faq {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	}

	.faq__innehall {
		position: sticky;
		top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
	}
}

/* Bild i stället för film i det mörka bandet (Om oss: Generation 2) */
.film-text--bild .film-text__media img {
	object-position: 50% 50%;
}

@media (min-width: 80rem) {
	.film-text--bild .film-text__media img {
		position: absolute;
		inset: 0;
	}
}

/* Tidslinjen: årtalet stort till vänster, händelsen och texten till höger */
.tidslinje {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--linje-mork);
}

.tidslinje li {
	display: grid;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--preset--color--linje-mork);
}

.tidslinje__ar {
	color: var(--wp--preset--color--gron-mork);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-2);
	font-weight: 500;
	line-height: var(--wp--custom--radavstand-tat);
}

.tidslinje h3 {
	font-size: var(--wp--preset--font-size--rubrik-4);
}

.tidslinje p {
	max-width: var(--wp--custom--textbredd);
	color: var(--wp--preset--color--text-dampad);
}

@media (min-width: 48rem) {
	.tidslinje li {
		grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	}

	.tidslinje__ar {
		grid-row: span 2;
	}
}

/* Märket från testet: hela märket syns, på vit botten */
.bild-text--markning .bild-text__bild {
	aspect-ratio: auto;
	max-width: var(--wp--custom--bildtext-bredd);
	object-fit: contain;
	mix-blend-mode: multiply;
}

/* En ensam bild bredvid texten i kvalitetslayouten, och en bild under texten i beskrivningen */
.kvalitet__bild,
.beskrivning__bild {
	width: 100%;
	height: auto;
}

.beskrivning__bild {
	aspect-ratio: 3 / 2;
	margin-top: var(--wp--preset--spacing--40);
	object-fit: cover;
}

/* Kassan har ett avskalat sidhuvud: logotypen och vägen tillbaka till varukorgen, ingen meny (WooCommerces
   kassamall), så att kunden inte lämnar kassan av misstag */
.kassalage .huvudmeny,
.kassalage .sidhuvud__verktyg {
	display: none;
}

.sidhuvud__tillbaka {
	margin-left: auto;
}

.lank-pil--tillbaka .ikon {
	transform: rotate(180deg);
}

.lank-pil--tillbaka:hover .ikon {
	transform: rotate(180deg) translateX(var(--wp--preset--spacing--10));
}

/* Kassan: formuläret till vänster och ordersammanfattningen till höger på dator; i mobilen överst och hopfälld */
.kassa {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	align-items: start;
}

/* En spalt som aldrig blir bredare än skärmen: rutnätens spalter får krympa under innehållets minsta bredd */
.kassa__formular {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
}

.kassa__steg {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
}

.kassa__rubrik {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--rubrik-4);
	font-weight: 500;
}

.kassa__nummer {
	display: grid;
	place-items: center;
	width: var(--wp--custom--ikon-mellan);
	height: var(--wp--custom--ikon-mellan);
	border-radius: 50%;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
}

.kassa__hjalp {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kassa__express {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.knapp--express {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
}

.knapp--express:hover {
	background: var(--wp--preset--color--skog);
	border-color: var(--wp--preset--color--skog);
}

.knapp--express img {
	filter: invert(1) grayscale(1) brightness(2);
}

.kassa__eller {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kassa__eller::before,
.kassa__eller::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--linje);
}

.kassa__falt {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.kassa__falt .falt--hel {
	grid-column: 1 / -1;
}

@media (max-width: 29.99rem) {
	.kassa__falt {
		grid-template-columns: minmax(0, 1fr);
	}
}

.kryss {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tryckyta);
	cursor: pointer;
}

.kryss input,
.valrad input {
	flex-shrink: 0;
	width: var(--wp--custom--ikon-liten);
	height: var(--wp--custom--ikon-liten);
	margin: 0;
	accent-color: var(--wp--preset--color--gron);
}

/* Valrader: fraktsätt och betalsätt som rader med namn, text och pris eller logotyp */
.valrader {
	display: grid;
	margin: 0;
	padding: 0;
	border: 0;
}

.valrad {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-height: var(--wp--custom--knapp-hojd);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	cursor: pointer;
}

.valrad + .valrad {
	margin-top: -1px;
}

.valrad:has(input:checked) {
	position: relative;
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
}

.valrad__namn {
	display: grid;
	flex: 1;
	font-weight: 600;
}

.valrad__not {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	font-weight: 400;
}

.valrad__pris {
	font-weight: 600;
}

.valrad__logor {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

/* Betalsättens logotyper i samma höjd som en ikon, oavsett filens egna mått */
.valrad img {
	width: auto;
	height: var(--wp--custom--ikon);
	max-width: var(--wp--preset--spacing--80);
	object-fit: contain;
}

.kassa__villkor {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kassa__knappar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
}

.kassa__knappar .knapp {
	min-width: 50%;
}

/* Felrutan överst i formuläret, med länkar till fälten */
.kassa__fel {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--50);
	border-left: 2px solid var(--wp--preset--color--orange-mork);
	background: var(--wp--preset--color--orange-ljus);
}

.kassa__fel ul {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding-left: var(--wp--preset--spacing--50);
}

/* Ordersammanfattningen */
.kassa__sammanfattning {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--yta);
}

.kassa__vik > summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tryckyta);
	list-style: none;
	cursor: pointer;
}

.kassa__vik > summary::-webkit-details-marker {
	display: none;
}

.kassa__vik > summary .kassa__rubrik {
	flex: 1;
}

.kassa__vik[open] > summary .ikon {
	transform: rotate(180deg);
}

.kassa__vik[open] .kassa__vik-summa {
	visibility: hidden;
}

.kassa__vik > :not(summary) {
	margin-top: var(--wp--preset--spacing--40);
}

.kassa__rader {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--linje-mork);
}

.kassarad {
	display: grid;
	grid-template-columns: var(--wp--preset--spacing--80) minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.kassarad__bild {
	position: relative;
}

.kassarad__bild img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--wp--preset--color--bas);
}

.kassarad__antal {
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--20));
	right: calc(-1 * var(--wp--preset--spacing--20));
	display: grid;
	place-items: center;
	min-width: var(--wp--custom--ikon-liten);
	min-height: var(--wp--custom--ikon-liten);
	border-radius: var(--wp--custom--ikon-liten);
	background: var(--wp--preset--color--text-dampad);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	line-height: var(--wp--custom--radavstand-tat);
}

.kassarad__text {
	display: grid;
}

.kassarad__namn {
	font-weight: 600;
}

.kassarad__variant {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.kassa__sammanfattning .summor {
	margin-top: var(--wp--preset--spacing--40);
}

@media (min-width: 64rem) {
	.kassa {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.kassa__sammanfattning {
		position: sticky;
		top: calc(var(--wp--custom--sidhuvud-hojd) + var(--wp--preset--spacing--50));
	}
}

@media (max-width: 63.99rem) {
	.kassa__sammanfattning {
		order: -1;
	}
}

/* Tacksidan: beställningen till vänster och ångerrätten och kontakten till höger */
.tack {
	display: grid;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	align-items: start;
}

.tack__order {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tack__bekraftelse {
	font-weight: 600;
}

.tack__fakta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--preset--color--linje-mork);
}

.tack__fakta dt {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.tack__fakta dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.tack__adresser address {
	font-style: normal;
}

.tack__sidor {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.tack__sidor .ruta {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 64rem) {
	.tack {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

/* Ångra avtalet här: beställningen som hittades, med en ruta per vara */
.angra__order {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	width: 100%;
}

/* Meddelande när en länk leder till en sida som inte ingår i varvet */
.meddelande {
	position: fixed;
	left: 50%;
	bottom: var(--wp--preset--spacing--50);
	z-index: 50;
	max-width: calc(100% - 2 * var(--wp--custom--marginal));
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--bas);
	font-size: var(--wp--preset--font-size--liten);
	transform: translateX(-50%);
}

/* Den fasta köpraden i mobilen (varv 7, beslut 83; produkt.js): priset, den valda varan och köpknappen längst ned
   när köprutans knapp inte syns. Sidan får plats under raden så att inget hamnar bakom den (WCAG 2.4.11). */
.koprad {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 18;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--custom--marginal) calc(var(--wp--preset--spacing--30) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--wp--preset--color--linje);
	background: var(--wp--preset--color--bas);
}

.koprad[hidden] {
	display: none;
}

.koprad__text {
	display: grid;
	margin: 0;
	line-height: var(--wp--custom--radavstand-tat);
}

.koprad__pris {
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--ingress);
	font-weight: 500;
}

.koprad__vara {
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.koprad__knapp {
	flex: none;
	white-space: nowrap;
}

.koprad__knapp[aria-disabled="true"] {
	opacity: 0.5;
}

.har-koprad {
	scroll-padding-bottom: 6rem;
}

.har-koprad body {
	padding-bottom: 5.5rem;
}

@media (min-width: 64rem) {
	.koprad {
		display: none;
	}
}


/* Varv 7: Studsmattors kort med namnet och priset före bilden, så att det köpbara står i första skärmen på dator
   (fynd 5); korten på startsidan med studiobilderna (fynd 3) */
.produktlista--stor .produktkort > .produktkort__bild {
	order: 1;
	margin-top: var(--wp--preset--spacing--20);
	margin-bottom: 0;
}

.form__bild--studio img {
	aspect-ratio: 16 / 9;
	object-fit: contain;
	background: var(--wp--preset--color--bas);
	border: 1px solid var(--wp--preset--color--linje);
}

/* Produktsidans rad om den andra formen (fynd 4): en mening och länken, i stället för hela avsnittet */
.formen--kort .formen__rad {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
}

.formen--kort .formen__rad p {
	margin: 0;
}

.formen--kort .formen__rad .lank-pil {
	min-height: 0;
}

/* Monteringshjälpen under manualerna (fynd 20) */
.montering__hjalp {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

/* Betalsätten i lådan under knapparna (fynd 21, J-3) */
.korgfot__betalsatt {
	margin-top: var(--wp--preset--spacing--40);
}

.korgfot__betalsatt .betalsatt__rubrik {
	font-size: var(--wp--preset--font-size--liten);
	color: var(--wp--preset--color--text-dampad);
}

/* Fakta-tabellen i mobilen: en storlek i taget med knappar ovanför (fynd 6, produkt.js) */
.fakta-val {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--40);
}

.fakta-val__knapp {
	min-height: var(--wp--custom--tryckyta);
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--rubrik);
	font-size: var(--wp--preset--font-size--bas);
	font-weight: 500;
	cursor: pointer;
}

.fakta-val__knapp[aria-pressed="true"] {
	border-color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
}

.fakta-tabell--en .fakta-dold {
	display: none;
}

.fakta-tabell--en .fakta-tabell__hel {
	display: table-cell;
}

@media (min-width: 64rem) {
	.fakta-val {
		display: none;
	}

	.fakta-tabell--en .fakta-dold {
		display: table-cell;
	}
}


/* Utvalda omdömen (varv 7, fynd 19): en rad som rullar i sidled med scroll-snap, ett i taget i mobilen, två på
   surfplatta och tre på dator. Varje citat står på en linje, utan ruta, med namnet, månaden och betyget under. */
.citat {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
	margin-top: var(--wp--preset--spacing--60);
}

/* Regionen rullar; listan är ett rutnät med en kolumn per citat. min-width: 0 hindrar rutnätet från att vidga sidan */
.citat__rulle {
	position: relative;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.citat__rulle::-webkit-scrollbar {
	display: none;
}

.citat__rulle:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: var(--wp--custom--fokus);
}

.citat__lista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
}

@media (min-width: 48rem) {
	.citat__lista {
		grid-auto-columns: calc((100% - var(--wp--preset--spacing--50)) / 2);
	}
}

@media (min-width: 64rem) {
	.citat__lista {
		grid-auto-columns: calc((100% - 2 * var(--wp--preset--spacing--50)) / 3);
	}
}

.citat__post {
	display: grid;
	scroll-snap-align: start;
}

.citat__ruta {
	display: grid;
	align-content: start;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: var(--wp--preset--spacing--50) 0 0;
	border-top: 1px solid var(--wp--preset--color--linje-mork);
}

.citat__text {
	margin: 0;
	max-width: var(--wp--custom--textbredd);
}

.citat__fot {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}

.citat__namn {
	color: var(--wp--preset--color--text);
	font-style: normal;
	font-weight: 600;
}

.citat__meta a {
	color: inherit;
}

.citat__styr {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

/* Räknaren "2 av 6" i mobilen, prickarna från 48rem */
.citat__raknare {
	min-width: 4em;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
	text-align: center;
}


.citat__styr[hidden] {
	display: none;
}

.citat__knapp {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--tryckyta);
	height: var(--wp--custom--tryckyta);
	padding: 0;
	border: 1px solid var(--wp--preset--color--linje-mork);
	border-radius: var(--wp--custom--radie);
	background: var(--wp--preset--color--bas);
	color: var(--wp--preset--color--text);
	cursor: pointer;
}

.citat__knapp:disabled {
	opacity: 0.4;
	cursor: default;
}

.citat__knapp--fore .ikon {
	transform: scaleX(-1);
}

.citat__prickar {
	display: flex;
	gap: var(--wp--preset--spacing--10);
}

.citat__prick {
	position: relative;
	width: var(--wp--custom--tryckyta-tat);
	height: var(--wp--custom--tryckyta-tat);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.citat__prick::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--linje-mork);
	transform: translate(-50%, -50%);
}

.citat__prick[aria-current="true"]::after {
	background: var(--wp--preset--color--text);
}

.citat__prick:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 2px;
	border-radius: 50%;
}

/* Räknaren i mobilen och prickarna från 48rem (reglerna står sist, efter prickarnas och räknarens grundregler) */
@media (max-width: 47.99rem) {
	.citat__prickar {
		display: none;
	}
}

@media (min-width: 48rem) {
	.citat__raknare {
		display: none;
	}
}

/* Studsmattornas storlekar i korten på Studsmattor (beslut 88), som raden i startsidans modellkort (.form__for) */
.produktkort__storlekar {
	margin: 0;
	color: var(--wp--preset--color--text-dampad);
	font-size: var(--wp--preset--font-size--liten);
}