/* Helperformance Norge – felles stilark */

/* Reserveskrift mens Barlow lastes. Arial er skalert (size-adjust) så tekstlinjene blir like brede som i Barlow,
   og får Barlows overlengde og underlengde. Da bryter tekstene på samme sted før og etter at Barlow kommer,
   og siden flytter seg ikke (CLS). Tallene er målt i Chrome mot Barlow fra Google Fonts. Arial Narrow finnes ikke
   på iPhone; der brukes vanlig Arial, skalert mer ned. Overskriftene er stort sett versaler, så Barlow Condensed
   er tilpasset dem. */
@font-face { font-family: 'Barlow reserve'; src: local('Arial'), local('ArialMT'); font-weight: 100 500;
  size-adjust: 94%; ascent-override: 106.4%; descent-override: 21.3%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow reserve'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 900;
  size-adjust: 90%; ascent-override: 111.1%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed reserve'; src: local('Arial Narrow Bold'), local('ArialNarrow-Bold'); font-weight: 600 900;
  size-adjust: 83%; ascent-override: 120.5%; descent-override: 24.1%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed reserve 2'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 900;
  size-adjust: 68%; ascent-override: 147.1%; descent-override: 29.4%; line-gap-override: 0%; }

:root {
  --svart: #0c0d0f;
  --grafitt: #17191d;
  --grafitt-2: #22252a;
  --stal: #8a9099;
  --flate: #f3f3f1;
  --flate-2: #e9e9e6;
  --hvit: #ffffff;
  --tekst: #15171a;
  --dempet: #5b6169;
  --linje: #dcddd9;
  --rod: #d8140c;
  --rod-mork: #a90f08;
  /* Rød som har nok kontrast (WCAG AA) som liten tekst på svart */
  --rod-lys: #ff5a4f;
  --gronn: #1d7a3a;
  --oransje: #b25a00;
  --radius: 6px;
  --skygge: 0 1px 2px rgba(12, 13, 15, .06), 0 8px 24px rgba(12, 13, 15, .06);
  --overskrift: 'Barlow Condensed', 'Barlow Condensed reserve', 'Barlow Condensed reserve 2', 'Arial Narrow', sans-serif;
  --brodtekst: 'Barlow', 'Barlow reserve', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bredde: 1600px;
  --kant: clamp(16px, 4vw, 64px);
  /* luft til skjermkanten for menylinjen og teksten i toppbildet */
  --kant-topp: clamp(20px, 4vw, 64px);
  --topp-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--hvit); color: var(--tekst); font: 400 16px/1.55 var(--brodtekst); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--overskrift); font-weight: 700; line-height: 1.05; letter-spacing: .005em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); text-transform: uppercase; text-wrap: balance; }
h2, h3 { text-wrap: balance; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); text-transform: uppercase; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--bredde); margin: 0 auto; padding: 0 var(--kant); }
.skjult { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--rod); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- knapper ---------- */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.4em; border: 2px solid var(--rod); border-radius: var(--radius); background: var(--rod); color: #fff; font: 700 1.05rem/1 var(--overskrift); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.knapp:hover { background: var(--rod-mork); border-color: var(--rod-mork); }
.knapp:active { transform: translateY(1px); }
.knapp.sekundar { background: transparent; color: inherit; border-color: currentColor; }
.knapp.sekundar:hover { background: rgba(255, 255, 255, .08); }
.knapp.mork { background: var(--grafitt); border-color: var(--grafitt); }
.knapp.mork:hover { background: #000; border-color: #000; }
.knapp.bred { width: 100%; }
.knapp[disabled] { opacity: .5; cursor: not-allowed; }
.lenkeknapp { background: none; border: 0; padding: 0; color: var(--dempet); text-decoration: underline; cursor: pointer; font-size: .92rem; }
.lenkeknapp:hover { color: var(--rod); }

/* ---------- topp ---------- */
/* Én svart linje: logo, modeller, kontakt, søk og kurv. På de andre sidene ruller den bort med siden.
   På forsiden ligger den fast og gjennomsiktig oppå toppbildet, blir med et lite stykke ned, og glir så opp og forsvinner
   (klassen «borte», satt i felles.js). Fordi den ligger fast og ikke flyttes med rullingen, blir det ingen hvit glipe
   når man ruller fort opp igjen. */
/* #topp er tom til felles.js fyller den. Høyden holdes av, og på forsiden ligger den fast fra start,
   så innholdet under ikke flytter seg når menyen kommer. */
#topp { min-height: calc(var(--topp-h) + 1px); background: var(--svart); }
[data-side="forside"] #topp { position: fixed; top: 0; left: 0; right: 0; min-height: 0; background: transparent; }
.topp { position: relative; z-index: 50; background: var(--svart); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.topp.over-bilde { position: fixed; top: 0; left: 0; right: 0; background: transparent; border-bottom-color: transparent;
  transition: background-color .35s ease, border-color .35s ease, opacity .35s ease, transform .35s ease, visibility 0s; }
.topp.over-bilde.borte:not(.meny-apen):not(.sok-apen):not(:has(:focus-visible)) {
  opacity: 0; transform: translateY(-100%); visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, visibility 0s .35s; }
/* Tastaturfokus i menyen etter at man har rullet ned: da trengs bakgrunn for å lese den. */
.topp.over-bilde.borte:has(:focus-visible) { background: var(--svart); }
@media (prefers-reduced-motion: reduce) { .topp.over-bilde.borte { transform: none; } }
.topp.over-bilde::before { content: ''; position: absolute; inset: 0 0 -48px; background: linear-gradient(180deg, rgba(8, 9, 11, .75), rgba(8, 9, 11, 0)); pointer-events: none; transition: opacity .25s; }
.topp.over-bilde.meny-apen, .topp.over-bilde.sok-apen { background: var(--svart); border-bottom-color: rgba(255, 255, 255, .07); }
.topp.over-bilde.meny-apen::before, .topp.over-bilde.sok-apen::before { opacity: 0; }
.topp .wrap { max-width: none; padding-left: max(var(--kant-topp), env(safe-area-inset-left, 0px)); padding-right: max(var(--kant-topp), env(safe-area-inset-right, 0px)); }
.topp-rad { position: relative; display: flex; align-items: center; gap: 28px; height: var(--topp-h); }
.logo { display: inline-flex; align-items: center; text-decoration: none; color: #fff; flex-shrink: 0; }
.logo-bilde { height: 34px; width: auto; }
.logo-tekst { font: 700 1.45rem/0.9 var(--overskrift); letter-spacing: .05em; display: flex; flex-direction: column; }
.logo-tekst small { font-size: .56rem; letter-spacing: .5em; color: var(--rod-lys); margin-top: 4px; font-weight: 700; }

.hovedmeny { display: flex; align-items: stretch; height: 100%; gap: 4px; }
.hovedmeny > a { position: relative; display: flex; align-items: center; padding: 0 12px; font: 600 1rem/1 var(--overskrift); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: #c9ccd1; white-space: nowrap; transition: color .15s; }
.hovedmeny > a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--rod); transform: scaleX(0); transition: transform .2s; }
.hovedmeny > a:hover { color: #fff; }
.hovedmeny > a:hover::after { transform: scaleX(.4); }
.hovedmeny > a[aria-current="page"] { color: #fff; }
.hovedmeny > a[aria-current="page"]::after { transform: scaleX(1); }
.meny-ekstra { display: none; }

.topp-handlinger { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.topp-kontakt { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; height: 44px; color: #c9ccd1; text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; border-radius: var(--radius); }
.topp-kontakt:hover { color: #fff; }
.topp-kontakt svg { width: 19px; height: 19px; }
.ikonknapp { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; border-radius: var(--radius); cursor: pointer; }
.ikonknapp:hover, .ikonknapp[aria-expanded="true"] { background: rgba(255, 255, 255, .1); }
.ikonknapp svg { width: 24px; height: 24px; }
.kurv-antall { position: absolute; top: 2px; right: 0; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--rod); color: #fff; font: 700 .72rem/19px var(--brodtekst); text-align: center; }

.sokepanel { position: absolute; left: 0; right: 0; top: 100%; background: var(--grafitt); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.sok { display: flex; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.sok > svg { width: 24px; height: 24px; color: #8a9099; flex-shrink: 0; }
.sok input { flex: 1; min-width: 0; height: 48px; border: 0; border-bottom: 2px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; font-size: 1.2rem; padding: 0 4px; }
.sok input::placeholder { color: #80868e; }
.sok input:focus, .sok input:focus-visible { outline: none; border-bottom-color: var(--rod); }
.sok input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sok .knapp { min-height: 44px; }

.meny-knapp { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 13px 10px; cursor: pointer; flex-direction: column; justify-content: space-between; margin-left: -10px; }
.meny-knapp span { display: block; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.meny-knapp[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.meny-knapp[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.meny-knapp[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.testmerke { position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60; padding: 6px 10px; border-radius: 6px; background: #ffd23f; color: #3a2c00; font-size: .78rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); pointer-events: none; }

@media (max-width: 1099px) {
  .topp-handlinger .topp-kontakt span { display: none; }
  .topp-handlinger .topp-kontakt { padding: 0; width: 44px; justify-content: center; color: #fff; }
  .topp-handlinger .topp-kontakt svg { width: 22px; height: 22px; }
}
@media (max-width: 899px) {
  :root { --topp-h: 60px; }
  .topp-rad { gap: 8px; }
  .meny-knapp { display: flex; }
  .logo-tekst { font-size: 1.2rem; }
  .logo-bilde { height: 28px; }
  .topp-handlinger .topp-kontakt { display: none; }
  .hovedmeny { display: none; position: absolute; left: 0; right: 0; top: 100%; height: auto; flex-direction: column; gap: 0; padding: 4px 16px 18px; background: var(--svart); border-top: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); max-height: calc(100vh - var(--topp-h)); overflow-y: auto; }
  .hovedmeny.apen { display: flex; }
  .hovedmeny > a { padding: 16px 0; font-size: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .hovedmeny > a::after { display: none; }
  .hovedmeny > a[aria-current="page"] { color: var(--rod-lys); }
  .meny-ekstra { display: flex; flex-direction: column; padding-top: 10px; }
  .meny-ekstra a { padding: 10px 0; color: #c9ccd1; text-decoration: none; font-size: 1rem; }
  .meny-ekstra .topp-kontakt { padding: 10px 0; height: auto; }
  .sok { flex-wrap: wrap; }
  .sok > svg, .sok #sok-lukk { display: none; }
  .sok input { flex-basis: 100%; }
  .sok .knapp { flex: 1; }
}

/* ---------- forside ---------- */
.overtittel { display: inline-block; font: 600 .9rem/1 var(--overskrift); letter-spacing: .2em; text-transform: uppercase; color: var(--rod); margin-bottom: 14px; }
/* Toppbildet dekker hele toppen, også bak menylinjen. PC: teksten ligger over bildet til venstre.
   Mobil: bildet øverst og teksten under, på svart. */
.topbilde { position: relative; isolation: isolate; background: var(--svart); color: #fff; }
.topbilde-foto { position: relative; margin: 0; height: calc(var(--topp-h) + 52vw); max-width: 100%; overflow: hidden; }
.topbilde-foto picture { display: contents; }
.topbilde-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 50%; }
.topbilde-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--svart) 0%, rgba(12, 13, 15, 0) 30%); }
.topbilde-tekst { position: relative; padding: 4px max(var(--kant-topp), env(safe-area-inset-left, 0px)) 40px; }
.topbilde-tekst h1 { margin-bottom: 16px; }
.topbilde-tekst h1 em { font-style: normal; color: var(--rod); }
.topbilde-tekst .ingress { font-size: 1.1rem; color: #c9ccd1; max-width: 24em; margin-bottom: 26px; }
.topbilde .overtittel { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.topbilde .overtittel::before { content: ''; width: 28px; height: 3px; background: var(--rod); }
@media (min-width: 900px) {
  /* Fyller nøyaktig det første skjermbildet, menylinjen inkludert. */
  .topbilde { display: flex; align-items: flex-end; height: 100vh; height: 100svh; min-height: 460px; }
  .topbilde-foto { position: absolute; inset: 0; z-index: -1; height: auto; }
  .topbilde-foto img { object-position: 50% 55%; }
  .topbilde-foto::after { background:
    linear-gradient(90deg, rgba(8, 9, 11, .88) 0%, rgba(8, 9, 11, .55) 30%, rgba(8, 9, 11, 0) 52%),
    linear-gradient(0deg, rgba(8, 9, 11, .75) 0%, rgba(8, 9, 11, 0) 42%); }
  .topbilde-tekst { width: 100%; padding: 0 var(--kant-topp) clamp(48px, 6vw, 96px); }
  .topbilde-tekst > * { max-width: 28rem; }
  .topbilde-tekst h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .4); }
  .topbilde-tekst .ingress { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
}

.finn-band { background: var(--grafitt); color: #fff; border-top: 3px solid var(--rod); }
.finn { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 20px; padding-bottom: 20px; align-items: center; }
.finn h2 { font-size: 1.3rem; margin: 0; }
.finn select { min-height: 48px; color: #fff; border-color: rgba(255, 255, 255, .22); background-color: rgba(255, 255, 255, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset -40px 0 0 -39px rgba(255, 255, 255, .18); }
.finn select:hover:not(:disabled) { border-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .1); }
.finn select:focus { border-color: #fff; box-shadow: inset -40px 0 0 -39px rgba(255, 255, 255, .18), 0 0 0 3px rgba(216, 20, 12, .45); }
.finn select:disabled { opacity: .4; }
.finn .knapp { min-height: 46px; }
@media (min-width: 900px) {
  .finn { grid-template-columns: auto repeat(3, minmax(140px, 1fr)) auto; gap: 12px; }
  .finn h2 { font-size: 1.15rem; max-width: 9em; }
}

.seksjon { padding: 64px 0; }
/* Seksjonene og bunnteksten ligger under bretten: nettleseren tegner dem først når de nærmer seg skjermen.
   «auto» husker den ekte høyden etter første gang, så rullefeltet og hopp tilbake blir riktige. */
main > .seksjon { content-visibility: auto; contain-intrinsic-size: auto 800px; }
.bunn { content-visibility: auto; contain-intrinsic-size: auto 400px; }
.seksjon.gra { background: var(--flate); }
.seksjon.mork { background: var(--grafitt); color: #fff; }
.seksjon-topp { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.seksjon-topp h2 { margin: 0; }
.seksjon-topp a { font-weight: 600; color: var(--rod); text-decoration: none; }
.seksjon-topp a:hover { text-decoration: underline; }


.fordeler { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px; }
.fordel h3 { font-size: 1.35rem; text-transform: uppercase; margin-bottom: 8px; }
.fordel p { color: var(--dempet); margin: 0; }
.seksjon.mork .fordel p { color: #b8bcc2; }
.fordel-ikon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--rod); color: #fff; margin-bottom: 14px; font: 700 1.3rem/1 var(--overskrift); }

.bygg { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .bygg { grid-template-columns: 1fr 1fr; } }
.bygg-bilde { background: radial-gradient(circle at 50% 45%, #fff 0, var(--flate) 70%); border-radius: 12px; padding: 20px; }
.bygg-bilde.foto { margin: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid var(--linje); }
.bygg-bilde.foto img { width: 100%; height: auto; }
.bygg ol { padding-left: 1.2em; margin: 0 0 24px; }
.bygg li { margin-bottom: 6px; }

/* ---------- produktkort ---------- */
/* produktBilde() pakker bildet i <picture> for WebP. Rammen tar ikke plass selv, så .produktbilde-reglene
   (bredde, høyde, object-fit) virker som før. */
.produktbilde-ramme { display: contents; }
.produktbilde { height: auto; }
.rutenett { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
/* Plass til kortene før forside.js fyller rutenettene (omtrent én rad pakker og to rader mest kjøpt). */
#pakker:empty { min-height: 480px; }
@media (max-width: 599px) { #pakker:empty { min-height: 1000px; } }
.kort { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linje); border-radius: 10px; overflow: hidden; text-decoration: none; transition: box-shadow .2s, transform .2s, border-color .2s; }
.kort:hover { box-shadow: var(--skygge); transform: translateY(-2px); border-color: #c9cac6; }
.kort-bilde { position: relative; background: #fff; aspect-ratio: 1; display: grid; place-items: center; border-bottom: 1px solid var(--linje); overflow: hidden; }
.kort-bilde .produktbilde { width: 100%; height: 100%; object-fit: contain; }
.kort-bilde .merke { background: var(--svart); color: #fff; }
.merke { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; font: 700 .78rem/1 var(--brodtekst); letter-spacing: .03em; }
.merke-rod { background: var(--rod); color: #fff; }
.kort-tekst { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.kort-kat { font: 600 .78rem/1 var(--overskrift); letter-spacing: .14em; text-transform: uppercase; color: var(--dempet); margin-bottom: 6px; }
.kort h3 { font-size: 1.22rem; margin-bottom: 6px; }
.kort p { color: var(--dempet); font-size: .92rem; margin-bottom: 14px; }
.kort-bunn { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pris { font: 700 1.3rem/1 var(--overskrift); letter-spacing: .02em; }
.forpris { color: var(--dempet); font-size: .9rem; }
.lagerstatus { font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.lagerstatus::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lagerstatus.lager { color: var(--gronn); }
.lagerstatus.bestilling { color: var(--oransje); }

/* ---------- sidetopp på undersider ---------- */
.sidetopp { background: var(--flate); padding: 28px 0 24px; border-bottom: 1px solid var(--linje); }
.sidetopp h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 6px; }
.sidetopp p { color: var(--dempet); margin: 0; max-width: 46em; }
.brodsmuler { font-size: .86rem; color: var(--dempet); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.brodsmuler a { color: inherit; }
.brodsmuler span::before { content: '/'; margin-right: 6px; opacity: .5; }

/* ---------- butikk ---------- */
.butikk { display: grid; gap: 28px; padding-top: 28px; padding-bottom: 64px; }
.butikk > * { min-width: 0; }
@media (min-width: 900px) { .butikk { grid-template-columns: 250px 1fr; } }
.filter h2 { font-size: 1.1rem; letter-spacing: .1em; margin: 0 0 10px; }
.filter fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.filter legend { font: 700 1.05rem/1 var(--overskrift); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; padding: 0; }
.valgliste label { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.valgliste input { accent-color: var(--rod); width: 18px; height: 18px; }
.valgliste .antall { margin-left: auto; color: var(--dempet); font-size: .85rem; }
.verktoy { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.verktoy .treff { color: var(--dempet); }
.verktoy-valg { display: flex; gap: 10px; margin-left: auto; }
.verktoy-valg .felt { min-width: 190px; }
.ingen-treff { padding: 48px 20px; text-align: center; background: var(--flate); border-radius: 10px; }
.filter-knapp { display: none; }
@media (max-width: 899px) {
  .filter { display: none; }
  .filter.apen { display: block; }
  .filter-knapp { display: inline-flex; }
}

/* ---------- skjemaelementer ---------- */
.felt { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.felt label, .felt .etikett { font-weight: 600; font-size: .95rem; }
.felt .hjelp { font-size: .85rem; color: var(--dempet); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"]:not(#sokefelt), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid #c7c9c4; border-radius: var(--radius); background: #fff; font-size: 1rem;
}
textarea { min-height: 130px; resize: vertical; }
/* Nedtrekkslister: egen pil i en liten rute til høyre, tydelig ramme ved hover og fokus. */
select {
  appearance: none; cursor: pointer; font-weight: 500; color: var(--tekst); padding-right: 52px; border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23d8140c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 13px;
  box-shadow: inset -40px 0 0 -39px #dcddd9; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
select:hover:not(:disabled) { border-color: #8a9099; }
select:disabled { cursor: not-allowed; opacity: .55; }
select option { color: var(--tekst); background: #fff; font-weight: 500; }

/* Egen nedtrekksliste (pyntNedtrekk i felles.js). Knappen ser ut som feltet over; listen åpner seg under. */
.nedtrekk { position: relative; min-width: 0; }
.nedtrekk > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.nedtrekk-knapp {
  display: flex; align-items: center; width: 100%; min-height: 48px; padding: 10px 52px 10px 14px; text-align: left; cursor: pointer;
  font: 500 1rem/1.2 var(--brodtekst); color: var(--tekst); border: 1.5px solid #c7c9c4; border-radius: 8px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23d8140c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 13px;
  box-shadow: inset -40px 0 0 -39px #dcddd9; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.nedtrekk-knapp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nedtrekk-knapp.tom { color: var(--dempet); }
.nedtrekk-knapp:hover:not(:disabled) { border-color: #8a9099; }
.nedtrekk-knapp:focus-visible, .nedtrekk.apen .nedtrekk-knapp { outline: none; border-color: var(--tekst); box-shadow: inset -40px 0 0 -39px #dcddd9, 0 0 0 3px rgba(216, 20, 12, .2); }
.nedtrekk.apen .nedtrekk-knapp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%23d8140c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.nedtrekk-knapp:disabled { cursor: not-allowed; opacity: .55; }
.nedtrekk-liste {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; min-width: 180px; max-height: 320px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: #fff; color: var(--tekst); border: 1px solid var(--linje); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(12, 13, 15, .18), 0 2px 6px rgba(12, 13, 15, .08); animation: nedtrekk-inn .14s ease-out;
}
@keyframes nedtrekk-inn { from { opacity: 0; transform: translateY(-4px); } }
.nedtrekk-liste li { position: relative; padding: 11px 36px 11px 12px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.nedtrekk-liste li.plassholder { color: var(--dempet); font-weight: 400; }
.nedtrekk-liste li.aktiv { background: var(--flate); }
.nedtrekk-liste li[aria-selected="true"] { font-weight: 700; }
.nedtrekk-liste li[aria-selected="true"]::after { content: ''; position: absolute; right: 14px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border: solid var(--rod); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* Mørk utgave i velgeren på forsiden. */
.finn .nedtrekk-knapp { color: #fff; border-color: rgba(255, 255, 255, .22); background-color: rgba(255, 255, 255, .06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset -40px 0 0 -39px rgba(255, 255, 255, .18); }
.finn .nedtrekk-knapp.tom { color: #c9ccd1; }
.finn .nedtrekk-knapp:hover:not(:disabled) { border-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .1); }
.finn .nedtrekk-knapp:focus-visible, .finn .nedtrekk.apen .nedtrekk-knapp { border-color: #fff; box-shadow: inset -40px 0 0 -39px rgba(255, 255, 255, .18), 0 0 0 3px rgba(216, 20, 12, .45); }
.finn .nedtrekk.apen .nedtrekk-knapp { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 7.5 6 4l3.5 3.5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.finn .nedtrekk-knapp:disabled { opacity: .4; }
.finn .nedtrekk-liste { background: var(--grafitt-2); color: #fff; border-color: rgba(255, 255, 255, .12); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.finn .nedtrekk-liste li.plassholder { color: #9aa0a7; }
.finn .nedtrekk-liste li.aktiv { background: rgba(255, 255, 255, .08); }

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tekst); box-shadow: 0 0 0 3px rgba(216, 20, 12, .2); }
select:focus { box-shadow: inset -40px 0 0 -39px #dcddd9, 0 0 0 3px rgba(216, 20, 12, .2); }
.feil input, .feil select, input.feil, select.feil { border-color: var(--rod); }
.feilmelding { color: var(--rod); font-size: .88rem; font-weight: 600; }
.to-kol { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 560px) { .to-kol { grid-template-columns: 1fr 1fr; } .to-kol .hel { grid-column: 1 / -1; } }
.postnr-rad { display: grid; grid-template-columns: 120px 1fr; gap: 14px; }

/* ---------- produktside ---------- */
.produkt { display: grid; gap: 32px; padding-top: 24px; padding-bottom: 56px; }
@media (min-width: 960px) { .produkt { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } .produkt-bilde { position: sticky; top: 24px; } }
.produkt-bilde { margin: 0; }
.galleri-stor { background: #fff; border: 1px solid var(--linje); border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.galleri-stor .produktbilde { width: 100%; height: 100%; object-fit: contain; }
.galleri-sma { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.produkt > * { min-width: 0; }
.galleri-sma button { width: 76px; aspect-ratio: 1; padding: 0; background: #fff; border: 1px solid var(--linje); border-radius: 8px; overflow: hidden; cursor: pointer; }
.galleri-sma button[aria-current] { border: 2px solid var(--tekst); }
.galleri-sma .produktbilde { width: 100%; height: 100%; object-fit: contain; }
.produkt-bilde figcaption { margin-top: 10px; }
.advarsel { background: #fff4e5; border-left: 3px solid var(--oransje); padding: 10px 14px; border-radius: 4px; font-size: .92rem; }
.prikk.metall { background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .3)); }
.produkt-bilde figcaption { text-align: center; font-size: .88rem; color: var(--dempet); }
.produkt-info h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 10px; }
.produkt-info .ingress { font-size: 1.1rem; color: var(--dempet); }
.produkt-pris { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 6px; flex-wrap: wrap; }
.produkt-pris .pris { font-size: 2.2rem; }
.mva { font-size: .85rem; color: var(--dempet); }
.valggruppe { border: 0; padding: 0; margin: 22px 0 0; }
.valggruppe legend, .valggruppe .etikett { font: 700 1.05rem/1 var(--overskrift); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; padding: 0; display: block; }
.valggruppe legend span, .valggruppe .etikett span { font-family: var(--brodtekst); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--dempet); margin-left: 6px; }
.prikker { display: flex; flex-wrap: wrap; gap: 8px; }
.prikker label { position: relative; cursor: pointer; }
.prikker input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.prikk { display: block; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .2); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .15), inset 0 4px 6px rgba(255, 255, 255, .3); }
.prikk.stal { background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 5px); }
.prikker input:checked + .prikk { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tekst); }
.prikker input:focus-visible + .prikk { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--rod); }
.piller { display: flex; flex-wrap: wrap; gap: 8px; }
.piller label { position: relative; }
.piller input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.piller span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; border: 1.5px solid #c7c9c4; border-radius: var(--radius); cursor: pointer; font-weight: 500; }
.piller span small { color: var(--dempet); margin-left: 6px; }
.piller input:checked + span { border-color: var(--tekst); background: var(--tekst); color: #fff; }
.piller input:checked + span small { color: #c9ccd1; }
.piller input:focus-visible + span { box-shadow: 0 0 0 3px rgba(216, 20, 12, .35); }
.kjop-rad { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.kjop-rad .knapp { flex: 1; min-width: 200px; min-height: 54px; font-size: 1.15rem; }
.antallvelger { display: inline-flex; align-items: center; border: 1.5px solid #c7c9c4; border-radius: var(--radius); height: 54px; }
.antallvelger button { width: 44px; height: 100%; border: 0; background: none; font-size: 1.3rem; cursor: pointer; }
.antallvelger button:hover { color: var(--rod); }
.antallvelger input { width: 46px; border: 0; text-align: center; font-weight: 600; min-height: 0; padding: 0; -moz-appearance: textfield; }
.antallvelger input::-webkit-inner-spin-button, .antallvelger input::-webkit-outer-spin-button { -webkit-appearance: none; }
.antallvelger.liten { height: 40px; }
.antallvelger.liten button { width: 34px; }
.antallvelger.liten input { width: 34px; }
.punkter { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 8px; }
.punkter li { padding-left: 28px; position: relative; }
.punkter li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--gronn); border-bottom: 2.5px solid var(--gronn); transform: rotate(-45deg); }
.leveringsinfo { margin-top: 22px; padding: 14px 16px; background: var(--flate); border-radius: 8px; font-size: .93rem; display: grid; gap: 4px; }
.produkt-detaljer { padding-bottom: 56px; display: grid; gap: 32px; }
@media (min-width: 900px) { .produkt-detaljer { grid-template-columns: 1.2fr 1fr; } }
.spes { width: 100%; border-collapse: collapse; }
.spes th, .spes td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--linje); vertical-align: top; }
.spes th { width: 45%; color: var(--dempet); font-weight: 500; }

/* ---------- handlekurv og kasse ---------- */
.kurv-side { display: grid; gap: 32px; padding-top: 28px; padding-bottom: 64px; align-items: start; }
@media (min-width: 960px) { .kurv-side { grid-template-columns: 1fr 380px; } }
.kurvlinjer { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linje); }
.kurvlinje { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linje); align-items: start; }
.kurvlinje-bilde { background: #fff; border: 1px solid var(--linje); border-radius: 8px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.kurvlinje-bilde .produktbilde { width: 100%; height: 100%; object-fit: contain; }
.kurvlinje h3 { font-size: 1.15rem; margin-bottom: 4px; }
.kurvlinje h3 a { text-decoration: none; }
.kurvlinje h3 a:hover { color: var(--rod); }
.kurvlinje dl { margin: 0 0 10px; font-size: .88rem; color: var(--dempet); display: grid; grid-template-columns: auto 1fr; gap: 0 8px; }
.kurvlinje dd { margin: 0; }
.kurvlinje-handling { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kurvlinje-pris { text-align: right; font: 700 1.2rem/1 var(--overskrift); white-space: nowrap; }
.kurvlinje-pris small { display: block; font: 400 .8rem/1.4 var(--brodtekst); color: var(--dempet); margin-top: 4px; }
@media (max-width: 559px) {
  .kurvlinje { grid-template-columns: 76px 1fr; }
  .kurvlinje-pris { grid-column: 2; text-align: left; }
}
.oppsummering { background: var(--flate); border-radius: 12px; padding: 22px; }
@media (min-width: 960px) { .oppsummering { position: sticky; top: 24px; } }
.oppsummering h2 { font-size: 1.5rem; }
.sumlinje { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.sumlinje.total { border-top: 2px solid var(--tekst); margin-top: 8px; padding-top: 14px; font: 700 1.5rem/1 var(--overskrift); }
.sumlinje.mva { font-size: .85rem; color: var(--dempet); padding-top: 0; }
.fraktmaler { margin: 4px 0 14px; font-size: .9rem; }
.fraktmaler .spor { height: 6px; background: var(--flate-2); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.fraktmaler .spor span { display: block; height: 100%; background: var(--gronn); border-radius: 3px; }
.oppsummering .knapp { margin-top: 16px; }
.trygg { font-size: .85rem; color: var(--dempet); text-align: center; margin: 12px 0 0; }
.tom-kurv { text-align: center; padding: 56px 16px; }
.tom-kurv p { color: var(--dempet); }

.kasse-steg { background: #fff; border: 1px solid var(--linje); border-radius: 12px; padding: 22px; margin-bottom: 18px; }
.kasse-steg h2 { font-size: 1.45rem; display: flex; align-items: center; gap: 10px; }
.kasse-steg h2 .nr { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tekst); color: #fff; font-size: 1rem; }
.radiokort { display: grid; gap: 10px; }
.radiokort label { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border: 1.5px solid #c7c9c4; border-radius: 8px; cursor: pointer; }
.radiokort label:has(input:checked) { border-color: var(--tekst); box-shadow: inset 0 0 0 1px var(--tekst); }
.radiokort label.av { opacity: .45; cursor: not-allowed; }
.radiokort input { accent-color: var(--rod); width: 18px; height: 18px; grid-row: span 2; }
.radiokort strong { font-weight: 600; }
.radiokort small { grid-column: 2; color: var(--dempet); }
.radiokort .rk-pris { grid-row: 1; grid-column: 3; font-weight: 600; }
.avkryss { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; }
.avkryss input { accent-color: var(--rod); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; }
.mini-linjer { list-style: none; padding: 0; margin: 0 0 12px; }
.mini-linjer li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linje); font-size: .92rem; align-items: center; }
.mini-linjer .kurvlinje-bilde { border-radius: 6px; }
.mini-linjer small { display: block; color: var(--dempet); }
.testvarsel { background: #fff7d6; border: 1px solid #f0d36b; border-radius: 8px; padding: 12px 14px; font-size: .92rem; margin-bottom: 18px; }

/* ---------- tekstsider ---------- */
.tekstside { display: grid; gap: 40px; padding-top: 32px; padding-bottom: 72px; }
@media (min-width: 900px) { .tekstside { grid-template-columns: 220px 1fr; } .tekstside nav { position: sticky; top: 24px; align-self: start; } }
.tekstside nav ul { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--linje); }
.tekstside nav a { display: block; padding: 6px 14px; text-decoration: none; color: var(--dempet); margin-left: -2px; border-left: 2px solid transparent; }
.tekstside nav a:hover { color: var(--tekst); border-left-color: var(--rod); }
.tekst { max-width: 46rem; }
.tekst h2 { font-size: 1.8rem; margin-top: 1.6em; scroll-margin-top: 24px; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { font-size: 1.25rem; margin-top: 1.4em; }
.tekst ul, .tekst ol { padding-left: 1.3em; }
.tekst li { margin-bottom: .4em; }
.tekst a { color: var(--rod); }
.tekst a.knapp { color: #fff; }
details { border-bottom: 1px solid var(--linje); }
details summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--rod); }
details[open] summary::after { content: '−'; }
details > div { padding: 0 0 14px; color: var(--dempet); }
.faktaboks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 28px 0; }
.faktaboks div { background: var(--flate); border-radius: 10px; padding: 18px; }
.faktaboks strong { display: block; font: 700 2.2rem/1 var(--overskrift); color: var(--rod); margin-bottom: 4px; }
.faktaboks span { font-size: .9rem; color: var(--dempet); }

/* ---------- bunn ---------- */
.bunn { background: var(--svart); color: #b8bcc2; font-size: .93rem; padding-top: 52px; }
.bunn-rad { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding-bottom: 40px; }
.bunn .logo { color: #fff; margin-bottom: 14px; }
.bunn-om p { max-width: 26em; }
.bunn h2 { font-size: 1.05rem; letter-spacing: .14em; color: #fff; margin-bottom: 12px; }
.bunn ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.bunn a { text-decoration: none; }
.bunn a:hover { color: #fff; text-decoration: underline; }
.bunn-under { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
.betalingsmerker { display: flex; gap: 6px; }
.betalingsmerker span { border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; padding: 3px 8px; color: #e0e2e5; font-weight: 600; }

/* ---------- melding ---------- */
.melding { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 100; width: calc(100% - 32px); max-width: 440px; background: var(--grafitt); color: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); display: flex; align-items: center; gap: 12px; transition: transform .3s cubic-bezier(.2, .9, .3, 1.2); }
.melding.vis { transform: translate(-50%, 0); }
.melding .knapp { min-height: 40px; padding: 0 14px; font-size: .95rem; margin-left: auto; flex-shrink: 0; }
.melding-ikon { width: 26px; height: 26px; border-radius: 50%; background: var(--gronn); display: grid; place-items: center; flex-shrink: 0; }
.melding-ikon::after { content: ''; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }

/* ---------- rullefelt ---------- */
/* Som på Stavemaskin: det vanlige rullefeltet er skjult, og et tynt, halvgjennomsiktig håndtak ligger oppå siden
   (felles.js tegner det). Siden rulles som før med hjul, tastatur og berøring, og håndtaket kan dras. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.rullefelt { position: fixed; top: 4px; right: calc(3px + env(safe-area-inset-right, 0px)); bottom: 4px; width: 10px; z-index: 90; pointer-events: none; }
.rullefelt-tommel { position: absolute; top: 0; right: 0; will-change: transform; width: 7px; min-height: 36px; border-radius: 8px; background: rgba(120, 126, 135, .5); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); pointer-events: auto; cursor: default; transition: width .15s, background-color .15s; touch-action: none; }
.rullefelt-tommel:hover, .rullefelt.drar .rullefelt-tommel { width: 10px; background: rgba(120, 126, 135, .8); }
.rullefelt[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.knapprad { display: flex; flex-wrap: wrap; gap: 10px; }
.verktoy .felt { margin: 0; }
.smulerad { padding-top: 18px; }
.hel-bredde { grid-column: 1 / -1; }

/* ---------- smale skjermer: to kort i bredden ---------- */
@media (max-width: 599px) {
  .seksjon { padding: 44px 0; }
  .rutenett { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kort-tekst { padding: 10px 10px 12px; }
  .kort h3 { font-size: 1.05rem; }
  .kort p { display: none; }
  .kort-bunn { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pris { font-size: 1.15rem; }
  .lagerstatus { font-size: .74rem; }
  .merke { top: 6px; left: 6px; font-size: .7rem; }

  .fordeler { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .fordel h3 { font-size: 1.15rem; }
  .fordel p { font-size: .9rem; }
}

/* ---------- betaling ---------- */
.betalingsinfo { margin: 0 0 8px; padding: 14px 16px; background: var(--flate); border-radius: 8px; }
.testbetaling { max-width: 560px; margin: 48px auto 72px; }
.testbetaling-sum { font-size: 1.2rem; }
.testvarsel code { background: rgba(0, 0, 0, .06); padding: 1px 5px; border-radius: 4px; }

/* ---------- admin ---------- */
.admin { background: var(--flate); }
.admin-topp { background: var(--svart); color: #fff; }
.admin-topp-rad { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; }
.admin-faner { display: flex; gap: 4px; }
.admin-faner button { background: none; border: 0; color: #c9ccd1; font: 600 1rem/1 var(--overskrift); letter-spacing: .09em; text-transform: uppercase; padding: 22px 12px; cursor: pointer; border-bottom: 3px solid transparent; }
.admin-faner button[aria-current] { color: #fff; border-bottom-color: var(--rod); }
.admin-modus { margin-left: auto; font-size: .85rem; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.admin-modus.stripe-live { background: var(--gronn); }
.admin-ut { color: #c9ccd1; }
.admin-main { padding-top: 28px; padding-bottom: 60px; }
.admin-logginn { max-width: 380px; margin: 40px auto; background: #fff; padding: 28px; border-radius: 12px; box-shadow: var(--skygge); }
.admin-tall { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-tall div { background: #fff; border-radius: 10px; padding: 16px 18px; box-shadow: var(--skygge); }
.admin-tall span { display: block; color: var(--dempet); font-size: .9rem; }
.admin-tall strong { font: 700 1.7rem/1.2 var(--overskrift); }
.admin-verktoy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-verktoy h1, .admin-verktoy h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.admin-verktoy .felt { margin: 0; min-width: 240px; }
.admin-liste { display: grid; gap: 8px; }
.admin-tom { background: #fff; padding: 24px; border-radius: 10px; color: var(--dempet); }
.admin-rad { background: #fff; border-radius: 10px; box-shadow: var(--skygge); overflow: hidden; }
.admin-rad-topp { display: grid; grid-template-columns: 110px 140px 1fr 110px 170px; gap: 12px; align-items: center; width: 100%; padding: 14px 18px; background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.admin-rad-topp:hover { background: #fafaf8; }
.admin-rad.apen .admin-rad-topp { border-bottom: 1px solid var(--linje); }
.status { justify-self: start; padding: 4px 10px; border-radius: 99px; font-size: .82rem; font-weight: 600; background: var(--flate-2); }
.status-betalt { background: #fde8e6; color: var(--rod-mork); }
.status-venter-på-betaling { background: #fff4e5; color: var(--oransje); }
.status-bestilt-hos-HEL, .status-sendt { background: #e6eefc; color: #1f4fbf; }
.status-levert { background: #e4f3e8; color: var(--gronn); }
.status-kansellert { background: var(--flate-2); color: var(--dempet); text-decoration: line-through; }
.admin-detaljer { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 28px; padding: 20px 18px 24px; }
.admin-detaljer h3 { font-size: 1.05rem; margin: 0 0 8px; }
.admin-detaljer p { margin: 0 0 12px; }
.admin-melding { background: var(--flate); padding: 10px 12px; border-radius: 6px; white-space: pre-wrap; }
.admin-varer { list-style: none; margin: 0 0 10px; padding: 0; }
.admin-varer li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--linje); }
.admin-varer small { grid-column: 1; color: var(--dempet); }
.admin-varer span { grid-row: 1; grid-column: 2; font-weight: 600; }
.admin-endre textarea { min-height: 80px; }
.admin-historikk { list-style: none; padding: 0; margin: 0; font-size: .88rem; color: var(--dempet); }
.admin-historikk li { padding: 3px 0; }
.admin-historikk span { color: var(--tekst); }
.admin-produkt { display: grid; grid-template-columns: 96px 1fr; gap: 18px; background: #fff; border-radius: 10px; box-shadow: var(--skygge); padding: 16px 18px; }
.admin-produkt img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--linje); border-radius: 8px; }
.admin-produkt.skjult-produkt { opacity: .6; }
.admin-produkt .felt { margin-bottom: 10px; }
.admin-produkt label small { color: var(--dempet); font-weight: 400; }
.admin-produkt-rad { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
.admin-produkt-bunn { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.admin-produkt-bunn .knapp { margin-left: auto; }
@media (max-width: 899px) {
  .admin-rad-topp { grid-template-columns: 1fr auto; }
  .admin-rad-topp span:nth-child(2), .admin-rad-topp span:nth-child(3) { display: none; }
  .admin-detaljer { grid-template-columns: 1fr; }
  .admin-modus { margin-left: 0; }
}
.admin-endre .knapp { margin-bottom: 22px; }

/* Typeknappene over produktlisten (Alle, Bremseslanger, Kalipere …). */
.typer { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; order: 3; }
.typer:empty { display: none; }
.typer button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1.5px solid #c7c9c4; border-radius: 99px; background: #fff; color: var(--tekst); font: 600 .95rem/1 var(--brodtekst); cursor: pointer; transition: border-color .15s, background-color .15s; }
.typer button span { font-weight: 500; font-size: .82rem; color: var(--dempet); }
.typer button:hover { border-color: #8a9099; }
.typer button[aria-pressed="true"] { background: var(--tekst); border-color: var(--tekst); color: #fff; }
.typer button[aria-pressed="true"] span { color: #c9ccd1; }
.typer button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(216, 20, 12, .3); }
@media (max-width: 599px) { .verktoy-valg { flex: 1 1 100%; margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .verktoy-valg .felt { min-width: 0; } .nedtrekk-knapp { min-width: 0; } }

/* Bremsepakker */
.spar { color: var(--rod); font-weight: 700; }
.pakke-innhold { background: var(--flate); border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.pakke-innhold h2 { font-size: 1.05rem; margin: 0 0 6px; }
.pakke-innhold ul { margin: 0; padding-left: 20px; }
.seksjon-ingress { margin: 4px 0 0; color: var(--dempet); }
.kort-bilde .merke-rod { background: var(--rod); }

/* «Les mer»-boksen med guider på produkt- og kategorisidene (lages av server/seo.mjs og produkt.js). */
.les-mer { margin-top: 28px; padding: 18px 20px; background: var(--flate); border-radius: 10px; }
.les-mer h2 { font-size: 1.15rem; margin: 0 0 8px; }
.les-mer ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.les-mer a { color: var(--tekst); font-weight: 600; }
.les-mer a:hover { color: var(--rod); }

/* «Hopp til innholdet»: skjult til den får fokus med tastaturet. */
.hopp { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: #fff; color: var(--tekst); font-weight: 700; border-radius: 6px; box-shadow: var(--skygge); transition: top .15s; }
.hopp:focus { top: 12px; outline: 3px solid var(--rod); }

/* Produkttypene på forsiden (bremseslanger, tommelbrems, fingerbrems, kalipere) */
#produkttyper:empty { min-height: 420px; }
.typekort-se { font-weight: 700; color: var(--rod); font-size: .95rem; }
.typekort-knapper { margin-top: 22px; }
@media (max-width: 599px) { #produkttyper:empty { min-height: 640px; } .typekort-knapper .knapp { flex: 1 1 100%; } }
@media (min-width: 900px) { .typekort-rad { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Variantmerket (V1, V2, HTB2, EBC FA252, ABS …) ved kategorien på kort og produktside */
.variant { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px; background: var(--svart); color: #fff; font: 700 .72rem/1.3 var(--brodtekst); letter-spacing: .04em; text-transform: none; vertical-align: 1px; }

/* Lager i admin */
.admin-lager h3 { margin: 22px 0 8px; font-size: 1.15rem; }
.admin-lager h3 small { color: var(--dempet); font-weight: 400; }
.admin-lagertabell { display: grid; gap: 6px; }
.admin-lagerrad { display: grid; grid-template-columns: 1fr 90px 100px 110px auto auto; gap: 10px; align-items: center; background: #fff; border-radius: 8px; box-shadow: var(--skygge); padding: 10px 14px; border-left: 4px solid var(--linje); }
.admin-lagerrad.paa-lager { border-left-color: var(--gronn); }
.admin-lagernavn strong { display: block; font-size: .95rem; }
.admin-lagernavn small { color: var(--dempet); }
.admin-lagertall span { display: block; font-size: .75rem; color: var(--dempet); }
.admin-lagertall strong { font: 700 1.3rem/1.1 var(--overskrift); }
.admin-lagertall.mangler strong { color: var(--rod); }
.admin-lagerrad input { min-height: 40px; }
.admin-lagerrad .knapp { min-height: 40px; padding: 0 14px; font-size: .9rem; }
.admin-logg-tittel { margin-top: 32px; }
.admin-logg { list-style: none; padding: 0; margin: 0; background: #fff; border-radius: 10px; box-shadow: var(--skygge); }
.admin-logg li { padding: 8px 14px; border-bottom: 1px solid var(--linje); font-size: .9rem; }
.admin-logg li span { color: var(--dempet); }
.admin-logg .pluss { color: var(--gronn); }
.admin-logg .minus { color: var(--rod); }
@media (max-width: 899px) { .admin-lagerrad { grid-template-columns: 1fr 1fr; } .admin-lagernavn { grid-column: 1 / -1; } }

/* Siden for bedrifter og forespørslene i admin */
@media (max-width: 1199px) { .hovedmeny > a.meny-bedrift { display: none; } }
.bedrift-takk { margin-top: 8px; padding: 20px 24px; background: #e4f3e8; border-radius: 10px; }
.bedrift-takk h3 { margin-top: 0; color: var(--gronn); }
.status-ny { background: #fde8e6; color: var(--rod-mork); }
.status-besvart { background: #e4f3e8; color: var(--gronn); }
.fane-antall { display: inline-block; min-width: 20px; margin-left: 4px; padding: 3px 6px; border-radius: 10px; background: var(--rod); color: #fff; font: 700 .75rem/1 var(--brodtekst); letter-spacing: 0; text-align: center; }
/* Mellom mobil og vanlig PC er det trangt i toppmenyen: litt tettere lenker, så handlekurven ikke havner utenfor. */
@media (min-width: 900px) and (max-width: 1099px) { .hovedmeny > a { padding: 0 7px; letter-spacing: .04em; font-size: .95rem; } .hovedmeny > a::after { left: 7px; right: 7px; } }

/* HEL-logoen øverst og i bunnen, med ® og «Performance Norge», og merket «Offisiell HEL-forhandler i Norge». */
.logo { gap: 0; }
.logo-hel { display: block; height: 34px; width: auto; }
.logo-r { align-self: flex-start; margin: -2px 6px 0 1px; font: 600 .6rem/1 var(--brodtekst); color: #fff; }
.logo .logo-tekst { font-size: 1.05rem; letter-spacing: .08em; }
.logo .logo-tekst small { font-size: .5rem; letter-spacing: .45em; }
.forhandlermerke { flex-shrink: 0; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 4px; color: #e7e8ea; font: 600 .7rem/1.2 var(--brodtekst); letter-spacing: .03em; white-space: nowrap; }
.topp-rad > .forhandlermerke { margin-left: 14px; }
.bunn-merke { display: inline-block; margin: 0 0 12px; }
@media (max-width: 1699px) { .topp-rad > .forhandlermerke { display: none; } }
@media (max-width: 899px) { .logo-hel { height: 28px; } .logo .logo-tekst { font-size: .95rem; } }

/* Bedriftskonto og bedriftsbutikken */
.bedriftslinje { background: #fff4d6; border-bottom: 1px solid #f0dca0; font-size: .9rem; }
.bedriftslinje .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.bedriftslinje .wrap > span { margin-right: auto; }
.bedriftslinje a, .bedriftslinje .lenkeknapp { font-weight: 600; color: var(--tekst); }
.konto-kol { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.konto-boks { padding: 20px 22px; background: var(--flate); border-radius: 10px; }
.konto-boks h3 { margin-top: 0; }
.konto-boks .feilmelding { color: var(--rod); }
@media (max-width: 799px) { .konto-kol { grid-template-columns: 1fr; } }
.bb { padding-top: 28px; padding-bottom: 56px; }
.bb-verktoy { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; max-width: 900px; }
.bb-gruppe { margin-top: 28px; }
.bb-gruppe h2 { font-size: 1.4rem; margin: 0 0 10px; }
.bb-gruppe h2 small { color: var(--dempet); font-weight: 400; font-size: .9rem; }
.bb-rad { display: grid; grid-template-columns: 1fr 120px 230px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linje); }
.bb-navn { font-weight: 600; }
.bb-navn small { display: block; font-weight: 400; color: var(--dempet); font-size: .85rem; margin-top: 2px; }
.bb-pris { font: 700 1.15rem/1.1 var(--overskrift); text-align: right; white-space: nowrap; }
.bb-kjop { display: flex; gap: 8px; justify-content: flex-end; }
.bb-kjop input { width: 64px; min-height: 40px; }
.bb-knapp { min-height: 40px; padding: 0 14px; font-size: .9rem; justify-self: end; }
@media (max-width: 699px) { .bb-verktoy { grid-template-columns: 1fr; } .bb-rad { grid-template-columns: 1fr auto; } .bb-kjop, .bb-rad > .bb-knapp { grid-column: 1 / -1; justify-content: flex-start; justify-self: start; } }
.status-konto-venter { background: #fff4e5; color: var(--oransje); }
.status-konto-godkjent { background: #e4f3e8; color: var(--gronn); }
.status-konto-avvist { background: var(--flate-2); color: var(--dempet); }
.admin-konto-knapper { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 16px 14px; }
.admin-konto-knapper .knapp { min-height: 36px; padding: 0 14px; font-size: .85rem; }

/* «Logg inn» øverst og boksen med Logg inn / Opprett konto */
.topp-konto { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px; color: #e7e8ea; text-decoration: none; font: 500 .95rem/1 var(--brodtekst); white-space: nowrap; max-width: 220px; }
.topp-konto span { overflow: hidden; text-overflow: ellipsis; line-height: 1.35; padding-bottom: 2px; }
.topp-konto svg { width: 22px; height: 22px; flex-shrink: 0; }
.topp-konto:hover { color: #fff; }
@media (max-width: 1449px) { .topp-konto span { display: none; } .topp-konto { padding: 0; width: 44px; justify-content: center; } }
@media (min-width: 900px) and (max-width: 1299px) { .topp-handlinger .topp-kontakt { display: none; } }
@media (min-width: 1300px) and (max-width: 1699px) { .topp-handlinger .topp-kontakt span { display: none; } .topp-handlinger .topp-kontakt { padding: 0; width: 44px; justify-content: center; } }
.konto-faner { max-width: 640px; padding: 0; overflow: hidden; }
.konto-fanerad { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linje); }
.konto-fanerad button { padding: 16px 12px; border: 0; background: var(--flate-2, #e9e9e6); font: 700 1.05rem/1 var(--overskrift); letter-spacing: .06em; text-transform: uppercase; color: var(--dempet); cursor: pointer; }
.konto-fanerad button[aria-selected="true"] { background: var(--flate); color: var(--tekst); box-shadow: inset 0 -3px 0 var(--rod); }
.konto-faner form { padding: 20px 22px 8px; }
.konto-faner .knapp { margin-top: 4px; }

.bunn-admin { color: inherit; opacity: .6; }
.bunn-admin:hover { opacity: 1; }

/* Glemt passord og siden for nytt passord */
.glemt { margin-top: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--linje); border-radius: 8px; }
.tekstside-smal { max-width: 560px; padding-top: 32px; padding-bottom: 72px; }

/* Instagram og TikTok i bunnen */
.sosiale { display: flex; gap: 10px; margin-top: 14px; }
.sosiale a, .sosiale span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; color: #e7e8ea; }
.sosiale a:hover { color: #fff; border-color: #fff; }
.sosiale svg { width: 20px; height: 20px; }

/* Pilen i «Se alle …»-lenkene glir litt til høyre når musen er over */
.pil { display: inline-block; transition: transform .2s ease; font-weight: 800; -webkit-text-stroke: 1.2px currentColor; }
a:hover .pil, .kort:hover .pil, a:focus-visible .pil { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .pil { transition: none; } }