/* Helse-Invest – felles stil. Farger: lyseblå #4EC1F0 (knapper, alltid med svart tekst),
   mørk blå #0A6E9E (tekst/lenker på hvitt), nesten-svart #1D1D1B, lysegrå #F1F2F2. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-latin-600-italic.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-latin-700-normal.woff2) format("woff2")}

:root{
  --bla:#4EC1F0; --bla-mork:#0A6E9E; --bla-lys:#E5F6FD;
  --svart:#1D1D1B; --tekst:#3D3D3B; --dempet:#5A5A57;
  --gra:#F1F2F2; --linje:#E4E4E2; --hvit:#FFFFFF; --feil:#B3261E;
  --maks:1200px; --radius:20px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;color:var(--tekst);background:var(--hvit)}
img{max-width:100%;height:auto;display:block}
a{color:var(--bla-mork)}
a:hover{color:var(--svart)}
h1,h2,h3{font-family:"Barlow",sans-serif;color:var(--svart);line-height:1.15;letter-spacing:-.3px;margin:0}
h1{font-size:clamp(36px,5vw,60px);font-weight:700;line-height:1.05;letter-spacing:-.5px}
h2{font-size:clamp(28px,3.5vw,40px);font-weight:700}
h3{font-size:20px;font-weight:600}
p{margin:0}
.wrap{max-width:var(--maks);margin:0 auto;padding:0 24px}
.seksjon{padding:72px 0}
.seksjon--gra{background:var(--gra)}
.seksjon--mork{background:var(--svart);color:#E6E6E4}
.seksjon--mork h2,.seksjon--mork h3{color:#fff}
.etikett{font-weight:700;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bla-mork);margin:0 0 12px}
.seksjon--mork .etikett{color:var(--bla)}
.ingress{font-size:19px;max-width:680px}
.mt-s{margin-top:12px}.mt-m{margin-top:24px}.mt-l{margin-top:40px}
.skjult{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hopp{position:absolute;left:-9999px;top:0;background:var(--svart);color:#fff;padding:12px 16px;z-index:100}
.hopp:focus{left:16px;top:16px}
:focus-visible{outline:3px solid var(--bla-mork);outline-offset:2px}

/* Knapper */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;font:inherit;font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;border:1.5px solid transparent}
.knapp--primar{background:var(--bla);color:var(--svart)}
.knapp--primar:hover{background:#3FB2E2;color:var(--svart)}
.knapp--sekundar{background:var(--hvit);color:var(--svart);border-color:var(--svart);font-weight:500}
.knapp--sekundar:hover{background:var(--gra)}
.knapp--mork{background:var(--svart);color:#fff}
.knapp--mork:hover{background:#000;color:#fff}
.knapp[disabled]{opacity:.5;cursor:not-allowed}
.knapper{display:flex;flex-wrap:wrap;gap:12px}

/* Toppstripe + header */
.toppstripe{background:var(--svart);color:#fff;font-size:14px;padding:10px 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 32px;text-align:center}
.toppstripe a{color:#fff}
.kampanje{position:relative;font-size:15px;line-height:1.4;text-align:center}
.kampanje[hidden]{display:none}
.kampanje--svart{background:var(--svart);color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.kampanje--bla{background:var(--bla-mork);color:#fff}
.kampanje--lys{background:var(--bla-lys);color:var(--svart);border-bottom:1px solid #B9E4F7}
.kampanje__inner{max-width:var(--maks);margin:0 auto;padding:10px 56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px}
.kampanje__tekst{margin:0;font-weight:500;overflow-wrap:anywhere}
.kampanje a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kampanje__kode{font:inherit;font-size:14px;color:inherit;background:transparent;border:1px dashed currentColor;border-radius:8px;min-height:36px;padding:4px 12px;cursor:pointer}
.kampanje__kode b{letter-spacing:.5px}
.kampanje__kode:hover{background:rgba(255,255,255,.12)}
.kampanje--lys .kampanje__kode:hover{background:rgba(10,110,158,.08)}
.kampanje__status{flex-basis:100%;font-size:14px}
.kampanje__status:empty{display:none}
.kampanje__lukk{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:inherit;cursor:pointer}
.kampanje__lukk:hover{background:rgba(255,255,255,.14)}
.kampanje--lys .kampanje__lukk:hover{background:rgba(10,110,158,.1)}
.kampanje button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (max-width:760px){.kampanje{font-size:14px}.kampanje__inner{padding:8px 48px 8px 16px}.kampanje__lukk{top:4px;right:4px;transform:none}}
.header{border-bottom:1px solid var(--linje);background:var(--hvit);position:sticky;top:0;z-index:20}
.header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:14px;padding-bottom:14px}
.logo{display:inline-flex;align-items:center;min-height:44px}
.logo img{height:44px;width:auto}
.meny{display:flex;flex-wrap:wrap;gap:4px 24px;font-weight:500;font-size:16px}
.meny a{color:var(--svart);text-decoration:none;padding:8px 0}
.meny a:hover,.meny a[aria-current="page"]{color:var(--bla-mork);text-decoration:underline;text-underline-offset:6px}
.kurvknapp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--svart);border-radius:999px;color:var(--svart);text-decoration:none;font-weight:500}
.kurvknapp:hover{background:var(--gra);color:var(--svart)}
.kurvteller{min-width:22px;height:22px;border-radius:999px;background:var(--bla);color:var(--svart);font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}

/* Hero */
.hero{position:relative;overflow:hidden;min-height:600px;display:flex;align-items:center;border-bottom:1px solid var(--linje);
  background-color:#fff;background-image:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.9) 36%,rgba(255,255,255,0) 62%),url(/assets/img/hero-sover.webp);background-size:cover;background-position:right center}
.hero .wrap{width:100%;padding-top:88px;padding-bottom:88px}
.hero__innhold{max-width:560px}
.hero__under{font-weight:600;font-size:clamp(20px,2.2vw,26px);line-height:1.25;color:var(--bla-mork);margin:16px 0 20px}
.hero__tekst{font-size:19px;max-width:500px;margin-bottom:32px}
.hero__merke{position:absolute;right:32px;bottom:32px;width:132px}
.punkter{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;color:var(--svart);margin-top:28px;padding:0;list-style:none}
.punkter li{display:inline-flex;align-items:center;gap:6px}
/* Desktop: tillitslinja i hero på én linje (trenger ca. 595 px, litt mer enn tekstspalten). */
@media (min-width:1100px){.hero .punkter{flex-wrap:nowrap;width:max-content;gap:8px 20px}.hero .punkter li{white-space:nowrap}}
@media (max-width:760px){
  .hero{min-height:0;background-image:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.85) 100%),url(/assets/img/hero-sover.webp);background-position:70% center}
  .hero .wrap{padding-top:48px;padding-bottom:56px}
  .hero__merke{display:none}
}

/* Rutenett og kort */
.rutenett{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.rutenett--3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.kort{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--linje);border-radius:var(--radius);background:var(--hvit)}
.kort__ikon{width:44px;height:44px;border-radius:999px;background:var(--bla-lys);display:inline-flex;align-items:center;justify-content:center}
.kort__lenke{margin-top:auto;padding-top:6px;font-weight:700}
.produktkort{display:flex;flex-direction:column;background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--tekst)}
.produktkort:hover{border-color:var(--svart);color:var(--tekst)}
.produktkort__bilde{height:260px;background:var(--gra);display:flex;align-items:center;justify-content:center;padding:28px 40px}
.produktkort__bilde img{width:100%;height:100%;object-fit:contain}
.produktkort__bilde--miljo{padding:0}.produktkort__bilde--miljo img{object-fit:cover}
.produktkort__tekst{flex:1 1 auto;padding:20px 22px 24px;display:flex;flex-direction:column;gap:4px}
.produktkort__navn{font-size:21px;font-weight:600;color:var(--svart)}
.produktkort__pris{margin-top:auto;padding-top:12px;font-size:20px;font-weight:700;color:var(--svart)}
.fordeler{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.fordel{display:flex;gap:16px;align-items:flex-start}
.fordel h3{font-size:19px;margin-bottom:4px}
.fordel p{font-size:16px}
.to-kol{display:flex;flex-wrap:wrap;align-items:center;gap:40px 48px}
.to-kol>*{flex:1 1 420px;min-width:0}
/* Bilde med gjennomsiktig bakgrunn i en seksjon: samme grå flate som produktbildene */
.bildeflate{background:var(--gra);border-radius:24px;padding:48px 32px}
.bildeflate img{display:block;width:100%;height:auto}
.omtaler{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.omtale{margin:0;display:flex;flex-direction:column;gap:12px}
.omtale .stjerner{color:var(--bla-mork);letter-spacing:2px}
.omtale blockquote{margin:0;font-size:18px;line-height:1.5;color:var(--svart)}
.omtale figcaption{font-size:15px}
.hake{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.hake li{display:flex;gap:10px;align-items:flex-start}
.hake svg{flex:0 0 auto;margin-top:3px}

/* Produktside */
.brodsmuler{font-size:14px;padding-top:20px}
.brodsmuler a{color:var(--dempet)}
.produkt{display:flex;flex-wrap:wrap;gap:48px;padding:32px 0 72px}
.produkt__bilder{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:12px}
.produkt__hovedbilde{position:relative;aspect-ratio:1/1;border-radius:24px;background:var(--gra);display:flex;align-items:center;justify-content:center;padding:40px;overflow:hidden}
.produkt__hovedbilde img{width:100%;height:100%;object-fit:contain}
.produkt__hovedbilde .merke{position:absolute;right:20px;top:20px;width:96px;height:auto}
.miniatyrer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.miniatyr{aspect-ratio:1/1;border-radius:12px;background:var(--gra);border:2px solid transparent;padding:6px;cursor:pointer;overflow:hidden}
.miniatyr img{width:100%;height:100%;object-fit:contain}
.miniatyr--fyll{padding:0}.miniatyr--fyll img{object-fit:cover}
/* Miljøbilder fyller hele feltet: ingen grå luft eller ramme; valgt miniatyr markeres med outline over bildet */
.produkt__hovedbilde--miljo{padding:0}.produkt__hovedbilde--miljo img[data-hovedbilde]{object-fit:cover}
.produkt__hovedbilde--miljo .merke{display:none}
.miniatyr--miljo{border:0}.miniatyr--miljo[aria-pressed="true"]{outline:2px solid var(--svart);outline-offset:-2px}
.miniatyr[aria-pressed="true"]{border-color:var(--svart)}
.produkt__info{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:20px}
.pris{font-size:36px;font-weight:700;color:var(--svart);line-height:1}
.pris-linje{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.kjop{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.antall{display:flex;align-items:center;gap:8px;border:1.5px solid #CFCFCC;border-radius:999px;padding:0 16px;min-height:52px;font-size:15px}
.antall input{width:48px;border:0;font:inherit;font-size:17px;color:var(--svart);background:transparent}
.kjop .knapp{flex:1 1 220px}
.felt{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500;color:var(--svart)}
.felt input,.felt select{min-height:48px;padding:0 14px;border:1.5px solid #CFCFCC;border-radius:12px;font:inherit;font-size:16px;color:var(--svart);background:#fff}
.felt input:focus,.felt select:focus{border-color:var(--bla-mork)}
.infoboks{border:1px solid var(--linje);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;font-size:15px}
.infoboks div{display:flex;gap:12px;align-items:flex-start}
.infoboks strong{color:var(--svart)}
.melding{font-size:15px;padding:12px 16px;border-radius:12px;background:var(--bla-lys);color:var(--svart)}
.melding--feil{background:#FCE8E6;color:var(--feil)}
.steg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.steg__nr{display:inline-flex;width:44px;height:44px;border-radius:999px;background:var(--svart);color:#fff;align-items:center;justify-content:center;font-weight:700}
details.trekk{border:1px solid var(--linje);border-radius:16px;padding:20px 24px;background:#fff}
details.trekk+details.trekk{margin-top:12px}
details.trekk summary{font-weight:700;color:var(--svart);cursor:pointer;font-size:18px}
details.trekk p{margin-top:12px}
.video{aspect-ratio:16/9;border-radius:16px;background:#2E2E2C;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;padding:20px;color:#E6E6E4}
.storrelser{display:flex;flex-wrap:wrap;gap:8px}
.storrelser label{position:relative}
.storrelser input{position:absolute;opacity:0;inset:0;cursor:pointer}
.storrelser span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid #CFCFCC;border-radius:999px;font-weight:500;color:var(--svart)}
.storrelser input:checked+span{border-color:var(--svart);background:var(--svart);color:#fff}
.storrelser input:focus-visible+span{outline:3px solid var(--bla-mork);outline-offset:2px}

/* Handlekurv */
.kasse{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;padding:40px 0 80px}
.kasse__venstre{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.kasse__hoyre{flex:1 1 340px;min-width:0;position:sticky;top:96px}
.boks{background:#fff;border-radius:var(--radius);padding:24px;border:1px solid var(--linje)}
.boks h2{font-size:21px;font-weight:600;margin-bottom:16px}
.vare{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--linje)}
.vare:first-of-type{border-top:0}
.vare__bilde{width:84px;height:84px;border-radius:12px;background:var(--gra);padding:8px;flex:0 0 auto}
.vare__bilde img{width:100%;height:100%;object-fit:contain}
.vare__navn{flex:1 1 200px;min-width:0}
.vare__navn strong{display:block;color:var(--svart);font-size:18px}
.vare__sum{font-weight:700;color:var(--svart);min-width:90px;text-align:right}
.fjern{width:44px;height:44px;border-radius:999px;border:0;background:var(--gra);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.fraktvalg{display:flex;flex-direction:column;gap:12px}
.fraktvalg label.valg{display:flex;gap:14px;align-items:flex-start;border:1.5px solid #CFCFCC;border-radius:16px;padding:16px 18px;cursor:pointer}
.fraktvalg label.valg:has(input:checked){border:2px solid var(--bla-mork)}
.fraktvalg input[type=radio]{width:20px;height:20px;margin-top:3px;accent-color:var(--svart)}
.valg__tekst{flex:1 1 auto;display:flex;flex-direction:column;gap:4px}
.valg__topp{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}
.valg__topp strong{color:var(--svart)}
.valg--av{opacity:.55;cursor:not-allowed}
.sumlinje{display:flex;justify-content:space-between;gap:12px;font-size:16px}
.sumlinje--rabatt{color:#1E6B34;font-weight:600}
.sumlinje[hidden]{display:none}
.koderad{display:flex;flex-direction:column;gap:6px}
.koderad .felt{display:block}
.koderad .felt[hidden]{display:none}
.koderad__epost input{display:block;margin-top:6px}
.koderad__epost input[aria-invalid="true"]{border-color:var(--feil)}
.koderad__felt{display:flex;gap:8px}
.koderad__felt input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 14px;border:1.5px solid #CFCFCC;border-radius:12px;font:inherit;font-size:16px;color:var(--svart);background:#fff;text-transform:uppercase}
.koderad__felt input::placeholder{text-transform:none}
.koderad__felt input:focus{border-color:var(--bla-mork)}
.koderad__felt input[aria-invalid="true"]{border-color:var(--feil)}
.koderad__felt .knapp{min-height:48px;padding:0 18px;flex:0 0 auto}
.kodemelding{margin:0;font-size:14px;font-weight:500;color:var(--dempet)}
.kodemelding:empty{display:none}
.kodemelding--ok{color:#1E6B34}
.kodemelding--feil{color:var(--feil)}
.totalt{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linje);padding-top:16px}
.totalt strong{font-size:28px;color:var(--svart)}
.tom{text-align:center;padding:48px 24px}

/* Footer – grå fra logoen (#3C3C3B), titler i lyseblått */
.footer{background:#3C3C3B;color:#C9C9C7;font-size:15px}
.footer a{color:#F1F1EF}
.footer a:hover{color:#fff}
.footer strong{color:var(--bla)}
.footer__slagord{background:var(--bla);overflow:hidden;white-space:nowrap}
.slagord-spor{display:inline-flex;width:max-content;animation:slagord-rull 40s linear infinite}
.footer__slagord:hover .slagord-spor{animation-play-state:paused}
.slagord-spor span{padding:32px 0;font-style:italic;font-weight:500;font-size:clamp(28px,3.6vw,44px);line-height:1.15;color:#3C3C3B}
.slagord-spor span::after{content:"•";padding:0 40px;font-style:normal;color:#fff}
@keyframes slagord-rull{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.slagord-spor{animation:none}}
.footer__kolonner{padding-top:48px;padding-bottom:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;align-items:start}
.footer__kol{display:flex;flex-direction:column;gap:8px}
.footer__logo{width:150px;height:150px;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px}
.footer__logo img{width:100%;height:auto}
.footer__bunn{border-top:1px solid #5A5A5B;padding-top:20px;padding-bottom:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;font-size:14px}
.footer__some{display:flex;flex-wrap:wrap;gap:10px}
.footer__some a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1.5px solid #5A5A5B;border-radius:999px}
.footer__some a:hover{border-color:var(--bla)}
.tekstside{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.tekstside h1{font-size:clamp(32px,4vw,44px);margin-bottom:20px}
.tekstside h2{font-size:24px;margin:36px 0 12px}
.tekstside p,.tekstside li{margin-bottom:12px}
.utkast{border:2px dashed var(--bla-mork);border-radius:12px;padding:12px 16px;margin-bottom:24px;color:var(--svart);background:var(--bla-lys)}

/* Kontaktsiden og kontaktskjemaet (2026-11-04). Klassene brukes også av butikkens feilside (/api/kontakt). */
.kontaktside{padding-top:48px;padding-bottom:72px}
.kontaktside h1{font-size:clamp(32px,4vw,44px);margin-bottom:12px}
.kontaktside .ingress{max-width:680px}
.kontakt-oppsett{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:start;margin-top:40px}
.kontakt-liste{display:flex;flex-direction:column;gap:24px;margin:0}
.kontakt-liste>div{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start}
.kontakt-liste .kort__ikon{grid-row:1/span 2}
.kontakt-liste dt{font-weight:700;color:var(--svart);font-size:17px;padding-top:2px}
.kontakt-liste dd{margin:2px 0 0;grid-column:2;overflow-wrap:anywhere}
.kontakt-org{font-size:15px;margin-top:32px}
.skjema{display:flex;flex-direction:column;gap:18px;background:var(--hvit);border:1px solid var(--linje);border-radius:var(--radius);padding:32px;scroll-margin-top:96px}
.tekstside .skjema{margin-top:24px}
.skjema h2{font-size:24px;margin:0}
.skjema__rad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.felt textarea{min-height:150px;padding:12px 14px;border:1.5px solid #CFCFCC;border-radius:12px;font:inherit;font-size:16px;color:var(--svart);background:#fff;resize:vertical}
.felt textarea:focus{border-color:var(--bla-mork)}
.felt input,.felt select,.felt textarea{width:100%;min-width:0}
.felt--feil input,.felt--feil select,.felt--feil textarea{border-color:var(--feil)}
.felt__feil{color:var(--feil);font-size:14px;font-weight:500}
.feilboks{border:1.5px solid var(--feil);background:#FDF1F0;border-radius:12px;padding:16px 20px;margin:20px 0}
.feilboks p{margin:0 0 6px}.feilboks ul{margin:0;padding-left:20px}.feilboks li{margin:0}
.skjema__personvern{font-size:14px;margin:0}
.skjema__bunn{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.skjema__krav{font-size:14px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.spesialmal-boks{margin-top:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;background:var(--bla-lys);border-radius:var(--radius);padding:32px 36px}
.spesialmal-boks>div{flex:1 1 380px;min-width:0}
.spesialmal-boks h2{font-size:26px;margin-bottom:8px}
.spesialmal-boks p{margin:0}
@media (max-width:760px){
  .kontakt-oppsett{grid-template-columns:1fr}
  .skjema__rad{grid-template-columns:1fr}
  .skjema{padding:22px}
  .spesialmal-boks{padding:24px}
  .kontaktside{padding-top:32px}
}

[hidden]{display:none!important}
@media (max-width:760px){
  .toppstripe span:not(:last-child){display:none}
  .header{position:static}
  .header .wrap{gap:4px 12px;padding-top:10px;padding-bottom:6px}
  .logo img{height:36px}
  .meny{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:20px;font-size:15px;-webkit-overflow-scrolling:touch}
  .meny a{white-space:nowrap}
  .kurvknapp{min-height:40px;padding:0 14px}
  .kasse__hoyre{position:static}
  .seksjon{padding:48px 0}
}
/* Forsiden på mobil (Svein 2026-11-07): hvit hero med produktbilde under H1, kort kampanjelinje, telefonen i menyen i stedet
   for toppstripen. Desktop: bildet og den korte linja er skjult (bildet lastes ikke: <source> med 1×1-gif fra 761 px). */
.hero__bilde,.meny__tel,.kampanje__kort{display:none}
.knapp [data-pris]{white-space:nowrap;font-variant-numeric:tabular-nums}
.knapp del{font-weight:500;opacity:.7;text-decoration-thickness:2px;margin-right:2px}
.hero__kampanjepris{font-size:15px;margin:12px 0 0}
.kampanje__kort{margin:0;font-weight:500;white-space:nowrap;position:relative}
.kampanje__kopier{font:inherit;font-weight:700;letter-spacing:.5px;color:inherit;background:transparent;border:0;border-radius:4px;padding:8px 2px;margin:-8px 0;cursor:pointer;text-decoration:underline dashed;text-decoration-thickness:1.5px;text-underline-offset:4px}
.kampanje__kort--kvittert{color:transparent}
.kampanje__kort--kvittert .kampanje__kopier{color:transparent;text-decoration-color:transparent}
.kampanje__kort--kvittert::after{content:attr(data-kvittering);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--kvittering,#fff)}
.kampanje--lys .kampanje__kort{--kvittering:var(--svart)}
@media (max-width:760px){
  .hero{background-image:none}
  .hero .wrap{padding-top:28px;padding-bottom:44px}
  .hero__bilde{display:block;background:var(--gra);border-radius:20px;padding:12px 24px;margin:16px 0 18px}
  .hero__bilde img{display:block;width:100%;height:auto;max-height:190px;object-fit:contain}
  .toppstripe{display:none}
  .meny__tel{display:inline}
  .kampanje--kort .kampanje__tekst,.kampanje--kort .kampanje__kode{display:none}
  .kampanje--kort .kampanje__kort{display:block}
  .kampanje--kort .kampanje__inner{padding:4px 44px 4px 12px;min-height:40px}
  .kampanje--kort .kampanje__lukk{top:0;right:2px}
  .kampanje--kort .kampanje__status{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Menyen (Svein 2026-11-07, mobilhero2): sidescroll helt ut til skjermkanten, myk fade der det er mer å se (butikk.js startMeny) */
  .meny{width:calc(100% + 48px);margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px;gap:18px;scrollbar-width:none}
  .meny::-webkit-scrollbar{display:none}
  .meny--mer{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
  .meny--venstre{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
  .meny--venstre.meny--mer{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 56px),transparent)}
  /* Hero: etikett → H1 → bilde → undertittel → knapper → tillitslinja → avsnittet (desktop har HTML-rekkefølgen) */
  .hero__innhold{display:flex;flex-direction:column}
  .hero__innhold>*{margin-top:0;margin-bottom:0}
  .hero__innhold>h1{margin-top:6px}
  .hero__innhold>.hero__bilde{margin:14px 0}
  .hero__under{margin-top:0;margin-bottom:16px}
  .hero__tekst{order:1;margin-top:20px;font-size:17px}
  .hero__kampanjepris{margin-top:10px}
  .hero .punkter{margin-top:14px;gap:6px 18px;font-size:14px}
}
/* Smale telefoner: den korte kampanjelinja må få plass på én linje («kode» tas bort, litt mindre skrift) */
@media (max-width:374px){
  .kampanje--kort .kampanje__inner{padding-left:8px;padding-right:40px}
  .kampanje__kort{font-size:13px}
  .kampanje__kort-ord{display:none}
}
/* Ankerlenker (#ekstra-fyll, #finn-din-hoyde, #frakt …) havner under den faste toppmenyen */
[id]{scroll-margin-top:96px}
.fordel>.kort__ikon{flex:none}
/* Lagermerknad ved størrelsesvalget (LAGERMERKNAD i tools/bygg-sider.py) */
.lagermerknad{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 16px;background:var(--bla-lys);border:1px solid #B9E4F7;border-left:4px solid var(--bla-mork);border-radius:12px;color:var(--svart);font-size:16px;line-height:1.45;font-weight:500}
.lagermerknad svg{flex:0 0 auto;margin-top:1px}