/* skiltdesigner.css — GENERERT av bygg.py fra kilde/grensesnitt.src.html (mockupen etter sluttrettingen 16.10) */
/* grunnreglene fra skjelettet */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif}img{max-width:100%}[hidden]{display:none!important}
:root{
  --bg:#f4ede2; --bg2:#f0e8dc; --bg3:#eae0d0; --bg4:#e2d6c4; --surface:#faf6ec;
  --sand-line:#d8cdbe; --sand-line-strong:#c9bca8;
  --text:#1e1510; --text-dim:#463a2c; --text-muted:rgba(30,21,16,.84);
  --gold:#a07f4d; --gold-dark:#6f5a33; --gold-hover:#584626; --gold-light:#b7986a;
  --shadow-sm:0 1px 4px rgba(0,0,0,.06); --shadow-md:0 4px 16px rgba(0,0,0,.08); --shadow-gold:0 4px 20px rgba(163,115,51,.20);
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:.2s; --dur-mid:.35s; --dur-slow:.6s;
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-label:'Source Sans 3', system-ui, sans-serif;
  --font-body:'Source Sans 3', system-ui, sans-serif;
  --slor:rgba(30,21,16,.42);
  --kant-plate:rgba(30,21,16,.2);
  --feil:#a8322f;
}
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:inherit}
html{font-variant-numeric:lining-nums}
/* skjelettets body{font:…} nullstiller font-variant-numeric — derfor står den her også (Klassisk ga «ı7» i skriftprøven) */
body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.5;font-variant-numeric:lining-nums;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button,input,output{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
label:has(> input.vh:focus-visible),.fil-knapp:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.vh{position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.melder{position:fixed}
.etikett{display:block;margin:0 0 8px;font:600 12px/1.3 var(--font-label);letter-spacing:.2em;text-transform:uppercase;color:var(--text)}

/* ---------- rammen: én skjerm, fire felt ---------- */
.app{
  --app-h:100dvh;
  height:calc(var(--app-h) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  transform:translateY(var(--vv-top,0px));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  grid-template-areas:"topp" "vegg" "hoved" "bunn";
  overflow:hidden;overflow:clip;   /* clip: kan ikke rulles, heller ikke av scrollIntoView/fokus */
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);
}

/* ---------- topp: tilbake, steg, pris, fremdrift ---------- */
.topp{grid-area:topp;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;column-gap:6px;padding:4px 16px 6px 6px;background:var(--bg)}
.pil{width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:none;color:var(--text)}
.pil svg{width:22px;height:22px}
/* steg 1 har ingen tilbakepil: topplinja starter på samme venstrekant som innholdet.
   Runde 6: stegene har et navn (data-del) i tillegg til nummeret — postkassen har sju steg (Reklame før Se over), de andre
   seks, så CSS-en henger på navnet og ikke på tallet. */
.app[data-del="skilt"] .pil{display:none}
.app[data-del="skilt"] .topp{grid-template-columns:minmax(0,1fr) auto;padding-left:16px}
.stegtekst{margin:0;font-size:15px;line-height:1.3;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stegtekst b{font-weight:600;color:var(--text)}
.topp-pris{font:600 17px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.fremdrift{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sand-line);overflow:hidden}
.fremdrift i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(.1667);transition:transform var(--dur-mid) var(--ease-out)}

/* ---------- veggen: skiltet i riktig innbyrdes størrelse ---------- */
.vegg{grid-area:vegg;position:relative;display:flex;flex-direction:column;min-height:0;height:clamp(124px,calc(var(--app-h) * .27),220px);padding:12px 16px 8px;background:var(--bg3)}
/* Reklame: de to valgene ER skiltet (med og uten linja), så veggen trengs ikke over dem på telefonen */
.app[data-del="skilt"] .vegg,.app[data-del="over"] .vegg{display:none}
.app.tastatur .vegg{height:clamp(84px,calc(var(--app-h) * .3),150px);padding-top:8px;padding-bottom:4px}
.figur{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.figur svg{display:block;flex:0 0 auto}
.mal{position:relative;flex:0 0 auto;display:flex;justify-content:center;align-items:center;height:16px;margin-top:8px;min-width:24px}
.mal::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--gold)}
.mal::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 4px);height:9px;border-left:1px solid var(--gold);border-right:1px solid var(--gold)}
.mal span{position:relative;z-index:1;padding:0 8px;background:var(--bg3);font-size:13px;line-height:16px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
/* smal plate: målet står under streken i stedet for å bryte den */
.mal.smal{height:9px;margin-bottom:18px}
.mal.smal span{position:absolute;top:13px;left:50%;transform:translateX(-50%);padding:0;background:none}
/* «Eksempel»: en rolig merkelapp ved skiltet så lenge kunden ikke har skrevet noe (eksempelet graveres ikke).
   På telefonen får merkelappen sin egen stripe over skiltet, så den aldri ligger oppå plata. */
.eks-merke{position:absolute;top:10px;left:16px;z-index:1;padding:1px 8px;border:1px solid var(--sand-line-strong);border-radius:4px;background:var(--surface);font:600 11px/1.3 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);pointer-events:none;white-space:nowrap}
.vegg.har-eks .figur{padding-top:20px}
/* «Se større»: hjørnet over skiltet, der plata aldri når */
.se-storre{position:absolute;top:2px;right:4px;z-index:1;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:4px;background:none;color:var(--text-dim)}
.se-storre svg{width:20px;height:20px}
#veggSvg,#storSvg{cursor:zoom-in}
.app.tastatur .vegg .eks-merke,.app.tastatur .vegg .se-storre{display:none}
.app.tastatur .vegg.har-eks .figur{padding-top:0}
/* «Juster plassering»: en rolig sekundærknapp i hjørnet under skiltet, fra steg 4 og ut (den vanlige kunden trenger den aldri) */
.juster-knapp{position:absolute;left:4px;bottom:0;z-index:1;display:none;align-items:center;gap:6px;min-width:44px;min-height:44px;padding:0 8px;border:0;border-radius:4px;background:none;color:var(--text-dim);font:600 12px/1.3 var(--font-label);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.juster-knapp svg{flex:0 0 auto;width:14px;height:14px}
.juster-lang{display:none}
.app[data-del="innhold"] .vegg .juster-knapp,.app[data-del="feste"] .vegg .juster-knapp{display:inline-flex}
.app.juster .juster-knapp,.app.tastatur .juster-knapp{display:none!important}
/* en tom plata har ingenting å justere (sluttrettingen: «Start med tomt skilt») — da står ikke knappen */
.juster-knapp.ingen{display:none!important}
/* hjørnet velges når skiltet er tegnet: det første av de fire der knappen ikke ligger over plata, mållinja eller merkelappene */
.juster-knapp[data-hjorne="oppe-v"]{top:2px;bottom:auto}
.juster-knapp[data-hjorne="nede-h"]{left:auto;right:4px}
.juster-knapp[data-hjorne="oppe-h"]{top:2px;bottom:auto;left:auto;right:52px}
/* et bredt skilt på en smal telefon: ingen ledige hjørner til ordet — da står bare pila (navnet ligger i aria-label) */
.juster-knapp.kompakt{gap:0;padding:0;justify-content:center;width:44px}
.juster-knapp.kompakt > span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.juster-knapp.kompakt svg{width:18px;height:18px}

/* ---------- hovedfeltet: ett steg om gangen ---------- */
.hoved{grid-area:hoved;position:relative;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* rett etter et stegbytte (og etter «Angre», svaret på et spørsmål og når «Juster plassering» åpnes eller lukkes) tar ikke
   innhold og knapper imot trykk: et dobbelttrykk treffer ikke det som nettopp havnet under fingeren — heller ikke pila øverst */
.app.bytter .hoved,.app.bytter .bunn,.app.bytter .vegg,.app.bytter .topp,.app.sperret .hoved{pointer-events:none}
.steg,.juster-panel{position:relative;max-width:560px;margin:0 auto;padding:24px 16px 32px}
.steg.inn,.juster-panel.inn{animation:stegInn var(--dur-mid) var(--ease-out)}
@keyframes stegInn{from{opacity:0;transform:translateX(var(--fra,18px))}}
.steg h1{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.15;color:var(--text);text-wrap:balance}
.hjelp{margin:0 0 24px;font-size:15px;line-height:1.5;color:var(--text-dim);max-width:60ch;text-wrap:pretty}
legend{padding:0}
.blokk{margin-top:28px}
.notis{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.smatt{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.melding{margin:16px 0 0;padding:10px 12px;background:var(--bg2);border-top:3px solid var(--gold);font-size:15px;line-height:1.5;color:var(--text);text-wrap:pretty}
.melding.feil{border-top-color:var(--feil);color:var(--feil)}
.melding.blink{animation:blink var(--dur-slow) var(--ease-out)}
@keyframes blink{from{opacity:.35}}
.lenkeknapp{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 2px;border:0;background:none;color:var(--gold-dark);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lenkeknapp.demp{color:var(--text-dim)}
.rull-luft{height:0}

/* ---------- steg 1: tre kort ---------- */
.kort{display:grid;grid-template-columns:96px minmax(0,1fr) 16px;gap:16px;align-items:center;width:100%;padding:12px 14px 12px 12px;text-align:left;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.kort + .kort{margin-top:12px}
/* 320 px: «Postkasseskilt» trenger 118 px — litt mindre luft mellom skissen og teksten, så navnet får plass */
@media (max-width:359px){.kort{column-gap:12px}}
.kort-figur{display:flex;align-items:center;justify-content:center;width:96px;height:80px;background:var(--bg3);border-radius:2px}
.kort-navn{display:block;font-family:var(--font-display);font-size:22px;line-height:1.2;color:var(--text)}
.kort-bruk{display:block;margin-top:2px;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:balance}
.kort-pris{display:block;margin-top:6px;font:600 15px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums}
.kort-pil{width:16px;height:16px;color:var(--text-dim)}
/* valgt = gullrammen, på alle kort og fliser (steg 1, skrift, figurer, motiv, ramme, størrelse) */
.kort[aria-pressed="true"]{border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
.kort:active{background:var(--bg2)}
/* mens fila lastes: tre rolige kortrammer i samme høyde som kortene, og én linje (ingen animasjon) */
.kort.plass{display:flex;align-items:center;height:106px;padding-left:20px;pointer-events:none}
.laster{font-size:15px;line-height:1.5;color:var(--text-dim)}

/* ---------- steg 3: materiale og farge ---------- */
/* «Våre forslag» (runde 6): det som kan sendes nå, står først — sort aluminium som et bredt kort med materialet og
   leveringen. Akrylforslagene står samlet under én rolig etikett («Akryl – leveres fra november») i stedet for et merke
   på hver prøve. Hver prøve: plata, «Aa» i graveringsfargen, navnet og materialet under. */
.forslag-felt{border:0;margin:0;padding:0;min-width:0}
/* «Alle materialer» (kontrollen etter runde 6): en rolig lenke på samme linje som «Våre forslag» — første skjerm sier at
   stål, farget aluminium og alle akrylfargene står under forslagene. Litt mer luft under etiketten, så lenkens
   treffområde (44 px) ikke ligger over det første forslaget. */
.forslag-topp{position:relative}
.forslag-felt > legend{margin-bottom:14px}
.til-alle{position:absolute;top:-14px;right:-2px;z-index:1}
.forslag{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;margin:0 -4px}
.forslag-valg{display:flex;flex-direction:column;gap:8px;min-width:0;padding:4px;border-radius:4px;cursor:pointer}
.forslag-valg .plate{aspect-ratio:3/2;font-size:22px}
.forslag-tekst{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:center}
.forslag-navn{font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:balance}
.forslag-stoff{font-size:12px;line-height:1.3;color:var(--text-dim)}
.forslag-valg:has(input:checked) .plate{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold-dark)}
.forslag-valg:has(input:checked) .forslag-navn{color:var(--text)}
/* bredt kort: plata til venstre, navnet, materialet og «Kan sendes nå» til høyre */
.forslag-bred{margin:0 -4px}
.forslag-bred .forslag-valg{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);align-items:center;column-gap:14px}
.forslag-bred .forslag-tekst{text-align:left;gap:2px}
.forslag-bred .forslag-navn{font-size:17px;color:var(--text)}
.forslag-bred .forslag-stoff{font-size:15px}
.forslag-status{font-size:13px;line-height:1.3;color:var(--text-dim)}
.forslag-gruppe{margin:20px 0 10px;font-size:15px;line-height:1.3;color:var(--text-dim)}
.valgt-farge{margin:16px 0 0}
.valgt-navn{display:block;font-size:17px;line-height:1.3}
.valgt-info{display:block;font-size:15px;line-height:1.4;color:var(--text-dim);text-wrap:pretty}
.valgt-info b{font-weight:600;color:var(--gold-dark);font-variant-numeric:tabular-nums}
.valgt-tillegg{display:block;font:600 15px/1.4 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums}
.valgt-tillegg.uten{font:400 15px/1.4 var(--font-body);color:var(--text-dim)}
/* «Alle materialer» står åpent under forslagene: de fire typene som en ren liste (luft, ingen streker).
   Sluttrettingen: en type er en åpne/lukke-knapp (aria-expanded), ikke et radiovalg — før så et trykk på «Stål» ut som et valg
   (radiomerket ble fylt) uten å bytte materialet. Radiomerket viser bare typen til kundens materiale (.er-valgt); typen
   kunden ser på, står åpnet med pila opp og fargene rett under seg (#farger flyttes inn i .type.apen). */
.alle-mat{margin-top:32px}
.typer{border:0;margin:0;padding:0;min-width:0}
.type + .type{margin-top:4px}
.type-rad{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) auto;grid-template-areas:"merke navn pris" ". kort kort" ". tilgang tilgang";column-gap:12px;align-items:start;width:100%;margin:0;padding:10px 0;border:0;border-radius:4px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.radiomerke{grid-area:merke;position:relative;width:20px;height:20px;margin-top:2px;border:1.5px solid var(--text-dim);border-radius:50%}
.type.er-valgt .radiomerke,.inngang:has(input:checked) .radiomerke{border-color:var(--gold-dark)}
.type.er-valgt .radiomerke::after,.inngang:has(input:checked) .radiomerke::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold-dark)}
.type-navn{grid-area:navn;display:block;font-size:17px;line-height:1.3;color:var(--text)}
/* pila etter navnet: ned = lukket, opp = åpnet (samme form som «Flere valg») */
.type-navn::after{content:"";display:inline-block;width:7px;height:7px;margin:0 0 4px 10px;border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out)}
.type-rad[aria-expanded="true"] .type-navn::after{transform:translateY(3px) rotate(-135deg)}
/* fargene står rett under typen som er åpnet, på linje med teksten i raden */
.type .farger{margin:0 0 16px 32px}
.type-kort{grid-area:kort;display:block;margin-top:2px;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.type-tilgang{grid-area:tilgang;display:block;margin-top:2px;font-size:13px;line-height:1.4;color:var(--text-dim);text-wrap:pretty}
.type-pris{grid-area:pris;margin-top:1px;font:600 15px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums;white-space:nowrap}
.type-pris.uten{font:400 13px/1.3 var(--font-body);color:var(--text-dim)}
.farger{margin:20px 0 8px;padding:0;border:0;min-width:0}
/* typene er et filter (kontrollen etter runde 6): viser kunden en annen type enn materialet sitt, sier én linje over prøvene
   hva som er valgt — et trykk på typen bytter aldri materialet */
.type-valgt{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.type-valgt b{font-weight:600;color:var(--text)}
.prover{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;margin:0 -4px}
.prove{position:relative;display:block;padding:4px;border-radius:4px;cursor:pointer}
.plate{display:flex;align-items:center;justify-content:center;aspect-ratio:5/4;border-radius:3px;box-shadow:inset 0 0 0 1px var(--kant-plate);font-size:17px;line-height:1;transition:box-shadow var(--dur-fast) var(--ease-out)}
.prove:has(input:checked) .plate{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold-dark)}
/* farger som bare lages i 150 × 105 mm, merket når kundens størrelse er en annen (akrylens november står ved typen) */
.prove-merke{display:block;margin-top:6px;font-size:12px;line-height:1.3;color:var(--text-dim);text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- steg 5: tekst, skrift, flere valg ---------- */
.felt + .felt{margin-top:16px}
.felt-rad{position:relative;display:flex;align-items:center}
.felt-rad:has(.fjern) .felt-inn{padding-right:50px}
.felt-inn{flex:1;min-width:0;height:48px;padding:0 14px;font-size:17px;background:var(--surface);border:1px solid var(--sand-line-strong);border-radius:4px;color:var(--text);transition:border-color var(--dur-fast) var(--ease-out)}
.felt-inn:focus{border-color:var(--gold-dark)}
.felt-inn::placeholder{color:var(--text-dim);opacity:1}
.fjern{position:absolute;right:2px;top:2px;width:44px;height:44px;padding:0;border:0;border-radius:3px;background:none;color:var(--text-dim);font-size:24px;line-height:1}
.leggtil{margin-top:8px}
.tekst-valg{display:flex;flex-wrap:wrap;gap:0 24px}
.hoyde{margin:8px 0 0;font-size:15px;line-height:1.3;color:var(--text-dim);font-variant-numeric:tabular-nums}
#strHoyde{margin-top:16px}
#tomMelding{margin:0 0 20px}
.skriftrad{display:flex;gap:8px;margin:0 -16px;padding:4px 16px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.skriftrad::-webkit-scrollbar{display:none}
.skrift-valg{position:relative;flex:0 0 148px;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;min-width:0;min-height:72px;padding:10px 14px 12px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;scroll-snap-align:start;scroll-margin-left:16px;cursor:pointer}
.skrift-prove{display:block;font-size:22px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.skrift-navn{margin-top:2px;font:600 11px/1.3 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.skrift-hint{font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:balance}
.skrift-valg:has(input:checked){border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
.flere{margin-top:28px;border-top:1px solid var(--sand-line);border-bottom:1px solid var(--sand-line)}
.flere summary{display:flex;align-items:center;gap:12px;min-height:52px;list-style:none;cursor:pointer;font-size:15px;line-height:1.3;font-weight:600;color:var(--text)}
.flere summary::-webkit-details-marker{display:none}
.flere summary::after{content:"";flex:0 0 auto;width:8px;height:8px;margin:0 6px 4px 0;border-right:1.5px solid var(--text-dim);border-bottom:1.5px solid var(--text-dim);transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out)}
.flere[open] summary::after{transform:translate(0,4px) rotate(-135deg)}
.flere-status{flex:1 1 auto;min-width:0;text-align:right;font-size:13px;font-weight:400;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flere[open] summary::after{margin-left:auto}
/* åpen: bryterne står rett under og sier det samme */
.flere[open] .flere-status{display:none}
/* bryterne: luft mellom radene i stedet for streker */
.bryter{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:6px 0;cursor:pointer}
.bryter + .bryter{margin-top:4px}
.bryter:last-child{margin-bottom:8px}
.bryter-tekst{font-size:15px;line-height:1.3}
.bryter-tekst small{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:pretty}
/* av: rolig spor, men kant og knott i --text-dim så bryteren leses som en kontroll (ca. 9:1) */
.bryter input{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 auto;width:44px;height:26px;margin:0;border:1.5px solid var(--text-dim);border-radius:13px;background:var(--bg4);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.bryter input::before{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--text-dim);transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.bryter input:checked{background:var(--gold-dark);border-color:var(--gold-dark)}
.bryter input:checked::before{background:var(--surface);transform:translateX(18px)}
.bryter input:disabled{opacity:.45;cursor:not-allowed}
.bryter:has(input:disabled){cursor:not-allowed}
/* et råd med en handling (lesbarhetsrådet med «Del på to linjer», stengt størrelse med «Endre farge», motivet som blir for fint) */
.grunn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px}
.grunn p{margin:0;flex:1 1 200px}
.grunn-valg{display:flex;flex-wrap:wrap;gap:0 20px}
.grunn.lang .grunn-valg{flex-basis:100%}

/* ---------- steg 4: tre innganger — Bare tekst · Ferdig design · Tilpass selv ---------- */
/* Runde 6: tre store radiokort øverst i stedet for fanene Motiv · Ramme. Den vanlige kunden velger «Bare tekst» eller et
   ferdig design; «Tilpass selv» åpner én rad med grupper (Ramme og Eget design er grupper i raden, ikke egne faner). */
.innganger{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;min-width:0}
.inngang{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);grid-template-areas:"merke navn" ". tekst";column-gap:12px;align-items:start;min-height:48px;padding:11px 14px 12px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.inngang .radiomerke{margin-top:1px}
.inngang-navn{grid-area:navn;font-size:17px;line-height:1.3;color:var(--text)}
.inngang-tekst{grid-area:tekst;margin-top:1px;font-size:13px;line-height:1.4;color:var(--text-dim);text-wrap:pretty}
.inngang:has(input:checked){border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
.inngang:active{background:var(--bg2)}
.del-pynt{margin-top:24px}
/* «Start med tomt skilt» (sluttrettingen): en rolig lenkeknapp over gruppene, og en linje under den når plata står tom */
.tomt-rad{margin:-10px 0 8px}
.tomt-linje{margin:0 0 6px;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.del-pynt.inn,.gruppe.inn{animation:panelInn var(--dur-mid) var(--ease-out)}
@keyframes panelInn{from{opacity:0}}
.etikett-rad{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.antall{font-size:13px;line-height:1.3;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
/* gruppene: én rolig rad som ruller sidelengs på telefonen (kuttet faller midt i en valgknapp, så kunden ser at raden
   fortsetter). Valgt gruppe er et filter, ikke et valg: bg3 og sterk sandlinje — gullrammen er bare for selve valget. */
.chiprad{display:flex;flex-wrap:nowrap;gap:var(--chip-gap,8px);margin:0 -16px 8px;padding:2px 16px 4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding:0 16px}
.chiprad::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:0 var(--chip-pad,12px);border:1px solid var(--sand-line);border-radius:4px;background:var(--surface);color:var(--text-dim);font-size:15px;line-height:1.3;white-space:nowrap}
/* bredden er den fete utgaven, så raden ikke flytter seg når en gruppe velges */
.chip::after{content:attr(data-navn);height:0;overflow:hidden;visibility:hidden;font-weight:600}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--bg3);border-color:var(--sand-line-strong);color:var(--text);font-weight:600}
.gruppe-om{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.gruppe-om:empty{display:none}
.gruppe-om:empty + .rad-plass{padding-top:8px}
/* rådene står over rutenettet i den delen kunden er i (et tomt sted tar ingen plass) */
.rad-plass > .melding:not([hidden]) ~ .melding{margin-top:8px}
.rad-plass > .melding{margin-top:0}
.rad-plass:has(> :not([hidden])){margin-bottom:16px}
#radPlassTekst:has(> :not([hidden])){margin:16px 0 0}
.motiv-liten{font-size:12px;line-height:1.3;color:var(--text-dim)}
.motiver{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.motiv-valg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-width:0;padding:10px 4px 8px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;text-align:center;color:var(--text);cursor:pointer}
.motiv-valg.ingen{grid-column:1/-1;flex-direction:row;justify-content:center;min-height:48px;padding:8px 12px}
.motiv-valg.ingen .motiv-navn{font-size:15px}
.motiv-bilde{display:flex;align-items:center;justify-content:center;width:64px;height:48px}
.motiv-bilde svg{display:block;width:64px;height:48px}
.motiv-navn{font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:balance}
/* «Fra Medium»: motivet trenger en større størrelse — et trykk spør før størrelsen byttes */
.motiv-merke{font-size:12px;line-height:1.3;color:var(--text-dim);text-wrap:balance}
.motiv-valg:has(input:checked),.ferdig-valg:has(input:checked){border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
.motiv-valg:has(input:checked) .motiv-navn{color:var(--text)}
/* ferdige skilt: ekte små skilt med eksempelteksten, to i bredden på telefonen */
.ferdige{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px}
.ferdig-valg{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 6px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;text-align:center;cursor:pointer}
.ferdig-valg.ingen{grid-column:1/-1;flex-direction:row;justify-content:center;min-height:48px;padding:8px 12px}
.ferdig-bilde{display:flex;align-items:center;justify-content:center;width:100%;height:84px}
.ferdig-bilde svg{display:block}
.ferdig-navn{font-size:15px;line-height:1.3;color:var(--text);text-wrap:balance}
.ferdig-cap{font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:pretty}
/* beskrivelsen får plass på PC; på telefonen leses den av skjermleseren (og står i title) */
@media (max-width:919px){.ferdig-cap{position:absolute;top:0;left:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}
/* tolv figurer = fire i bredden, tre rader. Føttene står på samme linje, og alder er høyde (som på skiltet). */
.fig-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.fig-valg{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;min-height:92px;padding:10px 2px 8px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;color:var(--text);transition:border-color var(--dur-fast) var(--ease-out)}
.fig-valg:active{background:var(--bg2)}
/* fullt (seks figurer): flisene ser stengt ut som stengte størrelser, men tar imot trykk så meldingen kan vises */
.fig-valg[aria-disabled="true"]{border-style:dashed;border-color:var(--sand-line-strong);background:transparent;cursor:not-allowed}
.fig-valg[aria-disabled="true"] .fig-bilde{opacity:.4}
.fig-bilde{display:flex;align-items:flex-end;justify-content:center;height:48px}
.fig-bilde svg,.fig-mini svg,.ramme-bilde svg{display:block}
.fig-navn{font-size:13px;line-height:1.3;color:var(--text-dim);text-align:center;text-wrap:balance}
/* én rad per figur: miniatyr, navnefelt og ×. Miniatyren sier hvilken figur det er — ingen etikett over feltet. */
.fig-rad{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-items:center}
.fig-rad + .fig-rad{margin-top:12px}
#navnHoyde,#figInfo{margin-top:16px}
/* «Flytt figurene på skiltet» (runde 6-tillegget): en rolig lenke rett under figurene — åpner Juster med Figur 1 valgt */
.fig-flytt{margin-top:8px}
.fig-flytt + #navnHoyde,.fig-flytt + #navnHoyde + #figInfo{margin-top:8px}
.fig-rad.ny{animation:radInn var(--dur-mid) var(--ease-out)}
@keyframes radInn{from{opacity:0;transform:translateY(6px)}}
.fig-mini{display:flex;align-items:flex-end;justify-content:center;height:48px;padding-bottom:4px;background:var(--bg3);border-radius:2px;color:var(--text)}
.tom{margin:0;padding:14px 16px;background:var(--bg2);border-radius:4px;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.tom b{font-weight:600;color:var(--text)}
/* eget design: knappen, så det opplastede som en liten miniatyr med filnavnet */
.eget-vist{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;margin:16px 0 0;padding:10px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px}
.eget-mini{display:flex;align-items:center;justify-content:center;width:88px;height:64px;background:var(--bg3);border-radius:2px}
.eget-maske{display:block;width:72px;height:52px;background:var(--text);-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.eget-navn{display:block;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
.eget-pris{display:block;margin-top:2px;font:600 15px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums}
.eget-knapper{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px}
.fil-knapp{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:44px;padding:0 20px;border:1px solid var(--sand-line-strong);border-radius:4px;background:var(--surface);color:var(--text);font:600 13px/1.3 var(--font-label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;overflow:hidden}
.fil-knapp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px}
.fil-knapp.laster{border-style:dashed;color:var(--text-dim);cursor:progress}
.fil-knapp.laster input{cursor:progress}
/* «Uten ramme» i full bredde øverst, de ni rammene tre og tre under */
.rammer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ramme-valg{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:10px 6px 8px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;text-align:center;cursor:pointer}
.ramme-valg.ingen{grid-column:1/-1;flex-direction:row;justify-content:center;min-height:48px;padding:8px 12px}
.ramme-valg.ingen .ramme-navn{font-size:15px}
.ramme-bilde{display:flex;align-items:center;justify-content:center;width:100%}
.ramme-navn{font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:balance}
.ramme-valg:has(input:checked){border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
.ramme-valg:has(input:checked) .ramme-navn{color:var(--text)}

/* ---------- steg 2: størrelsene side om side, festet under ---------- */
.str-felt{border:0;margin:0;padding:0;min-width:0}
.storrelser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.storrelser.n3{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.str{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;text-align:center;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;cursor:pointer}
.n3 .str{padding:12px 4px}
.str-figur{display:flex;align-items:flex-end;justify-content:center;width:100%;margin-bottom:8px}
.str-figur svg{display:block}
.str-navn{font-size:15px;font-weight:600;line-height:1.3}
.str-mal{font-size:13px;line-height:1.3;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.str-sml{font-size:13px;line-height:1.3;color:var(--text-dim);text-wrap:balance}
/* prisen står på samme linje i hele raden, også når bare noen av kortene har en kjent størrelse */
.str-pris{margin-top:auto;padding-top:2px;font:600 15px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums}
.str-stengt{margin-top:auto;padding-top:2px;font-size:13px;line-height:1.3;color:var(--text-dim)}
.str:has(input:checked){border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
/* «Anbefalt» (runde 6): en rolig merkelapp på standardstørrelsen, samme form som «Eksempel» — grunnen står under kortene */
.str-anbefalt{margin:4px 0 2px;padding:1px 6px;border:1px solid var(--sand-line-strong);border-radius:4px;background:var(--surface);font:600 11px/1.3 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
#strAnbefalt{margin:16px 0 0}
.str.stengt{border-style:dashed;border-color:var(--sand-line-strong);background:transparent;cursor:not-allowed}
.str.stengt .str-figur{opacity:.4}
.str.stengt .str-navn,.str.stengt .str-mal{color:var(--text-dim)}
.fester{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.fest{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:10px 2px 8px;border-radius:4px;text-align:center;font-size:13px;line-height:1.3;color:var(--text-dim);cursor:pointer}
.fest-prikk{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--kant-plate)}
/* ett ord per linje: «Børstet sølv» og «Børstet gull» brytes likt på alle bredder */
.fest-navn{width:min-content}
.fest-pris{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
/* port (bunt 2): «Til handlekurven» i arket er en lenke med primærknappens drakt */
a.ark-kurv{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
a.ark-kurv[hidden]{display:none}
.ark-fot:has(a.ark-kurv:not([hidden])){display:flex;gap:12px}
.ark-fot:has(a.ark-kurv:not([hidden])) .ark-kurv{flex:1 1 auto;min-width:0;white-space:nowrap}
.ark-fot:has(a.ark-kurv:not([hidden])) .sekundar{flex:0 0 auto;width:auto;min-width:96px}
.fest:has(input:checked){color:var(--text)}
.fest:has(input:checked) .fest-prikk{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--gold-dark)}
.inkl{margin:12px 0 0;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}
.inkl::before{content:"✓ ";color:var(--gold-dark)}
/* Feste: samme plass og samme oppbygning på alle tre skilt — navnet, så det som følger med (✓ på alle tre).
   Husskiltet velger farge på avstandsfestene; postkasse og dør har ett feste, og da er det en opplysning, ikke et valg. */
.feste-navn{display:block;margin:0 0 10px;padding:0;font-size:17px;line-height:1.3;color:var(--text)}
.feste-info{margin:0}
.feste-info .feste-navn{margin:0}
.feste-info .inkl{display:block;margin-top:2px}

/* ---------- Reklame (bare postkassen): to store valg med en ekte tegning av kundens skilt ---------- */
.reklame-felt{border:0;margin:0;padding:0;min-width:0}
.reklame-valg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rk{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0;padding:10px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.rk-figur{position:relative;display:flex;align-items:center;justify-content:center;height:132px;background:var(--bg3);border-radius:2px}
.rk-figur svg{display:block}
/* uten egen tekst viser tegningene eksempelet: én merkelapp over begge valgene, ikke én på hver */
.rk-eks{position:static;display:inline-block;margin:0 0 10px}
.rk-navn{font-size:15px;line-height:1.3;color:var(--text);text-align:center;text-wrap:balance}
.rk:has(input:checked){border-color:var(--gold-dark);box-shadow:inset 0 0 0 1px var(--gold-dark)}
.rk:active{background:var(--bg2)}
.hjelp b{font-weight:600;color:var(--text)}
/* 320 px: stablet — tegningen til venstre, valget til høyre (som kortene i steg 1) */
@media (max-width:359px){
  .reklame-valg{grid-template-columns:minmax(0,1fr);gap:8px}
  .rk{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px}
  .rk-figur{height:88px}
  .rk-navn{text-align:left}
}

/* ---------- steg 6: se over ---------- */
.stor-figur{position:relative;display:flex;flex-direction:column;margin:0 -16px 20px;height:clamp(180px,calc(var(--app-h) * .34),300px);padding:16px;background:var(--bg3)}
.stor-figur.har-eks{padding-top:36px}
.stor-figur .juster-knapp{display:inline-flex}
#overMotiv,#overOverlapp{margin:0 0 20px}
.oversikt{margin:0;border-top:1px solid var(--sand-line)}
.oversikt .rad{position:relative;padding:9px 72px 9px 0;border-bottom:1px solid var(--sand-line)}
.oversikt dt{font:600 11px/1.3 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.oversikt dd{margin:2px 0 0;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
/* «Endre» er dempet: prisen er den eneste gullteksten nederst */
.endre{position:absolute;right:-8px;top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;padding:0 8px;border:0;border-radius:4px;background:none;color:var(--text-dim);font:600 12px/1.3 var(--font-label);letter-spacing:.12em;text-transform:uppercase}
.endre:focus-visible{color:var(--gold-dark)}
/* tillitsblokken rett over summen (runde 6): det som gjør kjøpet trygt — kunden godkjenner designet før vi graverer */
.tillit{margin:24px 0 0;padding:14px 16px 16px;background:var(--surface);border:1px solid var(--sand-line);border-radius:4px}
.tillit h2{margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.2;color:var(--text)}
.tillit .levering{margin:0}
.sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 2px}
.sum-etikett{font:600 11px/1.3 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.sum-belop{font:600 28px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums}
.sum-del{margin:0;font-size:13px;line-height:1.3;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums}
.levering{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--text-dim);text-wrap:pretty}

/* ---------- juster plassering: en tilstand i siden, ikke et steg ---------- */
.app.juster .steg{display:none}
.app.juster .vegg{display:flex;height:clamp(180px,calc(var(--app-h) * .42),380px)}
.app.juster .se-storre{display:none}
.app.juster #veggSvg{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.app.juster #veggSvg.drar{cursor:grabbing}
/* rådene står rolig under skiltet, i en stripe med fast høyde: skiltet endrer ikke størrelse mens kunden drar */
.juster-status{display:none;flex:0 0 auto;align-self:stretch;height:54px;margin:8px 0 0;overflow:hidden;font-size:13px;line-height:1.35;color:var(--text-dim);text-align:center;text-wrap:balance}
.app.juster .juster-status{display:block}
.juster-panel h1{margin:0 0 16px;font-family:var(--font-display);font-weight:400;font-size:22px;line-height:1.2;color:var(--text)}
/* runde 6-tillegget: velgeren er en rolig chip-rad som i steg 4 (ruller sidelengs på telefonen) — hver del av skiltet
   (motivet, hver figur, hver linje, reklamelinja) og gruppene («Hele teksten», «Hele raden») */
.juster-panel .chiprad{margin-bottom:16px}
.juster-blokk + .juster-blokk{margin-top:16px}
.glider-rad{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.glider-rad .etikett{margin:0}
.glider-verdi{font:600 15px/1.3 var(--font-label);color:var(--text);font-variant-numeric:tabular-nums}
.glider{display:block;width:100%;height:44px;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;touch-action:pan-y}
.glider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--sand-line-strong)}
.glider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border:2px solid var(--surface);border-radius:50%;background:var(--gold-dark);box-shadow:var(--shadow-sm)}
.glider::-moz-range-track{height:4px;border-radius:2px;background:var(--sand-line-strong)}
.glider::-moz-range-thumb{width:22px;height:22px;border:2px solid var(--surface);border-radius:50%;background:var(--gold-dark)}
.piler{display:flex;gap:8px;margin-top:8px}
.pil-knapp{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--sand-line-strong);border-radius:4px;background:var(--surface);color:var(--text)}
.pil-knapp svg{width:18px;height:18px}
.pil-knapp:active{background:var(--bg2)}
/* gruppa står mot kanten den veien: knappen er dempet (den kan fortsatt nås, og et trykk sier hvorfor) */
.pil-knapp[aria-disabled="true"]{color:var(--text-dim);cursor:default}
.pil-knapp[aria-disabled="true"] svg{opacity:.4}
.juster-valg{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:12px}

/* ---------- bunnlinja ---------- */
.bunn{grid-area:bunn;background:var(--bg);border-top:1px solid var(--sand-line)}
.bunn:has(.bunn-melding:not([hidden])){border-top:0}
.app[data-del="skilt"]:not(.juster) .bunn,.app.tastatur .bunn{display:none}
.bunn-melding{display:flex;align-items:center;justify-content:space-between;gap:0 12px;flex-wrap:wrap;padding:8px 16px 4px;background:var(--bg2);border-top:3px solid var(--gold)}
.bunn-melding p{margin:0;padding-bottom:4px;flex:1 1 180px;font-size:15px;line-height:1.5;color:var(--text);text-wrap:pretty}
.bunn-valg{display:flex;flex-wrap:wrap;gap:0 20px}
/* et spørsmål: svarene står under spørsmålet, med «Bytt størrelse» først */
.bunn-melding.sporsmal .bunn-valg{flex-basis:100%}
.bunn-valg:not(:has(button:not([hidden]))){display:none}
.bunn-melding.blink{animation:blink var(--dur-slow) var(--ease-out)}
.bunn-knapper{display:flex;align-items:center;gap:8px;padding:10px 16px}
.tekstknapp{flex:0 0 auto;min-height:48px;min-width:44px;padding:0 12px;border:0;border-radius:4px;background:none;color:var(--text-dim);font:600 13px/1.3 var(--font-label);letter-spacing:.12em;text-transform:uppercase}
.primar{flex:1 1 auto;min-height:48px;padding:0 16px;border:0;border-radius:4px;background:var(--gold-dark);color:#fff;font:600 13px/1.3 var(--font-label);letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--shadow-gold);transition:background-color var(--dur-fast) var(--ease-out)}
.primar:active{transform:translateY(1px)}

/* ---------- arket: lagt i handlekurven ---------- */
.ark{width:100%;max-width:100%;max-height:calc(100% - 40px);margin:auto auto 0;padding:0;border:0;border-radius:8px 8px 0 0;background:var(--surface);color:var(--text);box-shadow:var(--shadow-md);overflow:auto;overscroll-behavior:contain}
.ark::backdrop{background:var(--slor)}
.ark[open]{animation:arkInn var(--dur-mid) var(--ease-out)}
.ark[open]::backdrop{animation:slorInn var(--dur-mid) var(--ease-out)}
.ark.lukker{animation:arkUt var(--dur-fast) var(--ease-in-out) forwards}
.ark.lukker::backdrop{animation:slorUt var(--dur-fast) var(--ease-in-out) forwards}
@keyframes arkInn{from{opacity:0;transform:translateY(32px)}}
@keyframes arkUt{to{opacity:0;transform:translateY(24px)}}
@keyframes slorInn{from{opacity:0}}
@keyframes slorUt{to{opacity:0}}
.ark-inn{position:relative;padding:24px 20px 0;max-width:520px;margin:0 auto}
.ark h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1.15}
.ark-mock{margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--text-dim)}
.ark-dl{display:grid;grid-template-columns:auto minmax(0,1fr);margin:16px 0 0;border-top:1px solid var(--sand-line)}
.ark-dl dt{display:flex;align-items:center;padding:9px 0;border-bottom:1px solid var(--sand-line);font:600 11px/1.3 var(--font-label);letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}
.ark-dl dd{margin:0;padding:9px 0 9px 16px;border-bottom:1px solid var(--sand-line);font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.ark-dl dt:last-of-type,.ark-dl dd:last-of-type{border-bottom:0}
.ark-dl dd:last-of-type{font:600 17px/1.3 var(--font-label);color:var(--gold-dark);font-variant-numeric:tabular-nums}
/* Lukk står fast nederst i arket, også når oppsummeringen er høyere enn arket */
.ark-fot{position:sticky;bottom:0;padding:16px 0 calc(20px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--sand-line);background:var(--surface)}
/* rett etter at arket er åpnet: det andre trykket i et dobbelttrykk på «Legg i handlekurv» lukker det ikke */
.ark.ny .ark-fot{pointer-events:none}
.sekundar{width:100%;min-height:48px;padding:0 16px;border:1px solid var(--sand-line-strong);border-radius:4px;background:transparent;color:var(--text);font:600 13px/1.3 var(--font-label);letter-spacing:.12em;text-transform:uppercase}

/* ---------- «Se større»: skiltet over hele skjermen, på veggen ---------- */
.stor-ark{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg3);color:var(--text);overflow:hidden}
.stor-ark[open]{display:flex;flex-direction:column;animation:slorInn var(--dur-mid) var(--ease-out)}
.stor-ark::backdrop{background:var(--bg3)}
.stor-ark.lukker{animation:slorUt var(--dur-fast) var(--ease-in-out) forwards}
.stor-ark h2{font-size:15px;font-weight:400}
.stor-flate{position:relative;flex:1;min-height:0;display:flex;padding:48px 16px 16px}
.stor-flate .figur{flex:1;min-width:0}
.stor-flate .eks-merke{top:16px}
.stor-fot{flex:0 0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.stor-fot .sekundar{display:block;max-width:480px;margin:0 auto}

@media (hover:hover){
  .lenkeknapp:hover{color:var(--gold-hover)}
  .lenkeknapp.demp:hover{color:var(--text)}
  .felt-inn:hover{border-color:var(--gold-light)}
  .fjern:hover{background:var(--bg2);color:var(--text)}
  .endre:hover{color:var(--gold-dark);background:var(--bg2)}
  .tekstknapp:hover,.juster-knapp:hover{color:var(--text);background:var(--bg2)}
  .primar:hover{background:var(--gold-hover)}
  .sekundar:hover,.fil-knapp:hover{border-color:var(--gold-dark);color:var(--gold-dark)}
  .se-storre:hover{background:var(--bg2);color:var(--text)}
  .kort:hover{transform:translateY(-2px);border-color:var(--sand-line-strong);box-shadow:var(--shadow-md)}
  .kort[aria-pressed="true"]:hover{border-color:var(--gold-dark)}
  .skrift-valg:hover,.str:not(.stengt):hover,.fig-valg:not([aria-disabled="true"]):hover,.ramme-valg:hover,.motiv-valg:hover,.ferdig-valg:hover,.chip:hover,.pil-knapp:hover{border-color:var(--sand-line-strong)}
  .chip:hover{color:var(--text)}
  .inngang:hover,.rk:hover{border-color:var(--sand-line-strong)}
  .skrift-valg:has(input:checked):hover,.str:has(input:checked):hover,.ramme-valg:has(input:checked):hover,.motiv-valg:has(input:checked):hover,.ferdig-valg:has(input:checked):hover,.inngang:has(input:checked):hover,.rk:has(input:checked):hover{border-color:var(--gold-dark)}
  .inngang:hover .radiomerke{border-color:var(--gold-dark)}
  /* typene åpner en visning (de velger ikke): pila svarer, ikke radiomerket */
  .type-rad:hover .type-navn::after{border-color:var(--text)}
  .pil:hover{background:var(--bg2)}
}

/* kompakt forhåndsvisning på en lav telefon (runde 6): skiltflaten blir lavere, så første valg synes uten å rulle.
   Står foran blokka under med vilje — ved siden av skiltet (liggende, PC) er veggen en egen kolonne og gjelder ikke. */
@media (max-height:640px){
  .vegg{height:clamp(104px,calc(var(--app-h) * .225),132px);padding-top:8px;padding-bottom:6px}
  .vegg .eks-merke{top:6px}
  .vegg.har-eks .figur{padding-top:16px}
  /* merkelappen får plass ved siden av et smalt skilt: ingen egen stripe (se tegnVegg) */
  .vegg.har-eks.eks-fri .figur{padding-top:0}
  .vegg .mal{margin-top:6px}
  /* Juster (runde 6-tillegget): hver figur, linje og reklamelinja velges og dras med fingeren — på en lav telefon får skiltet
     litt mer av høyden (velgeren står fortsatt i bildet under, glideren og pilene rulles fram) */
  .app.juster .vegg{height:clamp(180px,calc(var(--app-h) * .48),380px)}
  .juster-panel{padding-top:14px}
  .juster-panel h1{margin-bottom:10px}
}
/* Størrelsessteget på telefonen (kontrollen etter runde 6): kortene viser skiltet i hver størrelse i riktig målestokk, så
   skiltflaten over er kompakt også på en høy telefon — spørsmålet og kortene (husskiltets 2 × 2) får plassen. Bare når
   skiltet ikke står ved siden av (= ikke BRED: smalere enn 920 px, og ikke liggende fra 600 px). */
@media (max-width:559px),(max-width:919px) and (min-height:521px),(max-width:919px) and (orientation:portrait){
  .app[data-del="str"]:not(.juster) .vegg{height:clamp(104px,calc(var(--app-h) * .225),132px);padding-top:8px;padding-bottom:6px}
  .app[data-del="str"]:not(.juster) .vegg .eks-merke{top:6px}
  .app[data-del="str"]:not(.juster) .vegg.har-eks .figur{padding-top:16px}
  .app[data-del="str"]:not(.juster) .vegg.har-eks.eks-fri .figur{padding-top:0}
  .app[data-del="str"]:not(.juster) .vegg .mal{margin-top:6px}
  /* kortene litt tettere og hjelpelinja nærmere, så spørsmålet, 2 × 2 og «Anbefalt»-setningen står i bildet også på 360 × 740 */
  .steg[data-del="str"] .hjelp{margin-bottom:12px}
  .storrelser .str{padding-top:8px;padding-bottom:8px}
  .str-figur{margin-bottom:6px}
}

/* ---------- PC og liggende telefon: skiltet til venstre ----------
   Liggende fra 560 px (kontrollen etter runde 6: 320 × 568 rotert = 568 × 320 sto stablet, og Juster ga kontrollene 21 px
   under skiltet — ved siden av hverandre får skiltet venstre side og stegene/kontrollene hele høyden til høyre) */
@media (min-width:920px),(min-width:560px) and (max-height:520px) and (orientation:landscape){
  .app{grid-template-columns:minmax(0,1.08fr) minmax(360px,min(660px,46%));grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"merke merke" "vegg topp" "vegg hoved" "vegg bunn"}
  .vegg,.app.tastatur .vegg,.app.juster .vegg{height:auto;padding:24px}
  .vegg.har-eks .figur{padding-top:0}
  /* ved siden av skiltet står veggen alltid — også i Reklame og Se over */
  .app[data-del="over"] .vegg,.app[data-del="reklame"] .vegg{display:flex}
  .app[data-del="over"] .vegg .juster-knapp,.app[data-del="reklame"] .vegg .juster-knapp{display:inline-flex}
  .vegg .juster-knapp{left:12px;bottom:8px}
  .vegg .juster-knapp[data-hjorne="oppe-v"]{top:8px;bottom:auto}
  .vegg .juster-knapp[data-hjorne="nede-h"]{left:auto;right:12px}
  .vegg .juster-knapp[data-hjorne="oppe-h"]{top:8px;bottom:auto;left:auto;right:60px}
  .juster-lang{display:inline}.juster-kort{display:none}
  .stor-figur{display:none}
  .topp{padding:8px 24px 8px 14px}
  /* steg 1: ingen vegg før kunden har valgt skilt — én midtstilt kolonne, topplinja på samme venstrekant */
  .app[data-del="skilt"]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"merke" "topp" "hoved" "bunn"}
  .app[data-del="skilt"] .topp{padding-left:max(24px,calc(50% - 256px));padding-right:max(24px,calc(50% - 256px))}
  .steg,.juster-panel{padding:28px 24px 32px}
  .chiprad{margin:0 -24px 8px;padding:2px 24px 4px;scroll-padding:0 24px}
  .skriftrad{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));margin:0;padding:0;overflow:visible}
  .bunn-knapper{padding:12px 24px}
  .bunn-melding{padding:8px 24px 4px}
  .ark{margin:auto;width:min(480px,calc(100% - 32px));border-radius:8px}
  .ark-inn{padding:28px 28px 0}
  .ark-fot{padding-bottom:24px}
  .stor-flate{padding:56px 24px 16px}
  .stor-flate .eks-merke{left:24px}
}
@media (min-width:920px){
  .app[data-del="skilt"] .topp{padding-left:max(24px,calc(50% - 240px));padding-right:max(24px,calc(50% - 240px))}
  .steg,.juster-panel{padding:40px 40px 40px}
  .steg h1{font-size:36px}
  .juster-panel h1{font-size:28px}
  .vegg,.app.juster .vegg{padding:48px}
  .vegg .eks-merke{top:16px;left:24px}
  .vegg .se-storre{top:8px;right:12px}
  .vegg .juster-knapp{left:16px;bottom:12px}
  .vegg .juster-knapp[data-hjorne="oppe-v"]{top:12px;bottom:auto}
  .vegg .juster-knapp[data-hjorne="nede-h"]{left:auto;right:16px}
  .vegg .juster-knapp[data-hjorne="oppe-h"]{top:12px;bottom:auto;left:auto;right:64px}
  /* PC: gruppene brytes over flere rader (alt synes) */
  .chiprad{flex-wrap:wrap;margin:0 0 8px;padding:0;overflow:visible}
}
/* lav skjerm (høyde ≤ 640 px: 320 × 568, liggende telefon) — runde 6: i ALLE stegene skal første valg synes uten å
   rulle. Skiltflaten blir lavere (skiltet leses fortsatt, og «Se større» er der), hjelpelinja sier bare det viktigste,
   og luften over valgene er mindre. */
@media (max-height:640px){
  .hjelp-mer{display:none}
  .steg{padding-top:16px}
  .steg h1{margin-bottom:4px}
  .hjelp{margin-bottom:12px}
  .gruppe-om{margin-bottom:10px}
  .del-pynt{margin-top:16px}
  .alle-mat{margin-top:28px}
  .rk-figur{height:104px}
  /* størrelseskortene litt tettere (kontrollen etter runde 6: på 320 × 568 skal første og valgt størrelse stå helt i bildet) */
  .storrelser .str{padding-top:8px;padding-bottom:8px}
  .str-figur{margin-bottom:6px}
}
/* liggende telefon: husskiltets fire størrelser på én rad (to rader får ikke plass under spørsmålet) */
@media (min-width:600px) and (max-height:520px) and (orientation:landscape){
  .storrelser:not(.n3){grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .storrelser:not(.n3) .str{padding:12px 4px}
}
/* liggende telefon (under ca. 440 px høy): spørsmålet ett trinn mindre og litt mindre luft, så første valg synes */
@media (max-height:440px){
  .steg{padding-top:12px}
  .steg h1{font-size:22px}
  .hjelp{margin-bottom:8px}
  .rk-figur{height:76px}
  .bunn-knapper{padding-top:8px;padding-bottom:8px}
}

/* ════════ m_patch 1.0 (18.10.2026): mockupens oppsett — merkelinje, stegfaner, øyenbryn, forhåndsvisning, bunnlinje ════════ */
.app{grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"merke" "vegg" "topp" "hoved" "bunn";background:var(--surface)}
.merke{grid-area:merke;display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 20px;border-bottom:1px solid var(--sand-line);background:var(--bg)}
.merke-logo{display:inline-flex;align-items:flex-start;font:500 19px/1 var(--font-display);letter-spacing:.2em;color:var(--gold-dark);text-decoration:none;white-space:nowrap}
.merke-logo sup{font:600 8px/1 var(--font-label);letter-spacing:.1em;margin:3px 0 0 6px}
.merke-tittel{display:none;font-size:14px;color:var(--text-dim)}
.merke-ut{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;color:var(--text);text-decoration:none;white-space:nowrap}
.merke-ut:hover{color:var(--gold-dark)}
/* topplinja = stegfanene; den gamle teksten er for skjermleseren, pila og topp-prisen er ute (prisen står i bunnlinja) */
.topp{display:block;padding:12px 20px 0;background:var(--surface)}
.topp .pil,.topp .topp-pris,.topp .fremdrift{display:none}
.topp .stegtekst{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.app[data-del="skilt"] .topp{padding-left:20px}
.stegnav{display:flex;gap:7px}
.stegnav button{flex:1 1 0;min-width:0;min-height:40px;margin:0;padding:0 0 8px;border:0;border-bottom:2px solid var(--sand-line);border-radius:0;background:none;text-align:left;color:var(--text-dim);font:400 11px/1.3 var(--font-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stegnav button span{display:block;font-size:10px;line-height:1.5;color:var(--text-dim);font-variant-numeric:tabular-nums}
.stegnav button.ferdig{border-color:var(--gold)}
.stegnav button[aria-current="step"]{border-color:var(--gold-dark);color:var(--gold-dark);font-weight:600}
.stegnav button:disabled{opacity:.55;cursor:default}
.stegnav button:not(:disabled):hover{color:var(--text)}
.ds-ey{margin:0 0 6px;font:600 11px/1.4 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark)}
.steg{background:var(--surface)}
.steg h1{font-weight:500;letter-spacing:-.01em}
/* Innhold: tre deler i ett steg — tekst og skrift, motiv, reklame. Delene under tekstdelen har en rolig etikett, ikke ny H1. */
.steg[data-del="motiv"],.steg[data-del="reklame"]{padding-top:4px}
.ds-del{margin:0 0 6px;font:600 16px/1.4 var(--font-label);letter-spacing:0;color:var(--text)}
.steg[data-del="motiv"] .hjelp,.steg[data-del="reklame"] .hjelp{margin-bottom:14px}
.steg[data-del="tekst"]{padding-bottom:8px}
.steg[data-del="motiv"]{padding-bottom:8px}
/* forhåndsvisningen: merkelapp, mål og materialet under */
.vegg{background:var(--bg3)}
.vegg-merke{position:absolute;top:10px;left:16px;z-index:1;padding:2px 8px;border:1px solid var(--sand-line-strong);background:var(--bg);font:600 10px/1.4 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);pointer-events:none}
.vegg.har-eks .vegg-merke{display:none}
.vegg-tekst{display:none;margin:10px 0 0;text-align:center}
.vegg-tekst b{display:block;font-weight:400;font-size:13px;color:var(--text)}
.vegg-tekst span{display:block;max-width:40ch;margin:6px auto 0;font-size:12px;line-height:1.45;color:var(--text-dim)}
/* bunnlinja: prisen og «Tilbake» på én rad, «Fortsett til …» i full bredde, merknaden under */
.bunn{background:var(--surface)}
.bunn-knapper{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pris tilbake" "neste neste" "note note";align-items:center;gap:0 8px;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px))}
.bunn-pris{grid-area:pris;min-width:0}
.bunn-pris-etikett{display:block;font-size:11px;line-height:1.3;color:var(--text-dim)}
.bunn-pris strong{display:block;font:600 22px/1.2 var(--font-label);color:var(--text);font-variant-numeric:tabular-nums}
.bunn-knapper .tekstknapp{grid-area:tilbake;min-height:44px;padding:0 6px;font:400 14px/1.3 var(--font-body);letter-spacing:0;text-transform:none;color:var(--text-dim)}
.bunn-knapper .primar{grid-area:neste;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin-top:8px;min-height:50px;padding:0 20px;border-radius:2px;box-shadow:none;font:400 15px/1.3 var(--font-body);letter-spacing:0;text-transform:none}
.bunn-knapper .primar::after{content:"→";font-size:17px;line-height:1}
.bunn-note{grid-area:note;margin:6px 0 0;font-size:11px;line-height:1.4;text-align:center;color:var(--text-dim)}
.app[data-del="over"] .bunn-pris{visibility:hidden}
.app.juster .bunn-pris,.app.juster .bunn-note{display:none}
.app.juster .bunn-knapper{grid-template-areas:"neste neste"}
.app.tastatur .merke{display:none}
@media (max-height:700px){.bunn-note{display:none}.bunn-pris strong{font-size:19px}.bunn-knapper .primar{min-height:46px;margin-top:6px}.merke{height:46px}}
@media (min-width:920px),(min-width:560px) and (max-height:520px) and (orientation:landscape){
  .app{grid-template-columns:minmax(0,1.08fr) minmax(360px,min(660px,46%));grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"merke merke" "vegg topp" "vegg hoved" "vegg bunn"}
  .app[data-del="skilt"]{grid-template-columns:minmax(0,1fr);grid-template-areas:"merke" "topp" "hoved" "bunn"}
  .merke{height:64px;padding:0 32px}
  .merke-logo{font-size:22px}
  .merke-tittel{display:block}
  .topp{padding:20px 32px 0}
  .app[data-del="skilt"] .topp{padding-left:max(24px,calc(50% - 280px));padding-right:max(24px,calc(50% - 280px))}
  .stegnav button{font-size:12px}
  .hoved{border-left:1px solid var(--sand-line)}
  .topp,.bunn{border-left:1px solid var(--sand-line)}
  .app[data-del="skilt"] .topp,.app[data-del="skilt"] .hoved{border-left:0}
  .vegg{padding:24px 28px}
  .vegg-merke{top:20px;left:24px}
  .vegg-tekst{display:block}
  .bunn-knapper{padding:14px 32px 14px}
  .bunn-pris strong{font-size:25px}
}
@media (min-width:920px){
  .steg,.juster-panel{padding:28px 32px 32px}
  .steg h1{font-size:38px;line-height:1.12;margin-bottom:12px}
  .steg[data-del="motiv"],.steg[data-del="reklame"]{padding-top:4px}
}
@media (min-width:1500px){
  .topp,.bunn-knapper{padding-left:46px;padding-right:46px}
  .steg,.juster-panel{padding-left:46px;padding-right:46px}
  .steg h1{font-size:42px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ════════ f_patch 1.0 (18.10.2026): forslaget på skiltet og håndtakene i Flytt og skaler ════════ */
.vegg.har-forslag .eks-merke{border-color:var(--gold);color:var(--text)}
.ferdig-valg.foreslatt,.motiv-valg.foreslatt{outline:2px dashed var(--gold);outline-offset:3px}
.juster-hjorner{position:absolute;inset:0;z-index:2;pointer-events:none}
.juster-hjorner[hidden]{display:none}
.juster-hjorner i{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:auto;touch-action:none;cursor:nwse-resize}
.juster-hjorner i[data-h="ne"],.juster-hjorner i[data-h="sw"]{cursor:nesw-resize}
.juster-hjorner i::after{content:"";position:absolute;left:15px;top:15px;width:14px;height:14px;border:2px solid var(--gold);border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.juster-hjorner.skalerer i::after{background:var(--gold)}