/*
 * Toppen av siden. Reglene gjelder bare når js/header.js har fått flyttet
 * menyen opp i samme rad — uten skriptet ser toppen ut som Shoptimizer laget
 * den, og alt virker.
 */

/* Høyden på toppen settes av temaets tilpasningsvalg, som skrives ut som en
   inline <style> med «@media (min-width: 993px) { .col-full.main-header {
   padding-top: 30px … } }». Den regelen har samme vekt som en vanlig
   toklasse-velger og kommer sist i dokumentet, så body-klassen legges til her
   for å veie tyngre — framfor !important, som ville gjort neste justering
   vanskeligere. */
body.opsis-header-single-row .main-header.col-full {
	display: flex;
	align-items: center;
	gap: 32px;
	height: 72px;
	background: var(--page);
	border-bottom: 1px solid var(--rule);

	/* Toppen går fra kant til kant. «col-full» er temaets midtstilte spalte —
	   1170 brede med 42 i polstring og resten som marg — så logoen sto 215
	   piksler inne på en skjerm på 1600 mens den hvite flaten bak gikk helt ut.
	   Her er det innholdet som skal gå helt ut, med luft nok til at logoen ikke
	   klistrer seg til kanten. */
	max-width: none;   /* undo: shoptimizer main.min.css — .col-full { max-width: 1170px } */
	width: 100%;
	margin: 0;         /* undo: samme sted — margen som midtstilte spalten */
	padding: 0 32px;
	/* Temaet regner bredden uten polstring, så 100 % pluss 32 på hver side ble
	   64 piksler bredere enn vinduet og siden fikk vannrett rulling. */
	box-sizing: border-box;
}

@media (max-width: 992px) {
	body.opsis-header-single-row .main-header.col-full {
		padding: 0 16px;
	}
}

/* «col-full» rydder opp etter flytende barn med et ::after. I en flex-rad er det
   ikke opprydding, det er et fjerde element uten bredde — og det tok med seg sin
   egen 32-piksels luke, så ikonene stanset 32 piksler før høyre kant uansett
   hvor bredt vinduet var. */
body.opsis-header-single-row .main-header.col-full::after {
	content: none;
}

/* Temaet skalerer logoen etter den høye raden. */
.opsis-header-single-row .main-header .custom-logo { max-height: 34px; width: auto; }
.opsis-header-single-row .main-header .site-branding { margin: 0; }

/* Søkefeltet er ikke med i skissen: katalogen er liten og delt per
   organisasjon, og feltet tok mer plass enn menyen. */
.opsis-header-single-row .site-search { display: none !important; }

/* I stedet kommer et lite felt rett etter logoen (js/header.js, wireSearch):
   40 høyt, bare på skrivebord. Temaets egen regel for søkefelt har mer vekt
   enn en klasse, derfor den lange velgeren. */
.opsis-search {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	width: 210px;
	margin: 0;
	display: none;
}
@media (min-width: 993px) { .opsis-header-single-row .opsis-search.opsis-search-vis { display: block; } }
.opsis-search .opsis-search-ikon {
	position: absolute;
	left: 13px;
	top: 50%;
	width: 17px;
	height: 17px;
	margin-top: -8.5px;
	color: var(--ink-faint);
	pointer-events: none;
}
form.opsis-search input.opsis-search-input[type="search"] {
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 14px 0 38px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--stage);
	color: var(--ink);
	font: inherit;
	font-size: 14.5px;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
form.opsis-search input.opsis-search-input[type="search"]::placeholder { color: var(--ink-faint); }
form.opsis-search input.opsis-search-input[type="search"]:focus {
	outline: none;
	background: var(--page);
	border-color: var(--wc-org-primary-color, var(--ink));
}
form.opsis-search input.opsis-search-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Forslagslisten under feltet. Bredere enn feltet: et plaggnavn og et
   artikkelnummer trenger plassen, og listen er ikke bundet til feltets bredde. */
.opsis-search .opsis-sok-liste {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	width: 400px;
	padding: 6px;
	background: var(--page);
	border: 1px solid var(--rule);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .10);
}
.opsis-sok-liste[hidden] { display: none; }
.opsis-sok-rader { max-height: min(60vh, 440px); overflow-y: auto; }
.opsis-sok-rad {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border-radius: 8px;
	color: var(--ink);
	text-decoration: none;
}
.opsis-sok-rad:hover,
.opsis-sok-rad.opsis-sok-valgt { background: var(--stage); }
.opsis-sok-bilde {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: var(--stage);
	overflow: hidden;
}
.opsis-sok-bilde img { display: block; width: 100%; height: 100%; object-fit: contain; }
.opsis-sok-tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opsis-sok-navn {
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.opsis-sok-nr { font-size: 12px; color: var(--ink-faint); font-family: ui-monospace, Menlo, monospace; }
.opsis-sok-pris { flex: none; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.opsis-sok-pris del { display: none; }
.opsis-sok-pris ins { background: none; text-decoration: none; }
.opsis-sok-tom { margin: 0; padding: 14px; font-size: 14px; color: var(--ink-soft); }
/* «Se alle treff» er en knapp, og temaet har egne regler for knapper — mørk
   bakgrunn og mørk tekst ved hover. Velgeren er lang for å veie mer, og alle
   tilstandene står skrevet ut i stedet for å stole på at temaet lar dem være. */
.opsis-search .opsis-sok-liste button.opsis-sok-alle {
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 6px 0 0;
	padding: 13px 10px;
	border: 0;
	border-top: 1px solid var(--rule);
	border-radius: 0 0 8px 8px;
	background: var(--page);
	box-shadow: none;
	color: var(--ink-soft);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.opsis-search .opsis-sok-liste button.opsis-sok-alle:hover,
.opsis-search .opsis-sok-liste button.opsis-sok-alle:focus-visible {
	background: var(--stage);
	color: var(--ink);
	outline: none;
}

/* Den blå raden er tom nå som menyen er flyttet opp. Wrapperen rundt den,
   .col-full-nav, har den blå bakgrunnen og blir stående igjen som en 1 piksel
   høy strek under toppen om den ikke skjules også. */
.opsis-header-single-row .shoptimizer-primary-navigation,
.opsis-header-single-row .col-full-nav {
	display: none !important;
}

/* Tre deler i raden: logo til venstre, menyen midtstilt i det som er igjen,
   ikonene helt til høyre. Med «auto» på begge sider av menyen *og* til venstre
   for ikonene delte de tre elementene den ledige plassen mellom seg, og ikonene
   stanset 32 piksler før kanten uansett skjermbredde. Menyen tar plassen i
   stedet og midtstiller innholdet sitt. */
.opsis-header-single-row .main-header .main-navigation {
	flex: 1;
	display: flex;
	justify-content: center;
	margin: 0;
	background: none;
}
.opsis-header-single-row .main-header .primary-navigation { background: none; }

/* Menypunktene er like høye som raden, ikke like høye som ordet.
   Ordet «Damer» sto fra 6 til 66 i en rad som er 72 høy, og panelet begynner på
   72 — så pekeren forlot punktet seks piksler før den nådde panelet, og skjermen
   lukket seg midt i bevegelsen ned mot lenken man var på vei til. Nå henger
   punktet og panelet sammen, og panelet er et barn av punktet, så det holder seg
   åpent hele veien ned. */
.opsis-header-single-row .main-header .main-navigation,
.opsis-header-single-row .main-header .primary-navigation,
.opsis-header-single-row .main-header .menu-primary-menu-container {
	height: 100%;
	align-items: stretch;
}

.opsis-header-single-row .main-header ul.menu {
	display: flex;
	align-items: stretch;
	height: 100%;
	/* 26 mellom punktene pluss seks foran hver pil ble til 43 piksler mellom to
	   ord — raden leste som fem løsrevne knapper i stedet for én meny. */
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.opsis-header-single-row .main-header ul.menu > li {
	display: flex;
	align-items: center;
	gap: 2px;
}

/* Pilen hører til ordet foran seg, ikke til luften mellom punktene. */
.opsis-header-single-row .main-header ul.menu > li > .caret {
	margin-left: -4px;
}
.opsis-header-single-row .main-header ul.menu > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 5px;
	padding: 0;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
}
.opsis-header-single-row .main-header ul.menu > li > a:hover {
	color: var(--wc-org-primary-color, var(--ink));
}

/* Undermenyene arver den blå raden sin farge fra temaet — de skal være hvite
   som resten av toppen nå. */
.opsis-header-single-row .main-header ul.menu ul.sub-menu {
	background: var(--page);
	border: 1px solid var(--rule);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.opsis-header-single-row .main-header ul.menu ul.sub-menu a { color: var(--ink); }

.opsis-header-single-row .site-header-cart { display: none !important; }

.opsis-header-icons {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
}

.opsis-icon-btn {
	position: relative;
	display: inline-flex;
	padding: 6px;
	border-radius: 8px;
	color: var(--ink);
	transition: color .12s ease;
}
.opsis-icon-btn:hover { color: var(--wc-org-primary-color, var(--ink)); }
.opsis-icon-btn svg { width: 24px; height: 24px; display: block; }

/* Innlogget: kontoikonet er en sirkel med initialene, og «Logg ut» står som ren
   tekst til venstre for den. */
.opsis-icon-btn.opsis-initialer {
	width: 36px;
	height: 36px;
	padding: 0;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--wc-org-primary-color, var(--ink));
	color: var(--page);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1;
}
.opsis-icon-btn.opsis-initialer:hover { color: var(--page); opacity: .85; }

.opsis-logout {
	margin-right: 4px;
	color: var(--ink);
	font-size: 14px;
	white-space: nowrap;
}
.opsis-logout:hover { color: var(--wc-org-primary-color, var(--ink)); }
/* På en smal telefon er det ikke plass ved siden av logoen; da står utlogging på kontosiden. */
@media (max-width: 520px) { .opsis-logout { display: none; } }

.opsis-cart-count {
	position: absolute;
	top: -1px;
	right: -3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wc-org-primary-color, var(--ink));
	color: var(--page);
	font-family: ui-monospace, Menlo, monospace;
	font-size: 10.5px;
	line-height: 17px;
	text-align: center;
}

/* På telefon og nettbrett står temaets egen topp: hamburgeren til venstre,
   logoen i midten, og handlekurven som en rammet firkant med et tall i til
   høyre. Kontoen fantes ikke i det hele tatt. Ikonene tar den plassen — samme
   to ikoner som på skrivebordet, i samme hjørne som firkanten sto.

   Raden ligger fast til høyre fordi temaet setter «.main-header» til
   «position: relative» og plasserer både hamburgeren og handlekurven mot
   kantene; en ikonrad i flyten ville lagt seg under logoen. */
@media (max-width: 992px) {
	body.opsis-header-ikoner .site-header-cart { display: none; }

	body.opsis-header-ikoner .main-header > .opsis-header-icons {
		position: absolute;
		top: 50%;
		right: 15px;
		transform: translateY(-50%);
		gap: 2px;
	}

	/* 24 pikslers ikon med 6 rundt blir 36, og en finger treffer ikke 36 like
	   sikkert som en peker gjør. Flaten vokser til 44 uten at ikonet gjør det. */
	body.opsis-header-ikoner .opsis-icon-btn {
		padding: 10px;
	}
}


/* --- Skuffen -------------------------------------------------------------
 *
 * Under 993 er menyen Shoptimizers egen skuff: hamburgeren til venstre skyver
 * en 300 piksler bred spalte inn fra kanten. Den virket, men den var den ene
 * flaten i portalen som ikke var tegnet — temaets lister med 33 pikslers rader,
 * et kryss som var hvitt mot hvitt, og ingen luft øverst, så «Herre» lå klemt
 * inntil kanten av skjermen.
 *
 * Her får den de samme målene som resten: rader en finger treffer, skillelinjer
 * i «--rule», merkefargen der noe er valgt.
 */
@media (max-width: 992px) {
	/* Innrykket flytter fra skuffen til hver rad, så skillelinjene går fra kant
	   til kant og ikke stopper 15 piksler inne. */
	body.opsis-header-ikoner .col-full-nav {
		padding: 0;
		width: min(320px, 86vw);
		left: calc(-1 * min(320px, 86vw));
		box-shadow: 0 0 40px rgba(0, 0, 0, .12);
	}
	body.opsis-header-ikoner.mobile-toggled .col-full-nav { left: 0; }

	/* Luft nok øverst til at den første raden ikke ligger under krysset. */
	body.opsis-header-ikoner .col-full-nav .shoptimizer-primary-navigation {
		padding-top: 64px;
	}

	body.opsis-header-ikoner .col-full-nav ul.menu > li > a,
	body.opsis-header-ikoner .col-full-nav ul.sub-menu a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 0 20px;
		font-size: 16px;
		color: var(--ink);
	}

	body.opsis-header-ikoner .col-full-nav ul.menu > li > a {
		font-weight: 600;
	}
	body.opsis-header-ikoner .col-full-nav ul.menu > li + li {
		border-top: 1px solid var(--rule);
	}

	/* Underpunktene er de samme kategoriene som står i kolonner i mega-panelet
	   på et skrivebord. Her er de en innrykket liste under sitt eget punkt. */
	body.opsis-header-ikoner .col-full-nav ul.sub-menu a {
		min-height: 46px;
		padding-left: 36px;
		font-size: 15px;
		font-weight: 500;
		color: var(--ink-soft);
	}

	body.opsis-header-ikoner .col-full-nav .menu-item.current-menu-item > a,
	body.opsis-header-ikoner .col-full-nav .menu-item.current-menu-ancestor > a {
		color: var(--wc-org-primary-color, var(--ink));
	}

	/* Pilen er en trykkflate for seg — det er den som folder ut, mens ordet
	   ved siden av går til kategorien. 44 er det minste en finger treffer. */
	body.opsis-header-ikoner .col-full-nav .caret {
		width: 44px;
		min-height: 44px;
		color: var(--ink-faint);
	}

	/* Krysset som lukker. Temaet tegner det hvitt og legger det ti piksler til
	   høyre for skuffen — der sto det hvitt mot den hvite siden og fantes rett
	   og slett ikke, samtidig som det dekket handlekurvikonet. Det flytter inn
	   i skuffen, i hjørnet der en finger allerede leter etter det. */
	body.opsis-header-ikoner.mobile-toggled .mobile-menu.close-drawer {
		display: flex;
		align-items: center;
		justify-content: center;
		left: calc(min(320px, 86vw) - 58px);
		right: auto;
		top: 12px;
		width: 44px;
		height: 44px;
		border-radius: 999px;
		background: var(--stage);
		color: var(--ink);
	}
	body.opsis-header-ikoner.mobile-toggled .mobile-menu.close-drawer svg {
		width: 22px;
		height: 22px;
	}
}

/* Mega-panelet er skrivebordets, og skuffen er telefonens. Panelet bygges én
   gang og blir liggende i menyen, så uten dette fulgte det med inn i skuffen
   når vinduet ble smalnet. Og temaets egen undermeny — som panelet erstatter —
   er nettopp den skuffen folder ut, så den skjules bare over grensen.
   «!important» fordi temaet tegner undermenyen med egne, tyngre velgere. */
@media (max-width: 992px) {
	.opsis-mega { display: none !important; }
}
@media (min-width: 993px) {
	.opsis-temameny-skjult { display: none !important; }
}

/* Pilen ved menypunkter med undermeny. Temaet tegner den for den blå raden,
   der den var hvit mot blått; her får den samme farge som teksten. */
.opsis-header-single-row .main-header ul.menu > li.menu-item-has-children > .caret {
	display: inline-block;
	width: 9px;
	height: 9px;
	flex: none;
	border-right: 1.6px solid var(--ink-faint);
	border-bottom: 1.6px solid var(--ink-faint);
	transform: translateY(-3px) rotate(45deg);
	background: none;
	opacity: 1;
}
/* Punktet holder lenken og pilen på samme linje; uten dette faller pilen ned
   på en linje for seg selv. */
.opsis-header-single-row .main-header ul.menu > li.menu-item-has-children {
	display: flex;
	align-items: center;
	gap: 8px;
}
.opsis-header-single-row .main-header ul.menu > li.menu-item-has-children:hover > .caret {
	border-color: var(--wc-org-primary-color, var(--ink));
}

/* --- Toppen blir stående ---------------------------------------------------
   Kjøpskolonnen er lang: ti størrelser, logovalg, bestillingen og summen. Når
   den rulles, skal menyen og handlekurven fortsatt være der. Høyden lagres i
   en variabel, fordi bildespalten må vite hvor den skal stoppe. */

:root { --opsis-header-height: 73px; }

.opsis-header-single-row .site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--page);
}

/* Temaets egen klebrige topp ville lagt seg oppå denne. */
.opsis-header-single-row .sticky-wrapper,
.opsis-header-single-row .s-observer { display: none; }

/* --- Bunnlinjen -----------------------------------------------------------
   Den blå footeren inneholdt én linje tekst og tok likevel en tredjedel av
   skjermen når man kom til bunnen. Her er den en tynn hvit stripe som blir
   liggende nederst, med artikkelnummeret til venstre og opphavsretten til
   høyre. Den ligger fast, så innholdet må ha plass under seg. */

:root { --opsis-footer-height: 46px; }

.opsis-footer-fixed footer.copyright {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 150;
	padding: 0;
	/* Organisasjons-pluginen maler denne stripen i organisasjonens mørke farge
	   med !important. Her skal den være hvit som resten av rammen, så regelen
	   må møtes med samme våpen. */
	background: var(--page) !important;
	border-top: 1px solid var(--rule);
	color: var(--ink-soft);
}
.opsis-footer-fixed footer.copyright,
.opsis-footer-fixed footer.copyright * {
	color: var(--ink-soft);
}

.opsis-footer-fixed .opsis-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
	min-height: var(--opsis-footer-height);
	font-size: 12.5px;
	color: var(--ink-soft);
}
/* Opphavsretten ligger i en tekstwidget. Som flex-element krympet den til
   åtti piksler og brøt til én linje per ord. */
.opsis-footer-fixed .opsis-footer-inner .widget {
	flex: none;
	width: auto;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.opsis-footer-fixed .opsis-footer-inner .widget p { margin: 0; }

/* Produktmetaen sto alene under produktet, midtstilt og dyttet på plass med
   «position: relative; left: 605px». I bunnlinjen skal den ligge til venstre og
   følge raden, så forskyvningen nullstilles. */
.opsis-footer-fixed .opsis-footer-inner .product_meta {
	position: static;
	left: auto;
	right: auto;
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.opsis-footer-fixed footer.copyright a { color: var(--ink-soft); }
.opsis-footer-fixed footer.copyright a:hover { color: var(--wc-org-primary-color, var(--ink)); }

.opsis-footer-fixed .opsis-footer-inner .product_meta {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 12.5px;
}
.opsis-footer-fixed .opsis-footer-inner .product_meta > span { margin-right: 18px; }

.opsis-footer-fixed { padding-bottom: var(--opsis-footer-height); }

/* På telefon og nettbrett skal stripen ikke ligge fast. En skjerm på 844
   piksler har ikke 46 å avgi til en linje som alltid står der, og raden er
   bygget for én linje uten brekk: på et produkt med to kategorilinjer vokste
   den og la seg oppå størrelsene. Her blir den slutten av siden — den kommer
   når man har rullet ned, og innholdet trenger ingen plass under seg. */
@media (max-width: 992px) {
	.opsis-footer-fixed footer.copyright {
		position: static;
	}
	.opsis-footer-fixed { padding-bottom: 0; }

	/* En stripe som ikke ligger fast må ha noe å ligge under. På en kort side —
	   en konto uten en eneste bestilling, en tom handlekurv — sluttet innholdet
	   etter en tredjedel av skjermen, og opphavsretten ble stående midt oppe i
	   luften med tre hundre piksler hvitt under seg. Den så ut som en strek
	   noen hadde mistet, og ikke som slutten på siden.
	   Siden fyller skjermen i stedet, og stripen skyves ned til bunnen av den.
	   De tre faste barna — skuffen, sløret og minikurven — ligger utenfor
	   flyten og rører ikke denne kolonnen. */
	.opsis-footer-fixed .site {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;   /* uten adresselinjen, der nettleseren kan si det */
	}
	.opsis-footer-fixed .site > footer.copyright { margin-top: auto; }

	/* Artikkelnummeret og opphavsretten står under hverandre i stedet for å
	   konkurrere om en linje, og metaen får brekke i stedet for å kuttes med
	   ellipse — plassen finnes nå.

	   Innrykket er 16 og ikke 0: «col-full» regner sitt eget i prosent, og på en
	   telefon ble den prosenten så liten at opphavsretten sto klistret til
	   venstre kant. Det er den eneste linjen på hele siden som gjorde det. */
	.opsis-footer-fixed .opsis-footer-inner {
		flex-wrap: wrap;
		gap: 6px 24px;
		padding: 16px;
		min-height: 0;
	}
	.opsis-footer-fixed .opsis-footer-inner .product_meta {
		flex-basis: 100%;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.opsis-footer-fixed .opsis-footer-inner .widget {
		white-space: normal;
	}
}

/* --- Mega-panelet ---------------------------------------------------------
   Bygget av js/header.js fra menyen slik den står i wp-admin. Uten skriptet
   står temaets egen undermeny igjen og virker som før. */

/* Panelet skal måles mot toppen, ikke mot menypunktet. Temaet gir hvert
   menypunkt «position: relative» med en tyngre velger enn en enkel klasse, så
   den må slås med samme mynt — ellers blir panelet 89 piksler bredt og henger
   under ordet «Damer». Da er «header.site-header» nærmeste posisjonerte forelder
   (den er klebrig), og «left: 0; right: 0» blir hele vindusbredden. */
.opsis-header-single-row .main-header ul.menu > li.opsis-has-mega {
	position: static;
}

.opsis-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 60;
	display: none;
	background: var(--page);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .06);
}

/* Åpnes av tastaturet, og ellers av js/header.js — som setter klassen.
 *
 * «:hover» sto her og gjorde det samme, men uten nåde: panelet lukket seg i det
 * pekeren forlot ordet. Skal man fra «Herre» ned til «Bukser», som står i andre
 * kolonne, går den korteste veien på skrå — og på veien passerer den «Damer»,
 * som da åpnet sitt eget panel. Det eneste som virket var å føre pekeren rett
 * ned og så bortover. Nå er det skriptet som bestemmer, med en liten forsinkelse
 * før et nytt punkt overtar; se «vent» i js/header.js. */
.opsis-has-mega:focus-within > .opsis-mega,
.opsis-has-mega.opsis-mega-open > .opsis-mega {
	display: block;
}

/* Første kolonne står rett under ordet som åpnet panelet — venstrekanten settes
   av js/header.js, fordi den følger menypunktet og ikke er kjent på forhånd.
   Midtstilling var et skritt på veien: den flyttet listen bort fra logoen, men
   fortsatt ikke dit blikket allerede var. */
.opsis-mega-inner {
	display: flex;
	gap: 56px;
	padding: 28px 32px 34px;
}

@media (max-width: 992px) {
	.opsis-mega-inner { padding: 20px 16px 24px; }
}

.opsis-mega-head {
	display: block;
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

/* Temaet gjør hver nestede <ul> i menyen absolutt posisjonert, usynlig og
   utenfor flyten — det er slik undermenyene er bygget. Listene i panelet er
   vanlige lister og må ut av den behandlingen, ellers har kolonnen ingen høyde
   og lenke nummer to tegnes utenfor panelet, oppå siden under. */
/* En kolonne uten overskrift skal begynne på samme linje som lenkene i
   kolonnene som har en — ellers står «Bukser» i høyde med ordet «OVERDELER» og
   leses som enda en overskrift. */
.opsis-mega-col-uten-hode { padding-top: 30px; }

.opsis-header-single-row .main-header .opsis-mega ul.opsis-mega-list {
	position: static;
	display: block;
	visibility: visible;
	opacity: 1;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
	list-style: none;
}

.opsis-header-single-row .main-header .opsis-mega .opsis-mega-list li {
	margin: 0 0 9px;
	padding: 0;
	width: auto;
}

.opsis-header-single-row .main-header .opsis-mega .opsis-mega-list a {
	display: block;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--ink);
	background: none;
}

/* Merkefargen dukker opp der pekeren er, ikke som flate. */
.opsis-header-single-row .main-header .opsis-mega .opsis-mega-list a:hover,
.opsis-mega-head:hover {
	color: var(--wc-org-primary-color, var(--ink));
}

/* Punktet man står i toppen av mens panelet er åpent. */
.opsis-header-single-row .main-header ul.menu > li.opsis-has-mega:hover > a,
.opsis-header-single-row .main-header ul.menu > li.opsis-has-mega:focus-within > a {
	color: var(--wc-org-primary-color, var(--ink));
}


/* --- «Lagt i handlekurven» -------------------------------------------------
   Panelet som svarer på kjøpsknappen, i stedet for at siden hopper til
   handlekurven. Det henger under handlekurvikonet, altså i høyre kant av den
   samme raden, og lukkes med Esc, krysset eller et klikk utenfor.

   Fargen er organisasjonens, også på haken. Grønt ville vært en femte farge på
   en side som ellers holder seg til én, og kunden vet hva som gikk bra fordi
   det står skrevet. */

.opsis-added {
	position: fixed;
	top: calc(var(--opsis-header-height) + 8px);
	/* Samme 32 som raden over: panelets høyre kant følger logoens venstre
	   kant på den andre siden, og ikonet det henger under. */
	right: 32px;
	z-index: 300;
	width: 372px;
	max-width: calc(100vw - 32px);
	padding: 20px;
	background: var(--page);
	border: 1px solid var(--rule);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	animation: opsis-added-in .16s ease-out;
}
.opsis-added:focus { outline: none; }

@keyframes opsis-added-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.opsis-added { animation: none; }
}

.opsis-added-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.opsis-added-ok {
	display: block;
	flex: none;
	color: var(--wc-org-primary-color, var(--ink));
}
.opsis-added-ok svg { width: 22px; height: 22px; display: block; }

.opsis-added-head {
	flex: 1 1 auto;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink);
}

.opsis-added-close {
	flex: none;
	padding: 4px;
	margin: -4px -4px -4px 0;
	background: none;
	border: 0;
	border-radius: 8px;
	color: var(--ink-soft);
	cursor: pointer;
	transition: color .12s ease;
}
.opsis-added-close:hover { color: var(--ink); }
.opsis-added-close svg { width: 18px; height: 18px; display: block; }

.opsis-added-item {
	display: flex;
	gap: 14px;
	margin-bottom: 18px;
}

/* Den grå flaten bak miniatyren er den samme som under galleriets miniatyrer,
   så bildet står i noe det kjenner igjen fra siden det kom fra. */
.opsis-added-img {
	flex: none;
	width: 72px;
	height: 88px;
	object-fit: cover;
	background: var(--stage);
	border-radius: 8px;
}

.opsis-added-text { min-width: 0; }

.opsis-added-name {
	margin: 0 0 4px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
}

.opsis-added-line {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}

.opsis-added-sum {
	margin: 6px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

/* Knappene er produktsidens kjøpsknapp i mindre: samme pilleform, samme farge
   på den som fører videre. */
.opsis-added-btn {
	display: block;
	padding: 13px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.opsis-added-btn + .opsis-added-btn { margin-top: 8px; }

.opsis-added-secondary {
	background: var(--page);
	border: 1px solid var(--rule-strong);
	color: var(--ink);
}
.opsis-added-secondary:hover {
	border-color: var(--ink);
	color: var(--ink);
}

.opsis-added-primary {
	background: var(--wc-org-primary-color, var(--ink));
	border: 1px solid transparent;
	color: var(--page);
}
.opsis-added-primary:hover {
	background: var(--wc-org-secondary-color, var(--ink));
	color: var(--page);
}

/* Under 993 står toppen slik temaet bygde den, og den er 70 høy. Panelet
   legger seg over hele bredden med luft i kantene i stedet for å henge i et
   hjørne av en smal skjerm. */
@media (max-width: 992px) {
	.opsis-added {
		top: 78px;
		left: 12px;
		right: 12px;
		width: auto;
		max-width: none;
	}
}