/*
 * Fru Timian Forhandler - globale regler.
 *
 * Grunnlaget er portert fra fru-timian-temaet (assets/css/main.css): reset, global typografi,
 * container, band-rytmen, den delte knappen, header-parten og footer-parten. Kommentarene er
 * originalens - de forklarer hvorfor reglene ser ut som de gjor.
 *
 * Ikke portert: oppskriftssiden, ukemeny, forsidens band, Pinterest og stjerner. De hoerer til
 * matbloggen og bygger paa egne blokker som ikke finnes her.
 *
 * Designtokens bor i theme.json. Her staar bare det theme.json ikke kan uttrykke.
 */
/* ─────────────────────────────  RESET  ───────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;

	/*
	 * Ogsaa paa <html>, ikke bare paa body (under). Funnet 07.10.2026: handlekurv-skuffen fra
	 * WooCommerce ligger `position: fixed` rett utenfor hoeyre kant naar den er lukket. En vanlig
	 * nettleser bryr seg ikke, men mobil (og mobilvisninga i dev tools) zoomer ut til alt innhold
	 * faar plass - siden ble 567 px bred paa en 393 px skjerm, og hoeyre halvdel var hvit.
	 * Mobilnettleserne ser bort fra `overflow-x` paa body naar de regner ut bredden; paa <html>
	 * teller den. `clip` av samme grunn som paa body: ingen ny scroll-container, sticky virker.
	 */
	overflow-x: clip;
}

/*
 * `clip`, ikke `hidden`: `hidden` på én akse gjør den andres `visible` til `auto`, og body blir en
 * scroll-container. Da løsner hvert `position: sticky` i dokumentet når mega-navs rullelås setter
 * `overflow: hidden` på `<html>`.
 */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;

	/*
	 * Prosamålet fanget der kjernen definerer det: et band overskriver
	 * `--wp--style--global--content-size` for seg og sine, så et prosaband trenger et navn på
	 * målet som ikke leser sitt eget nye tak.
	 */
	--ft-prosamaal: var(--wp--style--global--content-size);
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

/*
 * `hidden` må slå `display` over, ellers vinner regelen over.
 *
 * Nettleserens egen stilmal sier `[hidden] { display: none }`, men det er en
 * ren elementregel og taper mot `img { display: block }` rett over her. Da blir
 * elementer som skjuler seg med attributtet stående synlige. WooCommerce gjør
 * nettopp det i handlekurvskuffen: den rendrer to bilder - ett for produkter
 * som er skjult i katalogen og ett med lenke - og skjuler det ene med `hidden`.
 * Uten denne regelen viste skuffen samme bilde to ganger.
 */
[hidden] {
	display: none !important;
}

button {
	font: inherit;
	color: inherit;
	cursor: pointer;
	background: none;
	border: none;
}

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

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

details summary {
	cursor: pointer;
	list-style: none;
}

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

:where(a, button, input, select, textarea, summary):focus-visible {
	/* 2px: fokusringens tykkelse og avstand — tilgjengelighet, ikke spacing. */
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

.sr-only,
.screen-reader-text {
	position: absolute;
	/* 1px: sr-only-idiomet — flaten må finnes for skjermlesere, men ikke sees. */
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ──────────────────────  TYPOGRAFI, GLOBALT  ────────────────────── */

/* Amatic-titler skal alltid brytes logisk, ikke bare i én blokk. */
h1,
h2,
.wp-block-post-title,
.wp-block-query-title {
	text-wrap: balance;
	text-transform: none;
}

/* Arkivet er fullt av lange versaler i løpende tekst, og et ord bredere enn spalta drar sida sidelengs. */
p {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ──────────────────────────  CONTAINER  ─────────────────────────── */

/*
 * Layout-wrapperen for markup som ikke er blokker — PHP-malene i fru-timian-shopify. Blokkmarkup
 * får det samme gratis av kjernens constrained layout. Aldri en query container.
 */
.ft-container {
	/*
	 * `+ 2 * sideinnrykk` fordi `bandbredde` er kolonnen og denne wrapperen er `border-box`:
	 * paddingen ligger innenfor max-widthen her, mens et bands rotpadding ligger utenfor den.
	 */
	max-width: calc(
		var(--wp--custom--bandbredde) + 2 * var(--wp--custom--sideinnrykk)
	);
	margin-inline: auto;
	padding-inline: var(--wp--custom--sideinnrykk);
}

/*
 * Samme wrapper ett hakk lenger inn. Bare padding, fordi `border-box` legger den innenfor
 * max-widthen — et band må i tillegg senke barnas `max-width`, siden bandets padding ligger utenfor
 * `wideSize`-taket.
 */
.ft-container--innrykk {
	padding-inline: calc(
		var(--wp--custom--sideinnrykk) + var(--wp--custom--bandinnrykk)
	);
}

/* ────────────────────────  BAND OG RYTME  ───────────────────────── */

/*
 * Et band er en full-bredde seksjon med egen bakgrunn og egen vertikal rytme. Blokkene inni eier
 * ingen av de to.
 *
 * Bredden settes som `contentSize` på bandet selv, aldri på barna: da er det kjernens egen
 * layoutregel som måler, og «Innholdsbredde» på en enkelt gruppe virker fortsatt. Kolonnen er
 * bandets bredde og ikke prosamålet — et kortgrid skal ikke klemmes til 640px inne i et 1440px
 * band — og `.alignwide` får `wideSize` av kjernens egen regel.
 */
.ft-band {
	container-type: inline-size;
	container-name: ft-band;
	padding-block: var(--wp--preset--spacing--xxl);

	--wp--style--global--content-size: var(--wp--custom--bandbredde);
}

/*
 * Et bånd med et bredt barn gir fra seg sidepadding, og hever samtidig sitt eget barnetak.
 *
 * Bredden kan ikke ligge på barnet: kjernen skriver `margin-left/right: auto !important` på hvert
 * constrained barn som ikke er left/right/full — `.alignwide` er *ikke* utelatt — så ingen marg,
 * heller ikke en inline, bryter ut av bandets innholdsboks. Prototypens slike seksjoner har 24px
 * sidepadding der resten har `sideinnrykk`, og overskriften står i flukt med sporet, som er hvorfor
 * taket løftes for alle barna og ikke bare det brede.
 */
.ft-band.has-global-padding:has( > .alignwide ) {
	--wp--custom--bandbredde: var(--wp--style--global--wide-size);

	padding-inline: 1.5rem;
}

.ft-band--hero {
	background: var(--wp--preset--color--lys-blaa);
	padding-block: var(--wp--preset--spacing--xl);
}



.ft-band--filter {
	padding-block: var(--wp--preset--spacing--m);
}

/* Bandene hvor kolonnen *er* prosamålet — løpende tekst, ikke et rutenett. */
.ft-band.is-style-prosa {
	--wp--style--global--content-size: var(--ft-prosamaal);
}

/* ───────────────  REDAKSJONELLE SIDER  ────────────────── */

/*
 * Sider som «Tips til smaksprøver» er ren brødtekst fra databasen, lagt inn i prosabandet av
 * page.html. Markupen er i orden - h2, h3, avsnitt, punktlister - den mangler bare rytme.
 *
 * Det som gjør mest her er punktlistene. Hvert punkt åpner med en fet overskrift og fortsetter i
 * brødtekst under et linjeskift («Dipp til potetgull og grønnsaksstaver» + oppskriften under), og
 * uten hjelp renner de sammen til én vegg med tekst der ingenting skiller ett tips fra det neste.
 *
 * `:has(> strong:first-child)` er med vilje: den treffer bare lister som faktisk er skrevet på den
 * formen. Vanlige punktlister ellers på sida beholder kulepunktene sine.
 */
/*
 * Idélistene blir lyseblå paneler.
 *
 * De er sidas eneste virkelig avgrensede innhold - en samling oppskrifter midt i løpende tekst -
 * og tåler derfor en flate rundt seg. Det er også det ene stedet den lyseblå fargen kan komme inn
 * på en side som ellers bare er tekst, uten at vi må røre innholdet i databasen.
 */
/*
 * Idélistene blir lyseblå paneler.
 *
 * De er sidas eneste virkelig avgrensede innhold - en samling oppskrifter midt i løpende tekst -
 * og tåler derfor en flate rundt seg. Det er også det ene stedet den lyseblå fargen kan komme inn
 * på en side som ellers bare er tekst, uten at vi må røre innholdet i databasen.
 *
 * Panelet følger prosamålet. Et bredere panel (840px) med tipsene i et to-spalters rutenett ble
 * prøvd 17.09.2026 og forkastet - det ble ikke bedre enn den enkle stabelen.
 */
:root .ft-band.is-style-prosa .wp-block-list:has(> li > strong:first-child) {
	margin-block: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--kant);
	list-style: none;
}

/* Hårstrek mellom tipsene i stedet for en strek langs kanten: på blå flate leser den tydeligere. */
:root .ft-band.is-style-prosa .wp-block-list:has(> li > strong:first-child) > li + li {
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--m);
	border-block-start: 1px solid rgba(26, 26, 26, 0.12);
}

/*
 * Den fete åpningslinja er en overskrift i praksis. Som `block` får den sin egen linje uansett om
 * forfatteren husket linjeskiftet, og litt luft ned til teksten den hører til.
 */
:root .ft-band.is-style-prosa .wp-block-list > li > strong:first-child {
	display: block;
	margin-block-end: var(--wp--preset--spacing--xxxs);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1.35;
}

/*
 * Bildene bryter ut av prosakolonnen og legger seg på bandbredden - samme kant som navraden.
 *
 * Teksten blir stående på prosamålet, for en linje på 1280px er ikke lesbar. Men da fløt hele sida
 * midt i vinduet uten å forholde seg til noe, og det er nettopp det som gjorde at den ikke så ut
 * som resten av nettstedet. Bildene er det som kan bære den kanten.
 *
 * `left: 50%` + `translateX(-50%)` sentrerer på kolonnens midtakse, som er den samme som bandets,
 * så bildet legger seg symmetrisk uansett hvor bred kolonnen er. Bredden regnes som bandets egen:
 * bandbredden, men aldri bredere enn vinduet minus sideinnrykket.
 */
:root .ft-band.is-style-prosa .wp-block-image {
	position: relative;
	left: 50%;
	width: min(
		var(--wp--custom--bandbredde),
		calc(100vw - 2 * var(--wp--custom--sideinnrykk))
	);
	max-width: none;
	margin-block: var(--wp--preset--spacing--xl);
	transform: translateX(-50%);
}

:root .ft-band.is-style-prosa .wp-block-image img {
	width: 100%;
	height: auto;
}

/*
 * Første og siste element skal ikke legge sin egen luft oppå bandets.
 *
 * Bandet har `padding-block: xxl` (opptil 64px), og toppbildet har i tillegg `margin-block: xl`
 * (opptil 48px). De to la seg etter hverandre, og avstanden fra navraden ned til bildet ble over
 * 110px - et hull som leste som en feil. Bandets padding skal styre kantene; elementenes marger
 * gjelder avstanden *mellom* dem.
 *
 * Står etter bilderegelen med vilje: de veier like mye (0,4,0), så rekkefølgen avgjør.
 */
:root .ft-band.is-style-prosa .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

:root .ft-band.is-style-prosa .wp-block-post-content > :last-child {
	margin-block-end: 0;
}

:root .ft-band.is-style-prosa .wp-block-image img {
	border-radius: var(--wp--custom--radius--kant);
}

/*
 * Editoren etterlater gjerne et tomt avsnitt nederst. Det er usynlig, men det tar plass og gir
 * sida en hale av luft som ser ut som en feil.
 */
:root .ft-band.is-style-prosa p:empty {
	display: none;
}

/*
 * Det redaksjonelle innrykket. `min()` av to ledd og begge trengs: `100%` smalner med vinduet,
 * `bandbredde` er taket — uten det forsvinner innrykket på en bred skjerm, fordi et bands padding
 * ligger utenfor taket.
 */
.ft-band.is-style-innrykk {
	--wp--style--global--content-size: min(
		calc(var(--wp--custom--bandbredde) - 2 * var(--wp--custom--bandinnrykk)),
		calc(100% - 2 * var(--wp--custom--bandinnrykk))
	);
}

/*
 * Hvorfor `:is(.ft-main, .wp-block-post-content)` og ikke bare `.ft-main >`:
 * naar forsida er en ekte side, ligger baandene i sidas *innhold*, og `core/post-content` legger
 * sin egen `<div class="wp-block-post-content">` mellom `<main>` og dem. Alle reglene under som
 * maaler naboskap mellom baand - nulling av dobbel toppluft, tintede flater, filterstripa - er
 * direkte-barn-regler, og de ville falt stille ut.
 *
 * Andre ledd staar uten `.ft-main >` foran seg med vilje: i sideredigereren *er* post-content
 * rotbeholderen (`.is-root-container.wp-block-post-content`), og det finnes ingen `<main>` rundt
 * den. Samme regel treffer dermed bade forsida og redigereren, og kunden ser baandene slik de
 * faktisk blir.
 */
:is(.ft-main, .wp-block-post-content) > .ft-band + .ft-band {
	padding-block-start: 0;
}

/*
 * Et tonet band.
 *
 * Flata gjoer bandet til sitt eget felt paa sida, og bryter opp en lang hvit strekning - det var
 * derfor det kom. To ting foelger av at den har farge:
 *
 * Bandet maa ha sin egen toppluft. Regelen rett over nuller den mellom to band, fordi to hvite band
 * ellers faar dobbel luft i et skille oeyet ikke ser. Her *er* det et skille, og uten padding ville
 * fargen begynt i kanten av innholdet.
 *
 * Og bandet etter maa faa sin tilbake, av samme grunn: det staar ikke lenger inntil noe hvitt.
 *
 * Velgeren tar to veier inn, fordi det finnes to maater aa tone et band paa:
 *
 *   `.ft-band--tint`   temaets egen klasse, som moensteret baerer.
 *   `.has-background`  klassen kjernen selv setter naar noen velger en bakgrunnsfarge i
 *                      «Bakgrunn -> Farge» i redigereren. Det er den doera kunden bruker, og da
 *                      skal lufta foelge med uten at noen trenger aa vite om en CSS-klasse.
 *
 * En vanlig klasse og ikke en blokkstil: kjernens stilvelger er enkeltvalg, saa «Blaatt band»
 * ville slaatt ut `is-style-innrykk` - og bandet mistet tekstbredden sin.
 */
:root :is(.ft-main, .wp-block-post-content) > .ft-band:is(.ft-band--tint, .has-background) {
	padding-block: var(--wp--preset--spacing--xxxl);
}

:root :is(.ft-main, .wp-block-post-content) > .ft-band:is(.ft-band--tint, .has-background) + .ft-band {
	padding-block-start: var(--wp--preset--spacing--xxl);
}

/* ─────────────  BILDE OG TEKST (core/media-text)  ───────────────── */

/*
 * Husets form på `core/media-text`. Her og ikke i et blokkstilark, fordi blokka er kjernens og har
 * ingen `style.scss` å legge ved seg. Hvert ledd under er ett klasseledd mer enn kjernens egen
 * regel, og begge bildesider står skrevet ut, fordi kjernens ark laster i motsatt rekkefølge på
 * fronten og i redigereren.
 */

/*
 * Like halvdeler, ikke kjernens `50% 1fr`: med en gate mellom kolonnene blir kjernens 50 % bildets
 * hele halvdel og teksten resten minus gaten. Drar en redaktør i skillet, vinner kjernens inline
 * `grid-template-columns` fortsatt over dette.
 */
:root .wp-block-media-text,
:root .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: 1fr 1fr;
	column-gap: var(--wp--preset--spacing--xl);
}

/*
 * Luft mellom to rader under hverandre. Ikke `blockGap`: temaets globale er 0, og en `blockGap` på
 * bandet ville lagt den samme luften mellom bandoverskriften og raden også.
 */
:root .wp-block-media-text + .wp-block-media-text {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/*
 * Tekstkolonnen eier luften mellom elementene sine gjennom `gap`, så kjernens `padding: 0 8%` må
 * bort og elementmargene med den. `flex` og ikke `flow`, fordi `__content` ikke er en
 * layout-beholder for kjernen og derfor ikke har noen `blockGap` å sette.
 */
:root .wp-block-media-text > .wp-block-media-text__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxs);
	padding: 0;
}

:root .wp-block-media-text__content > * {
	margin-block: 0;
}

/* 27.5rem: tekstbredden i denne raden — halve bandet er for bredt. */
:root .wp-block-media-text__content > p {
	max-width: 27.5rem;
}

/* Knappen står litt friere enn avsnittene fra hverandre. */
:root .wp-block-media-text__content > .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--xxs);
}

/*
 * En lenke i teksten er gul og understreket. theme.json gir alle lenker `inherit` uten strek, som er
 * riktig for et kort og en meny og feil midt i et avsnitt.
 */
:root .wp-block-media-text__content a:not( .wp-block-button__link ) {
	color: var(--wp--preset--color--gul);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/*
 * Bildeforholdet er temaets valg, fordi blokka ikke har noen kontroll for det: `imageFill` fyller
 * radens høyde, altså tekstens, så en rad med lite tekst gir et lavt bilde.
 */
:root .wp-block-media-text > .wp-block-media-text__media {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--wp--custom--radius--kant);
}

:root .wp-block-media-text__media img {
	height: 100%;
	object-fit: cover;
}

/*
 * `portrett`: sitatradens stående bilde. Bildet er en portrettflate og ikke en halv rad, så det står
 * midtstilt i sin egen kolonne.
 */
:root .wp-block-media-text.is-style-portrett > .wp-block-media-text__media {
	aspect-ratio: 3 / 4;
	max-width: 27.5rem;
	justify-self: center;
}

/*
 * `sitat`: overskriftsstilen med den håndtegnede loddrette streken. Skrift og størrelse står her og
 * arves ikke fra nivået, fordi nivået er et semantisk valg og stilen skal se lik ut uansett hvilket
 * redaktøren velger. Streken er et SVG og ikke en `border-left`, fordi den skal skjelve.
 */
:root .is-style-sitat {
	position: relative;
	/* 1.375rem: streken er 8px bred og teksten skal stå fri av den. */
	padding-inline-start: 1.375rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1.1;
	/*
	 * 33rem: uten et mål står setningen på én linje, og da blir den håndtegnede streken en kort strek
	 * ved siden av én linje i stedet for den høye streken designet tegner.
	 */
	max-width: 33rem;
	text-wrap: balance;
}

/*
 * Sitatet står litt friere fra teksten under seg. Skrevet mot kolonnen og ikke bare mot stilen,
 * fordi `__content > *` nuller margene med de samme to klassene.
 */
:root .wp-block-media-text__content > .is-style-sitat {
	margin-block-end: var(--wp--preset--spacing--xxs);
}

/*
 * Fargen står som en literal: en `data:`-URL er en streng, og CSS setter ikke en custom property inn
 * i den. %23E09900 er `gul`.
 */
:root .is-style-sitat::before {
	content: '';
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	/* 8px: strekens egen bredde i tegningen. */
	width: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 200' preserveAspectRatio='none'%3E%3Cpath d='M3.5 0 Q5 14 4 28 Q3 42 5 56 Q6 70 4 84 Q3 98 5 112 Q6 126 4 140 Q3 154 5 168 Q6 182 4 200' stroke='%23E09900' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/*
 * Én kolonne når bandet ikke er bredt nok til to. Bandet spørres og ikke raden: `core/media-text`
 * erklærer ingen container, og en container kan ikke spørres av elementet som erklærer den.
 * Rekkefølgen er skrevet ut for begge bildesider, fordi kjernens egne
 * `has-media-on-the-right`-regler veier (0,3,0).
 */
@container ft-band (max-width: 48em) {
	:root .wp-block-media-text,
	:root .wp-block-media-text.has-media-on-the-right {
		grid-template-columns: 1fr;
		row-gap: var(--wp--preset--spacing--m);
	}

	:root .wp-block-media-text > .wp-block-media-text__media,
	:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
		grid-column: 1;
		grid-row: 1;
	}

	:root .wp-block-media-text > .wp-block-media-text__content,
	:root .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
		grid-column: 1;
		grid-row: 2;
	}

	/* I én kolonne er portrettet ikke et innrykk lenger, bare et smalere bilde. */
	:root .wp-block-media-text.is-style-portrett > .wp-block-media-text__media {
		max-width: none;
	}
}

/*
 * `enkel`: oppskriftskortets andre tegning, brukt bare på «Populært akkurat nå». Den overstyrer bare
 * det som er annerledes — kortets standardutseende blir stående i kort.css. Ingen ny markup:
 * `inc/recipe-card.php` tegner det samme for alle fire variasjonene, så «enkel» skjuler tre av de
 * fire meta-punktene i stedet for å be om en annen liste.
 */
:root .is-style-enkel {
	/* Prototypens `.popular-now__grid` står tettere enn arkivets `.recipes__grid`. */
	--ft-mellomrom: var(--wp--preset--spacing--s);
}

:root .is-style-enkel .ft-kort__bilde {
	/* 1/1, mot standardkortets 4/3. */
	aspect-ratio: 1 / 1;
}

:root .is-style-enkel .ft-kort__etikett {
	/* Kroppens `gap` er hele avstanden ned til tittelen. */
	position: static;
	margin: 0;
}

:root .is-style-enkel .ft-merke {
	/*
	 * Ren tekst, ikke en pille. `block` og ikke `inline-flex`: en inline-boks arver kroppens
	 * linjehøyde og legger luft over og under en etikett som er mindre enn den.
	 */
	display: block;
	height: auto;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--gul);
	font-size: var(--wp--preset--font-size--kicker-s);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

:root .is-style-enkel .ft-kort .ft-kort__tittel {
	/* brodtekst-l, ikke kortstandardens egen størrelse. */
	font-size: var(--wp--preset--font-size--brodtekst-l);
}

/*
 * Bare lagretellingen står igjen i meta-raden. Tiden har ingen modifikatorklasse, så treffet er på
 * fraværet av `--lagringer` og ikke på en liste av det som skal bort.
 */
:root .is-style-enkel .ft-kort__meta-punkt:not(.ft-kort__meta-punkt--lagringer) {
	display: none;
}

/*
 * `kant`: ukearkivets paginering, prototypens `.ukemeny-pagination` (ukemeny.html) — firkantede
 * hvite bokser med kantstrek, mot standardens lyseblå piller fra oppskriftsarkivet. Prototypen
 * tegner de to arkivenes paginering ulikt, så `archive-ukemeny.html` velger denne stilen.
 * Hover-beigen er `lys-blaa` av samme grunn som `.ft-merke` i kort.css.
 */
:root .is-style-kant .ft-paginering__tall,
:root .is-style-kant .ft-paginering__pil {
	min-width: 2.5rem;
	height: 2.5rem;
	border-color: rgb(0 0 0 / 12%);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--hvit);
	font-weight: 600;
}

:root .is-style-kant a.ft-paginering__tall:hover,
:root .is-style-kant a.ft-paginering__tall:focus-visible,
:root .is-style-kant .ft-paginering__pil:hover,
:root .is-style-kant .ft-paginering__pil:focus-visible {
	border-color: rgb(0 0 0 / 20%);
	background: var(--wp--preset--color--lys-blaa);
}

:root .is-style-kant .ft-paginering__tall.er-aktiv {
	border-color: var(--wp--preset--color--tekst);
	background: var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--hvit);
}

:root .is-style-kant .ft-paginering__hopp {
	height: 2.5rem;
}

/* ──────────────────────────  DELT KNAPP  ────────────────────────── */

/*
 * Temaets ene knapp er kjernens `.wp-element-button`, og formen bor i theme.json
 * (`styles.elements.button`) slik at redigereren og fronten leser samme kilde. Her står bare det
 * theme.json ikke kan si: geometrien, løftet på hover og den mørke varianten `.ft-knapp--moerk`.
 *
 * Hver velger bærer `:root`. Kjernens egen knappregel er `:root :where(.wp-element-button,
 * .wp-block-button__link)`, og `:where()` teller null — en bar klasse står uavgjort og avgjøres av
 * lasterekkefølgen, som snur mellom en blokkmal og butikkens PHP-maler.
 */
:root .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xxxs);
	/* 2.5rem: prototypens 40px høyde — luften alene gir 38. */
	min-block-size: 2.5rem;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	transition: transform var(--wp--custom--overgang--rask) ease, filter var(--wp--custom--overgang--rask) ease;
}

:root .wp-element-button:hover,
:root .wp-element-button:focus-visible {
	color: var(--wp--preset--color--hvit);
	/* 1px: optisk løft, ikke spacing — knappen skal så vidt bevege seg. */
	transform: translateY(-1px);
	filter: brightness(1.08);
}

:root .ft-knapp--moerk {
	background: var(--wp--preset--color--tekst);
}

:root .ft-knapp--moerk:hover,
:root .ft-knapp--moerk:focus-visible {
	background: var(--wp--preset--color--tekst-hover);
}

@media (prefers-reduced-motion: reduce) {
	:root .wp-element-button:hover,
	:root .wp-element-button:focus-visible {
		transform: none;
	}
}

/* ─────────────────────────  HEADER-PART  ────────────────────────── */

.ft-header {
	container-type: inline-size;
	container-name: ft-band;
	position: sticky;
	/* Negativ topp i toppbarens høyde: baren ruller ut av bildet, og bare headerraden står igjen. */
	top: calc(-1 * var(--wp--custom--topbar-hoyde));
	z-index: var(--wp--custom--lag--topp);
	background: color-mix(in srgb, var(--wp--preset--color--hvit) 92%, transparent);
}

/*
 * Headeren viker naar du ruller nedover og kommer tilbake naar du ruller opp.
 *
 * Det er `top` som flyttes, ikke `transform`. Et `transform` - eller `translate`, eller
 * `backdrop-filter` - ville gjort headeren til containing block for alt `fixed` under seg, og
 * mega-nav-skuffen er nettopp det: `position: fixed; inset-block: 0` inne i headeren. Da ville
 * `inset-block: 0` sluttet aa bety vinduet. Det er samme fella som er beskrevet over.
 *
 * Hoeyden kommer fra `header.js`, som maaler den og skriver den hit. Den kan ikke staa som et tall:
 * headerraden brytes i to paa smal skjerm, og toppstripa kan vaere borte.
 */
.ft-header {
	transition: top var(--wp--custom--overgang--myk) ease;
}

.ft-header.ft-header--skjult {
	top: calc(-1 * var(--ft-header-hoeyde, 12rem));
}

/* Den som har bedt om mindre bevegelse skal ikke faa en header som glir. Den bare er der. */
@media (prefers-reduced-motion: reduce) {
	.ft-header {
		transition: none;
	}

	.ft-header.ft-header--skjult {
		top: calc(-1 * var(--wp--custom--topbar-hoyde));
	}
}

/*
 * Uskarpheten bor på et pseudoelement og ikke på headeren selv: `backdrop-filter` gjør elementet til
 * containing block for alt `fixed` under seg, og mega-nav-skuffen er `fixed` inne i headeren. Med
 * filteret på headeren ble skuffens `top: 0` headerens topp og ikke viewportens.
 */
/* Soekestripa paa smal skjerm er absolutt plassert mot dette bandet. */
.ft-header__bar {
	position: relative;
}

.ft-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* 12px: blur-radius, en optisk effekt uten forhold til spacing-skalaen. */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ft-topbar {
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
	background: var(--wp--preset--color--hvit);
	border-block-end: var(--wp--custom--linje);
	/* Fast høyde, fordi headerens negative `top` må vite den. */
	block-size: var(--wp--custom--topbar-hoyde);
	padding-block: 0;
	display: grid;
	align-content: center;
	overflow: hidden;
}

.ft-header__bar {
	/*
	 * Luft over og under logolinja.
	 *
	 * Var 0 så lenge logoen var liten: `min-height: 5rem` på logoblokka ga rikelig med slark rundt
	 * en 52px logo. Med 62px logo pluss undertittel fyller blokka de 5rem helt, og da sto merket
	 * klint opp mot topplinja. Luften må derfor komme utenfra.
	 */
	/*
	 * Bare over. Paa bred visning er navraden den siste linja i bandet, og den har sin egen
	 * `padding-block` - bandets bunnpadding kom paa toppen av den og ga 16 px for mye under menyen,
	 * maalt mot frutimian.no. Paa smal visning er navraden `display: contents` og finnes ikke som
	 * boks; da er det bandet som maa gi lufta, og verdien settes tilbake i container-spoerringa.
	 */
	padding-block: var(--wp--preset--spacing--xs) 0;
	/*
	 * Festet for de to tingene som på smal visning står utenfor radens flexlinje: den absolutt
	 * sentrerte logoen, og søkelinja som felles ut under headeren. Bandet og ikke raden, fordi bandet
	 * er like bredt som viewporten.
	 */
	position: relative;
}

/*
 * Headerraden er én flex-beholder med to linjer: `.ft-header__navrow` har `flex-basis: 100%` på bred
 * visning og `display: contents` på smal, som er det ene grepet som får barna opp på radens egen
 * linje uten å flytte noe i DOM-en.
 */
/*
 * Hver regel i headeren bærer `:root`. Rekkefølgen mellom `main.css` og blokkarkene snur mellom en
 * blokkmal og `fru-timian-shopify`s PHP-maler, så hver uavgjort på én klasse faller ut motsatt vei
 * på de to.
 */
:root .ft-header__row {
	column-gap: var(--wp--preset--spacing--s);
	/*
	 * Lufta mellom logolinja og haarstreken over menyen. Var 0, med navradens `padding-block` som
	 * eneste pust - men den paddingen ligger *innenfor* streken og gir luft under den, ikke over.
	 * Logoen sto derfor tett paa linja.
	 */
	row-gap: var(--wp--preset--spacing--xs);
}

/*
 * Logoen er linjas høyeste element og bærer derfor logolinjas høyde. En `min-height` på raden ville
 * ikke gjort noe: raden er begge linjene.
 *
 * Kolonne og ikke rad: merkelogoen står over en liten undertittel som sier hvilken butikk dette er.
 */
:root .ft-header__logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 1px;
	min-height: 5rem;
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
	/*
	 * 62px, mot 52px før. Logoen ble målt mot referansen og var for spinkel.
	 *
	 * Halvparten av økningen er gratis: `fru-timian-logo-tett.png` er den samme fila beskåret til
	 * selve motivet. Originalen har 17 % luft bakt inn i pikslene (innholdet ligger i 76,52-1935,714
	 * av 2048x800), så ved samme boks-høyde tegnes tegningen 21 % større. Originalen ligger igjen
	 * som `fru-timian-logo.png`.
	 *
	 * Taket er undertittelen: logo + undertittel må få plass i navradens 5rem. 62px gjør det så
	 * vidt, og raden står derfor like høy som før.
	 */
	--ft-logo-hoyde: 62px;
	/*
	 * Ordmerket «Fru Timian» starter 20,6 % inn i den beskårne fila - kvisten tar plassen før det.
	 * Undertittelen må rykkes like langt inn for å stå under skriften og ikke under bladverket.
	 * Regnestykket står her i stedet for et pikseltall, så innrykket følger med når logohøyden
	 * endres på smal visning.
	 */
	--ft-logo-innrykk: calc(var(--ft-logo-hoyde) * (1860 / 663) * 0.206);
}

:root .ft-header__logo img {
	width: auto;
	height: var(--ft-logo-hoyde);
}

/*
 * Undertittelen står i displayskriften, som resten av sida. Amatic SC er en kapitélskrift —
 * små bokstaver tegnes som kapitéler — så den trenger ingen `text-transform`, og den må settes
 * et par grader større enn en tilsvarende brødtekstlinje for å bli like lesbar.
 */
:root .ft-header__undertittel {
	font-family: var(--wp--preset--font-family--display);
	/*
	 * Et hakk ned fra tittel-m. Da «Fru Timians forhandlerbutikk» ble kortet til ett ord, ble
	 * linja stående like bred og like tung som selve logoen - to ordmerker over hverandre i stedet
	 * for et merke med en etikett under. Mindre grad og litt mer sperring gjør den underordnet.
	 */
	/*
	 * Bundet til logohøyden framfor et fast trinn: undertittelen skal fylle omtrent samme bredde
	 * som ordmerket over seg, og ordmerket skalerer med `--ft-logo-hoyde`. En fast `tittel-s` ville
	 * blitt liggende igjen neste gang logoen endrer størrelse.
	 *
	 * 0.349: målt, ikke gjettet. Et skjermbilde av headeren ga ordmerket 276px og undertittelen
	 * 258px ved samme skala - altså 6 % for kort - og venstrekantene sto allerede likt. Sperringen
	 * er satt i `em`, så den skalerer med graden og hele linja vokser proporsjonalt.
	 */
	font-size: calc(var(--ft-logo-hoyde) * 0.349);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.09em;
	color: var(--wp--preset--color--tekst-svak);
	margin-inline-start: var(--ft-logo-innrykk);
}

/*
 * `:root` foran velgeren: kjernens margin-nulling for barna av en flex-beholder er
 * `:root :where(.is-layout-flex) > :is(*, div)` — (0,1,1), fordi `:is()` teller sitt tyngste
 * argument og en type er med. En bar klasse taper uansett rekkefølge.
 */
:root .ft-header__actions {
	gap: var(--wp--preset--spacing--xs);
	margin-inline-start: auto;
}

/*
 * Navigasjonsraden er menyen og kontolenkene ytterst. Plasseringen bor her og ikke i blokkas eget
 * stilark: blokka emitterer innhold, parten bestemmer hvor det står. `flex-basis: 100%` er
 * linjeskiftet, og `:root` foran av samme grunn som actions over.
 */
:root .ft-header__navrow {
	flex-basis: 100%;
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--xxxs);
	border-block-start: var(--wp--custom--linje);
}



/*
 * En rad uten innhold tar ingen plass. Spørsmålet går til radens barn og ikke til raden: raden er en
 * `core/group` med lagret markup, så `:empty` ville aldri slått til.
 */
.ft-header__navrow:not(:has(> *)) {
	display: none;
}

/*
 * Smal visning: prototypens ene rad, med logoen absolutt sentrert over den. Betingelsen gjentar
 * verdien literalt, fordi en `@container`-betingelse ikke kan lese en custom property. Søkefeltet
 * blir en ikonknapp, kontolenkene flytter til skuffens fot, og navradens hårstrek går med raden.
 */
@container ft-band (max-width: 48em) {
	:root .ft-header__row {
		flex-wrap: nowrap;
		/* 56px: logolinjas høyde på smal visning. */
		min-height: 3.5rem;
		/*
		 * 6px: avstanden mellom søkeikonet og vogna, en optisk verdi mellom to knapper. Den store luften
		 * mot hamburgeren er søkeskallets `margin-inline-start: auto`.
		 */
		column-gap: 6px;
	}

	/*
	 * Logoen sentreres på raden og ikke mellom knappene: en logo som fant midten mellom en hamburger
	 * til venstre og to knapper til høyre ville stått for langt til venstre.
	 */
	:root .ft-header__logo {
		position: absolute;
		left: 50%;
		/*
		 * Ett tall styrer midtstillinga. 0 % er geometrisk midte - boksen staar eksakt midt paa
		 * raden. Hever du det, flyttes lockupen mot venstre, slik at oeyet midtstiller *ordmerket*
		 * i stedet for bildet: kvisten opptar de foerste 20,6 % av fila (samme tall som
		 * `--ft-logo-innrykk` bruker), saa full optisk kompensasjon er 10,3 %. Det ble for mye i
		 * praksis - undertittelen trekker allerede tyngdepunktet mot hoeyre - saa vi staar paa 0
		 * og har tallet her om det skal finjusteres.
		 */
		--ft-logo-optisk: 0%;

		transform: translateX(calc(-50% - var(--ft-logo-optisk)));
		margin: 0;
		/*
		 * Raden driver linjehøyden her, ikke logoen. En logoboks som beholdt høyden fra bred visning
		 * ville stått utenfor en rad den er absolutt plassert i.
		 */
		min-height: 0;
	}

	:root .ft-header__logo {
		/*
		 * 40px: logoens bildehøyde på smal visning. Forbildet ligger på 36px - målt mot vogna, som
		 * er nøyaktig like stor i begge skjermbildene - men det er en logo uten undertittel. Våre
		 * 40px gir «Forhandlerbutikk» 14px å stå på (0,349 av høyden), og under det begynner den å
		 * bli en strek. Innrykket og undertittelens størrelse regner seg om selv.
		 */
		--ft-logo-hoyde: 40px;
	}

		/*
		 * Navraden slutter å være en linje og blir sine egne barn. `display: contents` er hele
		 * ombyggingen: hamburgeren står i mega-nav, som står i navraden. Hårstreken og paddingen
		 * forsvinner med boksen, som er riktig — de hørte linja.
		 */
	:root .ft-header__navrow {
		display: contents;
	}

	/* Navraden er borte som boks her, saa bandet gir lufta under raden igjen. */
	:root .ft-header__bar {
		padding-block: var(--wp--preset--spacing--xs);
	}

	

	:root .ft-header__actions {
		order: 3;
		/* Margen er søkeskallets nå; to auto-marger ville delt luften mellom dem. */
		margin-inline-start: 0;
	}

	
}

/* ─────────────  PRODUKTRADEN SOM KARUSELL PAA SMAL SKJERM  ───────────── */

/*
 * Rammen og pilene lages av `assets/js/karusell.js`: produktlista er WooCommerce sin egen blokk,
 * saa vi eier ikke markupen inni - men vi kan legge noe rundt den.
 *
 * Paa bred visning er dette ingenting: rammen er en vanlig div, rutenettet er rutenettet, og
 * skriptet skjuler begge pilene fordi det ikke finnes noe aa rulle.
 */
.ft-karusell {
	position: relative;
}

.ft-karusell__pil {
	display: none;
}

@container ft-band (max-width: 48em) {
	/*
	 * Woo regner sporbredden selv (se kommentaren over rutenettet), saa her overtar vi hele
	 * layouten i stedet for aa pirke i den: raden er flex, og kortene faar sin egen bredde.
	 * `:root .ft-band` maa til for aa veie tyngre enn Woos egen
	 * `.wc-block-product-template__responsive.columns-3`.
	 */
	:root .ft-band .ft-karusell .wc-block-product-template {
		display: flex;
		gap: var(--wp--preset--spacing--m);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
	}

	:root .ft-band .ft-karusell .wc-block-product-template::-webkit-scrollbar {
		display: none;
	}

	/* 72 %: kortet fyller skjermen, men neste kort titter fram og forteller at raden fortsetter. */
	:root .ft-band .ft-karusell .wc-block-product {
		flex: 0 0 72%;
		scroll-snap-align: start;
	}

	:root .ft-karusell__pil {
		display: grid;
		place-items: center;
		position: absolute;
		/* 38 %: omtrent midt paa produktbildet, som paa forbildet - ikke midt paa hele kortet. */
		top: 38%;
		z-index: 2;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--wp--custom--radius--rund);
		background: var(--wp--preset--color--hvit);
		box-shadow: var(--wp--custom--skygge--heving);
		color: var(--wp--preset--color--tekst);
		cursor: pointer;
	}

	/* Enden av raden: pila blir staaende, men tonet ned og uten skygge. */
	:root .ft-karusell__pil:disabled {
		opacity: 0.35;
		box-shadow: none;
		cursor: default;
	}

	/* Halvveis utenfor raden, slik at de ikke spiser av kortet de staar over. */
	:root .ft-karusell__pil--forrige {
		inset-inline-start: -14px;
	}

	:root .ft-karusell__pil--neste {
		inset-inline-end: -14px;
	}

	:root .ft-karusell__pil svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}


/* ─────────────  TOPPSTRIPA SOM RULLER  ───────────── */

/*
 * Loeftene ruller sidelengs paa smal skjerm, som paa forbildet. Mekanikken er to identiske rader
 * etter hverandre i ett spor: naar sporet har flyttet seg noeyaktig sin halve bredde, staar kopien
 * der originalen stod, og animasjonen kan begynne paa nytt uten at noen ser skjoeten. Kopien er
 * `aria-hidden`, saa en skjermleser leser loeftene én gang.
 *
 * Paa bred visning staar linja stille og midtstilt - der er det plass, og en tekst som beveger seg
 * uten grunn er bare stoey. Kopien skjules da.
 */
:root .ft-topbar .ft-topbar__spor {
	/* Bandet ville klemt sporet til bandbredden; stripa er full bredde. */
	max-width: none;
	display: flex;
	justify-content: center;
	white-space: nowrap;
	/*
	 * Samme luft som mellom punktene inne i rada. Uten den ble skjoeten skjev naar stripa ruller:
	 * rada har `gap` mellom sine egne barn, men mellom rada og kopien sin var det ingenting - saa
	 * den siste prikken fikk luft paa venstre side og sto klint inntil foerste ord paa hoeyre.
	 */
	gap: var(--wp--preset--spacing--xs);
}

.ft-topbar__rad {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

.ft-topbar__prikk {
	color: var(--wp--preset--color--tekst-svak);
}

/*
 * Sloeyfa i `kortkode_toppstripe()` skriver en prikk etter hvert punkt, ogsaa det siste. Det er
 * med vilje: paa smal skjerm ruller rada rundt med en kopi av seg selv, og da er den siste prikken
 * skjoeten mellom siste og foerste punkt. Staar rada stille, er den bare en prikk som henger.
 *
 * Den skjules her og hentes fram igjen der rullinga slaas paa.
 */
.ft-topbar__rad .ft-topbar__prikk:last-child {
	display: none;
}

.ft-topbar__rad--kopi {
	display: none;
}

@container ft-band (max-width: 48em) {
	:root .ft-topbar .ft-topbar__spor {
		justify-content: flex-start;
		width: max-content;
		animation: ft-topbar-rull 24s linear infinite;
	}

	.ft-topbar__rad--kopi {
		display: flex;
	}

	/* Her henger rada sammen med kopien sin, og skjoeten trenger skilletegnet sitt. */
	.ft-topbar__rad .ft-topbar__prikk:last-child {
		display: inline;
	}

	/* Fingeren paa stripa stopper den - samme hoeflighet som `:hover` gir en mus. */
	.ft-topbar:hover .ft-topbar__spor,
	.ft-topbar:active .ft-topbar__spor {
		animation-play-state: paused;
	}
}

@keyframes ft-topbar-rull {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Tekst som beveger seg er nettopp det denne innstillingen finnes for. */
@media (prefers-reduced-motion: reduce) {
	:root .ft-topbar .ft-topbar__spor {
		animation: none;
		justify-content: center;
		width: auto;
	}

	/* Rada staar stille her ogsaa, saa den siste prikken har ingen skjoet aa fylle. */
	.ft-topbar__rad .ft-topbar__prikk:last-child {
		display: none;
	}

	.ft-topbar__rad--kopi {
		display: none;
	}
}


/*
 * Headeren er heldekkende paa smal skjerm - ingen gjennomsiktighet, ingen uskarphet.
 *
 * Grunnen er ikke bare smak: `backdrop-filter` paa en `position: sticky`-header er en kjent
 * kilde til at elementet ikke blir komponert mens man ruller. Layouten er riktig hele veien -
 * `elementFromPoint` midt i vinduet gir headerraden, og boksen ligger paa -36px som den skal -
 * men ingenting males. Forbildet har en heldekkende header, saa vi mister ingenting paa aa
 * droppe uskarpheten her.
 */
@media (max-width: 48em) {
	.ft-header {
		background: var(--wp--preset--color--hvit);
	}

	.ft-header::before {
		content: none;
	}
}

/*
 * Sida bak skuffa skal ikke kunne rulles.
 *
 * Laasen maa staa paa `<html>`, og `<html>` ligger *utenfor* bandet som er container - en
 * container-query kan bare style det som staar inni. Derfor en media-query paa samme brekkpunkt.
 * Skuffa selv ruller fortsatt: den er `position: fixed` med sin egen `overflow-y`.
 *
 * Brekkpunktet er med vilje: aapner man menyen paa en telefon og snur den til liggende slik at
 * raden blir bred, forsvinner hamburgeren - og da skal ikke sida bli staaende laast.
 */
@media (max-width: 48em) {
	html:has(.ft-menybryter[open]),
	html:has(.ft-menybryter[open]) body {
		overflow: hidden;
	}
}

/* ─────────────  MOBILMENY OG SØKEBRYTER  ───────────── */

/*
 * To brytere i logoraden, begge `<details>` uten en linje JavaScript. Hele mekanikken er at
 * nettleseren selv holder av- og på-tilstanden i `open`, og `:has()` lar resten av headeren lese
 * den: `.ft-header__bar:has(.ft-menybryter[open])` er «skuffen er ute». Det gir tastatur,
 * skjermleser og bakoverknapp gratis, og det virker om et skript skulle feile.
 *
 * På bred visning finnes ingen av dem: menyen er navraden, søket er feltet.
 */
.ft-menybryter,
.ft-sokbryter,
.ft-mobilmeny__tittel {
	display: none;
}

@container ft-band (max-width: 48em) {
	.ft-menybryter,
	.ft-sokbryter {
		display: block;
	}

	/* Trekanten kjernen tegner foran en `<summary>` skal bort - knappen er ikonet. */
	.ft-menybryter__knapp,
	.ft-sokbryter__knapp {
		display: grid;
		place-items: center;
		/* 44px: minste trygge trykkflate. */
		width: 44px;
		height: 44px;
		cursor: pointer;
		list-style: none;
	}

	.ft-menybryter__knapp::-webkit-details-marker,
	.ft-sokbryter__knapp::-webkit-details-marker {
		display: none;
	}

	/*
	 * Hamburgeren er tre streker av samme element: midtstreken er spanet, de to andre er
	 * `::before`/`::after`. Strekene er *absolutt* plassert, ikke i flyt: i flyt flyttet de seg
	 * naar hoeyden endret seg, og krysset ble staaende en halv piksel fra hverandre - synlig som
	 * en skjev X. Naa maales begge fra samme kant, og `top: 0` i aapen tilstand legger dem
	 * noeyaktig oppaa hverandre.
	 */
	.ft-menybryter__ikon {
		position: relative;
		display: block;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: var(--wp--preset--color--tekst);
		transition: background var(--wp--custom--overgang--rask) ease;
	}

	.ft-menybryter__ikon::before,
	.ft-menybryter__ikon::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		height: 2px;
		border-radius: 2px;
		background: var(--wp--preset--color--tekst);
		transition: top var(--wp--custom--overgang--rask) ease,
			transform var(--wp--custom--overgang--myk) ease;
	}

	.ft-menybryter__ikon::before {
		top: -7px;
	}

	.ft-menybryter__ikon::after {
		top: 7px;
	}

	/*
	 * Krysset er en egen SVG, ikke hamburgerens streker rotert.
	 *
	 * Roterte streker gir firkantede ender og et kryss som er bredere enn det er hoeyt; forbildet
	 * tegner et ekte kryss paa 18x18 med runde ender, og forskjellen syntes. Prisen er at
	 * hamburgeren ikke lenger folder seg om til et kryss - de to ikonene bytter plass i stedet.
	 */
	.ft-menybryter__kryss {
		display: none;
		width: 18px;
		height: 18px;
		fill: none;
		stroke: var(--wp--preset--color--tekst);
		stroke-width: 2;
		stroke-linecap: round;
	}

	.ft-menybryter[open] .ft-menybryter__ikon {
		display: none;
	}

	.ft-menybryter[open] .ft-menybryter__kryss {
		display: block;
	}

	.ft-menybryter {
		/* Foran logoen i raden. */
		order: -1;
	}

	/*
	 * Søkeikonet og vogna hører sammen ytterst til høyre. Marginen sitter på søkebryteren, som er
	 * den første av de to: den dytter seg selv og alt etter den mot kanten. Den gamle regelen la
	 * `margin-inline-start: 0` på handlingene fordi søkeskallet eide marginen den gang feltet stod
	 * i raden - nå er feltet en stripe under raden, og skallet er et ikon.
	 */
	:root .ft-sokbryter {
		margin-inline-start: auto;
	}

	/*
	 * Åpen skuff: bryteren flytter seg inn i skuffa og blir krysset oppe til høyre, slik forbildet
	 * gjør det. Den er fortsatt det samme elementet - et kryss et annet sted i DOM-en ville krevd
	 * enten JavaScript eller en avkrysningsboks i stedet for `<details>`.
	 */
	.ft-menybryter[open] .ft-menybryter__knapp {
		position: fixed;
		z-index: 1002;
		top: 8px;
		inset-inline-start: calc(min(82vw, 26rem) - 52px);
	}

	.ft-sokbryter__ikon {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: var(--wp--preset--color--tekst);
		stroke-width: 2;
		stroke-linecap: round;
	}

	/* ── Søkefeltet ── */

	/*
	 * Feltet ligger i raden hele tiden; det er bare synligheten som henger på bryteren. Stripa
	 * legger seg under raden og bryter ut av bandets sidepadding, så den går fra kant til kant som
	 * på forbildet.
	 */
	:root .ft-header .ft-search {
		display: none;
	}

	/*
	 * Stripa ligger under raden og gaar fra kant til kant. `inset-inline: 0` og ikke et negativt
	 * innrykk: et absolutt plassert barn maales fra forelderens *padding-kant*, og bandets
	 * padding-kant ligger allerede paa vindusk*anten* - et negativt tall dyttet derfor hele stripa
	 * ut av skjermen, og den gule knappen ble staaende halvveis utenfor.
	 */
	:root .ft-header__bar:has(.ft-sokbryter[open]) .ft-search {
		display: block;
		position: absolute;
		top: 100%;
		inset-inline: 0;
		z-index: 1001;
		margin: 0;
		padding: var(--wp--preset--spacing--xs) var(--wp--custom--sideinnrykk);
		background: var(--wp--preset--color--lys-blaa);
	}

	/*
	 * Inne i stripa er pilla snudd vrangen ut: paa bred visning er skallet den lyseblaa flata med
	 * knappen inni, her *er* flata stripa. Skallet blir gjennomsiktig, knappen en egen sirkel, og
	 * selve feltet den hvite pilla - slik forbildet har det.
	 */
	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__inside-wrapper {
		gap: var(--wp--preset--spacing--xs);
		min-height: 0;
		padding: 0;
		background: none;
		border-radius: 0;
	}

	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__button {
		/* 40px: forbildet ligger paa 35, men dette er en trykkflate og ikke en museknapp. */
		width: 40px;
		height: 40px;
	}

	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__button svg {
		width: 20px;
		height: 20px;
	}

	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__input {
		min-height: 40px;
		padding-inline: var(--wp--preset--spacing--s);
		background: var(--wp--preset--color--hvit);
		border-radius: var(--wp--custom--radius--pille);
		font-size: var(--wp--preset--font-size--brodtekst-s);
	}

	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__input::placeholder {
		color: var(--wp--preset--color--tekst-svak);
		opacity: 1;
	}

	/*
	 * Fokusringen hoerer til feltet, ikke til hele skallet. Paa bred visning er skallet pilla, og
	 * da er ringen rundt skallet riktig; her er pilla selve feltet, og en ring rundt skallet la seg
	 * som en firkant rundt baade knappen og feltet. `outline` foelger `border-radius`, saa den
	 * runder seg etter pilla av seg selv.
	 */
	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
		outline: none;
	}

	:root .ft-header__bar:has(.ft-sokbryter[open]) .wp-block-search__input:focus-visible {
		outline: 2px solid var(--wp--preset--color--gul);
		outline-offset: 2px;
	}

	/* ── Skuffen ── */

	.ft-mobilmeny__tittel {
		margin: 0;
		font-family: var(--wp--preset--font-family--display);
		font-size: var(--wp--preset--font-size--display-s);
		line-height: 1;
	}

	/*
	 * Navraden er `display: contents` her fra før, så menypunktene faller rett ned i
	 * headerbandet og ble stående oppå logoen. Fra nå bor de i skuffa: skjult til bryteren
	 * er på. Kontolenkene er allerede skjult lenger oppe, og slås på igjen samme sted.
	 */
	:root .ft-header .ft-nav {
		display: none;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav {
		display: block;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto {
		display: flex;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-header__navrow {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/*
		 * Navraden er en flex-gruppe, og kjernen gir flex-oppsett en `gap` som standard. Den la
		 * seg mellom «Meny»-linja og foerste menypunkt, og mellom punktene og kontoknappene - luft
		 * ingen hadde bedt om. Her eier hårstrekene og paddinga avstandene.
		 */
		gap: 0;
		position: fixed;
		z-index: 1001;
		/*
		 * Full hoeyde, som paa forbildet: kontoknappene hoerer hjemme nederst paa skjermen, ikke
		 * rett under siste menypunkt. `dvh` og ikke `vh`, saa den foelger vinduet naar
		 * nettleserlinja paa mobil gaar inn og ut.
		 */
		inset-block: 0;
		block-size: 100dvh;
		inset-inline-start: 0;
		width: min(82vw, 26rem);
		overflow-y: auto;
		padding: 0;
		background: var(--wp--preset--color--hvit);
	}

	/*
	 * Moerklegginga. Den laa foerst som `::before` paa panelet med `z-index: -1`, og da ble hele
	 * skuffa graa: et barn med negativ z-index males over forelderens *bakgrunn*, bare under
	 * innholdet hennes. Teppet hoerer derfor til bandet og males for seg, ett lag under panelet.
	 */
	:root .ft-header__bar:has(.ft-menybryter[open])::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 1000;
		background: rgb(0 0 0 / 35%);
	}

	/*
	 * «Meny»-linja blir staaende naar lista ruller under den. `sticky` og ikke `fixed`: den er et
	 * barn av skuffa som ruller, saa den skal feste seg i *den* boksen - ikke i vinduet. Hvit
	 * bakgrunn og et lag over, ellers skinner punktene gjennom mens de passerer.
	 */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-mobilmeny__tittel {
		display: block;
		position: sticky;
		top: 0;
		z-index: 1;
		padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
		background: var(--wp--preset--color--hvit);
		border-block-end: var(--wp--custom--linje);
	}

	/* Punktene blir en liste med hårstreker mellom seg, ikke en rad. */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__rad {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		overflow: visible;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__punkt {
		display: block;
		border-block-end: var(--wp--custom--linje);
	}

	/* `xs` og ikke `s`: radene laa omtrent 11 % hoeyere enn forbildets, maalt mellom to punkter. */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__lenke {
		flex: 1;
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
		font-size: var(--wp--preset--font-size--brodtekst);
	}

	/* ── Trekkspillet ── */

	/*
	 * Her betyr `<details>` det den ser ut som: punktet aapner seg. Lenka inni sammendraget skal
	 * *ikke* navigere paa trykk - da ville «Produkter» sendt deg av garde i stedet for aa vise
	 * kategoriene - saa den slaas av for musa og fingeren, mens tastaturet fortsatt naar den.
	 */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__sammendrag {
		justify-content: space-between;
		padding-inline-end: var(--wp--preset--spacing--m);
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__sammendrag .ft-nav__lenke {
		pointer-events: none;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__pil {
		width: 14px;
		height: 8px;
		flex-shrink: 0;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__gruppe[open] .ft-nav__pil {
		transform: rotate(180deg);
	}

	/*
	 * I skuffa er det `[open]` som bestemmer - ingenting annet.
	 *
	 * Reglene for bred visning aapner panelet paa `:hover` og `:focus-within`, og et trykk paa
	 * raden etterlater fokus paa sammendraget. Panelet ble derfor staaende aapent etter at
	 * trekkspillet var lukket igjen, absolutt plassert, halvveis utenfor skuffa. Denne regelen
	 * veier tyngre enn begge to og nuller dem her inne; `static` gjoer at det som faktisk vises
	 * skyver punktene under seg i stedet for aa legge seg oppaa dem.
	 */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__panel {
		display: none;
		position: static;
	}

	/* Panelet slutter aa vaere et panel og blir en liste under punktet. */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__gruppe[open] + .ft-nav__panel {
		display: block;
		position: static;
		padding: 0;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__panel-innhold {
		display: block;
		border-radius: 0;
		box-shadow: none;
		background: var(--wp--preset--color--lys-blaa);
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__celle {
		padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
		border-inline-end: 0;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__celle--kolonne {
		min-inline-size: 0;
	}

	/*
	 * Reklamekortet blir liggende, men legger seg ned: bildet til venstre i 72px, teksten ved
	 * siden av. Staaende, slik det er i det brede panelet, ville det tatt en halv telefonskjerm
	 * og dyttet menypunktene ut av syne - og et menypunkt man maa rulle for aa finne er et
	 * menypunkt som ikke finnes.
	 */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__celle--kort {
		inline-size: auto;
		padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
		border-block-start: var(--wp--custom--linje);
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort {
		display: grid;
		grid-template-columns: 72px 1fr;
		column-gap: var(--wp--preset--spacing--s);
		row-gap: 2px;
		align-items: center;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort-bilde {
		grid-column: 1;
		grid-row: 1 / span 3;
		margin-block-end: 0;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort-tittel {
		font-size: var(--wp--preset--font-size--tittel-m);
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-nav__kort-lenke {
		margin-block-start: 0;
	}

	/*
	 * `.ft-konto` har `margin-inline-start: auto` fra navraden, der den dytter lenkene ytterst til
	 * hoeyre. I skuffa er raden en kolonne, og den samme margen gjorde blokka smal og hoeyrestilt -
	 * knappene ble staaende midt i ingenting. Her nulles den, saa de fyller bredden.
	 */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-header__navrow > .ft-konto {
		margin-inline-start: 0;
	}

	/* Kontolenkene er knapper nederst, som på forbildet. `auto` dytter dem til bunnen. */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--xxs);
		margin-block-start: auto;
		padding: var(--wp--preset--spacing--m);
		border-block-start: var(--wp--custom--linje);
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto__skille {
		display: none;
	}

	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto__lenke {
		padding: var(--wp--preset--spacing--xs);
		border-radius: var(--wp--custom--radius--kant);
		background: var(--wp--preset--color--lys-blaa);
		font-weight: 600;
		text-align: center;
	}

	/* Den første er hovedhandlinga: gul, som knappen i forbildet. */
	:root .ft-header__bar:has(.ft-menybryter[open]) .ft-konto__lenke:first-child {
		background: var(--wp--preset--color--gul);
		color: var(--wp--preset--color--hvit);
	}

}


/* ─────────────────────────  FOOTER-PART  ────────────────────────── */

/*
 * Bare bandene. Alt som står inne i dem er blokker med sin egen style.scss; reglene under er det
 * parten selv eier: bakgrunn, hårstrek, padding-block og rutenettet kolonnene står i.
 */

.ft-footer {
	background: var(--wp--preset--color--hvit);
}

.ft-footer__cta {
	background: var(--wp--preset--color--lys-blaa);
	padding-block: var(--wp--preset--spacing--xxl);
	text-align: center;
}

.ft-footer__trust {
	border-block: var(--wp--custom--linje);
	padding-block: var(--wp--preset--spacing--s);
}

.ft-footer__main {
	padding-block: var(--wp--preset--spacing--xxl);
}

.ft-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(3, 1fr);
	gap: var(--wp--preset--spacing--l);
}

/* Samme unntak som på oppskriftssiden: rutenettet eier luften, ikke gruppenes `blockGap`. */
.ft-footer__grid.is-layout-flow > * {
	margin-block-start: 0;
}

.ft-footer__bottom {
	border-block-start: var(--wp--custom--linje);
	padding-block: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--tekst-svak);
}

/*
 * Kolonnene stables når footeren er smal. Trygghetsradens eget brekk står i blokkas style.scss.
 */
@container ft-band (max-width: 48em) {
	.ft-footer__grid {
		grid-template-columns: 1fr;
	}
}


/* ─────────────  PROSASIDENE SLIK DE SER UT I SIDEREDIGEREREN  ───────────── */

/*
 * Redigereren rendrer sidas innhold *uten* malen rundt seg: det finnes ingen
 * `.ft-band.is-style-prosa` der inne, bare post-content som rotbeholder. Alt som henger paa den
 * wrapperen - de lyseblaa panelene, den fete aapningslinja, bildene som bryter ut - forsvant
 * derfor i redigereren, og kunden satt og skrev i noe som ikke lignet sida hun lagde.
 *
 * Reglene er med vilje gjentatt her i stedet for aa legges til som et ekstra ledd i
 * front-reglene: de to lister paa prosasida veier like mye og avgjoeres av rekkefoelge (se
 * bilderegelen lenger oppe), og aa endre vekten deres for aa spare noen linjer er ikke verdt
 * risikoen. Endrer du noe her, endre samme sted der oppe.
 *
 * `.is-root-container` finnes bare i redigereren, saa ingenting av dette naar fronten.
 * Listeregelen er dessuten formstyrt (`:has(> li > strong:first-child)`) - den slaar bare inn paa
 * nettopp de listene som ogsaa blir paneler ute paa sida - og bildet maa vaere et *direkte* barn,
 * saa bilder inne i baandene paa forsida staar urort.
 */
.wp-block-post-content.is-root-container .wp-block-list:has(> li > strong:first-child) {
	margin-block: var(--wp--preset--spacing--l);
	padding: var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--kant);
	list-style: none;
}

.wp-block-post-content.is-root-container .wp-block-list:has(> li > strong:first-child) > li + li {
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block-start: var(--wp--preset--spacing--m);
	border-block-start: 1px solid rgba(26, 26, 26, 0.12);
}

.wp-block-post-content.is-root-container .wp-block-list > li > strong:first-child {
	display: block;
	margin-block-end: var(--wp--preset--spacing--xxxs);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1.35;
}

/*
 * Bildet bryter ut til bandbredden, som ute paa sida. `100cqw`/`100vw` er ikke riktig maal her -
 * lerretet i redigereren er smalere enn vinduet - saa bredden tas av beholderen selv.
 */
.wp-block-post-content.is-root-container > .wp-block-image {
	width: min(var(--wp--custom--bandbredde), 100%);
	max-width: none;
	margin-block: var(--wp--preset--spacing--xl);
	margin-inline: auto;
}

.wp-block-post-content.is-root-container > .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--kant);
}


/* ─────────────────────────  WOOCOMMERCE  ────────────────────────── */

/*
 * Butikken arver typografien fra tokens. Handlekurv og kasse er fortsatt kortkodene
 * `[woocommerce_cart]` / `[woocommerce_checkout]`, saa markupen er WooCommerce sin klassiske -
 * det er den Checkout Field Editor Pro og Side Cart henger paa.
 */

.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
	font-size: var(--wp--preset--font-size--brodtekst);
}

/* Priser er tall i en kolonne: detaljskriften med tabulaere siffer holder dem i flukt. */
.woocommerce .price,
.woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--detalj);
	font-variant-numeric: tabular-nums;
}

/*
 * Woo sin butikkmelding staar i pluginets egen lilla. Den er ikke en merkevarefarge,
 * saa den byttes her framfor aa vente paa at noen finner innstillingen.
 */
/*
 * Butikkmeldinga skal ligge fast nederst i vinduet.
 *
 * WooCommerce sier den to steder. `woocommerce.css` (den klassiske) setter
 * `position: absolute; top: 0`. `woocommerce-blocktheme.css`, som lastes fordi dette er et
 * blokktema, setter `bottom: 0; position: fixed; top: auto !important`. Bare `top` er viktig-
 * merket, så `absolute` fra det klassiske arket overlever — og et absolutt plassert element med
 * `bottom: 0` måles mot den initiale blokken, altså nøyaktig én vindushøyde ned i dokumentet.
 * Derav en stripe som står midt på sida og ruller med innholdet.
 *
 * `:root` foran velgeren for å slå begge uansett lasterekkefølge.
 */
:root .woocommerce-store-notice,
:root p.demo_store {
	position: fixed;
	top: auto;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0;
	padding-block: var(--wp--preset--spacing--xxs);
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	text-align: center;
	box-shadow: 0 -1px 1em rgba(0, 0, 0, 0.15);
	z-index: var(--wp--custom--lag--panel);
}

:root .woocommerce-store-notice a,
:root p.demo_store a {
	color: var(--wp--preset--color--hvit);
	text-decoration: underline;
}

/* Produktrutenettet foelger bandets container, ikke viewporten. */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--wp--custom--kort--smal), 1fr));
	gap: var(--wp--preset--spacing--l);
	margin: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	width: auto;
	margin: 0;
	float: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	line-height: 1.3;
}

/* ──────────────────────────  SKIP LINK  ─────────────────────────── */

.skip-link:focus {
	position: fixed;
	top: var(--wp--preset--spacing--xs);
	left: var(--wp--preset--spacing--xs);
	z-index: var(--wp--custom--lag--modal);
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--hvit);
	color: var(--wp--preset--color--tekst);
	border-radius: var(--wp--custom--radius--kant);
	box-shadow: var(--wp--custom--skygge--heving);
}

/* ─────────────────────────  BANDENES GRAMMATIKK  ─────────────────── */

/*
 * Portert fra fru-timian. Hvert band på forsiden følger samme oppbygning: en liten kicker,
 * en Amatic-tittel, eventuelt en ingress — så innholdet. Det er denne rytmen som gjør at de
 * to sidene kjennes like, mer enn fargene gjør.
 */

/*
 * Seksjonsoverskriften er midtstilt. Klassen og ikke `:first-child` på bandet: den skiller
 * «en overskrift over et forsideband» fra «en overskrift», og arkivmalenes bandoverskrifter
 * er ikke midtstilte.
 */
:root .ft-bandtittel {
	margin-block: 0 var(--wp--preset--spacing--xl);
	text-align: center;
}

/* Egen klasse, siden det er et valg om et band har en linje under overskriften. */
:root .ft-bandtittel:has( + .ft-seksjonsingress ) {
	margin-block-end: var(--wp--preset--spacing--xs);
}

:root .ft-seksjonsingress {
	max-width: 44rem; /* 44rem: målt kolonne for overskrift og ingress. */
	margin-block: 0 var(--wp--preset--spacing--xl);
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1.35;
	text-align: center;
	color: var(--wp--preset--color--tekst-svak);
}

/* Den lille linja over en bandoverskrift: Inter Tight, versaler, gul. */
:root .ft-bandkicker,
:root .is-style-kicker {
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--gul);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/*
 * Bandkickeren er den samme linja midtstilt over en bandoverskrift; blokkstilen `kicker` er den
 * venstrestilt i en bilde-og-tekst-rad. Typografien deles, plasseringen ikke.
 */
:root .ft-bandkicker {
	margin-block: 0 var(--wp--preset--spacing--xxs);
	text-align: center;
}

/*
 * Annenhver seksjon står på lys blå. På fru-timian het hver flate sitt eget bandnavn; her er det
 * én modifikator, fordi bandene på en forhandlerforside ikke er de samme ni.
 */
.ft-band--tint {
	background: var(--wp--preset--color--lys-blaa);
}

/*
 * Lufta rundt en tintet flate staar i BAND OG RYTME, sammen med nullingen den maa slaa - og den
 * gjelder ogsaa band som har faatt farge fra «Bakgrunn -> Farge» i redigereren. Her bor bare
 * fargen.
 */

/* ────────────────────────────  HERO  ─────────────────────────────── */

/*
 * Heroen er blokkene `fru-timian/hero-campaign` og `fru-timian/hero-slide`, tatt over fra nettbutikkens
 * tema (src/blocks/). Stilen ligger i blokkenes egne style.scss og lastes bare der blokka står.
 *
 * DEN GAMLE HEROEN - en gruppe med klassen `ft-hero`, portert fra den samme blokka uten karusellen -
 * står fortsatt øverst på forsiden der den ikke er byttet ut (lokalt, på stage, og i produksjon til
 * lanseringen). Reglene under holder den lik seg selv til den byttes, og er skopet til
 * `.wp-block-group.ft-hero`, altså gruppa. Blokka er `.wp-block-fru-timian-hero-campaign` og treffes
 * ikke: våre regler med `:root` foran veier mer og ville ellers slått blokkas format og mobilforhold.
 *
 * Fjern alt fra her til «Produktsida paa smal skjerm» når forsiden er byttet over overalt.
 */

.wp-block-group.ft-hero {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--lys-blaa);
	container-type: inline-size;
	container-name: ft-media;
}

/*
 * `:root`-prefikset her handler om Nettstedredigereren, ikke om forsiden.
 *
 * Redigereren legger `position: relative` på hvert blokk-element i lerretet for
 * å kunne tegne markeringsramme og verktøylinje rundt det. Den regelen har
 * samme vekt som en naken klasse, og slo derfor ut plasseringen vår: bildet og
 * den gule boksen falt ut av overlegget og la seg etter hverandre i flyten.
 * Prefikset gir oss ett hakk mer vekt. På forsiden endrer det ingenting.
 */
:root .wp-block-group.ft-hero .ft-hero__lysbilde {
	position: relative;
	aspect-ratio: 21 / 7;
	min-height: 26rem;
}

:root .wp-block-group.ft-hero .ft-hero__bakgrunn {
	position: absolute;
	inset: 0;
	margin: 0;
}

.wp-block-group.ft-hero .ft-hero__bakgrunn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

:root .wp-block-group.ft-hero .ft-hero__innhold {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	max-width: calc(var(--wp--custom--bandbredde) + var(--wp--custom--sideinnrykk) * 2);
	margin-inline: auto;
	padding-inline: var(--wp--custom--sideinnrykk);
	pointer-events: none;
}

.wp-block-group.ft-hero .ft-hero__boks {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: min(100%, 27.5rem);
	padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--xl);
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	box-shadow: var(--wp--custom--skygge--heving);
	pointer-events: auto;
}

.wp-block-group.ft-hero .ft-hero__boks > * {
	margin-block: 0;
}

.wp-block-group.ft-hero .ft-hero__boks .ft-hero__kicker,
.wp-block-group.ft-hero .ft-hero__boks .ft-hero__tittel,
.wp-block-group.ft-hero .ft-hero__boks .ft-hero__ingress {
	color: inherit;
}

.wp-block-group.ft-hero .ft-hero__boks .ft-hero__kicker {
	margin-block-end: var(--wp--preset--spacing--xxs);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.125em;
	text-transform: uppercase;
}

.wp-block-group.ft-hero .ft-hero__boks .ft-hero__tittel {
	margin-block: 0 var(--wp--preset--spacing--xxs);
	line-height: 0.92;
}

.wp-block-group.ft-hero .ft-hero__boks .ft-hero__ingress {
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.5;
}

.wp-block-group.ft-hero .ft-hero__boks .wp-block-buttons {
	margin-block: var(--wp--preset--spacing--m) 0;
}

/* Heroens knapp er hvit, pilleformet og i displayskriften — ikke temaets gule standardknapp. */
:root .wp-block-group.ft-hero .ft-hero__boks .ft-hero__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.6em 1.6em;
	background: var(--wp--preset--color--hvit);
	color: var(--wp--preset--color--tekst);
	border-radius: var(--wp--custom--radius--pille);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

:root .wp-block-group.ft-hero .ft-hero__boks .ft-hero__cta .wp-block-button__link::after {
	content: "→";
	font-family: var(--wp--preset--font-family--detalj);
	font-weight: 600;
}

:root .wp-block-group.ft-hero .ft-hero__boks .ft-hero__cta .wp-block-button__link:hover,
:root .wp-block-group.ft-hero .ft-hero__boks .ft-hero__cta .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--tekst);
	transform: translateX(2px);
	filter: none;
}

/*
 * Merk `:root` foran hver regel her. En container-query gir *ingen* spesifisitet - den avgjoer bare
 * om regelen gjelder, ikke hvor tungt den veier. Grunnreglene over er skrevet `:root .wp-block-group.ft-hero .ft-hero__...`
 * (0,2,0), og disse stod som `.ft-hero__...` (0,1,0): de tapte, stille, uansett skjermbredde.
 *
 * Det var ikke synlig som «feil brekkpunkt», men som et hero som stakk 1248px ut paa en 390px
 * skjerm - `min-height: 26rem` ganget opp med forholdstallet 21/7 fra bredvisninga, fordi
 * forholdstallet aldri ble byttet. Derfor nulles ogsaa `min-height` her: den hoeyden hoerer til et
 * band som er bredere enn det er hoeyt.
 */
@container ft-media (max-width: 56em) {
	:root .wp-block-group.ft-hero .ft-hero__lysbilde {
		aspect-ratio: 4 / 5;
		min-height: 0;
	}

	:root .wp-block-group.ft-hero .ft-hero__innhold {
		align-items: flex-start;
		padding-block-start: var(--wp--preset--spacing--xl);
	}

	:root .wp-block-group.ft-hero .ft-hero__boks {
		width: 100%;
		padding: var(--wp--preset--spacing--m);
	}
}

@container ft-media (max-width: 40em) {
	:root .wp-block-group.ft-hero .ft-hero__lysbilde {
		aspect-ratio: 5 / 6;
	}
}

/* ── Produktsida paa smal skjerm ── */

@container ft-band (max-width: 48em) {
	/*
	 * Produktarkivet staar i to spalter paa telefon, slik forbildet gjoer. Woo regner spaltene
	 * selv og lander paa én; her overtar vi, og `minmax(0, 1fr)` hindrer at et langt produktnavn
	 * gjoer spalta bredere enn halve skjermen.
	 */
	:root .ft-band--arkiv .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--m);
	}

	/*
	 * Bildet skal begynne rett under broedsmulene. Bandet arver `padding-block: xxl`, og selv om
	 * naboregelen nuller toppen naar to band foelger hverandre, sitter det igjen luft fra
	 * varselsboksen WooCommerce skriver ut tom.
	 */
	:root .ft-produkt {
		padding-block-start: var(--wp--preset--spacing--m);
	}
}

/* En tom varselsboks skal ikke ta hoeyde - den skriver WooCommerce ut paa hver produktside. */
:root .ft-produkt .woocommerce-notices-wrapper:empty {
	display: none;
}

:root .ft-produkt .ft-produkt__rad {
	margin-block-start: 0;
}


/* ────────────────────  KATEGORIER OG INFO  ───────────────────────── */

/*
 * fru-timian har kategoriene i en JS-drevet scroller. Her er det et rutenett: en forhandler
 * ser hele sortimentet på én gang framfor å bla. Kortets utseende er det samme.
 */
.ft-kategorier {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--wp--preset--spacing--s);
}

.ft-kategori {
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
	transition: transform var(--wp--custom--overgang--myk) ease;
}

.ft-kategori:hover,
.ft-kategori:focus-visible {
	transform: translateY(-3px);
	color: var(--wp--preset--color--tekst);
}

.ft-kategori__flate {
	aspect-ratio: 1;
	overflow: hidden;
	margin: 0 0 var(--wp--preset--spacing--xxs);
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
}

.ft-kategori__flate img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--overgang--myk) ease;
}

.ft-kategori:hover .ft-kategori__flate img,
.ft-kategori:focus-visible .ft-kategori__flate img {
	transform: scale(1.06);
}

.ft-kategori__etikett {
	display: block;
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
}

/*
 * Infobandet er forhandlersidens svar på kundeanmeldelsene: frakt, betalingsfrist og henting.
 * Tre kolonner, samme kortform som kategoriene.
 */
.ft-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--l);
	text-align: center;
}

/*
 * Samme unntak som footerens rutenett: `.ft-info` er et grid, men gruppa er fortsatt en
 * `is-layout-flow`-beholder, så kjernen gir hvert barn etter det første en `margin-block-start`
 * lik gruppas `blockGap`. I en flow-kolonne er det luft mellom avsnitt; i et grid dytter det
 * kolonne to og tre nedover mens kolonne én blir stående — nøyaktig det som så ut som feil
 * innretting. Rutenettet eier luften, `gap` er den.
 *
 * To klasser, ellers står regelen uavgjort mot kjernens `.wp-container-... > * + *` og avgjøres
 * av lasterekkefølgen.
 */
.ft-info.is-layout-flow > * {
	margin-block-start: 0;
}

.ft-info__punkt > * {
	margin-block: 0;
}

/*
 * Ikonet over tallet. Samme Feather-sett og samme maske-teknikk som tillitsstripa i footeren, saa
 * de tre punktene her og de fem der leser som ett spraak - og de tre motivene gaar igjen: bil,
 * faktura, kartnaal.
 *
 * `::before` og ikke et bilde i markupen: da foelger ikonet klassen, og kunden kan flytte eller
 * duplisere et punkt i editoren uten aa maatte laste opp noe.
 */
.ft-info__punkt::before {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	margin-inline: auto;
	margin-block-end: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--tekst);
	-webkit-mask: var(--ft-infoikon) center / contain no-repeat;
	mask: var(--ft-infoikon) center / contain no-repeat;
}

.ft-info__punkt--frakt {
	--ft-infoikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

.ft-info__punkt--faktura {
	--ft-infoikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

.ft-info__punkt--henting {
	--ft-infoikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/*
 * Bandet er svart tekst, ikke gult. Gul tekst paa den lyse blaaflata er det svakeste
 * kontrastforholdet paa sida - merkegulen #E09900 lander paa 2,2:1 mot #EAF8FB, under WCAGs 3:1
 * selv for stor tekst - og en moerk nok gul (#996700, 4,5:1) ble for mye farge. Tallene, kickeren
 * og ikonene foelger derfor overskrifta. Merkegulen blir staaende paa fyll og flater.
 */
.ft-info__tall {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--tekst);
}

/* Kickeren staar i samme band og maa foelge tallene. */
.ft-band:has(.ft-info) .ft-bandkicker {
	color: var(--wp--preset--color--tekst);
}

.ft-info__tittel {
	margin-block: var(--wp--preset--spacing--xxs) 0;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 700;
	line-height: 1.3;
}

.ft-info__tekst {
	margin-block-start: var(--wp--preset--spacing--xxxs);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	color: var(--wp--preset--color--tekst-svak);
}

/* ───────────────  TILLITSSTRIPA I FOOTEREN  ────────────────── */

/*
 * Raden med fem løfter over footeren, etter mønster fra referansen.
 *
 * Innholdet er *ikke* kopiert derfra: forbrukersidas «30 dagers retur» er angrerett, som ikke
 * gjelder mellom næringsdrivende, og «Gratis frakt over 649,-» er en annen terskel enn vår. Hvert
 * punkt her er en opplysning butikken allerede oppgir et annet sted.
 *
 * `auto-fit` med et minstemål: fem i bredden på skjerm, og den brekker selv når det blir trangt -
 * ingen egen regel for smal visning.
 */
/*
 * Bandet er bare bakgrunn, luft og haarstrek - den skal ligge i hele vindusbredden, som paa
 * forbrukersida.
 */
:root .ft-tillit {
	padding-block: var(--wp--preset--spacing--s);
	border-block-end: var(--wp--custom--linje);
}

/*
 * Raden er en helt vanlig `constrained`-datter, akkurat som `.ft-footer__grid` ett band lenger
 * ned. Da er det kjernens egen layoutregel som maaler begge to, og de staar i flukt uten at vi
 * regner bredden ut paa nytt her - et forsoek paa aa gjenskape geometrien med `padding-inline`
 * traff ikke samme kant.
 */
:root .ft-tillit__spor {
	display: flex;
}

:root .ft-tillit__rad {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xs);
}

/*
 * Kopien finnes bare for rullinga paa smal skjerm.
 *
 * `:root` maa staa her. Uten den var regelen (0,1,0) mens `:root .ft-tillit__rad` rett over er
 * (0,2,0) - og kopien treffes av begge. Den tapte, sto som `display: flex`, og footeren viste
 * alle fem loeftene to ganger paa bred skjerm.
 */
:root .ft-tillit__rad--kopi {
	display: none;
}

/*
 * Paa smal skjerm ruller stripa sidelengs, som toppstripa og som forbildet. Samme mekanikk: to
 * like rader i ett spor, sporet flyttes en halv bredde, og kopien lander der originalen begynte.
 * Punktene slutter aa brekke og faar sin egen bredde, ellers ville raden fortsatt stable seg.
 */
@container ft-band (max-width: 48em) {
	/*
	 * Kantene tones ut, som paa forbildet: punktene skal se ut til aa gli inn og ut, ikke bli
	 * kappet av en usynlig kant. En maske er riktig verktoey her og ikke en gradient oppaa -
	 * stripa staar paa hvitt i footeren, men en maske gjoer hele elementet gjennomsiktig mot
	 * kanten og virker uansett hva som ligger bak.
	 *
	 * Toppstripa har det med vilje ikke: den gaar fra kant til kant over hele vinduet, og
	 * forbildet toner ikke den.
	 */
	:root .ft-tillit__vindu {
		overflow: hidden;
		--ft-tone: var(--wp--preset--spacing--l);

		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--ft-tone),
			#000 calc(100% - var(--ft-tone)),
			transparent 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			#000 var(--ft-tone),
			#000 calc(100% - var(--ft-tone)),
			transparent 100%
		);
	}

	:root .ft-tillit__spor {
		width: max-content;
		animation: ft-tillit-rull 28s linear infinite;
	}

	:root .ft-tillit__rad {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--l);
		padding-inline-end: var(--wp--preset--spacing--l);
	}

	:root .ft-tillit__rad--kopi {
		display: flex;
	}

	:root .ft-tillit__punkt {
		flex: 0 0 auto;
	}

	.ft-tillit:hover .ft-tillit__spor,
	.ft-tillit:active .ft-tillit__spor {
		animation-play-state: paused;
	}
}

@keyframes ft-tillit-rull {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	:root .ft-tillit__spor {
		animation: none;
	}

	:root .ft-tillit__rad--kopi {
		display: none;
	}
}

/* Samme unntak som i footer-rutenettet: raden eier luften, ikke gruppenes `blockGap`. */
:root .ft-tillit__rad.is-layout-flow > * {
	margin-block-start: 0;
}



/*
 * Ikonet ligger i venstre kolonne og spenner over begge tekstlinjene, så tittel og undertekst
 * står i flukt uansett om underteksten brekker til to linjer.
 */
:root .ft-tillit__punkt {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--wp--preset--spacing--xxs);
	align-items: center;

}

:root .ft-tillit__punkt::before {
	content: "";
	grid-row: 1 / 3;
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--gul);
	-webkit-mask: var(--ft-tillitikon) center / contain no-repeat;
	mask: var(--ft-tillitikon) center / contain no-repeat;
}

:root .ft-tillit__tittel {
	margin: 0;
	align-self: end;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 700;
	line-height: 1.3;
}

:root .ft-tillit__tekst {
	margin: 0;
	align-self: start;
	line-height: 1.3;
}

/* Feather-settet, samme strektykkelse som vogna og haken ellers i temaet. */
:root .ft-tillit__punkt--frakt {
	--ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}

:root .ft-tillit__punkt--levering {
	--ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='16.5' y1='9.4' x2='7.5' y2='4.21'/%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}

:root .ft-tillit__punkt--faktura {
	--ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

:root .ft-tillit__punkt--henting {
	--ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

:root .ft-tillit__punkt--svar {
	--ft-tillitikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/*
 * Merket i footeren er satt, ikke tegnet.
 *
 * Navlinja beholder logofila med kvisten; her staar ordmerket i displayskriften slik
 * frutimian.no har det i sin footer. To ting foelger av det: kvisten er borte, saa innrykket
 * `--ft-logo-innrykk` - som bare fantes for aa flytte undertittelen forbi bladverket - er
 * unoedvendig, og ordmerket skalerer nu med skriftgraden i stedet for med en bildehoeyde.
 *
 * Amatic SC er en kapitelskrift: «Fru Timian» tegnes med store og kapitelbokstaver av seg selv,
 * uten `text-transform`.
 */
:root .ft-footer__logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.1em;
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

:root .ft-footer__ordmerke {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 700;
	line-height: 0.95;
}

/*
 * Undertittelen er en etikett under merket, ikke et merke til: broedskrift, dempet farge og
 * mindre grad - samme grep som «- Bare gode smaker» har paa frutimian.no. Navlinja har sin egen
 * undertittel i displayskriften; de to stedene er bevisst ulike.
 */
:root .ft-footer__undertittel {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--tekst-svak);
}

/* ──────────────────  WOOCOMMERCE-PRODUKTKORT  ───────────────────── */

/*
 * Produktkortet låner formen fra fru-timians kategorikort: kvadratisk flate, bildet midtstilt
 * oppå den, tekst under.
 *
 * Midtstilt tekst er hele grepet. Pakkshotene er fotografert lite på stor hvit bakgrunn, så på
 * en hvit side er bilderammen usynlig og produktet så forskjøvet ut fra en venstrestilt tittel —
 * rammen er full spaltebredde, men bare motivet synes. Med midtstilt tekst står tittelen under
 * motivet, og kortet leser likt enten bildet er et pakkshot eller et matbilde som fyller rammen.
 * Bandet er hvitt: en tint bak de hvite flatene gjorde dem til synlige kort, men det var ikke
 * problemet som skulle løses.
 */
.woocommerce ul.products li.product {
	text-align: center;
}

.woocommerce ul.products li.product a img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	margin-block-end: var(--wp--preset--spacing--xs);
	transition: transform var(--wp--custom--overgang--myk) ease;
}

.woocommerce ul.products li.product a:hover img {
	transform: scale(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 600;
	line-height: 1.3;
	padding: 0;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--wp--preset--color--gul);
}

.woocommerce ul.products li.product .price {
	display: block;
	margin-block: var(--wp--preset--spacing--xxxs) var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/* Knappen er temaets knapp, ikke Woo sin grå. */
.woocommerce ul.products li.product .button {
	display: inline-flex;
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
}


/* ───────────────────  SØK, VOGN OG KONTO I HEADEREN  ─────────────── */

/*
 * Portert fra fru-timians header-search, cart-button og account-links. De tre var egne blokker
 * der; her er de `core/search`, `woocommerce/mini-cart` og to vanlige lenker, stylet til å ligne.
 */

/*
 * Søkefeltet skal ta plassen mellom logoen og vogna.
 *
 * Bredden må ligge på selve blokka (`form.wp-block-search`) og ikke på den indre pilla: blokka er
 * flexbarnet i headerraden, og et barn som ikke får `flex-grow` er like bredt som innholdet sitt —
 * da hjelper ingen `max-width` lenger inn.
 */
:root .ft-header .ft-search {
	flex: 1 1 auto;
	/*
	 * 29,75rem = 476px: maalt paa Michaels nye side (`form#ft-search-skjema`, 476 x 42). Hoeyden
	 * laa allerede paa 42px nede i pilla, med 476 skrevet i kommentaren - men taket her sto paa
	 * 40rem/640px, saa feltet ble bredere enn forbildet paa store skjermer. Under taket foelger
	 * det raden som foer.
	 */
	max-width: 29.75rem;
	margin-block: 0;
	/*
	 * Ekstra luft mot logoen, utover radens egen `column-gap`. Feltet har et tak på bredden og
	 * står i en rad der vogna er dyttet helt ut til høyre av en auto-margin, så det er ledig
	 * plass til høyre for feltet - innrykket flytter feltet inn i den plassen i stedet for å
	 * presse noe sammen.
	 */
	margin-inline-start: var(--wp--preset--spacing--m);
}

/* Lys blå pille med en gul rund knapp. Knappen står først, derfor `row-reverse`. */
:root .ft-header .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	/* 42px: feltets hoeyde i designet. Bredden er `.ft-search` sitt tak lenger opp. */
	min-height: 42px;
	width: 100%;
	padding: 4px;
	background: var(--wp--preset--color--lys-blaa);
	border: 0;
	border-radius: var(--wp--custom--radius--pille);
}

:root .ft-header .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding-inline: var(--wp--preset--spacing--xxs);
	background: none;
	border: 0;
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

:root .ft-header .wp-block-search__input:focus {
	outline: none;
}

:root .ft-header .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

:root .ft-header .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--tekst);
	opacity: 0.7;
}

:root .ft-header .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	/*
	 * Kjernen gir alle søkeknapper `margin-left: 10px`, tenkt som luft mellom feltet og en knapp
	 * til høyre. Pilla vår er snudd med `row-reverse`, så de ti pikslene havnet mellom knappen og
	 * venstre kant og la seg oppå pillas egne 4px. Nullstilles, da står knappen like langt fra
	 * kanten på alle fire sider.
	 */
	margin: 0;
	/* 34px: knappens diameter, samme som vogna. */
	width: 34px;
	height: 34px;
	min-block-size: 0;
	padding: 0;
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border: 0;
	border-radius: var(--wp--custom--radius--rund);
}

:root .ft-header .wp-block-search__button svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Vogna: svart sirkel, gult antallsmerke. */
:root .ft-header .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: var(--wp--preset--color--tekst);
	border-radius: var(--wp--custom--radius--rund);
	color: var(--wp--preset--color--hvit);
	transition: transform var(--wp--custom--overgang--rask) ease;
}

:root .ft-header .wc-block-mini-cart__button:hover,
:root .ft-header .wc-block-mini-cart__button:focus-visible {
	transform: scale(1.08);
}

:root .ft-header .wc-block-mini-cart__icon {
	width: 19px;
	height: 19px;
	fill: var(--wp--preset--color--hvit);
}

/*
 * `!important` er nødvendig her, ikke latskap. WooCommerce skriver merkets farger som *inline*
 * stil fra Interactivity API-en (`data-wp-style--background-color` og `data-wp-style--color` i
 * MiniCart.php), og skriver dem på nytt hver gang antallet endrer seg. Inline stil slår enhver
 * vanlig regel uansett hvor tung velgeren er, så dette er det eneste som holder.
 *
 * Uten dette ble merket stående gjennomsiktig med gyllent tall, og «sirkelen» man så var i
 * virkeligheten hullet WooCommerce maskerer ut av den svarte vognknappen bak.
 */
:root .ft-header .wc-block-mini-cart__badge {
	background: var(--wp--preset--color--gul) !important;
	color: var(--wp--preset--color--hvit) !important;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
}

/* Kontolenkene står ytterst på navraden. */
/*
 * `:root` og to klasser foran: kjernens margin-nulling for barna av en flexbeholder er
 * `:root :where(.is-layout-flex) > :is(*, div)` — (0,1,1), fordi `:is()` teller sitt tyngste
 * argument og en type er med. En bar `.ft-konto { margin-inline-start: auto }` taper mot den
 * uansett rekkefølge, og lenkene blir stående inntil menyen i stedet for ytterst.
 */
:root .ft-header__navrow > .ft-konto {
	margin-inline-start: auto;
}

.ft-konto {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
	white-space: nowrap;
}

.ft-konto__lenke {
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
	transition: color var(--wp--custom--overgang--rask) ease;
}

.ft-konto__lenke:hover,
.ft-konto__lenke:focus-visible {
	color: var(--wp--preset--color--gul);
}

.ft-konto__skille {
	/* 27px/1px: en hårstrek mellom to lenker, ikke et spacing-steg. */
	width: 1px;
	height: 27px;
	background: var(--wp--preset--color--tekst-svak);
	opacity: 0.25;
}

@container ft-band (max-width: 48em) {
	:root .ft-konto {
		display: none;
	}

	:root .ft-header .wp-block-search__inside-wrapper {
		max-width: none;
	}

	/* Logoen er absolutt plassert og sentrert her - det er ingen logo ved siden av å vike for. */
	:root .ft-header .ft-search {
		margin-inline-start: 0;
	}
}

/* ───────────────  WOOCOMMERCE PRODUCT COLLECTION  ────────────────── */

/*
 * Product Collection er en annen blokk enn `[products]`-rutenettet lenger opp, med helt egen
 * markup: `.wc-block-product-template` med `li.wc-block-product` i stedet for `ul.products` med
 * `li.product`. Reglene for det ene traff aldri det andre, som er hvorfor kortene her sto
 * ustylet mens de over var ferdige.
 */

/*
 * Ikke rør rutenettet. Woo regner sporbredden ut fra sin egen luft:
 *
 *   .wc-block-product-template__responsive.columns-3 {
 *     grid-gap: 1.25em;
 *     grid-template-columns: repeat(auto-fill, minmax(max(150px, calc(33.33333% - .83333em)), 1fr));
 *   }
 *
 * `.83333em` er to tredeler av gapet, fordelt på tre spor. Setter man et annet `gap`, stemmer ikke
 * regnestykket lenger: tre spor blir bredere enn beholderen, `auto-fill` gir opp og legger seg på
 * to. Det var akkurat det som skjedde her — bandet gikk fra tre til to kolonner med diger bilder.
 *
 * Samme grunn til å la være med `container-type`: Woo har egne `@container`-spørringer, og en ny
 * beholder nærmere elementet ville flyttet hva de måler.
 */
.wc-block-product-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Kortet er venstrestilt, som på frutimian.no: bilde, tittel, kategori, pris, og en knapp i full
 * bredde nederst. Midtstilt tekst var et forsøk på å skjule at pakkshotene står midt i sin egen
 * hvite ramme - men når kortet har en synlig knapp i bunn, holder rutenettet seg selv i flukt.
 */
.wc-block-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	text-align: left;
	transition: transform var(--wp--custom--overgang--myk) ease;
}

/*
 * Hele kortet løftes noen piksler ved hover - ikke bare bildet. Det er det som
 * gjør at knappen i bunn følger med opp, slik referansesiden gjør det, og det
 * binder kortet sammen til ett element i stedet for et bilde med tekst under.
 * Løftet ligger på kortet, zoomen på bildet inni; de to lagene jobber sammen.
 */
.wc-block-product-template .wc-block-product:hover {
	transform: translateY(-4px);
}

/*
 * Bildet er en kvadratisk flate, som kategorikortene.
 *
 * Rammen eier avrundingen og klipper innholdet. Det er det som gjør at
 * hover-effekten blir en innzooming i en fast flate, slik referansesiden gjør
 * det, i stedet for at hele bildet vokser ut av kortet og dytter naboene.
 */
.wc-block-product-template .wc-block-components-product-image {
	position: relative;
	margin-block-end: var(--wp--preset--spacing--xs);
	overflow: hidden;
	border-radius: var(--wp--custom--radius--kant);
}

.wc-block-product-template .wc-block-components-product-image img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--hvit);
	display: block;
	transition: transform var(--wp--custom--overgang--myk) ease;
}

.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template .wc-block-product:hover,
	.wc-block-product-template .wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
	}
}

/*
 * Tilbudsmerket hører til bildet, ikke til strømmen over det. Uten en egen plassering legger
 * det seg som et vanlig blokkbarn og havner over bildet i stedet for oppå det.
 *
 * To merker, ett utseende. Kortene bruker blokka `product-sale-badge`, men produktsida rendrer
 * galleriet med den gamle Woo-malen, og den skriver ut `span.onsale` i stedet. Den kom derfor
 * aldri innom regelen under og ble stående med Woo sitt eget utseende: en olivengrønn sirkel
 * (`.woocommerce span.onsale` i `woocommerce.css`, #958e09 og `border-radius: 100%`).
 *
 * `.ft-produkt__galleri span.onsale` veier tyngre enn `.woocommerce span.onsale`, så dette
 * trenger ingen `!important` - men Woo setter òg `min-width`, `min-height` og en `line-height`
 * paa 3.236 for aa tvinge fram sirkelen, og de tre maa nulles ut her for at pilla skal legge seg
 * etter teksten.
 */
.wc-block-product-template .wc-block-components-product-sale-badge,
.ft-produkt__galleri span.onsale {
	position: absolute;
	min-width: 0;
	min-height: 0;
	line-height: normal;
	top: var(--wp--preset--spacing--xxs);
	/*
	 * Venstre hjørne, gull flate og mørk tekst - som referansen. Den røde pilla til høyre var
	 * WooCommerce-arv: `roed` finnes i paletten for feilmeldinger, ikke for kampanjer, og et
	 * tilbudsmerke i varselfarge leser som noe galt framfor noe hyggelig.
	 *
	 * MERK: Advanced Woo Labels tegner kundens egne merker («KUN FOR EGET BRUK») i samme hjørne, og
	 * paa et produkt med begge ligger tilbudsmerket skjult under det blaa. Merket ble flyttet hit
	 * 30.09 og tilbake igjen samme dag: to ulike hjoerner for samme merke, avhengig av om produktet
	 * hadde et AWL-merke, ville lest som en feil i rutenettet.
	 *
	 * Loesninga ligger i pluginen, ikke her - AWL-merket skal flyttes til hoeyre i innstillingene.
	 * Og pluginens egen `remove_block_sale_badge()` hjelper ikke: den slaar bare av bildeblokkens
	 * innebygde merke, mens malene vaare bruker en egen nestet `product-sale-badge`-blokk.
	 */
	left: var(--wp--preset--spacing--xxs);
	z-index: var(--wp--custom--lag--flate);
	margin: 0;
	padding: 0.3em 0.7em;
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--tekst);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker-s);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wc-block-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Tittelen understrekes når kortet er i fokus, ikke bare når pekeren står
 * rett på lenka - det er kortet som er klikkflaten. Understreket kommer i
 * stedet for et fargeskifte: referansesiden holder tittelen svart.
 */
.wc-block-product-template .wc-block-product:hover .wp-block-post-title a,
.wc-block-product-template .wp-block-post-title a:hover,
.wc-block-product-template .wp-block-post-title a:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/* Kategorilinja står mellom tittel og pris, dempet - den er en opplysning, ikke en lenkerad. */
.wc-block-product-template .ft-produkt__kategori {
	margin-block: 0 var(--wp--preset--spacing--xxxs);
	color: var(--wp--preset--color--tekst-svak);
	line-height: 1.3;
}

.wc-block-product-template .ft-produkt__kategori a {
	color: inherit;
	text-decoration: none;
}

.wc-block-product-template .ft-produkt__kategori a:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

/*
 * Knappene skal stå i flukt på tvers av raden, uansett om en tittel går over to linjer.
 *
 * Kortet er en flexkolonne, og `margin-block-start: auto` på prisen spiser resten av høyden —
 * men bare hvis den står på et *direkte* barn av kortet. Woo pakker prisen dobbelt:
 *
 *   <div class="wp-block-woocommerce-product-price">      <- flexbarnet
 *     <div class="wc-block-components-product-price">     <- der klassen bor
 *
 * Automargen på den indre gjorde derfor ingenting; den må stå på wrapperen.
 */
.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-price {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--xxs);
}

/*
 * Prisen er nest etter tittelen i kortet, og ligger derfor på samme trinn i
 * skalaen (tittel-m). Den sto lenge på brodtekst - da leste den som en
 * opplysning på linje med kategorilinja, ikke som tallet kunden ser etter.
 */
.wc-block-product-template .wc-block-components-product-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}

/*
 * Tilbudsprisen skal leses først.
 *
 * WooCommerce skriver `<del>` før `<ins>` i markupen, og det kan vi ikke endre - men i en
 * flexboks bestemmer `order` rekkefølgen uten å røre DOM-en. Alt annet i prisen (mva-suffikset
 * «eks.mva», skjulte hjelpetekster) får `order: 3` og blir liggende bakerst der det hører hjemme.
 * Suffikset er et ekte `<small>`-element, så det lar seg sortere; ren mellomromstekst blir ikke
 * flexbarn i det hele tatt.
 */
.wc-block-product-template .wc-block-components-product-price > * {
	order: 3;
}

.wc-block-product-template .wc-block-components-product-price ins {
	order: 1;
	color: var(--wp--preset--color--gul);
	font-weight: 600;
	text-decoration: none;
}

/* Førprisen er dempet og mindre, ikke bare gjennomstreket. */
.wc-block-product-template .wc-block-components-product-price del {
	order: 2;
	font-size: 0.8em;
	color: var(--wp--preset--color--tekst-svak);
	opacity: 0.8;
}

/*
 * Knappen er temaets knapp. Woo sin egen er et blokk-knappelement, så den arver `.wp-element-button`
 * fra theme.json — men ikke fargene, fordi Woo setter sine egne lenger ut i arket.
 */
/* Knappen fyller kortet, med en liten vogn foran teksten. */
.wc-block-product-template .wc-block-product > .wp-block-woocommerce-product-button,
.wc-block-product-template .wc-block-components-product-button {
	margin-block-start: var(--wp--preset--spacing--xs);
}

/* Mersalget i skuffen (.ft-skuffsalg) bruker samme pille, men staar utenfor produktmalen. */
.wc-block-product-template .wc-block-components-product-button .wp-block-button__link,
.ft-skuffsalg .wc-block-components-product-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
}

/*
 * Vognikonet er en maske og ikke et bilde, så det arver tekstfargen og trenger ingen egen fil.
 */
:root .wc-block-components-product-button .wp-block-button__link::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--ft-vognikon) center / contain no-repeat;
	mask: var(--ft-vognikon) center / contain no-repeat;
}

:root {
	--ft-vognikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

/* ────────────────────  KAMPANJE, SØK OG BANNER  ──────────────────── */

/* Kampanjebildet er kvadratisk og skal ikke fylle hele bandet. */
.ft-kampanjebilde img {
	/* 38rem: bildet er en plakat, ikke en hero - det skal kunne stå ved siden av et rutenett. */
	max-width: 38rem;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--kant);
}

.ft-kampanjebilde {
	margin-block-end: var(--wp--preset--spacing--xxl);
}

/*
 * Bildet er en lenke til kategorien. Et flatt bilde sier ikke fra om at det kan klikkes, så
 * lenka får samme lille løft som resten av temaets klikkflater. `inline-block` fordi en inline
 * `<a>` rundt et blokk-bilde ikke tar imot hverken radius eller transform.
 */
.ft-kampanjebilde a {
	display: inline-block;
	border-radius: var(--wp--custom--radius--kant);
	overflow: hidden;
	transition: transform var(--wp--custom--overgang--myk) ease,
	            box-shadow var(--wp--custom--overgang--myk) ease;
}

.ft-kampanjebilde a:hover,
.ft-kampanjebilde a:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--skygge--heving);
}

/* Samme for bannerlenka lenger ned. */
.ft-bannerbilde a {
	display: inline-block;
	border-radius: var(--wp--custom--radius--kant);
	overflow: hidden;
	transition: transform var(--wp--custom--overgang--myk) ease,
	            box-shadow var(--wp--custom--overgang--myk) ease;
}

.ft-bannerbilde a:hover,
.ft-bannerbilde a:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--wp--custom--skygge--heving);
}

/*
 * Ingressen og lenka rammer inn feltet: en linje som sier hva som virker, og en utvei for den som
 * heller vil bla. Begge maalt mot feltet, ikke mot bandet, saa spalten leser som en blokk.
 */
:root .ft-band--sok .ft-sokband__ingress {
	max-width: 34rem;
	margin: 0 auto var(--wp--preset--spacing--s);
	color: var(--wp--preset--color--tekst-svak);
}

:root .ft-band--sok .ft-sokband__lenke {
	margin: var(--wp--preset--spacing--s) 0 0;
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
}

:root .ft-band--sok .ft-sokband__lenke a {
	color: var(--wp--preset--color--tekst);
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

:root .ft-band--sok .ft-sokband__lenke a:hover,
:root .ft-band--sok .ft-sokband__lenke a:focus-visible {
	color: var(--wp--preset--color--gul);
}

/* --------------------------------------------------------------------------
   Levende soek - forslagslista under soekefeltet

   Lista henger paa skjemaet, ikke paa headeren: samme komponent brukes i
   navlinja, i mobilsoeket og i hurtigbestillingsbandet, og hvert sted har sin
   egen bredde. `position: absolute` mot skjemaet gjoer at den legger seg over
   innholdet uten aa dytte noe.
   -------------------------------------------------------------------------- */

:root .wp-block-search.ft-sok--levende {
	position: relative;
}

:root .ft-forslag {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 0.5rem);
	z-index: var(--wp--custom--lag--topp);
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	box-shadow: var(--wp--custom--skygge--heving);
	/*
	 * Ingen padding paa boksen: den aktive raden skal faa farge helt ut til kanten, slik referansen
	 * har det. Lufta ligger derfor i radene, og `overflow: hidden` klipper dem mot hjoernene.
	 */
	overflow: hidden;
}

:root .ft-forslag[hidden] {
	display: none;
}

/* Merkelappen til venstre, utveien til hoeyre - som paa frutimian.no. */
:root .ft-forslag__hode {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s) var(--wp--preset--spacing--xxs);
}

/* 14px og dempet farge, maalt paa `span.ft-search__etikett` paa den nye sida. */
:root .ft-forslag__merke {
	margin: 0;
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

:root .ft-forslag__alle {
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

:root .ft-forslag__alle:hover,
:root .ft-forslag__alle:focus-visible {
	color: var(--wp--preset--color--gul);
}

/*
 * Lista viser hoegst seks rader, og seks rader er ca. 27rem - saa den trenger ingen egen hoeyde.
 * Taket som staar igjen er mot *skjermen*, ikke mot antallet: paa en lav skjerm skal lista rulle
 * i stedet for aa gaa ut av bildet. Da er det bare lista som ruller; hodet og foten staar i ro.
 */
:root .ft-forslag__liste {
	max-height: 70vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

:root .ft-forslag__rad {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s);
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

/*
 * En klasse og ikke `:hover`: tastaturet og musepekeren skal peke paa det samme, og da maa det
 * vaere skriptet som bestemmer hva som er aktivt.
 */
:root .ft-forslag__rad--aktiv {
	background: var(--wp--preset--color--lys-blaa);
}

:root .ft-forslag__bilde {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--kant);
}

:root .ft-forslag__tekst {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
	min-width: 0;
}

:root .ft-forslag__navn {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1.3;
}

:root .ft-forslag__pris {
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	color: var(--wp--preset--color--tekst-svak);
}

:root .ft-forslag__pris .woocommerce-Price-amount {
	font-weight: 500;
}

:root .ft-forslag__tomt {
	margin: 0;
	padding: var(--wp--preset--spacing--s);
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	text-align: center;
}

/* Tastaturhintet. */
:root .ft-forslag__fot {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	margin: 0;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s);
	border-block-start: var(--wp--custom--linje);
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--kicker-s);
}

:root .ft-forslag__hint {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

:root .ft-forslag__tast {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	padding: 0.15em 0.35em;
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--kant);
	color: var(--wp--preset--color--tekst);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.4;
}

/*
 * Ingen piltaster aa trykke paa en telefon, og ingen Esc heller. Hintet er da bare en linje som tar
 * plass i en liste som allerede er trang.
 */
@media (hover: none), (pointer: coarse) {
	:root .ft-forslag__fot {
		display: none;
	}
}

/* Søkefeltet i bandet er headerens pille, i større format. */
:root .ft-band--sok .ft-sok {
	max-width: 34rem;
	margin-inline: auto;
}

:root .ft-band--sok .wp-block-search__inside-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	min-height: 52px;
	padding: 5px;
	background: var(--wp--preset--color--hvit);
	border: 0;
	border-radius: var(--wp--custom--radius--pille);
	box-shadow: var(--wp--custom--skygge--pille);
}

:root .ft-band--sok .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding-inline: var(--wp--preset--spacing--xs);
	background: none;
	border: 0;
	font-size: var(--wp--preset--font-size--brodtekst);
}

:root .ft-band--sok .wp-block-search__input:focus {
	outline: none;
}

:root .ft-band--sok .wp-block-search__button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	min-block-size: 0;
	padding: 0;
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border: 0;
	border-radius: var(--wp--custom--radius--rund);
}

:root .ft-band--sok .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Bannerbildet er bredt og lenker videre. */
.ft-bannerbilde img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--kant);
}

/*
 * Innledningslinja er en hel setning satt som en bandtittel. Den trenger et mål å brekke
 * innenfor, ellers strekker den seg over hele bandbredden og blir en plakat i stedet for en
 * setning. Og litt mindre luft under enn en vanlig bandtittel, siden den peker på det som kommer.
 */
:root .ft-innledning {
	max-width: 46rem;
	margin-inline: auto;
	line-height: 1.15;
}

.ft-band--innledning {
	padding-block-end: var(--wp--preset--spacing--l);
}

/*
 * Bolkoverskriftene i sortimentet er venstrestilte, i motsetning til `.ft-bandtittel`. En
 * bandoverskrift står over en seksjon; disse står inne i én lang liste og er skilletegn i den.
 * De trenger derfor luft over seg, ikke under.
 */
:root .ft-gruppetittel {
	margin-block: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--l);
	text-align: left;
}

/* Den første trenger ikke luft over - den gule innledningslinja står rett over den. */
:root .ft-band--sortiment > .ft-gruppetittel:first-child {
	margin-block-start: 0;
}

/* ─────────────────────────  MEGAMENYEN  ──────────────────────────── */

/*
 * Portert fra fru-timians mega-nav-blokk. Panelet åpnes av `:hover` og `:focus-within` — ingen
 * JavaScript. `:focus-within` er hele tastaturstøtten: tabber du inn i en lenke i panelet, står
 * panelet åpent fordi fokus er inne i punktet.
 *
 * Menyen er skrevet rett i `parts/header.html` som markup, ikke som `core/navigation`. Det gir
 * kolonneoverskrifter og kampanjekortet, som blokken ikke har noen form for.
 */
.ft-nav {
	position: relative;
}

.ft-nav__rad {
	display: flex;
	align-items: center;
	/* 28px: avstanden mellom menypunktene i designet. */
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-nav__punkt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

/*
 * Menylenka er brødskriften, ikke displayskriften. 0.9375rem/500 er verdiene fra forbildet —
 * en menylinje skal være rolig, ikke en overskrift.
 */
.ft-nav__lenke {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: color var(--wp--custom--overgang--rask) ease;
}

.ft-nav__lenke:hover,
.ft-nav__lenke:focus-visible,
.ft-nav__punkt--panel:hover .ft-nav__lenke {
	color: var(--wp--preset--color--gul);
}

/*
 * `<summary>` er raden man trykker paa. Trekanten nettleseren tegner skal bort - pila vaar staar
 * allerede der - og lenka inni skal fortsatt kunne klikkes paa bred visning.
 */
.ft-nav__sammendrag {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	list-style: none;
}

.ft-nav__sammendrag::-webkit-details-marker {
	display: none;
}

.ft-nav__pil {
	width: 9px;
	height: 5px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--wp--custom--overgang--myk) ease;
}

.ft-nav__punkt--panel:hover .ft-nav__pil {
	transform: rotate(180deg);
}

.ft-nav__panel {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: calc(var(--wp--preset--spacing--m) * -1);
	z-index: var(--wp--custom--lag--panel);
	/* Luft mellom lenka og panelet, så musa ikke mister det på veien ned. */
	padding-block-start: var(--wp--preset--spacing--xxs);
}

.ft-nav__punkt--panel:hover .ft-nav__panel,
.ft-nav__punkt--panel:focus-within .ft-nav__panel {
	display: block;
}

.ft-nav__panel-innhold {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	box-shadow: var(--wp--custom--skygge--heving);
}

.ft-nav__celle {
	/* 28px: cellepadding fra forbildet. */
	padding: 28px var(--wp--preset--spacing--m);
	border-inline-end: var(--wp--custom--linje);
}

.ft-nav__celle:last-child {
	border-inline-end: 0;
}

.ft-nav__celle--kolonne {
	min-inline-size: 13.75rem;
}

.ft-nav__kolonne-tittel {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ft-nav__kolonne-lenker {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ft-nav__kolonne-lenke {
	display: block;
	padding-block: var(--wp--preset--spacing--xxxs);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: color var(--wp--custom--overgang--rask) ease;
}

.ft-nav__kolonne-lenke:hover,
.ft-nav__kolonne-lenke:focus-visible {
	color: var(--wp--preset--color--gul);
}

/* Kampanjecella ytterst, med samme kortform som resten av temaet. */
.ft-nav__celle--kort {
	flex-shrink: 0;
	inline-size: 16.25rem;
	padding: var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--lys-blaa);
}

.ft-nav__kort {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxxs);
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

.ft-nav__kort-bilde {
	width: 100%;
	/*
	 * `height: auto` maa staa her. Kortet henter naa bildet fra produktkategorien, og
	 * `wp_get_attachment_image()` skriver `width`- og `height`-attributter paa taggen. De teller
	 * som en hoeyde, og da faller `aspect-ratio` bort: et staaende kategoribilde ble rendret i sin
	 * egen 3:4 i stedet for beskaaret kvadratisk. Den hardkodede taggen hadde ingen attributter,
	 * saa dette kunne ikke skje foer.
	 */
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--kant);
	margin-block-end: var(--wp--preset--spacing--xxs);
}

.ft-nav__kort-kicker {
	color: var(--wp--preset--color--gul);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--kicker-s);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ft-nav__kort-tittel {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 700;
	line-height: 1.1;
}

.ft-nav__kort-lenke {
	margin-block-start: var(--wp--preset--spacing--xxs);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
}

.ft-nav__kort:hover .ft-nav__kort-lenke,
.ft-nav__kort:focus-visible .ft-nav__kort-lenke {
	color: var(--wp--preset--color--gul);
}

/* ────────────────────────  PRODUKTARKIVET  ───────────────────────── */

/*
 * Arkivtoppen er et heroband: tittelen på lys blå, med kategoriens egen beskrivelse under.
 * Beskrivelsen står tom til noen skriver en — den redigeres per kategori under Produkter →
 * Kategorier, og er derfor ikke hardkodet her.
 */
.ft-band--arkivtopp {
	text-align: center;
}

.ft-band--arkivtopp .wp-block-term-description {
	max-width: 44rem;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1.35;
}

/*
 * Filterlinja er sin egen stripe mellom toppen og rutenettet: hvit flate, hårstrek under,
 * lite luft. Den skal lese som en verktøylinje, ikke som et band med innhold.
 */
:root :is(.ft-main, .wp-block-post-content) > .ft-band.ft-filterbar {
	padding-block: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--hvit);
	border-block-end: var(--wp--custom--linje);
}

/*
 * Filtrene hoerer sammen til venstre, tellinga staar for seg til hoeyre.
 *
 * Blokka er satt til `space-between`, som fordelte alle tre jevnt utover da kategorivelgeren kom
 * til - og da leste sorteringa som noe annet enn et filter. `flex-start` samler dem, og en
 * auto-marg paa det siste elementet dytter tellinga ut til kanten. Siste barn og ikke et
 * klassenavn: Woo pakker tellinga i sin egen blokkwrapper, og navnet der er deres aa endre.
 */
:root .ft-filterbar__rad {
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--s);
}

:root .ft-filterbar__rad > :last-child {
	margin-inline-start: auto;
}

/*
 * Woo gir sorteringsskjemaet `margin: 0 0 1em` (.woocommerce .woocommerce-ordering).
 * I en flex-rad med `align-items: center` er det margboksen som sentreres, saa en bunnmarg
 * loefter pilla en halv marg opp - malt til 6,5 px - og sorteringa laa hoeyere enn kategorivelgeren.
 * Marga ligger paa skjemaet inne i blokkens egen wrapper, ikke paa flex-barnet selv - og et
 * flex-element er sin egen formatteringskontekst, saa marga kollapser ikke ut, den gjoer wrapperen
 * 13 px hoeyere. Derfor nulles den paa alt i raden, ikke bare paa barna, og ikke paa Woos
 * klassenavn: raden setter selv avstandene med `gap`.
 */
:root .ft-filterbar .ft-filterbar__rad * {
	margin-block: 0;
}

/* Sorteringen er en pille, som filtrene på frutimian.no. */
.ft-filterbar .woocommerce-ordering select,
.ft-filterbar select {
	appearance: none;
	padding: 0.55em 2.4em 0.55em 1.1em;
	background-color: var(--wp--preset--color--lys-blaa);
	background-image: var(--ft-pilikon);
	background-repeat: no-repeat;
	background-position: right 1em center;
	background-size: 10px 6px;
	border: 0;
	border-radius: var(--wp--custom--radius--pille);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
	cursor: pointer;
}

.ft-filterbar .woocommerce-ordering select:focus-visible,
.ft-filterbar select:focus-visible {
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

:root {
	--ft-pilikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
}

/* Antallet er en opplysning, ikke en kontroll. */
/*
 * Kategorivelgeren staar foerst i raden, og teksten over den som kjernen skriver ut skjules -
 * pilla sier selv hva den er. Selve `select`-en arver pilleformen fra regelen over.
 */
.ft-filterbar__kategori label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ft-filterbar__kategori {
	margin: 0;
}

.ft-filterbar .woocommerce-result-count,
.ft-filterbar .wc-block-product-results-count {
	margin: 0;
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

/* Rutenettet trenger ikke toppluft - filterlinja over har allerede satt avstanden. */
:root :is(.ft-main, .wp-block-post-content) > .ft-band.ft-band--arkiv {
	padding-block-start: var(--wp--preset--spacing--xxl);
}

/* --------------------------------------------------------------------------
   PAGINERING PAA ARKIVET
   --------------------------------------------------------------------------
   Sto som bar tekst rett under siste knapperad: «1 2 Neste side», uten luft
   over og uten mellomrom mellom tallene. Det leste som en avkuttet setning,
   ikke som noe man kan trykke paa.

   Luften settes her og ikke som marg paa blokka i malen. En marg satt i malen
   blir en inline-stil paa elementet, og da kan ingen regel i dette arket roere
   den uten `!important`. Ett sted aa endre er bedre enn to.
   -------------------------------------------------------------------------- */

:root .ft-paginering {
	gap: 0.25rem;
	margin-block-start: var(--wp--preset--spacing--xxl);
	align-items: center;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
}

/* Tallene ligger i sin egen boks, saa `gap` paa raden over naar dem ikke. */
:root .ft-paginering .wp-block-query-pagination-numbers {
	display: flex;
	gap: 0.25rem;
}

/*
 * Hvert element faar en flate aa treffe. Tall som bar tekst er noen faa piksler
 * hoeye og tunge aa treffe med tommelen; 2,5rem er naermeste runde tall over
 * anbefalt minste treffflate.
 */
:root .ft-paginering .page-numbers,
:root .ft-paginering .wp-block-query-pagination-previous,
:root .ft-paginering .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: 0.65rem;
	border-radius: var(--wp--custom--radius--kant);
	color: var(--wp--preset--color--tekst);
	text-decoration: none;
}

:root .ft-paginering a:hover,
:root .ft-paginering a:focus-visible {
	background: var(--wp--preset--color--lys-blaa);
	color: var(--wp--preset--color--tekst);
}

/* Sida du staar paa er gul, som alt annet aktivt i butikken. */
:root .ft-paginering .wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	font-weight: 700;
}

/* ==========================================================================
   Søkeresultater
   ==========================================================================
   Produktsøk (header-søket) går til `product-search-results`-malen og arver
   hele produktkort-designet fra `.wc-block-product-template` lenger oppe.
   Reglene her gjelder bare den generiske `search`-malen, som nå er en enkel
   tekstliste - ikke et kortgalleri - siden den bare kan treffe sider og
   innlegg, aldri produkter.
   -------------------------------------------------------------------------- */

.ft-sokeliste .ft-sokeliste__rader > li {
	border-block-end: 1px solid rgba(26, 26, 26, 0.1);
	padding-block: var(--wp--preset--spacing--m);
}

.ft-sokeliste .ft-sokeliste__rader > li:first-child {
	padding-block-start: 0;
}

.ft-sokeliste .ft-sokekort__tittel {
	margin-block: 0 0.4rem;
	line-height: 1.3;
}

.ft-sokeliste .ft-sokekort__tittel a:hover {
	color: var(--wp--preset--color--gul);
}

.ft-sokeliste .ft-sokekort__utdrag {
	margin-block: 0;
	max-width: 52rem;
	color: var(--wp--preset--color--tekst-svak);
}

/* Tomt produktsøk: knapp og tekst trenger litt luft fra filterstripen. */
.ft-ingen-treff {
	padding-block: var(--wp--preset--spacing--xl);
}

.ft-ingen-treff .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * Merk hvem regelen gjelder: bare et *band* skal miste toppmargen. Da `.wp-block-post-content`
 * kom med som andre ledd, gjaldt den plutselig ogsaa vanlige sider, der post-content er full av
 * avsnitt som trenger margene sine - den ville flatet ut de redaksjonelle sidene.
 *
 * <main> er nå en ekte gruppeblokk (tagName: main), ikke løs HTML mellom
 * blokkene. Det er det som gjør at Nettstedredigereren ser wrapperen, og at
 * `.ft-main > ...`-reglene lenger oppe virker i redigereren og ikke bare på
 * forsiden.
 *
 * Prisen er at kjernen nå legger sin egen flyt-marg mellom barna
 * (`:where(.is-layout-flow) > * + *`). Båndene eier sin egen vertikale luft
 * gjennom padding, så marger på toppen av det ville lagt seg som dobbel luft
 * mellom hvert bånd. Her nulles de.
 */
:is(.ft-main, .wp-block-post-content) > * + :is(.ft-band, .ft-hero) {
	margin-block-start: 0;
}

/*
 * REDIGEREREN: en smal luke mellom baandene, saa det blaa plusstegnet mellom blokkene kan dukke opp.
 *
 * Kjernen viser det bare naar musa staar paa selve blokklista - i mellomrommet *mellom* to blokker.
 * `useInBetweenInserter()` i block-editor sjekker at maalet for musa er `.block-editor-block-list__layout`,
 * og gjemmer plusstegnet ellers. Regelen rett over legger baandene kant i kant, saa det fantes ikke et
 * eneste punkt mellom dem aa peke paa, og plusstegnet kom aldri (Stine, 27.10.2026). Man maatte bruke
 * «+» oeverst til venstre og dra blokkene inn.
 *
 * 12 px, og bare i redigereren: `.is-root-container` finnes ikke paa forsiden. Ikke `.editor-styles-wrapper`
 * som anker - uten iframe skriver redigereren den klassen foran hver selektor i arket selv. Bare baand og
 * hero: vanlige avsnitt har sin egen marg og trenger ingen luke. Veier (0,3,0) mot nullingens (0,2,0).
 */
:root .is-root-container > * + :is(.ft-band, .ft-hero) {
	margin-block-start: 12px;
}

/* ==========================================================================
   Handlekurvskuffen (woocommerce/mini-cart)
   ==========================================================================
   Skuffen på referansesiden kommer fra en egen Shopify-bro-plugin og kan ikke
   flyttes hit. Dette er den samme formen bygd på WooCommerce sine egne blokker:
   tittel med antall, produktliste, delsum og to knapper.
   Malen ligger i `parts/mini-cart.html`, så vi eier strukturen og kan legge til
   fraktmåler og betalingsikoner der senere.
   -------------------------------------------------------------------------- */

:root {
	/* Samme strek som knappen i headeren, som maske så den arver tekstfargen. */
	--ft-vognikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

:root .wc-block-mini-cart__drawer .wc-block-components-drawer {
	background: var(--wp--preset--color--hvit);
}

/*
 * Tittelraden holdes i brødskriften, ikke i display-skriften.
 *
 * Skuffen er et verktøy midt i en handel, ikke et bånd på forsiden. Referansen
 * setter «Handlekurv» rolig i brødskrift med tallet ved siden av, og det er den
 * tonen som er kopiert her. Vognikonet foran kommer fra CSS fordi WooCommerce
 * ikke gir oss et sted å legge det i malen.
 */
:root .wc-block-mini-cart__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.25rem;
	width: 100%;
	flex: 0 0 auto;
	/*
	 * Her forsvant streken. WooCommerce legger
	 * `mask-image: linear-gradient(#000 calc(100% - 24px), transparent)` på `h2.wc-block-mini-cart__title`,
	 * så de nederste 24 pikslene av tittelboksen tones ut til gjennomsiktig. Det er deres triks for at
	 * varer som scroller opp under tittelen skal fade bort i stedet for å bli kuttet tvert av.
	 *
	 * Streken vår ligger på selve underkanten av den boksen, altså midt i det bortmaskerte feltet, og
	 * ble tegnet med alpha 0. Den var der hele tiden - den var usynlig, ikke borte. Den tomme kurven
	 * viste den fordi den grenen er vår egen markup (`ft-vogn__topp`) og aldri får maska.
	 *
	 * Vi slår av maska og gir tittelen en egen ugjennomsiktig bakgrunn i stedet, så varene fortsatt
	 * skjules bak tittelen når de scroller - bare med en ren strek som kant i stedet for en uttoning.
	 */
	mask-image: none;
	-webkit-mask-image: none;
	background: var(--wp--preset--color--hvit);
	/* Plass til lukkeknappen, så en lang tittel aldri legger seg under den. */
	padding-inline-end: 2.5rem;
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--s);
	/*
	 * Egen strek her framfor `--linje` (8 % svart): skuffen er hvit og smal, og
	 * den fine streken forsvant. Denne skal faktisk skille tittelen fra varene.
	 */
	border-block-end: 1px solid rgba(26, 26, 26, 0.15);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	font-weight: 600;
	line-height: 1.3;
}

:root .wc-block-mini-cart__title::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	background: currentColor;
	-webkit-mask: var(--ft-vognikon) center / contain no-repeat;
	mask: var(--ft-vognikon) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   Fraktmaalet: hvor langt kurven er fra fri frakt.

   Ligger rett under tittelen i begge grenene av skuffen, satt inn av
   `fraktmaal.js`. Boksen er et fast element i kolonna - den skal staa i ro mens
   varelista under scroller - og henter innrykket sitt fra skuffens egen
   `padding-inline`, saa stripa faar samme kant som tittelen over.
   -------------------------------------------------------------------------- */

:root .ft-fraktmaal {
	flex: 0 0 auto;
	padding-block: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--hvit);
	border-block-end: 1px solid rgba(26, 26, 26, 0.15);
}

:root .ft-fraktmaal__tekst {
	margin: 0 0 var(--wp--preset--spacing--xxs);
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	line-height: 1.4;
	text-align: center;
}

/* 6 px maalt paa referansen, og sporet er samme lyse blaa som pillene ellers. */
:root .ft-fraktmaal__spor {
	height: 6px;
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--pille);
	overflow: hidden;
}

:root .ft-fraktmaal__fyll {
	display: block;
	width: 0;
	height: 100%;
	background: var(--wp--preset--color--gul);
	border-radius: inherit;
	transition: width var(--wp--custom--overgang--myk) ease-out;
}

@media (prefers-reduced-motion: reduce) {
	:root .ft-fraktmaal__fyll {
		transition: none;
	}
}

/*
 * Paa kurven og i kassen staar stripa som et eget element i sida, ikke i en skuff: den trenger
 * egen luft, og den blir ikke bredere enn en linje tekst er verdt aa lese.
 */
:root .ft-fraktmaal--side {
	max-width: 34rem;
	margin-block: 0 var(--wp--preset--spacing--l);
	padding-block: 0;
	border-block-end: 0;
}

/* I ordrespalta foelger den spaltas bredde og staar tettere paa tabellen under. */
:root #order_review .ft-fraktmaal--side {
	max-width: none;
	margin-block-end: var(--wp--preset--spacing--s);
}

/*
 * Skuffen puster mer enn WooCommerce sin standard.
 *
 * Referansen holder god avstand til kanten hele veien ned, og det er den som
 * gjør at skuffen leser som et rolig panel og ikke som en tett liste. Luften
 * legges på selve innholdet, slik at tittel, liste og bunn får samme margin
 * mot kanten uten at hver del må vite om den.
 */
:root .wp-block-woocommerce-mini-cart-contents {
	position: relative;

	/*
	 * Hvor tittellinja faktisk begynner, målt i nettleseren.
	 *
	 * Innholdet vårt starter med `spacing--s`, men WooCommerce legger 1rem til
	 * over tittelen inne i sin egen flex-kolonne - ikke som padding eller marg
	 * på noe vi kan nulle. Lukkeknappen er absolutt plassert mot dette
	 * innholdet, så den må kjenne den samme summen for å havne på linja.
	 * Endrer WooCommerce avstanden sin, er dette den ene knappen å justere.
	 */
	--ft-skuff-topp: calc(var(--wp--preset--spacing--s) + 1rem);

	padding-inline: var(--wp--preset--spacing--m);
	padding-block: var(--wp--preset--spacing--s);
}

/*
 * Én eier av toppluften.
 *
 * WooCommerce legger sin egen luft på blokkene inne i skuffen i tillegg til
 * den vi setter på selve innholdet. Da havnet tittelen 18 px lenger ned enn
 * lukkeknappen, som er forankret i innholdets egen kant. Her nulles den indre
 * luften, slik at padding på `.wp-block-woocommerce-mini-cart-contents` er det
 * eneste som bestemmer hvor toppen begynner - og de to faller på samme linje.
 */
:root .wp-block-woocommerce-filled-mini-cart-contents-block,
:root .wp-block-woocommerce-empty-mini-cart-contents-block,
:root .wp-block-woocommerce-mini-cart-title-block {
	padding-block-start: 0;
	margin-block-start: 0;
}

/*
 * Lukkeknappen skal stå på tittellinja, ikke over den.
 *
 * WooCommerce rendrer knappen som første barn i skuffen, før tittelen, så i
 * vanlig flyt tar den en rad for seg selv. Her løftes den ut av flyten og
 * forankres i samme toppkant som tittelen. Begge får samme høyde - oppgitt i
 * rem, ikke em, siden de to arver hver sin skriftstørrelse - og da faller
 * midtlinjene sammen av seg selv.
 */
:root .wc-block-components-drawer__close-wrapper {
	position: absolute;
	top: var(--ft-skuff-topp);
	right: var(--wp--preset--spacing--m);
	z-index: var(--wp--custom--lag--flate);
	display: flex;
	align-items: center;
	height: 2.25rem;
	margin: 0;
}

/*
 * Knappen har WooCommerce sin `contained`-klasse, altså en fylt knapp med hvitt
 * ikon. Når vi tar bort fyllet blir krysset hvitt på hvitt, så fargen må settes
 * på nytt - og ikonet må be om `currentColor` for å følge den i det hele tatt.
 */
/*
 * Lukkeknappen er en lys blå rute, som på referansesiden - ikke en naken strek.
 * Fyllet gjør den til et tydelig mål uten å ta oppmerksomhet fra tittelen.
 */
/*
 * WooCommerce murer igjen denne knappen med `!important`:
 *
 *   background: transparent !important;
 *   color: inherit !important;
 *   padding: 1em !important;
 *   position: absolute !important;
 *   opacity: .6;
 *
 * Vekt hjelper ikke mot det, så fyllet må settes med samme middel. Padding og
 * marg røres ikke: de to holder knappen der den står, og plasseringen sitter
 * nå riktig. `opacity` er ikke låst, og det er den som gjør krysset blekt.
 */
:root .wc-block-components-button.wc-block-components-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	/* Ingen flate i hvile - ruta er en hover-tilstand, ikke en knappeflate. */
	background: transparent !important;
	color: var(--wp--preset--color--tekst) !important;
	/* WooCommerce demper krysset til 60 %. Det skal være like svart som tittelen. */
	opacity: 1;
	box-shadow: none;
	border: 0;
	border-radius: 3px;
	min-height: 0;
	transition: background var(--wp--custom--overgang--rask) ease;
}

/*
 * `max-width: none` er ikke pynt: nullstillingen øverst i fila gir alle svg-er
 * `max-width: 100%`, og prosenten regnes av forelderens innholdsbredde. Med
 * WooCommerce sin `padding: 1em !important` blir den null - og ikonet null.
 */
:root .wc-block-components-button.wc-block-components-drawer__close svg {
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	max-width: none;
	fill: currentColor;
}

/*
 * Hover henges på omslaget, ikke på knappen.
 *
 * WooCommerce gir knappen `margin: -1em` sammen med `padding: 1em`, så dens
 * egen boks ligger forskjøvet i forhold til ruta vi tegner. Pekeren traff
 * derfor kanten i stedet for flaten, og fargen blinket først idet man forlot
 * den. Omslaget er en rolig 2,25rem-boks på riktig sted, og treffer hver gang.
 */
/*
 * Hover henges på omslaget, ikke bare på knappen: WooCommerce gir knappen
 * `margin: -1em` sammen med `padding: 1em`, så dens egen boks ligger litt
 * forskjøvet i forhold til ruta vi tegner.
 *
 * Fargen er ren lys-blaa blandet mørkere. Ren `lys-blaa` er 96 % hvit, og på en
 * liten rute mot hvit skuff - med musepekeren oppå - ser man den knapt. Den
 * skal leses som en tilstand, ikke bare måles i et fargeoppslag.
 */
:root .wc-block-components-drawer__close-wrapper:hover .wc-block-components-drawer__close,
:root .wc-block-components-button.wc-block-components-drawer__close:hover {
	background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 88%, var(--wp--preset--color--tekst)) !important;
	opacity: 1;
}

/*
 * Antallet står som et eget tall etter tittelen. Den lyse blå pilla skiller det
 * fra overskriften uten å rope, slik referansen gjør det.
 */
:root .wc-block-mini-cart__title .wc-block-mini-cart__title-items-counter,
:root .wp-block-woocommerce-mini-cart-title-items-counter-block {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 0.5em;
	padding: 0.1em 0.7em;
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--pille);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1.6;
}

/* Tom kurv: dempet og midtstilt, ikke en feilmelding. */
:root .ft-vogn__tom {
	margin-block: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--tekst-svak);
}

/* Bunnen bæres av en hårstrek, slik at totalen løftes fra produktlista. */
:root .wc-block-mini-cart__footer {
	padding-block-start: var(--wp--preset--spacing--s);
	border-block-start: var(--wp--custom--linje);
}

:root .wc-block-mini-cart__footer-subtotal {
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	font-variant-numeric: tabular-nums;
}

/*
 * To knapper under hverandre, ikke ved siden av: «Gå til kassen» er handlingen,
 * «Vis handlekurv» er omveien. Referansen gir kassen hele bredden.
 */
:root .wc-block-mini-cart__footer-actions {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--wp--preset--spacing--xs);
}

:root .wc-block-mini-cart__footer-checkout,
:root .wc-block-mini-cart__footer-cart,
:root .wc-block-mini-cart__shopping-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-block: 0.9em;
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	text-decoration: none;
}

:root .wc-block-mini-cart__footer-checkout,
:root .wc-block-mini-cart__shopping-button a {
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border: 0;
}

:root .wc-block-mini-cart__footer-cart {
	background: transparent;
	color: var(--wp--preset--color--tekst);
	border: 1px solid var(--wp--preset--color--tekst);
}

:root .wc-block-mini-cart__footer-checkout:hover,
:root .wc-block-mini-cart__shopping-button a:hover {
	background: var(--wp--preset--color--tekst-hover);
	color: var(--wp--preset--color--hvit);
}

:root .wc-block-mini-cart__footer-cart:hover {
	background: var(--wp--preset--color--lys-blaa);
}

/* ==========================================================================
   Kvittering på «Legg i handlekurv»
   ==========================================================================
   Knappen blir mørk med en hake i to sekunder og går så tilbake. Klassen
   `.ft-lagt` settes og fjernes av assets/js/kurvknapp.js; alt det visuelle
   ligger her.
   -------------------------------------------------------------------------- */

:root {
	--ft-hakeikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/*
 * Etiketten på kjøpsknappen skal rulle når man legger i kurven, men ikke når man tar ut igjen.
 *
 * WooCommerce animerer teksten ved hver tilstandsendring: den gamle etiketten får
 * `.wc-block-slide-out` (`translateY(0)` -> `translateY(-100%)`, med `forwards`) og den nye får
 * `.wc-block-slide-in` (fra `translateY(90%)` og gjennomsiktig). Begge veier, uten å vite hvilken
 * vei kurven gikk.
 *
 * Når man legger i kurven er rullingen fin: den følger vår egen mørke knapp med hake, og de to
 * leses som én bevegelse. Når man fjerner varen fra skuffen er det bare tekst som ruller - og siden
 * `reset_product_button_label()` i functions.php gir begge tilstandene samme etikett, ruller
 * «Legg i handlekurv» ut og en identisk «Legg i handlekurv» inn. Det leses som en feil.
 *
 * CSS kan ikke se hvilken retning kurven gikk, men det kan `.ft-lagt`: den settes av
 * assets/js/kurvknapp.js på klikk og ligger på knappen i to sekunder etterpå - altså nøyaktig når
 * man legger noe i kurven, og aldri når noe fjernes et annet sted på siden. Så animasjonen får stå
 * urørt mens den klassen er der, og slås av ellers.
 *
 * Animasjonen kan ikke bare slås av, for den er ikke pynt - den er selve maskineriet. Det er én og
 * samme `span` hele veien (`data-wp-text`, `data-wp-class--wc-block-slide-in/out` og
 * `data-wp-on--animationend` sitter på samme element i ProductButton.php), og teksten byttes først
 * når `animationend` fyrer. Ruller etiketten ut, fyrer `animationend`, bytter teksten, ruller inn.
 *
 * Å sette `animation-duration: 0s`, som var forrige forsøk, fjernet derfor ikke dansen - den
 * presset bare hele sekvensen inn i én bildeflate. Det var det som først så ut som «bare raskere»
 * og siden som et glitch.
 *
 * Her byttes i stedet bare *navnet* på animasjonen, til en som ikke flytter noe. Varighet, antall
 * og `forwards` kommer fortsatt fra WooCommerce, `animationend` fyrer til riktig tid og teksten
 * byttes som den skal - det eneste som forsvinner, er bevegelsen.
 *
 * Velgeren speiler WooCommerces egen (fire klasser og en type); `:root` og `:not()` legger oss over.
 */
@keyframes ft-ingen-rull {
	from,
	to {
		opacity: 1;
		transform: none;
	}
}

:root .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:not(.ft-lagt) span.wc-block-slide-out,
:root .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button:not(.ft-lagt) span.wc-block-slide-in {
	animation-name: ft-ingen-rull;
}

:root .wc-block-components-product-button .wp-block-button__link.ft-lagt {
	background: var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--hvit);
}

/* Vognen byttes til en hake - samme plass, samme størrelse. */
:root .wc-block-components-product-button .wp-block-button__link.ft-lagt::before {
	-webkit-mask-image: var(--ft-hakeikon);
	mask-image: var(--ft-hakeikon);
}

/*
 * Etiketten står i et span som WooCommerce skriver teksten sin inn i. Vi rører
 * ikke innholdet - det ville blitt overskrevet ved neste oppdatering - men
 * krymper det bort og legger vår egen tekst i et ::after, som lever i CSS og
 * derfor overlever at `textContent` byttes ut.
 */
:root .wc-block-components-product-button .wp-block-button__link.ft-lagt > span {
	font-size: 0;
}

:root .wc-block-components-product-button .wp-block-button__link.ft-lagt > span::after {
	content: "Lagt i handlekurven";
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

/*
 * «Vis handlekurv» under knappen er overflødig nå som skuffen åpner seg av seg
 * selv.
 *
 * Både lenka og spannet rundt den må bort. WooCommerce pakker lenka i et
 * `<span>` som vises så snart varen ligger i kurven; skjuler man bare lenka,
 * blir spannet stående igjen som en tom tekstlinje. Den linja dyttet pris og
 * knapp omtrent 12 px opp i akkurat det kortet - kortet så «løftet» ut, mens
 * det egentlig var naboene som sto lavere.
 */
.wc-block-product-template .wc-block-components-product-button .added_to_cart,
.wc-block-product-template .wc-block-components-product-button span:has(> .added_to_cart) {
	display: none !important;
}

/* --------------------------------------------------------------------------
   Tom handlekurv
   --------------------------------------------------------------------------
   WooCommerce legger både tittel og bunn inne i blokka for en *fylt* kurv, så
   en tom skuff står igjen med bare meldinga. Referansen beholder rammen: samme
   tittelrad øverst, samme bunn nederst, bare uten tall å vise. Tittel og bunn
   under er derfor våre egne - de trenger ingen data, for en tom kurv er alltid
   null varer og null kroner.
   -------------------------------------------------------------------------- */

:root .ft-vogn__topp {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 2.25rem;
	padding-block: 0 var(--wp--preset--spacing--s);
	padding-inline-end: 2.5rem;
	margin: 0;
	border-block-end: var(--wp--custom--linje);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	font-weight: 600;
	line-height: 1.3;
}

:root .ft-vogn__topp::before {
	content: "";
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	background: currentColor;
	-webkit-mask: var(--ft-vognikon) center / contain no-repeat;
	mask: var(--ft-vognikon) center / contain no-repeat;
}

:root .ft-vogn__antall {
	display: inline-flex;
	align-items: center;
	padding: 0.1em 0.7em;
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--pille);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1.6;
}

/*
 * Den tomme blokka skal fylle skuffen, ikke sentreres i den.
 *
 * WooCommerce sentrerer den som et lite innhold midt i en stor flate. Da
 * flyter tittel, melding og bunn sammen midt på skjermen. `flex: 1` og
 * `align-self: stretch` lar den strekke seg i stedet - og `min-height: 100%`
 * gjør ingenting her, for prosenten har ingen fast høyde å regne av.
 * Meldinga får resten av plassen, og bunnen havner nederst av seg selv.
 */
:root .wp-block-woocommerce-empty-mini-cart-contents-block {
	/*
	 * Fyller skuffen ved å festes til den, ikke ved å be om høyde.
	 *
	 * WooCommerce sentrerer denne blokka som et lite innhold i en stor flate,
	 * og verken `min-height: 100%` eller `flex: 1` kom forbi det. Innholds-
	 * wrapperen har allerede `position: relative` og spenner hele skuffen - det
	 * er den lukkeknappen måles mot - så her forankres blokka i den i stedet.
	 * `100vh` ville vært en gjetning på samme høyde: admin-linja forskyver den,
	 * og på mobil endrer `vh` seg når nettleserlinja gir seg.
	 *
	 * Toppen er den samme `--ft-skuff-topp` som lukkeknappen, så tittelen her
	 * havner på nøyaktig samme linje som i en fylt kurv.
	 */
	position: absolute;
	top: var(--ft-skuff-topp);
	right: var(--wp--preset--spacing--m);
	bottom: var(--wp--preset--spacing--s);
	left: var(--wp--preset--spacing--m);

	/*
	 * WooCommerce gir blokka `height: 100%`. Sammen med `top` over ville den
	 * rent ut under skuffen; `auto` lar top og bottom bestemme høyden i stedet.
	 */
	height: auto;

	display: flex;
	flex-direction: column;

	/*
	 * Og `justify-content: center`, som er den egentlige grunnen til at tittel,
	 * melding og bunn klumpet seg midt på: blokka fylte skuffen hele tiden, men
	 * pakket barna sammen i midten. Her legger de seg fra toppen, og meldinga
	 * tar plassen som blir til overs.
	 */
	justify-content: flex-start;
}

/*
 * WooCommerce pakker innholdet vårt i sin egen div inne i den tomme blokka.
 *
 * Den pakken vokser ikke: blokka var 925 px høy, mens pakken ble stående på
 * 300 og la seg øverst. Alt vi hadde stylet - kolonnen, den automatiske
 * margen i bunnen - satt ett nivå for langt ned og hadde ingen plass å virke
 * i. Her er det pakken som får kolonnen og høyden, og da faller resten på
 * plass av seg selv.
 *
 * Selektoren går på barnet, ikke på klassenavnet: navnet er WooCommerce sitt
 * indre anliggende og kan skifte, mens «det ene barnet» blir stående.
 */
:root .wp-block-woocommerce-empty-mini-cart-contents-block > * {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;

	/*
	 * Pakken har 48 px egen toppluft. Den dyttet tittelen ned til 116 mens
	 * krysset sto på 66, og ødela linja de skal dele. Toppen eies av `top` på
	 * blokka over - her skal det ikke legges noe oppå.
	 */
	padding-block-start: 0;
}

/* Meldinga står like under tittelen, med luft over seg. */
:root .ft-vogn__tom {
	margin-block: var(--wp--preset--spacing--xl) 0;
}

/*
 * `margin-block-start: auto` dytter bunnen ned, i stedet for at meldinga over
 * må vokse. Samme grep som holder kjøpsknappen i bunnen av produktkortene:
 * den frie marginen spiser all plassen som blir til overs i en flex-kolonne,
 * og den bryr seg ikke om hva WooCommerce har bestemt om barna ellers.
 */
:root .ft-vogn__bunn {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--s);
	border-block-start: var(--wp--custom--linje);
}

:root .ft-vogn__sum {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-block: 0 var(--wp--preset--spacing--xs);
	font-weight: 600;
}

:root .ft-vogn__sum-tall {
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	font-variant-numeric: tabular-nums;
}

/*
 * «Gå til kassen» er med for formens skyld når kurven er tom - den viser hvor
 * knappen kommer til å stå. Den er et span, ikke en lenke: en tom kurv har
 * ingenting å gå til kassen med, og da skal den heller ikke kunne klikkes.
 */
:root .ft-vogn__kasse-av {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-block: 0.9em;
	background: color-mix(in srgb, var(--wp--preset--color--gul) 45%, var(--wp--preset--color--hvit));
	color: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	cursor: default;
}

/* ==========================================================================
   Produktsiden
   ==========================================================================
   Malen lå ikke i temaet i det hele tatt - WooCommerce sin egen ble brukt, og
   den kjenner ingen av reglene våre. `templates/single-product.html` er nå vår,
   og alt under her kler den opp: brødsmuler på lys stripe, kategori som
   merkelapp, tittel i display-skriften, pris stort, og kjøpsraden samlet.
   -------------------------------------------------------------------------- */

/*
 * Brødsmulestripa er en tynn linje over innholdet, ikke et bånd.
 *
 * Teksten inni har sine egne marger fra WooCommerce; de nulles her, ellers
 * legger de seg til høyden og teksten havner i overkant av en for høy stripe.
 */
:root .ft-brodsmuler {
	/*
	 * Stripa er et `.ft-band` som alle andre - det er slik den får nøyaktig
	 * samme tekstbredde som menyen over. Å kopiere bredden inn hit som en
	 * variabel var ikke nok; her arves hele oppsettet i stedet. Bare luften
	 * over og under settes om, siden dette er en strek og ikke et bånd.
	 */
	padding-block: var(--wp--preset--spacing--xxs);
	background: var(--wp--preset--color--lys-blaa);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	line-height: 1.5;
}

/* 8 px paa hver side, som paa frutimian.no - maalt paa deres eget skilletegn. */
:root .ft-brodsmuler__skille {
	display: inline-block;
	margin-inline: 0.5rem;
	color: var(--wp--preset--color--tekst-svak);
}

:root .ft-brodsmuler > *,
:root .ft-brodsmuler .wc-block-breadcrumbs,
:root .ft-brodsmuler p,
:root .ft-brodsmuler nav {
	margin-block: 0;
}

/*
 * Produktet begynner rett under stripa. Båndet har ellers `xxl` på toppen,
 * som er riktig mellom to bånd, men blir et tomrom rett under en hårtynn
 * stripe som allerede markerer starten på siden.
 */
:root .ft-brodsmuler + .ft-band {
	padding-block-start: var(--wp--preset--spacing--l);
}

:root .ft-brodsmuler .wc-block-breadcrumbs {
	margin: 0;
	color: var(--wp--preset--color--tekst-svak);
}

/*
 * Graden settes paa selve `nav`-en, ikke paa bandet rundt.
 *
 * WooCommerce gir `.woocommerce-breadcrumb` `font-size: .92em`, og `em` regner seg ut fra det den
 * arver: 14 px paa bandet ble 12,88 px her. Derfor et absolutt tall i stedet, paa noden som faktisk
 * baerer teksten - da har Woos ledd ingenting aa gange med.
 */
:root .ft-brodsmuler .woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

:root .ft-brodsmuler a {
	color: inherit;
	text-decoration: none;
}

:root .ft-brodsmuler a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Bildet og teksten side om side, med luft mellom. */
:root .ft-produkt__rad {
	gap: var(--wp--preset--spacing--xl);
}

:root .ft-produkt__galleri img {
	border-radius: var(--wp--custom--radius--kant);
}

/* Kategorien står som en liten merkelapp over tittelen, slik referansen gjør. */
:root .ft-produkt__merkelapp {
	margin-block: 0 var(--wp--preset--spacing--xs);
}

:root .ft-produkt__merkelapp a {
	display: inline-block;
	padding: 0.25em 0.9em;
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--pille);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	text-decoration: none;
}

/*
 * 3rem/48px, maalt mot forbildet - ikke `display-s` (36px), som var det naermeste trinnet paa
 * skalaen. Stoerrelsen staar i CSS og ikke som `fontSize` paa blokka, fordi kjernen skriver
 * forhaandsdefinerte stoerrelser med `!important` (se beslutning 5): attributtet ville vunnet over
 * enhver temaregel, og da maa tallet uansett bo her.
 */
:root .ft-produkt__tittel {
	margin-block: 0 var(--wp--preset--spacing--xs);
	font-size: 3rem;
	line-height: 1.05;
}

/* Broedskrifta paa 1,75rem/28px, som forbildet - ikke detaljskrifta paa 36px. */
:root .ft-produkt__pris {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--brod);
	font-size: 1.75rem;
	font-variant-numeric: tabular-nums;
	font-weight: 400;
	line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Tilbudsprisen paa produktsida

   Samme grep som i kortene, i stoerre format: tilbudsprisen foerst og stor,
   foerprisen etter den, mindre og dempet. WooCommerce skriver `<del>` foer
   `<ins>` i markupen og det kan vi ikke endre - men i en flexboks bestemmer
   `order` rekkefoelgen uten aa roere DOM-en.

   `:has(> ins)` avgjoer hvor flexboksen havner: blokka pakker prisen i et lag
   ekstra i noen sammenhenger, og regelen skal treffe det elementet som faktisk
   har `del` og `ins` som barn - ikke et lag over eller under.
   -------------------------------------------------------------------------- */

:root :is(.ft-produkt__pris, .ft-produkt__pris .wc-block-components-product-price):has(> ins) {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
}

/*
 * Alt annet - mva-suffikset, skjulte hjelpetekster - legger seg bakerst.
 *
 * Merk at `ins` og `del` under maa skrives i begge dybder, ikke bare den korte. Denne regelen
 * veier (0,3,0) i den lange varianten, og en `:root .ft-produkt__pris ins` veier (0,2,1) - altsaa
 * mindre. Da vant `order: 3` over `order: 1`, og prisene sto igjen i DOM-rekkefoelgen med
 * foerprisen foerst. Samme par i kortene virker fordi begge regler der har like mange klasser.
 */
:root .ft-produkt__pris > *,
:root .ft-produkt__pris .wc-block-components-product-price > * {
	order: 3;
}

/*
 * Fargen er `gul` blandet 20 % mot tekstfargen: maalt til #BA7E27 paa forbildet, og denne
 * blandinga lander paa #B87F05. Ren `gul` (#E09900) ligger paa 2,4:1 mot hvitt og er for lys til
 * aa baere et tall; blandinga gir 3,5:1, som holder for stor tekst - og prisen er 28px halvfet.
 */
:root .ft-produkt__pris ins,
:root .ft-produkt__pris .wc-block-components-product-price ins {
	order: 1;
	color: color-mix(in srgb, var(--wp--preset--color--gul) 80%, var(--wp--preset--color--tekst));
	font-weight: 600;
	text-decoration: none;
}

/* Foerprisen er mindre og dempet, ikke bare gjennomstreket. 0,7em er forholdet i forbildet. */
:root .ft-produkt__pris del,
:root .ft-produkt__pris .wc-block-components-product-price del {
	order: 2;
	font-size: 0.7em;
	color: var(--wp--preset--color--tekst-svak);
	opacity: 0.85;
}

:root .ft-produkt__pris .woocommerce-price-suffix {
	font-size: 0.6em;
	color: var(--wp--preset--color--tekst-svak);
}

:root .ft-produkt__ingress {
	margin-block: 0 var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--tekst-svak);
	max-width: 42rem;
}

/*
 * Kjøpsraden kommer fra WooCommerce sitt klassiske skjema, ikke fra blokker.
 * Antall og knapp legges under hverandre: knappen skal ha hele bredden, som på
 * referansen, og da blir den også et rolig mål på mobil.
 */
:root .ft-produkt__info form.cart {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin-block: 0 var(--wp--preset--spacing--m);
}

/*
 * Antallsvelgeren: «Antall:» ved siden av en lys pille med − og +.
 *
 * Knappene settes inn av assets/js/kurvknapp.js. Selve tallfeltet blir stående
 * - det er det WooCommerce sender inn - men det kles av: ingen ramme, ingen
 * bakgrunn og ingen av nettleserens egne piler, så pilla leser som én kontroll.
 */
:root .ft-produkt__info .ft-antall {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

:root .ft-produkt__info .ft-antall__etikett {
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
}

:root .ft-produkt__info form.cart .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem;
	background: var(--wp--preset--color--lys-blaa);
	border-radius: var(--wp--custom--radius--pille);
}

:root .ft-produkt__info .ft-antall__knapp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--tekst);
	border: 0;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1;
	cursor: pointer;
	transition: background var(--wp--custom--overgang--rask) ease;
}

:root .ft-produkt__info .ft-antall__knapp:hover {
	background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 80%, var(--wp--preset--color--tekst));
}

:root .ft-produkt__info form.cart .quantity input.qty {
	width: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	text-align: center;
	/* Bort med nettleserens egne opp/ned-piler - knappene våre erstatter dem. */
	-moz-appearance: textfield;
	appearance: textfield;
}

:root .ft-produkt__info form.cart .quantity input.qty::-webkit-outer-spin-button,
:root .ft-produkt__info form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

:root .ft-produkt__info form.cart .quantity input.qty:focus-visible {
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

:root .ft-produkt__info form.cart button.single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	padding-block: 0.95em;
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	cursor: pointer;
	transition: background var(--wp--custom--overgang--rask) ease;
}

:root .ft-produkt__info form.cart button.single_add_to_cart_button::before {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--ft-vognikon) center / contain no-repeat;
	mask: var(--ft-vognikon) center / contain no-repeat;
}

:root .ft-produkt__info form.cart button.single_add_to_cart_button:hover {
	background: var(--wp--preset--color--tekst-hover);
}

/*
 * SKU og kategori er opplysninger, ikke innhold - de kan stå dempet nederst.
 *
 * Ingen strek over (Anders 06.10.2026): kjøpsknappen avslutter kjøpsdelen godt nok selv, og to
 * streker med bare én linje tekst imellom ble en boks rundt ingenting. Luft under i stedet, så
 * linja ikke ligger klistret til streken over «Om produktet».
 */
:root .ft-produkt__meta {
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

:root .ft-produkt__meta a {
	color: inherit;
}

/*
 * Overskriftene i beskrivelsen står i brødskriften, ikke i display-skriften.
 *
 * Display-skriften er til båndtitler - store, få, og satt av oss. Her kommer
 * overskriftene fra produktteksten, og de kan være lange («Handlenett -
 * Balkongdamen 34 x 34 x 20,5 cm - à 12 stk»). I Amatic tok de halve kolonnen
 * og leste som en ny sidetittel i stedet for et avsnitt i en beskrivelse.
 */
:root .ft-produkt__detaljer h1,
:root .ft-produkt__detaljer h2,
:root .ft-produkt__detaljer h3,
:root .ft-produkt__detaljer h4 {
	margin-block: var(--wp--preset--spacing--s) var(--wp--preset--spacing--xxs);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--tittel-m);
	font-weight: 600;
	line-height: 1.35;
	text-transform: none;
}

/* Fanenavnene er navigasjon, ikke innhold - de holdes små og rolige. */
:root .ft-produkt__detaljer .wc-tabs li a,
:root .ft-produkt__detaljer .wp-block-woocommerce-product-details h2:first-child {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
}

/*
 * Broedteksten i detaljene staar i full stoerrelse (16 px), ikke den smaa.
 * Dette er produktets egen tekst - den skal leses, ikke slaas opp.
 */
:root .ft-produkt__detaljer p,
:root .ft-produkt__detaljer li {
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Produktgalleriet
   --------------------------------------------------------------------------
   Galleriet er WooCommerce sitt klassiske flexslider-oppsett, ikke en blokk.
   Det lener seg på flyt og på bredder satt i JavaScript, og kolliderte med
   nullstillingen vår - hovedbildet ble stående lite og midtstilt, og
   miniatyrene la seg oppå hverandre. Her settes bredden og rutenettet i CSS i
   stedet, så oppsettet ikke er avhengig av hva slideren rekker å regne ut.
   -------------------------------------------------------------------------- */

/*
 * `!important` her er mot innebygde stiler, ikke mot andre regler.
 *
 * Flexslider skriver bredder rett på elementene når den starter - og en
 * innebygd stil slår enhver vanlig regel i et stilark. Målingen viste det
 * tydelig: lista vår ble `display: grid` som den skulle, mens bildene ble
 * stående på 512 og 29 piksler, altså sin egen naturlige størrelse. Det er
 * bare `!important` som kommer forbi det.
 */
/*
 * Blokkinnpakningen har `max-width: 512px` fra WooCommerce.
 *
 * Det er den som har holdt hele galleriet igjen: kolonnen er 807 px, men alt
 * innenfor regnet sine 100 % av 512. Taket må vekk her, ellers hjelper ingen
 * bredde lenger inn.
 */
:root .ft-produkt__galleri .wp-block-woocommerce-product-image-gallery {
	width: 100%;
	max-width: none;
}

/* Woo flyter galleriet til venstre i 48 % - vi vil ha hele kolonnen. */
:root .ft-produkt__galleri div.woocommerce-product-gallery {
	position: relative;
	width: 100% !important;
	margin: 0;
	float: none;
}

:root .ft-produkt__galleri .woocommerce-product-gallery__wrapper {
	margin: 0;
	padding: 0;
}

:root .ft-produkt__galleri .woocommerce-product-gallery__image,
:root .ft-produkt__galleri .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
}

:root .ft-produkt__galleri .woocommerce-product-gallery__wrapper,
:root .ft-produkt__galleri .woocommerce-product-gallery__image {
	width: 100% !important;
}

:root .ft-produkt__galleri .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	border-radius: var(--wp--custom--radius--kant);
}

/* Forstørrelsesglasset hører til bildet, oppe i hjørnet. */
:root .ft-produkt__galleri .woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--wp--preset--spacing--xs);
	right: var(--wp--preset--spacing--xs);
	z-index: var(--wp--custom--lag--flate);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--wp--preset--color--hvit);
	border-radius: 50%;
	box-shadow: var(--wp--custom--skygge--heving);
	text-decoration: none;
}

/*
 * Miniatyrene som rutenett, ikke som flytende lister. Det er flyten som gjorde
 * at de la seg oppå hverandre når bildene har ulike høyder.
 */
:root .ft-produkt__galleri .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--xs);
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: 0;
	list-style: none;
}

:root .ft-produkt__galleri .flex-control-thumbs li {
	float: none;
	width: auto;
	margin: 0;
	list-style: none;
}

:root .ft-produkt__galleri .flex-control-thumbs img {
	width: 100% !important;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--kant);
	cursor: pointer;
	opacity: 0.65;
	transition: opacity var(--wp--custom--overgang--rask) ease;
}

:root .ft-produkt__galleri .flex-control-thumbs img:hover,
:root .ft-produkt__galleri .flex-control-thumbs img.flex-active {
	opacity: 1;
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: -2px;
}

/* Flere kategorier skal stå som merkelapper ved siden av hverandre, uten komma. */
:root .ft-produkt__merkelapp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs);
}

/*
 * Galleriet uten slider: ett stort bilde og en rad små under.
 *
 * WooCommerce skriver nå ut alle bildene etter hverandre i wrapperen. Rutenettet
 * gir det første bildet hele bredden og stiller resten opp under - samme form
 * som referansen, men uten JavaScript som regner bredder bak ryggen på oss.
 */
/*
 * Hovedbildet over, miniatyrene i en stripe under som ruller sidelengs. Stripa lages av
 * `karusell.js`: WooCommerce skriver alle bildene som soesken, og et rutenett kan ikke rulle -
 * derfor maa miniatyrene faa en boks rundt seg foer de kan bli en rad.
 *
 * Stoerrelsen er fast og ikke en brøkdel av kolonna: en miniatyr som vokser med galleriet ble
 * en liten utgave av hovedbildet i stedet for en miniatyr.
 */
:root .ft-produkt__galleri .woocommerce-product-gallery__wrapper {
	display: block;
	width: 100% !important;
}

/*
 * Fem miniatyrer per rad, og flere rader når det er flere bilder.
 *
 * Stripa rullet sidelengs, uten synlig rullefelt. Med mus fantes det ingen måte å se bilde
 * nummer seks på (Anders, 12.10.2026). Et rutenett viser alle, og fem i bredden er det samme
 * som før.
 */
:root .ft-produkt__galleri .ft-galleri__stripe {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--xs);
	margin-block-start: var(--wp--preset--spacing--xs);
}


/*
 * Fem miniatyrer fyller nøyaktig bredden på hovedbildet: bredden regnes ut fra stripa, ikke
 * settes i piksler, så den følger galleriet i alle vindusbredder - og den sjette titter så vidt
 * fram i kanten og forteller at stripa fortsetter.
 *
 * Fire gikk òg, men da ble hver miniatyr nesten en femtedel av hovedbildet, og rekka så mer ut
 * som fire like bilder enn som en oversikt. Fem ligger nærmere referansesida.
 */
:root .ft-produkt__galleri .ft-galleri__stripe .woocommerce-product-gallery__image {
	min-width: 0;
}

:root .ft-produkt__galleri .ft-galleri__stripe .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1;
	object-fit: cover;
}

/*
 * Miniatyrene får en tynn gul ramme med en luftspalte inn til bildet - ved
 * hover og på det som vises stort, slik referansen gjør det.
 *
 * `outline`, ikke `border`: en kantlinje ville lagt seg til bredden på ruta og
 * fått hele rekka til å hoppe når pekeren passerte. Utlinja tegnes utenfor
 * boksen og rører ikke oppsettet.
 */
:root .ft-produkt__galleri .ft-galleri__stripe .woocommerce-product-gallery__image {
	border-radius: var(--wp--custom--radius--kant);
	outline: 2px solid transparent;
	/*
	 * Negativ forskyvning, ikke 0. Stripa er `overflow-x: auto`, og da regner CSS om `overflow-y`
	 * fra `visible` til `auto` - stripa klipper altsaa ogsaa i hoeyden. Med forskyvning 0 tegnes
	 * utlinja rett utenfor ruta, og da faller de to vassrette kantene - og venstrekanten paa den
	 * foerste miniatyren - utenfor stripa og blir klipt bort. Igjen staar bare loddrette streker
	 * mellom miniatyrene. Med -2px ligger hele ramma innenfor ruta, og ingenting blir klipt.
	 */
	outline-offset: -2px;
	transition: outline-color var(--wp--custom--overgang--rask) ease;
}

:root .ft-produkt__galleri .ft-galleri__stripe .woocommerce-product-gallery__image:hover,
:root .ft-produkt__galleri .woocommerce-product-gallery__image.ft-galleri__valgt {
	outline-color: var(--wp--preset--color--gul);
}

/* Det lille bildet skal se ut som noe man kan trykke på. */
:root .ft-produkt__galleri .ft-galleri__stripe .woocommerce-product-gallery__image {
	cursor: pointer;
}

/*
 * Kopien som er hovedbilde spenner hele bredden, slik det første bildet gjorde.
 *
 * Den er også låst til et kvadrat. Bildene har ulike høyde/bredde-forhold, og
 * med fri høyde endret hele kolonnen seg hver gang man byttet motiv - teksten
 * ved siden av hoppet med.
 *
 * `cover` fyller ruta. `contain` ville vist hvert bilde helt, men la en hvit
 * kant over og under de liggende motivene, og da så produktet mindre ut enn
 * det er. Prisen er at de bredeste bildene beskjæres litt i sidene.
 */
:root .ft-produkt__galleri .ft-galleri__hoved {
	grid-column: 1 / -1;
}

:root .ft-produkt__galleri .ft-galleri__hoved img {
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--hvit);
}

/*
 * Relaterte produkter på rad.
 *
 * Woo sitt eget rutenett slår ikke inn i dette bandet, og kortene la seg
 * oppå hverandre. Her settes rutenettet eksplisitt. Det er trygt så lenge det
 * er avgrenset til `.ft-relaterte`: på forsiden regner WooCommerce
 * kolonnebredden med sin egen gap innbakt, og der skal vi ikke røre den.
 */
:root .ft-relaterte .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--l);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 60rem) {
	:root .ft-relaterte .wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Kjøpsraden på produktsiden
   --------------------------------------------------------------------------
   `add-to-cart-with-options` erstatter WooCommerce sitt klassiske skjema. Den
   legger i kurven uten å laste siden på nytt, så skuffen åpner seg og knappen
   får den samme mørke kvitteringen som kortene i listene. Antallsvelgeren er
   Woo sin egen «stepper» - vi kler den bare i vår lyse pille.
   -------------------------------------------------------------------------- */

:root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	margin-block: 0 var(--wp--preset--spacing--m);
}

/*
 * «Antall:» kommer fra CSS, ikke fra malen.
 *
 * `add-to-cart-with-options` ser bort fra innholdet vi legger inni den og
 * rendrer sin egen mal per produkttype. Vi eier altså ikke markupen her, men
 * vi kan sette etiketten foran raden og la knappen få hele bredden under.
 */
:root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options .wp-block-group:has(.wc-block-add-to-cart-with-options__quantity-selector) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
}

:root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options .wp-block-group:has(.wc-block-add-to-cart-with-options__quantity-selector)::before {
	content: "Antall:";
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 500;
}

:root .ft-produkt__info .wp-block-woocommerce-add-to-cart-with-options .wc-block-components-product-button {
	flex: 1 1 100%;
}

/*
 * Pilla har ingen egen luft rundt knappene.
 *
 * Referansens knapper fyller hver sin ende av pilla: avrundet ytterst, rett inn mot tallet - en
 * D-form. Vår gamle variant hadde `gap` og `padding` her og `border-radius: 50%` på knappene, så
 * markeringen ble en sirkel som svevde inne i pilla med en lyseblå kant rundt. Det er den forskjellen
 * man ser når man trykker.
 *
 * `overflow: hidden` er det som gjør at knappehjørnene følger pillas runding i stedet for å stikke
 * utenfor, og da slipper knappene å kjenne til pillas radius i det hele tatt.
 */
:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	overflow: hidden;
	background: var(--wp--preset--color--lys-blaa);
	border: 0;
	border-radius: var(--wp--custom--radius--pille);
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button {
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 2.5rem høy: samme totalhøyde som før, da pilla hadde 0.25rem padding over og under en
	 * 2rem knapp. Nå bærer knappen hele høyden selv.
	 */
	width: 2.25rem;
	height: 2.5rem;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--tekst);
	border: 0;
	border-radius: 0;
	font-size: var(--wp--preset--font-size--brodtekst-l);
	line-height: 1;
	cursor: pointer;
	transition: background var(--wp--custom--overgang--rask) ease;
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 80%, var(--wp--preset--color--tekst));
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:first-of-type {
	border-start-start-radius: var(--wp--custom--radius--pille);
	border-end-start-radius: var(--wp--custom--radius--pille);
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:last-of-type {
	border-start-end-radius: var(--wp--custom--radius--pille);
	border-end-end-radius: var(--wp--custom--radius--pille);
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input {
	width: 2.5rem;
	padding: 0;
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input::-webkit-outer-spin-button,
:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Kjøpsknappen er den samme blokka som i produktkortene - full bredde her. */
:root .ft-produkt__info .wc-block-components-product-button .wp-block-button__link {
	width: 100%;
	padding-block: 0.95em;
	font-size: var(--wp--preset--font-size--brodtekst);
}

/* --------------------------------------------------------------------------
   Antallsvelgeren på produktsiden - innsiden
   --------------------------------------------------------------------------
   Woo sin «stepper» kommer med egen hvit flate, ramme og skygge på elementene
   inni. Oppå vår lyse pille ble det en boks i en boks. Her nulles innsiden, og
   pilla får være den eneste formen.
   -------------------------------------------------------------------------- */

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector > * {
	background: transparent;
	border: 0;
	box-shadow: none;
	outline: 0;
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector button:hover {
	background: color-mix(in srgb, var(--wp--preset--color--lys-blaa) 80%, var(--wp--preset--color--tekst));
}

:root .ft-produkt__info .wc-block-add-to-cart-with-options__quantity-selector input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Trekkspill i produktinformasjonen
   --------------------------------------------------------------------------
   Fanene bygges om til `<details>` av assets/js/kurvknapp.js. Her er formen:
   en hårstrek mellom hver seksjon, tittelen til venstre og en pil til høyre
   som snur når seksjonen er åpen.
   -------------------------------------------------------------------------- */

:root .ft-produkt__detaljer .ft-trekkspill {
	border-block-start: var(--wp--custom--linje);
}

:root .ft-produkt__detaljer .ft-trekkspill:last-of-type {
	border-block-end: var(--wp--custom--linje);
}

:root .ft-produkt__detaljer .ft-trekkspill__hode {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	padding-block: var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* Safari tegner en egen trekant i `summary` - den skal bort. */
:root .ft-produkt__detaljer .ft-trekkspill__hode::-webkit-details-marker {
	display: none;
}

:root .ft-produkt__detaljer .ft-trekkspill__hode::after {
	content: "";
	flex: 0 0 auto;
	width: 0.85rem;
	height: 0.85rem;
	background: currentColor;
	-webkit-mask: var(--ft-pilikon) center / contain no-repeat;
	mask: var(--ft-pilikon) center / contain no-repeat;
	transition: transform var(--wp--custom--overgang--rask) ease;
}

:root .ft-produkt__detaljer .ft-trekkspill[open] .ft-trekkspill__hode::after {
	transform: rotate(180deg);
}

/*
 * `!important` mot WooCommerce sin innebygde `display: none` på fanepanelene.
 * En lukket `<details>` skjuler innholdet sitt uansett, så dette åpner
 * ingenting som skal være lukket - det opphever bare fanelogikken.
 */
:root .ft-produkt__detaljer .ft-trekkspill .woocommerce-Tabs-panel {
	display: block !important;
	padding-block-end: var(--wp--preset--spacing--s);
}

/*
 * Den juridiske linja nederst: firmanavn, adresse, organisasjonsnummer og
 * e-post. Dempet, men lesbar - den skal kunne slås opp, ikke leses.
 */
:root .ft-footer__juridisk {
	margin-block: 0;
	color: var(--wp--preset--color--tekst-svak);
}

:root .ft-footer__juridisk a {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Varelinjene i handlekurvskuffen
   --------------------------------------------------------------------------
   Skuffen er en kvittering, ikke en produktside: navn, antall og pris er det
   man trenger. Beskrivelsen gjentar det man nettopp leste, og gjør hver linje
   dobbelt så høy - med fire varer i kurven forsvinner totalsummen under
   skjermkanten.
   -------------------------------------------------------------------------- */

:root .wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
	display: none;
}

:root .wc-block-mini-cart__drawer .wc-block-cart-item__prices .wc-block-components-product-price,
:root .wc-block-mini-cart__drawer .wc-block-cart-item__total .wc-block-components-product-price {
	font-family: var(--wp--preset--font-family--detalj);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Varelinja i skuffen - form
   --------------------------------------------------------------------------
   WooCommerce bygger kurven som en tabell med tre celler: bilde, produkt og
   sum. Antallsvelgeren og enhetsprisen ligger *inne i* produktcella - ikke som
   egne celler - og det er nøkkelen til oppsettet under.

   Tabellen settes til rutenett: bilde | produkt | sum. Summen legger seg nederst
   til høyre, på linje med antallsvelgeren, slik referansen har det. Alt er
   avgrenset til skuffen; kurvsiden og kassen har bredde nok til tabellen.
   -------------------------------------------------------------------------- */

:root .wc-block-mini-cart__drawer table.wc-block-cart-items,
:root .wc-block-mini-cart__drawer .wc-block-cart-items tbody {
	display: block;
}

:root .wc-block-mini-cart__drawer .wc-block-cart-items__row {
	position: relative;
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	column-gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--s);
	padding-inline-end: 2rem;
	border-block-end: 1px solid rgba(26, 26, 26, 0.08);
}

:root .wc-block-mini-cart__drawer .wc-block-cart-item__image {
	align-self: start;
	padding: 0;
}

:root .wc-block-mini-cart__drawer .wc-block-cart-item__image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--kant);
}

:root .wc-block-mini-cart__drawer .wc-block-cart-item__product {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--xxs);
	padding: 0;
}

/*
 * Uten `.wc-block-mini-cart__drawer` foran: varelinjene ser like ut i skuffen og på
 * handlekurvsida, og navnet skal veie like tungt begge steder.
 *
 * Velgeren speiler WooCommerces egen, som er
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name`
 * og setter både `font-size: var(--wp--preset--font-size--small, 14px)` og `font-weight: 500`.
 * Med en type-velger i seg veier den (0,3,1), og vår gamle regel på produktcella veide (0,3,0) -
 * ett hakk for lite. Derfor ble navnet stående på 13px/500 uansett hva vi skrev her. `:root` i
 * tillegg til deres struktur gir (0,4,1) og legger oss trygt over.
 */
:root table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	/* 700: navnet er det man leser først i lista, og skal bære linja tydeligere enn tallene. */
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

:root .wc-block-mini-cart__drawer .wc-block-components-product-metadata__variation-data {
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

/*
 * Enhetsprisen ligger inne i produktcella, summen i sin egen celle. Så lenge antallet er én - og
 * det er det nesten alltid her - er de to like, og to identiske tall i samme rad leses som en feil.
 *
 * Prisen tegnes på to måter i den cella, og begge må med. WooCommerce pakker vanligvis beløpet i
 * `span.wc-block-components-product-price` (med `del` + `ins` inni når varen er på tilbud), men i
 * skuffen legger den i tillegg ut et frittstående `…product-price__value` som ikke har den pakka
 * rundt seg. Vi skjulte bare pakka, så det løse beløpet ble stående igjen under tittelen.
 *
 * Begge er avgrenset til `.wc-block-cart-item__product`. Summen til høyre har nøyaktig samme
 * klasser, men bor i `.wc-block-cart-item__total` - en egen celle - så den er utenfor rekkevidde
 * her og blir stående.
 */
:root .wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-components-product-price,
:root .wc-block-mini-cart__drawer .wc-block-cart-item__product .wc-block-components-product-price__value {
	display: none;
}

/* Summen nederst til høyre, på linje med antallsvelgeren. */
:root .wc-block-mini-cart__drawer .wc-block-cart-item__total {
	align-self: end;
	justify-self: end;
	padding: 0;
	text-align: right;
	white-space: nowrap;
}

/*
 * Antallsvelgeren i skuffen strammes inn.
 *
 * WooCommerce gir den en fast bredde på 107px, satt sammen av `min-width` 30px på hver knapp og
 * 40px på tallfeltet. Det er romslig for en handlekurvside, men i skuffen står den alene på linja
 * og blir stående og flyte - avstanden fra minus til tallet leses som et mellomrom, ikke som én
 * kontroll.
 *
 * Her settes bredden ned og `min-width` på tallfeltet nullstilles, så feltet krymper til innholdet
 * i stedet for å holde sine 40px. Høyden røres ikke.
 *
 * Alle tre speiler WooCommerces egne velgere med `:root` foran; deres `:where()` teller null, så
 * breddeegelen deres veier bare (0,1,0) - men de to andre har en type-velger i seg.
 */
:root .wc-block-mini-cart__drawer .wc-block-components-quantity-selector:where(:has(input:not([type=hidden]))) {
	/* 84px: 26 + 32 + 26. */
	width: 84px;
}

:root .wc-block-mini-cart__drawer .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-width: 0;
}

:root .wc-block-mini-cart__drawer .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 26px;
}

/*
 * Søppelbøtta plasseres i hjørnet framfor å flyttes i DOM-en: WooCommerce
 * legger den inne i produktcella, og der hører den ikke hjemme visuelt.
 * Raden har `padding-inline-end` så den aldri legger seg oppå summen.
 *
 * Velgeren er lang med vilje. WooCommerce styrer denne knappen med
 * `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link`
 * - fire klasser og en type - og setter blant annet `background: transparent`. Den forrige regelen
 * vår var ett hakk lettere og tapte, så maska hadde ingen farge å tegne med og bøtta forsvant helt.
 * Her speiles deres struktur med `:root` i tillegg, så vi ligger trygt over.
 *
 * WooCommerces egen bøtte er en fylt silhuett. Referansen bruker en tegnet kontur, som veier
 * mindre på siden og passer resten av ikonene våre - handlekurven og haken er samme strektykkelse
 * fra samme sett. Vi skjuler deres SVG og tegner vår egen som en maske på selve knappen, så ikonet
 * arver `currentColor` og dermed hover-fargen uten en ekstra regel.
 */
:root .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
	/* 20px: bøttas kantlengde. Brukes både til boksen og til utregningen av toppen under. */
	--ft-bottikon-storrelse: 20px;
	--ft-bottikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");

	position: absolute;
	/*
	 * Midtstilt på tittelens linjeboks, ikke på radens topp. Tittelen starter der radens
	 * `padding-block` slutter og er 1.35rem høy (1rem x line-height 1.35), så halve differansen
	 * mellom linja og ikonet er alt som skal til. Før sto ikonet rett på paddingen og hang et par
	 * piksler under teksten.
	 */
	top: calc(var(--wp--preset--spacing--s) + (1.35rem - var(--ft-bottikon-storrelse)) / 2);
	right: 0;

	display: block;
	width: var(--ft-bottikon-storrelse);
	height: var(--ft-bottikon-storrelse);
	padding: 0;
	border: 0;
	appearance: none;
	/* 0 på skriftstørrelsen: knappen kan inneholde en skjult tekstetikett i tillegg til ikonet. */
	font-size: 0;
	color: var(--wp--preset--color--tekst-svak);
	background: currentColor;
	-webkit-mask: var(--ft-bottikon) center / contain no-repeat;
	mask: var(--ft-bottikon) center / contain no-repeat;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--wp--custom--overgang--rask) ease;
}

/* WooCommerces fylte bøtte ligger inni knappen og ville ellers vist gjennom maska. */
:root .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-item__quantity .wc-block-cart-item__remove-link svg {
	display: none;
}

:root .wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
	color: var(--wp--preset--color--tekst);
}

/* --------------------------------------------------------------------------
   KONTOSIDA - innlogging og opprettelse
   --------------------------------------------------------------------------
   Forbildet paa frutimian.no deler sida i to: bilde til venstre, skjema paa
   en lys blaa flate til hoeyre. Her er det samme, men innenfor bandbredden i
   stedet for helt ut til vinduskanten - kontosida er en vanlig side og gaar
   gjennom `page.html`, der innholdet staar i prosabredde. Vil vi ha den helt
   ut til kanten, trengs en egen mal for sida, og det er en annen jobb.

   `body.woocommerce-account` foran: bredden loeftes bare her, ikke paa alle
   sider som bruker prosabaandet.
   -------------------------------------------------------------------------- */

/*
 * Bredden settes paa baandet, ikke paa skjemaet.
 *
 * Foerste forsoek hevet taket paa `.woocommerce`-diven og gjorde ingenting: det er ikke den som er
 * smal. Prosabaandet setter `content-size` til prosabredden, og kjernen maaler *sine* barn mot den -
 * altsaa `post-content` - saa alt inni arver den bredden uansett hva vi sier lenger inn. Her byttes
 * verdien ut med bandbredden i stedet, paa kontosida alene.
 */
body.woocommerce-account .ft-band.is-style-prosa {
	--wp--style--global--content-size: var(--wp--custom--bandbredde);
}

/*
 * Utlogget gaar sida helt ut til kanten, som forbildet.
 *
 * `:not(.logged-in)` er hele avgrensningen, og den er noedvendig: samme side viser kontopanelet
 * naar man *er* logget inn - ordrer, adresser, tabeller - og det skal staa i bandbredde med luft
 * rundt seg, ikke klistret mot vinduskanten.
 *
 * Bredden tas ved aa sette baandets `content-size` til 100 % og nulle paddingen, ikke med
 * `100vw` + negativ marg: `100vw` teller med rullefeltet og gir vannrett overflyt paa Windows.
 */
body.woocommerce-account:not(.logged-in) .ft-band.is-style-prosa {
	--wp--style--global--content-size: 100%;
	padding-block: 0;
	padding-inline: 0;
}

/*
 * WooCommerce kapper selv kontosida til 1000 px:
 *
 *     .woocommerce-account main .woocommerce { max-width: 1000px }
 *
 * staar i deres `assets/css/woocommerce-blocktheme.css`, og veier (0,2,1). En regel med to klasser
 * taper mot den - det var derfor baandet ble fullbredt uten at kortet fulgte etter. Maalt i
 * nettleseren: baand og post-content paa 2545 px, kortet paa 1000.
 *
 * Taket beholdes naar man er logget inn: da er dette kontopanelet med ordretabeller, og 1000 px er
 * en fornuftig lesebredde for dem.
 */
body.woocommerce-account:not(.logged-in) main .woocommerce {
	max-width: none;
}

body.woocommerce-account:not(.logged-in) .ft-konto-side {
	margin-block: 0;
	border-radius: 0;
}

/*
 * Ingen luft mellom headeren og flata.
 *
 * Baandets egen padding er allerede nullet over, men tre ting til skyver seksjonen ned: det tomme
 * avsnittet redigereren etterlater over kortkoden, WooCommerces meldingsboks naar den staar tom,
 * og kjernens marg paa foerste barn i innholdet. Alle tre nulles her - de kan ikke fjernes i
 * innholdet uten at kunden maa huske det hver gang sida redigeres.
 */
body.woocommerce-account .wp-block-post-content > p:empty,
body.woocommerce-account .woocommerce-notices-wrapper:empty {
	display: none;
}

body.woocommerce-account .wp-block-post-content > *,
body.woocommerce-account main .woocommerce {
	margin-block-start: 0;
}

/* Med full bredde er det plass til aa gi teksten mer luft, og til aa la den staa midt i flata. */
body.woocommerce-account:not(.logged-in) .ft-konto-side__felt {
	align-self: center;
	padding: var(--wp--preset--spacing--xxxl) var(--wp--preset--spacing--xxl);
}

/* ─────────────  KONTOSIDA, INNLOGGET  ───────────────── */

/*
 * Tittel og faner i samme flate, over innholdet.
 *
 * WooCommerce setter kontosida som to spalter - meny til venstre, innhold til hoeyre. Forbildet
 * legger fanene paa en rad under tittelen i stedet, og det passer bedre her: tre faner trenger
 * ingen egen spalte, og innholdet (ordretabeller) faar hele bredden.
 */
:root .woocommerce-account .woocommerce {
	display: block;
}

/*
 * Baandet gaar helt ut til kanten, innholdet holder bandbredden.
 *
 * Samme grep som utlogget: `content-size` til 100 % og paddingen nullet, ikke `100vw` + negativ
 * marg - `100vw` teller med rullefeltet og gir vannrett overflyt paa Windows. WooCommerces eget
 * tak paa 1000 px maa vekk her, ellers stopper flata midt paa sida.
 */
body.woocommerce-account.logged-in .ft-band.is-style-prosa {
	--wp--style--global--content-size: 100%;
	padding-block: 0;
	padding-inline: 0;
}

body.woocommerce-account.logged-in main .woocommerce {
	max-width: none;
}

/*
 * Farga gaar fra kant til kant, teksten staar i bandbredde - saa tittelen lander rett under
 * «Nyheter» i navraden i stedet for aa flyte fritt.
 */
:root .ft-kontotopp {
	/* Ingen marg under: lufta mellom baandet og innholdet er innholdets egen padding. */
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--xl);
	padding-inline: max(
		var(--wp--custom--sideinnrykk),
		calc((100% - var(--wp--custom--bandbredde)) / 2)
	);
	background: var(--wp--preset--color--lys-blaa);
	border-radius: 0;
}

/*
 * Innholdet under baandet foelger samme kolonne som tittelen over, med like mye luft over og
 * under seg. Uten den nederste la adressene seg rett mot fotbaandet.
 */
:root .woocommerce-account .woocommerce-MyAccount-content {
	box-sizing: border-box;
	max-width: calc(var(--wp--custom--bandbredde) + 2 * var(--wp--custom--sideinnrykk));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--xxl);
	padding-inline: var(--wp--custom--sideinnrykk);
}

:root .ft-kontotopp__tittel {
	margin-block: 0 var(--wp--preset--spacing--m);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-m);
	font-weight: 700;
	line-height: 1.05;
}

/* Fanene: piller paa en rad, den man staar i fylt. */
:root .ft-kontofaner {
	float: none;
	width: auto;
}

:root .ft-kontofaner ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs);
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .ft-kontofaner li {
	margin: 0;
	padding: 0;
	border: 0;
}

:root .ft-kontofaner li a {
	display: block;
	padding: 0.6rem 1.25rem;
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--pille);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	text-decoration: none;
}

/* Fana man staar i tar husets gule, samme farge som knappene ellers paa sida. */
:root .ft-kontofaner li.is-active a,
:root .ft-kontofaner li a[aria-current="page"] {
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	text-decoration: none;
}

/* De andre svarer med farge paa teksten, ikke ved aa se ut som den valgte. */
:root .ft-kontofaner li:not(.is-active) a:hover {
	color: var(--wp--custom--gulTekst);
}

/*
 * Knappene under «Handlinger» i ordrelista: Repeter ordre, Vis, Faktura.
 *
 * Stian 06.10.2026: pilleform og skrift som fanene over, men lyseblaa. Stablet under hverandre
 * med lik bredde, saa «Vis» ikke blir en liten knapp ved siden av «Repeter ordre». Bredden er
 * fast (10.5rem) og ikke «like bred som den lengste», fordi den lengste varierer: Faktura-knappen
 * kommer fra PDF-pluginen og finnes ikke paa alle ordrer.
 *
 * Selektoren er lang med vilje: global-styles gir alle `.wp-element-button` knappestilen sin, og
 * den skal bare vike akkurat her.
 */
:root .woocommerce-orders-table :is(.woocommerce-orders-table__cell, .woocommerce-orders-table__header) {
	/* Luft over og under, saa knappene ikke fyller raden fra strek til strek. */
	padding-block: var(--wp--preset--spacing--xxs);
	vertical-align: middle;
}

/* Overskrifta staar over knappene, ikke til venstre for dem. */
:root .woocommerce-orders-table :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-orders-table__header-order-actions) {
	text-align: end;
}

:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 10.5rem;
	max-width: 100%;
	/* Hoeyrestilt i cella, med luft mellom knappene i stabelen. */
	margin: 0 0 var(--wp--preset--spacing--xxxs) auto;
	padding: 0.6rem 1rem;
	background: var(--wp--preset--color--lys-blaa);
	border: 0;
	border-radius: var(--wp--custom--radius--pille);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--wp--custom--overgang--rask) ease, box-shadow var(--wp--custom--overgang--rask) ease;
}

:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:last-child {
	margin-bottom: 0;
}

/*
 * Hover: knappen loeftes og faar en svak skygge. Den globale knappestilen lysner flata med
 * `filter: brightness()`, som paa en lyseblaa flate blir nesten hvit - som om knappen forsvant.
 */
:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover,
:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:focus-visible {
	color: var(--wp--preset--color--tekst);
	filter: none;
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--skygge--pille-heving);
}

@media (prefers-reduced-motion: reduce) {
	:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:hover,
	:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:focus-visible {
		transform: none;
	}
}

:root .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions .button:focus-visible {
	outline: 2px solid var(--wp--preset--color--tekst);
	outline-offset: 2px;
}

/* Innholdet under fanene, i full bredde siden menyen ikke lenger tar en spalte. */
:root .woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/*
 * WooCommerce tegner en ramme med padding rundt innloggingsskjemaet (`form.login`). Flata vaar er
 * allerede en egen boks; en ramme inni den blir en boks i en boks.
 *
 * 24rem: forbildets rader maaler 384 px inne i en innholdsboks paa 432. Skjemaet ligger altsaa
 * trukket inn en tanke til, og tittelen over staar bredere enn feltene.
 */
:root .woocommerce .ft-konto-skjema {
	max-width: 24rem;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/*
 * Stjerna bak etiketten var skjult overalt, og det var riktig den gangen: da skjemaet bare hadde
 * e-post og passord var alt obligatorisk, og en stjerne ved hvert eneste felt skiller ingenting
 * fra noe annet - den roeper bare at skjemaet er WooCommerce sitt.
 *
 * Paa innlogging staar den derfor skjult fortsatt. Registreringsskjemaet har derimot faatt felter
 * fra B2B-plugin-en - firmanavn, organisasjonsnummer og det som maatte komme - og de er ikke
 * noedvendigvis alle paakrevd. Der baerer stjerna informasjon igjen, og skal vises.
 */
:root .ft-konto-skjema .required {
	display: none;
}

:root .ft-konto-skjema.register .required {
	display: inline;
	color: var(--wp--preset--color--roed);
	text-decoration: none;
}

:root .ft-konto-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	margin-block: var(--wp--preset--spacing--l);
	/* Ingen bakgrunn: flata skal staa rett paa sidebakgrunnen. `overflow: hidden` blir staaende
	   fordi bildet fortsatt skal klippes av radiusen. */
	border-radius: var(--wp--custom--radius--kant);
	overflow: hidden;
}

/*
 * Uten bilde staar teksten til venstre og skjemaet til hoeyre, med en haarstrek imellom.
 *
 * Foerste forsoek var én smal midtstilt spalte. Den var ikke gal, men den lot resten av flata
 * staa tom: bildet baar hoeyre halvdel, og da det gikk ut var det ingenting som tok over. Teksten
 * gjoer den jobben bedre enn tomrom, og skillelinja gir skjemaet en kant aa staa mot.
 */
:root .ft-konto-side--uten-bilde {
	grid-template-columns: minmax(0, 64rem);
	justify-content: center;
}

:root .ft-konto-side--uten-bilde .ft-konto-side__felt {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	max-width: none;
}

:root .ft-konto-side--uten-bilde .ft-konto-side__intro {
	padding-inline-end: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

/* Samme haarstrek som resten av temaet bruker, ikke en ny verdi. */
:root .ft-konto-side--uten-bilde .ft-konto-side__skjema {
	border-inline-start: 1px solid rgba(26, 26, 26, 0.15);
	padding-inline-start: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

/*
 * Smalt: spaltene legger seg over hverandre, og den loddrette streken blir vannrett. Den er det
 * samme skillet, bare snudd - skjemaet skal ha en kant over seg naar det ikke kan ha en ved siden.
 */
@media (max-width: 48em) {
	:root .ft-konto-side--uten-bilde .ft-konto-side__felt {
		grid-template-columns: minmax(0, 1fr);
	}

	:root .ft-konto-side--uten-bilde .ft-konto-side__intro {
		padding-inline-end: 0;
		padding-block-end: var(--wp--preset--spacing--m);
	}

	:root .ft-konto-side--uten-bilde .ft-konto-side__skjema {
		border-inline-start: 0;
		border-block-start: 1px solid rgba(26, 26, 26, 0.15);
		padding-inline-start: 0;
		padding-block-start: var(--wp--preset--spacing--m);
	}
}

:root .ft-konto-side__bilde {
	min-height: 24rem;
}

:root .ft-konto-side__bilde img {
	display: block;
	width: 100%;
	height: 100%;
	/* `width`/`height`-attributtene staar for aa unngaa hopp ved lasting - hoeyden maa nulles her. */
	min-height: 100%;
	/* `wp_get_attachment_image` skriver `width` og `height` som attributter - uten dette fyller
	   bildet ikke spalten. */
	object-fit: cover;
}

/*
 * 34rem og ikke 26: taket gjelder boksen, og paddingen ligger *inni* den. Da luftet ble oekt paa
 * full bredde, krympet feltene tilsvarende - de maalte 285px mot forbildets bredere felt. Nu blir
 * det igjen ca. 416px til selve feltene naar paddingen er trukket fra.
 */
:root .ft-konto-side__felt {
	/*
	 * Maalt paa forbildets egen boks (`div.fts-login` i DevTools): 576 px bred, 72 px padding hele
	 * veien rundt, 432 px innhold. Ikke gjettet fra et skjermbilde - det var slik jeg foerst kom
	 * til 384 px, som var tekstbredden og ikke boksen.
	 *
	 * Paddingen er fluid saa den krymper paa smale skjermer, men taket er forbildets 72 px.
	 */
	max-width: 36rem;
	padding: clamp(2rem, 1rem + 5vw, 4.5rem);
}

/* 80px og 20px under, maalt paa `h1.fts-account__title` paa den nye sida. `display-l` er 5rem. */
:root .ft-konto-side__tittel {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-l);
	font-weight: 700;
	line-height: 1.05;
}

/* 17,6px paa forbildet = 1,1rem, som er `brodtekst-l`. */
:root .ft-konto-side__ingress {
	margin-block: 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst-l);
}

/*
 * Feltene: etiketten over, ruta under, luft mellom radene.
 *
 * `padding: 0` er ikke pynt. WooCommerces `.form-row` har egen padding, og raden maalte 104,8 px
 * mot 82,8 for innholdet - 22 px vi ikke eide. Den paddingen la seg over hver eneste etikett og
 * var hele grunnen til at radene sto for langt fra hverandre mot forbildet.
 */
:root .woocommerce .ft-konto-skjema .ft-felt,
:root .woocommerce .ft-konto-skjema .afreg_extra_fields .form-row {
	display: flex;
	flex-direction: column;
	/* 0,6rem gir rad = 18,2 + 9,6 + 46,8 = 74,6 px. Forbildets rad maaler 75. */
	gap: 0.6rem;
	/* 16 px, maalt paa forbildets egen rad i DevTools. Vi hadde 20. */
	margin-block: 0 var(--wp--preset--spacing--xs);
	padding: 0;
}

/*
 * Raden skal vaere summen av barna sine og ingenting mer. Noe ga et av dem ~12,8 px marg som
 * hverken `padding: 0` paa raden eller `margin: 0` paa etiketten fanget - raden maalte 94 px der
 * barna til sammen var 81. Her nulles margen paa alt som ligger i raden, saa hoeyden foelger av
 * etikett + gap + felt, som hos forbildet.
 */
:root .woocommerce .ft-konto-skjema .ft-felt > *,
:root .woocommerce .ft-konto-skjema .afreg_extra_fields .form-row > * {
	margin: 0;
}

/*
 * WooCommerce gir etiketten sin egen `margin-bottom`, og den la seg *paa toppen av* raden sin
 * `gap` - derfor for mye luft mellom etiketten og feltet. Raden eier avstanden her.
 */
:root .ft-konto-skjema .ft-felt label,
:root .ft-konto-skjema .afreg_extra_fields .form-row label {
	margin: 0;
}

/*
 * Hjelpeteksten under et felt fra B2B-tillegget - «9 siffer», forklaringa til organisasjonsnummeret.
 *
 * Tillegget skriver den som et `span` inne i raden, og uten `display: block` legger den seg paa
 * linje med feltet naar det er plass til det. Den skal dessuten lese som hjelp og ikke som innhold:
 * samme stoerrelse som etiketten, men svak farge og vanlig vekt, saa den ikke konkurrerer med
 * etiketten til neste felt.
 */
:root .woocommerce .ft-konto-skjema .afreg_extra_fields .fmessage {
	display: block;
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 400;
	line-height: 1.4;
}

/*
 * B2B-tillegget spikrer hoeyden paa feltene sine:
 *
 *     .afreg_extra_fields .input-text,.input-select{
 *         min-height: 40px !important; max-height: 40px !important; height: 40px !important; }
 *
 * Maalt ga det 40 px mot 46,8 for vaare egne felter - samme skrift, samme padding, men boksen var
 * klemt, saa innholdet satt igjen med 9,2 px der vaare har 16. Tre `!important` betyr at vi maa
 * svare med `!important` selv; her er det ikke pynt, men eneste vei forbi.
 *
 * `auto` og ikke et tall: da foelger hoeyden av skrift og padding, akkurat som paa E-post-feltet,
 * og endrer vi den ene siden senere foelger den andre etter av seg selv.
 *
 * Gjelder baade registreringa (`.ft-konto-skjema`) og Kontoopplysninger (`.ft-kontoskjema`). Paa
 * den siste sto firmafeltene i hoeyre spalte 40 px hoeye ved siden av navn- og e-postfeltene i
 * venstre - funnet 06.10.2026.
 */
:root .woocommerce :is(.ft-konto-skjema, .ft-kontoskjema) .afreg_extra_fields .input-text {
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
}

/*
 * Merk `.woocommerce` i selektoren. WooCommerce har `.form-row label { line-height: 2 }`, og en
 * etikett paa 14 px ble derfor 28 px hoey. Uten dette leddet taper regelen, og halve slarken
 * legger seg over teksten og ser ut som luft vi ikke har bedt om.
 */
:root .woocommerce .ft-konto-skjema label {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1.3;
}

:root .ft-konto-skjema input[type="text"],
:root .ft-konto-skjema input[type="email"],
:root .ft-konto-skjema input[type="password"] {
	width: 100%;
	padding: 0.7em 0.9em;
	background: var(--wp--preset--color--hvit);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: var(--wp--custom--radius--kant);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
}

:root .ft-konto-skjema input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

:root .ft-konto-skjema__husk {
	margin-block: 0 var(--wp--preset--spacing--s);
}

:root .ft-konto-skjema__husk label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
	line-height: 1.3;
}

:root .ft-konto-skjema__husk input[type="checkbox"] {
	margin: 0;
}

/* Knappen tar plassen teksten trenger, ikke hele spalten - som i forbildet. */
:root .ft-konto-skjema__knapp {
	margin-block: 0 var(--wp--preset--spacing--s);
}

/*
 * Knappen er bredere enn teksten trenger. Maalt som forhold, ikke piksler - vinduene er ulike:
 * paa forbildet er knappen ca. 0,65 av feltbredden, hos oss var den 0,41. 16rem mot felter paa
 * 26rem lander paa omtrent det samme forholdet.
 */
:root .ft-konto-skjema__knapp button,
:root .ft-konto-side__handling .button {
	width: auto;
	min-width: 15rem;
	/* 52 px hoey som forbildet: 1,2rem over og under pluss 14 px linje. */
	padding-block: 1.2rem;
	padding-inline: var(--wp--preset--spacing--l);
}

/*
 * «Opprett konto» uten skjema: e-postknappen staar der innloggingsknappen staar, og faar samme
 * bredde, saa de to visningene har samme tyngdepunkt naar man bytter mellom dem.
 */
:root .ft-konto-side__handling {
	margin-block: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s);
}

:root .ft-konto-side__handling .button {
	display: inline-block;
	min-width: 16rem;
	padding-inline: var(--wp--preset--spacing--l);
	text-align: center;
	text-decoration: none;
}

:root .ft-konto-side__hjelp {
	margin-block: 0 var(--wp--preset--spacing--m);
	max-width: 26rem;
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

/*
 * Luft over «Glemt passordet?»: forbildet har 30 px ned fra knappen, vi hadde 15. Verdien maa
 * staa i samme `margin-block` som bunnen - en egen `margin-block-start` foer denne regelen ville
 * blitt nullet av forkortelsen her.
 */
:root .ft-konto-side__glemt {
	margin-block: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xxxs);
}

:root .ft-konto-side__bytte {
	margin-block: 0 var(--wp--preset--spacing--xxxs);
}

:root .ft-konto-side__glemt,
:root .ft-konto-side__bytte {
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

:root .ft-konto-side__bytte {
	color: var(--wp--preset--color--tekst-svak);
}

:root .ft-konto-side__glemt a,
:root .ft-konto-side__bytte a {
	color: var(--wp--preset--color--tekst);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

:root .ft-konto-side__glemt a:hover,
:root .ft-konto-side__bytte a:hover {
	color: var(--wp--preset--color--gul);
}

/* Smal visning: bildet legger seg over skjemaet og blir en stripe. */
@media (max-width: 48em) {
	:root .ft-konto-side {
		grid-template-columns: minmax(0, 1fr);
	}

	:root .ft-konto-side__bilde {
		min-height: 12rem;
	}

	:root .ft-konto-side__felt {
		max-width: none;
		padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--m);
	}
}

/* --------------------------------------------------------------------------
   KASSEN
   --------------------------------------------------------------------------
   To spalter: skjemaet til venstre, ordren til hoeyre med en haarstrek mellom.

   Ingen maloverstyring her, bare CSS. WooCommerce sin klassiske kasse deler seg
   allerede i `#customer_details` og `#order_review`, og betaling og
   «Bekreft ordre» ligger *inne i* ordrespalten - altsaa akkurat den formen vi
   vil ha. Det er ogsaa grunnen til aa la malen vaere: Checkout Field Editor Pro
   henger paa denne markupen, og feltene den legger til skal fortsette aa virke
   uten at vi vet hva de heter.
   -------------------------------------------------------------------------- */

:root .woocommerce-checkout .woocommerce {
	max-width: var(--wp--custom--bandbredde);
	margin-inline: auto;
}

@media (min-width: 62em) {
	:root form.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		grid-template-areas:
			"skjema ordretittel"
			"skjema ordre";
		align-items: start;
		column-gap: var(--wp--preset--spacing--xxl);
	}

	:root form.woocommerce-checkout #customer_details {
		grid-area: skjema;
	}

	:root form.woocommerce-checkout #order_review_heading {
		grid-area: ordretittel;
		margin-block-start: 0;
	}

	:root form.woocommerce-checkout #order_review {
		grid-area: ordre;
		/*
		 * Streken er spaltas venstrekant, ikke et eget element: en `border` foelger hoeyden av
		 * seg selv, og en tom div ville maattet faa hoeyden sin fra noe.
		 */
		padding-inline-start: var(--wp--preset--spacing--xxl);
		border-inline-start: var(--wp--custom--linje);
		/*
		 * Skjemaet er langt, ordren er kort. Uten dette staar summen og knappen oeverst mens
		 * kunden fyller ut nederst. `top` maa klarere den faste headeren.
		 */
		position: sticky;
		top: var(--wp--preset--spacing--l);
	}
}

/*
 * Skjemaspalta er *en* spalte.
 *
 * WooCommerce deler `#customer_details` i `.col-1` og `.col-2` og setter dem ved siden av
 * hverandre. Inne i vaar venstre spalte ble det tre spalter paa sida, og adressefeltene fikk
 * halvparten av halvparten. Tilleggsinformasjon er dessuten det siste man fyller ut - den hoerer
 * under skjemaet, ikke ved siden av det.
 */
:root form.woocommerce-checkout #customer_details {
	display: block;
}

:root form.woocommerce-checkout #customer_details :is(.col-1, .col-2) {
	float: none;
	width: 100%;
	max-width: none;
}

:root form.woocommerce-checkout #customer_details .col-2 {
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* Feltene er de samme som paa innloggingssida - kassen skal ikke vaere en annen butikk. */
:root .woocommerce-checkout .woocommerce-billing-fields label,
:root .woocommerce-checkout .woocommerce-shipping-fields label,
:root .woocommerce-checkout .woocommerce-additional-fields label {
	display: block;
	margin-block-end: 0.5rem;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
}

:root .woocommerce-checkout .form-row {
	margin-block: 0 var(--wp--preset--spacing--s);
	padding: 0;
}

:root .woocommerce-checkout .input-text,
:root .woocommerce-checkout select,
:root .woocommerce-checkout textarea {
	width: 100%;
	padding: 0.7em 0.9em;
	background: var(--wp--preset--color--hvit);
	border: 1px solid rgba(26, 26, 26, 0.15);
	border-radius: var(--wp--custom--radius--kant);
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
}

:root .woocommerce-checkout :is(.input-text, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--gul);
	outline-offset: 2px;
}

/* Stjerna sier ingenting naar naesten alt er obligatorisk. */
:root .woocommerce-checkout .required {
	display: none;
}

:root .woocommerce-checkout h3,
:root .woocommerce-checkout #order_review_heading {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
	line-height: 1.1;
}

/* Ordren er en kvittering: haarstreker mellom linjene, ingen ramme rundt. */
:root .woocommerce-checkout table.shop_table {
	width: 100%;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
}

:root .woocommerce-checkout table.shop_table :is(th, td) {
	padding: var(--wp--preset--spacing--xxs) 0;
	background: transparent;
	border: 0;
	border-block-end: var(--wp--custom--linje);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	vertical-align: top;
}

:root .woocommerce-checkout table.shop_table td:last-child,
:root .woocommerce-checkout table.shop_table th:last-child {
	text-align: end;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

:root .woocommerce-checkout table.shop_table tfoot .order-total :is(th, td) {
	padding-block: var(--wp--preset--spacing--xs);
	border-block-end: 0;
	font-size: var(--wp--preset--font-size--brodtekst-l);
	font-weight: 600;
}

/*
 * Varelinja: bilde, navn og antall paa en linje.
 *
 * Uten bildet sto navnet i en smal kolonne og brakk over fem linjer («Runde bivoksark (15 + 20
 * cm) - 10 pk»). Cella er en flexrad naa, saa navnet faar bredden det trenger og tallet staar
 * til hoeyre der det hoerer hjemme.
 */
:root .woocommerce-checkout .shop_table .product-name {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xxs);
	padding-block: var(--wp--preset--spacing--xs);
}

:root .woocommerce-checkout .ft-kasse__bilde {
	flex: 0 0 auto;
	width: 3rem;
	height: 3rem;
	/* `get_image()` skriver width/height som attributter; uten dette blir bildet staaende hoeyt. */
	object-fit: cover;
	border-radius: var(--wp--custom--radius--kant);
}

:root .woocommerce-checkout .ft-kasse__navn {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 500;
	line-height: 1.3;
}

/*
 * Antallet er sin egen lille kolonne inne i produktcella: fast bredde og hoeyrestilt, saa «× 1» og
 * «× 5» staar under hverandre uansett hvor lange navnene er. Navnet tar resten av plassen.
 */
:root .woocommerce-checkout .shop_table .product-quantity {
	flex: 0 0 auto;
	min-width: 3rem;
	color: var(--wp--preset--color--tekst-svak);
	font-weight: 600;
	text-align: end;
	white-space: nowrap;
}

/*
 * Fraktraden legges ut som en blokk, ikke som to celler.
 *
 * Den er grunnen til at varenavnene brakk over fem linjer: «Hente i vaare lokaler i Rakkestad
 * mandag - fredag 07:30 -15:00» staar i *andre* kolonne, og en tabell med automatisk
 * kolonnebredde gir den plassen den trenger - paa bekostning av foerste kolonne, der produktene
 * staar. Naar raden blir en blokk, teller den ikke lenger med i kolonnebreddene, og etiketten
 * faar staa over valgene i full bredde.
 */
:root .woocommerce-checkout .shop_table tr.shipping {
	display: block;
	padding-block: var(--wp--preset--spacing--xxs);
	border-block-end: var(--wp--custom--linje);
}

:root .woocommerce-checkout .shop_table tr.shipping :is(th, td) {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: start;
}

:root .woocommerce-checkout .shop_table tr.shipping th {
	margin-block-end: var(--wp--preset--spacing--xxs);
}

/* Fraktvalgene er valg, ikke en punktliste: hele raden er klikkbar og markerer seg. */
:root .woocommerce-checkout #shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .woocommerce-checkout #shipping_method li {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	margin: 0 0 0.35rem;
	padding: var(--wp--preset--spacing--xxs);
	border-radius: var(--wp--custom--radius--kant);
}

:root .woocommerce-checkout #shipping_method li:hover,
:root .woocommerce-checkout #shipping_method li:has(input:checked) {
	background: var(--wp--preset--color--lys-blaa);
}

:root .woocommerce-checkout #shipping_method label {
	margin: 0;
	font-weight: 500;
}

/* Betalingsboksen er hvit med haarstrek, ikke WooCommerce sin graa flate. */
:root .woocommerce-checkout #payment,
:root .woocommerce-checkout #payment .payment_box {
	background: var(--wp--preset--color--hvit);
	border-radius: var(--wp--custom--radius--kant);
}

:root .woocommerce-checkout #payment {
	padding: 0;
	border: 0;
}

:root .woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	border: 0;
}

:root .woocommerce-checkout #payment .payment_box {
	margin: var(--wp--preset--spacing--xxs) 0 0;
	padding: var(--wp--preset--spacing--s);
	background: var(--wp--preset--color--lys-blaa);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

:root .woocommerce-checkout #payment .payment_box::before {
	display: none;
}

:root .woocommerce-checkout #place_order {
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--s);
	padding-block: 0.95em;
	font-size: var(--wp--preset--font-size--brodtekst);
}

/*
 * Smal visning: en spalte, og ordren under skjemaet. Streken hoerer til to spalter og gaar med
 * dem; stripa over ordren skiller i stedet.
 */
@media (max-width: 61.99em) {
	:root .woocommerce-checkout #order_review_heading {
		margin-block-start: var(--wp--preset--spacing--xl);
		padding-block-start: var(--wp--preset--spacing--xl);
		border-block-start: var(--wp--custom--linje);
	}
}

/*
 * Smal skjerm: fortsatt en tabell.
 *
 * Et forsoek paa aa gjoere radene om til flexlinjer ble forkastet: det tok bort hodet
 * («Produkt»/«Delsum») og den gjennomgaaende streken, og da hadde antallet ingen kolonne aa staa
 * i flukt med. Tabellen faar vaere en tabell - det som maatte fikses var bare at prisen ikke kunne
 * krympe.
 */
@media (max-width: 48em) {
	/*
	 * `nowrap` paa beloepet er riktig paa bred skjerm, der «10 080,00 kr» ikke skal brekke midt i
	 * tallet. Paa en telefon er det nettopp det leddet som gjoer tabellen bredere enn skjermen, og
	 * da forsvinner kolonna til hoeyre ut av bildet. Her faar beloepet brekke.
	 */
	:root .woocommerce-checkout table.shop_table :is(th, td):last-child {
		white-space: normal;
	}

	:root .woocommerce-checkout .ft-kasse__bilde {
		width: 2.5rem;
		height: 2.5rem;
	}

	:root .woocommerce-checkout .ft-kasse__navn {
		overflow-wrap: anywhere;
	}
}




/* ─────────────  KASSEHODET  ───────────────── */

/*
 * Kassa har sitt eget hode: logo og en vei tilbake til kurven, ingenting annet.
 *
 * Menyen, soekefeltet og handlekurv-ikonet er hver sin vei ut av en ordre som ikke er fullfoert.
 * Toppstripa staar igjen fordi den svarer paa det man lurer paa nettopp her - fri frakt over
 * 9 000, 14 dagers betalingsfrist, henting i Rakkestad - og fordi den ikke er en lenke bort.
 *
 * Selve fjerninga ligger i `parts/header-kasse.html`, ikke i `display: none` her: en meny som er
 * tegnet og skjult er fortsatt i dokumentet, og en skjermleser leser den.
 */
/*
 * Samme form som paa mobil, i alle bredder: pil ytterst til venstre, logoen midt paa, ingenting
 * til hoeyre. Symmetrien er halve poenget - et hode med bare to ting i seg skal se tomt ut med
 * vilje, ikke se ut som en meny der resten ikke rakk aa laste.
 */
:root .ft-header__bar--kasse {
	/*
	 * Baandets egen `padding-block` er 16px over og 0 under - riktig i det vanlige hodet, der
	 * navraden under leverer den nedre halvparten. Her finnes ingen navrad, saa summen ble 40 over
	 * og 24 under. Raden eier lufta i dette hodet; baandet legger ingenting til.
	 */
	padding-block: 0;
	border-block-end: var(--wp--custom--linje);
}

/*
 * Tre spalter og ikke absolutt plassering.
 *
 * Foerst sto logoen `position: absolute; left: 50%`, som det vanlige hodet gjoer paa mobil. Da
 * bidrar den ikke til hoeyden, saa raden maatte faa den av en `min-height` - og den gjetningen var
 * kortere enn logoen faktisk er. Logoen rant ut i paddingen og la seg mot haarstreken uansett hvor
 * mye luft jeg la paa.
 *
 * Med `1fr auto 1fr` staar logoen midt paa fordi de to sidespaltene er like brede, den er med i
 * flyten, og hoeyden foelger av innholdet. Da betyr `padding-block` det den ser ut som.
 */
:root .ft-header__bar--kasse .ft-header__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 0;
	padding-block: var(--wp--preset--spacing--m);
}

/* Alt annet enn logoen hoerer hjemme i foerste spalte, uansett hva kortkoden pakker det i. */
:root .ft-header__bar--kasse .ft-header__row > * {
	grid-row: 1;
	grid-column: 1;
	justify-self: start;
	margin: 0;
}

:root .ft-header__bar--kasse .ft-header__row > .ft-header__logo {
	grid-column: 2;
	justify-self: center;
	min-height: 0;
}

/*
 * Bare pila, ogsaa paa bred skjerm.
 *
 * Ordene ville stukket inn mot logoen og brutt midtstillinga, og en pil ytterst til venstre er
 * den samme handlinga folk kjenner fra enhver annen kasse. Teksten blir staaende for skjermlesere
 * - den er skjult, ikke fjernet - og `title` gir den tilbake som musepeker-tekst.
 */
:root .ft-kassetilbake span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:root .ft-kassetilbake__pil {
	width: 1.5em;
	height: 1.5em;
}

/* Lenka skal se ut som en vei tilbake, ikke som en knapp som konkurrerer med «Fullfoer ordre». */
:root .ft-kassetilbake {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	text-decoration: none;
}

:root .ft-kassetilbake:hover {
	color: var(--wp--custom--gulTekst);
}

:root .ft-kassetilbake__pil {
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Smal visning: pila alene, og logoen beholder midtstillinga si.
 *
 * Under 48em er logoen `position: absolute; left: 50%` - laget for det vanlige hodet, der en
 * hamburger staar til venstre og to knapper til hoeyre. Her er det bare tilbakelenka, saa logoen
 * la seg rett oppaa teksten. Teksten viker i stedet for logoen: en pil ytterst til venstre er den
 * samme handlinga alle kjenner fra kassa ellers, og skjermleseren faar ordene uansett.
 *
 * `@container` og ikke `@media`, med samme 48em som resten av headeren: baandet er beholderen, saa
 * hodet brekker paa sin egen bredde og ikke paa vinduets.
 */


/* ─────────────  HANDLEKURVEN  ───────────────── */

/*
 * Samme form som kassa: varene til venstre, summen i en fast spalte til hoeyre.
 *
 * WooCommerce flyter `.cart-collaterals` til hoeyre paa 48 % bredde og lar tabellen ta resten.
 * Flyt gir ingen felles overkant og ingen `sticky`, og paa vaar bandbredde ble resultatet en
 * tabell midt paa sida med summen under seg. Grid i stedet, med samme spaltedeling og samme
 * strek som kassa - da er kurv og kasse to bilder av samme side.
 */
:root .woocommerce-cart .woocommerce {
	max-width: var(--wp--custom--bandbredde);
	margin-inline: auto;
}

@media (min-width: 62em) {
	:root .woocommerce-cart .woocommerce {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		grid-template-areas:
			"meldinger meldinger"
			"varer     frakt"
			"varer     forhand"
			"varer     sum";
		align-items: start;
		column-gap: var(--wp--preset--spacing--xxl);
	}

	/*
	 * Meldinger og fraktmaalet hoerer til hele sida, ikke til varelista. Uten dette havner de i
	 * foerste spalte og dytter tabellen ned under summen.
	 */
	:root .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
		grid-area: meldinger;
	}

	/*
	 * Fraktmaalet staar oeverst i summespalta, rett over «Totalt i handlekurven».
	 *
	 * Der hoerer det hjemme: det handler om summen, ikke om varelista. Streken og innrykket
	 * gjentas fra `.cart-collaterals` saa spalta leser som én flate - uten dem ville stripa hengt
	 * utenfor linja med summen under.
	 *
	 * `max-width` maa vekk: `.ft-fraktmaal--side` har 34rem for aa ikke bli bredere enn en linje
	 * tekst er verdt aa lese, og spalta er allerede smalere enn det.
	 */
	:root .woocommerce-cart .woocommerce > .ft-fraktmaal {
		grid-area: frakt;
		max-width: none;
		margin-block-end: var(--wp--preset--spacing--m);
		padding-inline-start: var(--wp--preset--spacing--xxl);
		border-inline-start: var(--wp--custom--linje);
	}

	/*
	 * Forhaandsbestillings-boksen (inc/forhandsbestilling.php) i summespalta, under fraktmaalet.
	 * Uten eget omraade ble den plassert i en ny rad nederst, under alt annet. Finnes ikke
	 * boksen, blir raden null hoey.
	 */
	:root .woocommerce-cart .woocommerce > .ft-forhand {
		grid-area: forhand;
		margin-block: 0 var(--wp--preset--spacing--m);
		margin-inline-start: var(--wp--preset--spacing--xxl);
	}

	:root .woocommerce-cart form.woocommerce-cart-form {
		grid-area: varer;
		margin-block: 0;
	}

	:root .woocommerce-cart .cart-collaterals {
		grid-area: sum;
		/* WooCommerce flyter denne paa 48 %. I grid eier spalta bredden. */
		float: none;
		width: auto;
		padding-inline-start: var(--wp--preset--spacing--xxl);
		border-inline-start: var(--wp--custom--linje);
		/* Lista er lang, summen er kort - den skal staa naar man endrer antall lenger ned. */
		position: sticky;
		top: var(--wp--preset--spacing--l);
	}

	:root .woocommerce-cart .cart_totals {
		float: none;
		width: auto;
	}
}

/* Tabellen: samme ramme og luft som ordretabellen i kassa. */
:root .woocommerce-cart table.shop_table {
	width: 100%;
	margin-block: 0;
	border: var(--wp--custom--linje);
	border-radius: var(--wp--custom--radius--kant);
	border-collapse: collapse;
	overflow: hidden;
}

:root .woocommerce-cart table.shop_table :is(th, td) {
	padding: var(--wp--preset--spacing--xs);
	border: 0;
	border-block-end: var(--wp--custom--linje);
	vertical-align: middle;
}

:root .woocommerce-cart table.shop_table thead th {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	text-align: start;
}

:root .woocommerce-cart table.shop_table tbody tr:last-child :is(th, td) {
	border-block-end: 0;
}

/* Tall til hoeyre, tekst til venstre - en kolonne med priser leses nedover. */
:root .woocommerce-cart table.shop_table :is(th, td).product-price,
:root .woocommerce-cart table.shop_table :is(th, td).product-subtotal {
	text-align: end;
	white-space: nowrap;
}

/* Bildet: fast rute, saa radene faar lik hoeyde uansett motiv. */
:root .woocommerce-cart td.product-thumbnail img {
	display: block;
	width: 4rem;
	height: 4rem;
	border-radius: var(--wp--custom--radius--kant);
	object-fit: cover;
}

:root .woocommerce-cart td.product-name a {
	color: var(--wp--preset--color--tekst);
	font-weight: 600;
	text-decoration: none;
}

:root .woocommerce-cart td.product-name a:hover {
	color: var(--wp--custom--gulTekst);
}

/*
 * Kryssene: WooCommerce tegner dem roede. Roedt er farlig-farge og hoerer til noe som ikke kan
 * angres - her fjerner man en vare fra en kurv. Grått som blir roedt naar man peker paa det sier
 * det samme uten aa rope det over hele lista.
 */
:root .woocommerce-cart td.product-remove a.remove {
	color: var(--wp--preset--color--tekst-svak) !important;
	font-size: 1.25rem;
	line-height: 1;
}

:root .woocommerce-cart td.product-remove a.remove:hover {
	background: transparent;
	color: var(--wp--preset--color--roed) !important;
}

:root .woocommerce-cart td.product-quantity .quantity input {
	width: 4rem;
	padding: 0.4rem;
	text-align: center;
}

/*
 * «Oppdater handlekurv» staar avslaatt til man endrer et antall - det er WooCommerces egen
 * oppfoersel og den er riktig. Men den skal se avslaatt ut med vilje, ikke se oedelagt ut: en
 * sekundaerknapp med ramme, ikke en blek utgave av hovedknappen.
 */
:root .woocommerce-cart td.actions {
	text-align: end;
}

:root .woocommerce-cart td.actions button[name="update_cart"] {
	background: transparent;
	border: var(--wp--custom--linje);
	color: var(--wp--preset--color--tekst);
}

:root .woocommerce-cart td.actions button[name="update_cart"]:disabled {
	opacity: 0.45;
	cursor: default;
}

:root .woocommerce-cart td.actions button[name="update_cart"]:not(:disabled):hover {
	background: var(--wp--preset--color--tekst);
	color: var(--wp--preset--color--hvit);
}

/* Summen: tittelen over tabellen, ikke inni den. */
:root .woocommerce-cart .cart_totals h2 {
	margin-block: 0 var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
}

:root .woocommerce-cart .cart_totals table.shop_table :is(th, td) {
	padding-inline: 0;
}

:root .woocommerce-cart .cart_totals .order-total :is(th, td) {
	font-weight: 700;
}

/* Til kassa: hovedhandlinga, full bredde i spalta si. */
:root .woocommerce-cart .wc-proceed-to-checkout {
	margin-block-start: var(--wp--preset--spacing--m);
	padding: 0;
}

:root .woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
}

/* ─────────────  ORDREBEKREFTELSEN  ───────────────── */

/*
 * «Ordre mottatt» tegnes ikke av `thankyou.php` lenger. WooCommerce 10 har en blokkbasert
 * kvitteringsside - `templates/templates/order-confirmation.html` og blokkene under
 * `OrderConfirmation/` - saa klassene heter `wc-block-order-confirmation-*`, og `.woocommerce-order`
 * finnes ikke i det hele tatt. (Foerste forsoek her traff den klassen, og traff dermed ingenting.)
 *
 * `templates/order-confirmation.html` i temaet fortrenger pluginets mal, paa samme maate som for
 * kurv og kasse, saa sida faar vaar header, vaart band og vaar bredde.
 */
:root .ft-ordrekvittering {
	max-width: none;
}

:root .ft-ordrekvittering > * {
	max-width: 48rem;
	margin-inline: 0;
}

:root .wc-block-order-confirmation-status {
	margin-block: 0 var(--wp--preset--spacing--l);
	font-size: var(--wp--preset--font-size--brodtekst-l);
}

/*
 * Kvitteringslinja: etiketten over verdien, ikke ved siden av. Da staar verdiene i flukt nedover,
 * og raden taaler at «stian@screenpartner.no» er fire ganger saa lang som «Faktura».
 */
:root .wc-block-order-confirmation-summary {
	margin-block: 0 var(--wp--preset--spacing--xl);
	padding: var(--wp--preset--spacing--l);
	background: var(--wp--preset--color--lys-blaa);
	border: 0;
	border-radius: var(--wp--custom--radius--kant);
}

:root .wc-block-order-confirmation-summary-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: var(--wp--preset--spacing--m);
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .wc-block-order-confirmation-summary-list-item {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	border: 0;
}

:root .wc-block-order-confirmation-summary-list-item__key {
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
}

:root .wc-block-order-confirmation-summary-list-item__value {
	color: var(--wp--preset--color--tekst);
	overflow-wrap: anywhere;
}

/* Overskriftene over tabellen og adressene: samme stoerrelse, samme luft. */
:root .ft-ordrekvittering h2,
:root .ft-ordrekvittering h3 {
	margin-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--s);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-s);
	font-weight: 700;
}

/* Tabellen: samme ramme og luft som kurven og kassa, saa de tre leser likt. */
:root .wc-block-order-confirmation-totals table {
	width: 100%;
	margin-block: 0;
	border: var(--wp--custom--linje);
	border-radius: var(--wp--custom--radius--kant);
	border-collapse: collapse;
	overflow: hidden;
}

:root .wc-block-order-confirmation-totals table :is(th, td) {
	padding: var(--wp--preset--spacing--xs);
	border: 0;
	border-block-end: var(--wp--custom--linje);
	vertical-align: top;
}

:root .wc-block-order-confirmation-totals table thead th {
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	text-align: start;
}

:root .wc-block-order-confirmation-totals table :is(th, td):last-child {
	text-align: end;
	white-space: nowrap;
}

:root .wc-block-order-confirmation-totals table tfoot tr:last-child :is(th, td) {
	border-block-end: 0;
	font-weight: 700;
}

/* Adressene: samme kort som resten, og adresser skal ikke staa i kursiv. */
:root .wc-block-order-confirmation-billing-address,
:root .wc-block-order-confirmation-shipping-address {
	padding: var(--wp--preset--spacing--m);
	border: var(--wp--custom--linje);
	border-radius: var(--wp--custom--radius--kant);
	font-style: normal;
	line-height: 1.6;
}

/* Kundens egen beskjed staar som tekst, ikke som enda en boks. */
:root .wc-block-order-confirmation-order-note {
	margin-block: var(--wp--preset--spacing--m) 0;
}

/* ==========================================================================
   VARSLER

   Fem bokser sier det samme til kunden: to fra B2B-tillegget og tre fra
   WooCommerce. De kom med hver sin bakgrunn, sin padding og sitt ikon, og ingen
   av dem visste hva et baand er.

   `.enu_warning` og `.enu_error` er tilleggets egne. De skrives rett ut paa
   `woocommerce_before_customer_login_form` fra `class-afreg-fields-front.php`,
   med `background: #ff9966`, hvit tekst og `padding: 20px` hardkodet i
   `afreg_front.css`. Fargen finnes ikke i paletten vaar, og 20 px leser som
   ingenting naar stripa gaar tvers over vinduet og alt annet paa sida staar
   langt lenger inn.
   ========================================================================== */

:root .enu_warning,
:root .enu_error,
:root .woocommerce-message,
:root .woocommerce-info,
:root .woocommerce-error {
	display: block;
	width: auto;
	margin: 0 0 var(--wp--preset--spacing--m);
	/*
	 * Samme formel som `.ft-kontotopp`: fargen gaar helt ut til kanten, teksten
	 * starter der resten av sida starter.
	 *
	 * `max()` er det som gjoer regelen brukbar overalt. Er flata bredere enn
	 * baandet, deles overskuddet i to og teksten legger seg paa baandlinja. Er
	 * den smalere - som spalta i handlekurvens rutenett - blir det leddet
	 * negativt, og da velges sideinnrykket i stedet. Én regel, begge tilfeller.
	 */
	padding-block: var(--wp--preset--spacing--m);
	padding-inline: max(
		var(--wp--custom--sideinnrykk),
		calc((100% - var(--wp--custom--bandbredde)) / 2)
	);
	background: var(--wp--preset--color--lys-blaa);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst);
	line-height: 1.5;
	list-style: none;
}

/*
 * Avvisning og feil skal skille seg fra en beskjed uten aa rope. Temaet bruker
 * roedt om det man ikke kan angre - krysset i handlekurven er graatt til man
 * holder musa over det - saa en heldekkende roed stripe ville sagt noe langt
 * sterkere enn «vi kan dessverre ikke opprette en forhandlerkonto for deg naa».
 * En tynn tone av det samme roede holder.
 */
:root .enu_error,
:root .woocommerce-error {
	background: color-mix(in srgb, var(--wp--preset--color--roed) 12%, #fff);
}

/*
 * WooCommerce setter et ikon fra sin egen skriftfamilie i et `::before` som staar
 * absolutt plassert 1,5em fra venstre kant. Med innrykket vaart ville det havnet
 * ute i margen, langt fra teksten det hoerer til. `::after` beholdes: den er
 * clearfix for knappen som flyter til hoeyre.
 */
:root .woocommerce-message::before,
:root .woocommerce-info::before,
:root .woocommerce-error::before {
	content: none;
}

/* Feilmeldinger er en `ul`. Punktene skal lese som linjer, ikke som en liste. */
:root .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Utlogget gaar kontosida helt ut til kanten, og stripa skal legge seg rett paa
 * fotografiet.
 *
 * Begge ble proevd side om side: med luft under leser varselet som noe lagt
 * *over* sida, uten luft som toppen av den. Her er det det siste vi vil ha -
 * resten av den utloggede sida gaar ogsaa kant i kant, og en hvit stripe midt
 * i ville vaert det eneste stedet flata slapp taket.
 *
 * Vil man ha lufta tilbake er det dette ene tallet.
 */
body.woocommerce-account:not(.logged-in) .enu_warning,
body.woocommerce-account:not(.logged-in) .enu_error,
body.woocommerce-account:not(.logged-in) .wc-block-components-notice-banner {
	margin-block-end: 0;
}

/*
 * WooCommerce har to varselsystemer i drift samtidig. Det gamle - `.woocommerce-error` og
 * foelgesvennene - er stelt med over. Blokkene har sitt eget: `.wc-block-components-notice-banner`,
 * en flexboks med ikonet i en sirkel til venstre og teksten ved siden av. Innloggingsskjemaet
 * bruker dette, saa reglene over rakk det aldri.
 *
 * Samme innrykk som resten: fargen ut til kanten, teksten paa baandlinja.
 */
:root .wc-block-components-notice-banner {
	margin: 0 0 var(--wp--preset--spacing--m);
	/* WooCommerce setter sin padding med `!important`, saa vaar maa svare i samme mynt. */
	padding-block: var(--wp--preset--spacing--m) !important;
	padding-inline: max(
		var(--wp--custom--sideinnrykk),
		calc((100% - var(--wp--custom--bandbredde)) / 2)
	) !important;
	max-width: none;
	background: var(--wp--preset--color--lys-blaa);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst);
}

:root .wc-block-components-notice-banner.is-error {
	background: color-mix(in srgb, var(--wp--preset--color--roed) 12%, #fff);
}

/*
 * Ikonet er et `svg` som flex-barn og ikke et `::before`, saa det foelger innrykket av seg selv -
 * det var derfor det sto klistret i kanten foer. Sirkelen bak er svart hos WooCommerce; her tar
 * den fargen fra tonen.
 */
:root .wc-block-components-notice-banner > svg {
	background: var(--wp--preset--color--tekst-svak);
}

:root .wc-block-components-notice-banner.is-error > svg {
	background: var(--wp--preset--color--roed);
}

/*
 * De to blaa strekene over og under banneret var ingen ramme: det er Gutenbergs fokusring.
 * WooCommerce setter fokus paa banneret slik at skjermlesere leser det opp - det er riktig gjort -
 * men en boks som er like bred som vinduet har ingen kant aa ramme inn, saa ringen leser som to
 * streker paa villspor.
 *
 * Merk at det staar `:focus` og ikke `:focus-visible`. Det var forsoekt: tanken var aa la ringen
 * staa for den som bruker tastatur. Men sender du skjemaet med Enter, armerer Chrome heuristikken
 * sin, og fokuset WooCommerce setter paa neste side *teller* da som tastaturfokus - mens det samme
 * fokuset satt fra konsollet ikke gjoer det. Samme element, to svar, avhengig av hvordan du kom dit.
 *
 * Banneret har `tabindex="-1"` og kan ikke naas med Tab i det hele tatt, saa unntaket beskyttet en
 * tastaturbruker som ikke finnes. Ringen tas bort uansett hvordan fokuset kom; `role="alert"` og
 * fokuset er uroert, saa skjermlesere leser fortsatt opp meldinga.
 */
:root .wc-block-components-notice-banner:focus {
	outline: none;
}

/*
 * I minikurven maa fullbredde-formelen av.
 *
 * `--sideinnrykk` er `clamp(1.5rem, 0.268rem + 5.258vw, 5rem)` - regnet av *vinduet*, ikke av
 * boksen varselet staar i. Ute paa sida stemmer det: der er flata like bred som vinduet, og
 * innrykket legger teksten paa baandlinja. I skuffen, som er noen faa hundre piksler bred paa en
 * stor skjerm, ble de samme 5rem lagt paa hver side. To tredeler av bredden gikk til luft, og
 * teksten brakk etter to-tre ord per linje.
 *
 * Her er skuffen selve ramma. Varselet trenger ingen egen innrykksformel - bare vanlig luft, og
 * en radius saa det leser som en boks i skuffen og ikke som et baand paa tvers av en side.
 *
 * `!important` fordi WooCommerce setter sin padding slik, og regelen over maatte svare i samme
 * mynt for aa naa fram.
 */
:root .wc-block-mini-cart__drawer .wc-block-components-notice-banner {
	margin-inline: 0;
	padding-block: var(--wp--preset--spacing--xs) !important;
	padding-inline: var(--wp--preset--spacing--xs) !important;
	border-radius: var(--wp--custom--radius--kant);
	/* Ikonet foelger foerste linje naar teksten gaar over flere. */
	align-items: flex-start;
}

/*
 * Lenka `kurvknapp.js` setter inn igjen i skuffen (Store API strippet den bort).
 *
 * Understreket og i samme farge som teksten: varselet er allerede en farget flate, og en blaa
 * lenke oppi den ville vaert én farge for mye.
 */
:root .wc-block-mini-cart__drawer .ft-varsel__lenke {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * «Tilbake til handlekurven» paa feilsida i kassa.
 *
 * Varselet over gaar helt ut til kanten, saa knappen trenger samme innrykk for aa stille seg paa
 * baandlinja - ellers staar den klistret i vinduskanten under en tekst som ikke gjoer det.
 */
:root .ft-kassefeil__tilbake {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--s);
	margin-block: var(--wp--preset--spacing--m);
	padding-inline: max(
		var(--wp--custom--sideinnrykk),
		calc((100% - var(--wp--custom--bandbredde)) / 2)
	);
}

/* ==========================================================================
   LYSBORDET

   Galleriet aapner PhotoSwipe - WooCommerces `wc-product-gallery-lightbox`, den ene stoetten
   `disable_gallery_scripts()` lar staa. Standarddrakta er bygd for et svart rom: `background: #000`
   bak bildet, hvit teller, lysegraa bildetekst og hvite ikoner.

   Her skal rommet vaere hvitt som resten av butikken. Da maa alt som var lyst bli moerkt, ellers
   forsvinner knappene i bakgrunnen.
   ========================================================================== */

:root .pswp__bg {
	background: var(--wp--preset--color--hvit);
}

/*
 * Ikonene er ett hvitt sprite-bilde og ikke tekst, saa de kan ikke farges med `color`. `invert`
 * snur de hvite strekene til svarte og lar det gjennomsiktige vaere gjennomsiktig.
 *
 * Bare paa knappen, ikke paa pilenes `::before` i tillegg: et filter gjelder hele undertreet, saa
 * begge deler ville snudd pilene tilbake til hvitt igjen.
 */
:root .pswp__ui .pswp__button {
	filter: invert(1);
}

/*
 * Ingen linje. PhotoSwipe legger et slør tvers over toppen for at de hvite ikonene skal staa fram
 * mot et lyst motiv; her er rommet hvitt og krysset moerkt, saa sløret er bare en stripe som deler
 * flata i to. Krysset staar for seg selv.
 *
 * Merk `.pswp__ui` i selektoren. PhotoSwipe setter fargen to ganger: én gang paa `.pswp__top-bar`
 * alene, og én gang til paa `.pswp__ui--fit .pswp__top-bar`. Den andre veier like mye som en regel
 * med `:root` foran, og drakta lastes etter arket vaart - saa uavgjort gikk til dem. Med `.pswp__ui`
 * veier vaar ett ledd mer, og topplinja er alltid inne i den boksen.
 */
:root .pswp__ui .pswp__top-bar {
	background-color: transparent;
}

:root .pswp__counter {
	color: var(--wp--preset--color--tekst);
}

:root .pswp__caption__center {
	color: var(--wp--preset--color--tekst-svak);
}

/*
 * Krysset tegnes av oss i stedet for aa snus.
 *
 * `filter: invert(1)` over gjelder hele elementet, ogsaa bakgrunnen. En lyseblaa sirkel bak krysset
 * ville derfor blitt snudd til moerk oransje. Her slaas filteret av for denne ene knappen, ikonet
 * hentes vekk, og krysset tegnes som to streker - da er fargen paa sirkelen den fargen den ser ut
 * som.
 */
:root .pswp__ui .pswp__button--close {
	filter: none;
	/*
	 * `!important` er ikke pynt her. WooCommerce legger sitt eget ark oppaa PhotoSwipe-drakta med
	 *
	 *     button.pswp__button { background-image: url('default-skin/default-skin.png') !important }
	 *
	 * og mot `!important` hjelper ingen vekt. Uten dette ble sprite-krysset staaende under krysset
	 * vi tegner selv - to kryss oppaa hverandre, og ingen av dem til aa styre.
	 */
	background-image: none !important;
	border-radius: var(--wp--custom--radius--rund);
	opacity: 1;
	transition: background-color var(--wp--custom--overgang--rask) ease;
}

:root .pswp__ui .pswp__button--close::before,
:root .pswp__ui .pswp__button--close::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--tekst);
}

:root .pswp__ui .pswp__button--close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

:root .pswp__ui .pswp__button--close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * `lys-blaa` er en fem prosents tone. Som flate bak en hel seksjon leser den fint, men som sirkel
 * paa hvitt er den praktisk talt usynlig - regelen traff, fargen gjorde det ikke. Her er samme
 * fargetone tatt ned i lyshet til den faktisk synes. Trengs den et sted til, hoerer den hjemme i
 * paletten i stedet for her.
 */
:root .pswp__ui .pswp__button--close:hover,
:root .pswp__ui .pswp__button--close:focus-visible {
	/*
	 * `!important` av samme grunn som paa ikonet over. WooCommerce sitt eget ark har
	 *
	 *     button.pswp__button:hover { background-color: transparent !important }
	 *
	 * saa hver eneste variant av denne regelen traff riktig element og ble slaatt av den ene linja.
	 */
	background-color: hsl(193 71% 88%) !important;
}

/*
 * Bare krysset staar igjen. Lupe, fullskjerm og deling er WooCommerce sine standardknapper, og
 * ingen av dem hoerer hjemme her: bildet fyller allerede skjermen, og deling av et produktbilde er
 * ikke noe forhandleren skal gjoere herfra.
 *
 * `.pswp__ui` maa staa i selektoren. PhotoSwipe slaar knappene *paa* igjen med to klasser -
 * `.pswp--zoom-allowed .pswp__button--zoom` og `.pswp--supports-fs .pswp__button--fs` - og de veier
 * like mye som `:root` + klassen. Drakta lastes etter arket vaart, saa uavgjort gaar til dem. Samme
 * grunn som paa topplinja, og samme grunn som at sprite-ikonet paa krysset ikke forsvant: der er
 * det `.pswp--svg .pswp__button` som holder igjen.
 */
:root .pswp__ui .pswp__button--zoom,
:root .pswp__ui .pswp__button--fs,
:root .pswp__ui .pswp__button--share,
:root .pswp__ui .pswp__button--arrow--left,
:root .pswp__ui .pswp__button--arrow--right {
	display: none;
}

/*
 * Telleren flyttes fra hjoernet oppe til venstre og ned i midten under bildet. Den staar fortsatt i
 * topplinja i DOM-en - `fixed` loefter den ut av den boksen uten at malen maa endres.
 */
:root .pswp__counter {
	position: fixed;
	inset-inline: 0;
	inset-block: auto var(--wp--preset--spacing--m);
	height: auto;
	margin: 0;
	padding: 0;
	opacity: 1;
	color: var(--wp--preset--color--tekst-svak);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	line-height: 1.4;
	text-align: center;
}

/*
 * PhotoSwipe toner ned hele topplinja naar musa staar stille. Telleren er et barn av den, og et
 * barn kan ikke vaere mindre gjennomsiktig enn forelderen sin - saa tellinga ville forsvunnet med
 * linja. Linja blir staaende; her er den bare et kryss og et tall paa hvitt.
 */
:root .pswp__ui--idle .pswp__top-bar {
	opacity: 1;
}

/*
 * Bildeteksten baerer `alt`-teksten til bildet. I en butikk sier den sjelden noe kunden trenger, og
 * den la seg der tellinga skal staa.
 */
:root .pswp__caption {
	display: none;
}

/* --------------------------------------------------------------------------
   ANTALLSVELGEREN PAA PRODUKTKORTENE
   --------------------------------------------------------------------------
   Én pille delt i to: antall med minus og pluss til venstre, en tynn strek, og
   «Legg til» til hoeyre. Markupen ligger i inc/kort-teller.php, tellinga i
   assets/js/kort-teller.js.

   Hoeyre halvdel er WooCommerces egen knappeklasse, saa den arver alt fra
   knappereglene lenger oppe i arket - vognikonet, skriften, og kvitteringa
   `.ft-lagt` med hake og moerk flate. Her justeres bare det som maa til for at
   knappen skal vaere en halvdel og ikke en hel pille.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   UTSOLGT PAA PRODUKTKORTENE
   --------------------------------------------------------------------------
   Etiketten sier «Utsolgt», og klassa settes av inc/kort-teller.php, som ogsaa
   fjerner `href` saa knappen ikke lenger er en lenke.

   Her gjoeres den lys. Den skal fortsatt lese som en knapp - kortet skal ikke
   se uferdig ut - men som en man ikke kan trykke paa.
   -------------------------------------------------------------------------- */

:root .ft-utsolgt .wp-block-button__link {
	background: color-mix(in srgb, var(--wp--preset--color--gul) 20%, #fff);
	color: var(--wp--preset--color--tekst-svak);
	cursor: default;
}

/*
 * SAMME HOEYDE SOM ANTALLSVELGEREN.
 *
 * De to sto side om side i samme rad og var ulikt hoeye. De arver padding og
 * line-height fra ulike hold - knappen fra `elements.button` i theme.json,
 * pilla fra sine egne deler - og saa lenge hoeyden er en sum av arvede tall,
 * driver de fra hverandre igjen ved neste endring.
 *
 * Derfor settes hoeyden i stedet: én verdi, begge steder, og innholdet
 * midtstilles av flexen som allerede ligger der. 2,75rem er 44 px, som ogsaa er
 * den minste treffflata en tommel boer faa.
 */
:root .ft-kjop,
:root .ft-utsolgt .wp-block-button__link {
	min-height: 2.75rem;
}

:root .ft-utsolgt .wp-block-button__link,
:root .ft-kjop .ft-kjop__legg,
:root .ft-kjop .ft-kjop__steg {
	padding-block: 0;
}

/* Knappen er et `button`-element og har ingen egen midtstilling aa arve. */
:root .ft-kjop .ft-kjop__steg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Litt bredere enn tegnet trenger: flata skal vaere verdt aa sikte paa. */
	padding-inline: 0.95em;
}

/* Tallet staar mellom to strukne knapper og maa midtstille seg selv. */
:root .ft-kjop .ft-kjop__tall {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Vognikonet lover noe knappen ikke kan innfri. */
:root .ft-utsolgt .wp-block-button__link::before {
	content: none;
}

/*
 * Ingen reaksjon paa hover.
 *
 * Bakgrunnen laa fast fra foerste forsoek, men knappen lyste opp likevel:
 * `:root .wp-element-button:hover` gir alle knapper `filter: brightness(1.08)`
 * og et loeft paa én piksel. Det er `filter` som gjoer flata lysere, ikke
 * `background`, saa en ny bakgrunnsfarge naadde aldri fram.
 *
 * Begge slaas av her. En knapp som loefter seg naar musa er over sier «trykk
 * paa meg», og det er nettopp det denne ikke kan.
 */
:root .ft-utsolgt .wp-block-button__link:hover,
:root .ft-utsolgt .wp-block-button__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--gul) 20%, #fff);
	color: var(--wp--preset--color--tekst-svak);
	filter: none;
	transform: none;
}

:root .ft-kjop {
	display: flex;
	/*
	 * Retningen maa staa eksplisitt. Vaar div baerer WooCommerces egen klasse
	 * `.wc-block-components-product-button` - det er den som gjoer at knappen arver kvitteringa
	 * `.ft-lagt` - og WooCommerce setter `flex-direction: column` paa den klassen. `display: flex`
	 * alene arvet derfor kolonna deres, og pilla ble stablet: antallet oeverst, «Legg til» under.
	 */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	margin-block-start: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--gul);
	/* Halvdelene har egne flater ved hover; uten dette stikker de ut av rundingen. */
	overflow: hidden;
}

/*
 * `stretch`, ikke `center`: knappene skal vaere like hoeye som pilla.
 *
 * Med `center` ble de bare saa hoeye som tegnet inni dem, og da ble hover-flata
 * en liten moerk firkant som fløt midt i det gule - den fylte tekstlinja og
 * ikke kolonna. Nå gaar hver knapp fra kant til kant, og `overflow: hidden` paa
 * pilla runder av den venstre av dem.
 */
:root .ft-kjop__antall {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
}

:root .ft-kjop__steg {
	border: 0;
	margin: 0;
	padding: 0.65em 0.75em;
	background: transparent;
	color: var(--wp--preset--color--hvit);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

:root .ft-kjop__steg:hover:not(:disabled),
:root .ft-kjop__steg:focus-visible:not(:disabled) {
	background: rgba(0, 0, 0, 0.12);
}

/* Blekt, ikke borte: en knapp som forsvinner flytter de andre. */
:root .ft-kjop__steg:disabled {
	opacity: 0.45;
	cursor: default;
}

:root .ft-kjop__tall {
	min-width: 1.5em;
	color: var(--wp--preset--color--hvit);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 700;
	text-align: center;
	/* Tabulaere tall: bredden skal ikke endre seg naar 9 blir 10. */
	font-variant-numeric: tabular-nums;
}

/*
 * Hoeyre halvdel. Flata er pillas egen - knappen er gjennomsiktig - saa de to
 * halvdelene leses som én gul knapp med en strek i, og ikke som to knapper som
 * tilfeldigvis ligger inntil hverandre.
 */
:root .ft-kjop .ft-kjop__legg {
	flex: 1;
	min-width: 0;
	/*
	 * `height: auto` fordi kjernens knappeblokk gir `.wp-block-button__link` `height: 100%`. Det
	 * virket saa lenge pilla selv var et flex-element i kortet og hadde en bestemt hoeyde. Inni
	 * `.ft-kjop-ramme` er hoeyden ubestemt, 100 % ble til innholdets hoeyde, og knappen la seg
	 * oeverst i pilla med «Legg til» skjevt over antallet (08.10.2026). Med `auto` strekkes den
	 * til pillas hoeyde igjen.
	 */
	height: auto;
	/* Etiketten er to ord; den skal ikke brekke i et smalt kort paa forsida. */
	white-space: nowrap;
	border-radius: 0;
	background: transparent;
	/* Streken mellom antallet og «Legg til». */
	border-inline-start: 1px solid rgba(255, 255, 255, 0.4);
	/* Ikon og tekst har luft nok fra hverandre; padding holder dem av streken. */
	padding-inline: 0.9em;
}

:root .ft-kjop .ft-kjop__legg:hover,
:root .ft-kjop .ft-kjop__legg:focus-visible {
	background: rgba(0, 0, 0, 0.12);
}

:root .ft-kjop .ft-kjop__legg:disabled {
	cursor: default;
}

/*
 * Kvitteringa gjelder hele pilla, ikke bare knappen.
 *
 * `.ft-lagt` settes paa hoeyre halvdel av kurvknapp.js, og regelen lenger oppe
 * gjoer den moerk. Var det bare den, ville pilla staatt halvt gul og halvt
 * moerk i to sekunder. Her farges omslaget i stedet, og knappen holdes
 * gjennomsiktig - da er det hele kontrollen som kvitterer.
 */
:root .ft-kjop:has(.ft-lagt) {
	background: var(--wp--preset--color--tekst);
}

:root .ft-kjop .ft-kjop__legg.ft-lagt {
	background: transparent;
}

/*
 * «Lagt i handlekurven» er for langt for en halv pille - teksten ville presset
 * antallet sammen i to sekunder og sluppet det ut igjen. Kortere ord, samme
 * beskjed, og bredden staar stille.
 */
:root .ft-kjop .ft-kjop__legg.ft-lagt > span::after {
	content: "Lagt til";
}

/*
 * SMALE KORT: ANTALL OVER, KNAPP UNDER.
 *
 * Paa mobil staar kortene to i bredden, og pilla [- 1 + | Legg til] fikk ikke plass: «Legg til»
 * ble kappet midt i ordet (Anders, 08.10.2026). Naar kortet er for smalt, stables delene som paa
 * produktsida - antallet i en lys pille, og en gul knapp i full bredde under.
 *
 * Det er kortets bredde som avgjoer, ikke skjermens. Et kort i karusellen paa forsida kan vaere
 * smalt paa en stor skjerm, og et kort i sok kan vaere bredt paa en liten. Derfor en container
 * rundt pilla, og `@container` i stedet for `@media`. 15rem er det pilla trenger paa én rad.
 */
:root .ft-kjop-ramme {
	container: ft-kjop / inline-size;
}

/*
 * FAERRE SPALTER FOER KNAPPEN DELES.
 *
 * Paa PC og nettbrett skal pilla staa paa én rad. Blir kortene for smale til det, er det spaltene
 * som skal gi seg - fire blir tre, tre blir to - ikke knappen (Anders, 08.10.2026). Den stablede
 * knappen over er bare for telefon, der arkivet uansett staar i to spalter.
 *
 * Woos egen formel beholdes - `calc(25% - .9375em)` er en firedel minus Woos eget gap fordelt paa
 * sporene, se kommentaren ved rutenettet - men sporet faar aldri bli smalere enn 15rem, som er det
 * pilla trenger. `auto-fill` legger da selv paa færre spalter.
 *
 * Bare over 48em: under det overtar arkivets to spalter og karusellen, og der er stablingen
 * nettopp det som skal skje.
 */
@container ft-band (min-width: 48.0625em) {
	:root .ft-band .wc-block-product-template__responsive.columns-3 {
		grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc(33.33333% - .83333em)), 1fr));
	}

	:root .ft-band .wc-block-product-template__responsive.columns-4 {
		grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc(25% - .9375em)), 1fr));
	}

	:root .ft-band .wc-block-product-template__responsive.columns-5 {
		grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc(20% - 1em)), 1fr));
	}

	:root .ft-band .wc-block-product-template__responsive.columns-6 {
		grid-template-columns: repeat(auto-fill, minmax(max(15rem, calc(16.66667% - 1.04167em)), 1fr));
	}
}

/*
 * PRODUKTRADENE UTENFOR ARKIVET RULLER SIDELENGS OGSAA PAA PC.
 *
 * Regelen over gir faerre spalter naar kortene blir smale. I arkivet er det riktig - der er raden
 * hele resultatet. Paa forsida er en rad et utvalg, og fem bivoksprodukter som brakk til tre og to
 * saa ut som en rad som hadde falt fra hverandre (Anders, 08.10.2026). Her blir raden staaende, og
 * det som ikke faar plass, ruller man til - med pilene fra karusell.js, som paa telefon.
 *
 * Har alle kortene plass, er det ingenting aa rulle, og raden ser ut akkurat som foer. Sporene har
 * samme bredde som i rutenettet, men aldri under 15rem.
 *
 * `.ft-karusell` er rammen karusell.js legger rundt alle produktrader unntatt arkivet - forsida og
 * «Du liker kanskje ogsaa» paa produktsida.
 */
@container ft-band (min-width: 48.0625em) {
	:root .ft-band .ft-karusell .wc-block-product-template__responsive {
		grid-template-columns: none;
		grid-auto-flow: column;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		overscroll-behavior-inline: contain;
		/*
		 * Kortet loeftes 4 px ved hover. Med `overflow-x: auto` klipper raden ogsaa i hoeyden, og
		 * loeftet ville kappet toppen av bildet. Luft innenfor, like mye trukket inn igjen utenfor.
		 */
		padding-block-start: 6px;
		margin-block-start: -6px;
	}

	:root .ft-band .ft-karusell .wc-block-product-template__responsive::-webkit-scrollbar {
		display: none;
	}

	:root .ft-band .ft-karusell .wc-block-product-template__responsive .wc-block-product {
		scroll-snap-align: start;
	}

	:root .ft-band .ft-karusell .wc-block-product-template__responsive.columns-3 {
		grid-auto-columns: max(15rem, calc(33.33333% - .83333em));
	}

	:root .ft-band .ft-karusell .wc-block-product-template__responsive.columns-4 {
		grid-auto-columns: max(15rem, calc(25% - .9375em));
	}

	:root .ft-band .ft-karusell .wc-block-product-template__responsive.columns-5 {
		grid-auto-columns: max(15rem, calc(20% - 1em));
	}

	:root .ft-band .ft-karusell .wc-block-product-template__responsive.columns-6 {
		grid-auto-columns: max(15rem, calc(16.66667% - 1.04167em));
	}

	/* Pilene bare naar det faktisk er noe aa rulle - karusell.js setter klassen. */
	:root .ft-karusell--ruller .ft-karusell__pil {
		display: grid;
		place-items: center;
		position: absolute;
		top: 38%;
		z-index: 2;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: var(--wp--custom--radius--rund);
		background: var(--wp--preset--color--hvit);
		box-shadow: var(--wp--custom--skygge--heving);
		color: var(--wp--preset--color--tekst);
		cursor: pointer;
	}

	:root .ft-karusell--ruller .ft-karusell__pil:disabled {
		opacity: 0.35;
		box-shadow: none;
		cursor: default;
	}

	:root .ft-karusell--ruller .ft-karusell__pil--forrige {
		inset-inline-start: -22px;
	}

	:root .ft-karusell--ruller .ft-karusell__pil--neste {
		inset-inline-end: -22px;
	}

	:root .ft-karusell--ruller .ft-karusell__pil svg {
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
}

/*
 * 14.99rem og ikke 15rem: rutenettet under gir sporene nøyaktig 15rem som minste bredde, og et kort
 * på akkurat 240 px traff `max-width: 15rem` og ble stablet - slik bivoksbandet med fem spalter
 * gjorde på PC (Anders, 08.10.2026). Pilla får plass på én rad ved 15rem.
 */
@container ft-kjop (max-width: 14.99rem) {
	:root .ft-kjop {
		flex-direction: column;
		gap: var(--wp--preset--spacing--xs);
		background: transparent;
		overflow: visible;
	}

	:root .ft-kjop__antall {
		justify-content: space-between;
		min-height: 2.75rem;
		background: var(--wp--preset--color--lys-blaa);
		border-radius: var(--wp--custom--radius--kant);
		overflow: hidden;
	}

	:root .ft-kjop .ft-kjop__steg,
	:root .ft-kjop .ft-kjop__tall {
		color: var(--wp--preset--color--tekst);
	}

	:root .ft-kjop .ft-kjop__steg {
		padding-inline: 1.1em;
	}

	:root .ft-kjop .ft-kjop__steg:hover:not(:disabled),
	:root .ft-kjop .ft-kjop__steg:focus-visible:not(:disabled) {
		background: rgba(0, 0, 0, 0.06);
	}

	:root .ft-kjop .ft-kjop__legg {
		min-height: 2.75rem;
		background: var(--wp--preset--color--gul);
		border-inline-start: 0;
		border-radius: var(--wp--custom--radius--kant);
	}

	:root .ft-kjop .ft-kjop__legg:hover,
	:root .ft-kjop .ft-kjop__legg:focus-visible {
		background: color-mix(in srgb, var(--wp--preset--color--gul) 88%, #000);
	}

	/* Kvitteringa: bare knappen blir moerk naar delene staar hver for seg. */
	:root .ft-kjop:has(.ft-lagt) {
		background: transparent;
	}

	:root .ft-kjop .ft-kjop__legg.ft-lagt {
		background: var(--wp--preset--color--tekst);
	}
}

/* --------------------------------------------------------------------------
   Innpris og veil. utsalgspris paa produktsida

   Ligger mellom prisen og ingressen. Dempet og liten, som meta-raden lenger
   ned: dette er tall forhandleren slaar opp naar hun regner paa margin, ikke
   noe som skal konkurrere med prisen rett over.

   Navn og verdi i to kolonner og ikke paa samme linje, saa verdiene star under
   hverandre naar det er to rader. `max-content` paa navnet gjoer at kolonnen
   blir saa bred som den lengste etiketten og ikke bredere.
   -------------------------------------------------------------------------- */
:root .ft-veilpris {
	display: grid;
	grid-template-columns: max-content auto;
	gap: 0.15rem var(--wp--preset--spacing--xs);
	margin-block: 0 var(--wp--preset--spacing--s);
	padding: 0;
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	list-style: none;
}

:root .ft-veilpris__rad {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	margin: 0;
}

/*
 * Tabulaere tall, saa kronebeloepene star rett under hverandre. Samme grep som
 * paa prisen over - der er det ett tall, her er det to som skal sammenlignes.
 */
:root .ft-veilpris__verdi {
	font-variant-numeric: tabular-nums;
}

/* Enheten er en presisering og ikke en del av tallet, saa den veier mindre. */
:root .ft-veilpris__enhet {
	opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Full hoeyde paa innlogging og registrering

   Sida er kort: ett skjema, ingen meny og ingen kontaktband. Uten dette ender
   bunnteksten midt paa skjermen med hvitt under seg.

   `svh` og ikke `vh`: paa mobil endrer `vh` seg naar nettleserlinja trekker seg
   sammen, og da hopper bunnteksten mens man ruller. `svh` maaler den minste
   tilstanden og staar stille.

   `flex: 1 0 auto` paa main og ikke `margin-top: auto` paa bunnteksten, fordi
   trygghetsstripa og bunnteksten er to soesken - vokser main, skyves begge ned
   samlet og avstanden mellom dem holder seg.
   -------------------------------------------------------------------------- */
.ft-innlogging .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-block-size: 100svh;
}

.ft-innlogging .ft-main {
	flex: 1 0 auto;
}

/*
 * Skillelinja over bunnteksten paa innlogging og registrering.
 *
 * Den laa paa `.ft-tillit` som `border-block-end`, og forsvant med stripa. Uten
 * den flyter bunnteksten rett ut av den hvite flata. Samme `--linje` som foer,
 * saa det er den samme streken og ikke en ny som ligner.
 */
.ft-innlogging .ft-footer {
	border-block-start: var(--wp--custom--linje);
}

/* --------------------------------------------------------------------------
   Kontoopplysninger i to spalter

   Deg til venstre, firmaet til hoeyre. Lagre-knappen spenner begge, fordi den
   lagrer begge.

   `start` og ikke `stretch`: spaltene er ulike hoeye, og uten dette ville den
   korte strukket feltene sine utover for aa moete den lange.

   Én spalte under 48rem. Grensa er satt etter innholdet og ikke etter en
   enhet: to kolonner med skjemafelt blir trange foer det, og da leses de som
   to smale lister i stedet for to grupper.
   -------------------------------------------------------------------------- */
:root .ft-kontoskjema__spalter {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--xl);
	align-items: start;
}

/*
 * Skillelinja ligger paa hoeyre spalte. Mellomrommet foer den er `gap`, og
 * `padding` etter den er det samme maalet - da staar streken midt i gutteren
 * uten at vi regner den ut.
 */
:root .ft-kontoskjema__spalte--firma {
	padding-block-start: var(--wp--preset--spacing--xl);
	border-block-start: var(--wp--custom--linje);
}

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

	:root .ft-kontoskjema__spalte--firma {
		padding-block-start: 0;
		padding-inline-start: var(--wp--preset--spacing--xl);
		border-block-start: 0;
		border-inline-start: var(--wp--custom--linje);
	}
}

/* Tilleggets fieldset har egen ramme og luft fra pluginen. Begge bort. */
:root .ft-kontoskjema__spalte--firma fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

:root .ft-kontoskjema__lagre {
	margin-block-start: var(--wp--preset--spacing--l);
}

/*
 * Laaste firmafelter (inc/orgnummer.php, `laas_firmafelter()`). Skal se ut som tekst man kan lese
 * og kopiere, ikke som et felt som er i stykker: svak bakgrunn, vanlig tekstfarge, ingen markoer
 * som lover redigering. Ogsaa paa registreringa, der e-posten fra invitasjonen staar laast.
 */
:root .woocommerce :is(.ft-kontoskjema, .ft-konto-skjema) input[readonly] {
	background-color: var(--wp--preset--color--lys-blaa);
	color: var(--wp--preset--color--tekst);
	cursor: default;
}

:root .ft-kontoskjema__laast {
	margin-block-start: var(--wp--preset--spacing--s);
	color: var(--wp--preset--color--tekst-svak);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

/* --------------------------------------------------------------------------
   Passordbytte bak en bryter

   `summary` er allerede en knapp for nettleseren - den tar tastatur, gir rolle
   til skjermleseren og aapner uten et eneste skript. Her faar den bare en form
   som ser ut som en knapp.
   -------------------------------------------------------------------------- */
:root .ft-passord {
	margin-block-start: var(--wp--preset--spacing--m);
}

/*
 * Samme form som de andre knappene i temaet: `radius--kant`, brodskrift i
 * `brodtekst-s` og halvfet, og `xxs`/`m` som padding - hentet fra
 * `elements.button` i theme.json, saa de folger hverandre om den endres.
 *
 * Men dette er en sekundaer handling, saa den staar som omriss og ikke fylt:
 * gul ramme og gul tekst mot sida, ikke hvit tekst paa gul flate. Da ser den ut
 * som en slektning av «Lagre endringer» uten aa konkurrere med den.
 */
:root .ft-passord__knapp {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--gul);
	border-radius: var(--wp--custom--radius--kant);
	color: color-mix(in srgb, var(--wp--preset--color--gul) 80%, var(--wp--preset--color--tekst));
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}

/* Safari tegner trekanten gjennom en egen pseudoelement-regel. */
:root .ft-passord__knapp::-webkit-details-marker {
	display: none;
}

/*
 * Fylles paa hover i stedet for aa bare moerkne - da er det tydelig at den er
 * til aa trykke paa, og den lander paa samme flate som de fylte knappene.
 */
:root .ft-passord__knapp:hover {
	background: var(--wp--preset--color--gul);
	border-color: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
}

/*
 * Pila snus naar den er aapen. `::after` og ikke et ikon i markupen, saa malen
 * holder seg saa naer WooCommerces egen som mulig.
 */
:root .ft-passord__knapp::after {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-inline-end: 1px solid currentcolor;
	border-block-end: 1px solid currentcolor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.15s ease;
}

:root .ft-passord[open] .ft-passord__knapp::after {
	transform: translateY(0.1em) rotate(225deg);
}

:root .ft-passord__felt {
	margin-block-start: var(--wp--preset--spacing--s);
}

/* --------------------------------------------------------------------------
   Adresser paa kontosida

   Ett kort per adresse. `minmax(0, 24rem)` og ikke full bredde: en adresse er
   fem korte linjer, og et kort som spenner hele sida gir et stort tomrom til
   hoeyre for teksten. Autofyll gjoer at det blir to kort side om side den dagen
   egen leveringsadresse slaas paa - i dag sender butikken bare til
   fakturaadressa, saa det staar ett.
   -------------------------------------------------------------------------- */
:root .ft-adresser {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 24rem));
	gap: var(--wp--preset--spacing--l);
	margin-block-start: var(--wp--preset--spacing--m);
}

:root .ft-adressekort {
	padding: var(--wp--preset--spacing--m);
	border: var(--wp--custom--linje);
	border-radius: var(--wp--custom--radius--kant);
}

:root .ft-adressekort__topp {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--s);
	margin-block-end: var(--wp--preset--spacing--s);
	padding-block-end: var(--wp--preset--spacing--xs);
	border-block-end: var(--wp--custom--linje);
}

/*
 * Broedskrift og ikke displayskrifta. Sidetittelen «Adresser» staar i Amatic
 * rett over; staar kortoverskrifta der ogsaa, leses de to som to sidetitler.
 */
:root .ft-adressekort__tittel {
	margin: 0;
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 600;
	line-height: 1.2;
}

/* Samme omriss som «Endre passord»: en sekundaer handling, ikke en fylt knapp. */
:root .ft-adressekort__rediger {
	flex: none;
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--s);
	border: 1px solid var(--wp--preset--color--gul);
	border-radius: var(--wp--custom--radius--kant);
	color: color-mix(in srgb, var(--wp--preset--color--gul) 80%, var(--wp--preset--color--tekst));
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

:root .ft-adressekort__rediger:hover {
	background: var(--wp--preset--color--gul);
	border-color: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
}

/*
 * `address` staar i kursiv hos nettleseren. En adresse er ikke en betoning,
 * den er data - og fem kursive linjer er tyngre aa lese enn fem vanlige.
 */
:root .ft-adressekort__adresse {
	margin: 0;
	font-style: normal;
	line-height: 1.6;
}

:root .ft-adressekort__tom {
	color: var(--wp--preset--color--tekst-svak);
}

/* ─────────────  MERSALG I KURVEN OG KASSA  ───────────── */

/*
 * «Passer til bestillingen» under varetabellen, og «Glemte du noe?» under skjemaet i kassa.
 * Se inc/mersalg.php.
 *
 * Kortene er de samme som paa forsida, og resten av stylingen kommer derfra: sporbredde, rulling
 * sidelengs naar de ikke faar plass (karusell.js), og antallsvelgeren som deles bare paa telefon.
 * Her settes bare overskriften og luften rundt.
 */
:root .ft-mersalg {
	margin-block: var(--wp--preset--spacing--xl) 0;
	padding-block-start: var(--wp--preset--spacing--l);
	border-top: var(--wp--custom--linje);
}

:root .ft-mersalg__tittel {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-s);
}

:root .ft-mersalg__ingress {
	margin: 0.25rem 0 var(--wp--preset--spacing--m);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	color: var(--wp--preset--color--tekst-svak);
}

/* Uten ingress skal kortene likevel ikke klistre seg til overskriften. */
:root .ft-mersalg__tittel + .wp-block-woocommerce-product-collection {
	margin-block-start: var(--wp--preset--spacing--m);
}

/* Kassa: en egen rad under skjemaet, i venstre spalte. */
@media (min-width: 62em) {
	:root form.woocommerce-checkout {
		grid-template-areas:
			"skjema ordretittel"
			"skjema ordre"
			"mersalg ordre";
	}

	:root form.woocommerce-checkout .ft-mersalg {
		grid-area: mersalg;
	}
}

/* --------------------------------------------------------------------------
   MERSALG I HANDLEKURVSKUFFEN

   Rader i stedet for kort: skuffen er for smal til at kortene faar plass ved
   siden av hverandre. Bilde til venstre med navn og pris, og den samme pilla
   som paa produktkortene i full bredde under. Lista settes inn av
   assets/js/mersalg-skuff.js nederst blant varelinjene, saa den ruller med varene.

   I full bredde er pilla bredere enn grensa paa 15rem i `@container ft-kjop`,
   ogsaa paa telefon - den staar derfor alltid paa én rad, som paa PC-kortene.
   -------------------------------------------------------------------------- */

:root .ft-skuffsalg-holder:empty {
	display: none;
}

:root .ft-skuffsalg {
	margin-block-start: var(--wp--preset--spacing--m);
	padding-block-end: var(--wp--preset--spacing--m);
}

:root .ft-skuffsalg__tittel {
	margin: 0 0 var(--wp--preset--spacing--xs);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	letter-spacing: normal;
}

:root .ft-skuffsalg__liste {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

:root .ft-skuffsalg__vare {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--xs);
	align-items: start;
	margin: 0;
	padding: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--lys-blaa);
}

:root .ft-skuffsalg__bilde {
	display: block;
}

:root .ft-skuffsalg__bilde img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--kant);
}

:root .ft-skuffsalg__info {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.15rem;
	min-width: 0;
}

:root .ft-skuffsalg__navn {
	color: var(--wp--preset--color--tekst);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst);
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

:root .ft-skuffsalg__navn:hover,
:root .ft-skuffsalg__navn:focus-visible {
	text-decoration: underline;
}

:root .ft-skuffsalg__pris {
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst-s);
}

:root .ft-skuffsalg__info {
	align-self: center;
}

/* Pilla under bildet og navnet, over hele raden - se skuff_liste() i mersalg.php. */
:root .ft-skuffsalg__kjop {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	margin-block-start: var(--wp--preset--spacing--xs);
}

:root .ft-skuffsalg__kjop .ft-kjop {
	margin-block-start: 0;
}

/*
 * Ingen synlig rullefelt i skuffen. Varene og forslagene ruller fortsatt - med hjul, styreflate
 * og finger - men den graa stripa langs kanten var stoey i et smalt panel.
 */
:root .wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	scrollbar-width: none;
}

:root .wc-block-mini-cart__drawer .wc-block-mini-cart__items::-webkit-scrollbar {
	display: none;
}

/* Varianter: en lenke til produktsida, kledd som knappen ellers i butikken. */
:root .ft-skuffsalg__velg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding-inline: 1em;
	border-radius: var(--wp--custom--radius--kant);
	background: var(--wp--preset--color--gul);
	color: var(--wp--preset--color--hvit);
	font-family: var(--wp--preset--font-family--brod);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	font-weight: 700;
	text-decoration: none;
}

:root .ft-skuffsalg__velg:hover,
:root .ft-skuffsalg__velg:focus-visible {
	filter: brightness(0.92);
}


/* ---------------------------------------------------------------------------------------------
 * Forhaandsbestilling (inc/forhandsbestilling.php): produktsida, handlekurven og kassen.
 * ------------------------------------------------------------------------------------------- */
:root .ft-forhand {
	margin-block: var(--wp--preset--spacing--s);
	padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
	border: 1px solid var(--wp--preset--color--gul);
	border-radius: var(--wp--custom--radius--kant);
	background: color-mix(in srgb, var(--wp--preset--color--gul) 8%, var(--wp--preset--color--hvit));
	color: var(--wp--preset--color--tekst);
	font-size: var(--wp--preset--font-size--brodtekst-s);
	line-height: 1.6;
}

:root .ft-forhand p {
	margin: 0;
}

:root .ft-forhand p + p {
	margin-block-start: 0.75em;
}

:root .ft-forhand__tittel {
	font-weight: 700;
}