/* ---------- Fonter (selvhostet, ingen tredjepart) ----------
   ITF Free Font License + OnlineWebFonts-konvertering (demo) – ikke lisensiert for kommersiell levering + SIL Open Font License 1.1. Se assets/fonts/lisenser/
   Variable filer: én per stil dekker hele vektaksen 100-900.
   ---------------------------------------------------------- */
@font-face{
  font-family:'Bevellier';
  src:url('../assets/fonts/bevellier-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Bevellier';
  src:url('../assets/fonts/bevellier-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Nippo';
  src:url('../assets/fonts/nippo-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-300-normal.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-400-normal.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-600-normal.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Suisse Intl';
  src:url('../assets/fonts/suisse-intl-700-normal.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/geist-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/geist-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../assets/fonts/geist-mono-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../assets/fonts/geist-mono-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
/* ---------- Design DNA ----------
   Oppsett fra craighill.co (målt 1440 px): fullbredde hero med versal kondensert tittel 100 px / lh 1,0 / vekt 800,
   stor seksjonstittel til venstre og kort tekst til høyre, pilleknapper (radius 500 px), ingen skygger, bunnlinje på mobil.
   Butikkruten fra teenage.engineering/store: grå produktflate (245), navn og pris under, + til høyre, rutenett-gap 14/33 px.
   Aksent: Falkenbergs egen logoblå #1D84C2, mørknet til #1872AA der den bærer liten tekst (5,2:1 mot hvitt).
   ------------------------------------------------------------- */
:root{
  --c-papir:#FFFFFF; --c-flate:#F3F4F5; --c-flis:#F3F4F5; --c-blekk:#0E1A22; --c-dempet:#5B6670; --c-linje:#DCE0E3;
  --c-aksent:#1872AA; --c-aksent-lys:#1D84C2; --c-aksent-tekst:#FFFFFF; --c-stripe:#10496A; --c-stripe-tekst:#FFFFFF;
  --c-mork:#0E1A22; --c-mork-tekst:#F3F4F5; --c-mork-dempet:#A9B4BD; --c-stjerne:#1D84C2; --c-fokus:#1872AA;
  --f-display:'Bevellier',sans-serif; --f-tekst:'Geist',system-ui,sans-serif; --f-mono:'Geist Mono',ui-monospace,monospace;
  --d-vekt:700; --d-tt:uppercase; --d-lh:1.0; --d-ls:0; --d-skala:1;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:80px; --s-6:120px;
  --kant:clamp(16px,4.2vw,60px); --maks:1440px;
  --r-pille:500px; --r-liten:4px;
  --e-ut:cubic-bezier(.16,1,.3,1); --t-kort:.2s; --t-mid:.32s;
  --stripe-h:36px; --topp-h:76px; --dokk-h:64px;
  --z-dekor:1; --z-sticky:100; --z-dokk:200; --z-overlay:300; --z-panel:400; --z-varsel:500;
}
[data-palett="2"]{
  --c-papir:#121518; --c-flate:#1B2025; --c-flis:#DDE2E6; --c-blekk:#EEF1F3; --c-dempet:#A0ABB4; --c-linje:#2C333A;
  --c-aksent:#4FA8DE; --c-aksent-lys:#4FA8DE; --c-aksent-tekst:#0B1217; --c-stripe:#1D84C2; --c-stripe-tekst:#FFFFFF;
  --c-mork:#07090B; --c-stjerne:#4FA8DE; --c-fokus:#4FA8DE;
}
[data-palett="3"]{
  --c-papir:#F4F1EC; --c-flate:#E9E4DC; --c-flis:#ECE7DF; --c-blekk:#1E1A16; --c-dempet:#665E56; --c-linje:#D8D1C6;
  --c-aksent:#10496A; --c-aksent-lys:#10496A; --c-aksent-tekst:#FFFFFF; --c-stripe:#1E1A16; --c-stripe-tekst:#F4F1EC;
  --c-mork:#10496A; --c-mork-tekst:#F4F1EC; --c-mork-dempet:#B9CAD6; --c-stjerne:#B5651D; --c-fokus:#10496A;
}
[data-font="2"]{ --f-display:'Nippo',sans-serif; --d-vekt:600; --d-lh:1.04; --d-skala:.62; }
[data-font="3"]{ --f-display:'Suisse Intl',sans-serif; --f-tekst:'Suisse Intl',system-ui,sans-serif; --d-vekt:300; --d-tt:none; --d-lh:1.02; --d-ls:-.03em; --d-skala:.66; }

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topp-h) + 12px)}
body{margin:0;background:var(--c-papir);color:var(--c-blekk);font:400 16px/1.5 var(--f-tekst);-webkit-font-smoothing:antialiased;transition:background-color var(--t-mid),color var(--t-mid)}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
button,input{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ikon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.vis-skjermleser{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--c-fokus);outline-offset:3px;border-radius:2px}
.hopp{position:absolute;left:12px;top:-60px;z-index:var(--z-varsel);background:var(--c-blekk);color:var(--c-papir);padding:12px 16px;border-radius:var(--r-liten)}
.hopp:focus{top:12px}

/* ---------- Typografi ---------- */
.stor,.hero__tittel{font-family:var(--f-display);font-weight:var(--d-vekt);text-transform:var(--d-tt);line-height:var(--d-lh);letter-spacing:var(--d-ls);margin:0}
.stor{font-size:calc(clamp(56px,8.4vw,128px) * var(--d-skala))}

/* ---------- Knapper ---------- */
.knapp{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-pille);border:1px solid transparent;font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;background:none;transition:background-color var(--t-kort),color var(--t-kort),border-color var(--t-kort),transform .12s var(--e-ut)}
.knapp:active{transform:scale(.97)}
.knapp--fylt{background:var(--c-aksent);color:var(--c-aksent-tekst)}
.knapp--lys{background:#FFFFFF;color:#0E1A22}
.knapp--strek{border-color:currentColor}
.knapp--bred{width:100%}
.lenke{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--c-blekk);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;background:none;border:0;padding:0;cursor:pointer}
.lenke .ikon{width:18px;height:18px;transition:transform var(--t-kort) var(--e-ut)}
@media (hover:hover) and (pointer:fine){
  .knapp--fylt:hover{background:var(--c-blekk);color:var(--c-papir)}
  .knapp--lys:hover{background:var(--c-aksent-lys);color:#FFFFFF}
  .knapp--strek:hover{background:var(--c-blekk);color:var(--c-papir);border-color:var(--c-blekk)}
  .lenke:hover .ikon{transform:translateX(4px)}
}

/* ---------- Stripe og topp ---------- */
.stripe{height:var(--stripe-h);display:flex;align-items:center;justify-content:center;background:var(--c-stripe);color:var(--c-stripe-tekst);font-size:14px;position:relative;z-index:var(--z-sticky)}
.stripe p{display:flex;gap:10px;align-items:center}
.stripe a{text-decoration:none;font-weight:500;display:inline-flex;align-items:center;min-height:44px}
.stripe__skille{opacity:.6}
.topp{position:sticky;top:0;z-index:var(--z-sticky);height:var(--topp-h);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--kant);background:var(--c-papir);border-bottom:1px solid var(--c-linje);transition:background-color var(--t-mid),border-color var(--t-mid),color var(--t-mid)}
.topp__merke{display:block;flex:none;position:relative;width:148px;height:52px}
.topp__logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity var(--t-kort)}
.topp__logo--hvit{opacity:0}
[data-palett="2"] .topp__logo--bla{opacity:0}
[data-palett="2"] .topp__logo--hvit{opacity:1}
.topp__nav{display:flex;gap:28px;font-size:16px}
.topp__nav a{text-decoration:none;padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/0 1px no-repeat;transition:background-size var(--t-mid) var(--e-ut)}
.topp__verktoy{margin-left:auto;display:flex;align-items:center;gap:8px}
.topp__knapp{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:var(--r-pille);border:1px solid var(--c-linje);background:none;text-decoration:none;font-size:15px;cursor:pointer;transition:background-color var(--t-kort),border-color var(--t-kort),color var(--t-kort)}
.topp__menyknapp{display:none;padding:0;width:44px;justify-content:center}
.teller{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--c-aksent);color:var(--c-aksent-tekst);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){
  .topp__nav a:hover{background-size:100% 1px}
  .topp__knapp:hover{border-color:currentColor}
}
/* Over hero 1 (fotohallen) står toppen gjennomsiktig med hvit tekst */
[data-heroaktiv="1"] .topp.topp--over{background:transparent;border-color:transparent;color:#FFFFFF}
[data-heroaktiv="1"] .topp.topp--over .topp__logo--bla{opacity:0}
[data-heroaktiv="1"] .topp.topp--over .topp__logo--hvit{opacity:1}
[data-heroaktiv="1"] .topp.topp--over .topp__knapp{border-color:rgba(255,255,255,.5)}

/* ---------- Hero 1: hallen ---------- */
.hero--hall{position:relative;margin-top:calc(var(--topp-h) * -1);min-height:min(100svh,920px);display:grid;place-items:center;color:#FFFFFF;overflow:hidden;isolation:isolate;background:#0E1A22}
.hero--hall .hero__media{position:absolute;inset:0;z-index:-1}
.hero--hall .hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero--hall .hero__media::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 52% 48% at 50% 54%,rgba(8,20,28,.5),rgba(8,20,28,0) 100%),linear-gradient(180deg,rgba(8,20,28,.72) 0%,rgba(8,20,28,.52) 30%,rgba(8,20,28,.56) 70%,rgba(8,20,28,.78) 100%)}
.hero__innhold{width:100%;max-width:1120px;padding:calc(var(--topp-h) + var(--s-5)) var(--kant) var(--s-5);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-3)}
.hero__tittel{display:flex;flex-direction:column;font-size:calc(clamp(88px,12.6vw,188px) * var(--d-skala))}
.hero__line{display:block;overflow:hidden;padding:.2em .25em .26em;margin:-.2em -.25em -.26em}
.hero__line-in{display:block}
.anim-hero .hero__line-in{transform:translateY(150%)}
.anim-hero .hero__sub{opacity:0}
.hero__ingress{max-width:560px;font-size:clamp(17px,1.35vw,19px);line-height:1.5}
.hero--hall .hero__ingress{color:#E8EDF0}
.hero__knapper{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.hero--hall .knapp--strek{color:#FFFFFF;border-color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){ .hero--hall .knapp--strek:hover{background:#FFFFFF;color:#0E1A22;border-color:#FFFFFF} }

.vurdering{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:15px;font-weight:500}
.hero--hall .vurdering{color:#FFFFFF}
.hero--hall .vurdering .stjerner{--c-stjerne:#8FD0F5}
.stjerner{position:relative;display:inline-block;width:92px;height:17px;overflow:hidden;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M9 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6L9 13.6 3.6 16.5l1.2-6L.3 6.3l6.1-.7z'/%3E%3Cuse href='%23s' x='20.5'/%3E%3Cuse href='%23s' x='41'/%3E%3Cuse href='%23s' x='61.5'/%3E%3Cuse href='%23s' x='82'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 18'%3E%3Cg fill='%23000'%3E%3Cpath id='s' d='M9 0l2.6 5.6 6.1.7-4.5 4.2 1.2 6L9 13.6 3.6 16.5l1.2-6L.3 6.3l6.1-.7z'/%3E%3Cuse href='%23s' x='20.5'/%3E%3Cuse href='%23s' x='41'/%3E%3Cuse href='%23s' x='61.5'/%3E%3Cuse href='%23s' x='82'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.stjerner{background:color-mix(in srgb,var(--c-stjerne) 30%,transparent)}
.stjerner__fylt{position:absolute;inset:0 auto 0 0;background:var(--c-stjerne)}
.stjerner--stor{width:130px;height:24px}

/* ---------- Søk ---------- */
.sok{position:relative;display:flex;align-items:center;width:100%;max-width:620px;height:60px;padding:6px 6px 6px 52px;border-radius:var(--r-pille);background:#FFFFFF;color:#0E1A22}
.sok__ikon{position:absolute;left:20px;top:50%;margin-top:-10px;color:#5B6670}
.sok__felt{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:17px}
.sok__felt::placeholder{color:#5B6670}
.sok:focus-within{outline:2px solid var(--c-aksent-lys);outline-offset:3px}
.sok .knapp{min-height:48px}
.sok--lys{background:var(--c-flate);color:var(--c-blekk)}
.sok--lys .sok__ikon,.sok--lys .sok__felt::placeholder{color:var(--c-dempet)}

/* ---------- Hero 2: katalogen ---------- */
.hero--katalog{padding:var(--s-5) var(--kant) var(--s-4);border-bottom:1px solid var(--c-linje)}
.katalog__topp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:var(--s-5);align-items:end;max-width:var(--maks);margin:0 auto}
.hero__tittel--katalog{font-size:calc(clamp(64px,7.6vw,124px) * var(--d-skala))}
.vurdering--mork{color:var(--c-blekk);margin-bottom:var(--s-2)}
.katalog__hoyre{display:flex;flex-direction:column;gap:var(--s-3);padding-bottom:12px}
.katalog__hoyre .hero__ingress{color:var(--c-dempet)}
.indeks{list-style:none;margin:var(--s-5) auto 0;padding:0;max-width:var(--maks);display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.indeks__punkt a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:4px;align-items:center;padding:var(--s-3);min-height:120px;background:var(--c-flate);text-decoration:none;transition:background-color var(--t-kort),color var(--t-kort)}
.indeks__ikon{width:28px;height:28px;grid-row:span 2;color:var(--c-aksent)}
.indeks__navn{font-size:26px;font-weight:300;line-height:1.15}
.indeks__under{grid-column:2;color:var(--c-dempet);font-size:14px;line-height:1.35}
@media (hover:hover) and (pointer:fine){
  .indeks__punkt a:hover{background:var(--c-aksent);color:var(--c-aksent-tekst)}
  .indeks__punkt a:hover .indeks__ikon,.indeks__punkt a:hover .indeks__under{color:inherit}
}

/* ---------- Seksjoner ---------- */
main>section:not(.hero){padding:var(--s-6) var(--kant) 0;max-width:var(--maks);margin:0 auto}
.seksjonstopp{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-4);margin-bottom:var(--s-4)}
.seksjonstopp__tekst{max-width:420px;color:var(--c-dempet);font-size:17px;padding-bottom:10px}

/* Sortiment */
.fliser{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.flis__lenke{display:flex;flex-direction:column;text-decoration:none}
.flis__bilde{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--c-flate)}
.flis__bilde img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-ut)}
.flis__navn{margin-top:14px;font-size:19px;font-weight:500}
.flis__linje{color:var(--c-dempet);font-size:15px}
@media (hover:hover) and (pointer:fine){ .flis__lenke:hover .flis__bilde img{transform:scale(1.04)} }

/* Butikk */
.filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s-3)}
.filter__valg{min-height:44px;padding:0 18px;border-radius:var(--r-pille);border:1px solid var(--c-linje);background:none;cursor:pointer;font-size:15px;transition:background-color var(--t-kort),color var(--t-kort),border-color var(--t-kort)}
.filter__valg[aria-pressed="true"]{background:var(--c-blekk);color:var(--c-papir);border-color:var(--c-blekk)}
.filter__antall{margin-left:auto;color:var(--c-dempet);font-size:15px;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){ .filter__valg:hover{border-color:var(--c-blekk)} }
.varer{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:33px 14px}
.vare{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:8px}
.vare__bilde{grid-column:1/-1;display:block;aspect-ratio:1;background:var(--c-flis);overflow:hidden}
.vare__bilde img{width:100%;height:100%;object-fit:contain;padding:14%;mix-blend-mode:multiply;transition:transform .5s var(--e-ut)}
.vare__info{padding-top:12px;min-width:0}
.vare__navn{font-size:16px;line-height:1.3}
.vare__nr{color:var(--c-dempet);font-size:13px;line-height:1.4;margin-top:2px}
.vare__nr span{font-family:var(--f-mono);font-size:12px}
.vare__pris{margin-top:6px;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums}
.vare__legg{align-self:start;margin-top:4px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--c-linje);background:none;cursor:pointer;transition:background-color var(--t-kort),color var(--t-kort),border-color var(--t-kort),transform .12s var(--e-ut)}
.vare__legg:active{transform:scale(.95)}
.vare__legg.er-lagt{background:var(--c-aksent);color:var(--c-aksent-tekst);border-color:var(--c-aksent)}
@media (hover:hover) and (pointer:fine){
  .vare__bilde:hover img{transform:scale(1.05)}
  .vare__legg:hover{background:var(--c-blekk);color:var(--c-papir);border-color:var(--c-blekk)}
}
.butikk__tom{padding:var(--s-4) 0;color:var(--c-dempet)}
.butikk__bunn{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-4)}
.butikk__flere{display:none}

/* Service */
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-5);align-items:center}
.service__bilde{aspect-ratio:1;overflow:hidden;background:var(--c-flate)}
.service__bilde img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.service__ingress{margin:var(--s-3) 0 var(--s-4);max-width:480px;font-size:19px;color:var(--c-dempet)}
.tjenester{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--c-linje)}
.tjenester a{display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:18px 12px 18px 0;border-bottom:1px solid var(--c-linje);text-decoration:none;min-height:44px}
.tjenester .ikon{grid-row:span 2;margin-top:2px;color:var(--c-aksent)}
.tjenester__navn{font-weight:500}
.tjenester__linje{grid-column:2;color:var(--c-dempet);font-size:14px}
@media (hover:hover) and (pointer:fine){ .tjenester a:hover .tjenester__navn{text-decoration:underline;text-underline-offset:4px} }
.service__knapper{margin-top:var(--s-4)}

/* Referanser */
.sitat{margin:0 0 var(--s-5);max-width:1100px}
.sitat blockquote{margin:0}
.sitat p{font-size:clamp(28px,3.3vw,48px);line-height:1.18;font-weight:300;letter-spacing:-.01em}
.sitat figcaption{margin-top:var(--s-3);color:var(--c-dempet)}
.ref{list-style:none;margin:0 0 var(--s-3);padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ref a{display:flex;flex-direction:column;text-decoration:none}
.ref__bilde{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--c-flate)}
.ref__bilde img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e-ut)}
.ref__navn{margin-top:14px;font-size:19px;font-weight:500}
.ref__linje{color:var(--c-dempet);font-size:15px}
@media (hover:hover) and (pointer:fine){ .ref a:hover .ref__bilde img{transform:scale(1.04)} }

/* Merker */
.merker__tittel{font-size:15px;font-weight:400;color:var(--c-dempet);margin:0 0 var(--s-2)}
.merker__liste{font-family:var(--f-display);font-weight:var(--d-vekt);text-transform:var(--d-tt);letter-spacing:var(--d-ls);font-size:calc(clamp(30px,3.6vw,54px) * var(--d-skala));line-height:1.12;color:var(--c-dempet)}

/* Kontakt */
.kontakt{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-5);align-items:start;padding-bottom:var(--s-6)}
.kontakt__liste{list-style:none;margin:var(--s-4) 0;padding:0;border-top:1px solid var(--c-linje)}
.kontakt__liste a{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--c-linje);text-decoration:none;min-height:44px}
.kontakt__liste .ikon{margin-top:12px;color:var(--c-aksent)}
.kontakt__etikett{display:block;color:var(--c-dempet);font-size:13px}
.google{display:grid;gap:6px;justify-items:start}
.google__snitt{font-size:17px}
.google__snitt strong,.google__snitt b{font-size:28px;font-weight:500}
.kart{margin:0}
.kart__ramme{position:relative;aspect-ratio:9/6;overflow:hidden;background:var(--c-flate)}
.kart__bilde{width:100%;height:100%;object-fit:cover}
.kart__nal{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;color:var(--c-aksent);pointer-events:none}
.kart__nal .ikon{width:44px;height:44px;fill:var(--c-papir);stroke-width:1.75}
.kart__nal span{order:-1;margin-bottom:6px;padding:6px 12px;border-radius:var(--r-pille);background:var(--c-aksent);color:var(--c-aksent-tekst);font-size:14px;font-weight:500;white-space:nowrap}
.kart__under{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px;font-size:14px}
.kart__under a{min-height:44px;display:inline-flex;align-items:center}
.kart__kreditt{margin-left:auto;color:var(--c-dempet)}

/* Bunn */
.bunn{background:var(--c-mork);color:var(--c-mork-tekst);padding:var(--s-5) var(--kant) var(--s-4);display:grid;grid-template-columns:auto 1fr;gap:var(--s-3) var(--s-5);align-items:center}
.bunn__logo{width:170px;height:auto}
.bunn__nav{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:flex-end}
.bunn__nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.bunn__info,.bunn__kreditt{color:var(--c-mork-dempet);font-size:14px}
.bunn__kreditt{text-align:right}
.bunn__kreditt a{min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){ .bunn__nav a:hover{text-decoration:underline;text-underline-offset:4px} }

/* ---------- Dokk (mobil) ---------- */
.dokk{display:none}

/* ---------- Handlekurv ---------- */
.slor{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(8,14,18,.45);opacity:0;transition:opacity var(--t-mid)}
.slor.er-apen{opacity:1}
.kurv{position:fixed;top:0;right:0;bottom:0;z-index:var(--z-panel);width:min(440px,100%);display:flex;flex-direction:column;background:var(--c-papir);color:var(--c-blekk);transform:translateX(100%);transition:transform .28s var(--e-ut);overflow-y:auto;overscroll-behavior:contain}
.kurv.er-apen{transform:none}
.kurv__topp{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--c-linje);position:sticky;top:0;background:var(--c-papir)}
.kurv__tittel{margin:0;font-size:22px;font-weight:500}
.kurv__lukk{width:44px;height:44px;display:grid;place-items:center;border:0;background:none;border-radius:50%;cursor:pointer}
.kurv__steg{padding:24px;display:flex;flex-direction:column;gap:var(--s-2);flex:1}
.kurv__tom{color:var(--c-dempet)}
.kurv__liste{list-style:none;margin:0;padding:0}
.linje{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--c-linje);align-items:center}
.linje__bilde{width:72px;height:72px;background:var(--c-flis)}
.linje__bilde img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.linje__navn{font-size:15px;line-height:1.3}
.linje__nr{font-family:var(--f-mono);font-size:12px;color:var(--c-dempet)}
.linje__antall{display:flex;align-items:center;gap:2px;margin-top:6px}
.linje__antall button{width:44px;height:36px;display:grid;place-items:center;border:1px solid var(--c-linje);background:none;cursor:pointer;border-radius:var(--r-pille)}
.linje__antall button .ikon{width:16px;height:16px}
.linje__antall output{min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.linje__sum{align-self:start;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.kurv__sum{margin-top:auto;display:grid;gap:8px;padding-top:var(--s-2)}
.kurv__sum p{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.kurv__mva{color:var(--c-dempet);font-size:15px}
.kurv__total{font-size:19px;font-weight:600;padding:8px 0 12px;border-top:1px solid var(--c-linje)}
.kasse__tilbake{align-self:flex-start}
.felt{display:grid;gap:6px}
.felt__navn{font-size:14px;color:var(--c-dempet)}
.felt input{min-height:48px;padding:0 14px;border:1px solid var(--c-linje);border-radius:var(--r-liten);background:var(--c-papir)}
.felt input:focus{outline:2px solid var(--c-fokus);outline-offset:1px;border-color:transparent}
.felt input[aria-invalid="true"]{border-color:#B3261E}
.levering{border:0;padding:0;margin:0;display:grid;gap:8px}
.levering legend{margin-bottom:6px}
.levering__valg{position:relative}
.levering__valg input{position:absolute;opacity:0}
.levering__valg span{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;border:1px solid var(--c-linje);border-radius:var(--r-liten);cursor:pointer}
.levering__valg input:checked+span{border-color:var(--c-aksent);box-shadow:inset 0 0 0 1px var(--c-aksent)}
.levering__valg input:focus-visible+span{outline:2px solid var(--c-fokus);outline-offset:2px}
.kasse__feil{color:#B3261E;font-size:15px}
[data-palett="2"] .kasse__feil{color:#FF8A80}
.kvittering__tittel{font-size:24px;font-weight:500}
.kvittering:focus{outline:none}

.beskjed{position:fixed;left:50%;bottom:24px;z-index:var(--z-varsel);transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:var(--r-pille);background:var(--c-blekk);color:var(--c-papir);font-size:15px;max-width:calc(100% - 32px)}
.beskjed span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.beskjed__knapp{flex:none;min-height:40px;padding:0 16px;border-radius:var(--r-pille);border:0;background:var(--c-papir);color:var(--c-blekk);cursor:pointer;font-weight:500}

/* ---------- Designvalg ---------- */
.lab{position:fixed;left:16px;bottom:16px;z-index:var(--z-panel);display:flex;flex-direction:column-reverse;align-items:flex-start;gap:8px;font:400 13px/1.2 var(--f-tekst)}
.lab__veksle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-pille);border:1px solid rgba(255,255,255,.4);background:rgba(14,26,34,.72);color:#FFFFFF;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer}
.lab__panel{display:grid;gap:8px;padding:14px;border-radius:18px;background:rgba(14,26,34,.82);color:#FFFFFF;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.16)}
.lab__gruppe{display:flex;align-items:center;gap:6px}
.lab__merke{width:26px;font-size:16px}
.lab__gruppe button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;color:#FFFFFF;cursor:pointer}
.lab__gruppe button[aria-pressed="true"]{background:#FFFFFF;color:#0E1A22;border-color:#FFFFFF}
.lab__kreditt{display:flex;gap:6px;justify-content:center;opacity:.8;padding-top:4px}
.lab__kreditt a{text-decoration:none;font-weight:600}
.lab__prikk{color:#8FD0F5}
.kurv-apen .lab{display:none}

/* ---------- Avslørt ved rulling (bare under folden) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;scroll-behavior:auto!important}
}

/* ---------- Mobil: ruter i stedet for å ramse opp ---------- */
@media (max-width:1100px){
  .topp__nav{display:none}
  .topp__menyknapp{display:inline-flex}
  .topp__nav.er-apen{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;padding:8px var(--kant) 20px;background:var(--c-papir);color:var(--c-blekk);border-bottom:1px solid var(--c-linje)}
  .topp__nav.er-apen a{padding:14px 0;font-size:19px;border-bottom:1px solid var(--c-linje)}
  .indeks,.fliser{grid-template-columns:repeat(2,1fr)}
  .varer{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  :root{--topp-h:64px;--s-6:60px;--s-5:44px;--s-4:28px}
  .referanser .seksjonstopp__tekst{display:none}
  .stripe{font-size:13px}
  .stripe__valgfri{display:none}
  .topp{gap:12px}
  .topp__merke{width:120px;height:44px}
  .topp__min,.topp__kurv{display:none}
  .hero--hall{min-height:auto;place-items:end center}
  .hero__innhold{padding:calc(var(--topp-h) + 48px) var(--kant) 36px;gap:18px}
  .hero__tittel{font-size:calc(clamp(72px,24vw,112px) * var(--d-skala))}
  .hero__ingress{font-size:16px}
  .sok{height:56px}
  .sok .knapp{padding:0 18px}
  .hero__knapper{width:100%}
  .hero__knapper .knapp{flex:1;padding:0 12px}
  .hero--katalog{padding-top:var(--s-5)}
  .katalog__topp{grid-template-columns:1fr;gap:var(--s-3)}
  .hero__tittel--katalog{font-size:calc(clamp(44px,13.4vw,64px) * var(--d-skala) / (var(--d-skala) * .45 + .55))}
  .indeks{margin-top:var(--s-4);gap:8px}
  .indeks__punkt a{grid-template-columns:1fr;min-height:0;padding:16px}
  .indeks__ikon{grid-row:auto;width:24px;height:24px;margin-bottom:6px}
  .indeks__navn{font-size:20px}
  .indeks__under{grid-column:1;font-size:13px}
  .seksjonstopp{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:var(--s-3)}
  .seksjonstopp__tekst{font-size:15px;padding:0}
  .stor{font-size:calc(clamp(52px,15vw,72px) * var(--d-skala))}
  .fliser{gap:8px}
  .flis__bilde{aspect-ratio:3/2}
  .flis__navn{margin-top:8px;font-size:16px}
  .flis__linje{font-size:13px;line-height:1.35}
  .filter{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--kant) * -1) var(--s-2);padding:0 var(--kant);scrollbar-width:none}
  .filter::-webkit-scrollbar{display:none}
  .filter__valg{flex:none}
  .filter__antall{display:none}
  .varer{grid-template-columns:repeat(2,1fr);gap:20px 8px}
  .varer:not(.alle-vises) .vare:nth-child(n+5):not(.er-treff){display:none}
  .vare__bilde img{padding:12%}
  .vare__navn{font-size:14px}
  .vare__nr{display:none}
  .vare{position:relative;grid-template-columns:1fr}
  .vare__legg{position:absolute;right:6px;top:calc((100vw - var(--kant) * 2 - 8px) / 2 - 50px);margin:0;background:var(--c-papir)}
  .vare__pris{font-size:14px;margin-top:2px}
  .butikk__flere{display:inline-flex}
  .butikk__flere[hidden]{display:none}
  .butikk__bunn{flex-direction:column;align-items:flex-start;gap:8px;margin-top:var(--s-3)}
  .service{grid-template-columns:1fr;gap:var(--s-3)}
  .service__bilde{aspect-ratio:21/9}
  .service__ingress{font-size:16px;margin:12px 0 var(--s-3)}
  .tjenester{grid-template-columns:1fr 1fr;gap:0 12px}
  .tjenester a{grid-template-columns:1fr;padding:14px 0;row-gap:6px}
  .tjenester .ikon{grid-row:auto}
  .tjenester__navn{font-size:15px}
  .tjenester__linje{grid-column:1;font-size:13px;line-height:1.35}
  .sitat{margin-bottom:var(--s-4)}
  .sitat p{font-size:24px}
  .ref{grid-template-columns:1fr;gap:0}
  .ref a{display:grid;grid-template-columns:96px 1fr;column-gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--c-linje)}
  .ref__bilde{grid-row:span 2;aspect-ratio:1}
  .ref__navn{margin-top:0;font-size:16px;align-self:end}
  .ref__linje{font-size:13px;align-self:start}
  .merker__liste{font-size:calc(28px * (var(--d-skala) * .5 + .5))}
  .kontakt{grid-template-columns:1fr;gap:var(--s-4);padding-bottom:calc(var(--s-6) + var(--dokk-h))}
  .kontakt__liste{margin:var(--s-3) 0;display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .kontakt__liste a{flex-direction:column;gap:6px;padding:14px 0;font-size:14px;word-break:break-word}
  .kontakt__liste .ikon{margin-top:0}
  .kart__ramme{aspect-ratio:16/10}
  .kart__kreditt{margin-left:0}
  .bunn{grid-template-columns:1fr;padding-bottom:calc(var(--s-4) + var(--dokk-h))}
  .bunn__nav{justify-content:flex-start}
  .bunn__kreditt{text-align:left}
  .dokk{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dokk);height:var(--dokk-h);display:grid;grid-template-columns:repeat(4,1fr);background:var(--c-papir);border-top:1px solid var(--c-linje);padding-bottom:env(safe-area-inset-bottom)}
  .dokk__valg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;text-decoration:none;font-size:12px;cursor:pointer;color:var(--c-blekk)}
  .dokk__valg .teller{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;font-size:11px}
  .lab{left:auto;right:12px;bottom:calc(var(--dokk-h) + 12px);align-items:flex-end}
  .lab__veksle-tekst{display:none}
  .beskjed{bottom:calc(var(--dokk-h) + 12px)}
  .kurv{width:100%}
}