/* ══════════════════════════════════════════════════════════════════════════
   base.css — felles stilark for hele prototypen.

   Ved Shopify-portering splittes denne fila:
     · skrift, :root, reset og fellesklasser  -> assets/base.css (uendret)
     · hver blokk merket «SEKSJON: …»         -> {% stylesheet %} i sin
                                                 egen sections/*.liquid
   Blokkene er allerede kommentert med hvor de hører hjemme, så splittingen
   er klipp-og-lim. Ingen seksjon her arver stil fra en annen seksjon.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── skrift ──
   Begge familiene er variable og ligger lokalt, så siden ikke er avhengig av
   Google Fonts. I Shopify byttes bare url-ene til
   {{ 'schibsted-grotesk.woff2' | asset_url }}.

   Vektaksene er lest ut av selve filene: Schibsted 400–900, Familjen 400–700.
   Sto tidligere oppgitt som 400–500, og da klipper nettleseren alt over 500 og
   tegner falsk halvfet i stedet for den ekte vekten som ligger i fila. */
@font-face{font-family:"Schibsted Grotesk";src:url(fonts/schibsted-grotesk.woff2) format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url(fonts/familjen-grotesk.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  /* ── gull ──
     KONTRASTREGEL, ikke smakssak: --gold mot --paper gir ca. 2,2:1. Det stryker
     WCAG AA for all tekst. På lys bakgrunn er gull derfor kun dekor — hårfine
     streker, rammer, ikoner, og som knappebakgrunn med mørk tekst oppå.
     De sperrede etikettene over overskriftene skal bruke --muted eller --ink-2,
     aldri gull. På mørkt tre (--wood) er det motsatt: der har gullet god
     kontrast og kan brukes fritt, også til små etiketter. */
  --gold:#C2A05A; --gold-soft:#E2CE9E; --gold-deep:#9C7C3E;

  /* ── papir (lyse flater: produkter, kategorier, innhold) ──
     Kanoniske verdier — godkjent av kunden. Endres ikke uten ny godkjenning. */
  --paper:#F4F2EC; --paper-2:#FBFAF7; --ink:#1E1B17; --ink-2:#55504A;
  /* ── kontrastregel for --muted ──
     3,27:1 mot --paper og 3,51:1 mot --paper-2. Det stryker WCAG AA for
     brødtekst (4,5:1), akkurat som --gold gjør. Papirtonene er godkjent av
     kunden og skal ikke justeres, så løsningen er den samme som for gull:
     --muted er en DEKORFARGE på lyse flater — streker, rammer, kantlinjer
     og deaktiverte kontroller (som er unntatt fra 1.4.3). Skal det stå
     tekst på papir, bruk --ink-2 (7,13:1).
     Målt med Lighthouse: 16 treff på color-contrast før dette. */
  --muted:#8B857A; --line:#E1DCD1;

  /* ── produktflate ──
     Ren hvit, og bevisst IKKE --paper-2. Måling av de 422 leverandør-
     bildene: 343 har ren #FFF bakgrunn, 91 har alfakanal. På --paper-2
     (#FBFAF7) tegnet de en synlig, skarpkantet hvit firkant inni kortet.
     #FFF matcher de 343 eksakt og gir de gjennomsiktige en ren flate.
     Hvit-på-nesten-hvit leses da som ingenting, så flaten holdes sammen
     av --line-rammen rundt. Godkjent avvik fra papirpaletten. */
  --produktflate:#FFF;

  /* ── tre (mørke flater: hero, verksted, historie, footer) ──
     Aldri bak et produktkort — leverandørbildene har hvit bakgrunn. */
  --wood:#332E28; --wood-2:#3D3730; --wood-line:#4A423A;
  --wood-ink:#F2EEE7; --wood-ink-2:#C9C0B3;
  /* --wood-muted er treets svar på --muted: 4,00:1 mot --wood, altså under
     AA for tekst. Dekorfarge — streker og ikoner, ikke ord. Skal det stå
     tekst på mørk flate, bruk --wood-ink-2 (7,47:1). */
  --wood-muted:#948B7D;
  --bg:var(--paper); --panel:var(--paper-2); --fg:var(--ink); --fg-2:var(--ink-2);
  /* --dim og --acc er aliaser for --muted og --gold-deep. Begge stryker
     AA som tekst på papir (3,27:1 og 3,50:1) — de er dekorfarger. Bruk dem
     til streker, rammer og ikoner, aldri til ord på lys flate. */
  --dim:var(--muted); --hair:var(--line); --acc:var(--gold-deep);
  --pad:clamp(20px,5vw,72px);

  /* ── filstier ──
     Relative til assets/, siden dette stilarket ligger der. Samlet her med
     vilje: i Shopify erstattes disse fire linjene med
     url({{ 'logo.svg' | asset_url }}) osv., og resten av CSS-en står urørt. */
  --fil-logo:url(logo.svg);
  --fil-pin:url(favicon.svg);
  --fil-vipps:url(vipps.svg);
  --fil-klarna:url(klarna.svg);
}
*{box-sizing:border-box}
/* hidden-attributtet skal vinne over alt.
   Nettleserens egen regel er bare [hidden]{display:none}, som taper mot
   enhver klasse som setter display — .solid{display:inline-flex} gjorde at
   «Last inn flere» sto igjen som en tom svart stripe når den var skjult.
   Feilen er umulig å se i CSS-en og lett å gjenskape i neste seksjon, så
   den lukkes her én gang. Sett display i JS bare via .hidden = true/false. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Schibsted Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.5}
img{max-width:100%;display:block}
h1,h2,p{margin:0}
a{color:inherit}
/* ── fokusring ──
   To skygger i stedet for outline: gullet innerst mot elementet beholder
   uttrykket, den mørke ringen utenfor bærer kontrasten. Gull alene mot papir
   er 2,2:1 og stryker WCAG 2.2, som krever 3:1 for fokusmarkører.
   På mørke flater bytter ytterringen til lys, ellers forsvinner den i treet. */
:focus-visible{outline:none;
  box-shadow:0 0 0 2px var(--gold), 0 0 0 4px var(--ink)}
.hero :focus-visible,.topp--over :focus-visible,.vsted :focus-visible,
.vside__topp :focus-visible,.drawer :focus-visible,.modal :focus-visible,
.solv :focus-visible,.nyhet :focus-visible,
.foot :focus-visible{box-shadow:0 0 0 2px var(--gold), 0 0 0 4px var(--wood-ink)}
/* leses av skjermleser, vises ikke */
.visuelt-skjult{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ── bilde-plassholder ── */
/* <picture> er inline som standard — uten dette får bildene feil boks
   inne i .ph, .solv__bg og .vsted__bilde. Samme grep som på heroen. */
.ph picture,.solv__bg picture,.vsted__bilde picture{display:block;width:100%;height:100%}
.slat .ph picture{width:auto;min-width:100%;margin:0 auto}
.ph{position:relative;overflow:hidden;margin:0;display:flex;align-items:flex-end;
  background:linear-gradient(155deg,#3B342C,#221E19)}
.ph img{width:100%;height:100%;object-fit:cover;display:block}

/* ── hero med ett stort bakgrunnsbilde ── */
.hero{position:relative;width:100%;min-height:100vh;overflow:clip;color:#F6F3EC;display:flex;flex-direction:column}
@supports (min-height:100svh){.hero{min-height:100svh}}
.hero__bg{position:absolute;inset:0}
/* <picture> er inline som standard og ville gitt bildet feil boks */
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:42% 50%}
.scrim{position:absolute;inset:0;pointer-events:none}
/* ── TOPPLINJE (.topp) -> sections/header.liquid ──
   Én komponent, to varianter. Markupen ligger i partials/header.html og
   settes inn av bygg.sh på hver side, så det finnes bare én kilde.
     .topp--over  forsiden: ligger oppå heroen, gjennomsiktig
     .topp--fast  undersider: solid --wood med hårfin bunnstrek
   Alt annet er felles. I Shopify blir dette én header-seksjon i theme.liquid,
   og varianten styres av om malen har hero eller ikke. */
.topp__inn{display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:clamp(18px,2.4vw,26px) var(--pad)}
.topp .logo{background:var(--gold-soft)}
.topp__logo{display:inline-flex}
.topp--fast{background:var(--wood);color:var(--wood-ink);border-bottom:1px solid var(--wood-line)}
.topp--over{position:relative;z-index:5;color:#F6F3EC}
.topp--over .topp__inn{padding:clamp(26px,3.6vw,44px) clamp(26px,4vw,58px)}
/* logoen tegnes som maske, så SVG-en kan farges i gull uten å redigere fila */
.logo{display:block;height:clamp(25px,2.7vw,33px);aspect-ratio:265.4778/74.8069;background:var(--gold-soft);
  -webkit-mask:var(--fil-logo) center/contain no-repeat;
          mask:var(--fil-logo) center/contain no-repeat}
.tag{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase}
.topp--over .tag{color:#CFC5B4}
.title{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;letter-spacing:-.025em;line-height:1.06}
/* primærhandel — ett fylt element, aldri to */
.solid{display:inline-flex;align-items:center;text-decoration:none;background:#F4F2EC;color:#1E1B17;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;
  transition:background-color .25s,color .25s}
.solid:hover{background:var(--gold-soft);color:#1E1B17}
.vD__act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px clamp(18px,2.4vw,30px)}

/* handlekurv i topplinja — det tydeligste tegnet på at dette er en butikk */
.topp__nav{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap;justify-content:flex-end}
.menu-btn{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  color:var(--gold-soft);font-family:inherit;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 0;transition:color .25s}
.menu-btn:hover{color:#F3E7C9}
.menu-btn svg{width:18px;height:18px}
.topp__kurv{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--gold-soft);
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding-left:clamp(14px,2vw,26px);border-left:1px solid rgba(226,206,158,.35);transition:color .25s}
.topp__kurv:hover{color:#F3E7C9}
.topp__kurv svg{width:15px;height:15px;flex:0 0 auto}
.topp__kurv b{font-weight:500}

/* rullehint — heroen skal ikke se ut som hele siden */
.hero__cue{position:absolute;left:50%;bottom:clamp(20px,3.4vh,34px);translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(226,206,158,.8);
  padding:6px 10px;transition:color .3s}
.hero__cue:hover{color:#F3E7C9}
.hero__cue svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}
/* transform framfor translate — sikrere på inline-SVG */
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
.js .hero__cue svg{animation:bob 2.2s ease-in-out 1.6s infinite;will-change:transform}
.js .hero__cue{animation:rise .9s cubic-bezier(.22,.61,.24,1) 1s both}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.act{display:inline-block;text-decoration:none;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid currentColor;transition:letter-spacing .35s ease}
.act:hover{letter-spacing:.24em}

/* D · sentrert, stille */
.vD .scrim{background:
  linear-gradient(180deg,rgba(14,11,8,.5) 0%,rgba(14,11,8,.2) 36%,rgba(14,11,8,.66) 100%),
  radial-gradient(56% 40% at 50% 50%,rgba(14,11,8,.42),transparent 74%)}
.vD__mid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:clamp(22px,4vh,40px);
  padding:clamp(84px,14vh,150px) var(--pad);pointer-events:none;
  transition:opacity .38s ease .14s,translate .45s cubic-bezier(.22,.61,.24,1) .14s}
.vD__mid > *{pointer-events:auto}
/* heroteksten viker mens menyen er åpen */
body.menu-open .vD__mid{opacity:0;translate:0 -18px;transition-delay:0s;transition-duration:.28s}
.vD .title{font-size:clamp(1.95rem,4.8vw,4.2rem);max-width:17ch}
.vD .tag{color:var(--gold-soft)}
.vD .act{color:var(--gold-soft);border-bottom-color:var(--gold)}
.vD .act:hover{color:#F3E7C9;border-bottom-color:var(--gold-soft)}

/* ── seksjon: fem porter ── */
.porter{background:var(--bg);padding:clamp(34px,5.5vh,66px) var(--pad) clamp(56px,10vh,120px);
  display:flex;flex-direction:column;gap:clamp(18px,3vh,30px);border-top:1px solid var(--hair)}
.porter__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.porter__head .l{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.porter__head .r{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.slats{display:flex;gap:clamp(7px,.9vw,15px);height:min(46vh,440px)}
.slat{flex:1 1 0;min-width:0;position:relative;display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:flex-grow .55s cubic-bezier(.4,0,.2,1)}
.slat:hover,.slat:focus-visible{flex-grow:2.4}
.slat .ph{position:absolute;inset:0;border-radius:999px 999px 0 0;align-items:flex-end;justify-content:center}
/* fast pikselstørrelse på fotoet: porten klipper det bare bredere ut i stedet
   for å skalere om hele bildet på nytt for hver frame under hover */
.slat .ph img{flex:0 0 auto;width:auto;min-width:100%;max-width:none;margin:0 auto}
.slat .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,11,8,.42) 0%,rgba(14,11,8,0) 26%,rgba(14,11,8,.05) 52%,rgba(14,11,8,.78) 100%)}
.slat .n{position:absolute;top:18px;left:50%;translate:-50% 0;font-weight:400;
  font-size:.72rem;letter-spacing:.16em;color:var(--gold-soft);z-index:2}
.slat .d{position:absolute;top:40px;left:0;right:0;padding:0 8px;text-align:center;font-size:.58rem;
  letter-spacing:.13em;text-transform:uppercase;color:#DCD3C2;opacity:0;transition:opacity .4s ease;z-index:2}
.slat:hover .d,.slat:focus-visible .d{opacity:1}
.slat .lab{position:absolute;left:50%;bottom:22px;translate:-50% 0;writing-mode:vertical-rl;rotate:180deg;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;font-size:clamp(1.05rem,1.7vw,1.55rem);
  letter-spacing:-.01em;color:#F6F3EC;white-space:nowrap;pointer-events:none}

@media(max-width:900px){
  .slats{height:min(38vh,340px)}
  .slat .lab{font-size:1.05rem;bottom:16px}
}
@media(max-width:640px){
  .slats{height:min(34vh,300px);gap:5px}
  .slat .lab{font-size:.92rem;bottom:14px}
  .slat .n{font-size:.62rem;top:12px}
  .slat .d{display:none}
}


/* ══════════════════════════════════════════════════════════════════
   PRODUKTKORT (.pk) — prosjektets mest gjenbrukte komponent.
   Brukes på forsiden, i kolleksjoner, i søk og i «relaterte varer».
   I Shopify blir dette snippets/produktkort.liquid, kalt med
   {% render 'produktkort', product: product %}.

   Fast regel: produktflater er ALLTID lyse. Bildene kommer fra Elfo
   som leverandør-JPEG på hvit bakgrunn — mørkt tre bak et produkt gir
   en synlig hvit firkant. Derfor --paper-2 i media, aldri --wood.
   ══════════════════════════════════════════════════════════════════ */
/* .pk er flex-kolonne, og lenka tar den ledige plassen i stedet for
   height:100%. Med height:100% strakte lenka seg over HELE kortet — også
   over «Legg i kurv»-knappen under seg, som dermed lå delvis dekket av et
   annet klikkmål. Lighthouse: «Target has insufficient size because it is
   partially obscured». Kortene står fortsatt i lik høyde, nå fordi
   flex-elementet vokser i stedet for fordi lenka dekker alt. */
.pk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pk__lenke{display:flex;flex-direction:column;flex:1 1 auto;text-decoration:none;color:inherit}

/* ── media ──
   1/1 og contain, aldri cover: katalogen blander stående klokker,
   kvadratiske bunadsspenner og liggende kikkerter i samme rad. Kvadratisk
   er det eneste formatet som behandler alle tre likt — stående 3/4 ga
   store tomme felt over og under en spenne, og ett kort ble over 700 px
   høyt på en 360 px-skjerm. En klokke skal aldri beskjæres.

   Rammen bærer flaten: bakgrunnen er ren hvit for å matche leverandør-
   bildene (se --produktflate), og da er det --line som skiller kortet
   fra papiret rundt.

   Padding er bevisst liten. Leverandørene har allerede lagt inn luft i
   bildene sine; mer padding her er luft rundt luft, og krymper varen. */
.pk__media{position:relative;aspect-ratio:1/1;background:var(--produktflate);
  border:1px solid var(--line);overflow:hidden}
.pk__media img{width:100%;height:100%;object-fit:contain;padding:clamp(4px,1.5%,10px);
  transition:scale .6s cubic-bezier(.22,.61,.24,1)}
.pk__lenke:hover .pk__media img,
.pk__lenke:focus-visible .pk__media img{scale:1.04}
/* hårfin gullramme på hover — gull som dekor, ikke som tekst */
.pk__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;transition:border-color .3s}
.pk__lenke:hover .pk__media::after,
.pk__lenke:focus-visible .pk__media::after{border-color:var(--gold)}

/* ── manglende bilde ──
   Noen varer i Elfo har ingen bildereferanse. Da tegner vi sirkelmotivet
   fra logoen i stedet, så kortet beholder høyden og raden ikke hopper. */
.pk__tom{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px}
.pk__tom i{width:clamp(44px,22%,64px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%}
.pk__tom span{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* ── merkelapp over bildet ── */
.pk__flagg{position:absolute;top:0;left:0;z-index:1;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px}
.pk__flagg--tilbud{background:var(--gold);color:var(--ink)}   /* mørk tekst på gull = AA */
/* Mørk flate med lys tekst, ikke fordi tilstanden er negativ, men fordi den
   må være lesbar på fire ulike bildebakgrunner: hvit, beige, svart og
   fotografert. Se katalog-rapporten. Teksten kommer fra dataene. */
.pk__flagg--lager{background:var(--ink);color:var(--paper-2)}

/* ── tekst ──
   Hver linje har fast minstehøyde. Da står pris og lagerstatus på samme
   linje tvers over raden selv når merke mangler eller navnet går i to. */
.pk__tekst{display:flex;flex-direction:column;gap:6px;padding-top:16px}
/* line-height låst til samme verdi som min-height: uten den blir en tom
   merkelinje 4 px lavere enn en utfylt, og prisene under står i ulik høyde
   tvers over raden. Det merkes: 289 av 422 varer har ikke merke. */
.pk__merke{display:block;min-height:1.15em;line-height:1.15;
  font-size:.63rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.pk__navn{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:.98rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink);
  min-height:calc(2 * 1.35em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk__lenke:hover .pk__navn{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px}
.pk__pris{display:flex;align-items:baseline;gap:10px;margin-top:2px;
  font-size:.94rem;color:var(--ink);font-variant-numeric:tabular-nums}
.pk__pris s{font-size:.82rem;color:var(--ink-2);text-decoration-thickness:1px}
/* tilbudsprisen markeres med vekt, ikke med gull — gulltekst på papir stryker AA.
   Signalfargen ligger i «Tilbud»-flagget, der gull er bakgrunn med mørk tekst. */
.pk__pris--tilbud b{font-weight:500}
.pk__pris b{font-weight:400}
 /* ── lagerstatus ──
   Det er ingen regel her, og det er med vilje. Lagerstatus merkes ett sted:
   .pk__flagg over bildet. Vi hadde en .pk__lager-linje under prisen som
   gjentok «Utsolgt» — i et rutenett skannes bildene, ikke teksten, så
   flagget treffer der blikket er, og to markeringer av samme faktum leser
   som en feil. Linja er fjernet, ikke skjult: den var siste element i
   kortet, så ingenting kommer i utakt av at den er borte. */

/* ══════════════════════════════════════════════════════════════════
   SEKSJON: utvalgte produkter (.utvalg)
   Selvstendig — egen markup, egne klasser, eget script. Kan slettes.
   ══════════════════════════════════════════════════════════════════ */
.utvalg{background:var(--bg);padding:clamp(56px,9vh,104px) var(--pad)}
.utvalg__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:16px 24px;padding-bottom:clamp(26px,3.6vh,40px);border-bottom:1px solid var(--line)}
.utvalg__head h2{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
/* Etiketten er underordnet overskriften på størrelse (11 px mot ~26–37 px),
   vekt og sperring — ikke på lyshet. Rangering med lyshet forsvinner i utskrift
   og for svaksynte; rangering med form holder overalt. */
.utvalg__head .tag{display:block;margin-bottom:12px;font-size:.69rem;font-weight:600;
  letter-spacing:.2em;color:var(--ink-2)}
.utvalg__head .act{color:var(--ink-2);border-bottom-color:var(--gold)}
.utvalg__head .act:hover{color:var(--ink)}
.utvalg__rad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,2.4vw,38px) clamp(16px,1.8vw,28px);
  list-style:none;margin:clamp(30px,4.4vh,48px) 0 0;padding:0}
@media(max-width:1000px){.utvalg__rad{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .utvalg__rad{grid-template-columns:minmax(0,1fr);gap:34px}
  .utvalg__head{align-items:flex-start;flex-direction:column}
}
/* ── skjelettkort ──
   Seksjonen fylles fra fetch, altså etter første maling. Uten reservert plass
   hopper alt under når varene lander (dårlig CLS). Skjelettene har nøyaktig
   samme mål som ekte kort, så raden står stille.
   MERK: dette er en ren prototyp-krykke. I Shopify renderer Liquid produktene
   på serveren og markupen er ferdig ved første byte — da kan hele .pk--skjelett
   slettes. Ikke bruk tid på å finpusse lastesekvensen her. */
.pk--skjelett .pk__media{border-color:var(--line)}
.pk--skjelett .pk__strek{display:block;height:.72em;margin-top:8px;background:var(--line)}
.pk--skjelett .pk__strek:first-child{width:38%;height:.63em}
.pk--skjelett .pk__strek:nth-child(2){width:82%;height:.98em;margin-top:14px}
.pk--skjelett .pk__strek:nth-child(3){width:30%}
@media(prefers-reduced-motion:no-preference){
  .pk--skjelett .pk__media,.pk--skjelett .pk__strek{animation:puls 1.6s ease-in-out infinite}
}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.45}}

/* vises bare hvis products.json ikke lot seg hente */
.utvalg__feil{margin:32px 0 0;font-size:.86rem;color:var(--ink-2)}

/* rolig innfading, samme språk som porter-seksjonen */
/* ── innfading: skjuling styres av seksjonen selv, ikke av .js ──
   Innholdet er SYNLIG som standard. Seksjonens eget script legger på
   .anim rett før det setter opp observatøren, og det er .anim som skjuler.

   Snudd med vilje. Tidligere hang skjulingen på .js, som settes helt øverst
   i <body> — da holdt det at seksjonsskriptet feilet ETTER det punktet for
   at innholdet ble stående usynlig for godt. Facebooks innebygde nettleser
   er der de fleste kundene kommer fra, og den er det mest upålitelige
   JS-miljøet på nett. Verste utfall skal være at animasjonen uteblir,
   ikke at butikken ser tom ut.

   Ikke bytt .anim tilbake til .js. */
.utvalg.anim .pk{opacity:0}
.utvalg.anim.in .pk{animation:rise .8s cubic-bezier(.22,.61,.24,1) both}
.utvalg.anim.in .pk:nth-child(1){animation-delay:.04s}
.utvalg.anim.in .pk:nth-child(2){animation-delay:.10s}
.utvalg.anim.in .pk:nth-child(3){animation-delay:.16s}
.utvalg.anim.in .pk:nth-child(4){animation-delay:.22s}
.utvalg.anim.in .pk:nth-child(n+5){animation-delay:.28s}
@media(prefers-reduced-motion:reduce){
  .utvalg.anim .pk{opacity:1;animation:none}
  .pk__media img,.pk__lenke:hover .pk__media img{transition:none;scale:1}
}


/* ══════════════════════════════════════════════════════════════════
   SEKSJON: urverkstedet -> sections/verksted.liquid

   Mørk seksjon. Her — og bare her, sammen med hero, historie og footer —
   ligger gullet fritt: mot --wood har --gold-soft ca. 8:1, så det kan
   brukes til etiketter og småtekst, ikke bare til streker.
   Ingen produktbilder i denne seksjonen, så det mørke er trygt.
   ══════════════════════════════════════════════════════════════════ */
.vsted{background:var(--wood);color:var(--wood-ink)}
.vsted__inn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}

.vsted__bilde{position:relative;min-height:clamp(320px,54vh,620px);overflow:hidden;
  background:var(--wood-2)}
.vsted__bilde img{width:100%;height:100%;object-fit:cover}
/* svak fortoning inn mot teksten så kanten ikke blir en hard strek */
.vsted__bilde::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(51,46,40,.32) 0%,rgba(51,46,40,0) 34%,rgba(51,46,40,.5) 100%)}

.vsted__tekst{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3vh,30px);
  padding:clamp(44px,6vw,84px) clamp(26px,4.4vw,72px)}
.vsted__tekst .tag{color:var(--gold-soft)}          /* gull er tillatt: mørk bunn */
.vsted__tekst h2{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.025em;line-height:1.1;max-width:16ch}
.vsted__tekst p{font-size:.95rem;line-height:1.65;color:var(--wood-ink-2);max-width:44ch}

/* ── tre steg ──
   Tallene i gull, teksten i lys. Hårfin strek mellom stegene — samme
   språk som resten av siden, ingen bokser. */
.vsted__steg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.vsted__steg li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;
  padding:16px 0;border-top:1px solid var(--wood-line)}
.vsted__steg li:last-child{border-bottom:1px solid var(--wood-line)}
.vsted__steg .n{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.72rem;
  letter-spacing:.14em;color:var(--gold);padding-top:.15em;font-variant-numeric:tabular-nums}
.vsted__steg b{font-weight:500;font-size:.95rem;color:var(--wood-ink)}
/* :not(.n) er poenget — nummeret er også et <span>, og uten dette ble det
   dyttet i kolonne 2 slik at tittelen falt ned i nummerets plass. */
.vsted__steg span:not(.n){grid-column:2;font-size:.86rem;line-height:1.55;color:var(--wood-ink-2);
  margin-top:3px}

/* knappen: ett fylt element i seksjonen, aldri to */
.vsted__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,2.4vw,30px)}
.vsted__act .act{color:var(--gold-soft);border-bottom-color:var(--gold)}
.vsted__act .act:hover{color:#F3E7C9}

@media(max-width:860px){
  .vsted__inn{grid-template-columns:minmax(0,1fr)}
  .vsted__bilde{min-height:clamp(240px,38vh,340px);order:-1}
}


/* ══════════════════════════════════════════════════════════════════
   SIDE: /verksted -> templates/page.verksted.liquid
   Bygget av tre seksjoner som kan flyttes hver for seg:
   .vside__topp (mørk intro) · .vside__hva (lys) · .vside__post (lys)
   · .skjema (lys). Skjemaet er lyst med vilje — mørke felt leses som
   deaktiverte, og feilmeldinger må ha full kontrast.
   ══════════════════════════════════════════════════════════════════ */
.vside__topp{background:var(--wood);color:var(--wood-ink);
  padding:clamp(48px,8vh,96px) var(--pad) clamp(44px,7vh,84px)}
.vside__topp .tag{color:var(--gold-soft)}
.vside__topp h1{margin:14px 0 0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:-.03em;line-height:1.06;max-width:15ch}
.vside__topp p{margin:clamp(18px,2.6vh,26px) 0 0;font-size:1rem;line-height:1.65;
  color:var(--wood-ink-2);max-width:52ch}

.vside{background:var(--bg);padding:clamp(52px,8vh,96px) var(--pad)}
.vside + .vside{padding-top:0}
.vside__hode{padding-bottom:clamp(24px,3.4vh,36px);border-bottom:1px solid var(--line)}
.vside__hode .tag{display:block;margin-bottom:12px;font-size:.69rem;font-weight:600;
  letter-spacing:.2em;color:var(--ink-2)}
.vside__hode h2{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.4rem,3vw,2.1rem);letter-spacing:-.025em;line-height:1.1;color:var(--ink)}

/* ── hva vi reparerer ── */
.vside__liste{list-style:none;margin:clamp(28px,4vh,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.vside__liste li{border-top:1px solid var(--line);padding-top:18px}
.vside__liste b{display:block;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:1.05rem;letter-spacing:-.015em;color:var(--ink);margin-bottom:8px}
.vside__liste p{font-size:.88rem;line-height:1.6;color:var(--ink-2)}
@media(max-width:820px){.vside__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.vside__liste{grid-template-columns:minmax(0,1fr);gap:24px}}

/* ── slik sender du i posten ── */
.vside__post{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);margin-top:clamp(28px,4vh,42px);align-items:start}
.vside__post ol{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:14px}
.vside__post li{font-size:.94rem;line-height:1.6;color:var(--ink-2);padding-left:.3em}
.vside__post li b{font-weight:500;color:var(--ink)}
.vside__adresse{background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(22px,2.6vw,32px);font-size:.94rem;line-height:1.7;color:var(--ink-2)}
.vside__adresse strong{display:block;font-weight:500;color:var(--ink);margin-bottom:6px}
.vside__adresse .tag{display:block;margin-bottom:14px;font-size:.63rem;font-weight:600;
  letter-spacing:.2em;color:var(--ink-2)}
@media(max-width:760px){.vside__post{grid-template-columns:minmax(0,1fr)}}

/* ══════════════════════════════════════════════════════════════════
   SKJEMA (.skjema) -> snippets/innmeldingsskjema.liquid
   Én kolonne på mobil, to der det er plass. Feilmeldinger står under
   feltet de gjelder, i --ink-2 med en gullstrek i kanten som markør —
   gull som dekor, aldri som meldingstekst.
   ══════════════════════════════════════════════════════════════════ */
.skjema{margin-top:clamp(30px,4.4vh,46px);max-width:820px}
.skjema__rad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px)}
@media(max-width:640px){.skjema__rad{grid-template-columns:minmax(0,1fr)}}
.felt{display:flex;flex-direction:column;gap:7px;margin-bottom:clamp(18px,2.2vw,26px)}
.felt > label,.felt legend{font-size:.69rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2);padding:0}
.felt .valgfritt{font-weight:400;letter-spacing:.1em;text-transform:none;color:var(--ink-2)}
.felt input,.felt textarea{width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:0;
  padding:13px 14px;transition:border-color .2s}
.felt textarea{min-height:130px;resize:vertical;line-height:1.55}
.felt input:hover,.felt textarea:hover{border-color:var(--muted)}
.felt input:focus,.felt textarea:focus{outline:none;border-color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px var(--gold-deep)}
.felt input::placeholder,.felt textarea::placeholder{color:var(--ink-2);opacity:1}

/* radiogruppe: leveres i butikk eller sendes */
.felt fieldset{margin:0;padding:0;border:0}
.valg{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.valg label{flex:1 1 220px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--line);padding:14px 16px;
  font-size:.92rem;line-height:1.5;color:var(--ink-2);transition:border-color .2s}
.valg label:hover{border-color:var(--muted)}
.valg input{flex:0 0 auto;margin:.25em 0 0;accent-color:var(--gold-deep);width:16px;height:16px}
.valg input:checked + span{color:var(--ink)}
.valg label:has(input:checked){border-color:var(--gold-deep)}
.valg b{display:block;font-weight:500;color:var(--ink)}

/* ── feil ──
   Vises bare når vi selv har validert. novalidate slår av nettleserens
   egne bobler, så meldingene er våre, på norsk, og står igjen på skjermen. */
.felt--feil input,.felt--feil textarea{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.felt--feil .valg label{border-color:var(--ink)}
.feil{display:none;font-size:.84rem;line-height:1.5;color:var(--ink-2);
  border-left:2px solid var(--gold);padding-left:10px}
.felt--feil .feil{display:block}

/* oppsummering øverst når noe mangler — den som bruker skjermleser
   får hele lista med én gang, i stedet for å lete seg gjennom feltene */
.skjema__feil{display:none;margin-bottom:clamp(22px,3vh,32px);
  background:var(--paper-2);border:1px solid var(--line);border-left:2px solid var(--gold);
  padding:18px 20px}
.skjema__feil.vis{display:block}
.skjema__feil b{display:block;font-weight:500;font-size:.94rem;color:var(--ink);margin-bottom:8px}
.skjema__feil ul{margin:0;padding-left:1.2em;font-size:.88rem;line-height:1.65}
.skjema__feil a{color:var(--ink-2)}

.skjema__bunn{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  padding-top:clamp(10px,1.6vh,18px)}
.skjema__bunn .solid{background:var(--ink);color:var(--paper-2);border:0;cursor:pointer;
  font-family:inherit}
.skjema__bunn .solid:hover{background:var(--gold-deep);color:var(--paper-2)}
.skjema__bunn .solid[disabled]{opacity:.5;cursor:default}
.skjema__bunn small{font-size:.82rem;line-height:1.55;color:var(--ink-2);max-width:38ch}

/* kvittering etter innsending */
.skjema__kvittering{display:none;background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px)}
.skjema__kvittering.vis{display:block}
.skjema__kvittering h3{margin:0 0 10px;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}
.skjema__kvittering p{font-size:.94rem;line-height:1.65;color:var(--ink-2);max-width:48ch}
.skjema[hidden]{display:none}


/* ══════════════════════════════════════════════════════════════════
   SEKSJON: bunadssølv (.solv) -> sections/bunadssolv.liquid

   Redaksjonell, ikke kommersiell: ett bilde i full bredde med tekst
   over, ingen produktkort. Dette er den ene varegruppa butikken ikke
   konkurrerer med Oslo om, og den skal ikke se ut som alt annet.

   Mørk flate av to grunner: sølv leses best mot mørkt, og seksjonen
   ligger mellom porter og utvalgte varer — to lyse flater — så den
   fungerer som pusterom. Ingen produktbilder her, så det mørke er trygt.
   ══════════════════════════════════════════════════════════════════ */
.solv{position:relative;overflow:hidden;background:var(--wood);color:var(--wood-ink);
  display:flex;align-items:flex-end;min-height:clamp(440px,72vh,760px)}
.solv__bg{position:absolute;inset:0}
.solv__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* to lag: en mørk bunn under teksten, og en samlet demping så sølvet
   beholder glansen uten at teksten mister kontrast */
.solv__scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(0deg,rgba(26,22,18,.9) 0%,rgba(26,22,18,.62) 38%,rgba(26,22,18,.18) 72%),
    radial-gradient(70% 55% at 30% 70%,rgba(26,22,18,.5),transparent 76%)}
.solv__inn{position:relative;z-index:2;width:100%;max-width:760px;
  padding:clamp(52px,9vh,104px) var(--pad) clamp(38px,6vh,72px)}
.solv__inn .tag{display:block;font-size:.69rem;font-weight:600;letter-spacing:.2em;
  color:var(--gold-soft)}                       /* gull er tillatt: mørk bunn */
.solv__inn h2{margin:14px 0 0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:clamp(1.7rem,4.2vw,2.9rem);letter-spacing:-.028em;
  line-height:1.08;max-width:16ch}
.solv__inn p{margin:clamp(16px,2.4vh,24px) 0 0;font-size:.98rem;line-height:1.65;
  color:var(--wood-ink-2);max-width:46ch}

/* ── pill-lenkene ──
   Gruppert med en liten etikett foran hver akse, så det leses som to
   måter å finne fram på og ikke som én lang rad med tilfeldige ord. */
.solv__grupper{margin-top:clamp(26px,4vh,40px);display:flex;flex-direction:column;
  gap:clamp(16px,2.4vh,22px)}
.solv__gruppe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.solv__gruppe > .merkelapp{flex:0 0 auto;min-width:82px;font-size:.63rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--wood-ink-2)}
.pill{display:inline-flex;align-items:center;text-decoration:none;
  border:1px solid var(--gold);border-radius:999px;
  padding:9px 18px;font-size:.85rem;color:var(--wood-ink);
  transition:background-color .25s,color .25s,border-color .25s}
.pill:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}

@media(max-width:640px){
  .solv{min-height:clamp(380px,64vh,560px)}
  .solv__gruppe > .merkelapp{min-width:100%}
}
@media(prefers-reduced-motion:reduce){.pill{transition:none}}


/* ══════════════════════════════════════════════════════════════════
   SEKSJON: historien (.hist) -> sections/historie.liquid

   Sidens eneste seksjon uten bilder, streker eller bevegelse. Årstallene
   i display-fonten gjør hele jobben; resten er luft. Ligger lyst mellom
   to mørke seksjoner, så den trenger ingen egen ramme for å skille seg ut.

   Ingen JS. Ingen animasjon — heller ikke innfading. Et pusterom som
   beveger seg er ikke et pusterom.
   ══════════════════════════════════════════════════════════════════ */
.hist{background:var(--bg);padding:clamp(78px,15vh,168px) var(--pad)}
.hist__liste{list-style:none;margin:0 auto;padding:0;max-width:1080px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(40px,6vw,84px)}
/* tabular-nums: sifrene får lik bredde, så 1956 og 1998 står i flukt */
.hist__aar{display:block;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:clamp(3.1rem,7.2vw,5.4rem);letter-spacing:-.045em;
  line-height:.92;color:var(--ink);font-variant-numeric:tabular-nums}
.hist__liste p{margin:clamp(16px,2.2vh,22px) 0 0;font-size:.95rem;line-height:1.6;
  color:var(--ink-2);max-width:24ch}


@media(max-width:820px){
  .hist__liste{grid-template-columns:minmax(0,1fr);gap:clamp(36px,7vh,54px)}
  .hist__liste p{max-width:32ch}
}


/* ══════════════════════════════════════════════════════════════════
   SEKSJON: nyhetsbrev (.nyhet) -> sections/nyhetsbrev.liquid

   Mørk flate. Ligger mellom bunadssølv og historien, og er den som gir
   historieseksjonen mørkt på begge sider. Ingen produktbilder her.

   Feltet er lyst innvendig og ikke gjennomsiktig: et mørkt skrivefelt
   leses som deaktivert. Teksten i feltet må dessuten ha full kontrast
   mens man skriver, og det er lettere å garantere mot en kjent lys bunn.
   ══════════════════════════════════════════════════════════════════ */
.nyhet{background:var(--wood);color:var(--wood-ink);
  padding:clamp(56px,10vh,110px) var(--pad);text-align:center}
.nyhet__inn{max-width:540px;margin:0 auto}
.nyhet .tag{display:block;font-size:.69rem;font-weight:600;letter-spacing:.2em;
  color:var(--gold-soft)}
.nyhet h2{margin:14px 0 0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:clamp(1.5rem,3.4vw,2.2rem);letter-spacing:-.025em;
  line-height:1.12}
.nyhet__om{margin:clamp(14px,2vh,20px) 0 0;font-size:.94rem;line-height:1.6;
  color:var(--wood-ink-2)}

/* ── feltet ── */
.nyhet__form{margin-top:clamp(24px,3.4vh,34px)}
.nyhet__rad{display:flex;gap:10px;align-items:stretch}
.nyhet__rad input{flex:1;min-width:0;font-family:inherit;font-size:.98rem;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--gold-deep);
  border-radius:0;padding:14px 16px}
/* --ink-2, ikke --muted: plassholdertekst er tekst, og --muted er 3,5:1
   mot feltets lyse bunn. Litt kraftigere enn en plassholder «pleier» å
   være, men den er til for å leses. */
.nyhet__rad input::placeholder{color:var(--ink-2);opacity:1}
.nyhet__rad input:hover{border-color:var(--gold)}
.nyhet__rad .solid{flex:0 0 auto;border:0;cursor:pointer;font-family:inherit}
@media(max-width:520px){
  .nyhet__rad{flex-direction:column}
  .nyhet__rad .solid{justify-content:center;padding:15px 24px}
}

/* feilmelding: venstrestilt selv om seksjonen er sentrert — en feilmelding
   som er sentrert er tyngre å lese enn en som starter der teksten starter */
.nyhet__feil{display:none;margin:14px 0 0;text-align:left;font-size:.86rem;
  line-height:1.5;color:var(--wood-ink);border-left:2px solid var(--gold);
  padding-left:10px}
.nyhet__form.feil .nyhet__feil{display:block}
.nyhet__form.feil .nyhet__rad input{border-color:var(--wood-ink);
  box-shadow:inset 0 0 0 1px var(--wood-ink)}

/* ── liten skrift under ── */
.nyhet__vilkaar{margin:clamp(16px,2.2vh,22px) 0 0;font-size:.82rem;line-height:1.55;
  color:var(--wood-ink-2)}
.nyhet__vilkaar a{color:var(--gold-soft);text-decoration:none;
  border-bottom:1px solid rgba(226,206,158,.4);transition:border-color .25s}
.nyhet__vilkaar a:hover{border-bottom-color:var(--gold-soft)}

/* ── kvittering ── */
.nyhet__takk{display:none;font-size:.98rem;line-height:1.65;color:var(--wood-ink);
  margin-top:clamp(24px,3.4vh,34px)}
.nyhet__takk.vis{display:block}
.nyhet__form[hidden]{display:none}

/* ── mobil: heroen ──
   Alt her gjelder bare smal skjerm; desktop står urørt.

   Et bredt bilde som skal dekke en høy, smal skjerm blir uunngåelig zoomet:
   jo høyere boksen er, jo smalere skive av bildet får plass. Heroen skal
   dekke hele skjermen, så utsnittet kan bare styres fra bildesiden.
   Bildet er derfor forankret i bunnen med litt overhøyde — 107 % er det
   minste som skyver den svarte veggen ut over toppkanten uten å zoome
   mer enn nødvendig — og skjøvet sidelengs så Sveinung står midt i ramma. */
@media(max-width:640px){
  .hero__bg{overflow:hidden}
  .hero__bg img{position:absolute;left:0;bottom:0;height:107%;object-position:12% 100%}
  /* Teksten ned i venstre hjørne: ansiktet hans blir liggende fritt, teksten
     lander på den mørkeste delen av bildet, og venstrekanten følger samme
     linje som logoen i topplinja. */
  .vD__mid{align-items:flex-start;text-align:left;justify-content:flex-end;
    padding-left:clamp(16px,4vw,26px);padding-right:clamp(16px,4vw,26px);
    padding-bottom:clamp(46px,8vh,76px)}
  .vD__act{justify-content:flex-start}
  .vD .title{max-width:15ch}
  /* rullehintet er overflødig på mobil — der er scrolling opplagt */
  .hero__cue{display:none}
}

/* ── mobil: topplinja ──
   Bare ikonene. Ordene «Søk», «Meny» og «Kurv» er det ikonet allerede sier,
   og det var de som tvang linja til å brekke i to under ~420 px. Knappene
   har fått aria-label, så skjermlesere hører navnet selv om teksten er borte.
   Logo og ikonstørrelser står som på desktop — plassen holder nå. */
@media(max-width:640px){
  .topp__inn,.topp--over .topp__inn{flex-wrap:nowrap;padding:20px clamp(16px,4vw,26px)}
  .topp__nav{flex-wrap:nowrap;gap:clamp(15px,4.5vw,24px)}
  .menu-btn > span,.topp__kurv .ord{display:none}
  .menu-btn{gap:0}
  .topp__kurv{gap:7px;padding-left:clamp(12px,3.5vw,20px)}
}

/* ══ kartvindu ══ */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(14,11,8,.66);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:110;top:50%;left:50%;translate:-50% -50%;
  width:min(880px,92vw);max-height:88vh;background:#211E19;color:#DCD5C8;
  border:1px solid #5C4F35;display:flex;flex-direction:column;
  opacity:0;scale:.97;pointer-events:none;transition:opacity .35s ease,scale .35s cubic-bezier(.22,.61,.24,1)}
.modal.open{opacity:1;scale:1;pointer-events:auto}
.modal__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:clamp(18px,2.4vw,26px) clamp(20px,3vw,32px);border-bottom:1px solid #3E372F}
.modal__top strong{display:block;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-size:1.05rem;font-weight:500;letter-spacing:-.015em;color:#F2EEE7}
.modal__top span{font-size:.78rem;color:#8E8578}
.modal__x{background:none;border:0;cursor:pointer;color:var(--gold-soft);padding:8px;margin:-8px;display:inline-flex}
.modal__x svg{width:20px;height:20px}
.modal__map{position:relative;aspect-ratio:16/10;background:#2A2620}
.modal__map .maplibregl-canvas{outline:none}
.modal__map .maplibregl-ctrl-attrib{font-size:10px;background:rgba(244,242,236,.82)}
.kart-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;text-align:center;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-size:1.1rem;color:#DCD5C8}
.kart-fallback span{font-family:"Schibsted Grotesk",sans-serif;font-size:.8rem;color:#8E8578}
.kart-pin{width:38px;height:38px;background:var(--fil-pin) center/contain no-repeat;
  filter:drop-shadow(0 1px 1px rgba(241,239,233,.9)) drop-shadow(0 2px 6px rgba(60,50,30,.35));
  cursor:pointer}
/* infosiden: statisk kartbilde som lenker til Google Maps (kun:infoside) */
.modal__map--bilde{display:block}
.modal__map--bilde img{display:block;width:100%;height:100%;object-fit:cover}
.modal__kilde{position:absolute;right:0;bottom:0;padding:3px 7px;font-size:10px;line-height:1.3;
  color:#55504A;background:rgba(244,242,236,.86)}
.modal__foot{padding:14px clamp(20px,3vw,32px);border-top:1px solid #3E372F;
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:space-between}
.modal__foot a{color:var(--gold-soft);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.modal__foot a:hover{color:#F3E7C9}
.modal__foot small{font-size:.76rem;color:#8E8578}

/* ══ søk ══ */
.sok-back{position:fixed;inset:0;z-index:70;background:rgba(20,16,11,.42);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.sok-back.open{opacity:1;pointer-events:auto}
.sok{position:fixed;top:0;left:0;right:0;z-index:75;background:var(--paper-2);
  border-bottom:1px solid var(--line);box-shadow:0 24px 60px rgba(30,24,16,.14);
  translate:0 -100%;transition:translate .45s cubic-bezier(.22,.61,.24,1)}
.sok.open{translate:0 0}
.sok__inner{max-width:1180px;margin:0 auto;padding:clamp(22px,3.4vw,40px) var(--pad) clamp(20px,3vw,32px)}
.sok__form{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--gold);padding-bottom:14px}
.sok__form > svg{width:22px;height:22px;color:var(--gold-deep);flex:0 0 auto}
.sok__form input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--ink);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:clamp(1.2rem,2.6vw,2rem);
  letter-spacing:-.02em;padding:4px 0}
.sok__form input::placeholder{color:var(--ink-2)}
.sok__form input::-webkit-search-cancel-button{-webkit-appearance:none}
.sok__x{background:none;border:0;cursor:pointer;color:var(--ink-2);padding:8px;margin:-8px;
  display:inline-flex;transition:color .25s}
.sok__x:hover{color:var(--gold-deep)}
.sok__x svg{width:20px;height:20px}
.sok__tips{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.sok__tips span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-right:6px}
.sok__tips a{text-decoration:none;font-size:.82rem;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;transition:border-color .25s,color .25s}
.sok__tips a:hover{border-color:var(--gold);color:var(--ink)}

/* ══ meny-skuff ══ */
.drawer-back{position:fixed;inset:0;z-index:80;background:rgba(20,16,11,.42);
  opacity:0;pointer-events:none;transition:opacity .4s ease}
.drawer-back.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:clamp(430px,55vw,900px);
  background:var(--paper-2);color:var(--ink);overflow:hidden;
  translate:100% 0;transition:translate .45s cubic-bezier(.22,.61,.24,1);
  border-left:1px solid var(--line);box-shadow:-30px 0 70px rgba(30,24,16,.16);
  padding:clamp(20px,3.2vh,42px) clamp(24px,4vw,56px) clamp(20px,3vh,38px);
  display:flex;flex-direction:column;gap:clamp(16px,2.8vh,40px)}
.drawer.open{translate:0 0}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.drawer__top .logo{height:clamp(26px,3.4vh,38px);background:var(--gold-deep)}
.drawer__x{background:none;border:0;cursor:pointer;color:var(--ink-2);padding:10px;margin:-10px;
  display:inline-flex;transition:color .25s}
.drawer__x:hover{color:var(--gold-deep)}
.drawer__x svg{width:22px;height:22px}
.drawer__cols{min-height:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(26px,4.5vw,80px);align-items:start}
.drawer__cols > div + div{display:flex;flex-direction:column;gap:clamp(24px,4vh,38px)}
.drawer h2{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.62rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(6px,1vh,12px)}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{border-bottom:1px solid var(--line)}
.drawer li:first-child{border-top:1px solid var(--line)}
.drawer li a{display:flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:clamp(1.05rem,1.6vw,1.75rem);
  letter-spacing:-.02em;padding:clamp(7px,1.5vh,15px) 0;transition:color .25s,padding-left .3s ease}
.drawer li a:hover,.drawer li a:focus-visible{color:var(--gold-deep);padding-left:10px}
.drawer li em{font-style:normal;font-size:.66rem;letter-spacing:.14em;color:var(--ink-2);
  font-family:"Schibsted Grotesk",sans-serif;margin-left:auto;text-transform:uppercase}
.drawer__foot{margin-top:auto;padding-top:clamp(12px,2vh,22px);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 30px}
.drawer__foot p{font-size:.8rem;line-height:1.55;color:var(--ink-2)}
.drawer__foot strong{display:block;color:var(--ink);font-weight:500}
.drawer__soc{display:flex;gap:20px}
.drawer__soc a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.drawer__soc a:hover{border-bottom-color:var(--gold)}
/* listene glir opp etter tur når skuffen åpnes */
.js .drawer h2,.js .drawer li{opacity:0;translate:0 16px}
.js .drawer.open h2,.js .drawer.open li{opacity:1;translate:0 0;
  transition:opacity .5s ease,translate .55s cubic-bezier(.22,.61,.24,1);
  transition-delay:calc(var(--i,0) * 45ms + 120ms)}
@media(prefers-reduced-motion:reduce){.js .drawer h2,.js .drawer li{opacity:1;translate:none}}
body.locked{overflow:hidden}
@media(max-width:760px){
  .drawer{width:100%}
  /* Én kolonne gjør listene høyere enn skjermen. Skuffen har overflow:hidden,
     så uten et eget rullefelt legger bunnteksten seg oppå lenkene. Toppen og
     bunnen står i ro; bare listene ruller. */
  .drawer__cols{grid-template-columns:1fr;gap:22px;
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .drawer li a{font-size:1.02rem;padding:10px 0}
  .drawer h2{margin-bottom:6px}
}

/* ══ footer ══ */
.foot{--fb:#211E19;--ff:#DCD5C8;--fd:#8E8578;--fl:#3E372F;
  background:var(--fb);color:var(--ff);padding:clamp(48px,8vh,90px) var(--pad) clamp(26px,4vh,40px)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(4,minmax(0,.82fr));
  gap:clamp(28px,4vw,60px);padding-bottom:clamp(34px,5vh,54px);border-bottom:1px solid var(--fl)}
.foot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.foot .logo{height:clamp(28px,3vw,38px)}
.foot__brand p{font-size:.86rem;line-height:1.6;color:var(--fd);max-width:30ch}
.foot h2{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.foot a{text-decoration:none;font-size:.88rem;color:var(--ff);
  border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.foot a:hover{color:var(--gold-soft);border-bottom-color:var(--gold)}
.foot__hours{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.86rem;color:var(--fd)}
.foot__hours b{font-weight:400;color:var(--ff);text-align:right;font-variant-numeric:tabular-nums}
.foot__addr{font-size:.88rem;line-height:1.65;color:var(--fd);margin-bottom:18px}
.foot__addr strong{display:block;font-weight:500;color:var(--ff)}
.foot__merker{padding:clamp(22px,3.4vh,34px) 0;border-bottom:1px solid var(--fl);
  display:flex;flex-wrap:wrap;justify-content:space-evenly;align-items:baseline;
  gap:12px clamp(14px,1.8vw,24px);text-align:center}
.foot__merker span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fd)}
.foot__bunn{padding-top:clamp(18px,2.6vh,26px);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:14px 24px;font-size:.72rem;color:var(--fd)}
/* betalingsmerkene tegnes som maske, som logoen — da blir de gull i stedet
   for å dra inn Vipps-oransje og Klarna-rosa i paletten */
.foot__betal{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px)}
.foot__betal span{letter-spacing:.14em;text-transform:uppercase;color:var(--fd)}
.foot__mark{display:block;background:var(--gold-soft);opacity:.9;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* ulik høyde med vilje: x-høyden er 0.698 av boksen i vipps-merket mot 0.648
   i klarna, så klarna må være ~8 % høyere for å se like stor ut */
.foot__mark--vipps{height:13px;aspect-ratio:431.8428/110.1949;
  -webkit-mask-image:var(--fil-vipps);mask-image:var(--fil-vipps)}
.foot__mark--klarna{height:14px;aspect-ratio:2880/705;
  -webkit-mask-image:var(--fil-klarna);mask-image:var(--fil-klarna)}

@media(max-width:900px){
  .foot__top{grid-template-columns:1fr 1fr;gap:30px}
  .foot__brand{grid-column:1/-1}
}
@media(max-width:560px){
  /* ett spor per lenkeliste ville gitt seks stablede blokker og en footer
     som tar over halve rullehøyden — listene er korte nok til to kolonner */
  /* tre korte lenkelister ved siden av hverandre, og «Besøk oss» på egen
     rad under — åpningstidene trenger full bredde for ikke å brekke stygt */
  .foot__top{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 12px;padding-bottom:26px}
  .foot__top > div:last-child{grid-column:1/-1}
  .foot a{font-size:.79rem}
  .foot h2{font-size:.6rem;letter-spacing:.16em;margin-bottom:12px}
  .foot{padding-top:clamp(34px,6vh,52px)}
  .foot__brand{gap:14px}
  .foot__brand p{font-size:.82rem}
  .foot ul{gap:7px}
  /* Merkelista sto tidligere på display:none her. Kundene kommer fra
     Facebook og Instagram på telefon, så det skjulte den for hovedpublikummet.
     Ti korte ord som brekker over noen linjer nederst i footeren er et rolig
     tillitssignal, ikke et problem. */
  .foot__merker{padding:20px 0;gap:8px 16px}
  .foot__merker span{font-size:.66rem}
  .foot__bunn{gap:10px 18px}
}

/* ══ bevegelse ══
   Alt som skjules i utgangspunktet er scopet til .js, så innholdet står
   synlig om skriptet ikke kjører. */
@keyframes rise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes settle{from{scale:1.07}to{scale:1}}

.js .hero__bg img{animation:settle 2.2s cubic-bezier(.22,.61,.24,1) both}
.js .topp--over,
.js .vD__mid > *{animation:rise .9s cubic-bezier(.22,.61,.24,1) both}
.js .topp--over{animation-delay:.15s}
.js .vD__mid > :nth-child(1){animation-delay:.35s}
.js .vD__mid > :nth-child(2){animation-delay:.45s}
.js .vD__mid > :nth-child(3){animation-delay:.58s}

/* portene reiser seg etter tur når seksjonen kommer til syne */
.porter.anim .porter__head{opacity:0;translate:0 14px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,.61,.24,1)}
/* innglidningen kjøres som animation, ikke transition: da blir .slat sin
   transition-delay aldri liggende igjen og bremse flex-grow på hover */
.porter.anim .slat{opacity:0}
.porter.anim.in .porter__head{opacity:1;translate:0 0}
.porter.anim.in .slat{animation:rise .8s cubic-bezier(.22,.61,.24,1) both}
.porter.anim.in .slat:nth-child(1){animation-delay:.06s}
.porter.anim.in .slat:nth-child(2){animation-delay:.14s}
.porter.anim.in .slat:nth-child(3){animation-delay:.22s}
.porter.anim.in .slat:nth-child(4){animation-delay:.30s}
.porter.anim.in .slat:nth-child(5){animation-delay:.38s}

@media(prefers-reduced-motion:reduce){
  /* Også animation-delay: uten den står elementer med «both» og en halv
     sekunds forsinkelse fortsatt på opacity:0 i den forsinkelsen, selv om
     selve animasjonen er kuttet til null. Resultatet er et blink av tomhet
     for nettopp de brukerne som ba om mindre bevegelse. */
  *,*::before,*::after{transition-duration:.001ms!important;
    animation-duration:.001ms!important;animation-delay:.001ms!important}
  .porter.anim .porter__head,.porter.anim .slat{opacity:1;translate:none}
  .porter.anim.in .slat{animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   KOLLEKSJONSSIDE (.koll) — én mal for alle varegrupper.
   I Shopify: sections/main-collection.liquid.

   Filterpanelet er ETT element i to former: sidefelt over 900 px, skuff
   under. Ikke to paneler som skjules for hverandre — da ville filtervalg
   kunne stå i utakt mellom formene, og markupen ville hatt to sannheter.
   ══════════════════════════════════════════════════════════════════ */
.koll{background:var(--bg);padding:clamp(20px,3vh,34px) var(--pad) clamp(64px,10vh,120px)}

/* ── brødsmuler ── */
/* min-height: brødsmulene fylles av JS, og en tom <ol> er 0 px høy. Den
   ligger øverst på både kolleksjons- og produktsida, så de 17 pikslene den
   vokser med dytter HELE siden nedover. Målt: det var alt som var igjen av
   CLS på kolleksjonssida etter at skjelettkortene kom på plass.
   Overflødig i Shopify, der brødsmulene står i markupen fra første byte. */
.koll__sti ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 clamp(18px,3vh,32px);padding:0;
  min-height:1.5em;font-size:.72rem;letter-spacing:.06em;color:var(--ink-2)}
.koll__sti li+li::before{content:"/";margin-right:10px;color:var(--line)}
.koll__sti a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .25s}
.koll__sti a:hover,.koll__sti a:focus-visible{border-bottom-color:var(--gold)}
.koll__sti [aria-current]{color:var(--ink)}

/* ── tittel ── */
.koll__hode{max-width:62ch;margin-bottom:clamp(22px,3.6vh,40px)}
.koll__hode h1{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
/* min-height: ingressen fylles av JS, og uten reservert høyde vokser
   .koll__hode fra 62 til 98 px når teksten kommer. Målt som del av CLS
   0.76 på kolleksjonssida. Overflødig i Shopify, der teksten står i
   markupen fra første byte. */
.koll__ingress{margin:14px 0 0;min-height:1.6em;font-size:clamp(.94rem,1.4vw,1.02rem);line-height:1.6;color:var(--ink-2)}

/* ── verktøylinje ── */
.koll__verktoy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.koll__antall{margin:0;font-size:.8rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.koll__sort{margin-left:auto;display:flex;align-items:center}
.koll__sort select{appearance:none;border:1px solid var(--line);background:var(--paper-2);
  color:var(--ink);font:inherit;font-size:.82rem;padding:9px 34px 9px 14px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),
                   linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;transition:border-color .25s}
.koll__sort select:hover{border-color:var(--gold)}

/* Filterknappen finnes bare i skuffemodus. Over brekkpunktet står
   filtrene allerede synlig i sidefeltet, og en knapp som åpner noe som
   alt er åpent er en knapp som lyver. */
.koll__filtBtn{display:none;align-items:center;gap:9px;background:var(--paper-2);
  border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.82rem;
  padding:9px 16px;cursor:pointer;transition:border-color .25s}
.koll__filtBtn:hover{border-color:var(--gold)}
.koll__filtBtn svg{width:17px;height:17px;color:var(--gold-deep)}
.koll__filtTall{display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--gold);color:var(--ink);   /* mørk tekst på gull = AA */
  font-size:.66rem;font-variant-numeric:tabular-nums}

/* ── kropp: sidefelt + rutenett ── */
.koll__kropp{display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;margin-top:clamp(24px,4vh,44px)}
.koll__hoved{min-width:0}
.koll__rutenett{margin-top:0}
/* Kolleksjoner uten filterakser (Dåp, Jubileumsur) og søkeresultater: uten
   denne sto det et tomt sidefelt med overskriften «Filtrer» på desktop, og
   en «Filtrer»-knapp som åpnet en tom skuff på mobil. Klassen settes av
   scriptet når koll.filtre er tom. */
.koll--uten-filtre .koll__filtre,.koll--uten-filtre .koll__filtBtn{display:none}
.koll--uten-filtre .koll__kropp{grid-template-columns:minmax(0,1fr)}

/* ── filterpanel som sidefelt ── */
/* Topplinja på undersider ligger i normal flyt (.topp--fast er ikke fixed),
   så sidefeltet trenger bare litt luft mot toppen av vindusruta. */
.koll__filtre{position:sticky;top:20px;display:flex;flex-direction:column;gap:0}
/* På desktop finnes ingen skuff å lukke, så knappen skal bort — men
   overskriften må bli stående for skjermlesere. Fjernes hele blokka, går
   dokumentet fra h1 rett til produktkortenes h3, og Lighthouse flagger
   heading-order. Den skjules visuelt i stedet for å slettes. */
.koll__filtTopp{display:block}
.koll__filtTopp .drawer__x{display:none}
.koll__filtTopp h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.filt{border:0;border-top:1px solid var(--line);margin:0;padding:18px 0 20px}
.filt:first-child{border-top:0;padding-top:0}
/* float+width: en <legend> lager som standard et hakk i fieldset-rammen, og
   da får overskriften en strek stikkende ut til høyre. Flytende legend
   rendres som vanlig blokk og streken går ubrutt over. */
.filt legend{float:left;width:100%;padding:0;margin-bottom:12px;
  font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.filt__valg{clear:both}
.filt__valg{display:flex;flex-direction:column;gap:2px;clear:both}
.filt__rad{display:flex;align-items:center;gap:11px;cursor:pointer;
  padding:6px 0;font-size:.88rem;color:var(--ink);line-height:1.35}
.filt__rad input{appearance:none;flex:0 0 auto;width:16px;height:16px;margin:0;
  border:1px solid var(--muted);background:var(--paper-2);cursor:pointer;
  transition:border-color .2s,background .2s}
.filt__rad:hover input{border-color:var(--gold-deep)}
/* haken tegnes i mørk blekk på gull — gull som flate med mørkt oppå, aldri
   gull som strek på papir. SVG-en ligger inline som data-URI: den skalerer
   rent, og en ekstra filforespørsel for en hake er én for mye. */
.filt__rad input:checked{background-color:var(--gold);border-color:var(--gold-deep);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%231E1B17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px 13px;background-position:center;background-repeat:no-repeat}
.filt__rad input:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
/* Verdiene kommer rått fra kassa og er ujevnt skrevet («herre», «Seiko»).
   ::first-letter løfter bare forbokstaven, så «Daniel Wellington» og
   «forlovelseringer/ gifteringer» ikke blir skrevet om til noe annet enn
   det de heter. Vi retter ikke navn — vi bare starter dem med stor bokstav. */
.filt__navn{min-width:0;overflow-wrap:anywhere}
.filt__navn::first-letter{text-transform:uppercase}
.filt__tall{margin-left:auto;font-size:.72rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

.koll__filtFot{display:flex;flex-direction:column;gap:12px;
  padding-top:18px;border-top:1px solid var(--line)}
.act--nullstill{align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.78rem;color:var(--ink-2);
  border-bottom:1px solid var(--gold);transition:color .25s}
.act--nullstill:hover{color:var(--ink)}
/* Knappene bruker prosjektets .solid. Den er tegnet for mørkt tre (lys
   flate, mørk tekst) — på papir snus den, slik skjemaknappen på
   verksted.html alt gjør. Samme grep, ikke en ny knappestil. */
.koll .solid,.prod .solid{background:var(--ink);color:var(--paper-2);border:0;cursor:pointer;
  font-family:inherit;justify-content:center}
.koll .solid:hover,.prod .solid:hover{background:var(--gold-deep);color:var(--paper-2)}
.koll__merKnapp{min-width:min(260px,70vw)}

/* «Vis varene» er utgangen ut av skuffen. I sidefeltet finnes ingen skuff
   å gå ut av, så knappen skjules der. */
.koll__filtVis{display:none}

/* ── tom tilstand ──
   Skal være sjelden med kontekstavhengige filtre, men den skjer. En tom
   side uten forklaring ser ut som en feil i nettbutikken, ikke som et
   filtervalg kunden selv gjorde. */
.koll__tom{padding:clamp(48px,10vh,110px) 0;text-align:center}
.koll__tomTittel{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-size:clamp(1.1rem,2.2vw,1.4rem);color:var(--ink)}
.koll__tomTekst{margin:10px 0 24px;font-size:.92rem;color:var(--ink-2)}

/* ── last inn flere ── */
.koll__mer{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-top:clamp(38px,6vh,68px)}
.koll__vist{margin:0;font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ── skuffemodus ── */
@media(max-width:900px){
  .koll__filtBtn{display:inline-flex}
  .koll__kropp{grid-template-columns:minmax(0,1fr)}
  .koll__sort{margin-left:auto}

  /* Samme geometri og samme bevegelse som megamenyen — se .drawer.
     Bakteppet er .drawer-back, delt med den, ikke en kopi. */
  .koll__filtre{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:90;
    width:min(400px,86vw);background:var(--paper-2);overflow-y:auto;overscroll-behavior:contain;
    translate:100% 0;transition:translate .45s cubic-bezier(.22,.61,.24,1);
    border-left:1px solid var(--line);box-shadow:-30px 0 70px rgba(30,24,16,.16);
    padding:clamp(18px,3vh,28px) clamp(20px,5vw,30px) clamp(18px,3vh,26px);gap:0}
  .koll__filtre.open{translate:0 0}
  .koll__filtTopp{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .koll__filtTopp h2{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;
    font-size:.62rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
  .filt:first-child{padding-top:18px;border-top:1px solid var(--line)}
  .koll__filtFot{position:sticky;bottom:0;background:var(--paper-2);
    margin-top:auto;padding-bottom:4px}
  .koll__filtVis{display:inline-flex}
  .filt__rad{padding:9px 0}          /* større treffflate for tommelen */
}

/* Under 640 px står rutenettet allerede i én kolonne (se .utvalg__rad).
   Verktøylinja brytes så antallet ikke klemmes mellom to knapper. */
@media(max-width:520px){
  .koll__verktoy{gap:12px}
  .koll__antall{order:3;width:100%}
  .koll__sort select{padding:9px 30px 9px 12px;font-size:.78rem}
}

@media(prefers-reduced-motion:reduce){
  .koll__filtre{transition:none}
}

/* ── snarveier ──
   Kuratert inngang til én avgrensning, plassert over filtrene fordi den
   er noe kunden leter etter, ikke noe hun krysser av. Tegnet som en
   pilleknapp og ikke som en lenke: den er en bryter som slår seg av igjen.
   Se «Til»-aksen på Bunadssølv i verktoy/hent-produkter.py. */
.koll__snarveier{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.koll__snarvei{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:1px solid var(--line);border-radius:999px;
  color:var(--ink-2);font:inherit;font-size:.82rem;padding:8px 16px;
  transition:border-color .25s,color .25s,background .25s}
.koll__snarvei:hover{border-color:var(--gold);color:var(--ink)}
.koll__snarveiTall{font-size:.72rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* aktiv: gull som flate med mørk tekst oppå — aldri gulltekst på papir */
.koll__snarvei--aktiv{background:var(--gold);border-color:var(--gold-deep);color:var(--ink)}
.koll__snarvei--aktiv:hover{background:var(--gold-soft);color:var(--ink)}

/* ══════════════════════════════════════════════════════════════════
   PRODUKTSIDE (.prod) — én mal for alle 422 varer.
   I Shopify: sections/main-product.liquid.

   Bildet til venstre, kjøpsboksen til høyre. Under 900 px stables de med
   bildet først: en kunde som kommer fra Instagram skal se varen før hun
   ser prisen.
   ══════════════════════════════════════════════════════════════════ */
/* Maksbredde på hele seksjonen, ikke bare på toppen: brødsmuler, bilde,
   beskrivelse og relaterte varer skal stå i samme kolonne. Uten den blir
   produktbildet over 1100 px bredt på en stor skjerm, og kjøpsboksen
   henger igjen som en smal stripe med et hull under seg. */
.prod{background:var(--bg);max-width:1240px;margin-inline:auto;
  padding:clamp(20px,3vh,34px) var(--pad) clamp(64px,10vh,120px)}
.prod__topp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,72px);align-items:start}

/* ── bildet ──
   Samme kvadratiske flate og samme --produktflate som produktkortet, så
   en vare ser lik ut i rutenettet og på sin egen side. Ett bilde per vare
   er bekreftet på alle 422 — derfor ingen karusell og ingen miniatyrrad. */
.prod__media{min-width:0}
.prod__bilde{position:relative;display:block;width:100%;padding:0;cursor:zoom-in;
  aspect-ratio:1/1;background:var(--produktflate);border:1px solid var(--line);
  overflow:hidden}
.prod__bilde img{width:100%;height:100%;object-fit:contain;padding:clamp(8px,2.5%,22px);
  transition:scale .6s cubic-bezier(.22,.61,.24,1)}
.prod__bilde:hover img{scale:1.03}
.prod__bilde--tom{cursor:default;display:flex;align-items:center;justify-content:center}
.prod__bilde--tom .pk__tom{position:static}
.prod__lupe{position:absolute;right:0;bottom:0;padding:8px 14px;
  background:var(--paper-2);border-top:1px solid var(--line);border-left:1px solid var(--line);
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  opacity:0;transition:opacity .3s}
.prod__bilde:hover .prod__lupe,.prod__bilde:focus-visible .prod__lupe{opacity:1}

/* ── kjøpsboksen ── */
.prod__kjop{min-width:0;display:flex;flex-direction:column}
.prod__merke{min-height:1.15em;line-height:1.15;font-size:.63rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.prod__navn{margin:10px 0 0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.12;
  letter-spacing:-.02em;color:var(--ink)}
/* min-height: prisen fylles av JS og er tom ved første tegning. Uten
   reservert høyde vokser kjøpsboksen når prisen kommer, og alt under
   flytter seg. Overflødig i Shopify. */
.prod__pris{display:flex;align-items:baseline;gap:12px;margin:18px 0 0;
  min-height:1.4em;font-size:1.22rem;color:var(--ink);font-variant-numeric:tabular-nums}
.prod__pris b{font-weight:400}
.prod__pris s{font-size:.92rem;color:var(--ink-2);text-decoration-thickness:1px}
/* Utsolgt merkes ETT sted: flagget over bildet, nøyaktig som på
   produktkortet — så varen ser lik ut i rutenettet og på sin egen side.
   Vi hadde i tillegg en pille i kjøpsboksen. Den sto rett over en
   deaktivert knapp som alt sa «Utsolgt», og to markeringer av samme faktum
   leser som en feil. Knappens tekst er ikke en gjentakelse: den forteller
   hva handlingen er, ikke hva varen er. */
.prod__bilde .pk__flagg{z-index:1}
/* varenummer i kjøpsboksen */
.prod__sku{margin:14px 0 0;font-size:.75rem;letter-spacing:.04em;color:var(--ink-2);
  font-variant-numeric:tabular-nums}

.prod__form{margin-top:clamp(22px,3.4vh,32px);display:flex;flex-direction:column;gap:16px}
.prod__antall{display:flex;align-items:center;gap:16px}
.prod__antall label{font-size:.63rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.prod__teller{display:inline-flex;align-items:center;border:1px solid var(--line);
  background:var(--paper-2)}
.prod__teller button{width:42px;height:44px;background:none;border:0;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:1.05rem;transition:color .2s}
.prod__teller button:hover{color:var(--gold-deep)}
.prod__teller input{width:46px;height:44px;border:0;border-left:1px solid var(--line);
  border-right:1px solid var(--line);background:none;text-align:center;
  font:inherit;font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums;
  -moz-appearance:textfield}
.prod__teller input::-webkit-outer-spin-button,
.prod__teller input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prod__kjopBtn{width:100%;padding:16px 24px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase}
.prod__kjopBtn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.prod .prod__kjopBtn:disabled:hover{background:var(--line);color:var(--muted)}
.prod__melding{margin:0;padding:12px 14px;background:var(--paper-2);
  border-left:2px solid var(--gold);font-size:.85rem;line-height:1.5;color:var(--ink-2)}

.prod__levering{margin:12px 0 0;padding-left:10px;border-left:2px solid var(--gold);
  font-size:.86rem;line-height:1.55;color:var(--ink-2)}

/* ── kontakt i stedet for kjøp (infosiden, kun:infoside) ──
   Samme plass og samme vekt som kjøpsknappen: telefonen er den fylte
   handlingen, e-posten den sekundære. */
.prod__kontakt{margin-top:clamp(22px,3.4vh,32px);display:flex;flex-direction:column;
  align-items:flex-start;gap:18px}
.prod__kontakt .solid{width:100%;justify-content:center;padding:16px 24px;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase}
.prod__kontakt .act{color:var(--ink);border-bottom-color:var(--gold)}
@media(max-width:560px){.prod__kontakt .solid{padding:17px 24px}}

/* ── butikkboksen ──
   Ligger rett under kjøpsknappen, ikke under beskrivelsen. Butikkens
   kunder er lokale, og for mange av dem er dette hele grunnen til at de
   åpnet sida: kan jeg komme og se på den? */
.prod__butikk{margin-top:clamp(24px,3.6vh,36px);padding:clamp(18px,2.6vh,24px);
  background:var(--paper-2);border:1px solid var(--line)}
.prod__butikk h2{margin:0;font-size:.63rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.prod__butikk p{margin:10px 0 0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.prod__butikkTlf a{font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-size:1.18rem;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--gold);transition:color .25s}
.prod__butikkTlf a:hover{color:var(--gold-deep)}
.prod__butikkTid{font-size:.8rem!important;color:var(--ink-2)!important}

/* ── beskrivelsen ──
   18 varer mangler den helt. Blokka har [hidden] og forsvinner da i sin
   helhet — ingen overskrift, ingen tom ramme, ingen «ingen beskrivelse».
   Sida under (relaterte varer) rykker opp og ser ferdig ut. */
.prod__besk{max-width:62ch;margin-top:clamp(44px,7vh,88px);
  padding-top:clamp(24px,3.6vh,36px);border-top:1px solid var(--line)}
.prod__besk h2{margin:0 0 12px;font-size:.63rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.prod__besk p{margin:0;font-size:clamp(.94rem,1.4vw,1rem);line-height:1.65;color:var(--ink-2)}

/* ── relaterte varer ── */
.prod__rel{margin-top:clamp(56px,9vh,110px);padding-top:clamp(26px,4vh,40px);
  border-top:1px solid var(--line)}
.prod__rel h2{margin:0 0 clamp(22px,3.4vh,34px);
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:-.02em;color:var(--ink)}

/* ── forstørringspanelet ──
   Femte panel, samme logikk som de fire andre (window.Arnestad.panel). */
.zoom{position:fixed;inset:0;z-index:110;display:flex;align-items:center;
  justify-content:center;padding:clamp(16px,4vh,56px);
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.zoom.open{opacity:1;pointer-events:auto}
.zoom__flate{max-width:min(1000px,92vw);max-height:88vh;background:var(--produktflate);
  border:1px solid var(--line);padding:clamp(12px,2.5vw,32px);display:flex}
.zoom__flate img{max-width:100%;max-height:calc(88vh - 64px);object-fit:contain;margin:auto}
.zoom__x{position:absolute;top:clamp(10px,2vh,22px);right:clamp(10px,2vw,22px);
  color:var(--gold-soft);z-index:1}

@media(max-width:900px){
  /* stablet, bildet først — kunden skal se varen før hun ser prisen */
  .prod__topp{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.4vh,32px)}
  .prod__kjopBtn{padding:17px 24px}
  .prod__teller button{width:48px}   /* større treffflate for tommelen */
}
@media(prefers-reduced-motion:reduce){
  .zoom{transition:none}
  .prod__bilde:hover img{scale:1}
}

/* ══════════════════════════════════════════════════════════════════
   HANDLEKURV — skuff (.drawer--kurv) og side (.kside).

   Skuffen arver all geometri og all bevegelse fra .drawer, og all
   fokushåndtering fra panel() i global.js. Det som står her er bare
   det som skiller en kurv fra en meny: smalere, rullbar liste, og en
   fot som blir stående.
   ══════════════════════════════════════════════════════════════════ */
.drawer--kurv{width:min(440px,92vw);gap:0;overflow:hidden;
  padding:clamp(18px,3vh,28px) clamp(20px,4vw,30px) clamp(16px,2.4vh,22px)}
.kurv__tittel{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-size:.62rem!important;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2)}
.kurv__kropp{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin-top:clamp(14px,2vh,20px);padding-top:4px}
.kurv__liste{list-style:none;margin:0;padding:0}

/* ── varelinje ──
   Brukes både i skuffen og på handlekurvsida — samme funksjon tegner dem,
   så de kan aldri komme i utakt. */
.klinje{display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line)}
.klinje:first-child{border-top:1px solid var(--line)}
/* --produktflate som overalt ellers: leverandørbildene er hvite, og
   --paper-2 bak dem gir en synlig hvit firkant */
.klinje__bilde{display:block;aspect-ratio:1/1;background:var(--produktflate);
  border:1px solid var(--line);overflow:hidden}
.klinje__bilde img{width:100%;height:100%;object-fit:contain;padding:5px}
.klinje__bilde .pk__tom{position:static;height:100%}
.klinje__bilde .pk__tom i{width:38%}
.klinje__tekst{min-width:0;display:flex;flex-direction:column;gap:5px}
.klinje__merke{min-height:1.15em;line-height:1.15;font-size:.58rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.klinje__navn{font-family:"Familjen Grotesk",system-ui,sans-serif;font-size:.92rem;
  line-height:1.3;color:var(--ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.klinje__navn:hover{text-decoration:underline;text-underline-offset:3px}
.klinje__pris{margin:0;font-size:.88rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.klinje__bunn{display:flex;align-items:center;gap:14px;margin-top:6px}
.klinje__teller{display:inline-flex;align-items:center;border:1px solid var(--line);
  background:var(--paper-2)}
.klinje__teller button{width:34px;height:32px;background:none;border:0;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:1rem;transition:color .2s}
.klinje__teller button:hover{color:var(--gold-deep)}
.klinje__antall{min-width:30px;text-align:center;font-size:.85rem;
  border-left:1px solid var(--line);border-right:1px solid var(--line);
  line-height:32px;font-variant-numeric:tabular-nums}
.klinje__fjern{margin-left:auto;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.75rem;color:var(--ink-2);
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.klinje__fjern:hover{color:var(--ink);border-bottom-color:var(--gold)}

/* ── tom kurv ──
   Aldri en tom skuff uten forklaring: en kunde som åpner kurven og ser
   ingenting skal vite at det er tomt, ikke at noe er i stykker. */
.kurv__tom{padding:clamp(40px,8vh,80px) 0;text-align:center}
.kurv__tom p{margin:0 0 16px;color:var(--ink-2)}
.kurv__tom .act{color:var(--ink-2);border-bottom-color:var(--gold)}

/* ── foten ── */
.kurv__fot{flex:0 0 auto;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.kurv__sum{display:flex;align-items:baseline;justify-content:space-between;margin:0;
  font-size:.95rem;color:var(--ink)}
.kurv__sum span{font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.kurv__sum b{font-weight:400;font-size:1.15rem;font-variant-numeric:tabular-nums}
.kurv__frakt{margin:8px 0 16px;font-size:.78rem;color:var(--ink-2)}
.kurv__kasse{width:100%;padding:15px 24px;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase}
.drawer--kurv .solid,.kside .solid{background:var(--ink);color:var(--paper-2);
  border:0;cursor:pointer;font-family:inherit;justify-content:center}
.drawer--kurv .solid:disabled,.kside .solid:disabled{background:var(--line);
  color:var(--muted);cursor:not-allowed}
.kurv__merk{margin:10px 0 0;font-size:.74rem;line-height:1.5;color:var(--ink-2)}

/* ══ handlekurvsida (.kside) ══
   Samme linjer, full bredde. Oppsummeringen står som eget kort ved siden
   av listen på desktop, og under den på mobil. */
.kside{background:var(--bg);max-width:1240px;margin-inline:auto;
  padding:clamp(20px,3vh,34px) var(--pad) clamp(64px,10vh,120px)}
.kside__hode{margin-bottom:clamp(22px,3.6vh,40px)}
.kside__hode h1{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.06;
  letter-spacing:-.025em;color:var(--ink)}
.kside__antall{margin:12px 0 0;font-size:.85rem;color:var(--ink-2)}
.kside__kropp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(28px,4.5vw,64px);align-items:start}
.kside__oppsum{padding:clamp(20px,3vh,28px);background:var(--paper-2);
  border:1px solid var(--line);position:sticky;top:20px}
.kside .klinje{grid-template-columns:104px minmax(0,1fr);gap:22px;padding:22px 0}
.kside .klinje__navn{font-size:1rem}
@media(max-width:900px){
  .kside__kropp{grid-template-columns:minmax(0,1fr)}
  .kside__oppsum{position:static}
  .kside .klinje{grid-template-columns:84px minmax(0,1fr);gap:16px}
}

/* ── «Legg i kurv» på produktkortet ──
   Skjult til kortet berøres med peker eller tastatur, så et rutenett med
   24 varer ikke blir en vegg av knapper. På enheter uten hover (telefon)
   står den alltid framme — der finnes det ingen måte å avsløre den på.
   Fokus teller som berøring: :focus-within gjør den synlig for tastatur. */
/* margin-top 24 og ikke 12: knappen er 232x39 px og godt over minstemålet
   på 24x24, men lå bare 12 px under kortets lenke. Lighthouse flagget
   target-size fordi treffflatene ligger for tett. */
.pk__kjop{display:block;width:100%;margin-top:24px;padding:11px 14px;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink-2);
  font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transition:opacity .25s,border-color .25s,color .25s,background .25s}
.pk:hover .pk__kjop,.pk:focus-within .pk__kjop{opacity:1}
.pk__kjop:hover{border-color:var(--gold);color:var(--ink);background:var(--paper-2)}
.pk__kjop:focus-visible{opacity:1}
@media(hover:none){
  .pk__kjop{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .pk__kjop{transition:none}
}

/* ══ statiske sider (.statisk) ══
   Om oss, kontakt, frakt, retur, kjøpsvilkår og personvern. Skallene står
   tomme til innholdet kommer — de finnes nå så footeren og megamenyen ikke
   lenker til ingenting. Typografien er satt opp for løpende tekst, så den
   dagen teksten kommer trenger ingen å røre CSS-en. */
.statisk{background:var(--bg);max-width:1240px;margin-inline:auto;
  padding:clamp(20px,3vh,34px) var(--pad) clamp(64px,10vh,120px)}
.statisk__hode{max-width:62ch;margin-bottom:clamp(24px,4vh,44px);
  padding-bottom:clamp(20px,3vh,32px);border-bottom:1px solid var(--line)}
.statisk h1{margin:0;font-family:"Familjen Grotesk",system-ui,sans-serif;
  font-weight:400;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.06;
  letter-spacing:-.025em;color:var(--ink)}
.statisk__ingress{margin:14px 0 0;font-size:clamp(.98rem,1.5vw,1.08rem);
  line-height:1.6;color:var(--ink-2)}
.statisk__venter{max-width:62ch;margin:0;padding:clamp(18px,2.6vh,24px);
  background:var(--paper-2);border-left:2px solid var(--gold);
  font-size:.9rem;color:var(--ink-2)}
/* løpende tekst — klar til Prompt 10 */
.statisk__tekst{max-width:62ch}
.statisk__tekst h2{margin:clamp(30px,4.6vh,48px) 0 12px;
  font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:400;
  font-size:clamp(1.1rem,2vw,1.35rem);letter-spacing:-.015em;color:var(--ink)}
.statisk__tekst p{margin:0 0 16px;font-size:clamp(.94rem,1.4vw,1rem);
  line-height:1.7;color:var(--ink-2)}
.statisk__tekst a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold)}
.statisk__tekst a:hover{color:var(--gold-deep)}
.statisk__tekst ul{margin:0 0 16px;padding-left:20px;color:var(--ink-2);line-height:1.7}