/*
 * base.css — laddas på varje sidvisning.
 *
 * Ordningen i @layer avgör specificitet oavsett var reglerna står i filen.
 * Skriv aldrig !important; lägg regeln i rätt lager istället.
 *
 * Designen här är MEDVETET neutral. Systemfonter, svart/vitt, inga
 * rundningar eller skuggor. Visuell identitet låses först när varumärket
 * är bestämt — se docs/04-beslutslogg.md.
 */

@layer tokens, reset, base, layout, components, utilities;

/* ------------------------------------------------------------------ */
@layer tokens {
	:root {
		/*
		 * Färgskala hämtad från longevitylabs.se 2026-08-08 så att de två
		 * sajterna känns som samma varumärke. Ändra här, inte i komponenterna.
		 */
		--color-ink: #242424;        /* rubriker */
		/*
		 * Brödtext och metadata: .se har #777 och #a5a5a5, men #777 mäter
		 * 4,47:1 mot vitt (WCAG AA kräver 4,5) och #a5a5a5 bara 2,5:1.
		 * Lighthouse underkände priser, kategorietiketter och brödsmulor på
		 * varje sida. Ett steg mörkare, valt så att båda klarar 4,5:1 även
		 * mot produktbildens platta (--color-surface, #f7f7f7). Ändrat
		 * 2026-08-15, se beslutsloggen.
		 */
		--color-body: #6f6f6f;       /* brödtext */
		--color-ink-muted: #707070;  /* metadata, kategorietiketter — 4,8:1 även mot --color-surface */
		--color-paper: #fff;
		--color-surface: #f7f7f7;    /* produktbildens bakgrund */
		--color-surface-warm: #f1f1ef; /* kategorikort, bildytor på startsidan */
		--color-surface-card: #fafafa; /* fakta- och omdömeskort */
		/*
		 * Gräddvit sektionsplatta, vald av Linus. Rollen: en hel sektion
		 * som ska lyfta från det vita utan att bli grå — bandet "sett i
		 * media" är utgångsläget. Skillnaden mot --color-surface-card är
		 * temperaturen: den här drar åt varmt, kortens platta är neutral.
		 * Använd den på breda ytor, inte på små kort — då syns bara att
		 * två nästan lika vita nyanser ligger bredvid varandra.
		 */
		--color-surface-cream: #faf9f6;
		/*
		 * Rosaskimrande platta, vald av Linus. Bodde i about.css tills
		 * produktsidans märkningsbrickor ville ha samma ton — två filer
		 * med samma hexkod är en färg som förr eller senare blir två.
		 */
		--color-surface-blush: #f1eceb;
		/*
		 * Mörk platta. Rollen: en hel sektion som ska bryta av mot den
		 * ljusa sidan — heron på startsidan är utgångsläget.
		 *
		 * Inte svart, och medvetet ett par steg ljusare än den var
		 * (#14171a): mot en vit sida läste den tonen som ett hål och inte
		 * som en färg, och kanten mellan sektionerna blev hårdare än
		 * någonting annat på sidan. Den här ligger dessutom åt blågrönt —
		 * samma håll som petrolen — så att accenten lyser i stället för
		 * att bli smutsig, och så att plattan känns som en färg någon valt
		 * och inte som frånvaro av ljus.
		 */
		--color-surface-ink: #1b2327;
		--color-line: #e9e9e9;
		/* Hårstreck på den mörka plattan. Ljus, inte grå: ett grått streck
		 * mot nästan svart syns inte, och ett vitt med opacitet följer med
		 * om plattans ton ändras. */
		--color-line-inverse: rgb(255 255 255 / 0.14);
		/*
		 * Brödtext på den mörka plattan. Vit med opacitet och inte en grå
		 * hexkod, av samma skäl: tonen ska följa plattan om den ändras.
		 * 0,68 mäter omkring 9:1 mot --color-surface-ink.
		 */
		--color-body-inverse: rgb(255 255 255 / 0.68);
		/*
		 * Accentfärgen är djup petrol, inte .se:s salviagröna — .com har
		 * egen identitet. #3e7c8a klarar 4,7:1 mot vitt: nog för WCAG AA
		 * och för vit text på färgad yta, men inte för riktigt liten text.
		 * Därför finns -ink-varianten på 7,1:1 — använd den så fort
		 * accentfärgen bär text under ~14 px.
		 */
		--color-accent: #3e7c8a;     /* petrol — pris, aktiva lägen */
		--color-accent-ink: #2f5f6a; /* mörkare petrol, för liten text */
		/*
		 * Ljus petrol, för accenten på den mörka plattan. Grundtonen mäter
		 * bara 4,2:1 mot --color-surface-ink och blir grumlig i stora ord;
		 * den här ligger på omkring 9:1 och håller även för överraden.
		 */
		--color-accent-soft: #9dc4cd;
		/*
		 * Andra accenten, vald av Linus. Dammig rosa mot petrolen.
		 *
		 * Mäter 3,05:1 mot en ljus platta: räcker för ikoner, ramar och
		 * stora ord, men inte för text i brödtextstorlek (WCAG AA kräver
		 * 4,5:1). Behöver den hamna på liten text får den en mörkare
		 * syskonton, som petrolen har i --color-accent-ink.
		 */
		--color-accent-warm: #ad8888;
		/*
		 * Tredje ljusa accenten, för löftesbandets gula ikon. De två andra
		 * i bandet är --color-accent-soft och --color-accent-warm ovan; den
		 * här är satt i samma tonläge som de — omkring 65 % ljushet och
		 * lågmätt — så att de tre läser som en uppsättning och inte som tre
		 * lösryckta färger.
		 *
		 * Mäter omkring 2:1 mot vitt. Det räcker inte för text och knappt
		 * för ikoner enligt WCAG; den får bara bära dekor, och aldrig vara
		 * det enda som skiljer två tillstånd åt.
		 */
		--color-accent-sun: #d1a866;
		/*
		 * Felfärgen. Dämpad tegel i stället för signalrött: den ska höras
		 * i ett formulär utan att skrika i en palett som annars är sval.
		 * Mäter 6,1:1 mot vitt — nog för AA även på liten text.
		 */
		--color-danger: #9c3327;
		/*
		 * Rean. Samma tegel som felfärgen — den är den enda röda i
		 * paletten, och två snarlika rödtoner bredvid varandra läses som
		 * ett misstag. Egen token ändå: "rea" och "fel" är olika saker och
		 * ska kunna gå isär utan att man måste leta rätt på vilka regler
		 * som menade vilket.
		 */
		--color-sale: #9c3327;
		--color-button: #333;
		--color-button-text: #fff;

		/* Rundningar. .se använder tre nivåer, inte fler. */
		--radius-card: 16px;
		--radius-panel: 20px;
		/*
		 * Egen radie för hela ytor, inte bara för kort. Skalan är inte
		 * linjär: 20 px runt en yta på 1400 × 700 syns knappt, och en form
		 * som är nästan fyrkantig läser som att radien blivit fel. 32 px
		 * ger samma optiska rundning på den stora ytan som 16 gör på ett
		 * kort.
		 */
		--radius-hero: 32px;
		--radius-pill: 999px;

		/*
		 * Systemfonter. Snabbast som finns: noll requests, noll kB, ingen
		 * FOUT och ingen layoutförskjutning när ett typsnitt byts in.
		 * Ett självhostat woff2 hade kostat ~25 kB och en render-blockerande
		 * hämtning i LCP-vägen — .se betalar det priset, vi gör inte det.
		 *
		 * Besökaren får sitt eget systems typsnitt: SF Pro på Apple, Segoe
		 * på Windows, Roboto på Android. De är alla ritade för skärm och
		 * ser bättre ut än ett godtyckligt Google-typsnitt.
		 *
		 * Rubriker och brödtext delar familj. Skillnaden görs med vikt och
		 * teckenavstånd i stället — se @layer base.
		 */
		--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
		--font-display: var(--font-sans);
		--font-size-base: 1rem;

		/* Fluid skala — växer med viewport utan media queries */
		--step--1: clamp(0.83rem, 0.81rem + 0.11vw, 0.89rem);
		--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
		--step-1: clamp(1.2rem, 1.13rem + 0.35vw, 1.41rem);
		--step-2: clamp(1.44rem, 1.33rem + 0.57vw, 1.76rem);
		--step-3: clamp(1.73rem, 1.55rem + 0.89vw, 2.2rem);
		--step-4: clamp(2.07rem, 1.81rem + 1.32vw, 2.75rem);

		/* Rytm */
		--space-3xs: 0.25rem;
		--space-2xs: 0.5rem;
		--space-xs: 0.75rem;
		--space-s: 1rem;
		--space-m: 1.5rem;
		--space-l: 2rem;
		--space-xl: 3rem;
		--space-2xl: 4.5rem;

		/*
		 * Layout
		 *
		 * 1440 och inte 1200: på en bärbar Mac är fönstret 1512 px brett,
		 * och med den gamla bredden låg det 156 px tomt på var sida om
		 * innehållet innan sidmarginalen ens började. Sidan såg ut att
		 * krympa ihop mitt på skärmen. Måttet är valt efter den skärmen —
		 * det som blir över där är rännan nedan, inte tomrum.
		 *
		 * `--content-max` följer inte med. Brödtext ska ligga kvar runt 780
		 * px oavsett hur brett rutnätet får bli; en radlängd på 1400 px går
		 * inte att läsa.
		 */
		--wrap-max: 1440px;
		--wrap-gutter: var(--space-s);
		--content-max: 780px;
	}

	/*
	 * Bredare skärm, bredare ränna. Med en rand på 1 rem hamnar första
	 * kortet i praktiken i glaskanten så fort fönstret är bredare än
	 * wrappen — luften ska finnas, den ska bara inte vara halva sidan.
	 */
	@media (min-width: 1280px) {
		:root {
			--wrap-gutter: var(--space-l);
		}
	}
}

/* ------------------------------------------------------------------ */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;

		/*
		 * Sidan ska aldrig gå att dra i sidled. En enda rad som är för
		 * bred — en meny, en tabell, ett inbäddat block — gör annars hela
		 * dokumentet bredare än skärmen, och på telefon känns det som att
		 * sidan glider undan under fingret medan man rullar.
		 *
		 * `clip` och inte `hidden`: hidden gör roten till en
		 * rullningsbehållare och tar då död på `position: sticky` längre
		 * ner i sidan. clip klipper bara, och lämnar den lodräta
		 * rullningen i fred.
		 *
		 * Det här är ett skyddsnät, inte en ursäkt för att låta något
		 * svämma över. Det som är för brett ska fortfarande lagas där det
		 * står — annars döljer klippningen bara att en del av innehållet
		 * blivit onåbar.
		 */
		overflow-x: clip;
	}

	body,
	h1,
	h2,
	h3,
	h4,
	p,
	figure,
	blockquote,
	dl,
	dd,
	ol,
	ul {
		margin: 0;
	}

	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	button {
		cursor: pointer;
	}

	/* Undvik att långa ord spränger layouten på mobil. */
	p,
	h1,
	h2,
	h3,
	h4,
	li {
		overflow-wrap: break-word;
	}

	@media (prefers-reduced-motion: reduce) {
		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* ------------------------------------------------------------------ */
@layer base {
	body {
		font-family: var(--font-sans);
		font-size: var(--step-0);
		line-height: 1.6;
		color: var(--color-body);
		background: var(--color-paper);
		/* Undvik layout shift när scrollbar dyker upp/försvinner. */
		scrollbar-gutter: stable;
	}

	/*
	 * Rubriker skiljs från brödtexten med vikt och negativt teckenavstånd,
	 * inte med en egen familj. Systemfonter sätts löst som standard och ser
	 * kraftlösa ut i stora grader utan den här justeringen.
	 */
	h1,
	h2,
	h3,
	h4 {
		font-family: var(--font-display);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--color-ink);
	}

	h1 {
		font-size: var(--step-4);
		line-height: 1.15;
	}
	h2 {
		font-size: var(--step-3);
		line-height: 1.2;
	}
	h3 {
		font-size: var(--step-2);
		line-height: 1.25;
	}
	h4 {
		font-size: var(--step-1);
	}

	a {
		color: inherit;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}

	/* Synlig fokusring för tangentbord — aldrig ta bort denna. */
	:focus-visible {
		outline: 2px solid var(--color-ink);
		outline-offset: 2px;
	}
}

/* ------------------------------------------------------------------ */
@layer layout {
	.wrap {
		max-width: var(--wrap-max);
		margin-inline: auto;
		padding-inline: var(--wrap-gutter);
		padding-block: var(--space-l);
	}

	/*
	 * Logotypen ska sitta i mitten, inte till vänster. Med flex hade den
	 * centrerats mellan sina grannar och alltså flyttat sig så fort menyn
	 * blev bredare. Ett rutnät med två lika breda ytterspalter håller den
	 * på optisk mitt oavsett hur många menypunkter som tillkommer.
	 */
	/*
	 * Låg lodrät padding. Logotypen är det som bestämmer sidhuvudets höjd,
	 * och den har egen luft i filen — lägger vi på generös padding också
	 * blir raden dubbelt så hög som den behöver vara.
	 */
	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "nav logo cart";
		align-items: center;
		gap: var(--space-m);
		padding-block: var(--space-3xs);
	}

	/*
	 * Flex, inte block. Logotypen är ett inline-flex-element, och i ett
	 * inline-sammanhang reserverar raden plats för nedhäng under baslinjen
	 * — sju pixlar tom höjd under logotypen som också sköt hela rutnätets
	 * mitt nedåt, så att vagnsikonen hamnade lägre än logotypen.
	 */
	.site-branding {
		grid-area: logo;
		display: flex;
		justify-self: center;
	}

	.site-nav {
		grid-area: nav;
		min-width: 0;
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		grid-area: cart;
		justify-self: end;
	}

	.nav-toggle {
		grid-area: nav;
		justify-self: start;
	}

	/*
	 * Mobil: fortfarande EN rad. Menyknapp vänster, logotyp mitten, vagn
	 * höger — samma tre ytor som på desktop, bara med knappen i stället
	 * för menylistan. En andra rad hade kostat ~50 px höjd på den skärm
	 * som har minst av den.
	 */
	@media (max-width: 1199px) {
		.site-header__inner {
			gap: var(--space-2xs);
		}


	}

	/* Skuggan hör bara till lådan, och lådan finns bara på mobil. */
	@media (min-width: 1200px) {
		.site-nav__backdrop {
			display: none;
		}
	}


	.site-header {
		border-bottom: 1px solid var(--color-line);
		background: var(--color-paper);
	}

	/*
	 * Sidhuvudet följer med i scrollen, på alla skärmar. Butiken är en enda
	 * lång sida, och vagnen ska aldrig vara ett svep bort.
	 *
	 * Skillnaden mellan mobil och desktop är beteendet, inte tekniken: på
	 * mobil står raden kvar hela tiden, på desktop åker den upp när man
	 * skrollar neråt och tillbaka så fort man skrollar uppåt (se
	 * initStickyHeader i main.js). Skälet är den lodräta ytan — 60 px av en
	 * telefonskärm är billigare än en meny som blinkar, medan en fastlåst
	 * rad på desktop tar plats i just den riktning en produktsida behöver
	 * mest.
	 *
	 * Sticky gör dessutom sidhuvudet till referensram för megapanelen, som
	 * ligger absolut placerad inuti det.
	 */
	.site-header {
		position: sticky;
		inset-block-start: 0;
		/*
		 * Över sidans innehåll men under den utfällda menyn ligger i
		 * samma stackningskontext, så en låg siffra räcker. Woo:s egna
		 * overlays börjar på 100.
		 */
		z-index: 20;
	}

	/*
	 * Lite genomskinlighet, så att innehållet syns röra sig under raden.
	 * Bara med backdrop-filter: utan oskärpan blir text som passerar under
	 * sidhuvudet läsbar rakt igenom och krockar med logotypen. Saknas
	 * stödet står den täckta bakgrunden kvar.
	 *
	 * Oskärpan ligger på ett pseudoelement, inte på sidhuvudet självt.
	 * `backdrop-filter` gör elementet till containing block för allt
	 * `position: fixed` inuti — menylådan hade då klippts till sidhuvudets
	 * egen höjd i stället för att täcka skärmen.
	 */
	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		.site-header {
			background: transparent;
		}

		.site-header::before {
			content: "";
			position: absolute;
			inset: 0;
			z-index: -1;
			background: color-mix(in srgb, var(--color-paper) 82%, transparent);
			-webkit-backdrop-filter: blur(12px) saturate(1.4);
			backdrop-filter: blur(12px) saturate(1.4);
		}
	}

	@media (min-width: 1200px) {
		.site-header {
			transition: translate 0.3s ease, box-shadow 0.3s;
		}

		/*
		 * Neråt: raden åker ut ur vägen. Uppåt: den kommer tillbaka. Attributen
		 * sätts av main.js — `data-header-stuck` först när sidhuvudet lämnat
		 * sin egen plats, så att skuggan inte ligger där ovanför brödsmulorna
		 * på en sida som inte skrollats.
		 */
		.site-header[data-header-stuck] {
			box-shadow: 0 1px 12px rgb(0 0 0 / 0.06);
		}

		.site-header[data-header-hidden] {
			translate: 0 -100%;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header {
			transition-duration: 0.01ms;
		}
	}

	/*
	 * Luft under sidan när genvägsraden ligger där. Klassen sätts bara när
	 * raden faktiskt renderas (inc/nav.php) — utan den skulle sidfotens
	 * sista rad hamna bakom en list som inte finns.
	 */
	@media (max-width: 1199px) {
		.has-mobile-bar {
			padding-block-end: calc(55px + env(safe-area-inset-bottom));
		}
	}

	/*
	 * Linje över sidfoten. .se avdelar bara med luft, men deras sidfot
	 * följer på en prefooter med egen bakgrund — vår går rakt på det vita
	 * innehållet, och då syns inte skarven. Samma hårstreck som
	 * copyrightraden under, så sidfoten ramas in av två lika linjer.
	 */
	.site-footer {
		border-block-start: 1px solid var(--color-line);
		margin-block-start: var(--space-2xl);
	}

	/*
	 * Märket till vänster, länkspalterna till höger — samma uppdelning som
	 * longevitylabs.se. Märkesspalten får en fast minimibredd och spalterna
	 * resten, i stället för lika delar: tre länkspalter bredvid varandra
	 * behöver mer plats än en logotyp och en mening.
	 */
	.site-footer__inner {
		display: grid;
		gap: var(--space-xl);
	}

	@media (min-width: 768px) {
		.site-footer__inner {
			grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
			gap: var(--space-2xl);
			align-items: start;
		}
	}

	.site-footer__cols {
		display: grid;
		gap: var(--space-m);
	}

	/*
	 * auto-fit och inte ett fast antal: spalterna är tre eller fyra
	 * beroende på vad som finns att visa (kollektioner, kategorier, länkar,
	 * sociala kanaler), och raden ska inte behöva räknas om i CSS varje
	 * gång en spalt tillkommer.
	 */
	@media (min-width: 768px) {
		.site-footer__cols {
			grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
			gap: var(--space-l);
		}
	}

	/*
	 * Copyrightraden. Två spalter på desktop, centrerad stapel på mobil —
	 * också det som på .se, där raden blir ett block underst.
	 */
	.site-footer__bar {
		border-top: 1px solid var(--color-line);
	}

	.site-footer__bar-inner {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-2xs) var(--space-m);
		padding-block: var(--space-s);
	}

	@media (max-width: 767px) {
		.site-footer__bar-inner {
			justify-content: center;
			text-align: center;
		}
	}

}

/* ------------------------------------------------------------------ */
@layer components {
	.skip-link {
		position: absolute;
		inset-inline-start: -9999px;
		z-index: 999;
		padding: var(--space-2xs) var(--space-s);
		background: var(--color-paper);
	}

	.skip-link:focus {
		inset-inline-start: var(--space-s);
		top: var(--space-s);
	}

	/* ---------------------------------------------------------------- */
	/* Logotyp                                                           */
	/* ---------------------------------------------------------------- */

	.site-logo {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5em;
		color: var(--color-ink);
		text-decoration: none;
	}

	.site-logo__mark {
		display: block;
		width: 100%;
		height: auto;
	}

	/*
	 * Ordbilden är gles versal text, inte en bild. Den skalar med
	 * logotypens storlek, går att markera och kostar ingenting.
	 * "Longevity" är tyngre än "Goods", som i Linus original.
	 */
	.site-logo__word {
		font-family: var(--font-display);
		font-weight: 300;
		letter-spacing: 0.16em;
		line-height: 1;
		text-transform: uppercase;
		/* Spärrningen lägger luft efter sista tecknet — kompensera. */
		text-indent: 0.16em;
		white-space: nowrap;
	}

	.site-logo__word strong {
		font-weight: 500;
	}

	.site-logo--header {
		width: clamp(150px, 26vw, 210px);
	}

	.site-logo--header .site-logo__word {
		font-size: 0.75rem;
	}

	.site-logo--footer {
		width: min(430px, 82vw);
	}

	/*
	 * På telefon är sidfoten en enda spalt, och 82vw gör logotypen nästan
	 * lika bred som skärmen — då läses den som centrerad hur långt till
	 * vänster den än står. Smalare ger den en vänsterkant att stå mot.
	 * Tvåtredjedelar och inte hälften: vid 56vw blev ordbilden så liten
	 * att den läste som en bildtext i stället för som märket.
	 */
	@media (max-width: 767px) {
		.site-logo--footer {
			width: min(260px, 68vw);
		}
	}

	.site-logo--footer .site-logo__word {
		font-size: clamp(0.875rem, 0.6rem + 1.2vw, 1.375rem);
	}

	/* Uppladdad logotyp: WordPress egen markup, våra mått. */
	.site-logo .custom-logo {
		width: auto;
		max-width: 100%;
		height: auto;
	}

	/*
	 * Höjden styrs här och inte i uppladdningen, så att en utbytt
	 * logotypfil inte ändrar sidhuvudets höjd.
	 *
	 * Logotypfilen har genomskinlig luft inbakad: cirka 15 % av bildhöjden
	 * ovanför ordbilden och 13 % under. Den luften gjorde sidhuvudet högre
	 * utan att göra logotypen större. Negativ marginal drar tillbaka den i
	 * layouten — filen rörs inte, så sidfotens stora variant är oförändrad.
	 * `--logo-trim` är satt strax under den uppmätta luften så att en
	 * kantutjämnad pixel aldrig kapas. Byts logotypen ut: mät om och ändra
	 * bara den siffran.
	 *
	 * `height`, inte `max-height`: med en fast höjd och width/height-
	 * attributen på bilden vet webbläsaren bredden innan filen laddats
	 * och reserverar platsen. Med max-height var rutan 0 px bred tills
	 * bilden kom, och hela sidan hoppade i sidled och nedåt (CLS).
	 */
	.site-logo--header .custom-logo {
		--logo-h: 76px;
		--logo-trim: 0.12;
		height: var(--logo-h);
		object-fit: contain; /* Om breddtaket slår till på en smal skärm: krymp, förvräng inte. */
		margin-block: calc(var(--logo-h) * var(--logo-trim) * -1);
	}

	.site-logo--footer .custom-logo {
		max-height: 260px;
	}

	/*
	 * Mobil: logotypen är STÖRRE än på desktop, inte mindre. Sidhuvudet är
	 * en enda rad där menyknappen och vagnen är 40 px höga, så logotypen
	 * har höjden ledig — och på liten skärm är den det enda som bär
	 * varumärket. Breddtaket måste följa med höjden, annars kapar bredden
	 * logotypen innan max-height gör det.
	 */
	@media (max-width: 1199px) {
		.site-logo--header {
			width: clamp(150px, 52vw, 220px);
		}

		.site-logo--header .custom-logo {
			--logo-h: 84px;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Huvudmeny                                                         */
	/* ---------------------------------------------------------------- */

	/*
	 * Måtten är avlästa på longevitylabs.se: menylänkarna 14 px/500 med
	 * 30 px mellan posterna, panelen full bredd med en tunn skugga i
	 * stället för ram, grupprubrikerna 12 px versaler med 0,18 em
	 * teckenavstånd och en prick i accentfärgen före.
	 */

	.site-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-l);
	}

	.site-nav__list,
	.site-nav .sub-menu {
		padding: 0;
		list-style: none;
	}

	.site-nav a {
		display: block;
		color: var(--color-ink);
		text-decoration: none;
		transition: color 0.15s, background-color 0.15s;
	}

	.site-nav a:hover {
		color: var(--color-accent);
	}

	.site-nav__list > .menu-item > a {
		font-size: 0.875rem;
		font-weight: 500;
	}

	/*
	 * Posten med undermeny är en rad för sig: länken och pilknappen ligger
	 * bredvid varandra, så att etiketten fortfarande går att klicka på för
	 * att komma till sidan medan pilen fäller ut listan.
	 */
	.site-nav .menu-item-has-children > a {
		display: inline-block;
	}

	.site-nav__sub-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
	}

	/* Pilen ritas med två border-kanter, inte med ännu en SVG. */
	.site-nav__sub-toggle::before {
		content: "";
		width: 7px;
		height: 7px;
		border-inline-end: 1.5px solid currentColor;
		border-block-end: 1.5px solid currentColor;
		rotate: 45deg;
		translate: 0 -2px;
		transition: rotate 0.2s;
	}

	.site-nav__sub-toggle[aria-expanded="true"]::before {
		rotate: -135deg;
		translate: 0 2px;
	}

	/* Grupprubrik i megamenyn: ögonbryn med prick, inte en länk bland andra. */
	.site-nav .menu-item--group > a {
		display: flex;
		align-items: center;
		gap: var(--space-2xs);
		margin-block-end: 18px;
		font-size: 0.75rem;
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--color-ink-muted);
	}

	.site-nav .menu-item--group > a::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--color-accent);
	}


		/*
		 * Rubrik mitt i en lista. Rälsen använder den för att skilja
		 * kollektionerna från avdelningarna utan att bli två spalter:
		 * hårstrecket och luften gör avsnittet, inte en egen kolumn.
		 */
		.site-nav .menu-item--heading {
			margin-block: var(--space-xs) var(--space-3xs);
			padding-block-start: var(--space-xs);
			border-block-start: 1px solid var(--color-line);
		}

		.site-nav .menu-item--heading .menu-item__label {
			font-size: 0.75rem;
			font-weight: 500;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: var(--color-ink-muted);
		}

	/*
	 * Länklista med hårstreck — panelens standardutförande, och det .se
	 * använder för "Viktiga länkar".
	 */
	.site-nav .sub-menu--list a {
		padding-block: var(--space-xs);
		border-block-end: 1px solid var(--color-line);
		font-size: 1rem;
		font-weight: 500;
	}

	.site-nav .sub-menu--list > .menu-item:last-child > a {
		border-block-end: 0;
	}

	/*
	 * Långa listor — kategorierna — ligger i ett rundat kort med två
	 * spalter, exakt som .se: ljus platta, tunn ram, 16 px radie, posterna
	 * i läsordning radvis.
	 */
	/*
	 * `minmax(0, 1fr)` och inte `minmax(9rem, 1fr)`: ett golv i rem är ett
	 * löfte spalten inte kan hålla. Blev panelen smalare än 2 × 9 rem växte
	 * rutnätet ut ur sitt kort i stället för att krympa, och posterna lade
	 * sig ovanpå grannspalten. Hellre en etikett som bryts på två rader.
	 */
	/*
	 * Mellanrummet mellan spalterna är 12 px och inte 2 px, trots att
	 * raderna står tätt. Skälet är hårstrecken längre ned: de sitter på
	 * varje ruta, och med två pixlar emellan flöt de två strecken på en
	 * rad ihop till ett enda som gick tvärs över kortet. Då läser
	 * uppställningen som en tabell med en ram, inte som två pelare
	 * länkar. Måttet är länkens egen `padding-inline`, så att glappet i
	 * strecket står i linje med luften kring etiketterna.
	 */
	.site-nav .sub-menu--card {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px 12px;
		padding: 10px;
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		background: var(--color-surface-card);
	}

	.site-nav .sub-menu--card a {
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 0.875rem;
	}

	.site-nav .sub-menu--card a:hover {
		background: var(--color-paper);
	}

	/* ---------------------------------------------------------------- */
	/* Kampanjkortet i menyn                                             */
	/* ---------------------------------------------------------------- */

	/*
	 * Motsvarar .se:s "Paket & Bundles"-ruta: bild med rubriken lagd över
	 * nederkanten. Texten ligger på en mörk toning och inte på bilden rakt
	 * av — en ljus bild hade annars svalt den vita texten, och vilken bild
	 * det blir bestämmer Linus i Customizern.
	 */
	/*
	 * Selektorn måste nämna .site-nav: `.site-nav a` sätter bläckfärg på
	 * varje länk i menyn och hade annars vunnit över en ensam .nav-promo.
	 */
	.site-nav .nav-promo,
	.site-nav .nav-promo:hover {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--radius-card);
		background: var(--color-surface-warm);
		color: #fff;
		text-decoration: none;
	}

	/*
	 * Hela bilden ska synas. Kortet hade en påtvingad form och bilden
	 * fyllde den med `cover` — en liggande produktbild tappade då sina
	 * sidor, och det är just produkterna kortet ska visa. Nu är det
	 * bilden som ger kortet dess form, inte tvärtom. `contain` står kvar
	 * som skydd: sätter någon en höjd på kortet ska bilden hellre få luft
	 * omkring sig än bli beskuren.
	 */
	.nav-promo__img {
		display: block;
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	/*
	 * Toningen och rubriken är avpassade efter ett kort i bildens egna
	 * proportioner — alltså lågt och brett, inte en kvadrat. Med den gamla
	 * höjden på texten låg produktbilden helt under toningen, och då är
	 * det ingen idé att visa hela bilden.
	 */
	/*
		 * Måtten går via variabler med sina egna startvärden. Kortet
		 * krymper i megapanelen när en avdelning är utfälld (se
		 * nav-desktop.css), och då måste toningen och rubriken krympa med —
		 * annars täcker texten hela bilden och kortet ser trasigt ut. Att
		 * sätta det med variabler i stället för fyra selektorer till håller
		 * regeln på ett ställe.
		 */
	.nav-promo__text {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		display: grid;
		gap: var(--space-3xs);
		padding: var(--promo-pad, var(--space-m)) var(--space-s) var(--space-2xs);
		background: linear-gradient(to top, rgb(0 0 0 / 0.65), transparent);
	}

	.nav-promo__eyebrow {
		font-size: 0.8125rem;
	}

	/*
	 * Rabatten i kortets hörn. Vit platta med röd text, samma språk som
	 * rea-etiketten på ett produktkort — röd text direkt på ett foto är
	 * en chansning, och toningen längst ner är upptagen av kategorinamnet.
	 */
	.nav-promo__note {
		position: absolute;
		inset-block-start: var(--space-2xs);
		inset-inline-start: var(--space-2xs);
		z-index: 1;
		padding: 0.15em 0.7em;
		border-radius: var(--radius-pill);
		background: var(--color-paper);
		color: var(--color-sale);
		font-size: 0.75rem;
		font-weight: 600;
		line-height: 1.6;
	}

	.nav-promo__title {
		font-size: var(--promo-title, var(--step-1));
		font-weight: 600;
		line-height: 1.15;
	}

	/*
	 * Hovern var tidigare en inzoomning. Den skalade bilden större än sin
	 * ram, och kortet klipper vid kanten — alltså beskars bilden så fort
	 * musen låg still på den. En dämpning gör samma sak utan att ta bort
	 * något ur bilden.
	 */
	.nav-promo:hover .nav-promo__img {
		opacity: 0.9;
	}

	.nav-promo__img {
		transition: opacity 0.3s;
	}

	/*
	 * Varumärken ritas som brickor: logotyp över namnet i en rutad ram,
	 * två per rad. Måtten är .se:s — 1 px ram, 12 px radie, 8 px mellan
	 * brickorna, 9/5 px luft inuti.
	 */
	.site-nav .sub-menu--tiles {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.site-nav .sub-menu--tiles a {
		display: grid;
		justify-items: center;
		gap: 7px;
		padding: 9px 5px;
		border: 1px solid var(--color-line);
		border-radius: 12px;
		background: var(--color-paper);
		font-size: 0.75rem;
		line-height: 1.3;
		text-align: center;
	}

	/*
	 * Brickan svarar i accentfärgen, inte i bläck. Menyn har ett enda
	 * hover-språk — `.site-nav a:hover` är petrol — och en bricka som
	 * svartnade i stället läste som ett annat sorts element än länkarna
	 * bredvid. Ramen följer med texten, annars ser markeringen halv ut.
	 */
	.site-nav .sub-menu--tiles a:hover {
		border-color: var(--color-accent);
		color: var(--color-accent);
	}

	/*
	 * Logotyperna har helt olika proportioner — allt från kvadrat till
	 * 2,5:1. `contain` i en låst höjd gör att de ändå ser jämnstora ut,
	 * och att ingen bricka blir högre än sina grannar.
	 */
	.menu-item__logo {
		width: 100%;
		height: 46px;
		object-fit: contain;
	}

	/*
	 * Inläggen i Explore-panelen, motsvarigheten till "Senaste inläggen"
	 * hos longevitylabs.se. Markupen är samma som varumärkesbrickornas —
	 * bild, underrad, etikett — men en artikel läses inte som en logotyp:
	 * bilden är ett foto som ska beskäras, inte passas in, och rubriken
	 * står vänsterställd under den i stället för centrerad i en ram.
	 *
	 * Selektorerna nämner både .site-nav och .menu-item--posts för att
	 * vinna över brickornas regler ovan. JS klassar listan som brickor
	 * (den ser bilderna och kan inte veta bättre), och det är rätt
	 * beteende — undantaget hör hemma här, i CSS:en.
	 */
	.site-nav .menu-item--posts > .sub-menu {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-s);
	}

	.site-nav .menu-item--posts .sub-menu a {
		display: grid;
		gap: 6px;
		padding: 0;
		border: 0;
		border-radius: 0;
		text-align: start;
	}

	.site-nav .menu-item--posts .menu-item__logo {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		border-radius: 12px;
		background: var(--color-surface);
		object-fit: cover;
	}

	.site-nav .menu-item--posts .menu-item__meta {
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		/* Under ~14 px används den mörkare tonen — se tokens. */
		color: var(--color-ink-muted);
	}

	.site-nav .menu-item--posts .menu-item__label {
		font-size: 0.8125rem;
		font-weight: 600;
		line-height: 1.35;
		color: var(--color-ink);
	}

	.site-nav .menu-item--posts .sub-menu a:hover .menu-item__label {
		color: var(--color-accent);
	}

	/*
	 * Hårstreck mellan raderna. Första barnet är tillbaka-raden, som är
	 * dold här, så de riktiga posterna börjar på nr 2 — och rad två på
	 * nr 4.
	 */
	.site-nav .sub-menu--card > .menu-item:nth-child(n + 4) {
		border-block-start: 1px solid var(--color-line);
	}

	/* Deals är röd överallt den står. */
	.site-nav .menu-item--sale > a .menu-item__label,
	.site-footer .menu-item--sale > a {
		color: var(--color-sale);
	}


	/* ---------------------------------------------------------------- */
	/* Menyknapp                                                         */
	/* ---------------------------------------------------------------- */

	/*
	 * Tre streck ritade med border och en pseudoelement-rad — samma
	 * linjetjocklek som logotypen och vagnsikonen, utan en fjärde SVG.
	 */
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-ink);
		transition: color 0.15s;
	}

	.nav-toggle:hover {
		color: var(--color-accent);
	}

	/*
	 * Knappen behövs bara där menyn är hopfälld. Regeln måste ligga i
	 * samma lager som `display: inline-flex` ovan — ett `display: none` i
	 * @layer layout förlorar mot components oavsett media query, och
	 * knappen hade då legat kvar ovanpå menyn på desktop.
	 */
	@media (min-width: 1200px) {
		.nav-toggle {
			display: none;
		}
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 21px;
		height: 1.5px;
		background: currentColor;
		transition: translate 0.2s, rotate 0.2s, background-color 0.15s;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
	}

	.nav-toggle__bars::before {
		translate: 0 -7px;
	}

	.nav-toggle__bars::after {
		translate: 0 7px;
	}

	/* Öppet läge: strecken blir ett kryss. */
	.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
		background: transparent;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
		translate: 0 0;
		rotate: 45deg;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
		translate: 0 0;
		rotate: -45deg;
	}

	/* ---------------------------------------------------------------- */
	/* Varukorg                                                          */
	/* ---------------------------------------------------------------- */

	/*
	 * Vagnen, önskelistan och sökikonen är samma sorts knapp i sidhuvudet
	 * — ikon, fyrkantig träffyta och (för de två första) en bricka i
	 * hörnet. Därför en delad regel: blir den ena 44 px ska de andra
	 * följa med.
	 *
	 * Sökikonen ligger här och inte i search.css av en anledning:
	 * search.css laddas efter base, och en ikon som byter storlek mitt i
	 * inladdningen flyttar hela sidhuvudsraden i sidled.
	 */
	.cart-link,
	.wishlist-link,
	.account-link,
	.search-toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		color: var(--color-ink);
		text-decoration: none;
		transition: color 0.15s;
	}

	/*
	 * Sökikonen står inuti menyn, och `.site-nav a` väger tyngre än
	 * klassen ovan. Utan den här raden vann `display: block` och ikonen
	 * la sig i knappens övre vänstra hörn i stället för i mitten — den
	 * såg då ett par pixlar för hög ut bredvid menyposterna.
	 */
	.site-nav .search-toggle {
		display: inline-flex;
	}

	.cart-link:hover,
	.wishlist-link:hover,
	.account-link:hover,
	.search-toggle:hover {
		color: var(--color-accent);
	}

	.cart-link__icon,
	.wishlist-link__icon,
	.account-link__icon,
	.search-toggle__icon {
		width: 23px;
		height: 23px;
	}

	/*
	 * Under menybrytpunkten har genvägsraden underst redan önskelistan och
	 * kontot, och menylådan sitt sökfält. Sidhuvudet ska inte bli fyra
	 * ikoner brett bredvid logotypen.
	 */
	@media (max-width: 1199px) {
		.wishlist-link,
		.account-link,
		.search-toggle,
		.site-nav .search-toggle {
			display: none;
		}
	}

	/*
	 * Antalet ligger som en bricka i ikonens övre högra hörn. Den skrivs
	 * ut tom och `hidden`; JS tar fram den först när vagnen faktiskt har
	 * något i sig, så markupen kan cachas som den är.
	 */
	/*
	 * Brickan studsar en gång när något läggs i vagnen. Rörelsen är hela
	 * kvittensen på mobil, där minivagnen inte syns — utan den kan man
	 * lägga i tre varor utan att märka att något hände.
	 */
	@keyframes cart-bump {
		0% {
			scale: 0.4;
			opacity: 0;
		}

		60% {
			scale: 1.25;
			opacity: 1;
		}

		100% {
			scale: 1;
		}
	}

	.cart-link__count.is-bumped,
	.mobile-bar__count.is-bumped {
		animation: cart-bump 0.4s cubic-bezier(0.2, 1.4, 0.5, 1);
	}

	.cart-link__count:not([hidden]),
	.wishlist-link__count:not([hidden]) {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		display: grid;
		place-items: center;
		min-width: 17px;
		height: 17px;
		padding-inline: 4px;
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		color: #fff;
		font-size: 0.625rem;
		font-weight: 700;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	/* ---------------------------------------------------------------- */
	/* Genvägsrad underst — mobil                                        */
	/* ---------------------------------------------------------------- */

	/*
	 * Måtten är avlästa på longevitylabs.se:s verktygsfält: 55 px hög vit
	 * rad, mjuk skugga i stället för ram, 20 px ikon med etiketten under i
	 * 11 px/600, och antalet som en liten cirkel i ikonens övre högra hörn.
	 * Vi använder vår egen accentfärg — petrolen, inte deras salvia.
	 *
	 * Raden ligger `fixed` och inte `sticky`: den ska stå still medan sidan
	 * rör sig, precis som sidhuvudet gör i andra änden.
	 */
	.mobile-bar {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		/*
		 * Under sidhuvudet, över innehållet. Låg siffra med flit: menylådan
		 * och dess skugga ligger inuti sidhuvudet, och sidhuvudet är en egen
		 * stackningskontext på 20 — deras 40 och 35 gäller alltså bara inom
		 * den. En rad på 30 hade därför hamnat framför både lådan och
		 * skuggan, upplyst mitt i en nedsläckt sida.
		 */
		z-index: 15;
		display: flex;
		background: var(--color-paper);
		box-shadow: 0 0 9px rgb(0 0 0 / 0.12);
		/* Hemknappens område på en iPhone ska inte äta halva raden. */
		padding-block-end: env(safe-area-inset-bottom);
	}

	.mobile-bar__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		/* Höjden sätts av innehållet plus den här paddingen: 55 px totalt. */
		padding-block: 9px;
		color: var(--color-ink);
		text-decoration: none;
		transition: color 0.15s;
	}

	/*
	 * Sidan man står på markeras med accentfärgen. `aria-current` sätts på
	 * servern (se lg_mobile_bar) — samma information till ögat som till
	 * skärmläsaren, utan en extra klass att hålla i synk.
	 */
	.mobile-bar__item[aria-current] {
		color: var(--color-accent);
	}

	.mobile-bar__icon {
		position: relative;
		display: block;
		line-height: 0;
	}

	.mobile-bar__glyph {
		width: 21px;
		height: 21px;
	}

	.mobile-bar__label {
		font-size: 0.6875rem;
		font-weight: 600;
		line-height: 1;
		letter-spacing: 0.01em;
	}

	/*
	 * Brickan sitter utanför ikonens kant, som i sidhuvudet. Skillnaden är
	 * att den här raden är låg — därför en snävare cirkel och en siffra som
	 * går ovanpå ikonen i stället för bredvid.
	 */
	.mobile-bar__count:not([hidden]) {
		position: absolute;
		inset-block-start: -5px;
		inset-inline-start: 11px;
		display: grid;
		place-items: center;
		min-width: 16px;
		height: 16px;
		padding-inline: 4px;
		border-radius: var(--radius-pill);
		background: var(--color-accent);
		color: #fff;
		font-size: 0.5625rem;
		font-weight: 700;
		line-height: 1;
		font-variant-numeric: tabular-nums;
	}

	/*
	 * Över menybrytpunkten finns sidhuvudet framme hela tiden och vagnen är
	 * en muspekare bort. Då är raden bara en list som äter fönsterhöjd.
	 */
	@media (min-width: 1200px) {
		.mobile-bar {
			display: none;
		}
	}

	/* ---------------------------------------------------------------- */
	/* Sidfot                                                            */
	/* ---------------------------------------------------------------- */

	/*
	 * Mobil: vänsterställt, som på .se. Desktop: logotypen och meningen
	 * under den centreras i sin spalt — märket är sista intrycket på
	 * sidan och står bättre mitt i sin egen yta än tryckt mot kanten.
	 */
	.site-footer__brand {
		display: grid;
		justify-items: start;
		gap: var(--space-s);
	}

	@media (min-width: 768px) {
		.site-footer__brand {
			justify-items: center;
			text-align: center;
		}
	}

	.site-footer__tagline {
		max-width: 34ch;
		font-size: 1rem;
		line-height: 1.6;
	}

	/*
	 * Sidfotens skala är avläst på longevitylabs.se: rubrik 14 px/500 i
	 * versaler, länkar 16 px/600 i rubrikfärgen med 20 px mellan raderna,
	 * tagline 16 px i brödtextgrått. Länkarna är alltså mörkare och
	 * tyngre än brödtexten — det är de som är sidfotens innehåll.
	 */
	.footer-col__title {
		margin: 0;
		font-size: 0.875rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--color-ink);
	}

	.footer-col__list {
		display: grid;
		gap: 1.25rem;
		padding: 0;
		margin-block-start: 1.25rem;
		list-style: none;
		font-size: 1rem;
	}

	.footer-col__list a {
		font-weight: 600;
		color: var(--color-ink);
		text-decoration: none;
		transition: color 0.15s;
	}

	.footer-col__list a:hover {
		color: var(--color-accent);
	}

	/*
	 * Hopfällbara spalter på mobil, som på longevitylabs.se. Rubriken byts
	 * mot en knapp av JS — och bara under brytpunkten, så att attributen
	 * (`aria-expanded` på något som aldrig fälls ihop) inte ljuger på
	 * desktop. Utan JS står listorna kvar öppna.
	 */
	.footer-col__button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		width: 100%;
		padding: var(--space-xs) 0;
		border: 0;
		border-block-end: 1px solid var(--color-line);
		background: none;
		font: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		color: inherit;
		text-align: start;
	}

	.footer-col__button::after {
		content: "";
		width: 7px;
		height: 7px;
		border-inline-end: 1.5px solid currentColor;
		border-block-end: 1.5px solid currentColor;
		rotate: 45deg;
		translate: 0 -2px;
		transition: rotate 0.2s;
	}

	.footer-col__button[aria-expanded="true"]::after {
		rotate: -135deg;
		translate: 0 2px;
	}

	.footer-col[data-collapsible] .footer-col__panel {
		display: none;
	}

	.footer-col[data-collapsible][data-open] .footer-col__panel {
		display: block;
		padding-block-end: var(--space-xs);
	}

	.site-footer__copy,
	.legal-nav__list {
		font-size: 1rem;
		color: var(--color-body);
	}

	.site-footer__copy {
		margin: 0;
	}

	.legal-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2xs) var(--space-s);
		padding: 0;
		list-style: none;
	}

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

	.legal-nav__list a:hover {
		color: var(--color-accent);
		text-decoration: underline;
	}

	/*
	 * Språkväxlaren. Tre skepnader: listan öppen i sidfoten och i
	 * mobilmenyn; i sidhuvudet en knapp bland ikonerna (jordglob + kod)
	 * som fäller ut samma lista under sig. <details> gör utfällningen,
	 * main.js stänger vid klick utanför.
	 */
	/*
	 * Raden bryts. Tio språk får inte plats bredvid varandra på en
	 * telefon, och utan brytning växte listan ut ur sidan i stället —
	 * det var den som gjorde hela dokumentet bredare än skärmen.
	 */
	.lang-nav__list {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2xs) var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1rem;
	}

	.lang-nav__link {
		color: var(--color-body);
		text-decoration: none;
	}

	.lang-nav__link:hover,
	.lang-nav__link[aria-current] {
		color: var(--color-ink);
		font-weight: 600;
	}

	.lang-nav--footer .lang-nav__code,
	.lang-nav--menu .lang-nav__code,
	.lang-nav--header .lang-nav__code {
		display: none;
	}

	/*
	 * Sidfoten: språken står centrerade som de juridiska länkarna
	 * ovanför, och bryter till flera rader på smal skärm.
	 */
	.lang-nav--footer .lang-nav__list {
		justify-content: center;
	}

	/*
	 * Valutaraden i sidfoten. Ingen växlare — valutan följer landet
	 * (inc/currency.php) — men det ska stå vilken valuta priserna är i.
	 */
	.currency-note {
		margin: 0;
		color: var(--color-ink-muted);
		font-size: 0.875rem;
		text-align: center;
	}

	.currency-note__value {
		color: var(--color-ink);
		font-weight: 600;
	}

	/*
	 * Menylådan. Språken är en egen avdelning underst, med rubrik och i
	 * två spalter — inte en rad.
	 *
	 * En rad var vad det var förut, och tio språknamn efter varandra blev
	 * dubbelt så brett som lådan: de sista språken låg utanför kanten och
	 * enda sättet att nå dem var att dra hela menyn i sidled. Två spalter
	 * rymmer tio språk på fem rader utan att trycka ner resten av lådan
	 * en halv skärm, vilket en spalt hade gjort.
	 */
	.lang-nav--menu {
		padding: var(--space-s);
		border-block-start: 1px solid var(--color-line);
	}

	.lang-nav--menu .lang-nav__heading {
		padding: 0 0 var(--space-2xs);
	}

	.lang-nav--menu .lang-nav__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}

	.lang-nav--menu .lang-nav__link {
		display: flex;
		align-items: center;
		gap: var(--space-3xs);
		/* Tumme, inte muspekare — raden ska gå att träffa. */
		min-height: 44px;
		font-size: 0.9375rem;
	}

	/* Sidhuvudets knapp: samma höjd och färg som ikonerna bredvid. */
	.lang-nav--header {
		position: relative;
		display: none;
		vertical-align: middle;
	}

	.lang-nav__toggle {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		height: 40px;
		padding: 0 var(--space-2xs);
		color: var(--color-ink);
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		line-height: 1;
		list-style: none;
		cursor: pointer;
		transition: color 0.15s;
	}

	.lang-nav__toggle::-webkit-details-marker {
		display: none;
	}

	.lang-nav__toggle:hover,
	.lang-nav--header[open] .lang-nav__toggle {
		color: var(--color-accent);
	}

	.lang-nav__icon {
		width: 22px;
		height: 22px;
	}

	.lang-nav__chevron {
		width: 14px;
		height: 14px;
		transition: transform 0.15s;
	}

	.lang-nav--header[open] .lang-nav__chevron {
		transform: rotate(180deg);
	}

	/* Panelen hänger under knappen, högerställd så att den inte sticker ut. */
	.lang-nav__panel {
		position: absolute;
		inset-inline-end: 0;
		inset-block-start: calc(100% + 6px);
		z-index: 25;
		min-width: 12rem;
		padding: var(--space-xs) 0;
		background: var(--color-paper);
		border: 1px solid var(--color-line);
		border-radius: var(--radius-card);
		box-shadow: 0 12px 32px rgb(0 0 0 / 0.1);
	}

	.lang-nav__heading {
		margin: 0;
		padding: var(--space-3xs) var(--space-s) var(--space-2xs);
		color: var(--color-ink-muted);
		font-size: 0.75rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.lang-nav--header .lang-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.lang-nav--header .lang-nav__link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-s);
		padding: var(--space-2xs) var(--space-s);
		white-space: nowrap;
	}

	.lang-nav--header .lang-nav__link:hover {
		background: var(--color-surface);
	}

	/* Den valda raden får en bock till höger. */
	.lang-nav--header .lang-nav__link[aria-current]::after {
		content: "\2713";
		color: var(--color-accent);
	}

	@media (min-width: 1200px) {
		.lang-nav--menu {
			display: none;
		}

		.lang-nav--header {
			display: inline-flex;
			align-items: center;
			height: 40px;
			margin-inline-end: var(--space-2xs);
		}
	}

}

/* ------------------------------------------------------------------ */
@layer utilities {
	/*
	 * `hidden`-attributet måste faktiskt dölja.
	 *
	 * Webbläsarens egen regel är `[hidden] { display: none }`, men den är
	 * en UA-stil och förlorar mot vilken författarregel som helst. Varje
	 * komponent som sätter `display` — menyknappen, karusellpilarna,
	 * läsmer-knappen — skulle alltså synas trots `hidden`, och först
	 * försvinna när JS hunnit koppla på sig. Exakt tvärtom mot avsikten.
	 *
	 * Lagret utilities ligger sist i kaskaden, så den här regeln vinner
	 * över komponenterna utan att vi behöver !important.
	 */
	[hidden] {
		display: none;
	}

	/*
	 * Sidan bakom den öppna menylådan ska ligga stilla. Klassen sätts på
	 * <html> av main.js och tas bort när lådan stängs.
	 */
	.has-nav-open {
		overflow: hidden;
	}

	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}