/* ═══════════════════════════════════════════════════════════════════
   FÅ PRIS PÅ INSTALLASJON — hele veiviserens stilark (eneste kilde)

   Regenereringsskriptet (scripts/lag-pris-html.js) fjerner alle
   befaring-kopiens <style>-blokker fra pris.html og lenker inn denne.
   pris-overstyring.js injiserer INGEN stiler lenger — bare DOM/logikk.

   Motorkoblede regler som MÅ finnes: .step/.step.active,
   .mat-substep/.active, .mat-sub-seg.active/.done, .live-msg.vis,
   [hidden]. Skallet (#vxApp/#vxSide/#vxHoved/#vxFot) bygges av
   pris-overstyring.js.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --navy:#1B3A6B;
  --aksent:#0073ff;
  --side-bg:#eef2f8;
  --panel:#f6f8fc;
  --strek:rgba(27,58,107,0.10);
  --strek-sterk:rgba(27,58,107,0.16);
  --tekst:#0a0a0a;
  --dus:rgba(0,0,0,0.65);
  --dusere:rgba(0,0,0,0.52);
  --gronn:#10b981;
  --gronn-tekst:#047857;
  --feil:#dc2626;
  --r-ramme:16px;
  --r-kort:12px;
  --r-felt:8px;
  --a1:6px;
  --a2:10px;
  --a3:14px;
  --a4:20px;
  --a5:28px;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-head:'Manrope',ui-sans-serif,system-ui,sans-serif;
  --font-caps:'Plus Jakarta Sans','Inter',sans-serif;
}

/* ── Grunnlag ── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--side-bg);color:var(--tekst);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;padding:16px 0 0}
/* footerens inline margin-top:auto ville stjålet en del av den ledige
   plassen og skjøvet rammen oppover — rammens egne auto-marger skal
   alene fordele lufta likt over og under */
body > footer{margin-top:0!important}
/* Små overskrifter (≤ ca. 24px) er Manrope SemiBold 600 med normal
   sporing på hele siten — kun store hero-/produkttitler er ExtraBold */
h1,h2,h3,h4{font-family:var(--font-head);letter-spacing:normal;margin:0}
p{margin:0}
button,input,select,textarea{font-family:inherit}
img{max-width:100%}
[hidden]{display:none!important}

/* Hjelpetekstene av typen «Velg og trykk Neste.» under valgkortene */
.sub-hint{display:none}

/* Sidekrom og deler av motoren som ikke brukes i pris-flyten */
.navbar,.progress-bar,.hdr-area,.status-banner,.form-section,.price-bar,
#landing,#mascotSide,#stepCounter,#doneRowsTop,#doneRowsBottom,#resultBox{display:none!important}

/* ── Rammen: sentrert app-container, høyden følger innholdet.
   Vertikal sentrering skjer via margin:auto i body-flexen (full høyde):
   er innholdet høyere enn viewporten kollapser auto-margene til 0 og
   siden scroller normalt fra toppen — ingenting klippes ── */
#vxApp{width:calc(100% - 40px);max-width:min(1600px,92vw);margin:auto;background:#fff;border:1px solid var(--strek);border-radius:var(--r-ramme);box-shadow:0 14px 44px rgba(27,58,107,0.08);display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:1fr auto;overflow:hidden;
/* konstant rammehøyde (≈ det høyeste steget, Tilbud) så rammen ikke
   vokser og krymper mellom stegene — innholdet sentreres vertikalt i
   den faste høyden. Taket på viewporthøyden gjør at rammen fortsatt
   får plass på mindre skjermer; blir et stegs innhold høyere, vokser
   rammen (min-height) og siden scroller normalt */
min-height:min(860px,calc(100vh - 80px))}

/* ── Venstrepanel ── */
#vxSide{background:var(--panel);border-right:1px solid var(--strek);padding:var(--a4) 18px 18px;display:flex;flex-direction:column}
#vxLogo{width:130px;height:auto;margin:2px auto var(--a5);display:block}
/* logoen og stepperen sentreres som gruppe i panelbredden;
   stegradene beholder venstrejusteringen sin internt */
.prog-rail{display:block;width:max-content;margin:0 auto}
.pr-count{display:none}
.pr-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* fem toppsteg — store, tydelige prikker */
.pr-item{position:relative;display:flex;align-items:center;gap:13px;padding:9px 0;font-size:14px;font-weight:600;color:var(--dusere)}
.pr-item+.pr-item::before{content:'';position:absolute;left:18px;top:-10px;width:2px;height:20px;background:var(--strek);border-radius:2px}
.pr-item.done{color:rgba(0,0,0,0.55);cursor:pointer}
.pr-item.done:hover{color:var(--aksent)}
.pr-item.current{color:var(--tekst);font-weight:800}
.pr-dot{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--strek-sterk);font-size:14px;font-weight:700;color:var(--dusere);background:#fff;transition:all .2s}
.pr-item.current .pr-dot{border-color:var(--aksent);background:var(--aksent);color:#fff;box-shadow:0 0 0 4px rgba(0,115,255,0.12)}
.pr-item.done .pr-dot{border-color:var(--gronn);background:var(--gronn)}
.pr-item.done .pr-dot svg{width:16px;height:16px}
.pr-item.done .pr-dot svg path{stroke:#fff}
.pr-item.done+.pr-item::before{background:rgba(16,185,129,0.5)}
/* Aktivt steg: rolig pulserende ring rundt prikken — kun steget kunden
   står på; fullførte og kommende prikker står i ro */
@keyframes vxPuls{
  0%{box-shadow:0 0 0 4px rgba(0,115,255,0.12),0 0 0 4px rgba(0,115,255,0.22)}
  75%,100%{box-shadow:0 0 0 4px rgba(0,115,255,0.12),0 0 0 13px rgba(0,115,255,0)}
}
.pr-item.current .pr-dot{animation:vxPuls 2.8s ease-out infinite}
/* Nyfullført steg: prikken popper inn og haken tegnes (pr-pop settes av
   overstyringen kun første gang steget fullføres, aldri ved gjenbygging) */
.pr-dot.pr-pop{animation:vxPopp .25s ease-out}
.pr-dot.pr-pop svg path{stroke-dasharray:22;stroke-dashoffset:22;animation:vxHake .35s ease-out .1s forwards}
@keyframes vxHake{to{stroke-dashoffset:0}}
@keyframes vxPopp{from{transform:scale(0.6);opacity:0}to{transform:scale(1);opacity:1}}

/* Produktkortet pinnet i bunnen av panelet */
#vxProduktKort{margin-top:auto;background:#fff;border:1px solid var(--strek);border-radius:var(--r-kort);padding:var(--a3) 12px 12px;text-align:center}
#vxProduktKort img{width:90px;height:90px;object-fit:contain;margin:0 auto var(--a1);display:block}
#vxProduktKort .vpk-lbl{font-size:9.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--dusere);margin:0 0 3px;font-family:var(--font-caps)}
#vxProduktKort .vpk-navn{font-size:13px;font-weight:700;margin:0;line-height:1.3;font-family:var(--font-head)}
#vxProduktKort .vpk-farge{font-size:11.5px;color:var(--dus);margin:2px 0 0}
#vxProduktKort .vpk-pris{font-size:15px;font-weight:800;color:var(--navy);margin:var(--a1) 0 7px;font-family:var(--font-head)}
#vxProduktKort a{font-size:12px;font-weight:600;color:var(--aksent);text-decoration:underline;text-underline-offset:3px}
/* mobil-linjen «Du får nå pris på …» finnes bare på små skjermer */
#vxProduktKort .vpk-mobil{display:none}

/* Kompakt stegindikator, kun mobil: «Steg X av 5 · navn» + tynn linje */
#vxMobProgress{display:none;flex:1 1 100%;margin-top:10px}
#vxMobProgress .vx-mob-steg{font-size:10.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--dusere);font-family:var(--font-caps);margin-bottom:5px}
#vxMobProgress .vx-mob-bar{height:4px;background:var(--strek);border-radius:99px;overflow:hidden}
#vxMobProgress .vx-mob-bar i{display:block;height:100%;width:0;background:var(--aksent);border-radius:99px;transition:width .3s}

/* ── Høyrepanel ── */
/* Vertikal sentrering med TAK: innholdet sentreres i panelet, men
   lufta over stopper på 180px — korte steg (f.eks. «Ny montering
   eller bytte?») synker ikke lenger enn de andre stegene. Spacerne
   krymper likt (like basiser) så vanlige steg sentreres eksakt, og
   ::after vokser fritt når innholdet er kort. Høyere innhold enn
   panelet gir toppjustering + scroll som før */
#vxHoved{padding:22px 44px 22px;min-width:0;display:flex;flex-direction:column;justify-content:flex-start}
#vxHoved::before{content:'';flex:1 1 0;max-height:180px}
#vxHoved::after{content:'';flex:1 1 0}
.form-main{min-width:0}
/* steginnholdet sentreres i en smalere kolonne med luft på sidene —
   oppsummeringen (steg 9) beholder full bredde */
/* Én innholdskolonne per skjerm: overskrift, skillelinje, kort og
   knapperad deler nøyaktig samme bredde og kanter. Bredden settes per
   skjerm av overstyringen (--vx-kolonne): 760px på tekstskjemaene,
   740px på montering-skjermene, 1100px på brakett/tilvalg (3 kolonner
   kort). Oppsummeringen (steg 9) har full bredde */
#vxHoved .step,#vxHoved #redigerBanner{max-width:var(--vx-kolonne,760px);margin-left:auto;margin-right:auto;width:100%}
#vxHoved #step9{max-width:none}
#step8 .mat-card img{height:200px;padding:6px}
/* kanaler, nettkabel og dempere (2 kort per rad): bildet skalerer med
   kortbredden i stedet for fast høyde, så bredere kort = større bilde
   uten tomrom inni kortet. Brakett/tilvalg (3 kolonner) beholder 200px */
#ms-1 .mat-card img,#ms-3 .mat-card img,#ms-4 .mat-card img{height:auto;aspect-ratio:16/10}
#ms-2 .mat-card img,#tillegg-grid .mat-card img{height:190px}
@media(min-width:900px){#nettkabel-lengde-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Delindikator: liten fremdrift innenfor toppsteget */
#vxDelbar{display:flex;align-items:center;gap:10px;margin:0 auto 12px;max-width:var(--vx-kolonne,760px);width:100%}
#vxDelbar .vx-delseg{display:flex;gap:5px}
#vxDelbar .vx-delseg i{width:30px;height:5px;border-radius:99px;background:var(--strek);display:block}
#vxDelbar .vx-delseg i.aktiv{background:var(--aksent)}
#vxDelbar .vx-delseg i.ferdig{background:rgba(0,115,255,0.45)}
#vxDelbar > span:last-child{font-size:11.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--dusere);font-family:var(--font-caps)}

/* Steg-veksling (styrt av motoren) */
.step{display:none}
.step.active{display:block;animation:stegInn .2s ease}
@keyframes stegInn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step h2{font-size:24px;font-weight:600;margin:0 0 4px}
#step8 h2{display:none}
.step-desc{font-size:14px;color:var(--dus);margin:0 0 var(--a4);padding-bottom:var(--a3);border-bottom:1px solid var(--strek)}


/* Tilbudssteget: send-knappen bor i høyrekolonnen sammen med
   bekreftelsesboksen (se #vxBekreftRad lenger ned) */

/* Kravmelding når et obligatorisk valg mangler */
.vx-kravfeil{color:var(--feil);font-size:13px;font-weight:600;margin:var(--a2) 0 0}
/* steg uten undertekst beholder skillelinjen på selve overskriften */
.step h2.vx-uten-desc{border-bottom:1px solid var(--strek);padding-bottom:var(--a3);margin-bottom:var(--a4)}

/* Delsteg-linje og -teller: skjult — stepperen og telleren følger
   skjermene, så de interne tellerne er overflødige */
.mat-sub-bar,.mat-sub-progress{display:none}
/* Tilvalg utedel: «Nei takk»-kortet — aktivt frasagnsvalg i sjette
   rute, samme størrelse som produktkortene, uten pris og foto */
.vx-neitakk{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;color:var(--dusere)}
.vx-neitakk span{font-size:15px;font-weight:700;color:rgba(0,0,0,0.75);font-family:var(--font-head)}
.vx-neitakk p{font-size:12.5px;font-weight:500;color:rgba(0,0,0,0.65);margin:0}
.mat-sub-h3{font-size:17px;font-weight:600;margin:0 0 3px}
.mat-section-desc{font-size:13px;color:var(--dus);margin:0 0 var(--a2)}
.mat-sub-title{font-size:12px;font-weight:700;color:rgba(0,0,0,0.55);margin:var(--a3) 0 8px}
.mat-substep{display:none}
.mat-substep.active{display:block;animation:stegInn .22s ease}
/* skillelinje mellom delspørsmål som deler skjerm — også foran
   foto-seksjonen (som ligger i sin egen .foto-duo-beholder) */
.mat-substep.active ~ .mat-substep.active{margin-top:var(--a2);padding-top:var(--a2);border-top:1px solid var(--strek)}
.mat-substep.active ~ .foto-duo{margin-top:var(--a3);padding-top:12px;border-top:1px solid var(--strek)}

/* ── Felter ── */
.form-grid{display:grid;grid-template-columns:1fr;gap:var(--a3) 18px;margin-bottom:var(--a1)}
@media(min-width:640px){
  /* kontaktsteget og de andre 2-kolonners skjemaene: to LIKE kolonner —
     navn|telefon, e-post i full bredde, adresse|postnummer. Feltene
     fyller cellen sin, så venstre- og høyrekantene flukter */
  .form-grid.two{grid-template-columns:1fr 1fr}
}
/* kun feltets egen etikett/input — valgkort kan ligge inni et .field
   som <label class="opt-card"> og skal ikke arve disse reglene */
.field > label{display:block;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--dus);margin:0 0 var(--a1)}
.field > input,.field > select{width:100%;height:46px;border:1px solid var(--strek-sterk);border-radius:var(--r-felt);padding:0 var(--a3);font-size:15px;background:#fff;color:var(--tekst);transition:border-color .15s}
.field > textarea{width:100%;border:1px solid var(--strek-sterk);border-radius:var(--r-felt);padding:var(--a2) var(--a3);font-size:15px;background:#fff;color:var(--tekst)}
.field > input:focus,.field > select:focus,.field > textarea:focus{border-color:var(--aksent);outline:none}
.field > input::placeholder,.field > textarea::placeholder{color:rgba(0,0,0,0.5)}
.req{color:var(--aksent)}
.field-msg{display:block;font-size:12px;font-weight:600;color:var(--feil);margin-top:5px;min-height:0}
.field-msg:empty{display:none}
.live-msg{display:none;font-size:12.5px;font-weight:600;margin-top:var(--a1)}
.live-msg.vis{display:block}
.live-msg.ok{color:var(--gronn-tekst)}
.live-msg.err{color:var(--feil)}
/* cm-feltene på målesteget dimensjoneres etter innholdet — kontakt-
   feltene har INGEN egne bredder, de fyller gridcellen sin */
#s3-vb,#s3-th{max-width:150px}

/* ── Knapper og navigasjonsrad ── */
.nav{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:var(--a3);margin-top:16px}
.btn-p{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--aksent);color:#fff;border:none;border-radius:var(--r-felt);padding:0 26px;height:48px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(0,115,255,0.25);transition:background .18s,transform .18s,box-shadow .18s}
.btn-p:hover:not(:disabled){background:#0060d6;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,115,255,0.32)}
.btn-p:active:not(:disabled){transform:scale(0.97);box-shadow:0 2px 8px rgba(0,115,255,0.22)}
.btn-p:disabled{opacity:0.6;cursor:default}
/* Tilbake-knappene: invertert utgave av Neste-knappen — hvit flate,
   blå kant og blå tekst, samme størrelse, form og radius */
.btn-s,.vx-flyt-tilbake{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--aksent);border:1.5px solid var(--aksent);border-radius:var(--r-felt);padding:0 26px;height:48px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s}
.btn-s:hover,.vx-flyt-tilbake:hover{background:#f2f8ff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(27,58,107,0.10)}
.btn-s:active,.vx-flyt-tilbake:active{transform:scale(0.97)}
.btn-s svg path{stroke:var(--aksent)}
.back-btn{display:none}
/* Kontakt: «Tilbake til produktet» og «Neste steg» like brede,
   med teksten sentrert i hver */
#step1 .nav .btn-p,#step1 .nav .vx-flyt-tilbake{flex:1 1 0;max-width:230px}

/* ── Valgkort ── */
.opt-grid{display:grid;grid-template-columns:1fr;gap:12px;grid-auto-rows:1fr;margin-bottom:var(--a1)}
@media(min-width:640px){.opt-grid,.opt-grid.two,.opt-grid.stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
.opt-card{display:flex;align-items:center;gap:12px;border:1.5px solid var(--strek-sterk);border-radius:var(--r-kort);padding:var(--a3) 16px;background:#fff;cursor:pointer;user-select:none;min-height:52px;height:100%;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;text-align:left;font:inherit}
.opt-card:hover{border-color:rgba(0,115,255,0.45)}
.opt-card.sel{border-color:var(--aksent);background:#f2f8ff}
.opt-card input{display:none}
.opt-dot{width:18px;height:18px;border-radius:50%;border:2px solid rgba(27,58,107,0.22);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;transition:all .15s}
.opt-card.sel .opt-dot{background:var(--aksent);border-color:var(--aksent)}
.opt-card.sel .opt-dot::after{content:'';width:6px;height:6px;background:#fff;border-radius:50%;animation:vxPopp .18s ease-out}
/* mikrointeraksjoner: lett løft på hover (kun pekerenheter) — valget
   markeres med et mykt «pop» på radiopunkt/hake/Valgt-merke */
@media(hover:hover){
  .opt-card:hover,.mat-card:hover,.ror-card:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(27,58,107,0.07)}
}
input[type="checkbox"]:checked{animation:vxPopp .18s ease-out}
.opt-lbl{font-size:13.5px;font-weight:600;line-height:1.3;flex:1;min-width:0}
/* liten forklaringslinje under kortets hovedtekst («Ny montering eller
   bytte?»-kortene) */
.vx-opt-note{display:block;font-size:12px;font-weight:500;color:var(--dusere);margin-top:2px}
.opt-price-tag{font-size:12.5px;font-weight:700;color:var(--aksent);white-space:nowrap;margin-left:auto;flex-shrink:0}
.opt-price-tag.incl-tag{color:var(--gronn-tekst)}
.rec-badge{display:inline-flex;align-items:center;background:var(--aksent);color:#fff;font-size:9px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;flex-shrink:0;line-height:1.3}

/* Veggtype: info-knapp, forklaring og pris med undertekst */
.vx-info-btn{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(0,115,255,0.5);color:var(--aksent);background:#fff;font-size:11px;font-weight:700;font-style:italic;line-height:1;cursor:pointer;margin-left:6px;flex-shrink:0;font-family:Georgia,serif}
#veggInfo{font-size:13px;color:rgba(0,0,0,0.55);line-height:1.55;background:var(--panel);border:1px solid var(--strek);border-radius:var(--r-kort);padding:var(--a2) var(--a3);margin-top:var(--a2)}
.vx-priskol{display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin-left:auto;flex-shrink:0}
.vx-priskol .opt-price-tag{margin-left:0}
.vx-prisnote{font-size:10.5px;font-weight:600;color:var(--dusere);white-space:nowrap}

/* Måle-delsteget: illustrasjonen av innedelen ved veggbredde-feltet er
   fjernet på alle formater — bare etiketten og selve feltet står igjen */
.wall-wrap{display:none}
#vbFit .fit-ok{display:flex;align-items:center;gap:8px;background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.35);border-radius:var(--r-kort);padding:var(--a2) var(--a3);font-size:13px;font-weight:600;color:var(--gronn-tekst);margin-top:var(--a1)}
#vbFit .fit-warn{background:#fff7ed;border:1px solid rgba(245,158,11,0.4);border-radius:var(--r-kort);padding:var(--a2) var(--a3);font-size:13px;font-weight:600;color:#92400e;margin-top:var(--a1);line-height:1.5}

/* ── Foto-stegene ── */
#is-3,#us-2{display:none!important} /* tipsene komprimeres til raden under */
.foto-duo{display:block}
/* eksempelskjermen: eksempelbildet rett under overskriften, deretter
   en ren punktliste med ett tips per punkt */
.vx-tipsliste{margin:var(--a3) 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--dus);line-height:1.5}
/* eksempelbildet sentreres horisontalt i rammen (inne- og utedel),
   med en liten overskrift over — samme stil som slot-titlene */
.vx-eksempel{margin:var(--a2) auto 0;max-width:280px}
.vx-eksempel-tittel{font-size:12px;font-weight:700;letter-spacing:0.04em;color:rgba(0,0,0,0.65);margin:0 0 6px;text-align:center}
/* det ekte eksempelbildet fyller rammen (stående 3:4, som bildene er) */
.vx-eksempel-img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-kort);border:1px solid var(--strek);display:block}
/* stående plassholder, som telefonbildet som kommer */
.guide-plassholder{aspect-ratio:3/4;border:1.5px dashed rgba(27,58,107,0.22);border-radius:var(--r-kort);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px;color:var(--dusere);font-size:12px;font-weight:600}
.guide-plassholder svg{color:rgba(27,58,107,0.3)}
.guide-liste{display:none}
.vx-soner{display:grid;grid-template-columns:1fr;gap:var(--a3)}
@media(min-width:900px){.vx-soner{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vx-soner .foto-slot{border:1px solid var(--strek);border-radius:var(--r-kort);padding:12px;margin:0}
#slot-ror{grid-column:1/-1}
.foto-slot-tittel{font-size:12px;font-weight:700;letter-spacing:0.04em;color:rgba(0,0,0,0.65);margin:0 0 4px}
.foto-hjelp{font-size:12px;color:var(--dus);margin:0 0 var(--a2)}
/* opplastingsrammen: stor og stående (høyere enn bred), sentrert i
   beholderen — en plassholder for det vertikale telefonbildet */
.foto-tom{aspect-ratio:3/4;max-width:280px;margin:0 auto;border:1.5px dashed rgba(0,115,255,0.35);border-radius:var(--r-kort);background:#fafcff;padding:13px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.foto-ta{display:inline-flex;align-items:center;gap:8px;background:var(--aksent);color:#fff;border-radius:var(--r-felt);padding:11px 18px;font-size:13px;font-weight:700;cursor:pointer}
.foto-galleri{font-size:12.5px;font-weight:600;color:var(--aksent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* det opplastede bildet beholder nøyaktig samme stående ramme som den
   tomme plassholderen — bildet fyller rammen (beskjæres), rammen
   endrer aldri form. Knappene (Ta på nytt / Fjern) står under bildet */
.foto-thumb{max-width:280px;margin:0 auto;border-radius:var(--r-kort);overflow:hidden;border:1.5px solid var(--strek);background:#fff}
.foto-thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.foto-thumb-knapper{display:flex;gap:10px;padding:var(--a2) 12px;align-items:center}
.foto-omigjen{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--aksent);cursor:pointer}
.foto-fjern{background:none;border:none;font-size:12.5px;font-weight:600;color:var(--feil);cursor:pointer;margin-left:auto;padding:0}
.ror-foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:var(--a2);margin-bottom:var(--a2)}
.ror-foto-grid img{width:100%;height:90px;object-fit:cover;border-radius:var(--a2);display:block}
/* «Jeg kan ikke laste opp bilde nå» (bygges av overstyringen) */
.vx-fallback{margin-top:var(--a3);border-top:1px solid var(--strek);padding-top:var(--a3)}
.vx-fallback label{display:flex;gap:9px;align-items:flex-start;font-size:13px;font-weight:600;color:rgba(0,0,0,0.6);cursor:pointer}
.vx-fallback input{width:16px;height:16px;accent-color:var(--aksent);margin-top:1px;flex-shrink:0}
.vx-fallback textarea{width:100%;border:1px solid var(--strek-sterk);border-radius:var(--r-felt);padding:var(--a2) 12px;font-size:14px;margin-top:var(--a2)}

/* ── Utedel-plassering: bildekort ── */
#us-1 .opt-card{flex-direction:column;align-items:center;text-align:center;gap:9px;padding:16px 12px 13px;position:relative}
#us-1 .opt-card .opt-dot{position:absolute;top:10px;right:10px}
#us-1 .opt-card .opt-lbl{flex:0 0 auto}
.ut-foto-plass{width:100%;aspect-ratio:4/5;border:1.5px dashed rgba(0,115,255,0.35);border-radius:var(--a2);background:var(--panel);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--dusere);font-size:11px;font-weight:600}
.ut-foto-img{width:100%;aspect-ratio:4/5;object-fit:contain;background:var(--panel);border-radius:var(--a2);border:1px solid var(--strek)}
.vx-ukjent{width:100%;aspect-ratio:4/5;border-radius:var(--a2);border:1.5px dashed rgba(0,0,0,0.18);background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:rgba(0,0,0,0.28)}
/* fire like kort på én rad på desktop, så de stående bildene får
   plass uten at steget vokser forbi én viewport */
@media(min-width:900px){#us-1 .opt-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── Rørlengde ── */
.hint-boks{display:flex;gap:9px;background:var(--panel);border:1px solid var(--strek);border-radius:var(--r-kort);padding:var(--a2) var(--a3);font-size:12.5px;color:rgba(0,0,0,0.6);margin:0 0 var(--a3)}
.ror-grid{display:grid;grid-template-columns:1fr;gap:12px;grid-auto-rows:1fr}
@media(min-width:760px){.ror-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ror-card{position:relative;border:1.5px solid var(--strek-sterk);border-radius:var(--r-kort);background:#fff;padding:16px;cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.ror-card:hover{border-color:rgba(0,115,255,0.45)}
.ror-card.sel{border-color:var(--aksent);background:#f2f8ff}
.ror-radio{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;border:2px solid rgba(27,58,107,0.22);display:flex;align-items:center;justify-content:center;background:#fff;transition:border-color .15s,background .15s}
.ror-card.sel .ror-radio{border-color:var(--aksent);background:var(--aksent)}
.ror-dot{width:6px;height:6px;border-radius:50%;background:transparent}
.ror-card.sel .ror-dot{background:#fff;animation:vxPopp .18s ease-out}
.ror-meter{display:flex;gap:3px;margin:2px 24px var(--a2) 0}
.ror-meter-seg{height:5px;flex:1;border-radius:99px;background:var(--strek)}
.ror-meter-seg.fill{background:var(--aksent)}
.ror-title{font-size:14.5px;font-weight:700;margin:0 0 2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* «Anbefalt»-merket på Standard-kortet er fjernet (alle formater) */
.ror-card .rec-badge{display:none}
/* rørlengden er hovedinformasjonen: stor og tydelig rett under navnet */
.ror-lengde{font-family:var(--font-head);font-size:17px;font-weight:800;color:var(--tekst);margin:0 0 2px}
.ror-detail{font-size:12.5px;color:var(--dus);margin:0 0 var(--a2)}
.ror-price{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--navy);margin:0}
.ror-vat{font-size:11px;color:var(--dusere);margin:2px 0 0}

/* ── Materiell ── */
.mat-grid{display:grid;grid-template-columns:1fr;gap:var(--a2);grid-auto-rows:1fr;margin-bottom:var(--a1)}
@media(min-width:640px){.mat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mat-card{position:relative;display:flex;flex-direction:column;border:1.5px solid var(--strek-sterk);border-radius:var(--r-kort);background:#fff;cursor:pointer;overflow:hidden;user-select:none;transition:border-color .15s,background .15s,transform .15s,box-shadow .15s}
.mat-card:hover{border-color:rgba(0,115,255,0.45)}
/* én konsistent bildehøyde på alle materiell-kort, kompakt nok til at
   selv brakett-skjermen (6 kort) holder seg innenfor én viewport */
.mat-card img{width:100%;height:80px;object-fit:contain;background:#fff;padding:6px;display:block}
.mat-lbl{padding:6px 10px 7px;font-size:12.5px;font-weight:700;border-top:1px solid var(--strek);flex:1;background:var(--panel)}
/* hele beskrivelsen vises alltid — ingen klipping. Kortene i samme rad
   holder lik høyde via grid-auto-rows:1fr (raden følger det høyeste) */
.mat-desc{font-size:12.5px;font-weight:500;color:rgba(0,0,0,0.72);margin:3px 0 0;line-height:1.45}
/* brakettene i tre kolonner: 6 kort = 2 rader */
@media(min-width:640px){#ms-2 .mat-grid,#tillegg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}
/* Filtrerte kortsett (vx-smal-N settes av overstyringen): 1-2 synlige
   kort sentreres horisontalt med samme kortbredde som i fullt rutenett */
@media(min-width:640px){
  .mat-grid.vx-smal-1{grid-template-columns:minmax(0,calc((100% - 10px)/2));justify-content:center}
  #ms-2 .mat-grid.vx-smal-2,#tillegg-grid.vx-smal-2{grid-template-columns:repeat(2,minmax(0,calc((100% - 20px)/3)));justify-content:center}
  #ms-2 .mat-grid.vx-smal-1,#tillegg-grid.vx-smal-1{grid-template-columns:minmax(0,calc((100% - 20px)/3));justify-content:center}
}
/* prismerket ligger i egen stripe ØVER bildet (ikke oppå det), så hele
   produktet alltid er synlig — order:-1 løfter det først i kortet, og
   Valgt-merket (absolutt topp-høyre) lander i samme stripe */
.mat-badge{position:static;order:-1;align-self:flex-start;margin:9px 10px 0;font-size:12px;font-weight:700;padding:4px 10px;border-radius:var(--r-felt);pointer-events:none}
.mat-badge.incl{background:rgba(16,185,129,0.14);color:var(--gronn-tekst)}
.mat-badge.price{background:#e8f1ff;color:var(--aksent)}
.mat-card.sel{border-color:var(--aksent)}
.mat-card.sel .mat-lbl{background:#f2f8ff;border-top-color:rgba(0,115,255,0.15)}
/* valgt-rammen tegnes på innsiden så den aldri klippes; ramme og
   Valgt-merke animeres mykt inn når kortet velges */
.mat-card.sel::before{content:'';position:absolute;inset:0;border:2px solid var(--aksent);border-radius:inherit;pointer-events:none;z-index:2;animation:vxFade .18s ease-out}
.mat-card.sel::after{content:'Valgt';position:absolute;top:10px;right:10px;font-size:9px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:var(--aksent);color:#fff;z-index:1;pointer-events:none;animation:vxPopp .2s ease-out}
@keyframes vxFade{from{opacity:0}to{opacity:1}}
/* materiellskjermene: toppstegets overskrift og undertekst er borte —
   skillelinjen ligger på delskjermens egen undertekst */
#step8 .mat-section-desc{border-bottom:1px solid var(--strek);padding-bottom:var(--a3);margin-bottom:var(--a4)}

/* ── Oppsummeringen (steg 6) ── */
#kvittering .kv-kol{display:contents}
@media(min-width:1024px){
  #kvittering{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--a4);align-items:start}
  #kvittering .kv-kol{display:block}
  /* én vertikal skillelinje mellom venstre- og høyrekolonnen */
  #kvittering .kv-kol + .kv-kol{border-left:1px solid var(--strek);padding-left:var(--a4)}
}
/* seksjonene ligger åpent i kolonnen — tynne skillelinjer mellom dem
   i stedet for at hver seksjon pakkes inn i sin egen boks */
.kv-blokk{border:none;border-radius:0;padding:0;margin:0 0 var(--a3);background:transparent}
#kvittering .kv-blokk + .kv-blokk{border-top:1px solid var(--strek);padding-top:var(--a3)}
.kv-topp{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--a2)}
.kv-tittel{font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--dusere);font-family:var(--font-caps)}
.kv-rediger{background:none;border:none;color:var(--aksent);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.kv-tekst{font-size:13.5px;color:rgba(0,0,0,0.7);line-height:1.6;margin:0}
.kv-modell{display:flex;align-items:center;gap:var(--a3)}
.anb-alt-img{width:74px;height:62px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 42%,#2A4E8A 0%,#1B3A6B 70%);border-radius:var(--r-felt);padding:7px}
.anb-alt-img img{max-width:100%;max-height:100%;object-fit:contain}
.kv-modell-navn{font-size:14.5px;font-weight:700;margin:0}
.kv-modell-spec{font-size:12px;color:var(--dus);margin:2px 0 0}
.kv-modell-pris{font-family:var(--font-head);font-weight:800;color:var(--aksent);font-size:15px;white-space:nowrap}
.kv-rad{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13.5px;font-weight:600;color:rgba(0,0,0,0.72);padding:3px 0}
/* miniatyrbilde av valgt materiell i oppsummeringen */
.kv-rad-venstre{display:flex;align-items:center;gap:10px;min-width:0}
.kv-mini{width:42px;height:42px;object-fit:contain;background:var(--panel);border:1px solid var(--strek);border-radius:6px;flex-shrink:0}
/* etiketten bryter over flere linjer ved behov; prisen står alltid for
   seg selv til høyre og kan aldri overlappe teksten. (Nowrap-regelen
   traff før også etiketten inne i venstredelen — derav overlapp) */
.kv-rad > span:last-child{white-space:nowrap;font-weight:700;flex-shrink:0}
.kv-rad-venstre > span{min-width:0;overflow-wrap:anywhere}
.kv-mat-sub{font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--dusere);margin:var(--a2) 0 2px;font-family:var(--font-caps)}
.kv-rad .kv-inkl{color:var(--gronn-tekst)}
/* Total: lett uthevet flate uten tung boks — en tynn skillelinje
   ligger i lufta over den, som mellom de andre seksjonene */
.kv-total{display:flex;justify-content:space-between;align-items:center;background:#e8f1ff;border:none;border-radius:var(--r-kort);padding:var(--a3) 18px;margin:var(--a4) 0 var(--a1);position:relative}
.kv-total::before{content:'';position:absolute;left:0;right:0;top:calc(-1 * var(--a2));border-top:1px solid var(--strek)}
.kv-total span:first-child{font-size:14px;font-weight:800}
.kv-total-pris{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--aksent);letter-spacing:-0.5px;white-space:nowrap}
.kv-total-note{font-size:11.5px;color:var(--dusere);margin:0 0 var(--a3)}
.kv-foto-rad{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.kv-foto-rad img{width:86px;height:64px;object-fit:cover;border-radius:var(--r-felt);border:1px solid var(--strek)}
.kv-foto-lenker{display:flex;gap:var(--a3);flex-wrap:wrap}
.send-note{font-size:12px;color:var(--dusere);margin-top:var(--a2)}
.rediger-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff8e6;border:1px solid rgba(245,158,11,0.35);border-radius:var(--r-kort);padding:var(--a2) var(--a3);font-size:13px;margin-bottom:var(--a3);flex-wrap:wrap}
.rediger-banner button{background:none;border:none;color:var(--aksent);font-weight:700;cursor:pointer;font-size:13px;padding:0}

/* Kommentarfeltet på tilbudssteget: god plass å skrive på — kan dras
   høyere (kun vertikalt, så bredden alltid flukter med kolonnen) */
#s7-kommentar{min-height:120px;resize:vertical}
/* Bestillingsfeltene i høyrekolonnen på tilbudssteget (send-knappen
   er flyttet ned i stegets knapperad) */
#vxBestill{margin-top:var(--a3);border-top:1px solid var(--strek);padding-top:var(--a3);display:flex;flex-direction:column;gap:12px}
#vxBestill .field{margin:0!important}
/* Obligatorisk bekreftelse + send-knapp: én ryddig blokk nederst i
   høyrekolonnen — avkryssing først, knappen rett under. Boksen har
   samme oppbygning som samtykke-boksen på Kontakt-steget */
#vxBekreftRad{display:flex;gap:10px;align-items:flex-start;cursor:pointer;margin:4px 0 0}
#vxBekreftRad input{width:17px;height:17px;margin-top:2px;accent-color:var(--aksent);flex-shrink:0;cursor:pointer}
#vxBekreftRad span{font-size:13px;color:rgba(0,0,0,0.65);line-height:1.55;font-weight:500}
/* knappen dimensjoneres etter innholdet, aldri hele kolonnebredden */
#vxBestill #sendBtn{align-self:flex-start;width:auto}
/* Tilbudssteget: knapperaden har bare Tilbake — nederst til venstre */
#step9 .nav{flex-direction:row;justify-content:flex-start}

/* ── Prisfoten ── */
#vxFot{grid-column:1/-1;border-top:1px solid var(--strek);background:var(--panel);padding:var(--a3) 44px}
.price-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pb-lbl{font-size:13px;font-weight:700;color:var(--dus)}
.pb-sub{display:block;font-size:11px;font-weight:500;color:var(--dusere)}
.pb-val{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--aksent);letter-spacing:-0.5px;white-space:nowrap}
body.steg-tilbud #vxFot{display:none} /* totalen står i oppsummeringen */

/* Inngangen bor nå i modalen på produktsiden (components/PrisModal.tsx) */

/* ── Bevegelse av: alle bevegelsesbaserte animasjoner og løft slås av —
   fargeoverganger og øyeblikkelige tilstandsskifter beholdes ── */
@media(prefers-reduced-motion:reduce){
  .step.active,.mat-substep.active,.pr-item.current .pr-dot,.pr-dot.pr-pop,.pr-dot.pr-pop svg path,
  .opt-card.sel .opt-dot::after,.ror-card.sel .ror-dot,.mat-card.sel::before,.mat-card.sel::after,
  input[type="checkbox"]:checked{animation:none!important}
  .btn-p:hover:not(:disabled),.btn-p:active:not(:disabled),.btn-s:hover,.btn-s:active,
  .vx-flyt-tilbake:hover,.vx-flyt-tilbake:active,.opt-card:hover,.mat-card:hover,.ror-card:hover{transform:none}
}

/* ── Mobil: rammen bort — veiviseren fyller hele skjermen kant til
   kant. Innholdet toppjusteres og komprimeres så de fleste stegene får
   plass på én skjermhøyde. Desktoprammen er urørt ── */
@media(max-width:1023px){
  body{padding:0}
  /* sikkerhetsnett mot sidelengs draging — de reelle fiksene ligger på
     elementene under, dette fanger fremtidige syndere */
  html,body{overflow-x:hidden}
  /* radene omdefineres for én kolonne: toppanelet og foten er kompakte
     (auto), innholdet får resten (1fr) og starter øverst — uten dette
     ville desktopens 1fr-rad strukket det grå toppanelet og skjøvet
     steginnholdet mot bunnen på korte steg */
  #vxApp{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;margin:0;border:none;border-radius:0;box-shadow:none;width:100%;max-width:none;min-height:100dvh;overflow-x:hidden}
  #vxSide{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 16px;border-right:none;border-bottom:1px solid var(--strek)}
  /* toppen holdes ren på mobil: ingen logo, og produktkortet er bare
     pumpebildet + «Du får nå pris på [modell]» + Endre valg-lenken */
  #vxLogo{display:none}
  #vxSide .prog-rail{display:none}
  #vxProduktKort{margin:0;flex:1 1 auto;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 10px}
  #vxProduktKort img{width:44px;height:44px;margin:0}
  #vxProduktKort .vpk-lbl,#vxProduktKort .vpk-farge,#vxProduktKort .vpk-navn,#vxProduktKort .vpk-pris{display:none}
  #vxProduktKort .vpk-mobil{display:block;font-size:12.5px;font-weight:600;line-height:1.4}
  /* på Tilbud er pumpa alt oppført i oppsummeringen — hele produkt-
     kortet (bilde, tekst og Endre valg) skjules der på mobil */
  body.steg-tilbud #vxProduktKort{display:none}
  #vxProduktKort a{margin-left:auto;flex-shrink:0;font-size:11.5px}
  #vxMobProgress{display:block}
  /* én samlet indikator på mobil: delskjermnavnet flettes inn i
     «Steg X av 5»-linjen (overstyringen), og delindikatoren skjules */
  #vxDelbar{display:none!important}
  /* innholdsblokken (overskrift, skillelinje, kort og knapperad)
     sentreres som ÉN enhet i den ledige høyden — lik luft over og
     under på korte steg (ingen 180px-tak som på desktop), og innhold
     som ikke får plass toppjusteres med vanlig scrolling. Strammere
     luft internt beholdes */
  #vxHoved{padding:14px 16px 18px}
  #vxHoved::before,#vxHoved::after{content:'';flex:1 1 0;max-height:none}
  .step h2{font-size:20px}
  .step-desc{font-size:13px;margin-bottom:12px;padding-bottom:10px}
  .step h2.vx-uten-desc{padding-bottom:10px;margin-bottom:12px}
  #vxDelbar{margin-bottom:8px}
  .nav{margin-top:12px}
  .opt-grid{gap:8px}
  .opt-card{padding:10px 12px;min-height:46px}
  /* Rørstrekklengde: tre kompakte kort på én skjermhøyde — de
     dekorative målesegmentene og momslinjen per kort vises ikke på
     mobil (prisen i foten sier ink. moms) */
  .ror-grid{gap:7px}
  .ror-card{padding:9px 12px}
  .ror-meter,.ror-vat{display:none}
  .ror-title{font-size:13.5px}
  .ror-lengde{font-size:15.5px}
  .ror-detail{margin-bottom:4px}
  .ror-price{font-size:16px}
  .hint-boks{font-size:12px;padding:8px 10px;margin-bottom:8px}
  #step7 .nav{margin-top:10px}
  /* materiellkortene: kompakte bilder og strammere tekst (16/10-veksten
     på desktop ville gitt enorme bilder i én kolonne) */
  .mat-grid{gap:8px}
  /* to-valgs-skjermene (Kanaler, Nettkabel-farge, Dempere og filtrert
     Brakett med to valg): kortene side om side i én rad */
  #ms-1 .mat-grid,#ms-3 .mat-grid,#nettkabel-farge-grid,.mat-grid.vx-smal-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mat-card img{height:72px;padding:4px}
  #ms-1 .mat-card img,#ms-3 .mat-card img,#ms-4 .mat-card img{height:108px;aspect-ratio:auto}
  #ms-2 .mat-grid .mat-card img,#tillegg-grid .mat-card img{height:96px}
  .mat-lbl{padding:5px 9px 6px;font-size:12px}
  .mat-desc{font-size:11.5px}
  .mat-sub-h3{font-size:15px}
  #step8 .mat-section-desc{font-size:12.5px;margin-bottom:10px;padding-bottom:8px}
  /* nettkabel-lengdene 2 og 2, plasseringen 2x2 og tilvalgene 2x3 */
  #nettkabel-lengde-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #us-1 .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tillegg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  /* iOS Safari auto-zoomer på felt med skrift under 16px ved fokus —
     ALLE skrivefelt i veiviseren holder minst 16px på mobil
     (pinch-zoom i viewporten røres ikke). Klasse-linjen trengs i
     tillegg til element-linjen for å slå basisreglenes spesifisitet */
  input:not([type='checkbox']):not([type='radio']):not([type='file']),select,textarea{font-size:16px}
  .field > input,.field > select,.field > textarea,.vx-fallback textarea{font-size:16px}
  /* fotoskjermene: stegoverskriften dubler delskjermens egen overskrift
     og skjules; mindre eksempel og tettere punkter, så Neste-knappen
     står på skjermen */
  #step5.vx-fotoskjerm > h2,#step6.vx-fotoskjerm > h2{display:none}
  .vx-eksempel{max-width:160px}
  .vx-tipsliste{margin-top:10px;gap:4px;font-size:13px}
  /* Kontakt: adresse bred + postnummer smal på samme rad */
  #step1 .form-grid.two{grid-template-columns:minmax(0,1fr) 104px}
  #step1 .form-grid.two > .field{grid-column:1 / -1}
  #step1 .form-grid.two > .vx-felt-adresse{grid-column:1}
  #step1 .form-grid.two > .vx-felt-post{grid-column:2}
  #vxFot{padding:10px 16px}
  .pb-val{font-size:20px}
}