@charset "UTF-8";
/* ==========================================================================
   Berco. Designutkast, steg 3
   Palett og regler er hentet fra design/logo/FARGEBRUK.md og merkevaremanualen.
   Alle kontrastforhold i kommentarene er målt, ikke antatt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Merkevarens seks faste farger. Rollene er ikke forhandlingsbare. */
  --espresso:  #1F1815;
  --kaffebrun: #3A2C22;
  --bronse:    #B08E5E;
  --kraft:     #C7AC97;
  --krem:      #F0E8DC;
  --papir:     #FFFFFF;

  /* Lyst tema, papirflate */
  --ground:      var(--krem);
  --sheet:       #F5F0E8;   /* varmt ark, ikke rent hvitt. 15,44 mot ink */
  --ink:         #1F1815;   /* 14,40 mot ground */
  --ink-2:       #5D4E43;   /*  6,56 mot ground */
  --ink-3:       #6F6055;   /*  4,97 mot ground */
  --line:        #DDCFBE;   /* dekorativ hårlinje */
  --line-strong: #C2AF9B;
  --emboss:      rgba(31, 24, 21, .07);
  --preg-inn:    inset 0 1px 2px rgba(31, 24, 21, .11), inset 0 0 0 1px rgba(31, 24, 21, .05);
  --preg-ut:     0 1px 0 rgba(255, 255, 255, .72), 0 1px 3px rgba(31, 24, 21, .07);
  --varm-hover:  rgba(199, 172, 151, .26);   /* kraft, ikke hvitt */

  /* Mørke seksjoner inne i lyst tema */
  --band:        var(--espresso);
  --band-2:      var(--kaffebrun);   /* gradientens andre ende */
  --band-ink:    var(--krem);   /* 14,40 mot espresso */
  --band-ink-2:  #D4C8BC;       /* 10,66 rent, 4,60 under full lakk */
  --band-line:   rgba(240, 232, 220, .16);
  --band-foil:   var(--bronse); /* kun hårlinjer og merket */

  /* Kraftflater tar kun espressotekst, 8,15. Dempet tekst finnes ikke der. */
  --kraft-ink:   var(--espresso);

  /* Typografi */
  --f-display: Prata, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: Archivo, "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 5.2vw, 4.1rem);
  --fs-h1:      clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h2:      clamp(1.7rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-lead:    1.125rem;
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .6875rem;

  /* Rom */
  --maxw: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --sp-section: clamp(72px, 9vw, 120px);
  --sp-block: clamp(40px, 5vw, 72px);
  --radius: 2px;

  /* Bevegelse */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --t-press: 160ms;
  --t-fast: 200ms;
  --t-base: 280ms;
  --t-slow: 520ms;

  /* Stablingsrekkefølge, semantisk, aldri vilkårlige tall.
     Bakteppet ligger under skuffen, ikke over den. */
  --z-sticky: 10;
  --z-nedtrekk: 20;
  --z-bakteppe: 30;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;
  --z-tooltip: 70;

  /* Kornstruktur. Papir er ikke en flat farge.
     Støyen bæres i alfakanalen, ikke i lysheten. Ellers gråner den kremfargen. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .09 0 0 0 0 .08 .1 .1 .1 0 -.13'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-lys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .91 0 0 0 0 .86 .11 .11 .11 0 -.14'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Venstrekant i flukt med .wrap, for flater som bryter beholderen. */
  --kant: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #171210;
    --sheet:       #211A16;
    --ink:         #EFE6DA;  /* 15,04 mot ground */
    --ink-2:       #B9A99A;  /*  8,14 mot ground */
    --ink-3:       #A2907F;  /*  6,04 mot ground */
    --line:        #382D26;
    --line-strong: #4A3B31;
    --emboss:      rgba(0, 0, 0, .3);
    --preg-inn:    inset 0 1px 2px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(0, 0, 0, .2);
    --preg-ut:     0 1px 0 rgba(240, 232, 220, .07), 0 1px 3px rgba(0, 0, 0, .3);
    --varm-hover:  rgba(240, 232, 220, .07);

    --band:        #2A211C;  /* løftet fra grunnen så seksjonen fortsatt leser */
    --band-2:      #3A2C22;
    --band-ink:    #EFE6DA;  /* 12,76 mot band */
    --band-ink-2:  #B9A99A;  /*  6,91 mot band */
    --band-line:   rgba(240, 232, 220, .13);
    --band-foil:   #C8A473;
  }
}

:root[data-theme="dark"] {
  --ground: #171210; --sheet: #211A16;
  --ink: #EFE6DA; --ink-2: #B9A99A; --ink-3: #A2907F;
  --line: #382D26; --line-strong: #4A3B31; --emboss: rgba(0, 0, 0, .3);
  --band: #2A211C; --band-ink: #EFE6DA; --band-ink-2: #B9A99A;
  --band-line: rgba(240, 232, 220, .13); --band-foil: #C8A473;
}

/* --------------------------------------------------------------------------
   2. Grunnlag
   -------------------------------------------------------------------------- */

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

/* [hidden] taper mot enhver display-erklæring med klassespesifisitet. Det har
   allerede bitt oss to ganger (filraden i skjemaet, kaskadegruppene i
   kontaktskjemaet), så regelen settes én gang og gjelder alt. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Menyskuffen står parkert utenfor høyre kant og teller ellers som overflyt.
     `clip` og ikke `hidden`: hidden ville gjort loddrett akse til auto og
     brutt den klebrige toppen. */
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--ground);
  background-image: var(--grain);
  background-size: 180px 180px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* På mørk grunn må kornet være lyst, ellers forsvinner det. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background-image: var(--grain-lys); }
}
:root[data-theme="dark"] body { background-image: var(--grain-lys); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}
.band :focus-visible { outline-color: var(--band-ink); }

::selection { background: var(--espresso); color: var(--krem); }

.hoppelenke {
  position: absolute; left: var(--gut); top: 0;
  transform: translateY(-140%);
  z-index: var(--z-toast);
  background: var(--espresso); color: var(--krem);
  padding: 14px 22px; font-weight: 500; text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.hoppelenke:focus { transform: translateY(0); }

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

/* --------------------------------------------------------------------------
   3. Layoutprimitiver
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.wrap--smal { max-width: 780px; }

.seksjon { padding-block: var(--sp-section); }
.seksjon--tett { padding-block: var(--sp-block); }

/* Espressoflate. Bryter beholderen med vilje. Det er det sorte silkepapiret. */
.band {
  background-color: var(--band);
  background-image: var(--grain-lys);
  background-size: 180px 180px;
  color: var(--band-ink);
}
.band h1, .band h2, .band h3 { color: var(--band-ink); }
.band .dempet { color: var(--band-ink-2); }
.band a { color: var(--band-ink); }

.dempet { color: var(--ink-2); }
.fin { color: var(--ink-3); font-size: var(--fs-small); }
/* --ink-3 er tunet for lys bunn og faller til 2,9:1 paa espresso. */
.band .fin { color: var(--band-ink-2); }

.lede { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; line-height: 1.6; }
.prosa { max-width: 68ch; }

.merkelapp {
  display: inline-block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink-3);
}
.band .merkelapp { color: var(--band-ink-2); }

/* Seksjonshode: smal etikettkolonne, bred tekstkolonne. */
.shode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: var(--sp-block);
}
.shode > :first-child { max-width: 22ch; }
/* «Netthandelesker i kartong» brakk med en enslig «i» paa egen linje.
   balance jevner linjene der stoetten finnes, og koster ingenting ellers. */
.shode h1 { text-wrap: balance; }
/* Tett variant for sider der noe stort skal vises rett under overskriften,
   som butikkarusellen: hele blokkmargen ville dyttet bildet under bretten. */
.shode--tett { margin-bottom: clamp(20px, 2.6vw, 34px); }
/* Bunnmargen finnes for aa skille overskriften fra det som kommer under. Er
   det ingenting under, legger den seg bare oppaa seksjonens egen luft. */
.shode:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .shode { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .shode > :first-child { max-width: none; }
}

.regel { border: 0; border-top: 1px solid var(--line); margin: 0; }
.band .regel { border-top-color: var(--band-line); }

/* --------------------------------------------------------------------------
   4. Knapper
   -------------------------------------------------------------------------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-fast) ease,
              color var(--t-fast) ease,
              border-color var(--t-fast) ease;
}
.knapp:active { transform: scale(.97); }

.knapp--primar { background: var(--espresso); color: var(--krem); border-color: var(--espresso); }
.knapp--sekundar { background: transparent; color: var(--ink); border-color: var(--ink); }

/* På mørk flate snus forholdet. Krem blir blekket. */
.band .knapp--primar { background: var(--krem); color: var(--espresso); border-color: var(--krem); }
.band .knapp--sekundar { color: var(--band-ink); border-color: var(--band-ink); }

.knapp--liten { min-height: 44px; padding: 0 20px; font-size: var(--fs-small); }

@media (hover: hover) and (pointer: fine) {
  .knapp--primar:hover { background: var(--kaffebrun); border-color: var(--kaffebrun); }
  .band .knapp--primar:hover { background: var(--kraft); border-color: var(--kraft); color: var(--espresso); }
  .knapp--sekundar:hover { background: var(--emboss); }
  .band .knapp--sekundar:hover { background: rgba(240, 232, 220, .1); }
}

@media (max-width: 620px) {
  .knapp { min-height: 52px; width: 100%; }
  .knapp--liten { width: auto; }
}

/* Telefonknappen står aldri uten navn. */
.telefon { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.telefon strong { font-weight: 500; }

.knapperad { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* Tekstlenke med understrek som vokser ut fra venstre. */
.lenke {
  display: inline-block;
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .lenke:hover { background-size: 0 1px; background-position: 100% 100%; }
}

/* --------------------------------------------------------------------------
   5. Materialflater
   Plater erstatter foto som ennå ikke er tatt. De skal se ut som et valg,
   ikke som et hull. Materialet bærer flaten, teksten sier hva som mangler.
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 220px;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: 180px 180px;
}
.plate--kraft {
  background-color: var(--kraft);
  color: var(--kraft-ink);
  /* Fiberretning i ubleket masse. */
  background-image: var(--grain),
    repeating-linear-gradient(96deg, rgba(31,24,21,.032) 0 1px, transparent 1px 4px);
  background-size: 180px 180px, auto;
}
.plate--espresso { background-color: var(--espresso); color: var(--krem); background-image: var(--grain-lys); }
.plate--kaffebrun { background-color: var(--kaffebrun); color: var(--krem); background-image: var(--grain-lys); }
.plate--krem {
  background-color: var(--krem); color: var(--espresso);
  background-image: var(--grain);
  box-shadow: inset 0 0 0 1px var(--line);
}

.plate__note {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding: 18px 24px;
  line-height: 1.7;
  max-width: 34ch;
}
.plate--espresso .plate__note,
.plate--kaffebrun .plate__note { color: #D4C8BC; } /* 7,16 mot espresso */
.plate--kraft .plate__note { color: var(--espresso); }

/* Bronse opptrer kun som hårlinje, og kun på mørk bunn. */
.plate--foliert::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--bronse);
  pointer-events: none;
}

/* Ekte foto i en plate. Rammen beholder sideforholdet og folien, bildet fyller
   den og beskjaeres av `cover`. Da slipper vi ett utsnitt per plassering.
   `::after` staar etter barna i dokumentet, saa foliekanten ligger fortsatt
   over bildet. */
.platefoto { position: absolute; inset: 0; display: block; }
.platefoto img { width: 100%; height: 100%; object-fit: cover; }

/* Et staaende motiv i en liggende ramme mister halve hoyden. Standard er midt
   paa, som her ville truffet mellom haandtak og bunn. Utsnittet flyttes ned,
   saa posen og trykket blir staaende igjen. Verdien er maalt mot
   plastbaereposefotoet, der posen slutter 91 % nede i kilden. 82 % er den
   verdien som faar med hele posen paa alle vindushoyder fra 700 px og opp,
   og som samtidig beholder haanden som holder den fra 900 px og opp. */
.platefoto--lavt img { object-position: center 82%; }
.plate:has(.platefoto) { background-image: none; }

/* Frilagte produktfoto (katalog-egne, png med alfa): ingen plate bak.
   Produktet staar rett paa sidens egen bakgrunn, tekstur og alt, og flyter
   litt over en buet gulvskygge. Gapet mellom posebunn og skygge er selve
   flyte-foelelsen: bunnluften i paddingen er stoerre enn skyggens avstand
   fra kanten. */
.plate:has(.platefoto--frilagt),
.varekort__bilde:has(.platefoto--frilagt) { background: none; }
.platefoto--frilagt img {
  object-fit: contain;
  padding: 4% 4% 10%;
  /* Tett konturskygge som tegner kanten paa hvite flater. */
  filter: drop-shadow(0 2px 3px rgba(31, 24, 21, 0.14))
          drop-shadow(0 12px 22px rgba(31, 24, 21, 0.10));
}

/* Avgrenset bildecontainer paa produktsiden. Frilagte foto laa foer paa et
   kraftfelt som gikk helt ut til venstre sidekant. Det ga stort bilde, men
   ingen ramme: produktet svevde i et felt uten begynnelse eller slutt, og
   kraftfargen la seg tett opptil den brune posen. Containeren gir fotoet en
   tydelig kant og en lys flate aa staa mot. Flaten er det varme arket, ikke
   rent hvitt: mot rent hvitt forsvinner en hvit vare, og papirbaereposen er
   nettopp hvit. Arket er dessuten den flaten avgrensede paneler ellers har
   paa siden. Kanten er den samme haarlinjen som paa andre lyse flater, og
   luften er stoerre i bunnen enn i toppen, saa gulvskyggen faar plass uten
   aa treffe kanten. */
.plate.plate--vare {
  background: var(--sheet);
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
.plate--vare .platefoto--frilagt img { padding: 10% 10% 13%; }

.platefoto--frilagt::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2.2%;
  width: 54%; height: 5%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
              rgba(31, 24, 21, 0.28), rgba(31, 24, 21, 0.10) 60%, transparent 100%);
  pointer-events: none;
}

/* Naar sideforholdet er satt, er det sideforholdet som definerer boksen.
   `min-height` fra `.plate` maa da vekk: paa smal skjerm ville 220 px hoyde
   og 16/9 gitt 391 px bredde i en kolonne paa 335, og bildet ble klippet av
   `overflow-x: clip` uten at noe saa ut som en feil. */
.plate--bred, .plate--vid, .plate--kvadrat, .plate--hoy { min-height: 0; }

.plate--bred { aspect-ratio: 21 / 9; }
.plate--vid { aspect-ratio: 16 / 9; }
.plate--kvadrat { aspect-ratio: 1; }
.plate--hoy { aspect-ratio: 4 / 5; }
@media (max-width: 620px) { .plate--bred { aspect-ratio: 3 / 2; } }

/* Hevet ark */
.ark {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--emboss);
}

/* --------------------------------------------------------------------------
   6. Topp og navigasjon
   -------------------------------------------------------------------------- */

.topp {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .topp { background: var(--ground); } }

.topp__rad {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 76px;
}

.logo { display: block; flex: 0 0 auto; }
/* 34 px opprinnelig, oekt 20 % 07.09. Topplinjen er 76 px hoy, saa merket
   staar fortsatt med luft over og under. */
.logo img { height: 41px; width: auto; }
.logo .logo--neg { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo .logo--pos { display: none; }
  :root:not([data-theme="light"]) .logo .logo--neg { display: block; }
}
:root[data-theme="dark"] .logo .logo--pos { display: none; }
:root[data-theme="dark"] .logo .logo--neg { display: block; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a {
  font-size: .9375rem;
  text-decoration: none;
  padding: 8px 0;
  position: relative;
  color: var(--ink-2);
  transition: color var(--t-fast) ease;
}
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }
}

.topp__hoyre { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.topp__logginn {
  font-size: .9375rem; text-decoration: none; color: var(--ink-2);
  padding-left: 18px; border-left: 1px solid var(--line);
}

.meny-lukk { display: none; }

.meny-knapp {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; color: var(--ink);
}
.meny-knapp svg { width: 20px; height: 20px; }

@media (max-width: 1020px) {
  /* backdrop-filter gjør .topp til containing block for fastposisjonerte barn,
     og skuffen blir fanget inne i toppraden. Solid topp på mobil i stedet. */
  .topp { backdrop-filter: none; background: var(--ground); }

  /* Skuffen bor inne i .topp, så .topp må selv ligge over bakteppet, ellers
     dempes menyen sammen med siden. Lukkeknappen står her og skal være klikkbar. */
  .topp { z-index: var(--z-drawer); }

  .meny-knapp { display: inline-flex; }
  .meny-lukk {
    display: grid; place-items: center;
    position: absolute; top: 24px; right: var(--gut);
    width: 48px; height: 48px;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink); cursor: pointer;
    transition: transform var(--t-press) var(--ease-out);
  }
  .meny-lukk:active { transform: scale(.94); }
  .meny-lukk svg { width: 20px; height: 20px; }
  .topp__hoyre .topp__logginn { display: none; }
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(360px, 86vw);
    z-index: var(--z-drawer);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    padding: 96px var(--gut) 40px;
    background: var(--sheet);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--t-base) var(--ease-out), visibility var(--t-base);
  }
  .nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .nav a {
    font-size: 1.125rem; padding: 16px 0;
    border-bottom: 1px solid var(--line); color: var(--ink);
  }
  .nav a::after { display: none; }
  .nav .nav__logginn { display: block; }
}
@media (min-width: 1021px) { .nav .nav__logginn { display: none; } }

.sperre {
  position: fixed; inset: 0; z-index: var(--z-bakteppe);
  background: rgba(31, 24, 21, .5);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--ease-out), visibility var(--t-base);
}
.sperre[data-open="true"] { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   7. Karusell
   Nyhet og sesong roterer i aktueltstripen i stedet for i heroen. Der gjorde
   rotasjonen at USP-ene, som skal stå alltid, var skjult to tredjedeler av
   tiden. Her er innholdet sekundært, og rotasjon koster ingenting.
   -------------------------------------------------------------------------- */

.karusell { position: relative; }
.karusell__spor { display: grid; }

.karusell__post {
  grid-area: 1 / 1;
  display: grid;
  /* Bildet baerer posten: 7 av 12 kolonner til motivet, resten til teksten. */
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease-out),
              filter var(--t-slow) var(--ease-out),
              visibility var(--t-slow);
}
.karusell__post[data-aktiv="true"] { opacity: 1; visibility: visible; }
/* Uskarphet binder de to sakene sammen i krysstoningen. */
[data-js] .karusell__post:not([data-aktiv="true"]) { filter: blur(6px); }

.karusell__post .plate { aspect-ratio: 16 / 10; min-height: 0; }

.karusell__tekst { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.karusell__tekst h2 { font-size: var(--fs-h3); }
.karusell__tekst p { color: var(--ink-2); max-width: 52ch; }

.fakta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--ink-3); }
.fakta li { display: flex; align-items: center; gap: 16px; }
.fakta li:not(:last-child)::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .6;
}

.karusell__styring {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: 20px; border-top: 1px solid var(--line);
}
.karusell__prikker { display: flex; gap: 8px; }
.karusell__prikk {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.karusell__prikk::before {
  content: ""; display: block; width: 26px; height: 3px;
  background: var(--ink); opacity: .26;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.karusell__prikk[aria-selected="true"]::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .karusell__prikk:hover::before { opacity: .7; transform: scaleY(1.6); }
}

.karusell__piler { display: flex; gap: 10px; }
.karusell__pil {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;
}
.karusell__pil:active { transform: scale(.94); }
.karusell__pil svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .karusell__pil:hover { background: var(--espresso); border-color: var(--espresso); color: var(--krem); }
}

@media (max-width: 760px) {
  .karusell__post { grid-template-columns: 1fr; gap: 20px; }
  .karusell__post .plate { aspect-ratio: 3 / 2; }
}

/* USP-oppstilling: spesifikasjonsark, ikke ikonkort. */
.usp { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.band .usp { border-top-color: var(--band-line); }
.usp li { padding: 18px 22px 18px 0; border-bottom: 1px solid var(--line); }
.band .usp li { border-bottom-color: var(--band-line); }
.usp li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 22px; }
.band .usp li:nth-child(odd) { border-right-color: var(--band-line); }

/* Hoyre kolonne stod klistret inntil skillelinjen: venstre celle hadde 22 px
   luft foer den, hoyre hadde null etter. Gutteren gjoeres symmetrisk, og begge
   ytterkantene staar i flukt med resten av tekstkolonnen. Firekolonnersraden
   under heroen har sin egen inndeling og holdes utenfor. */
.usp:not(.usp--rad) li:nth-child(even) { padding-left: 22px; padding-right: 0; }
.usp b { display: block; font-weight: 500; font-size: 1rem; margin-bottom: 3px; }
.usp span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; display: block; }
.band .usp span { color: var(--band-ink-2); }
@media (max-width: 620px) {
  .usp { grid-template-columns: 1fr; }
  .usp li:nth-child(odd) { border-right: 0; padding-right: 0; }
  /* Maa gjenta `:not(.usp--rad)` fra regelen over. Uten den taper
     nullstillingen paa spesifisitet, og de 22 pikslene som gir symmetrisk
     gutter mellom to kolonner blir staaende som et innrykk paa annethvert
     punkt naar listen faller til én kolonne. */
  .usp:not(.usp--rad) li:nth-child(even) { padding-left: 0; }
}

/* --------------------------------------------------------------------------
   8. Tallrad, spesifikasjonsark, ikke nøkkeltallmal
   -------------------------------------------------------------------------- */

.tall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.tall li {
  padding: 26px 26px 26px 0;
  border-bottom: 1px solid var(--line);
}
.tall li:not(:last-child) { border-right: 1px solid var(--line); }
.tall li:not(:first-child) { padding-left: 26px; }
.tall__verdi {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 4.6vw, 3.4rem);
  line-height: 1;
  display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.tall__verdi small { font-family: var(--f-body); font-size: var(--fs-small); color: var(--ink-3); }
.tall__navn { display: block; margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); max-width: 24ch; }
@media (max-width: 760px) {
  .tall { grid-template-columns: 1fr; }
  .tall li { padding: 20px 0; border-right: 0 !important; padding-left: 0 !important; }
}

/* --------------------------------------------------------------------------
   9. Produktfliser
   Sokkel i materialet, tekst på sidegrunnen. Ingen ramme rundt hele flisen.
   -------------------------------------------------------------------------- */

.rutenett { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: clamp(20px, 3vw, 34px); }
.rutenett--to { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Industrikategoriene er fem, og i fire kolonner blir siste rad staaende
   alene med ett kort. Tre kolonner gir 3 pluss 2 og nesten 100 px bredere
   bilder, som disse motivene trenger mer enn butikkens naerbilder. */
.rutenett--tre { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* Butikkens tolv kategorifliser gaar ogsaa to i bredden paa telefon, saa
   oversikten faar plass paa et par skjermhoeyder. */
@media (max-width: 760px) {
  .rutenett--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .rutenett--tre .flis__navn { font-size: var(--fs-small); }
  .rutenett--tre .flis__meta { display: none; }
}

.flis { display: flex; flex-direction: column; gap: 16px; text-decoration: none; }
.flis__sokkel { position: relative; overflow: hidden; border-radius: var(--radius); }
.flis__sokkel .plate { border-radius: 0; min-height: 0; }
.flis__sokkel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.flis__navn { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; }
.flis__meta { font-size: var(--fs-small); color: var(--ink-2); }
.flis__pris { font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; }
.flis__pris small { font-weight: 400; color: var(--ink-3); }

.flis__sokkel::after {
  content: ""; position: absolute; inset: 0;
  background: var(--espresso); opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  /* Bare fliser som faktisk er lenker. Paa For industri er flisene <div>,
     og der lovet svevetilstanden et klikk som ikke finnes. */
  a.flis:hover .flis__sokkel::after { opacity: .06; }
  a.flis:hover .flis__navn { text-decoration: underline; text-underline-offset: .22em; }
}

.flis--tom .flis__navn { color: var(--ink-2); }
.flis .lenke { align-self: flex-start; }

/* Sporvelger: to store flater, ikke to like kort */
/* --------------------------------------------------------------------------
   Butikkarusell, full bredde
   Kortrad viste fire produkter smaatt. Skal taktiliteten frem, maa bildet ta
   plassen. Derfor en kategori av gangen over hele spaltebredden, med teksten
   under. Samme komponent som aktueltstripen, bare stablet.
   -------------------------------------------------------------------------- */
.karusell--full {
  /* Hoydetak for bildet. 16:9 i full skjermbredde blir 720 px hoyt paa en
     1280-skjerm og forsvinner under bretten. Taket er skjermhoyden minus
     plassen topplinje, overskrift og faner trenger over bildet, saa motivet
     ender innenfor synsfeltet uansett skjerm. Gulvet paa 300 px hindrer at
     en lav skjerm klemmer bildet flatt; paa mobil er bildet uansett lavere
     enn taket, saa der biter det aldri. */
  --karusell-tak: clamp(340px, 100vh - 220px, 780px);
}
.karusell--full .karusell__post {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
  align-items: start;
}
/* Bildet bryter ut av innholdskolonnen og gaar i full skjermbredde. Teksten
   under blir staaende i kolonnen, saa lesestoffet beholder maalebredden mens
   motivet faar hele flaten. `overflow-x: clip` paa html fanger opp de faa
   pikslene en synlig rullefelt gjoer at 100vw bommer med. */
.karusell--full .karusell__post .plate {
  aspect-ratio: 16 / 9;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* `object-fit: cover` beskjaerer det taket tar. */
  max-height: var(--karusell-tak);
}

/* Pilene maa foelge bildet ut, ellers ligger de midt inne paa motivet.
   Samme hoydetak som bildet, ellers sklir pilene ned paa teksten naar
   taket beskjaerer motivet. */
.karusell--full .karusell__piler--over {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(14px, 3vw, 48px);
  max-height: var(--karusell-tak);
}
.karusell--full .karusell__tekst { gap: 10px; }
.karusell--full .karusell__tekst h3 { font-size: var(--fs-h3); }
.karusell--full .karusell__pris {
  font-size: var(--fs-small); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.karusell--full .karusell__pris small { font-weight: 400; color: var(--ink-3); }

/* Fire anonyme streker forteller hvor du er, men ikke hva du gaar til. Med
   fire navngitte kategorier er navnet selv den beste knappen: du ser hele
   sortimentet og velger direkte i stedet for aa bla deg fram. */
.karusell__faner {
  display: flex; flex-wrap: wrap; gap: 4px 0;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid var(--line);
}
.karusell__fane {
  position: relative;
  min-height: 44px; padding: 0 18px 0 0;
  margin-right: 18px;
  background: none; border: 0;
  font-family: var(--f-body);
  font-size: var(--fs-small); font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--t-fast) ease;
}
.karusell__fane::after {
  content: ""; position: absolute; left: 0; right: 18px; bottom: -1px;
  height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.karusell__fane[aria-selected="true"] { color: var(--ink); }
.karusell__fane[aria-selected="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .karusell__fane:hover { color: var(--ink-2); }
}
@media (max-width: 620px) {
  /* Navnene faar rulle vannrett i stedet for aa brekke til fire linjer. */
  .karusell__faner {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .karusell__faner::-webkit-scrollbar { display: none; }
  .karusell__fane { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Sveip. Uten dette maa man treffe pilene med fingeren. */
.karusell--full .karusell__spor { touch-action: pan-y; }

/* Pilene ligger paa hver sin side av bildet i stedet for under det. Sporet er
   et rutenett der alle postene deler samme celle, saa pileraden legges i den
   samme cellen med bildets eget sideforhold. Da treffer den midt paa motivet
   uansett hvor hoy teksten under er. */
.karusell__piler--over {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(10px, 1.4vw, 18px);
  z-index: 2;
  pointer-events: none;            /* bare knappene skal ta imot klikk */
}
.karusell__piler--over .karusell__pil { pointer-events: auto; }

/* Glass, ikke flate. Krem paa 62 prosent med uskarphet bak gir espressoikonet
   6,5:1 selv over de moerkeste motivene, og leser fortsatt som en knapp over
   de lyse. Hvitt ville brutt palettregelen. */
.karusell__pil--over {
  width: clamp(44px, 5vw, 52px); height: clamp(44px, 5vw, 52px);
  border-radius: 50%;
  border-color: rgba(240, 232, 220, .34);
  background: color-mix(in srgb, var(--krem) 62%, transparent);
  color: var(--espresso);
  backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 2px 10px rgba(31, 24, 21, .18);
}
@supports not (backdrop-filter: blur(1px)) {
  .karusell__pil--over { background: color-mix(in srgb, var(--krem) 88%, transparent); }
}
.karusell__pil--over:disabled { opacity: .38; cursor: default; }

/* Paa telefon spiser to knapper paa 44 px en fjerdedel av bildebredden, og da
   dekker styringen motivet den skulle la staa fram. Der er sveip den naturlige
   bevegelsen, og faneraden gir direkte tilgang til hver kategori ved navn.
   Pilene er dermed overfloedige akkurat der. */
@media (max-width: 620px) {
  .karusell__piler--over { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .karusell__pil--over:hover {
    background: var(--krem); border-color: var(--krem); color: var(--espresso);
  }
}

/* `min(...)` holder minstebredden nede naar skjermen er smalere enn den.
   Uten den stakk sporene 30 px ut av en 320 px skjerm og hele forsiden fikk
   vannrett rulling. */
.spor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1px; background: var(--line-strong); }
.spor > a {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(30px, 4vw, 46px);
  background: var(--ground);
  text-decoration: none;
  transition: background-color var(--t-base) var(--ease-out);
}
.spor h3 { font-size: var(--fs-h3); }
.spor p { font-size: var(--fs-small); color: var(--ink-2); max-width: 42ch; }
.spor .lenke { margin-top: auto; padding-top: 12px; }
@media (hover: hover) and (pointer: fine) {
  .spor > a:hover { background: var(--sheet); }
}

/* --------------------------------------------------------------------------
   10. Fullbredde bildebånd
   -------------------------------------------------------------------------- */

.baand { position: relative; overflow: hidden; }
.baand img { width: 100%; height: auto; }
.baand__tekst {
  padding: 22px 0 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   11. Produktside
   -------------------------------------------------------------------------- */

.brodsmuler { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); color: var(--ink-3); }
.brodsmuler a { text-decoration: none; }
.brodsmuler li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .5; }
@media (hover: hover) and (pointer: fine) { .brodsmuler a:hover { text-decoration: underline; } }

.produkt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 900px) { .produkt { grid-template-columns: 1fr; } }

.galleri { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 104px; }
@media (max-width: 900px) { .galleri { position: static; } }
.galleri__hoved { position: relative; overflow: hidden; border-radius: var(--radius); }
.galleri__hoved .plate { aspect-ratio: 4 / 3; min-height: 0; border-radius: 0; }
.galleri__hoved > * { transition: opacity var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out); }
.galleri__hoved[data-bytter="true"] > * { opacity: .35; filter: blur(3px); }

.galleri__mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galleri__mini button {
  padding: 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: none; cursor: pointer; overflow: hidden;
  transition: border-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.galleri__mini button:active { transform: scale(.97); }
.galleri__mini button[aria-current="true"] { border-color: var(--ink); border-width: 2px; }
.galleri__mini .plate { aspect-ratio: 1; min-height: 0; border-radius: 0; }
.galleri__mini .plate__note { font-size: .5625rem; letter-spacing: .1em; padding: 6px; }

/* MIDLERTIDIG, til nettbutikken aapnes. Kategoriene staar som utstilling bak
   glasset: de viser hva Berco selger, men ingen av dem kan klikkes. Meldingen
   ligger oppaa rutenettet, ikke over det, og det er nettopp flisene under som
   gjoer at glasset leses som glass. Attributtet «inert» paa rutenettet er det
   som faktisk stenger flisene; regelen under fjerner bare loeftet om at de er
   levende, og pointer-events daekker nettlesere uten inert. */
.laast { position: relative; }
.laast__melding {
  position: absolute;
  z-index: 2;
  /* Loeftet opp i luften mellom ingressen og rutenettet, ikke ned i det.
     Negativ verdi, men aldri mer enn luften taaler: der er det 34 px paa
     1440 og 20 px paa smal skjerm, og boksen skal ikke ta i ingressteksten. */
  top: clamp(-18px, -1.3vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  width: min(430px, 100%);
}
.laast [inert] { pointer-events: none; }
.laast [inert] .flis { cursor: default; }
.laast [inert] .flis:hover .flis__navn { text-decoration: none; }
.laast [inert] .flis:hover .flis__sokkel::after { opacity: 0; }

/* Merknad i glass. Flaten er sidens eget ark gjort halvgjennomsiktig og
   sloert, saa kornet i bakgrunnen skinner gjennom og boksen leser som et ark
   lagt oppaa siden i stedet for et felt malt inn i den. Samme grep som
   topplinjen bruker, saa glasset er sidens eget og ikke en ny effekt.
   Kanten er haarlinjen, og lyset langs overkanten er blindpreg: ingen ny
   farge, bare lys, slik manualen godkjenner paa krem og kraft. Nettlesere
   uten backdrop-filter faar arket tett; boksen leses fortsatt. */
.glassboks {
  /* Staaende format med to elementer, overskrift og knapp. Da er sentrering
     riktig: en fordelt komposisjon trenger noe i toppen aa forankre seg i, og
     det finnes ikke lenger. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 30px;
  aspect-ratio: 5 / 6;
  padding: clamp(26px, 4vw, 44px);
  border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--sheet) 74%, transparent);
  /* Skraa lysstripe. Det er den som gjoer at flaten leses som glass og ikke
     som et lyst felt. Hvitt er lys, ikke farge. */
  background-image: linear-gradient(118deg,
    rgba(255, 255, 255, .55) 0%,
    rgba(255, 255, 255, .14) 38%,
    rgba(255, 255, 255, 0) 62%);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--line),
              inset 0 1px 0 rgba(255, 255, 255, .85),
              inset 0 -1px 0 rgba(255, 255, 255, .35),
              0 10px 30px rgba(31, 24, 21, .10),
              0 2px 6px rgba(31, 24, 21, .06);
}
@supports not (backdrop-filter: blur(1px)) {
  .glassboks { background-color: var(--sheet); }
}
.glassboks__tittel {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 5.4vw, 2.4rem);
  line-height: 1.12;
  color: var(--ink);
  /* To linjer som jevnes ut. Uten dette faller bruddet paa «snart.» alene i
     enkelte bredder, og en enslig kort linje ser ut som en glipp. */
  text-wrap: balance;
}
.glassboks .knapperad { margin: 0; }

/* Bildet og bildeteksten hoerer sammen. Platen har overflow: hidden og fast
   sideforhold, saa teksten maa staa utenfor den, ikke inne i figuren. */
.produkt__bilde { display: flex; flex-direction: column; gap: 12px; }
.bildenote { font-size: var(--fs-small); color: var(--ink-2); margin: 0; max-width: 46ch; }
.produkt__hode { display: flex; flex-direction: column; gap: 14px; }
.produkt h1 { font-size: var(--fs-h1); }

.punkter { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }
.punkter li {
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-2);
}
/* Punktmarkøren tegnes som en strek, ikke som et strektegn. */
/* Markoeren laa foer som et eget element i et rutenett paa to kolonner. Det
   holdt saa lenge punktet var ren tekst, men et <b> inni gjorde resten av
   teksten til enda et element, og det havnet i neste rad, i 20 px-kolonnen.
   Paa personvernsiden brakk et avsnitt til 27 linjer. Markoeren tas derfor ut
   av flyten, saa punktet taaler hvilket som helst innhold. */
.punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  margin-top: .72em;
  width: 14px; height: 1px;
  background: var(--line-strong);
}

.valg { display: flex; flex-direction: column; gap: 12px; }
.valg__navn { font-size: var(--fs-small); font-weight: 500; }
.valg__navn span { font-weight: 400; color: var(--ink-2); }
.valg__rad { display: flex; flex-wrap: wrap; gap: 10px; }

.pille {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 18px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--sheet);
  font-size: var(--fs-small); font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.pille:active { transform: scale(.97); }
.pille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pille:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: 0 17px; }
/* Ringen må være synlig i begge temaer. Ellers forsvinner svart-prøven
   på mørk bunn og krem-prøven på papir. */
.pille__prov { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); flex: 0 0 auto; }
.pille:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pille:hover { border-color: var(--ink-2); } }

/* Volumtrapp */
.trapp { width: 100%; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.trapp caption { text-align: left; font-weight: 500; padding-bottom: 10px; }
.trapp th, .trapp td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; }
.trapp thead th { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.trapp td:last-child, .trapp th:last-child { text-align: right; }
.trapp tbody tr { transition: background-color var(--t-base) var(--ease-out); }
.trapp tbody tr[data-aktiv="true"] { background: var(--emboss); font-weight: 500; }
.trapp tbody tr[data-aktiv="true"] td:first-child { box-shadow: inset 2px 0 0 var(--ink); padding-left: 12px; }

.pris { display: flex; align-items: baseline; gap: 10px; }
.pris__tall { font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; font-variant-numeric: tabular-nums; }
.pris__enhet { font-size: var(--fs-small); color: var(--ink-2); }

.antall { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--radius); width: fit-content; background: var(--sheet); }
.antall button {
  width: 52px; min-height: 52px;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-size: 1.25rem; line-height: 1;
  transition: background-color var(--t-fast) ease;
}
.antall input {
  width: 96px; border: 0; border-inline: 1px solid var(--line-strong);
  background: none; color: var(--ink);
  font-family: var(--f-body); font-size: 1rem; font-weight: 500;
  text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.antall input::-webkit-outer-spin-button, .antall input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (hover: hover) and (pointer: fine) { .antall button:hover { background: var(--emboss); } }

/* Notisen manglet maalebredde. I en smal kolonne gikk det bra av seg selv,
   men rett i `.wrap` paa Om Berco strakk den seg til 1052 px og 117 tegn per
   linje paa en bred skjerm. 68ch er samme maal som `.prosa` bruker ellers. */
.notis {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--ink-2);
  max-width: 68ch;
}
.notis strong { color: var(--ink); font-weight: 500; }

/* Forespoerselskurven paa kontaktsiden: varelinjene i notisen. Fjernknappen
   er en <button> som skal se ut som lenkene ellers. */
/* Kurven i kontaktskjemaet. Hver vare er en rad med navnet oeverst,
   stoerrelse og antall dempet under, og Fjern for seg selv til hoeyre.
   Flere varer skilles med haarlinje, ikke luft. */
.kurvliste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; }
.kurvliste li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 10px 0;
}
.kurvliste li + li { border-top: 1px solid var(--line); }
.kurvlinje { display: block; min-width: 0; }
.kurvlinje__navn { display: block; font-weight: 500; color: var(--ink); }
.kurvlinje__detalj { display: block; margin-top: 2px; }
.kurvlinje__pris { display: block; margin-top: 2px; color: var(--ink); }
.kurvliste button.lenke {
  background: none; border: 0; padding: 0; font: inherit;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
/* Summen under varene: hårlinje over, merkelapp til venstre og kronene til
   høyre, samme rytme som radene i oppsummeringen. Notene under sier fra om
   det summen ikke dekker: bestillingsvarer og miljøavgift. */
.kurvsum {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 18px; border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px;
}
.kurvsum strong { font-weight: 500; color: var(--ink); white-space: nowrap; }
.kurvsum__note { margin: 6px 0 0; }

.spesifikasjon { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.spesifikasjon th, .spesifikasjon td { padding: 15px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spesifikasjon th { font-weight: 400; color: var(--ink-2); width: 38%; padding-right: 24px; }
.spesifikasjon td { color: var(--ink); }

/* --------------------------------------------------------------------------
   12. Skjema
   -------------------------------------------------------------------------- */

.felt { display: flex; flex-direction: column; gap: 8px; }
.felt label { font-size: var(--fs-small); font-weight: 500; }
.felt label .valgfritt { font-weight: 400; color: var(--ink-3); }
.felt input[type="text"], .felt input[type="email"], .felt input[type="tel"],
.felt input[type="date"], .felt input[type="number"], .felt textarea, .felt select {
  min-height: 52px;
  padding: 14px 16px;
  background: var(--sheet);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  transition: border-color var(--t-fast) ease;
}
.felt textarea { min-height: 108px; resize: vertical; line-height: 1.6; }
.felt input::placeholder, .felt textarea::placeholder { color: var(--ink-3); opacity: 1; } /* 4,97, leselig */
.felt input:focus, .felt textarea:focus { border-color: var(--ink); }

.feltpar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .feltpar { grid-template-columns: 1fr; } }

/* Bildekort. Ett klikk, og fokuset er satt */
.kortvalg { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kort {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  background: var(--sheet);
  transition: border-color var(--t-fast) ease, transform var(--t-press) var(--ease-out);
}
.kort:active { transform: scale(.985); }
.kort input { position: absolute; opacity: 0; width: 0; height: 0; }
.kort .plate { min-height: 0; aspect-ratio: 5 / 4; border-radius: 0; }
.kort__navn { padding: 14px 16px; font-size: var(--fs-small); font-weight: 500; }
.kort:has(input:checked) { border-color: var(--ink); border-width: 2px; }
.kort:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Valgt tilstand er aldri bare farge. Merket bærer informasjonen. */
.kort__hake {
  position: absolute; top: 10px; right: 10px;
  z-index: 2; /* .plate er posisjonert og kommer senere i DOM */
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--espresso); color: var(--krem);
  opacity: 0; transform: scale(.85);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.kort:has(input:checked) .kort__hake { opacity: 1; transform: scale(1); }
.kort__hake svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .kort:hover { border-color: var(--ink-2); } }

/* Slippsone for logo, det viktigste feltet på hele nettstedet */
.slipp {
  display: grid; place-items: center; gap: 12px;
  padding: clamp(34px, 5vw, 54px) 24px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--sheet);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.slipp[data-over="true"] { border-color: var(--ink); background: var(--emboss); }
.slipp__ikon { width: 34px; height: 34px; color: var(--ink-3); }
.slipp__tittel { font-size: 1.0625rem; font-weight: 500; }
.slipp__fil {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-top: 14px;
  background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-small);
}
.slipp__fil button { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ink-2); text-decoration: underline; font-family: inherit; font-size: inherit; }

.avkryss { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: var(--fs-small); }
.avkryss input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--espresso); flex: 0 0 auto; }

/* Forhåndsvisning */
.visning { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) { .visning { position: static; } }
.visning__flate { position: relative; overflow: hidden; border-radius: var(--radius); }
.visning__flate .plate { aspect-ratio: 4 / 5; min-height: 0; border-radius: 0; transition: background-color var(--t-base) var(--ease-out); }
.visning__flate > * { transition: opacity var(--t-base) var(--ease-out), filter var(--t-base) var(--ease-out); }
.visning__flate[data-bytter="true"] > * { opacity: .4; filter: blur(4px); }

.frist {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--ink-2);
}

/* Kvittering. Skal fylle skjermen. Den er et mål, ikke en mellomstasjon. */
[data-side="kvittering"] > .band {
  min-height: calc(100svh - 72px);
  display: flex; align-items: center;
}
.kvittering { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 68px); align-items: start; width: 100%; }
@media (max-width: 900px) { .kvittering { grid-template-columns: 1fr; } }

.tidslinje { border-top: 1px solid var(--band-line); margin: 0; }
.tidslinje > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--band-line);
}
.tidslinje dt { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--band-ink-2); padding-top: 4px; }
.tidslinje dd { margin: 0; color: var(--band-ink); }
@media (max-width: 620px) { .tidslinje > div { grid-template-columns: 1fr; gap: 6px; } }

/* --------------------------------------------------------------------------
   13. Bunn
   -------------------------------------------------------------------------- */

.bunn { background: var(--espresso); color: var(--krem); padding-block: clamp(56px, 7vw, 88px) 40px; }
.bunn__rad { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) { .bunn__rad { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bunn__rad { grid-template-columns: 1fr; } }
.bunn h3 { font-family: var(--f-body); font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #D4C8BC; margin-bottom: 16px; }
.bunn li { padding: 6px 0; }
.bunn a { font-size: var(--fs-small); text-decoration: none; color: var(--krem); }
@media (hover: hover) and (pointer: fine) { .bunn a:hover { text-decoration: underline; } }
/* Seglet staar alene i bunnen naa som ordmerket er borte, og taaler litt mer
   hoyde. `.bunn__logo img` er mer spesifikk enn en klasse alene, saa maalet
   settes her og ikke paa `.bunn__segl`. */
.bunn__logo { display: flex; align-items: center; gap: 18px; }
.bunn__logo img { height: 56px; width: auto; }

/* Merkelogoen brukt inne i innholdet, ikke i toppen. Positiv paa lys flate,
   negativ paa moerk. Baand er moerkt uansett hvilket tema brukeren har, saa
   der styrer flaten og ikke temaet. */
.merkelogo { display: block; }
.merkelogo img { height: 34px; width: auto; }
.merkelogo .logo--neg { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .merkelogo .logo--pos { display: none; }
  :root:not([data-theme="light"]) .merkelogo .logo--neg { display: block; }
}
:root[data-theme="dark"] .merkelogo .logo--pos { display: none; }
:root[data-theme="dark"] .merkelogo .logo--neg { display: block; }
.band .merkelogo .logo--pos { display: none; }
.band .merkelogo .logo--neg { display: block; }
.bunn__logo .folie { height: 40px; }
.bunn__adresse { font-size: var(--fs-small); color: #D4C8BC; margin-top: 20px; line-height: 1.8; }
/* Gullstripen er tatt ut paa Stians beskjed 24.08.2026; vanlig haarlinje. */
.bunn__strek { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: var(--fs-small); color: #D4C8BC; }
/* Lenker i bunnstripen staar inne i en tekstlinje, ikke i en liste, saa
   de trenger understrek for aa lese som lenker. Resten av bunnteksten
   har navigasjonslenker i lister, der konteksten gjoer jobben. */
.bunn__strek a { text-decoration: underline; text-underline-offset: 3px;
                 text-decoration-color: rgba(240, 232, 220, .45); }
@media (hover: hover) and (pointer: fine) {
  .bunn__strek a:hover { text-decoration-color: var(--krem); }
}

/* --------------------------------------------------------------------------
   14. Bevegelse
   Avdekking forsterker en synlig standard. Uten JavaScript vises alt.
   -------------------------------------------------------------------------- */

[data-js] .avdekk {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--forsink, 0ms);
}
[data-js] .avdekk[data-inne="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Krysstoning beholdes, for den hjelper forståelsen. Bevegelse fjernes. */
  [data-js] .avdekk { transform: none; transition: opacity 200ms linear; }
  .karusell__post { transition: opacity 200ms linear; }
  [data-js] .karusell__post:not([data-aktiv="true"]) { filter: none; }
  .knapp:active, .pille:active, .kort:active, .karusell__pil:active { transform: none; }
}

/* --------------------------------------------------------------------------
   15. Trykkflater på berøringsskjerm
   Inline-lenker arver linjehøyde og blir 15 til 25 px høye. 44 px er gulvet.
   -------------------------------------------------------------------------- */

/* Trykkflatene var knyttet til skjermbredde, men bredde sier ingenting om hva
   som peker. En iPad paa 834 px er like mye en finger som en telefon paa 375,
   og der laa logoen paa 34 px, «Logg inn» paa 24 og telefonlenkene paa 25.
   Kriteriet er derfor inndataenheten. Mus rammes ikke.

   Lenker inne i en setning holdes utenfor med vilje. WCAG 2.5.8 gjoer unntak
   for dem, og 44 px ville brutt linjerytmen i broedteksten. */
@media (pointer: coarse) {
  .bunn a,
  .brodsmuler a,
  .flis .lenke,
  address.fin a,          /* kontaktblokka paa Om Berco */
  .oppsummering__hjelp a, /* «Vil du heller snakke med oss?», en handling */
  .topp__logginn,
  .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 620px) {
  .bunn li { padding: 0; }
  .bunn__adresse { line-height: 2.2; }
}

@media print {
  .topp, .karusell__styring, .meny-knapp, .sperre { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   16. Materialglans
   Håndboken avviser flat CMYK-bygging av bronse fordi «ekte folie har refleks
   som kompenserer for den lave kontrasten». Refleksen er en egenskap ved
   materialet, ikke pynt. Glansen følger derfor materialet, ikke flaten:

     kraft      ubestrøket   → helt matt, aldri høylys
     krem       ubestrøket   → matt
     espresso   laminert     → bredt, mykt lakkskinn
     bronse     folie        → anisotropisk refleks med skarpt høylys

   Høylyset i folierampen er krem. Det er lyset, ikke en femte farge.

   --px og --py arves IKKE. De settes på store flater som .band, og en arvet
   custom property der ville invalidert alle etterkommere hver eneste frame.
   --vinkel må arve, fordi ::after på .plate--foliert bruker den, og settes
   derfor bare på små elementer med få barn.
   -------------------------------------------------------------------------- */

@property --px     { syntax: "<number>"; inherits: false; initial-value: .5; }
@property --py     { syntax: "<number>"; inherits: false; initial-value: .18; }
@property --vinkel { syntax: "<angle>";  inherits: true;  initial-value: 105deg; }

:root {
  /* To skyggeender. Et merke er meningsbærende grafikk og må holde 3:1 mot
     bunnen i hele rampen. #6E5535 lå på 2,51 mot espresso og gjorde
     bunnlogoen delvis uleselig. #997A52 måler 4,38 mot espresso og 3,36 mot
     kaffebrun. Den dype enden brukes derfor kun på dekorative rammer. */
  --foil-skygge:     #997A52;          /* lesbar bunn, til merker */
  --foil-skygge-dyp: #6E5535;          /* kun dekor */
  --foil-metall: var(--bronse);
  --foil-hoylys: var(--krem);          /* lyskilden, ikke en ny farge */

  --foil-ramp: linear-gradient(var(--vinkel),
    var(--foil-skygge)  0%,
    var(--foil-metall) 13%,
    var(--foil-hoylys) 26%,
    var(--foil-metall) 39%,
    var(--foil-skygge) 51%,
    var(--foil-metall) 67%,
    var(--foil-hoylys) 78%,
    var(--foil-metall) 88%,
    var(--foil-skygge) 100%);

  --foil-ramp-dyp: linear-gradient(var(--vinkel),
    var(--foil-skygge-dyp)  0%,
    var(--foil-metall) 13%,
    var(--foil-hoylys) 26%,
    var(--foil-metall) 39%,
    var(--foil-skygge-dyp) 51%,
    var(--foil-metall) 67%,
    var(--foil-hoylys) 78%,
    var(--foil-metall) 88%,
    var(--foil-skygge-dyp) 100%);

  /* Lakkskinn. To styrker: store flater reflekterer bredt og svakt, små
     plater tettere. Samme høylys på begge ville lest som flekk, ikke glans. */
  --lakk: radial-gradient(120% 95% at calc(var(--px) * 100%) calc(var(--py) * 100%),
    rgba(240, 232, 220, .18),
    rgba(240, 232, 220, .055) 42%,
    rgba(240, 232, 220, 0) 72%);

  --lakk-dempet: radial-gradient(120% 95% at calc(var(--px) * 100%) calc(var(--py) * 100%),
    rgba(240, 232, 220, .12),
    rgba(240, 232, 220, .038) 42%,
    rgba(240, 232, 220, 0) 72%);

  --lakk-bred: radial-gradient(155% 135% at calc(var(--px) * 100%) calc(var(--py) * 100%),
    rgba(240, 232, 220, .13),
    rgba(240, 232, 220, .04) 45%,
    rgba(240, 232, 220, 0) 76%);

  /* Dither mot forløpningsbanding. Gråtonestøy i soft-light forskyver pikslene
     begge veier rundt midtpunktet, så trinnene i lakken brytes opp uten at
     middelverdien løftes. Kornet alene er ensidig lyst og ville bleket espressoen. */
  --dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23d)' opacity='.55'/%3E%3C/svg%3E");
}

/* Lakkerte flater. Kraft og krem er ubestrøket og står matte. */
/* Materialgradient: espresso som glir mot kaffebrun. To merkevarefarger, ikke
   en pyntegradient. Det er den samme overgangen som mellom sort og mørkebrun
   papp i signaturbildet. Lakken ligger over. */
.band {
  background-image: var(--dither), var(--grain-lys), var(--lakk-bred),
    linear-gradient(118deg, var(--band) 0%, var(--band) 26%, var(--band-2) 100%);
  background-size: 120px 120px, 180px 180px, auto, auto;
  background-blend-mode: soft-light, normal, normal, normal;
}
.plate--espresso {
  background-image: var(--dither), var(--grain-lys), var(--lakk);
  background-size: 120px 120px, 180px 180px, auto;
  background-blend-mode: soft-light, normal, normal;
}
/* Kaffebrun er lysere enn espresso, så samme alfa leser sterkere og løfter
   bunnen for langt under den dempede teksten. Mindre lakk, samme inntrykk. */
.plate--kaffebrun {
  background-image: var(--dither), var(--grain-lys), var(--lakk-dempet);
  background-size: 120px 120px, 180px 180px, auto;
  background-blend-mode: soft-light, normal, normal;
}

/* Horisontrefleksen langs overkanten av et laminert ark. */
.plate--espresso::before,
.plate--kaffebrun::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(177deg,
    rgba(240, 232, 220, .07) 0%,
    rgba(240, 232, 220, .015) 16%,
    rgba(240, 232, 220, 0) 30%);
  pointer-events: none;
}
.plate--kaffebrun::before {
  background: linear-gradient(177deg,
    rgba(240, 232, 220, .045) 0%,
    rgba(240, 232, 220, .012) 16%,
    rgba(240, 232, 220, 0) 30%);
}

/* Bronsehårlinjen blir ekte folie: 1px forløpningsring, ikke flat strek. */
.plate--foliert::after {
  content: "";
  position: absolute; inset: 14px;
  border: 0;
  padding: 1px;
  background: var(--foil-ramp-dyp);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Bronsekanten er en behandling for tomme flater. Over et foto legger den seg
   som en ramme oppaa motivet og konkurrerer med det i stedet for aa ramme det
   inn. Regelen staar her ogsaa, saa den ikke kommer tilbake neste gang en
   plassholder byttes ut med et bilde. */
.plate--foliert:has(.platefoto)::after { content: none; }

/* Foliepreget merke. Formen maskerer metallet, så merket er fortsatt ensfarget
   bronse, og forløpningen viser bare hvordan lyset treffer folien.
   Kun på mørk bunn, aldri i tekst. */
.folie {
  display: block;
  background-image: var(--foil-ramp);
  -webkit-mask: var(--folie-form) center / contain no-repeat;
          mask: var(--folie-form) center / contain no-repeat;
}
.folie--merke { --folie-form: url("../logo/berco-merke.svg");           aspect-ratio: 85.25 / 107; }
.folie--segl  { --folie-form: url("../logo/berco-segl.svg");            aspect-ratio: 1; }

/* Foliestrek der en linje skal telle. */
.foliestrek { border-top: 1px solid transparent; border-image: var(--foil-ramp-dyp) 1; }

/* Espressoknappen er bestrøket og fanger lys langs overkanten. */
.knapp--primar {
  background-image: linear-gradient(177deg,
    rgba(240, 232, 220, .13) 0%,
    rgba(240, 232, 220, .02) 20%,
    rgba(240, 232, 220, 0) 42%);
}
/* På espressoflate er knappen krem, ubestrøket papir, og står matt. */
.band .knapp--primar { background-image: none; }

/* Uten fin peker driver rullingen lyset i stedet. Det gjøres i JavaScript og
   ikke med animation-timeline: rullestyrte animasjoner rapporteres som støttet
   av CSS.supports i flere innebygde nettlesere uten faktisk å feste seg til en
   ruller, og da blir folien liggende død på startvinkelen. */

/* Ved redusert bevegelse blir lyset stående. Materialet er der fortsatt. */
@media (prefers-reduced-motion: reduce) {
  .plate--foliert, .folie, .foliestrek { animation-name: none; }
  /* JS rører ikke lyset ved redusert bevegelse. Vinkelen står på 105deg. */
}

/* --------------------------------------------------------------------------
   17. Glass
   Brukes ÉN gang på hele nettstedet: over signaturbildet i fullbredde.
   Håndboken vil ha tekst over foto på full flate, ikke på en mørklagt overlay,
   så glasset er tett nok (66 % krem) til å lese som et eget ark lagt oppå
   bildet. Espressotekst holder da 5,57:1 selv over de svarte posene, målt mot
   bildets mørkeste parti.
   -------------------------------------------------------------------------- */

.glass {
  position: relative;
  background: color-mix(in srgb, var(--krem) 66%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.18);
          backdrop-filter: blur(20px) saturate(1.18);
  border: 1px solid rgba(240, 232, 220, .52);   /* krem, ikke hvitt */
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(240, 232, 220, .60),
    0 24px 60px -24px rgba(31, 24, 21, .45);
  padding: clamp(28px, 3.4vw, 44px);
  /* Glasset er alltid krem, også i mørkt tema, for bildet under er det samme. */
  color: var(--espresso);
}
.glass h2, .glass h3 { color: var(--espresso); }
.glass p {
  /* Espresso, ikke en dempet brun. #4A3C32 falt til 3,79:1 der bildet er
     svartest, og kaffebrun ville løst det, men håndboken sier kaffebrun er
     bunn og «aldri blekk». På lys flate er espresso eneste lovlige blekk, så
     hierarkiet kommer fra størrelse. Måler 6,26:1 mot bildets mørkeste parti. */
  color: var(--espresso);
  font-size: .9375rem;
  max-width: 46ch;
}
.glass .knapp--sekundar { color: var(--espresso); border-color: var(--espresso); }

/* Uten backdrop-filter faller glasset tilbake til et nesten tett ark. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--krem) 93%, transparent); }
}

/* Lysstrøket langs overkanten, som på en ekte glassplate. */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    calc(var(--vinkel) + 40deg),
    rgba(240, 232, 220, .42) 0%,
    rgba(240, 232, 220, .06) 26%,
    rgba(240, 232, 220, 0) 52%);
  pointer-events: none;
}
.glass > * { position: relative; }

/* --------------------------------------------------------------------------
   18. Fullbredde bildebånd
   -------------------------------------------------------------------------- */

.baand--full { position: relative; overflow: hidden; }
.baand--full > img {
  width: 100%;
  height: clamp(440px, 68vh, 720px);
  object-fit: cover;
  object-position: center 58%;
}
.baand--full .baand__innhold {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding-inline: var(--kant);
  pointer-events: none;
}
.baand--full .glass { pointer-events: auto; max-width: 33rem; }

@media (max-width: 760px) {
  /* På mobil er det ikke plass til både bilde og glass oppå hverandre.
     Bildet står for seg, glasset legger seg under og overlapper litt. */
  .baand--full > img { height: clamp(280px, 46vh, 380px); }
  .baand--full .baand__innhold {
    position: static; padding: 0 var(--gut);
    margin-top: -56px;
  }
  .baand--full .glass { max-width: none; }
}

/* Aktueltplatene: stor flate, 4:3, uavhengig av kildens format. Gjelder ikke
   fullbreddekarusellen i butikken, som har sin egen 16:9-regel. */
.karusell:not(.karusell--full) .karusell__post .plate { aspect-ratio: 4 / 3; min-height: 0; }

/* Full skjermbredde for enkeltbilder utenfor karusellene. Samme utbrytertriks
   som butikkarusellen: 100vw med negativ marg, og `overflow-x: clip` paa html
   tar de faa pikslene rullefeltet stjeler. */
.plate--fullbredde {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   19f. Menneskene bak som liste
   Portrettruter uten portretter fylte siden med tomme plassholdere. Naa
   staar folkene som en liste med seglet stort ved siden av: navnet baerer,
   og seglet fyller flaten til ekte portretter eventuelt kommer.
   -------------------------------------------------------------------------- */

.folkeliste {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.folkeliste__segl {
  position: sticky; top: 96px;
  display: flex; justify-content: center;
  padding: clamp(24px, 4vw, 56px);
}
.folkeliste__segl img { width: clamp(220px, 26vw, 340px); height: auto; opacity: .92; }

.folkeliste ul { list-style: none; margin: 0; padding: 0; }
.folkeliste li {
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(18px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--line);
}
.folkeliste li:last-child { border-bottom: 1px solid var(--line); }
.folkeliste .person__navn { font-size: 1.45rem; }
.folkeliste .person__kontakt { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; margin-top: 4px; }

@media (max-width: 860px) {
  .folkeliste { grid-template-columns: 1fr; }
  .folkeliste__segl { position: static; padding: 8px 0 0; order: 2; }
  .folkeliste__segl img { width: 180px; }
}

/* --------------------------------------------------------------------------
   19. Fotohero
   To deler i stabel: overskriften og bildet. Setningen som stod som ingress
   er flyttet ned i sitatseksjonen. Ingenting ligger oppaa motivet, og motivet
   blir ikke beskaaret.

   Bildet stod foer i en fast hoyde med `object-fit: cover`, og da ble toppen
   av posene og haandtakene kuttet paa desktop. Nedslaget her er at bildet
   faar staa i sitt eget forhold, 1774 : 887, saa hele stillebenet er med paa
   enhver bredde. Prisen er hoyde: paa 1440 px blir bildet 720 px, paa 1920 px
   960 px. Det er et bevisst bytte, ikke en forglemmelse.

   Kontakt-knappen er ute av heroen. Den staar i menylinjen, som foelger med
   nedover uansett, og en knapp to steder i samme skjermbilde er en knapp for
   mye.
   -------------------------------------------------------------------------- */

.hero--foto { border-bottom: 0; }

/* Overskriften staar over bildet, paa arkflaten. */
.hero__tittel {
  padding-inline: var(--kant);
  padding-block: clamp(30px, 3.6vw, 60px) clamp(22px, 2.6vw, 38px);
}
.hero__tittel h1 { font-size: var(--fs-h1); max-width: 20ch; color: var(--espresso); }

/* Rammen klipper. Uten den ville det oppskalerte bildet i Ken Burns-bevegelsen
   stukket ut over hele bredden av siden. */
.hero__foto { display: block; overflow: hidden; }
.hero__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 1774 / 887;   /* filens eget forhold: ingenting beskjaeres */
  object-fit: cover;          /* uvirksom saa lenge forholdet stemmer, men
                                 fanger opp et bildebytte med annet format */
  object-position: center;

  /* Ken Burns, men motsatt vei av den vanlige. En loepende sloyfe maatte holdt
     bildet oppskalert hele tiden, og da ville toppen av posene vaert klippet
     bort permanent, altsaa akkurat det beskjaeringen over skal hindre.
     Bevegelsen gaar derfor en vei og bare en gang: den starter litt inne i
     motivet og trekker seg rolig ut til bildet staar helt fritt. Sluttbildet
     er det ubeskaarne, og der blir det staaende. */
  animation: hero-kenburns 15s cubic-bezier(.17, .84, .44, 1) both;
  transform-origin: 50% 62%;   /* samme punkt som utsnittet peker paa */
  will-change: transform;
}

@keyframes hero-kenburns {
  from { transform: scale(1.085) translate3d(-0.5%, -1.1%, 0); }
  to   { transform: scale(1)     translate3d(0, 0, 0); }
}

/* Bevegelse er en tilleggsopplevelse, aldri en forutsetning. Uten den skal
   sluttbildet staa der fra foerste oeyeblikk. */
@media (prefers-reduced-motion: reduce) {
  .hero__foto img { animation: none; transform: none; }
}

/* Under 861 px ville det ubeskaarne forholdet gitt et bilde paa 188 px paa en
   telefon. Da forsvinner varene. Der beholder vi den faste hoyden og lar
   `cover` beskjaere, slik det stod foer. Overgangen er umerkelig: paa 861 px
   er det ubeskaarne bildet 430 px hoyt, samme tall som taket her. */
@media (max-width: 860px) {
  .hero__foto img {
    aspect-ratio: auto;
    height: clamp(300px, 46vh, 430px);
    object-position: center 62%;
  }
  .hero__tittel { padding-inline: var(--gut); }
}

/* --------------------------------------------------------------------------
   19e. Kategoriliste
   Elleve lenker under karusellen. Karusellen viser fire om gangen; denne
   listen viser at det finnes flere, og hvor mange varer hver av dem har.
   -------------------------------------------------------------------------- */

.kategoriliste {
  margin-top: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
}
.kategoriliste a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 15px 0; min-height: 44px;
  border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-small);
  transition: color var(--t-fast) ease;
}
.kategoriliste a:hover { color: var(--ink-2); }
.kategoriliste a::after {
  content: ""; flex: none; align-self: center; margin-left: 2px;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--ink-3); border-right: 1.5px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease-out);
}
.kategoriliste a:hover::after { transform: rotate(45deg) translate(2px, -2px); }
.kategoriliste span {
  margin-left: auto;
  font-variant-numeric: tabular-nums; color: var(--ink-3); font-size: var(--fs-label);
}

/* --------------------------------------------------------------------------
   19c. Grupper som kan lukkes
   Lange lister og matriser ligger i <details>. Det er nettleserens egen
   mekanikk, saa de virker uten JavaScript, de kan soekes i av nettleserens
   egen finn-funksjon i moderne Chrome, og tastaturet naar dem gratis.
   -------------------------------------------------------------------------- */

.gruppe { border-top: 1px solid var(--line-strong); }
.gruppe:last-of-type { border-bottom: 1px solid var(--line-strong); }

.gruppe > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0;                 /* 18 + 18 + linjehoyde gir over 44 px trykkfelt */
  font-family: var(--f-display); font-size: var(--fs-h3); line-height: 1.3;
  color: var(--ink);
  transition: color var(--t-fast) ease;
}
.gruppe > summary::-webkit-details-marker { display: none; }
.gruppe > summary:hover { color: var(--ink-2); }

.gruppe__tall {
  margin-left: auto; flex: none;
  font-family: var(--f-body); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

/* Vinkelen snur naar gruppen aapnes. Ren CSS, ingen ikonfil. */
.gruppe > summary::after {
  content: ""; flex: none; align-self: center;
  width: 10px; height: 10px; margin-left: 4px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-base) var(--ease-out);
}
.gruppe[open] > summary::after { transform: translateY(2px) rotate(225deg); }

.gruppe__kropp { padding-bottom: 30px; }

/* --------------------------------------------------------------------------
   19d. Matrise
   Produktlisten. Paa smal skjerm faar den ikke rulle sidelengs, slik en
   tabell ofte maa: den brytes opp i ett kort per rad i stedet. Kolonnene
   navngis da av `data-kol` foran verdien.
   -------------------------------------------------------------------------- */

.matrise { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.matrise th, .matrise td {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.matrise thead th {
  font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
  border-bottom-color: var(--line-strong);
}
.matrise tbody th { font-weight: 500; color: var(--ink); width: 42%; }

/* Produktnavnet er raden viktigste handling og trenger en trykkflate paa
   over 40 px, ikke bare teksthoyden. Polstringen utvides og trekkes inn
   igjen med negativ marg, saa layouten ikke flytter seg. */
.matrise th a {
  display: inline-block;
  padding: 11px 8px 11px 0;
  margin: -11px -8px -11px 0;
  color: var(--ink);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.matrise th a:hover { color: var(--ink-2); }

/* Samme grep paa broedsmulene. */
.brodsmuler a {
  display: inline-block;
  padding: 10px 4px;
  margin: -10px -4px;
}

/* Frittstaaende kontaktlenker: telefon og e-post i adresseblokker, og
   samtykkelenken. Lenker inne i loepende tekst staar som de er; de er
   unntatt av samme grunn som i WCAG 2.5.8. */
address a,
[data-samtykke-endre],
.oppsummering__hjelp .lenke {
  display: inline-block;
  padding: 9px 2px;
  margin: -9px -2px;
}

/* Fargeproeve foran produktnavnet. Ringen maa staa ogsaa naar proeven er hvit,
   ellers forsvinner det hvite arket i kremflaten. Fargen er informasjon og
   ikke pynt, saa navnet staar der uansett: proeven bare bekrefter det. */
.prove {
  display: inline-block; vertical-align: -2px;
  width: 14px; height: 14px; margin-right: 9px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(31, 24, 21, .22);
}
.matrise td { color: var(--ink-2); }
.matrise .n {
  text-align: right; padding-right: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.matrise tbody tr:last-child th, .matrise tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 700px) {
  .matrise thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .matrise tr { display: block; border-bottom: 1px solid var(--line); padding: 14px 0; }
  .matrise tr:last-child { border-bottom: 0; }
  .matrise th, .matrise td { display: block; width: auto; border: 0; padding: 0; }
  .matrise tbody th { margin-bottom: 4px; }
  .matrise td:not(:empty) { margin-top: 3px; }
  .matrise .n { text-align: left; }
  .matrise td[data-kol]::before {
    content: attr(data-kol) " ";
    color: var(--ink-3); font-size: var(--fs-label);
    letter-spacing: .1em; text-transform: uppercase;
  }
}

/* --------------------------------------------------------------------------
   19g. Varekort
   Kategorisidene viser hvert produkt som et kort med Bercos eget foto, navn,
   enhet og pris: den forenklede produktsiden i miniatyr. Hele kortet er en
   lenke til produktsiden.
   -------------------------------------------------------------------------- */

.varekort {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(18px, 2.6vw, 32px);
}
/* Paa telefon skal varene vaere lette aa finne: to i bredden, ikke en lang
   enkeltkolonne. sizes-attributtet (45vw) var alt skrevet for dette. */
@media (max-width: 760px) {
  /* Smaa fliser paa telefon: plassholdernoten maa faa mindre skrift og lov
     til aa strekke platen, ellers klippes teksten av 16:9-forholdet. */
  .flis .plate__note { font-size: .5625rem; letter-spacing: .08em; padding: 10px 12px; line-height: 1.6; }
  .flis .plate:has(> .plate__note) { aspect-ratio: auto; min-height: 90px; }
  .varekort { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .varekort__navn { font-size: var(--fs-small); }
  .varekort__enhet { display: none; }
}
/* To varer: to sentrerte spor i samme bredde som naboene i tre kolonner,
   ikke to kort skjoevet mot venstre med et tomt spor bak. */
.varekort--to { grid-template-columns: repeat(2, minmax(0, 350px)); justify-content: center; }
@media (max-width: 760px) {
  .varekort--to { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.varekort a {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink); text-decoration: none;
  border-radius: var(--radius);
}
.varekort a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.varekort__bilde {
  position: relative; display: block;
  aspect-ratio: 700 / 590;
  /* Krem, ikke --sheet: katalogfotoene faar bakgrunnen sin mappet til krem av
     bygg-katalogbilder.py, og boksen maa ha samme tone for at produktet skal
     se ut som det staar paa en plate og ikke i en ramme. Bevisst ogsaa i
     moerk modus, som industriplatene. */
  background: var(--krem); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 6px;
  display: grid; place-items: center;
}
.varekort__bilde img { transition: transform var(--t-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .varekort a:hover .varekort__bilde img { transform: scale(1.03); }
  .varekort a:hover .varekort__navn { color: var(--ink-2); }
}
.varekort__navn { font-weight: 500; line-height: 1.35; }

/* Kapseltabellen paa personvernsiden er bredere enn en telefon. Den ruller
   sidelengs i sin egen boks i stedet for aa dra hele siden med seg.
   Klassene sto i markupen uten stiler, funnet i helrunden (bestilling 171). */
.tabellrull { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.tabellrull table { min-width: 460px; }
.rullehint { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 8px; }
@media (min-width: 761px) { .rullehint { display: none; } }
.varekort__enhet { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.varekort__pris { font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Regnestykket under prisen paa produktsidene, naar antallet er over én:
   «737,50 kr x 5». Enhetsprisen skal aldri forsvinne i totalsummen. */
.pris__regnestykke {
  display: block; margin-top: 4px;
  font-size: var(--fs-small); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.varekort .plate__note { position: static; }

/* Aapne plasser. Kategorien skal vise hvor mange varer den faktisk skal ha,
   ogsaa naar katalogen paa berco-as.no ikke har dem enda. Da staar plassene
   tomme og talte, i stedet for at noen finner paa produktnavn. */
.tomplass {
  margin-top: 22px; padding: 18px 20px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  font-size: var(--fs-small); color: var(--ink-2);
}
.tomplass b { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   19b. Sitat
   Ett utsagn alene paa flaten, i display-snittet. Anfoerselstegnet henger i
   venstre marg saa foerste bokstav staar i loddrett flukt med resten av
   siden. Ingen ramme og ingen bakgrunn: eksklusivitet som begrensning.
   -------------------------------------------------------------------------- */

.sitatseksjon { padding-block: var(--sp-block); }

.sitat { margin: 0; max-width: 44rem; }
.sitat blockquote { margin: 0; }
.sitat blockquote p {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--espresso);
  text-wrap: balance;
}
/* Tegnene settes av CSS og ikke i teksten, saa selve sitatet kan kopieres
   rent og byttes ut uten at noen glemmer dem. Bronse hadde vaert naerliggende,
   men manualen sier at bronse aldri er tekst og aldri paa lys bunn. */
.sitat blockquote p::before { content: "\00AB"; color: var(--ink-3); }
.sitat blockquote p::after  { content: "\00BB"; color: var(--ink-3); }

/* Henget: tegnet trekkes ut i margen slik at V-en i «Vi» staar i flukt med
   overskriften over. `em` maa staa paa avsnittet og ikke paa blockquote,
   ellers regnes den mot broedgraden som arves og ikke mot displaygraden
   teksten faktisk settes i. */
.sitat blockquote p { text-indent: -.37em; }   /* «-tegnet er 0,37 em bredt i Prata */

.sitat figcaption {
  margin-top: clamp(18px, 2vw, 26px);
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 12px;
}
.sitat figcaption::before {
  content: ""; width: clamp(24px, 4vw, 44px); height: 1px;
  background: var(--line-strong); flex: none;
}

@media (max-width: 700px) {
  .sitat { max-width: none; }
  .sitat blockquote p { font-size: var(--fs-h3); }
}

/* USP-raden står alltid synlig under heroen, ikke gjemt i en rotasjon. */
.usp--rad {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 0;
}
/* Skillelinjene arvet `nth-child(odd)` fra tokolonnersvarianten. Paa fire
   kolonner ga det strek etter 1 og 3, men ingen mellom 2 og 3, og naboen til
   hoyre laa klistret inntil streken. Strek og luft settes derfor per
   kolonnetall, med samme gutter paa begge sider av streken. */
.usp--rad li {
  border-bottom: 0;
  padding: 0 22px;
  border-right: 1px solid var(--line);
}
.band .usp--rad li { border-right-color: var(--band-line); }
.usp--rad li:first-child { padding-left: 0; }
.usp--rad li:last-child { border-right: 0; padding-right: 0; }

@media (max-width: 900px) {
  .usp--rad { grid-template-columns: 1fr 1fr; }
  .usp--rad li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
  .usp--rad li:nth-child(even) { padding-right: 0; border-right: 0; }
  /* To rader som ellers hadde stoett i hverandre uten luft. */
  .usp--rad li:nth-child(-n + 2) { padding-bottom: 16px; }
  .usp--rad li:nth-child(n + 3) { padding-top: 16px; }
}
@media (max-width: 560px) {
  .usp--rad { grid-template-columns: 1fr; }
  .usp--rad li { padding: 14px 0; border-right: 0; border-bottom: 1px solid var(--line); }
}


/* --------------------------------------------------------------------------
   20. Kontaktskjema, personvern og samtykke
   -------------------------------------------------------------------------- */

.kontaktskjema { max-width: 62rem; }

.personvernboks {
  margin-top: 44px;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sheet);
}
.personvernboks .fin { max-width: 72ch; }

/* Samtykkebanner. Godta og avslå har samme vekt, som kravet er. */
.samtykke {
  position: fixed; inset: auto 0 0 0;
  z-index: var(--z-toast);
  background: var(--espresso);
  background-image: var(--grain-lys);
  background-size: 180px 180px;
  color: var(--krem);
  border-top: 1px solid transparent;
  border-image: var(--foil-ramp-dyp) 1;
}
.samtykke[hidden] { display: none; }
.samtykke .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  padding-block: 22px;
}
.samtykke h2 { font-family: var(--f-body); font-size: 1rem; font-weight: 500; color: var(--krem); }
.samtykke p { font-size: var(--fs-small); color: #D4C8BC; max-width: 76ch; margin-top: 6px; }
.samtykke a { color: var(--krem); }
.samtykke__valg { display: flex; flex-wrap: wrap; gap: 12px; }
.samtykke .knapp { min-height: 48px; }

/* Banneret er espresso uten .band-klassen, så knappene må snus eksplisitt.
   Uten dette står den sekundære i espresso på espresso og forsvinner. */
.samtykke .knapp--primar {
  background-color: var(--krem); color: var(--espresso); border-color: var(--krem);
  background-image: none;
}
.samtykke .knapp--sekundar { color: var(--krem); border-color: var(--krem); }
@media (hover: hover) and (pointer: fine) {
  .samtykke .knapp--primar:hover { background-color: var(--kraft); border-color: var(--kraft); }
  .samtykke .knapp--sekundar:hover { background-color: rgba(240, 232, 220, .12); }
}
.samtykke :focus-visible { outline-color: var(--krem); }

@media (max-width: 860px) {
  .samtykke .wrap { grid-template-columns: 1fr; align-items: start; }
  .samtykke__valg .knapp { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   21. Ansatte
   Fem navngitte mennesker med direktenummer er hele konkurransefortrinnet mot
   en anonym storgrossist. Derfor er kontaktinfo ikke finskrift her, den er
   selve innholdet.
   -------------------------------------------------------------------------- */

.folk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(22px, 3vw, 36px);
}

.person { display: flex; flex-direction: column; gap: 16px; }
.person__portrett { border-radius: var(--radius); overflow: hidden; }
.person__portrett .plate { aspect-ratio: 4 / 5; min-height: 0; border-radius: 0; }
.person__navn { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.15; }
.person__rolle {
  font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); margin-top: 6px; display: block;
}
.person__kontakt {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.person__kontakt a,
.person__kontakt span {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 44px; padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
  text-decoration: none;
}
.person__kontakt b {
  font-weight: 600; font-size: var(--fs-label); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  flex: 0 0 3.4rem;
}
.person__kontakt a { font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .person__kontakt a:hover { text-decoration: underline; text-underline-offset: .22em; }
}


/* --------------------------------------------------------------------------
   22. Blindpreg og varme flater
   Bronse er forbudt paa lys bunn, saa glansen der kan ikke vaere folie.
   Manualen gir svaret selv: «Blindpreg paa krem og kraft er godkjent og teller
   som espresso i hierarkiet.» Det er den mest eksklusive utfoerelsen i systemet.
   Feltene er derfor preget ned i arket, ikke lagt paa som hvite bokser.
   -------------------------------------------------------------------------- */

/* Skjemafelt: preget ned i arket, varmt, ikke rent hvitt. */
.felt input[type="text"], .felt input[type="email"], .felt input[type="tel"],
.felt input[type="date"], .felt input[type="number"], .felt textarea, .felt select {
  background: var(--sheet);
  border-color: var(--line-strong);
  box-shadow: var(--preg-inn);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.felt input:focus, .felt textarea:focus, .felt select:focus {
  border-color: var(--ink);
  box-shadow: var(--preg-inn), 0 0 0 3px var(--emboss);
}

/* Valgpiller: preget opp av arket, og valgt tilstand er en full espressoflate.
   En tykkere gra ramme er ikke et valg, det er en ubesluttsomhet. */
.pille {
  background: var(--sheet);
  box-shadow: var(--preg-ut);
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease,
              color var(--t-fast) ease, box-shadow var(--t-fast) ease,
              transform var(--t-press) var(--ease-out);
}
.pille:has(input:checked) {
  background: var(--espresso);
  border-color: var(--espresso);
  border-width: 1px;
  padding: 0 18px;
  color: var(--krem);
  box-shadow: var(--preg-inn);
}
.pille:has(input:checked) .fin { color: #CBBEB1; }     /* 9,62 mot espresso */
.pille:has(input:checked) .pille__prov { border-color: rgba(240, 232, 220, .5); }

/* Sveip gir varm kraft, aldri hvitt. Hvitt er fravaer av valg. */
@media (hover: hover) and (pointer: fine) {
  .pille:hover { border-color: var(--ink-2); background: var(--varm-hover); }
  .pille:has(input:checked):hover { background: var(--kaffebrun); border-color: var(--kaffebrun); }
  .spor > a:hover { background: var(--varm-hover); }
  .knapp--sekundar:hover { background: var(--varm-hover); }
  .antall button:hover { background: var(--varm-hover); }
  .kort:hover { border-color: var(--ink-2); background: var(--varm-hover); }
}

/* Bildekort i skjemaet foelger samme logikk. */
.kort { background: var(--sheet); box-shadow: var(--preg-ut); }
.kort:has(input:checked) {
  border-color: var(--espresso); border-width: 1px;
  box-shadow: var(--preg-inn), 0 0 0 2px var(--espresso);
}

/* Hevede ark i innhold: samme preg som feltene, motsatt vei. */
.ark, .notis, .personvernboks, .slipp {
  background: var(--sheet);
  box-shadow: var(--preg-ut);
}
.slipp[data-over="true"] { border-color: var(--ink); background: var(--varm-hover); }

.antall { background: var(--sheet); box-shadow: var(--preg-inn); }

/* --------------------------------------------------------------------------
   23. Kontaktskjemaets oppsummering
   En stabel felter forteller ikke hvor du er. Oppsummeringen ved siden av
   fylles ut mens du velger, saa skjemaet svarer tilbake.
   -------------------------------------------------------------------------- */

.kontaktskjema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
  max-width: none;
}
.kontaktskjema__felt { min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* Kortet «Din henvendelse» finnes for kurven. Uten varer (ingen kurvmodus)
   skjules det, og skjemaet staar alene i én smal kolonne, saa den som bare
   klikket «Kontakt oss» faar felter, melding, samtykke og Send. */
.kontaktskjema:not([data-kurvmodus]) { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
.kontaktskjema:not([data-kurvmodus]) .oppsummering { display: none; }
.kontaktskjema .personvernboks { margin-top: 10px; }

.oppsummering {
  position: sticky; top: 104px;
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(22px, 2.4vw, 28px);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--preg-ut);
}
.oppsummering__hjelp { padding-top: 4px; border-top: 1px solid var(--line); }

@media (max-width: 980px) {
  .kontaktskjema { grid-template-columns: 1fr; }
  .oppsummering { position: static; order: -1; }
}

/* Sikkerhetsnett: Cookiebots egen dialog skal aldri vises. Vi bruker deres
   custom consent-API og vaart eget banner, og to bannere er ingen loesning. */
#CybotCookiebotDialog,
#CybotCookiebotDialogBodyUnderlay { display: none !important; }

/* Feilmelding ved innsending. Sier hva som gikk galt og gir en vei videre. */
.feilmelding {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--sheet);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--preg-ut);
  font-size: var(--fs-small);
  color: var(--ink);
  max-width: 52ch;
}

/* --------------------------------------------------------------------------
   24. Firmasoek mot Enhetsregisteret
   Brreg har et aapent API uten noekkel. Skriver du firmanavn, henter vi
   organisasjonsnummeret. Skriver du nummeret, henter vi navnet. Feiler
   oppslaget, er begge fortsatt vanlige tekstfelt.
   -------------------------------------------------------------------------- */

.sok { position: relative; }

.sok__treff {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  z-index: var(--z-nedtrekk);
  margin: 0; padding: 0;
  max-height: 17rem; overflow-y: auto;
  background: var(--sheet);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 16px 38px -16px rgba(31, 24, 21, .34);
}
.sok__treff li {
  padding: 11px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) ease;
}
.sok__treff li:last-child { border-bottom: 0; }
.sok__treff li[aria-selected="true"] { background: var(--varm-hover); }
@media (hover: hover) and (pointer: fine) {
  .sok__treff li:hover { background: var(--varm-hover); }
}
.sok__navn { display: block; font-size: var(--fs-small); font-weight: 500; }
.sok__meta {
  display: block; margin-top: 3px;
  font-size: var(--fs-label); letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.felt__hjelp {
  align-self: end;
  font-size: var(--fs-small);
  color: var(--ink-3);
  padding-bottom: 14px;
  max-width: 42ch;
}
#orgnr { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

@media (max-width: 620px) { .felt__hjelp { align-self: start; padding-bottom: 0; } }

.felt input[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }

/* --------------------------------------------------------------------------
   25. Autofyll
   Chrome maler sine egne felt lyseblaa naar nettleseren har fylt dem ut, og
   overstyrer baade bakgrunn og tekstfarge. Den eneste maaten aa ta den tilbake
   paa er en innvendig skygge stor nok til aa dekke feltet. Pregskyggen legges
   foerst, saa den fortsatt ligger over fyllet.
   -------------------------------------------------------------------------- */

.felt input:-webkit-autofill,
.felt input:-webkit-autofill:hover,
.felt input:-webkit-autofill:focus,
.felt input:-webkit-autofill:active,
.felt textarea:-webkit-autofill,
.felt select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: var(--preg-inn), 0 0 0 100vmax var(--sheet) inset;
          box-shadow: var(--preg-inn), 0 0 0 100vmax var(--sheet) inset;
  caret-color: var(--ink);
  /* Chrome animerer fyllet inn igjen; en absurd lang overgang holder det ute. */
  transition: background-color 100000s ease-in-out 0s;
}
.felt input:-webkit-autofill:focus {
  -webkit-box-shadow: var(--preg-inn), 0 0 0 100vmax var(--sheet) inset, 0 0 0 3px var(--emboss);
          box-shadow: var(--preg-inn), 0 0 0 100vmax var(--sheet) inset, 0 0 0 3px var(--emboss);
}

/* ------------------------------------------------------------------------
   Variant A, til vurdering (bestilling 183): bronse som aksent paa moerk
   bunn. Folietokenen fantes alt (--band-foil, «kun haarlinjer og merket»);
   her utvides den til merkelapper og haarlinjer paa band og bunn. Lyse
   flater roeres ikke, der er espresso fortsatt eneste blekk. Hele blokken
   kan slettes for aa gaa tilbake.
   ------------------------------------------------------------------------ */
.band .merkelapp { color: var(--band-foil); }
.bunn h3 { color: var(--band-foil); }
.band .regel { border-top-color: rgba(176, 142, 94, .38); }
.band .usp { border-top-color: rgba(176, 142, 94, .32); }
.band .usp li { border-bottom-color: rgba(176, 142, 94, .32); }
.band .usp li:nth-child(odd) { border-right-color: rgba(176, 142, 94, .32); }
.bunn__strek { border-top-color: rgba(176, 142, 94, .38); }

/* --------------------------------------------------------------------------
   Flyttemelding. MIDLERTIDIG.

   Staar paa /butikk og /for-industri i overgangen etter at domenet pekes om.
   440 av de 484 gamle adressene lander paa /butikk, og den siden sier
   «aapner snart». Uten denne linjen leser landingen som «de sluttet med
   dette» i stedet for «de har flyttet, jeg ringer».

   Kraft er lovlig bunn og tar espressoblekk, 8,15 mot kraft. Ingen ny farge
   innfoeres. Fjernes naar de gamle adressene har sluttet aa gi trafikk,
   tidligst naar Search Console viser at reindekseringen har satt seg.
   -------------------------------------------------------------------------- */

.flyttemelding {
  background: var(--kraft);
  color: var(--kraft-ink);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 18px;
  font-size: var(--fs-small);
  line-height: 1.55;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
}
.flyttemelding b { font-weight: 600; }
.flyttemelding a { color: var(--kraft-ink); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .flyttemelding a:hover { text-decoration-thickness: 2px; }
}