/* ==========================================================================
   Forsiden — 2026-09-10

   Sju blokker under hverandre. Tre av dem er rader med produkter, og hvis alle
   tre har samme form blir siden ett langt teppe. Derfor har hver rad sin egen
   tetthet, kortstørrelse og bunn, og bunnene veksler mellom hvit og grå:

     kampanjefelt   organisasjonens farge   den eneste fargede flaten
     populært       hvit                    fire katalogkort
     favoritter     grå                     seks smale kort
     nyheter        hvit                    tre brede kort, bilde i 16:9
     om Opsis       grå                     tekst i to spalter
     bestill igjen  hvit                    en liste, ikke kort
     bunnfeltet     grå                     fire spalter

   Ingen to naboer har samme form, og skillet mellom dem er en flate, ikke en
   strek. Se «The front page» i docs/redesign.md.
   ========================================================================== */

.opsis-forside {
	--opsis-forside-bredde: 1200px;  /* teksten og kortene */
	--opsis-forside-luft: 64px;      /* mellom blokkene */
	--opsis-forside-kant: 24px;      /* minste avstand til skjermkanten */
}

/* Bredden settes her, ikke av temaets beholder.
 *
 * Malen kjører inne i «.col-full», men den beholderen er full skjermbredde med
 * 32 pikslers polstring på forsiden og har ingen maksbredde å arve — målt til
 * l=0 w=1440 på en 1440 piksler bred skjerm. Blokkene fant derfor hver sin
 * venstrekant: nyhetene og «bestill igjen» lå på null, produktraden på atten,
 * kortene i den på femti. Her sier forsiden selv hvor teksten begynner, og
 * ingenting avhenger av hva foreldretemaet gjør med beholderen sin. */
.opsis-forside-seksjon,
.opsis-forside-populaere {
	box-sizing: content-box;
	max-width: var(--opsis-forside-bredde);
	margin: var(--opsis-forside-luft) auto 0;
	padding-left: var(--opsis-forside-kant);
	padding-right: var(--opsis-forside-kant);
}

/* Feltene som går fra kant til kant. De tar bredden tilbake fra beholderen og
   sentrerer sitt eget innhold på nytt, i samme bredde som blokkene over.
   «max-width: none» fordi de samme feltene også er «opsis-forside-seksjon», og
   maksbredden der ville holdt igjen flaten de skal fylle. */
.opsis-forside-bred {
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(var(--opsis-forside-kant), calc(50vw - var(--opsis-forside-bredde) / 2));
	padding-right: max(var(--opsis-forside-kant), calc(50vw - var(--opsis-forside-bredde) / 2));
}

.opsis-forside > section:first-child {
	margin-top: 0;
}

.opsis-forside h2 {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 600;
	color: var(--ink);
}


/* --- 1. Kampanjefeltet ---------------------------------------------------
   Organisasjonens farge. Den er ikke pynt her: dette er stedet på siden der
   noe er nytt siden forrige innlogging, og fargen er det som sier det. Resten
   av forsiden er hvit og grå. */

.opsis-forside-felt {
	position: relative;
	overflow: hidden;          /* fotoet er klippet på skrå og skal ikke stikke ut */
	padding-top: 52px;
	padding-bottom: 52px;
	background: var(--wc-org-primary-color, var(--ink));
	color: #fff;
}
.opsis-forside-felt-inner {
	position: relative;
	z-index: 1;                /* over fotoet */
}

.opsis-forside-felt-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
}

/* Uten plagg å vise er feltet bare tekst, og da skal det ikke være like høyt.
   Et bredt felt med en overskrift oppe i venstre hjørne og ingenting til høyre
   er det samme tomme banneret dette erstattet — bare i en annen farge. Lavere,
   og teksten får bruke bredden. */
.opsis-forside-felt--bar {
	padding-top: 44px;
	padding-bottom: 44px;
}
.opsis-forside-felt--bar .opsis-forside-felt-tekst {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px 48px;
	max-width: none;
	width: 100%;
}
/* Teksten faller nedover i første spalte i den rekkefølgen den står i malen.
   Ingen av dem får en fast rad: merket er der bare når det er en kampanje, og et
   fast radnummer på ingressen la den oppå overskriften den dagen merket kom til. */
.opsis-forside-felt--bar .opsis-forside-merke,
.opsis-forside-felt--bar h1,
.opsis-forside-felt--bar .opsis-forside-ingress {
	grid-column: 1;
}
.opsis-forside-felt--bar .opsis-forside-merke {
	justify-self: start;   /* ellers strekker rutenettet det over hele spalten */
	margin-bottom: 4px;
}
.opsis-forside-felt--bar h1 {
	font-size: 34px;
}
.opsis-forside-felt--bar .opsis-forside-ingress {
	margin-top: 4px;
}
/* Knappen står ved siden av teksten og spenner over linjene den har, i stedet
   for å henge under den med luft over seg. Dette gjelder feltet med kampanje;
   uten kampanje står knappen i den nederste linja sammen med punktene. */
.opsis-forside-felt--bar .opsis-forside-cta {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	margin-top: 0;
}

/* --- Feltet uten kampanje: tekst, tre punkter og en knapp ------------------

   Her er det ikke noe nytt å melde, og da er feltet en presentasjon av
   portalen. Teksten faller nedover, og den nederste linja bærer punktene til
   venstre og knappen til høyre. Rutenettet fra kampanjeutgaven slås av: det
   har en høyre spalte det ikke er noe å sette i. */
.opsis-forside-felt--punkter .opsis-forside-felt-tekst {
	display: block;
	max-width: none;
}
.opsis-forside-felt-bunn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .22);
}
.opsis-forside-felt--punkter .opsis-forside-felt-punkter {
	margin: 0;
	padding: 0;
	border-top: 0;
}
.opsis-forside-felt--punkter .opsis-forside-cta {
	flex: none;
	margin: 0;
}

/* --- Fotoet ---------------------------------------------------------------

   Bedriftens eget bilde, i høyre del av feltet, med en skrå skjøt. Det er en
   flate og ikke et innhold: teksten står aldri oppå det, og fotoet står aldri
   oppå teksten.

   Skjøten er regnet ut fra den samme venstrekanten som feltet selv bruker, og
   ikke satt i prosent. Prosent flytter skjøten når vinduet endrer bredde, og da
   er det bare et spørsmål om tid før knappen i den nederste linja havner på
   fotoet. Her ligger den alltid 56 piksler til høyre for tekstspalten, uansett
   skjerm — og fordi skjøten stiger mot høyre, er bunnen det smaleste stedet og
   det eneste som må måles.

   Selve bildeflaten begynner i skjøten og ikke i skjermkanten. Det har lite å
   si for hva man ser av fargen, og alt å si for hva man ser av bildet: «cover»
   regner ut utsnittet fra flaten den fyller, og en flate som gikk under hele
   feltet gjorde utsnittet dobbelt så bredt som det synlige og zoomet bildet
   deretter. Nå er flaten det synlige, og midten av bildet er midten av kilen. */
.opsis-forside-felt--foto {
	--felt-tekst: 560px;
	--felt-skjot: calc(max(var(--opsis-forside-kant), 50vw - var(--opsis-forside-bredde) / 2) + var(--felt-tekst) + 56px);
	--felt-helling: 80px;

	/* Kilen har fast størrelse, og den er 2:1 — det samme forholdet bildet
	   beskjæres til. Uten den var høyden gitt av teksten og bredden av vinduet,
	   og da viste forsiden et annet utsnitt enn det redaktøren valgte: på 1440
	   ble 2:1 til 2,27:1, på 1920 til 3,1:1, og forskjellen er en stripe av
	   motivet som forsvinner oppe og nede.

	   Skjøten henger på tekstspalta, ikke på skjermkanten: alltid 56 piksler til
	   høyre for spalta, uansett hvor bredt vinduet er. Den forrige utgaven låste
	   bildet til høyre kant i stedet, og da vandret skjøten fra knappen når
	   vinduet ble bredere — 60 piksler unna på 1440, 300 på 1920, 620 på 2560.
	   Feltet er ett bilde, ikke to ting som driver fra hverandre.

	   Høyden følger av bredden, ikke av teksten: halve kilen, så bildet står i
	   2:1 — nøyaktig det formatet det beskjæres til — på enhver skjerm.

	   «clamp» setter et gulv så teksten alltid får plass, og et tak fordi et
	   felt som vokser med vinduet blir en plakat: uten tak er det 460 piksler
	   høyt på 1920 og 630 på 2560, og da er halve førsteskjermen brukt før
	   katalogen begynner. Taket er 340, så feltet holder seg mellom 312 og 340
	   uansett skjerm. Prisen står i regnskapet, målt: nøyaktig 2:1 opp til 1366,
	   2,04 på 1421, 2,07 på 1440 — og så stiger den, 2,42 på 1680, 2,78 på 1920,
	   3,72 på 2560. På en stor skjerm beskjæres bildet altså i høyden. De tre
	   tingene — lav stripe, skjøt som ikke vandrer, og bilde i 2:1 — går ikke i
	   hop på alle bredder, og dette er valget som ble tatt: de to første holdes,
	   den tredje gir etter der skjermen er bred nok til at det monner. Under
	   1280 finnes ikke kilen, og bildet er en stripe over teksten. */
	box-sizing: border-box;
	height: clamp(312px, calc((100vw - var(--felt-skjot)) / 2), 340px);
	display: flex;
	align-items: center;
}
.opsis-forside-felt--foto .opsis-forside-felt-inner {
	width: 100%;
}
/* Skjøten er regnet ut fra spalta, så spalta trenger ingen egen beregning:
   knappen står innenfor den, og avstanden til bildet er de samme 56 overalt. */
.opsis-forside-felt--foto .opsis-forside-felt-tekst {
	max-width: var(--felt-tekst);
}
.opsis-forside-felt-foto {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: var(--felt-skjot);
	z-index: 0;
	background-position: center;
	background-size: cover;
	/* Skrått hjørne oppe til venstre — resten av flaten er bildet. */
	clip-path: polygon(var(--felt-helling) 0, 100% 0, 100% 100%, 0 100%);
}

/* De tre punktene. De er grunnen til at feltet tåler å være bredt: en overskrift
   til venstre og en knapp helt ute til høyre lot midten stå tom, og et bredt
   felt med ingenting i midten leser som en feil og ikke som en flate.

   Punktene er opplysninger, ikke lenker, og står derfor mindre og dempet — de
   skal kunne leses én gang og så overses. Streken over dem skiller dem fra
   setningen uten å lage en ny blokk. */
.opsis-forside-felt-punkter {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .22);
	list-style: none;
}
.opsis-forside-felt-punkter li {
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-size: 14.5px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .88);
}
/* Haken tegnes i CSS: ett tegn mindre å oversette, og den arver fargen. */
.opsis-forside-felt-punkter li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 2px;
	width: 11px;
	height: 6px;
	border-left: 2px solid rgba(255, 255, 255, .75);
	border-bottom: 2px solid rgba(255, 255, 255, .75);
	transform: rotate(-45deg);
}

.opsis-forside-felt-tekst {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 560px;
}

.opsis-forside-felt h1 {
	margin: 0;
	font-size: 38px;
	line-height: 1.15;
	font-weight: 600;
	color: #fff;
}

/* Prosenten står over navnet, ikke i det: den er tallet, navnet er setningen. */
.opsis-forside-merke {
	display: inline-block;
	margin: 0 0 12px;
	padding: 5px 10px;
	border-radius: 4px;
	background: #f71249;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .2px;
	line-height: 1.2;
}

.opsis-forside-ingress {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

/* Knappen er hvit på farget bunn — omvendt av knappen på produktsiden, som er
   farget på hvit. Samme form, 999 og 58, så det er den samme knappen. */
.opsis-forside-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin-top: 26px;
	padding: 0 30px;
	border-radius: 999px;
	background: #fff;
	color: var(--wc-org-primary-color, var(--ink));
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.opsis-forside-cta:hover {
	background: rgba(255, 255, 255, .88);
	color: var(--wc-org-primary-color, var(--ink));
}

/* Plaggene kampanjen gjelder, når den gjelder utvalgte. Uten dem peker feltet
   på katalogen i sin helhet, og kunden må lete etter det den nettopp ble
   fortalt om. */
.opsis-forside-felt-plagg {
	display: flex;
	flex: none;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.opsis-forside-felt-plagg li {
	width: 132px;
	margin: 0;
}
.opsis-forside-felt-plagg a {
	/* Rabattmerket ligger i hjørnet av bildet inne i lenken — se
	   «--flis» i plugins/opsis-kampanjer/css/rabattmerke.css. Uten dette
	   ville det havnet i hjørnet av feltet i stedet. */
	position: relative;
	display: block;
	text-decoration: none;
	color: #fff;
}
.opsis-forside-felt-plagg img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 10px;
	border-radius: 10px;
	background: #fff;
}
.opsis-forside-felt-plagg span {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.3;
	color: rgba(255, 255, 255, .9);
}


/* «Se alle», til høyre for hver blokkoverskrift. Den er en handling og ikke en
   overskrift, så den står mindre og i organisasjonens farge — det eneste stedet
   fargen dukker opp igjen på den hvite delen av siden, og derfor nok til å bli
   sett uten å rope. Pila er tegnet i CSS: ett tegn mindre å oversette, og den
   flytter seg når pekeren er over, som er det som sier at den fører videre. */
.opsis-forside-mer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wc-org-primary-color, var(--ink));
	text-decoration: none;
	white-space: nowrap;
}
.opsis-forside-mer:hover {
	color: var(--wc-org-primary-color, var(--ink));
	text-decoration: underline;
	text-underline-offset: 3px;
}
.opsis-forside-mer-pil {
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .12s ease, margin-left .12s ease;
}
.opsis-forside-mer:hover .opsis-forside-mer-pil {
	margin-left: 3px;
}

/* «Bestill igjen» tegner overskriften sin selv og låner topplinja fra
   produktradene, så de tre blokkene har samme rad over seg. */
.opsis-forside-bestilt .opsis-favoritter-topp {
	margin-bottom: 20px;
}
.opsis-forside-bestilt .opsis-favoritter-topp h2 {
	margin: 0;
}


/* --- 1b. Kategoriene -----------------------------------------------------
   Fjorten små kort rett under feltet. De er en vei inn i katalogen og ikke en
   produktrad, så kortet er mindre enn katalogens og har verken pris eller
   hjerte — bare et plagg fra kategorien og navnet på den. */

.opsis-forside-kategorier {
	margin-top: 44px;
}

/* Veksleren står der «Se alle» står i de andre blokkene: ytterst til høyre på
   overskriftslinja. To knapper, og den valgte bærer organisasjonens farge —
   samme farge som lenkene, fordi det er den samme handlingen. */
.opsis-kategorier-veksler {
	display: flex;
	flex: none;
	gap: 4px;
	padding: 4px;
	border-radius: 999px;
	background: var(--stage);
}
.opsis-kategorier-knapp {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	border-radius: 999px;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink-soft);
	text-decoration: none;
	white-space: nowrap;
}
.opsis-kategorier-knapp:hover {
	color: var(--ink);
}
.opsis-kategorier-knapp.er-valgt {
	background: var(--page);
	color: var(--wc-org-primary-color, var(--ink));
	box-shadow: 0 1px 3px rgba(17, 17, 17, .10);
}

.opsis-kategoriliste {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* «display: grid» over slår «[hidden]», som bare er en nettleserregel på
   elementnivå — en klasse vinner over den. Uten dette sto begge listene under
   hverandre mens veksleren trodde den hadde skjult den ene. */
.opsis-kategoriliste[hidden] {
	display: none;
}
.opsis-kategoriliste li {
	margin: 0;
}
.opsis-kategoriliste a {
	display: block;
	text-decoration: none;
	color: var(--ink);
}

/* Plagget står på den grå flaten, som miniatyrene ellers på nettstedet, og
   rammen kommer først når pekeren er over: fjorten rammer på rad er et rutenett
   og ikke en meny. */
.opsis-kategori-bilde {
	display: block;
	aspect-ratio: 1;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--stage);
	overflow: hidden;
	transition: border-color .12s ease, background .12s ease;
}
.opsis-kategori-bilde img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
	mix-blend-mode: multiply;   /* studiobildene har hvit bunn */
}
.opsis-kategoriliste a:hover .opsis-kategori-bilde {
	border-color: var(--rule-strong);
	background: var(--page);
}

.opsis-kategori-navn {
	display: block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.opsis-kategoriliste a:hover .opsis-kategori-navn {
	color: var(--wc-org-primary-color, var(--ink));
}


/* --- 1c. Profilering -----------------------------------------------------
   Halve katalogen sto ikke på forsiden.

   Veksleren over har to knapper, Herre og Damer, og kategoriblokken stopper
   etter to grupper — så «Profilering», som er den tredje gruppen i menyen,
   falt ut. Målt på Autoexperten 14. september 2026 er 27 av 69 synlige varer
   profilering.

   Grå flate fra kant til kant, mellom to hvite. Det er den samme vekslingen
   resten av siden bruker, og den gjør at blokken leses som en egen ting og
   ikke som en tredje rad kategorikort. Bedriftens farge står ikke her:
   kampanjefeltet øverst er den eneste fargede flaten på siden, og en til rett
   under ville delt oppmerksomheten med den. */

.opsis-forside-profilering {
	padding-top: 48px;
	padding-bottom: 52px;
	background: var(--stage);
}

/* Overskriften og setningen under står til venstre, «Se alt» ytterst til
   høyre — samme linje som de andre blokkene har, men med to linjer tekst i
   stedet for én, så lenken må stilles til toppen og ikke til midten. */
.opsis-forside-profilering .opsis-favoritter-topp {
	align-items: flex-start;
	margin-bottom: 24px;
}

.opsis-forside-profilering h2 {
	margin: 0 0 6px;
}

.opsis-forside-profilering-tekst p {
	max-width: 52ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* Fem kort, ikke fjorten. Kategoriblokken over har sju i bredden fordi den er
   hele katalogen; her er det de fem–seks tingene profilering består av, og
   kort som er dobbelt så brede tåler bildet bedre. «auto-fit» og ikke et fast
   tall: listen skal utvides etter hvert som sortimentet gjør det, og et tall
   skrevet her ville vært stedet det stoppet. */
.opsis-profileringsliste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opsis-profileringsliste li {
	margin: 0;
}

/* Kortet står på hvitt mot den grå flaten — omvendt av kategorikortene over,
   som står på grått mot hvitt. Det er den samme vendingen som skiller
   favorittradene fra produktradene, og den gjør at et kort her ikke kan
   forveksles med et kort der selv om begge er et bilde og et navn. */
.opsis-profileringsliste a {
	display: block;
	height: 100%;
	box-sizing: border-box;
	padding: 16px 16px 18px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: var(--page);
	text-decoration: none;
	color: var(--ink);
	transition: border-color .12s ease, transform .12s ease;
}
.opsis-profileringsliste a:hover {
	border-color: var(--rule-strong);
	transform: translateY(-2px);
}

.opsis-profilering-bilde {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--stage);
	overflow: hidden;
}
.opsis-profilering-bilde img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	object-fit: contain;
	mix-blend-mode: multiply;   /* studiobildene har hvit bunn */
}

.opsis-profilering-navn {
	display: block;
	margin-top: 14px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.opsis-profileringsliste a:hover .opsis-profilering-navn {
	color: var(--wc-org-primary-color, var(--ink));
}

/* Tellingen. Kategorikortene over har ingen, og det er forskjellen som er
   poenget: «Giveaways · 11 varer» sier at det finnes noe der å se på, og det
   er nettopp det kunden ikke vet om denne halvdelen av katalogen. */
.opsis-profilering-antall {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-soft);
}


/* --- 2. Verdt å vite -----------------------------------------------------
   Kortet er en melding, ikke et produkt. Det har ingen ramme og ingen skygge:
   bildet øverst er kanten, og tittelen er det leseren avgjør på.

   Bildet er ett, i 16:9 over hele kortets bredde. En melding uten bilde er bare
   tekst: et grått felt der et bilde skulle vært er verre enn ingen ramme. */

.opsis-forside-nyhetsliste {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.opsis-forside-nyhet {
	margin: 0;
}

/* Formatet er låst til 16:9 i CSS og ikke bare i beskjæringen, så et bilde som
   er lastet opp i feil format fyller feltet i stedet for å endre kortets høyde. */
.opsis-forside-nyhetsbilde {
	margin: 0 0 14px;
	border: 1px solid var(--rule);
	border-radius: 12px;
	overflow: hidden;
	background: var(--stage);
}
.opsis-forside-nyhetsbilde img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Et opplastet motiv er valgt for feltet og skal fylle det. */
.opsis-forside-nyhetsbilde--motiv img {
	object-fit: cover;
}

/* Et plagg er ikke det. Produktbildene er hvite studiobilder av noe stående, og
   beskåret til 16:9 blir de et utsnitt av en erme. Plagget står helt, midt i
   feltet — og feltet er hvitt, ikke grått, fordi bildet har sin egen hvite
   bakgrunn og ellers tegner et lyst rektangel inne i et mørkere. */
.opsis-forside-nyhetsbilde--plagg {
	background: var(--page);
}
.opsis-forside-nyhetsbilde--plagg img {
	object-fit: contain;
	padding: 10px;
}

.opsis-forside-nyhet h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.opsis-forside-nyhet h3 a {
	color: inherit;
	text-decoration: none;
}
.opsis-forside-nyhet h3 a:hover {
	color: var(--wc-org-primary-color, var(--ink));
}

.opsis-forside-nyhet p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--ink-soft);
}

/* Fristen er den ene opplysningen som skal kunne leses uten å lese. */
.opsis-forside-nyhetsfrist {
	margin-top: 8px !important;
	font-weight: 600;
	color: var(--ink) !important;
}


/* --- 3. og 4. De to produktradene ---------------------------------------
   Begge er katalogens seksjon, men ikke i samme størrelse: fire kort i full
   bredde over seks smale på grå bunn. To like rutenett rett over hverandre
   leses som samme rad tegnet to ganger. */

/* Seksjonen bærer katalogens egne marger og en polstring på 32 piksler — den er
   skrevet for å stå alene i kontoen og på den gamle forsiden. På forsiden er
   avstanden til kanten allerede bestemt over, og uten dette sto overskriften og
   kortene 32 piksler lenger inn enn alt annet på siden. */
.opsis-forside-populaere,
.opsis-forside-favoritter {
	margin-bottom: 0;
}

/* Favorittene står på en grå flate i full bredde, med innholdet i samme bredde
   som resten. Maksbredden må vike her av samme grunn som i «bred». */
.opsis-forside-favoritter {
	max-width: none;
	margin: var(--opsis-forside-luft) calc(50% - 50vw) 0;
	padding: 40px max(var(--opsis-forside-kant), calc(50vw - var(--opsis-forside-bredde) / 2)) 44px;
	background: var(--stage);
}


/* --- 5. Om Opsis --------------------------------------------------------- */

.opsis-forside-om {
	padding-top: 52px;
	padding-bottom: 52px;
	background: var(--stage);
}

.opsis-forside-om-inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 56px;
}

.opsis-forside-om p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-soft);
}
/* Teksten er to avsnitt — hvem Opsis er, og hva portalen er. Uten luft mellom
   dem leses de som ett, og det andre avsnittet er det som angår kunden. */
.opsis-forside-om p + p {
	margin-top: 14px;
}

.opsis-forside-hjelp {
	padding: 26px 28px;
	border-radius: 12px;
	background: var(--page);
}

.opsis-forside-hjelp h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

/* Samme knapp, men på hvit bunn: fylt flate i organisasjonens farge. */
.opsis-forside-cta--linje {
	margin-top: 18px;
	background: var(--wc-org-primary-color, var(--ink));
	color: #fff;
}
.opsis-forside-cta--linje:hover {
	background: var(--wc-org-secondary-color, var(--ink));
	color: #fff;
}


/* --- 6. Bestill igjen ----------------------------------------------------
   En liste, ikke kort. Handlingen er en annen enn i radene over — ikke «se på»,
   men «det samme en gang til» — og en rad per plagg gjør at seks av dem tar en
   tredjedel av høyden seks kort ville tatt. */

.opsis-forside-bestiltliste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.opsis-forside-bestiltliste li {
	margin: 0;
	border-bottom: 1px solid var(--rule);
}

.opsis-forside-bestilt-lenke {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 0;
	color: var(--ink);
	text-decoration: none;
}

.opsis-forside-bestilt-bilde {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: var(--stage);
	overflow: hidden;
}
.opsis-forside-bestilt-bilde img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6px;
}

.opsis-forside-bestilt-navn {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15.5px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.opsis-forside-bestilt-pris {
	flex: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}
.opsis-forside-bestilt-pris del { font-weight: 500; color: var(--ink-faint); }
.opsis-forside-bestilt-pris .opsis-price-note { display: none; }

/* Knappen er en flate som først får farge under pekeren: seks fylte knapper
   under hverandre ville vært seks like sterke oppfordringer på rad. */
.opsis-forside-bestilt-knapp {
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 18px;
	border: 1px solid var(--rule-strong);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.opsis-forside-bestilt-lenke:hover .opsis-forside-bestilt-knapp {
	border-color: var(--wc-org-primary-color, var(--ink));
	background: var(--wc-org-primary-color, var(--ink));
	color: #fff;
}


/* --- 7. Bunnfeltet -------------------------------------------------------
   Bare på forsiden. Alle andre sider beholder den tynne stripen, som
   js/header.js lar være å feste her. */

.opsis-forside-bunn {
	margin-top: var(--opsis-forside-luft);
	padding-top: 48px;
	padding-bottom: 40px;
	background: var(--stage);
}

.opsis-forside-bunn-inner {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.opsis-forside-bunn h3 {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--ink);
}

.opsis-forside-bunn p,
.opsis-forside-bunn a {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.opsis-forside-bunn p { margin: 0; }
.opsis-forside-bunn ul { margin: 0; padding: 0; list-style: none; }
.opsis-forside-bunn li { margin: 0; }
.opsis-forside-bunn a { text-decoration: none; }
.opsis-forside-bunn a:hover { color: var(--wc-org-primary-color, var(--ink)); }

/* Vilkårene. De hører til kjøpet og ikke til portalen, så de står for seg selv
   under spaltene, i mindre skrift og på én linje. */
.opsis-forside-bunn-vilkar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 26px;
	margin: 32px 0 0 !important;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}
.opsis-forside-bunn-vilkar a {
	font-size: 13.5px;
}

/* Opphavsretten står i bunnfeltet, ikke under det.
   Den tegnes av foreldretemaet etter malen vår, som en egen stripe med hvit
   bunn — og på forsiden leste den som en fjerde flate etter at den grå nettopp
   hadde avsluttet siden. Her får den bunnfeltets farge og legger seg inntil
   det, så feltet ender med den i stedet for ved siden av den. Teksten er
   fortsatt tekstmodulen Opsis selv redigerer; bare flaten er vår. */
body.home.opsis-footer-fixed footer.copyright,
body.home footer.copyright {
	position: static;
	margin-top: 0;
	padding-top: 16px;
	padding-bottom: 28px;
	/* Organisasjons-pluginen maler stripen med !important, og header.css møter
	   den med det samme. Her må det tredje laget bruke samme våpen. */
	background: var(--stage) !important;
	border-top: 0;
}
body.home .opsis-footer-inner {
	min-height: 0;
}
body.home .opsis-forside-bunn {
	padding-bottom: 18px;
}


/* --- Foreløpig innhold ---------------------------------------------------
   Brukes ikke lenger på forsiden: «Om Opsis» og bunnfeltet har Opsis sine egne
   opplysninger. Reglene står igjen fordi merket er nyttig neste gang noe venter
   på tekst. */

.opsis-forside-forelopig {
	margin-top: 10px !important;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #b45309 !important;
}

.opsis-forside-bunn-merknad {
	margin: 28px 0 0 !important;
}


/* --- Smalere skjermer ---------------------------------------------------- */

/* Under 1280 er det ikke plass til 640 piksler bilde ved siden av en tekstspalte
   som fortsatt er til å lese. Da ryker kilen, og bildet blir en stripe over
   teksten, fra kant til kant. Fast høyde og fast kile gir ingen mening der. */
@media (max-width: 1279px) {
	.opsis-forside-felt--foto { display: block; height: auto; padding-top: 212px; }
	.opsis-forside-felt--foto .opsis-forside-felt-tekst { max-width: none; }
	.opsis-forside-felt-foto { left: 0; bottom: auto; height: 180px; clip-path: none; }
}

@media (max-width: 992px) {
	.opsis-forside {
		--opsis-forside-luft: 44px;
		--opsis-forside-kant: 16px;
	}
	.opsis-forside-felt-inner { flex-direction: column; align-items: flex-start; gap: 28px; }
	/* Skjøten gir ikke mening når teksten tar hele bredden. Fotoet legger seg
	   som en stripe øverst i stedet, fra kant til kant og uten klipp, og feltet
	   får polstring nok til å bære den. */
	.opsis-forside-felt-bunn { flex-wrap: wrap; }
	.opsis-forside-felt--bar .opsis-forside-felt-tekst { grid-template-columns: minmax(0, 1fr); }
	.opsis-forside-felt--bar .opsis-forside-cta { grid-column: 1; grid-row: auto; margin-top: 14px; justify-self: start; }
	.opsis-forside-felt h1 { font-size: 30px; }
	.opsis-forside-om-inner { grid-template-columns: 1fr; gap: 28px; }
	.opsis-kategoriliste { grid-template-columns: repeat(4, 1fr); }
	.opsis-forside-nyhetsliste { grid-template-columns: repeat(2, 1fr); }
	.opsis-forside-bunn-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

@media (max-width: 768px) {
	.opsis-forside-felt { padding-top: 36px; padding-bottom: 36px; }
	/* Regelen over setter polstringen på nytt, og uten dette legger fotostripa
	   seg oppå teksten på telefon. */
	.opsis-forside-felt--foto { padding-top: 184px; }
	.opsis-forside-felt-foto { height: 156px; }
	.opsis-forside-felt h1 { font-size: 26px; }
	.opsis-kategoriliste { grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.opsis-kategori-navn { font-size: 13px; }

	/* «auto-fit» med et gulv på 190 gir én spalte på en telefon, og fem kort
	   med et bilde i 4:3 hver blir en skjermlengde å rulle gjennom for en
	   blokk som ikke er det man kom for. To i bredden er halve rullingen, og
	   et kort på 160 piksler er fortsatt et kort man ser hva er. */
	.opsis-profileringsliste { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.opsis-profileringsliste a { padding: 10px 10px 12px; }
	.opsis-profilering-navn { margin-top: 10px; font-size: 14px; }

	/* Overskriften, setningen og «Se alt» under hverandre. Lenken har ikke
	   plass ved siden av en overskrift på en telefon, og presset teksten
	   sammen til to ord per linje. */
	.opsis-forside-profilering .opsis-favoritter-topp { flex-wrap: wrap; }
	.opsis-forside-profilering-tekst { flex: 1 1 100%; }
	.opsis-forside-felt-plagg { flex-wrap: wrap; }
	.opsis-forside-felt-plagg li { width: calc(50% - 6px); }
	.opsis-forside-nyhetsliste { grid-template-columns: 1fr; }

	/* Prisen og knappen får ikke plass ved siden av navnet på en telefon.
	   Miniatyren og navnet blir stående i rad, resten faller under. */
	.opsis-forside-bestilt-lenke { flex-wrap: wrap; gap: 12px; }
	.opsis-forside-bestilt-navn { flex: 1 1 60%; white-space: normal; }
	.opsis-forside-bestilt-knapp { margin-left: auto; }
}