/* Egna typsnitt, serverade fran var egen domän. Poppins i loggan och rubriker,
   Inter i granssnittet. Inga externa anrop, inga cookies fran tredje part. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/brand/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/brand/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/brand/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/brand/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/brand/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/brand/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--ink:#0B1220;--ink2:#3f4a5f;--muted:#6b7688;--line:#e6e9f0;--bg:#fff;--soft:#f7f9fc;
--good:#0f7a3d;--goodbg:#e8f5ed;--bad:#b42318;--badbg:#fdecea;--mid:#5b6472;--midbg:#f1f3f7;--focus:#1a56db;
--warn:#d1651a;--warnbg:#fbeee2;--gold:#c8952b;
--tabh:58px;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--disp:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.disp{font-family:var(--disp)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}
header.top{border-bottom:1px solid var(--line);background:#fff}
/* Pa telefon ar headern klibbig och krymper; pa bred skarm foljer vi Klaravik:
   bara den morka hjalpraden foljer med nar man rullar, och dar tonar ett
   F-marke fram i stallet for hela loggan. */
@media(max-width:820px){header.top{position:sticky;top:0;z-index:20}}
.topbar{display:flex;align-items:center;gap:28px;height:86px}
.logo{display:flex;align-items:center;gap:12px;flex:none;color:var(--ink)}
.logo .mark{display:block;border-radius:12px;width:46px;height:46px}
.logo .word{font-family:var(--disp);font-weight:700;font-size:28px;letter-spacing:-.035em;line-height:1}
/* Pa mobil far loggan en egen rad i stallet for att gommas. Varumarket ska
   synas aven pa liten skarm. */
@media(max-width:860px){
  .topbar{flex-wrap:wrap;height:auto;padding:12px 20px 14px;gap:12px 16px}
  .logo{order:1}
  nav.main{order:2;margin-left:auto}
  /* flex-basis:100% gav en sokruta som blev bredare an topbarens innermatt och
     drog igang sidled-scroll pa HELA sajten (407 px pa en 390 px skarm). En
     block-bredd pa 100 procent raknas mot foralderns content box och traffar
     ratt, och min-width:0 hindrar input-faltet fran att satta ett golv. */
  .searchbox{order:3;flex:1 1 auto;width:100%;min-width:0;max-width:none}
}
/* min-width slapper sokrutan fri att krympa: utan den ar flex-minimum
   innehallsbredden, och da ar det navet som trycks ut ur skarmen. */
.searchbox{flex:1;max-width:540px;min-width:170px}
.searchbox form{display:flex;align-items:center;background:var(--soft);border:1.5px solid transparent;border-radius:11px;transition:.15s}
.searchbox form{transition:border-color .15s,background .15s,box-shadow .2s,transform .2s ease}
.searchbox form:focus-within{border-color:var(--ink);background:#fff;box-shadow:0 0 0 4px rgba(11,18,32,.06);transform:scale(1.012)}
@media(prefers-reduced-motion:reduce){.searchbox form:focus-within{transform:none}}
/* min-width:0 ar inte kosmetik. Ett input-falt har en inbyggd minimibredd och
   flex-item far min-width:auto som standard, sa faltet vagrar krympa och
   trycker ut sokknappen utanfor rutan. Det var den sista pixelkallan till
   sidled-scroll pa telefon. */
.searchbox input{flex:1;min-width:0;min-height:44px;border:0;background:transparent;padding:12px 4px 12px 16px;font-size:15px;outline:none;color:var(--ink);font-family:inherit}
.searchbox button{background:none;border:0;color:var(--ink2);padding:0 15px;height:44px;display:flex;align-items:center;cursor:pointer}
.searchbox button:hover{color:var(--ink)}
nav.main{display:flex;align-items:center;gap:20px;font-size:15px;color:var(--ink2);white-space:nowrap}
nav.main a{position:relative;padding:4px 0}
nav.main a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ink);border-radius:2px;transform:scaleX(0);transition:transform .15s}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a.on{color:var(--ink);font-weight:600}
nav.main a.navplus{color:#15803d;font-weight:700}
nav.main a.navplus:hover{color:#166534}
.menyplus{color:#15803d}
.menyplus span{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600}
nav.main a.on::after{transform:scaleX(1)}
nav.main a:hover{color:var(--ink)}
.navspar{display:flex;align-items:center;gap:7px;color:var(--ink2)}
.navspar svg{opacity:.75}
.navspar:hover svg{opacity:1}
.navspar span[data-favantal]:not(:empty){background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;
  min-width:19px;height:19px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* Plus-lanken kraver sitt: ordet Sparade goms har i stallet for vid 1180,
   hjartat och raknaren star kvar. */
@media(max-width:1320px){nav.main{gap:15px;font-size:14.5px}.navsparord{display:none}}
@media(max-width:1180px){nav.main{gap:13px;font-size:14px}.navsparord{display:none}}
@media(max-width:1040px){nav.main a:not(.navspar):not(:nth-child(-n+3)){display:none}}
@media(max-width:820px){nav.main a:not(.navspar){display:none}}
.catbar{border-top:1px solid var(--line);background:#fff}
.catbar .wrap{position:relative}
.catbar .wrap{display:flex;align-items:stretch}
/* En rad som bara tar slut mitt i ett ord ser trasig ut. Pilarna visas bara
   nar det faktiskt finns mer att rulla. */
.catpil{flex:none;width:36px;border:0;background:#fff;color:var(--ink2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:color .13s}
.catpil:hover{color:var(--ink)}
.catpil[hidden]{display:none}
.catpil.vanster svg{transform:rotate(180deg)}
.catpil.vanster{box-shadow:14px 0 12px -10px rgba(11,18,32,.16)}
.catpil.hoger{box-shadow:-14px 0 12px -10px rgba(11,18,32,.16)}
.cats{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;flex:1;min-width:0}
.cats::-webkit-scrollbar{display:none}
.cats a{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:15px 15px;font-size:14.5px;
  color:var(--ink2);font-weight:600;border-bottom:2px solid transparent;transition:.13s}
.cats a:hover{color:var(--ink)}
.cats a svg{flex:none;opacity:.55}
.cats a:hover svg{opacity:.9}
.cats a.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
h1{font-size:31px;line-height:1.15;letter-spacing:-.03em;font-weight:700}
h2{font-size:21px;letter-spacing:-.025em;font-weight:600}
.crumb{color:var(--muted);font-size:13px;margin:20px 0 8px}
.ing{color:var(--muted);font-size:15px;margin:9px 0 22px;max-width:62ch}
.datastampel{color:var(--muted);font-size:12.5px;margin:26px 0 18px}
.kpi{display:flex;gap:34px;margin:22px 0 26px;flex-wrap:wrap}
.kpi b{font-size:24px;font-weight:700;display:block;letter-spacing:-.02em}
.kpi span{color:var(--muted);font-size:13px}
section.block{padding:30px 0}
.blockhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.blockhead a{color:var(--focus);font-size:14px;font-weight:600}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.grid>*{flex:0 1 calc((100% - 4*18px)/5);min-width:220px;max-width:100%}
@media(max-width:620px){.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .grid>*{min-width:0;flex:none;max-width:100%}
  .card .t{font-size:13.5px;min-height:36px}.card .bid{font-size:16px}.card .in{padding:10px 11px 12px}
  .cattiles{gap:10px}
  .cattiles>*{flex:0 1 calc((100% - 10px)/2);min-width:0}
  .mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .imgtag .tag{font-size:10.5px;padding:2px 6px}}
.card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:box-shadow .15s,border-color .15s,transform .18s ease;display:flex;flex-direction:column;position:relative}
.card:hover{border-color:#c9d1de;box-shadow:0 6px 20px rgba(11,18,32,.09);transform:translateY(-2px)}
/* Korten tonar in nar de rullar in i bild. Klassen kortanim satts av JS:
   utan JS ar allt synligt fran start, och reduced motion hoppar over allt. */
html.kortanim .grid .card{opacity:0;transform:translateY(12px);
  transition:opacity .35s ease,transform .35s ease,box-shadow .15s,border-color .15s}
html.kortanim .grid .card.inne{opacity:1;transform:none}
html.kortanim .grid .card.inne:hover{transform:translateY(-2px)}
.cardlink{position:absolute;inset:0;z-index:1}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card .thumb{aspect-ratio:4/3;background:var(--soft);overflow:hidden;position:relative}
.klocka{position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.95);color:var(--ink);font-size:11.5px;font-weight:700;padding:5px 10px;
  border-radius:99px;box-shadow:0 2px 8px rgba(11,18,32,.18);font-variant-numeric:tabular-nums;
  transition:background .2s,color .2s}
.klocka svg{flex:none;opacity:.65}
.ktid{line-height:1}
.klocka.snart{background:#b42318;color:#fff}
.klocka.snart svg{opacity:1}
.klocka-txt.snart{color:#b42318}
.klocka-txt{font-variant-numeric:tabular-nums}
.respris{position:absolute;right:8px;bottom:8px;z-index:2;background:var(--goodbg);color:var(--good);font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:5px}
.fav{position:absolute;top:8px;right:8px;z-index:3;width:32px;height:32px;border-radius:50%;border:0;padding:0;
  background:rgba(255,255,255,.93);box-shadow:0 1px 5px rgba(11,18,32,.2);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s,color .12s}
.fav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9}
/* Traffytan striks ut till 44 px utan att knappen ser storre ut. Utan detta
   ar hjartat 29 px pa telefon, vilket ar under alla riktvarden for tumtryck
   och ligger dessutom nara kortets kant dar man latt traffar lanken i stallet. */
.fav::after{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.fav:hover{background:#fff;transform:scale(1.08)}
.fav.on{color:#d92d20}
.fav.on svg{fill:currentColor}
.bud{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted);font-weight:600}
.bud svg{flex:none;opacity:.55}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.card:hover .thumb img{transform:scale(1.045)}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px;background:repeating-linear-gradient(45deg,#f6f8fb,#f6f8fb 10px,#f1f4f9 10px,#f1f4f9 20px)}
.utanbild{background:repeating-linear-gradient(45deg,#f6f8fb,#f6f8fb 10px,#f1f4f9 10px,#f1f4f9 20px)!important;position:relative}
.utanbild::after{content:'Bild saknas';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px}
.ingetpris{font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--ink2)}
.verdict.tom .vlabel{color:var(--ink2)}
.card .in{padding:12px 13px 14px}
.card .src{font-size:11px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.card .t{font-weight:600;font-size:14.5px;line-height:1.35;margin:4px 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:39px}
.card .loc{color:var(--muted);font-size:12.5px}
.card .p{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.card .bid{font-size:18px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
/* Varderingen ar inte ett bud, sa den ska inte se ut som ett. */
.card .bid.kfmvard{color:var(--ink2)}
.prisnot{margin-top:6px;font-size:12.5px;color:var(--muted)}
.kfmruta{margin:14px 0 4px;padding:12px 13px;border:1px solid var(--line);border-radius:11px;background:var(--soft)}
.kfmruta .pricelbl{display:block;margin-bottom:8px}
.kfmrad{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:5px 0;font-size:14px}
.kfmrad+.kfmrad{border-top:1px solid var(--line)}
.kfmrad span{color:var(--muted);flex:0 0 auto}
.kfmrad b{text-align:right;font-weight:600}
.fastomslag{display:block;width:100%;height:100%;object-fit:cover}
.card .mv{color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imgtag{position:absolute;left:8px;top:8px;z-index:2}
.imgtag .tag{box-shadow:0 1px 4px rgba(11,18,32,.14)}
.tag{font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:5px;white-space:nowrap}
.tag.good{background:var(--goodbg);color:var(--good)}.tag.bad{background:var(--badbg);color:var(--bad)}
.tag.sold{background:var(--midbg);color:var(--mid)}
.tag.mid2{background:#eef2ff;color:#3730a3}
/* Kategorierna som forsta banner, PS Auctions monster: fyra riktiga objekt
   som bakgrund, mork toning, vit ikonbricka uppe till vanster, namn och antal
   nere till vanster och en pil nere till hoger. Tva hela rader om fem. */
.cattiles{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.cattiles>*{flex:0 1 calc((100% - 4*16px)/5);min-width:228px;max-width:100%}
.tile{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;
  background:#22314f;isolation:isolate;transition:transform .16s,box-shadow .16s}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(11,18,32,.22)}
/* min-height:0 kravs, annars vagrar rutnatets celler krympa och brickorna
   far olika hojd beroende pa bildernas egna proportioner. */
.tbilder{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;gap:2px;background:#22314f}
.tbilder.fa{grid-template-columns:1fr;grid-template-rows:1fr}
.tbilder img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;display:block;
  background:#22314f;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover .tbilder img{transform:scale(1.05)}
.tile::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(6,11,20,.88) 0%,rgba(6,11,20,.38) 46%,rgba(6,11,20,.14) 100%)}
.tikonbricka{position:absolute;left:13px;top:13px;z-index:2;width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.95);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(6,11,20,.25)}
.tikonbricka svg{width:22px;height:22px}
.tnamn{position:absolute;left:15px;right:58px;bottom:14px;z-index:2;color:#fff;
  font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em;line-height:1.25}
.tant{display:block;font-family:var(--sans);font-weight:500;font-size:13px;color:#c9d3e3;margin-top:2px}
.tpil{position:absolute;right:13px;bottom:13px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--ink);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(6,11,20,.25);transition:transform .15s}
.tpil svg{width:16px;height:16px}
.tile:hover .tpil{transform:translateX(3px)}
.blocksub{color:var(--muted);font-size:14.5px;margin-top:3px}
.mgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.mgrid>*{flex:0 1 calc((100% - 5*12px)/6);min-width:196px;max-width:100%}
.mcard{border:1px solid var(--line);border-radius:13px;padding:17px 18px;display:flex;flex-direction:column;background:#fff;transition:.16s}
.mcard:hover{border-color:var(--ink);box-shadow:0 6px 22px rgba(11,18,32,.08)}
.mcard .mn{font-size:12.5px;color:var(--muted);font-weight:500;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .mv2{font-family:var(--disp);font-size:21px;font-weight:600;letter-spacing:-.03em;margin-top:7px}
.mcard .gtitel{font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:8px 0 6px}
/* Modellkort med bild. Ett prisleaf utan bild sager inte vad modellen ar. */
.mgrid.bild .mcard{padding:0;overflow:hidden}
.mbild{display:block;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.mbild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.mcard:hover .mbild img{transform:scale(1.05)}
.min{display:block;padding:13px 15px 15px}
.min .mn,.min .mv2,.min .ms{display:block}
.mcard .ms{font-size:12.5px;color:var(--muted);margin-top:2px}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.catgrid a{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:9px;padding:14px 16px;font-weight:600;font-size:15px;transition:border-color .15s,background .15s}
.catgrid a:hover{border-color:var(--ink);background:var(--soft)}
.catgrid a b{color:var(--muted);font-weight:600;font-size:13.5px}
/* Hjalprad ovanfor huvudmenyn. Klaraviks monster: den morka raden ligger
   hogst upp, foljer med nar man rullar, och nar den stora loggan rullat ur
   bild tonar ett litet F-marke fram langst till vanster. Kontoknapparna
   ligger langst till hoger som hos Klaravik. */
.hjalprad{background:var(--ink);color:#9fb0cc;font-size:13.5px;position:sticky;top:0;z-index:40}
.hjalprad .wrap{display:flex;align-items:center;gap:20px;height:44px}
.hjalpvanster,.hjalpmitt,.hjalphoger{display:flex;align-items:center;gap:18px;min-width:0}
.hjalpmitt{padding-left:18px;border-left:1px solid rgba(255,255,255,.14)}
.hjalphoger{margin-left:auto}
.hjalprad a{color:#c3cede;white-space:nowrap;transition:color .13s}
.hjalprad a:hover{color:#fff}
.hjmark{display:flex;align-items:center;flex:none;width:0;opacity:0;overflow:hidden;
  transition:width .18s,opacity .18s}
.hjmark svg{width:27px;height:27px;border-radius:7px;flex:none}
body.rullad .hjmark{width:34px;opacity:1}
.hjskapa{border:1px solid rgba(255,255,255,.4);border-radius:99px;padding:6px 15px;
  color:#fff!important;font-weight:600;font-size:13px;transition:background .13s,color .13s}
.hjskapa:hover{background:#fff;color:var(--ink)!important}
.hjlogga{display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;margin-right:-20px;
  background:rgba(255,255,255,.09);color:#fff!important;font-weight:600;font-size:13.5px}
.hjlogga:hover{background:rgba(255,255,255,.16)}
.hjlogga svg{width:17px;height:17px}
.fardska{color:#7f8ea8;white-space:nowrap}
@media(max-width:820px){.hjalprad{position:static}}
@media(max-width:1340px){.fardska{display:none}}
@media(max-width:1200px){.hjalpvanster a:nth-child(n+3){display:none}}
@media(max-width:1050px){.hjalpmitt a:nth-child(n+3){display:none}}
@media(max-width:930px){.hjalpvanster a:nth-child(n+2){display:none}}
@media(max-width:820px){.hjalpmitt{display:none}}
@media(max-width:560px){.hjalprad .wrap{gap:14px}.hjalpvanster{display:none}
  /* En knapp, inte tva. Skapandet sker anda i samma flode: forsta
     inloggningen skapar kontot. Skapa konto finns kvar i menyn. */
  .hjalphoger{margin-left:auto}.hjskapa{display:none}}
/* Kallans logga i liten storlek. Samma falla som karusellen: en SVG utan
   intrinsisk storlek blir 0x0 om man inte satter hojden. */
.kallamini{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 8px;
  border-radius:5px;background:#fff}
.kallamini img{height:17px;width:auto;max-width:96px;object-fit:contain;display:block}
.kallamini.ord,.kallamini.text{font-size:12.5px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.kallamini.ord{color:#fff}
/* Horisontell filterrad i stallet for sidokolumn: hela bredden till objekten. */
.fbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:12px 0 14px;
  position:sticky;top:44px;z-index:15;background:#fff}
.fbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
@media(max-width:860px){.fbar{position:static}}
.fdrop{position:relative}
.fdrop>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;
  border:1.5px solid var(--line);border-radius:99px;padding:8px 15px;font-size:14px;font-weight:600;
  color:var(--ink2);background:#fff;transition:border-color .13s,color .13s}
.fdrop>summary::-webkit-details-marker{display:none}
.fdrop>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
.fdrop>summary:hover{border-color:#b9c3d2;color:var(--ink)}
.fdrop[open]>summary{border-color:var(--ink);color:var(--ink)}
.fdrop[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fdrop.aktiv>summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.fdrop.aktiv>summary::after{opacity:.85}
.fpop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 32px rgba(11,18,32,.15);padding:8px;min-width:238px;max-height:352px;overflow:auto}
.fpop.hoger{left:auto;right:0}
.fpop a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 10px;border-radius:7px;font-size:14px;color:var(--ink2);white-space:nowrap}
.fpop a:hover{background:var(--soft);color:var(--ink)}
.fpop a.on{background:var(--ink);color:#fff;font-weight:600}
.fpop a span{font-size:12px;color:var(--muted)}
.fpop a.on span{color:rgba(255,255,255,.7)}
.fpop form{display:flex;flex-direction:column;gap:9px;padding:2px}
.fpop .tva{display:flex;gap:8px}
.fpop input{border:1.5px solid var(--line);border-radius:7px;padding:9px 11px;font-size:14px;width:100%;min-height:44px;color:var(--ink)}
.fpop input:focus{outline:none;border-color:var(--ink)}
.fpop button{background:var(--ink);color:#fff;border:0;border-radius:7px;padding:10px;min-height:44px;font-weight:700;font-size:14px;cursor:pointer}
.fspace{flex:1;min-width:0}
.grid.fyra>*{flex:0 1 calc((100% - 3*18px)/4);min-width:196px}
.resbar{margin:18px 0 14px}
.faktiv{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:13px 0 0}
.fetikett{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-right:2px}
.fbricka{display:inline-flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px 5px 13px;font-size:13.5px;font-weight:600;color:var(--ink);transition:.13s}
.fbricka span{font-size:15px;line-height:1;color:var(--muted);margin-top:-1px}
.fbricka:hover{border-color:var(--ink);background:#fff}
.fbricka:hover span{color:var(--ink)}
.frensa{font-size:13.5px;color:var(--focus);font-weight:600;padding:5px 4px;white-space:nowrap}
.frensa:hover{text-decoration:underline}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin:34px 0 6px}
.pg{border:1.5px solid var(--line);border-radius:8px;padding:9px 14px;font-size:14.5px;font-weight:600;color:var(--ink2);min-width:42px;text-align:center}
.pg:hover{border-color:var(--ink);color:var(--ink)}
.pg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pg.av{opacity:.35}
.pgprick{color:var(--muted);padding:0 3px}
/* Lokalhyror */
/* Lokalhyror. Video i heron pa oversikten, stadsbild pa ortssidan. */
.lhero{position:relative;background:var(--ink);color:#fff;border-radius:20px;overflow:hidden;
  margin:10px 0 24px;isolation:isolate;min-height:300px;display:flex;align-items:flex-end}
.lvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.lhero.stadhero::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:var(--stadbild);background-size:cover;background-position:center}
.lheroskugga{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(11,18,32,.95) 0%,rgba(11,18,32,.82) 44%,rgba(11,18,32,.34) 100%),
             linear-gradient(0deg,rgba(11,18,32,.72) 0%,rgba(11,18,32,0) 62%)}
.lhero .lheroin{position:relative;z-index:2;padding:40px 40px 34px}
.lhero h1{font-size:clamp(30px,4.4vw,46px);letter-spacing:-.04em;line-height:1.04}
.lhero p{color:#c8d2e2;font-size:16.5px;margin-top:10px;max-width:54ch}
.ltillbaka{margin-bottom:13px}
.ltillbaka a{color:#9fb0cc;font-size:13.5px;font-weight:600}
.ltillbaka a:hover{color:#fff}
/* Stadskort med riktig stadsbild och hyresnivan direkt pa kortet. */
.stadgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:34px}
.stadgrid>*{flex:0 1 calc((100% - 4*16px)/5);min-width:232px;max-width:100%}
.stadkort{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:3/2;display:block;
  background:linear-gradient(160deg,#1b2b48,#0B1220);transition:transform .18s,box-shadow .18s}
.stadkort:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,18,32,.18)}
.stadkort img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.stadkort:hover img{transform:scale(1.06)}
.stadkort::after{content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,11,20,.94) 0%,rgba(6,11,20,.55) 46%,rgba(6,11,20,.06) 100%)}
.stadin{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:15px 17px;display:flex;flex-direction:column}
.stadin b{font-family:var(--disp);font-weight:600;font-size:18px;color:#fff;letter-spacing:-.025em}
.stadpris{font-family:var(--disp);font-weight:600;font-size:15px;color:#ffd9a3;margin-top:3px;letter-spacing:-.01em}
.stadtyp{font-size:12px;color:#b9c4d6;margin-top:1px}
.stadgrid.liten{gap:13px}
.stadgrid.liten>*{flex:0 1 calc((100% - 5*13px)/6);min-width:168px}
.stadgrid.liten .stadkort{aspect-ratio:16/10;border-radius:13px}
.stadgrid.liten .stadin{padding:12px 13px}
.stadgrid.liten .stadin b{font-size:15.5px}
.stadgrid.liten .stadpris{font-size:13px}
.gal .main{position:relative}
/* Raknaren uppe till vanster och stora bladdringspilar, Klaraviks monster. */
.bildraknare{position:absolute;left:12px;top:12px;background:rgba(11,18,32,.82);color:#fff;
  font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:99px;backdrop-filter:blur(6px)}
.bildraknare b{font-weight:700}
.galpil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(11,18,32,.22);
  transition:transform .13s,box-shadow .13s}
.galpil:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 4px 16px rgba(11,18,32,.3)}
.galpil.bak{left:12px}
.galpil.bak svg{transform:rotate(180deg)}
.galpil.fram{right:12px}
.thumbs img.vald{border-color:var(--ink);border-width:2px}
.allabilder{position:absolute;right:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--ink);
  font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:99px;transition:.13s}
.allabilder:hover{background:#fff;box-shadow:0 4px 14px rgba(11,18,32,.18)}
.thumbs img{cursor:pointer}
.metaline.sekundar span{color:var(--muted)}
.metaline.sekundar span:last-child{color:var(--ink2);font-weight:600}
/* Heron: PS Auctions monster med en stor sokruta och ett lofte, men pa var
   morka varumarkesfarg i stallet for en stockfotobakgrund vi inte ager. */
.hero{background:var(--ink);color:#fff;
  border-radius:20px;margin:18px 0 6px;padding:56px 24px 48px;text-align:center;
  position:relative;overflow:hidden;isolation:isolate}
/* Egen fotograferad kansla: bilden ligger bakom en mork ton sa texten alltid
   ar lasbar. Bilden ar var egen, inga externa anrop. */
.hero::before{content:'';position:absolute;inset:0;z-index:-2;
  background:url(/brand/hero.jpg) center 68%/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,15,28,.78) 0%,rgba(9,15,28,.62) 45%,rgba(9,15,28,.82) 100%)}
.hero h1{font-size:clamp(28px,4vw,42px);letter-spacing:-.035em;line-height:1.05}
.heroing{color:#c8d2e2;font-size:clamp(14.5px,1.6vw,16.5px);margin:12px auto 0;max-width:52ch}
.heroing b{color:#fff;font-weight:800}
.herokick{color:#e9c579;font-weight:800;font-size:13.5px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:12px}
.herotrend{margin-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center;font-size:13.5px;color:#c8d2e2}
.herotrend span{margin-right:2px}
.herotrend a{color:#fff;font-weight:700;text-decoration:none;padding:11px 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;transition:border-color .13s,background .13s}
.herotrend a:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.fyndtal{display:flex;gap:30px;flex-wrap:wrap;margin:16px 0 8px}
.fyndtal b{font-size:22px;display:block}
.fyndtal span{color:var(--muted);font-size:13px}
.trendgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:22px}
.trendkort{border:1px solid var(--line);border-radius:12px;padding:18px;display:block;text-decoration:none;color:var(--ink);transition:box-shadow .15s,border-color .15s}
.trendkort:hover{box-shadow:0 6px 20px rgba(6,11,20,.08);border-color:var(--focus)}
.trendkort b{font-size:18px;display:block;margin-bottom:6px}
.trendkort span{color:var(--muted);font-size:13px}
.trendrad{display:flex;gap:10px;flex-wrap:wrap}
.trendrad a{border:1px solid var(--line);border-radius:999px;padding:12px 18px;text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.trendrad a:hover{border-color:var(--focus);color:var(--focus)}
.herosok{display:flex;max-width:640px;margin:24px auto 0;background:#fff;border-radius:14px;
  padding:6px;box-shadow:0 14px 44px rgba(6,11,20,.35)}
.herosok input{flex:1;min-width:0;border:0;background:transparent;padding:12px 10px 12px 16px;
  font-size:16.5px;font-family:inherit;color:var(--ink);outline:none}
.herosok button{flex:none;display:flex;align-items:center;gap:8px;border:0;border-radius:10px;
  background:var(--focus);color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;
  padding:0 22px;cursor:pointer;transition:filter .13s}
.herosok button:hover{filter:brightness(1.12)}
.rostknapp{flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink2);padding:0 10px;min-width:44px;height:44px;border-radius:9px;transition:color .13s,transform .1s}
.rostknapp:hover{color:var(--ink)}
.rostknapp:active{transform:scale(.92)}
.lyssnar .rostknapp{color:var(--focus)}
.lyssnar .rostknapp svg{animation:rostpuls 1s ease-in-out infinite}
@keyframes rostpuls{0%,100%{opacity:1}50%{opacity:.3}}
.herosok .rostknapp{background:none;color:var(--ink2);padding:0 8px 0 14px}
.herosok .rostknapp:hover{color:var(--ink);background:none}
.bildknapp{flex:none;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--ink2);padding:0 10px;min-width:44px;height:44px;border-radius:9px;transition:color .13s,transform .1s}
.bildknapp:hover{color:var(--ink)}
.bildknapp:active{transform:scale(.92)}
.herosok .bildknapp{background:none;color:var(--ink2);padding:0 6px 0 12px}
.herosok .bildknapp:hover{color:var(--ink);background:none}
.bildladdar .bildknapp{color:var(--focus)}
.bildladdar .bildknapp svg{animation:rostpuls 1s ease-in-out infinite}
.herostat{color:#9fb0cc;font-size:13.5px;margin-top:18px}
.herostat b{color:#e6ecf6;font-weight:700}
@media(max-width:600px){
  .hero{padding:34px 16px 30px;border-radius:16px;margin-top:12px}
  .herosok{padding:5px}
  .herosok input{font-size:16px;padding-left:12px}
  .herosok button span{display:none}
  .herosok button{padding:0 16px}
  .herostat{font-size:12.5px}
}

/* Filterraden. Pa bred skarm ligger alla droppar pa rad; pa telefon foljer vi
   Klaravik: lanet i full bredd, sedan Filtrera och sortering. */
.flan,.fdesktop{display:contents}
.fmobil{display:none}
.mfgrupp{padding:4px 2px 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mfgrupp:last-child{border-bottom:0;margin-bottom:0;padding-bottom:2px}
.mfgrupp>b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);padding:6px 10px 8px}

/* Kontaktformular. */
/* Inloggningens entre. Delarna dyker upp i tur och ordning: marke, rubrik,
   kort, sidopanel. Tiderna ar korta nog att aldrig kannas som vantan, och
   reduced motion stanger av alltihop. */
@keyframes loggadyk{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.loggain h1{animation:loggadyk .45s cubic-bezier(.2,.7,.3,1) both}
.loggain .ing{animation:loggadyk .45s .07s cubic-bezier(.2,.7,.3,1) both}
.loggain .loggakort{animation:loggadyk .5s .14s cubic-bezier(.2,.7,.3,1) both}
.loggasido{animation:loggadyk .5s .24s cubic-bezier(.2,.7,.3,1) both}
.loggamarke{display:none}
@media(max-width:700px){
  .loggamarke{display:flex;width:62px;height:62px;margin:10px auto 14px;border-radius:17px;
    background:var(--ink);color:#fff;align-items:center;justify-content:center;
    box-shadow:0 12px 32px rgba(11,18,32,.26);animation:loggadyk .4s both}
  .loggamarke svg{width:28px;height:28px}
  .loggain h1{text-align:center;font-size:24px}
  .loggain>.ing,.loggain .ing{text-align:center}
  .loggakort{border:1px solid var(--line);border-radius:16px;padding:20px 16px;
    box-shadow:0 16px 44px rgba(11,18,32,.08);background:#fff}
  .googleknapp{height:52px}
  .kform button{padding:15px}
}
@media(prefers-reduced-motion:reduce){
  .loggain h1,.loggain .ing,.loggain .loggakort,.loggasido,.loggamarke{animation:none}
}
.kform{display:flex;flex-direction:column;gap:15px;margin-top:6px}
.kform label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.kform label span{font-weight:500;color:var(--muted);font-size:13px}
.kform input,.kform select,.kform textarea{border:1.5px solid var(--line);border-radius:10px;
  padding:12px 13px;font-size:15.5px;font-family:inherit;color:var(--ink);background:#fff;width:100%}
.kform input:focus,.kform select:focus,.kform textarea:focus{outline:none;border-color:var(--ink)}
.kform textarea{resize:vertical;min-height:120px;line-height:1.5}
.kform button{background:var(--ink);color:#fff;border:0;border-radius:11px;padding:14px;
  font-size:15.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:.14s}
.kform button:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,18,32,.18)}
.kformnot{color:var(--muted);font-size:13px;margin-top:-4px}
.kformnot a{color:var(--focus);font-weight:600}
/* Honungsfalla: syns inte for manniskor, fylls bara i av robotar. */
.honung{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.kform>.honung{display:block}
.kvitto{background:var(--goodbg);color:var(--good);border-radius:11px;padding:14px 16px;
  font-size:15px;font-weight:600;margin-bottom:16px}
.kvitto.fel{background:#fef2f2;color:#b42318}

/* Kategoriforslag i traffarna: nar sokordet pekar pa en hel kategori. */
.katforslag{display:flex;align-items:center;gap:12px;margin:14px 0 2px;padding:13px 16px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--soft);
  font-size:14.5px;color:var(--ink2);transition:border-color .14s,background .14s}
.katforslag:hover{border-color:var(--ink);background:#fff}
.katforslag b{color:var(--ink)}
.katforslag svg:first-child{flex:none;opacity:.7}
.katforslag svg:last-child{flex:none;margin-left:auto;opacity:.55}

/* Bevaka en sokning med mejl: kortet visas nar sokningen inte gav nagot. */
.bevakakort{margin:22px auto 0;max-width:460px;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px;
  box-shadow:0 8px 26px rgba(11,18,32,.07)}
.bevakakort b{font-family:var(--disp);font-weight:600;font-size:16.5px;letter-spacing:-.02em}
.bevakakort p{color:var(--muted);font-size:14px;margin:6px 0 14px;line-height:1.5}
.bevakakort form{display:flex;gap:8px;flex-wrap:wrap}
.bevakakort input[type=email]{flex:1;min-width:180px;border:1.5px solid var(--line);border-radius:10px;
  padding:11px 13px;font-size:15px;font-family:inherit;color:var(--ink)}
.bevakakort input[type=email]:focus{outline:none;border-color:var(--ink)}
.bevakakort button{flex:none;border:0;border-radius:10px;background:var(--ink);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;padding:0 18px;cursor:pointer;min-height:44px}

/* Inloggningen. Ett kort, tva vagar in: Google eller engangskod via e-post. */
/* Inloggningen i tva spalter. Formularet ensamt mitt pa en tom sida sag
   overgivet ut och sa ingenting om varfor man skulle vilja ha ett konto.
   Hoger spalt fyller ytan OCH svarar pa den fragan. */
.loggagrid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:44px;align-items:start;padding:6px 0 40px}
.loggain{max-width:460px;padding:4px 0 0}
.loggain h1{font-size:27px}
.loggasido{background:var(--ink);color:#fff;border-radius:20px;padding:30px;margin-top:14px}
.loggasido h2{font-size:20px;letter-spacing:-.025em;color:#fff}
.loggapunkter{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:17px}
.loggapunkter li{display:flex;gap:12px;align-items:flex-start}
.loggapunkter li svg{flex:none;margin-top:2px;color:#4ade80}
.loggapunkter span{font-size:14.5px;line-height:1.5;color:#c7cfdd}
.loggapunkter b{display:block;color:#fff;font-size:15px;margin-bottom:3px}
.loggatp{display:flex;align-items:center;gap:11px;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.loggatp p{font-size:14px;color:#9aa5b8;margin:0}
.loggatp b{color:#fff}
.loggagratis{margin-top:16px;font-size:13px;line-height:1.55;color:#9aa5b8}
/* E-post eller sms som tva lankar. Valet syns i adressen och overlever en
   omladdning, till skillnad fran en knapp som glommer sig. */
.loggavaxel{display:flex;gap:4px;background:var(--soft);border:1px solid var(--line);
  border-radius:11px;padding:4px;margin-bottom:18px}
.loggavaxel a{flex:1;text-align:center;padding:10px;border-radius:8px;
  font:600 14.5px var(--sans);color:var(--muted);min-height:44px;
  display:flex;align-items:center;justify-content:center}
.loggavaxel a.pa{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,18,32,.1)}
@media(max-width:900px){.loggagrid{grid-template-columns:1fr;gap:26px}
  .loggain{max-width:none}.loggasido{margin-top:0}}
.loggakort{border:1px solid var(--line);border-radius:16px;padding:26px 24px;margin-top:20px;
  background:#fff;box-shadow:0 8px 30px rgba(11,18,32,.06)}
.loggakort>b{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.02em}
.loggakort>p{color:var(--muted);font-size:14px;margin:6px 0 16px}
.googleknapp{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  border:1.5px solid var(--line);border-radius:11px;padding:13px;font-size:15.5px;font-weight:600;
  color:var(--ink);transition:border-color .13s,box-shadow .13s}
.googleknapp:hover{border-color:#b9c3d2;box-shadow:0 4px 14px rgba(11,18,32,.08)}
.googleknapp svg{width:21px;height:21px;flex:none}
.loggadelare{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:13px}
.loggadelare::before,.loggadelare::after{content:'';flex:1;height:1px;background:var(--line)}
.logganot{color:var(--muted);font-size:12.5px;margin-top:16px;line-height:1.5}
.logganot a{color:var(--focus);font-weight:600}
.loggabyt{margin-top:14px;font-size:14px}
.loggabyt a{color:var(--focus);font-weight:600}

/* Chattpanelen. Klaraviks modell: rubrik som sager att det ar en bot, sedan
   samtalet och ett falt langst ner. */
.chattpanel{position:fixed;right:20px;bottom:20px;z-index:70;width:min(370px,calc(100vw - 28px));
  max-height:min(560px,calc(100vh - 40px));display:none;flex-direction:column;
  background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(11,18,32,.28);
  border:1px solid var(--line)}
.chattpanel.pa{display:flex;animation:chattin .2s cubic-bezier(.2,.7,.3,1)}
@keyframes chattin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.chatthuvud{background:var(--ink);color:#fff;padding:15px 17px;display:flex;
  align-items:flex-start;justify-content:space-between;gap:12px}
.chatthuvud b{display:block;font-size:15.5px;font-family:var(--disp);font-weight:600}
.chatthuvud span{display:block;font-size:12.5px;color:#9fb0cc;margin-top:2px}
.chattstang{background:none;border:0;color:#9fb0cc;cursor:pointer;padding:2px;line-height:0}
.chattstang:hover{color:#fff}
.chattlogg{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;
  background:var(--soft);min-height:180px}
.cmsg{max-width:88%;padding:11px 14px;border-radius:14px;font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.cmsg.bot{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px}
.cmsg.du{background:var(--ink);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.cmsg a{color:var(--focus);font-weight:600}
.cmsg.du a{color:#a9c7ff}
.ctanker{display:flex;gap:5px;align-items:center;min-height:19px}
.ctanker span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.4;
  animation:ctankp 1.1s ease-in-out infinite}
.ctanker span:nth-child(2){animation-delay:.16s}
.ctanker span:nth-child(3){animation-delay:.32s}
@keyframes ctankp{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.ctanker span{animation:none;opacity:.5}}
.chattforslag{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;background:var(--soft)}
.chattforslag button{background:#fff;border:1px solid var(--line);border-radius:99px;
  padding:7px 12px;font-size:13px;font-weight:600;color:var(--ink2);cursor:pointer;font-family:inherit}
.chattforslag button:hover{border-color:var(--ink);color:var(--ink)}
.chattform{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff;
  align-items:center}
/* Kameraknappen i chatten. Samma ikon som i sokrutan, sa det gar att gissa
   vad den gor utan att nagon forklarar det. */
.chattbild{flex:none;width:44px;height:44px;border:1.5px solid var(--line);border-radius:50%;
  background:#fff;color:var(--ink2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.chattbild:hover{border-color:var(--ink);color:var(--ink)}
.cmsg.cbild{padding:5px;max-width:62%}
.cmsg.cbild img{display:block;width:100%;height:auto;border-radius:10px}
.chattform input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:99px;
  padding:11px 16px;font-size:15px;font-family:inherit;color:var(--ink)}
.chattform input:focus{outline:none;border-color:var(--ink)}
.chattform button{flex:none;background:var(--ink);color:#fff;border:0;border-radius:99px;
  height:44px;padding:0 18px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer}
@media(max-width:600px){
  .chattpanel{right:8px;left:8px;bottom:8px;width:auto;max-height:min(78vh,540px)}
}

/* Flikrad langst ner. Bara pa telefon och surfplatta; pa bred skarm racker
   den vanliga menyn och tumavstand ar inget problem. Varje flik ar minst
   44 px hog och delar bredden lika. */
.tabbar{display:none}
@media(max-width:820px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--bg);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -1px 12px rgba(11,18,32,.06)}
  .tabbar>a,.tabbar>button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:3px;height:var(--tabh);
    padding:0 2px;background:none;border:0;font-family:inherit;cursor:pointer;
    color:var(--muted);position:relative;-webkit-tap-highlight-color:transparent}
  .tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;
    stroke-linecap:round;stroke-linejoin:round;flex:none}
  .tabbar span{font-size:10.5px;font-weight:600;letter-spacing:-.01em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tabbar a.pa{color:var(--ink)}
  .tabbar a.pa svg{stroke-width:2.2;transform:translateY(-1px)}
  /* Aktiv flik far en liten topplinje som glider in, och tryck ger studs
     i ikonen. Diskret, inte cirkus. */
  .tabbar a.pa::before{content:'';position:absolute;top:0;left:50%;width:24px;height:3px;
    border-radius:0 0 3px 3px;background:var(--ink);transform:translateX(-50%);
    animation:flikin .28s cubic-bezier(.2,.7,.3,1)}
  @keyframes flikin{from{opacity:0;width:6px}to{opacity:1;width:24px}}
  .tabbar svg{transition:transform .16s ease}
  .tabbar a:active svg,.tabbar button:active svg{transform:scale(.86)}
  .tabbar a:active,.tabbar button:active{background:var(--soft)}
  @media(prefers-reduced-motion:reduce){.tabbar a.pa::before{animation:none}}
  /* Antalet sparade som en liten prick pa ikonen, inte en egen rad. */
  .flikprick{position:absolute;top:6px;right:calc(50% - 18px);min-width:16px;height:16px;
    border-radius:99px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;
    display:none;align-items:center;justify-content:center;padding:0 4px;line-height:1}
  .flikprick:not(:empty){display:flex}
  /* Innehallet far inte hamna bakom raden. */
  body{padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom))}
  /* Menyn i flikraden oppnar samma panel som hamburgaren; da behovs inte
     hamburgaren i headern langre. */
}

/* Chattknapp i nedre hogra hornet, som Klaraviks. */
.chattknapp{position:fixed;right:20px;bottom:20px;z-index:55;display:flex;align-items:center;gap:9px;
  height:52px;padding:0 20px 0 17px;border-radius:99px;background:var(--ink);color:#fff;
  font-size:15px;font-weight:700;box-shadow:0 8px 26px rgba(11,18,32,.28);
  transition:transform .15s,box-shadow .15s}
.chattknapp:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,18,32,.34)}
.chattknapp svg{flex:none}
body:has(details.meny[open]) .chattknapp{display:none}
.chattprick{width:8px;height:8px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.25);animation:prickpuls 2.6s ease-in-out infinite}
@keyframes prickpuls{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.25)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.1)}}
.chattknapp{animation:chattupp .45s cubic-bezier(.2,.7,.3,1)}
@keyframes chattupp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.chattprick,.chattknapp{animation:none}}
@media(max-width:600px){
  .chattknapp{right:14px;bottom:14px;height:48px;padding:0;width:48px;justify-content:center;font-size:14.5px}
  .chatttext{display:none}
  /* Utan texten blev pricken en egen boll BREDVID cirkeln. Pa cirkelns
     kant ser den ut som det den ar: en statusprick. */
  .chattknapp .chattprick{position:absolute;top:2px;right:2px;border:2px solid #fff;
    width:11px;height:11px;box-shadow:none;animation:none}
}

/* backdrop-filter gor headern till containing block for position:fixed, vilket
   klipper menypanelen och knapparna i dess botten. Pa telefon behovs inte
   genomskinligheten, sa filtret tas bort dar. */
@media(max-width:820px){
  header.top{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
}

/* Krympt header pa telefon. Logga, sok, konto och meny pa en enda rad, och
   hjalpraden och kategoriraden viker undan. */
@media(max-width:820px){
  .catbar{max-height:56px;overflow:hidden;transition:max-height .25s ease,opacity .2s ease}
  header.top.krympt .catbar{max-height:0;opacity:0;pointer-events:none}
  .topbar>.logo .mark{transition:width .22s ease,height .22s ease}
  header.top.krympt .topbar{min-height:56px;padding:8px 20px;flex-wrap:nowrap;gap:9px}
  /* Loggan ska sta forst aven nar sokrutan far order:0, annars hamnar
     F-market till hoger om faltet och raden ser bakvand ut. */
  header.top.krympt .topbar>.logo{order:-1}
  header.top.krympt .topbar>.logo .word{display:none}
  header.top.krympt .topbar>.logo .mark{width:32px;height:32px}
  header.top.krympt .searchbox{order:0;flex:1 1 auto;min-width:0}
  header.top.krympt .searchbox input{height:40px;font-size:15px}
  /* Klaraviks krympta rad: logga, sokfalt, gubbe, burgare. Hjartat goms har:
     Sparade ligger anda alltid i bottenraden, och tva ikoner for samma sak pa
     56 pixlar ar bara trangsel. */
  header.top.krympt .topkonto{order:1;width:36px;height:36px}
  header.top.krympt .meny{order:2}
  header.top.krympt nav.main{display:none}
  header.top{transition:none}
}

/* Hamburgermeny, Klaraviks modell: hela skarmen, sektioner, och konto langst
   ner. <details> gor att den fungerar aven utan javascript. */
/* Menyn finns pa BADA bredder. Pa desktop lag allt utanfor toppradens sju
   lankar onaabart: kategorier, guider, marknadslage, kallor. */
.meny{display:block;flex:none}
/* Kontoknappen i headern: Klaraviks gubbe. Rund, mork, vit ikon. Visas bara
   pa telefon; desktop har kvar hjalpradens Logga in. */
.topkonto{display:none;flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--ink);color:#fff;align-items:center;justify-content:center}
.topkonto svg{width:19px;height:19px}
.topkonto:active{transform:scale(.94)}
@media(max-width:820px){.topkonto{display:flex}}
.meny>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:-8px;border-radius:10px;color:var(--ink)}
.meny>summary::-webkit-details-marker{display:none}
.meny>summary:active{background:var(--soft)}
/* Panelen glider in fran vanster. Pa desktop 420 px med morkt overlag over
   resten, pa telefon hela skarmen. Overlaget tonar in separat sa det inte
   kanns som att hela sidan hoppar. */
.menypanel{position:fixed;inset:0;z-index:80;background:rgba(11,18,32,.5);
  animation:tona .2s ease-out}
.menyin{position:relative;height:100%;width:100%;background:#fff;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Flikraden ligger over panelen pa telefon. Utan dess hojd i luften har
     skymdes Logga in och Skapa konto halvt, precis det Joel fotade. */
  padding-bottom:calc(var(--tabh, 0px) + 36px + env(safe-area-inset-bottom));
  animation:menyglid .3s cubic-bezier(.2,.7,.3,1)}
@keyframes tona{from{opacity:0}to{opacity:1}}
@keyframes menyglid{from{transform:translateX(-100%)}to{transform:none}}
@media(min-width:821px){
  .menyin{width:min(420px,92vw);box-shadow:0 0 60px rgba(11,18,32,.35)}
}
.menytopp{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;position:sticky;top:0;background:var(--ink);z-index:2}
.menytopp .logo{color:#fff}
.menytopp .logo .word{color:#fff}
.menytopp .logo{order:0;margin:0;border-bottom:0}
.menytopp .menystang{order:1;margin-left:auto}
.menytopp .logo .mark{width:34px;height:34px}
.menytopp .logo .word{font-size:22px}
.menystang{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;flex:none;
  transition:background .13s}
.menystang:hover{background:rgba(255,255,255,.24)}
.menystang:active{background:rgba(255,255,255,.3)}
.menyin a{display:flex;align-items:center;gap:12px;padding:13px 20px;font-size:16px;
  font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.menyin a:active{background:var(--soft)}
.menyin a.menykat{font-weight:500;font-size:15px;color:var(--ink2);padding:11px 20px 11px 26px}
.menyin a.menykat svg{flex:none;opacity:.5}
.menydel{padding:22px 20px 8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);background:var(--soft)}
/* Kategorierna som en svepbar rad hogst upp. Forut lag de hopfallda bakom en
   rubrik, alltsa tva tryck bort, trots att de ar det man oftast vill at. */
.menykatrad{display:flex;gap:8px;overflow-x:auto;padding:14px 18px;
  border-bottom:1px solid var(--line);scrollbar-width:none;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.menykatrad::-webkit-scrollbar{display:none}
.menykatrad a{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;gap:7px;width:78px;padding:12px 4px;border:1px solid var(--line);
  border-radius:13px;font-size:11.5px;font-weight:600;color:var(--ink2);
  text-align:center;line-height:1.25;transition:border-color .13s,color .13s}
.menykatrad a:hover{border-color:var(--ink);color:var(--ink)}
.menykatrad a svg{flex:none;opacity:.75}
.menykatrad a span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.menyfall>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:14px 20px;font-size:16px;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}
.menyfall>summary::-webkit-details-marker{display:none}
.menyfall>summary::after{content:'';width:11px;height:11px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:.15s}
.menyfall[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
/* I flodet, inte fixerad. Fixerad lag den bakom flikraden pa telefon och
   knapparna gick inte att traffa. */
.menybotten{display:flex;gap:10px;padding:20px 18px 8px;background:#fff}
.menybotten .knapp{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:48px;border-radius:11px;font-size:15.5px;font-weight:700;border:1.5px solid var(--ink)}
.knapp.mork{background:var(--ink);color:#fff}
.knapp.ljus{background:#fff;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.menypanel{animation:none}}

/* Kundsupportens toppkort: text och snabbvagar till vanster, bild till hoger. */
.stodtopp{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;margin:14px 0 30px;background:#fff}
.stodin{flex:1.15;min-width:0;padding:36px 34px;display:flex;flex-direction:column;justify-content:center}
.stodin h1{font-size:clamp(26px,3vw,34px)}
.stodin p{color:var(--muted);font-size:15.5px;line-height:1.55;margin-top:10px;max-width:52ch}
.stodrad{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.stodkort{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line);border-radius:13px;
  padding:14px 18px;min-width:200px;transition:border-color .14s,box-shadow .14s}
.stodkort:hover{border-color:var(--ink);box-shadow:0 6px 20px rgba(11,18,32,.08)}
.stodkort b{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:-.015em}
.stodkort span{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px}
.stodprick{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 3px rgba(34,197,94,.22)}
.stodbild{flex:1;min-width:0;object-fit:cover;display:block;max-height:340px}
@media(max-width:860px){
  .stodtopp{flex-direction:column-reverse}
  .stodbild{width:100%;max-height:190px}
  .stodin{padding:22px 20px 24px}
  .stodrad{gap:10px}
  .stodkort{flex:1 1 100%;min-width:0}
}

/* Kontaktsidan. */
.kontaktrad{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0 8px}
.kontaktkort{display:flex;align-items:center;gap:13px;flex:1 1 240px;min-width:0;
  border:1px solid var(--line);border-radius:13px;padding:16px 18px;background:#fff}
.kontaktikon{flex:none;width:40px;height:40px;border-radius:11px;background:var(--soft);
  display:flex;align-items:center;justify-content:center;color:var(--ink)}
.kontakttxt{display:flex;flex-direction:column;min-width:0}
.kontakttxt b{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kontakttxt a,.kontakttxt{color:var(--ink)}
.kontakttxt a{font-size:15.5px;font-weight:600;color:var(--focus);word-break:break-all}
.kontakttxt>:last-child{font-size:15.5px;font-weight:600;margin-top:2px}
.kontaktfall{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.kontaktfall>div{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff}
.kontaktfall b{display:block;font-size:15.5px;margin-bottom:5px}
.kontaktfall p{color:var(--ink2);font-size:14.5px;line-height:1.55}
@media(max-width:600px){.kontaktrad{gap:10px}.kontaktkort{flex:1 1 100%;padding:14px 15px}
  .kontaktfall{grid-template-columns:1fr;gap:10px}}

/* Vanliga fragor. Dragspel byggda pa <details>, sa de fungerar utan js och
   gar att lanka till med ankare. */
.faqgrupp{max-width:820px;margin:34px 0}
.faqgrupp h2{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
details.faq{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;background:#fff;
  transition:border-color .13s,box-shadow .13s}
details.faq[open]{border-color:#c9d1de;box-shadow:0 4px 16px rgba(11,18,32,.06)}
details.faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px 18px;font-size:16px;font-weight:600;
  color:var(--ink);line-height:1.35}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::after{content:'';flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line);position:relative;transition:.15s}
details.faq>summary::before{content:'';position:absolute;right:25.2px;width:10px;height:10px;
  background-image:linear-gradient(var(--ink2),var(--ink2)),linear-gradient(var(--ink2),var(--ink2));
  background-size:10px 1.6px,1.6px 10px;background-position:center,center;
  background-repeat:no-repeat;transition:.15s}
details.faq>summary{position:relative}
details.faq[open]>summary::after{background:var(--ink);border-color:var(--ink)}
details.faq[open]>summary::before{
  background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff);
  background-size:10px 1.6px,0 0}
details.faq:not([open])>summary:hover::after{border-color:var(--ink)}
.faqsvar{padding:0 18px 18px;color:var(--ink2);font-size:15.5px;line-height:1.6;max-width:68ch}
.faqsvar a{color:var(--focus);font-weight:600}
@media(max-width:600px){
  details.faq>summary{font-size:15px;padding:14px 15px;gap:12px}
  details.faq>summary::before{right:22.2px}
  .faqsvar{padding:0 15px 15px;font-size:14.5px}
}
/* Skelett. Bildplatsen ska aldrig sta tom och vit, den ska visa att nagot ar
   pa vag. Klassen tas bort av bildens egen load-handlare. */
@keyframes skimra{from{background-position:200% 0}to{background-position:-200% 0}}
.tbilder,.thumb,.stadkort,.gal .main{background:var(--soft)}
/* Skimret pa behallaren, bakom bilden. Skriptet langst ner i dokumentet
   hinner inte fore forsta ritningen: pa strypt 3G stod 60 tomma rutor utan
   signal i 1,2 sekunder innan img.laddar sattes. Det har ligger i CSS och
   finns darfor i samma ogonblick kortet ritas. Bilden taeckar det nar den ar
   inne, sa ingenting behover slacka det. */
.card .thumb::before,.stadkort::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,#eef1f6 25%,#e2e7ef 37%,#eef1f6 63%);
  background-size:200% 100%;animation:skimra 1.4s ease-in-out infinite}
/* Inget skimmer dar det redan finns ett ritat omslag: skimret betyder "en
   bild ar pa vag", och ett ritat omslag laddas aldrig. */
.card .thumb.utanbild::before,.card .thumb:has(.fastomslag)::before{display:none}
.card .thumb img,.card .thumb .noimg,.card .thumb .fastomslag{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .card .thumb::before,.stadkort::before{animation:none}}
img.laddar{background:linear-gradient(90deg,#eef1f6 25%,#e2e7ef 37%,#eef1f6 63%);
  background-size:200% 100%;animation:skimra 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){img.laddar{animation:none}}
img.klar{animation:none;background:none}

/* Sidladdning. Ett tunt band hogst upp nar man klickat vidare, sa man ser att
   det hander nagot innan nasta sida ar framme. */
#laddband{position:fixed;top:0;left:0;height:3px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--ink),#3b82f6);
  transition:width .25s ease-out,opacity .3s;opacity:0;pointer-events:none}
#laddband.pa{opacity:1}
/* Budhistorik. Det ledande budet ska ga att hitta pa en halv sekund. */
.budrull{max-height:390px;overflow:auto;border:1px solid var(--line);border-radius:11px}
.budtabell{margin:0}
.budtabell th{position:sticky;top:0;background:#fff;z-index:1;padding:11px 14px;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  border-bottom:1px solid var(--line);text-align:left}
.budtabell th:last-child,.budtabell td:last-child{text-align:right}
.budtabell td{padding:11px 14px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.budtabell tr:first-child td{border-top:0}
.budtabell tr.ledande td{background:#f0fdf4;font-weight:700;color:var(--ink)}
.budtabell tr.ledande td:first-child{box-shadow:inset 3px 0 0 #16a34a}
.budtid{color:var(--ink2);font-size:13.5px}
.budgivare{color:var(--muted);font-size:13.5px}
.budnot{color:var(--muted);font-size:13px;margin-top:11px}
.tabellrull{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sect:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch}
.sect > table{min-width:max-content}
table.hyra td{white-space:nowrap}
table.hyra td:not(:first-child),table.hyra th:not(:first-child){text-align:right}
.ortval{display:flex;flex-wrap:wrap;gap:8px}
.ortval a{border:1.5px solid var(--line);border-radius:99px;padding:8px 15px;font-size:14px;
  color:var(--ink2);font-weight:500;background:#fff;transition:.14s}
.ortval a:hover{border-color:var(--ink);color:var(--ink)}
.kalkyl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(210px,.9fr);gap:16px;
  align-items:center;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  background:var(--soft);margin-top:20px}
.krad{display:flex;flex-direction:column;gap:6px}
.krad label{font-size:12.5px;color:var(--muted);font-weight:600}
.kfalt{display:flex;align-items:center;gap:8px}
.kalkyl input,.kalkyl select{border:1.5px solid var(--line);border-radius:9px;padding:11px 12px;
  font-size:15px;font-family:inherit;background:#fff;color:var(--ink);width:100%}
.kalkyl input:focus,.kalkyl select:focus{outline:none;border-color:var(--ink)}
.kfalt span{color:var(--muted);font-size:14px}
.ksvar{display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:12px;padding:15px 17px}
.klbl{font-size:11px;color:#9aa6bb;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.ksvar b{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:2px}
@media(max-width:860px){.kalkyl{grid-template-columns:1fr 1fr}.ksvar{grid-column:1/-1}}
@media(max-width:700px){
  .lhero{min-height:230px;border-radius:16px}
  .lhero .lheroin{padding:26px 22px 22px}
  .lhero p{font-size:15px}
  .stadgrid{grid-template-columns:1fr 1fr;gap:11px}
  .stadin{padding:12px 13px}.stadin b{font-size:15.5px}.stadpris{font-size:13.5px}
}
@media(prefers-reduced-motion:reduce){.lvideo{display:none}}
/* Marknadslaget: farg pa nyckeltal och staplar, annars ar det bara tabeller. */
.mkpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:4px 0 30px}
.kpikort{border-radius:14px;padding:20px 20px 18px;color:#fff;position:relative;overflow:hidden}
.kpikort b{display:block;font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:-.03em}
.kpikort span{display:block;font-size:13px;opacity:.82;margin-top:3px}
.kpikort.a{background:linear-gradient(140deg,#16305c,#0B1220)}
.kpikort.b{background:linear-gradient(140deg,#0f7a3d,#0a4a26)}
.kpikort.c{background:linear-gradient(140deg,#7a4b12,#3d2609)}
.kpikort.d{background:linear-gradient(140deg,#3a3f52,#1c1f2b)}
.stapel{height:9px;background:var(--soft);border-radius:5px;overflow:hidden;min-width:120px}
.stapel i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#1f6fb2,#16a06a)}
.lokalk .bid{font-size:16px}
.lokalk .bud{font-size:11.5px;color:var(--muted);font-weight:600}
.tomsida{padding:76px 0 90px;text-align:center}
.tomsida h1{font-size:clamp(30px,4vw,44px)}
.tomsida p{color:var(--muted);margin-top:12px;font-size:16.5px}
.tomlank{margin-top:26px}
.tomlank a{color:var(--focus);font-weight:600}
.tomsparad{border:1px dashed var(--line);border-radius:12px;padding:44px 24px;text-align:center;color:var(--muted);margin-top:18px}
.tomsparad b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
@media(max-width:640px){.fbar{gap:6px}.fdrop>summary{padding:8px 12px;font-size:14px}.fspace{display:none}}
.guide{max-width:820px;padding:4px 0 20px}
.ghero{position:relative;border-radius:16px;overflow:hidden;margin:6px 0 26px;background:var(--soft);aspect-ratio:21/9;min-height:220px}
.ghero img{width:100%;height:100%;object-fit:cover;display:block}
.ghero .skugga{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,18,32,.15) 0%,rgba(11,18,32,.55) 55%,rgba(11,18,32,.86) 100%)}
.ghero .text{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:#fff}
.ghero .kick{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;opacity:.9;margin-bottom:7px;display:block}
.ghero h1{color:#fff;margin:0;font-size:33px;line-height:1.15;text-shadow:0 1px 14px rgba(0,0,0,.25)}
.ghero .fot{position:absolute;right:10px;top:9px;background:rgba(11,18,32,.55);color:#fff;font-size:11px;padding:3px 8px;border-radius:20px}
.guide h1{margin-bottom:10px}
.guide .ing{color:var(--ink2);font-size:18.5px;line-height:1.55;margin:0 0 20px}
.gmeta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.gmeta b{color:var(--ink);font-weight:600}
.gtoc{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:0 0 26px}
.gtoc .rub{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px}
.gtoc ol{margin:0;padding-left:19px;columns:2;column-gap:26px}
.gtoc li{margin:4px 0;font-size:14px}
.gtoc a{color:var(--ink2);text-decoration:none}
.gtoc a:hover{color:var(--focus);text-decoration:underline}
.svar{background:linear-gradient(180deg,#f4f8ff,#eef4ff);border:1px solid #d7e3fb;border-left:4px solid var(--focus);border-radius:12px;padding:16px 18px;margin:0 0 26px;font-size:17px;line-height:1.55;color:var(--ink)}
.svar strong{font-weight:700}
.guide h2{margin:36px 0 12px;font-size:22px;scroll-margin-top:90px}
.guide h3{margin:22px 0 6px;font-size:16.5px}
.guide p{margin:12px 0;color:var(--ink2);line-height:1.65}
.guide p.steg{background:var(--soft);border-radius:9px;padding:12px 15px;color:var(--ink);margin:8px 0}
.guide table{margin:16px 0}
.gtabell{overflow-x:auto;margin:16px 0}
.gtabell table{margin:0;min-width:100%}
.guide table.sold th{white-space:nowrap}
.faktaruta{border:1px solid var(--line);border-left:4px solid var(--gron,#16A34A);background:#fbfdfb;border-radius:10px;padding:14px 16px;margin:18px 0;color:var(--ink2)}
.faktaruta b{color:var(--ink)}
.varning{border-left-color:#DC2626;background:#fffbfb}
.gdiagram{margin:18px 0;border:1px solid var(--line);border-radius:12px;padding:14px 12px 8px;background:#fff}
.gdiagram .drub{font-size:13px;font-weight:600;color:var(--ink);margin:0 2px 10px}
.gdiagram svg{display:block;width:100%;height:auto}
.gcta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between;background:var(--navy,#0B1220);color:#fff;border-radius:14px;padding:20px 22px;margin:30px 0 8px}
.gcta .t{font-size:17px;font-weight:600;line-height:1.4;max-width:520px}
.gcta .t span{display:block;color:#aab6cc;font-size:13.5px;font-weight:400;margin-top:4px}
.gcta a{background:#fff;color:var(--navy,#0B1220);padding:11px 18px;border-radius:9px;font-weight:600;text-decoration:none;white-space:nowrap;font-size:14.5px}
.gcta a:hover{background:#e9eef7}
.glist{margin:12px 0 12px 20px;color:var(--ink2)}
.glist li{margin:6px 0;line-height:1.6}
.gcheck{list-style:none;margin:14px 0;padding:0}
.gcheck li{position:relative;padding-left:29px;margin:9px 0;color:var(--ink2);line-height:1.55}
.gcheck li::before{content:"";position:absolute;left:2px;top:3px;width:15px;height:15px;border:2px solid var(--gron,#16A34A);border-radius:4px}
.gcheck li::after{content:"";position:absolute;left:6px;top:6px;width:5px;height:9px;border:solid var(--gron,#16A34A);border-width:0 2px 2px 0;transform:rotate(42deg)}
.gkallor{margin-top:26px;font-size:13px;color:var(--muted)}
.gkallor a{color:var(--muted)}
.guide .uppd{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(max-width:640px){.ghero{aspect-ratio:3/2;min-height:0}.ghero h1{font-size:23px}.ghero .text{padding:16px 16px}.gtoc ol{columns:1}.gcta{padding:16px}.gcta a{width:100%;text-align:center}}

.filt form{display:flex;flex-direction:column;gap:4px;padding:0 10px 10px}
.filt label{font-size:12px;color:var(--muted);font-weight:600;margin-top:8px}
.filt input,.filt select{border:1.5px solid var(--line);border-radius:7px;padding:8px 10px;font-size:14px;color:var(--ink);background:#fff;width:100%}
.filt input:focus,.filt select:focus{outline:none;border-color:var(--ink)}
.filt button{margin-top:14px;background:var(--ink);color:#fff;border:0;border-radius:7px;padding:10px;font-weight:700;font-size:14.5px;cursor:pointer}
.filt .rensa{display:block;text-align:center;margin-top:8px;font-size:13px;color:var(--focus);font-weight:600}
.resbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 14px}
.rescount{color:var(--ink2);font-size:14.5px}
.exportlank{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border:1px solid var(--line);
  border-radius:10px;font-size:14px;font-weight:600;color:var(--ink);background:var(--soft);transition:.13s}
.exportlank span{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.exportlank:hover{border-color:var(--focus);color:var(--focus)}
.fakturaform label{display:block;margin:0 0 13px;font-size:13.5px;font-weight:600;color:var(--ink2)}
.fakturaform input{display:block;width:100%;margin-top:6px;padding:12px 13px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-weight:500;color:var(--ink);background:#fff;min-height:46px}
.fakturaform input:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.fakturaform button{width:100%;min-height:50px;margin-top:6px;border:0;border-radius:11px;background:var(--focus);
  color:#fff;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.faktuvarad{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.rescount b{color:var(--ink);font-weight:700}
/* Startsidan: fa ord, mycket luft. Sokrutan ar sidans enda uppmaning. */
.popsok{margin-top:22px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.popsok a{border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-size:13.5px;color:var(--ink2);font-weight:500;transition:.13s}
.popsok a:hover{border-color:var(--ink);color:var(--ink)}
/* Fortroende: riktiga Trustpilot-omdomen. Stjarnorna ar Trustpilots egen
   grona ruta med vit stjarna, sa formen kanns igen direkt. */
.tsect{margin:52px 0 14px}
.tinner{border:1px solid var(--line);border-radius:18px;background:var(--soft);padding:30px 34px}
.tphuvud{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.tphuvudtext{flex:1 1 320px;min-width:0}
.tpunder{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.5}
/* Trustpilot-lockupen. Loggan ska ta plats: den ar det enda pa sidan som en
   frammande besokare kanner igen och litar pa direkt. Hela lockupen ar en
   lank till profilen, sa den som vill kontrollera oss ar ett klick bort. */
.tplockup{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 26px;
  color:var(--ink);transition:box-shadow .15s,transform .15s}
.tplockup:hover{box-shadow:0 10px 30px rgba(11,18,32,.1);transform:translateY(-1px)}
.tplogga{display:block;height:30px;width:auto}
.tpbetygrad{display:flex;align-items:center;gap:9px}
.tpbetygrad b{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.02em}
.tpbetygrad>span{color:var(--muted);font-size:13.5px}
.tpantal{color:var(--muted);font-size:13px}
@media(max-width:700px){.tplockup{width:100%}}
.tphuvud h2{font-size:24px;letter-spacing:-.03em}
.tpmeta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  color:var(--muted);font-size:14px}
.tpmeta b{color:var(--ink)}
.tpstjarnor{display:inline-flex;gap:2px}
.tpstjarnor i{display:flex;align-items:center;justify-content:center;
  width:21px;height:21px;background:#00b67a;border-radius:2px}
/* Halv och tom stjarna. Bakgrunden bar betyget, stjarnan sjalv ar alltid vit,
   sa formen ar densamma och bara fyllnaden skiljer. */
.tpstjarnor i.halv{background:linear-gradient(90deg,#00b67a 50%,#dcdce6 50%)}
.tpstjarnor i.tom{background:#dcdce6}
.tpknapp{flex:none;border:1.5px solid var(--ink);border-radius:10px;padding:11px 17px;
  font:600 14.5px var(--sans);color:var(--ink);background:#fff;min-height:44px;
  display:inline-flex;align-items:center}
.tpknapp:hover{background:var(--ink);color:#fff}
.tprutnat{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.tpkort{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;
  margin:0;display:flex;flex-direction:column;gap:12px}
.tpkort blockquote{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);flex:1}
.tpkort figcaption{display:flex;align-items:center;gap:10px}
.tpinit{flex:none;width:34px;height:34px;border-radius:50%;background:var(--midbg);
  color:var(--ink2);font:700 15px var(--disp);display:flex;align-items:center;justify-content:center}
.tpnamn{font:600 14px var(--sans);line-height:1.3}
.tpnamn small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:1px}
/* Om oss: rubrik, nyckeltal och bolagstabell. */
/* Bildsattning pa Om oss. Motivet ar auktionshallen, inte ett kontor med folk
   i: sidan ska visa vad vi arbetar med, inte antyda en personalstyrka. */
/* Taket pa hojden ar viktigare an bildformatet: utan det tryckte bilden ner
   rubriken under vikningen, och da laeser man bilden fore budskapet. */
/* Hojd i stallet for bildformat. aspect-ratio TILLSAMMANS med max-height
   krympte bredden i stallet for att beskara, sa bilden slutade mitt pa sidan.
   Med fast hojd fyller den bredden och object-fit tar hand om beskarningen. */
.omhero{margin:8px 0 26px;border-radius:20px;overflow:hidden;background:var(--soft);
  width:100%;height:clamp(230px,31vw,430px)}
/* Beskarningspunkten ar inte kosmetik: med default (mitten) kapades skylten
   pa vaggen bade upptill och i hogerkant. */
.omhero img{object-position:center 42%}
.omhero img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:700px){.omhero{aspect-ratio:16/10;border-radius:16px}}
.omtopp{max-width:66ch;margin:6px 0 26px}
.omtopp h1{font-size:clamp(29px,4.6vw,40px);letter-spacing:-.035em;line-height:1.12}
.omtopp p{margin-top:14px;color:var(--ink2);font-size:17.5px;line-height:1.55}
.omtal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:10px}
.omtal>div{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:20px}
.omtal b{display:block;font-family:var(--disp);font-weight:700;font-size:27px;letter-spacing:-.03em}
.omtal span{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.4}
.omtabell{border-collapse:collapse;width:100%;max-width:560px;margin-top:8px;font-size:15px}
.omtabell th{text-align:left;font-weight:400;color:var(--muted);padding:11px 16px 11px 0;
  border-bottom:1px solid var(--line);width:34%}
.omtabell td{padding:11px 0;border-bottom:1px solid var(--line);font-weight:600}
.omtabell a{color:var(--focus)}
@media(max-width:760px){.omtal{grid-template-columns:repeat(2,1fr)}}

.tpfot{margin-top:18px;color:var(--muted);font-size:12.5px;line-height:1.55}
.tpfot a{color:var(--focus);font-weight:600}
@media(max-width:1000px){.tprutnat{grid-template-columns:repeat(2,1fr)}}

/* Pa telefon sveps korten i stallet for att staplas. Fyra kort under varandra
   ar fyra skarmhojder att rulla forbi; svep tar en. Scroll-snap i stallet for
   javascript: webblasaren gor traghet och studs battre an vi kan, och det
   fungerar aven utan skript.

   Korten far dra ut till kanterna med negativ marginal och egen padding, sa
   det syns att raden fortsatter utanfor skarmen. Slutar den precis vid kanten
   tror man att den ar slut. */
@media(max-width:600px){
  .tinner{padding:22px 18px}
  .tpknapp{width:100%;justify-content:center}
  .tprutnat{display:flex;grid-template-columns:none;gap:12px;
    margin:22px -18px 0;padding:2px 18px 14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tprutnat::-webkit-scrollbar{display:none}
  .tpkort{flex:0 0 82%;scroll-snap-align:start;min-width:0}
  /* Sista kortet ska kunna hamna langst till vanster, annars gar det inte
     att lasa fardigt utan att halla kvar fingret. */
  .tprutnat::after{content:"";flex:0 0 6px}
  .tpfot{margin-top:6px}
}
/* Centrerad variant: rubrik, en rad text och plattformskorten under. */
.tinner.mitten{flex-direction:column;justify-content:center;text-align:center;
  padding:40px 30px 36px;gap:0}
.tinner.mitten h2{font-size:23px;letter-spacing:-.025em}
.tinner.mitten p{color:var(--muted);font-size:15px;margin:9px auto 22px;max-width:52ch}
.tinner.mitten .tknappar{justify-content:center}
.tinner.mitten .tknapp{padding:15px 24px}
.tvad h2{font-size:20px;letter-spacing:-.02em}
.tvad p{color:var(--muted);font-size:14.5px;margin-top:5px;max-width:44ch}
.tknappar{display:flex;gap:12px;flex-wrap:wrap}
.tknapp{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 20px;transition:.15s}
.tknapp:hover{border-color:var(--ink);box-shadow:0 5px 18px rgba(11,18,32,.09);transform:translateY(-1px)}
.tknapp span{display:flex;flex-direction:column;line-height:1.3;font-size:12.5px;color:var(--muted)}
.tknapp b{font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink);font-family:var(--disp)}

/* Kallkarusell: logotyperna maste ha fast hojd, annars renderas de i
   naturlig storlek och tar over hela sidan. */
/* Statistikbandet. Mork platta sa den laeses som en sammanfattning och inte
   som en till kortrad. Rorelsen ar frivillig: utan javascript och for den som
   valt "minska rorelse" star slutvardena direkt. */
.statband{padding:52px 0 8px}
.statin{background:var(--ink);color:#fff;border-radius:22px;padding:38px 40px}
.stathuvud{max-width:70ch}
.stathuvud h2{color:#fff;font-size:26px;letter-spacing:-.03em;line-height:1.2}
.stathuvud p{margin-top:12px;color:#aab4c6;font-size:16px;line-height:1.6}
.stattal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:30px 0 34px}
.stattal-i{border-top:2px solid rgba(255,255,255,.16);padding-top:14px}
.stattal-i b{display:block;font-family:var(--disp);font-weight:700;font-size:36px;
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.stattal-i span{display:block;margin-top:8px;color:#9aa5b8;font-size:13.5px;line-height:1.45}
.statfordel h3{font-size:15px;color:#fff;font-weight:600;letter-spacing:-.01em;margin-bottom:14px}
.statstaplar{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.statstaplar li{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;
  align-items:center;gap:14px}
.statnamn{color:#c7cfdd;font-size:14px}
.statspar{background:rgba(255,255,255,.09);border-radius:6px;height:11px;overflow:hidden}
.statspar i{display:block;height:100%;width:var(--bredd);border-radius:6px;
  background:linear-gradient(90deg,#2f6fed,#4ade80)}
.statsiffra{color:#fff;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  min-width:56px;text-align:right}
/* Animationen slas pa forst nar javascript kopplat in den, sa den aldrig
   lamnar en tom stapel eller en nolla efter sig om nagot fallerar. */
.statband.rullar .statspar i{width:0;transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.statband.rullar.igang .statspar i{width:var(--bredd)}
@media(prefers-reduced-motion:reduce){
  .statband.rullar .statspar i{width:var(--bredd);transition:none}}
@media(max-width:900px){.stattal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.statin{padding:26px 20px;border-radius:18px}
  .stattal-i b{font-size:29px}
  .statstaplar li{grid-template-columns:1fr auto;gap:4px 12px}
  .statspar{grid-column:1/-1;order:3}}

.kallsekt{padding:44px 0;border-top:1px solid var(--line);overflow:hidden}
.kallhuvud{text-align:center;max-width:620px;margin:0 auto 28px}
.kallhuvud h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em}
.kallhuvud p{color:var(--ink2);margin-top:9px;font-size:15.5px}
.kallkarusell{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.kallspar{display:flex;width:max-content;animation:kallrull 42s linear infinite}
.kallkarusell:hover .kallspar{animation-play-state:paused}
.kallrad{display:flex;align-items:center;gap:14px;padding-right:14px}
.kalla{display:flex;align-items:center;justify-content:center;
  flex:none;width:168px;height:76px;padding:16px 20px;
  background:#fff;border:1px solid var(--line);border-radius:11px;transition:.15s}
.kalla:hover{border-color:var(--ink);box-shadow:0 4px 14px rgba(11,18,32,.08)}
/* SVG utan intrinsisk storlek kollapsar till 0 med height:auto.
   Explicit hojd tvingar fram renderingen. */
/* Logotyperna visas i sina riktiga farger. Gratonade loggor sag doda ut. */
.kalla img{height:36px;width:100%;max-width:130px;object-fit:contain;display:block}
.kallnamn{font-weight:700;font-size:15px;color:var(--ink2);text-align:center;line-height:1.2}
.kallnamn.pa{color:#fff;font-size:23px;font-weight:800;letter-spacing:.01em}
.kallnot{text-align:center;color:var(--muted);font-size:13.5px;margin-top:24px}
@keyframes kallrull{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.kallspar{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
@media(max-width:600px){.kalla{width:132px;height:64px;padding:12px 14px}.kalla img{height:26px;max-width:100px}}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 22px}
.chip{border:1.5px solid var(--line);border-radius:20px;padding:7px 15px;font-size:14px;color:var(--ink2);font-weight:500}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600}
/* Markesraden: kategorins storsta marken som snabbfilter. Rullar i sidled pa
   mobil i stallet for att brytas till en hog. 44 px hog for tryckytekravet. */
.markesrad{display:flex;gap:8px;overflow-x:auto;margin:-8px 0 18px;padding:2px 0;scrollbar-width:none}
.markesrad::-webkit-scrollbar{display:none}
.mchip{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 14px;
  border:1.5px solid var(--line);border-radius:22px;font-size:13.5px;font-weight:600;color:var(--ink2);background:var(--bg)}
.mchip span{color:var(--muted);font-weight:500;font-size:12px}
.mchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.mchip.on span{color:#c7cfdb}
/* Tryckrespons: allt chip-format ger efter en aning under fingret. */
.chip,.mchip,.trendkort,.plgratis,.stodkort{transition:transform .13s ease,border-color .14s,box-shadow .14s,background .14s,color .14s}
.chip:active,.mchip:active,.trendkort:active,.plgratis:active,.stodkort:active{transform:scale(.965)}
@media(prefers-reduced-motion:reduce){.chip:active,.mchip:active,.trendkort:active,.plgratis:active,.stodkort:active{transform:none}}
.katkanda{padding:4px 0 22px}
/* Kontodashboarden: planruta och bevakningsrader. */
.plandash{display:flex;flex-direction:column;gap:3px;border:1.5px solid var(--line);border-radius:13px;
  padding:16px 18px;max-width:460px;background:#fff}
.plandash b{font-family:var(--disp);font-size:17px}
.plandash span{color:var(--muted);font-size:13.5px}
.plandash a{margin-top:8px;color:var(--focus);font-weight:600;font-size:14.5px}
.bevlista{display:flex;flex-direction:column;gap:9px}
.bevrad{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--line);
  border-radius:11px;padding:12px 15px;background:#fff}
.bevrad>a{font-weight:700;color:var(--ink)}
.bevrad>span{color:var(--muted);font-size:13.5px;flex:1}
.bevrad button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:10px;
  padding:0 14px;min-height:44px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.bevrad button:hover{border-color:#b42318;color:#b42318}
/* Kontosidan. Ett morkt toppkort med plan och fyra siffror, sedan tva
   spalter: bevakningarna till vanster, hur Fyndad funkar med telefonramen
   till hoger. Sparade objekt som riktiga kort under. */
.kdash{background:linear-gradient(135deg,#0B1220 0%,#152447 100%);color:#fff;border-radius:22px;
  padding:28px 28px 22px;margin:4px 0 22px;position:relative;overflow:hidden;
  animation:kupp .5s cubic-bezier(.2,.7,.3,1) backwards}
.kdash::after{content:"";position:absolute;right:-80px;top:-120px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,86,219,.45),transparent 65%);pointer-events:none}
.kdashtop{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;flex-wrap:wrap;position:relative}
.kdashvem h1{color:#fff;margin:8px 0 6px;font-size:34px;letter-spacing:-.03em}
.kdashvem p{color:rgba(255,255,255,.72);font-size:14.5px;margin:0;max-width:52ch}
.kplan{display:inline-block;font:700 11.5px var(--sans);letter-spacing:.07em;text-transform:uppercase;
  padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff}
.kdash-plus .kplan{background:#1a56db}
.kdash-pro .kplan{background:var(--gold);color:#0B1220}
.kdashcta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.kdashcta span{color:rgba(255,255,255,.66);font-size:12.5px;max-width:30ch}
.kdashcta .plgratis{padding:13px 22px;border-radius:12px}
.kdashljus{background:#fff!important;color:#0B1220!important;border:0!important}
.ktal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px;position:relative}
.ktal div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:13px 14px;
  animation:kupp .5s cubic-bezier(.2,.7,.3,1) backwards}
.ktal div:nth-child(2){animation-delay:.07s}.ktal div:nth-child(3){animation-delay:.14s}.ktal div:nth-child(4){animation-delay:.21s}
.ktal b{display:block;font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ktal span{display:block;margin-top:5px;font-size:12.5px;color:rgba(255,255,255,.66)}
@keyframes kupp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.kdash,.ktal div{animation:none}}
.kgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
.kgrid .sect{margin:0;padding:22px;border:1.5px solid var(--line);border-radius:18px;max-width:none}
.knybev{display:flex;gap:8px;margin:14px 0 16px}
.knybev input[type=text]:not(.honung){flex:1;min-width:0;min-height:46px;border:1.5px solid var(--line);border-radius:11px;padding:0 14px;font:15px var(--sans);color:var(--ink)}
.knybev input:focus{outline:none;border-color:var(--ink)}
.knybev button{border:0;border-radius:11px;background:var(--ink);color:#fff;font:600 15px var(--sans);padding:0 20px;min-height:46px;cursor:pointer}
.kbevlista{display:flex;flex-direction:column;gap:10px}
.kbevkort{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  transition:transform .15s,box-shadow .15s}
.kbevkort:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(11,18,32,.08)}
.kbevnamn{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);font-size:15.5px}
.kbevnamn svg{color:var(--focus);flex:none}
.kbevmeta{grid-column:1;display:flex;gap:6px;flex-wrap:wrap}
.kpill{font:600 11.5px var(--sans);padding:4px 9px;border-radius:99px;background:var(--midbg);color:var(--ink2)}
.kpill.sms{background:#e7eeff;color:var(--focus)}
.kpill.tyst{background:transparent;border:1px solid var(--line);color:var(--muted)}
.kbevkort form{grid-column:2;grid-row:1/3}
.kbevkort button{border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:10px;padding:8px 12px;font:600 13px var(--sans);cursor:pointer;min-height:40px}
.kbevkort button:hover{border-color:#b42318;color:#b42318}
.kbevtom p{color:var(--muted);font-size:14.5px;margin:0 0 12px;line-height:1.5}
.kbevnot{color:var(--muted);font-size:12.5px;margin-top:14px;line-height:1.45}
.kfunkin{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:center;margin-top:14px}
.ksteg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:steg}
.ksteg li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;counter-increment:steg}
.ksteg li::before{content:counter(steg);width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;
  font:700 13px var(--disp);display:flex;align-items:center;justify-content:center}
.ksteg b{display:block;font-size:14.5px}
.ksteg span{display:block;color:var(--muted);font-size:13px;line-height:1.45;margin-top:2px}
.kfunktel .ifon{width:260px;max-width:100%}
.ksparhuvud{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ksparhuvud a{color:var(--focus);font-weight:600;font-size:14px}
.ksparade{margin-top:22px}
.kspargratis{display:inline-flex;padding:12px 18px;border-radius:11px}
@media(max-width:900px){
  .kgrid{grid-template-columns:1fr}
  .kfunkin{grid-template-columns:1fr}
  .kfunktel{margin-top:6px}
}
@media(max-width:640px){
  .kdash{padding:22px 18px 18px;border-radius:18px}
  .kdashvem h1{font-size:28px}
  .kdashcta{align-items:stretch;text-align:left;width:100%}
  .kdashcta .plgratis{width:100%}
  .ktal{grid-template-columns:1fr 1fr}
  .kgrid .sect{padding:18px 16px}
  .knybev{flex-direction:column}
}
/* Mork footer, Klaraviks monster: nyhetsbrev overst, sedan varumarket och
   lankkolumner med en kort linje under varje rubrik, kategorierna och en
   bottenrad. Allt pa den morka varumarkesfargen. */
footer{background:var(--ink);color:#b9c4d6;margin-top:64px;padding-bottom:26px;font-size:14px}
.fnyhet{border-bottom:1px solid rgba(255,255,255,.09)}
.fnyhet .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px 34px;
  padding-top:30px;padding-bottom:30px;flex-wrap:wrap}
.fnyhet h2{color:#fff;font-size:20px;letter-spacing:-.02em}
.fnyhet p{color:#9fb0cc;font-size:14px;margin-top:4px;max-width:52ch}
.fnyform{display:flex;flex:0 1 440px;min-width:270px}
.fnyform input{flex:1;min-width:0;border:0;border-radius:10px 0 0 10px;padding:13px 15px;
  font-size:15px;font-family:inherit;color:var(--ink);background:#fff}
.fnyform input:focus{outline:2px solid var(--focus);outline-offset:-2px}
.fnyform button{flex:none;border:0;border-radius:0 10px 10px 0;background:var(--focus);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;padding:0 20px;cursor:pointer;transition:filter .13s}
.fnyform button:hover{filter:brightness(1.12)}
/* Pa smal skarm staplas falt och knapp: ihopklamda klipptes knapptexten.
   Ligger EFTER basreglerna, annars vinner de vid samma specificitet. */
@media(max-width:480px){
  .fnyform{flex-wrap:wrap;gap:8px;flex-basis:100%}
  .fnyform input{flex:1 1 100%;border-radius:10px}
  .fnyform button{flex:1 1 100%;border-radius:10px;min-height:46px}
}
.fkredit{display:flex;justify-content:center;padding:14px 0 22px}.tuna-kredit{display:inline-flex;align-items:center;gap:8px;color:inherit;opacity:.6;text-decoration:none;font-size:12px;letter-spacing:.04em;text-transform:uppercase;transition:opacity .2s}.tuna-kredit:hover{opacity:1}.tuna-kredit img{height:16px;width:auto;display:block}.tuna-kredit b{font-size:14px;text-transform:none;letter-spacing:0}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:28px;padding:42px 0 6px}
.fsiffra{color:#9fb0cc;font-size:13px;line-height:1.5;margin-top:10px;max-width:34ch}
.fmejl{display:inline-block;margin-top:12px;color:#a9c7ff;font-weight:600;font-size:14.5px}
.fmejl:hover{color:#fff}
/* Kategorierna langst ner. Interna lankar ar det som far Google att hitta
   hela sajten, och de hor hemma dar de inte stjal uppmarksamhet. */
.fkat{margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09)}
.fkat strong{display:block;color:#8391ab;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fkatlankar{display:flex;flex-wrap:wrap;gap:8px 20px}
.fkatlankar a{color:#9fb0cc;font-size:14px}
.fkatlankar a:hover{color:#fff}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
.fgrid strong{display:block;color:#fff;font-size:14.5px;padding-bottom:10px;margin-bottom:12px;
  font-family:var(--disp);font-weight:600;letter-spacing:-.01em;position:relative}
.fgrid strong::after{content:'';position:absolute;left:0;bottom:0;width:44px;height:2px;
  background:rgba(255,255,255,.35);border-radius:2px}
.fgrid a{display:block;padding:4.5px 0;color:#b9c4d6}
.fgrid a:hover{color:#fff}
.fmarke .logo{display:flex;padding:0;color:#fff}
.fmarke .logo .word{font-size:23px}
.fmarke .logo .mark{width:42px;height:42px}
.fslogan{margin-top:10px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#8391ab}
/* Bottenluften ligger pa footern, inte pa .fbot: pa telefon mater flikradstestet
   .fbot-rektangelns underkant, och den ska sluta ovanfor flikraden. */
.fbot{border-top:1px solid rgba(255,255,255,.09);margin-top:26px;padding:18px 0 0;
  font-size:12.5px;color:#8391ab}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
.nyckel{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:0 0 20px}
.nyckel div{flex:1;min-width:112px;padding:11px 15px;border-right:1px solid var(--line)}
.nyckel div:last-child{border-right:0}
.nyckel span{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.nyckel b{font-size:15.5px;font-weight:700}
@media(max-width:600px){.nyckel div{min-width:50%;border-bottom:1px solid var(--line)}}
.obj{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:34px;align-items:start;padding-bottom:20px}
/* Sektionsnav som Klaraviks. Bara pa breda skarmar: under det ar det
   viktigare att objektet far plats an att man kan hoppa mellan rubriker. */
.obj.harnav{grid-template-columns:170px minmax(0,1.5fr) minmax(320px,1fr);gap:28px}
.sektnav{align-self:stretch}
.sektstick{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px}
.sektnav a{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  color:var(--muted);transition:.13s}
.sektnav a svg{flex:none;opacity:.6}
.sektnav a:hover{color:var(--ink);background:var(--soft)}
.sektnav a:hover svg{opacity:1}
.sektnav a.pa{color:var(--ink)}
.sektnav a.pa svg{opacity:1}
/* Sektionerna behover luft under den klibbiga headern nar man hoppar dit. */
.obj [id]{scroll-margin-top:100px}
@media(max-width:1240px){.obj.harnav{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr)}.sektnav{display:none}}
.gal{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gal .main{aspect-ratio:4/3;background:var(--soft)}
.gal .main img{width:100%;height:100%;object-fit:contain;display:block}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px;padding:9px;border-top:1px solid var(--line)}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:5px;border:1px solid var(--line);cursor:pointer}
aside .stick{position:sticky;top:60px}
/* Prisrutan foljer Klaraviks monster: avslutas-rad med stor nedrakning,
   ledande bud stort, reservationsprisets status, och de tre senaste buden
   direkt i rutan. Etiketterna ar sma versaler, siffrorna dominerar. */
.pricebox{border:1px solid var(--line);border-radius:12px;padding:20px}
.h2ikon{vertical-align:-4px;margin-right:9px;color:var(--muted)}
.card .bid.ingetbud{font-size:14px;color:var(--muted);font-weight:600}
.klipp.klippt{max-height:12em;overflow:hidden;position:relative}
.klipp.klippt:after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.visamer{margin-top:10px;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.visamer:hover{border-color:var(--ink)}
.cta{transition:transform .15s,box-shadow .15s}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.ctafarsk{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:9px}
.ctafarsk svg{flex:none;opacity:.6}
.nyckel div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.nyckel .nik{display:flex;grid-row:1/3;color:var(--muted)}
.budfold summary{font-size:15px}
html.kortanim .sect,html.kortanim .pricebox,html.kortanim .gal{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
html.kortanim .sect.inne,html.kortanim .pricebox.inne,html.kortanim .gal.inne{opacity:1;transform:none}
@media(max-width:860px){.obj>div:first-child{display:contents}.obj .gal{order:-2;margin-bottom:6px}.obj aside{order:-1}.thumbs img:nth-child(n+9){display:none}.sect{padding:22px 0}}
.pricelbl{color:var(--muted);font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pricebig{font-size:31px;font-weight:800;letter-spacing:-.025em;margin-top:2px}
.avslutrad{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.avslutdatum{display:block;font-size:14.5px;font-weight:700;margin-top:3px}
.nedrakning{font-family:var(--disp);font-size:clamp(21px,1.9vw,25px);font-weight:700;
  letter-spacing:-.02em;color:var(--good);white-space:nowrap;font-variant-numeric:tabular-nums}
.nedrakning.snart{color:var(--bad)}
.budrad{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.resstatus{text-align:right;flex:none}
.resstatus b{display:block;font-size:14px;margin-top:4px}
.resstatus .uppnatt{color:var(--good)}
.resstatus .ejuppnatt{color:var(--warn)}
.minibud{margin-top:14px;padding-top:4px;border-top:1px solid var(--line)}
.minibud table{font-size:13.5px}
.minibud th{font-size:11px;padding-top:9px}
.minibud td{padding:8px 8px 8px 0}
.visaallabud{display:inline-block;margin-top:8px;color:var(--focus);font-weight:600;font-size:13.5px}
.visaallabud:hover{text-decoration:underline}
.metaline{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;border-top:1px solid var(--line);margin-top:10px}
.metaline span:first-child{color:var(--muted)}
.metaline span:last-child{font-weight:600;text-align:right}
.cta{display:block;text-align:center;background:var(--ink);color:#fff;font-weight:700;padding:14px;border-radius:8px;margin-top:16px;font-size:15.5px}
.ctanote{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px}.ctafarsk{font-size:12px;color:var(--mut);margin-top:4px;line-height:1.4}
.verdict{border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:16px}
.vhead{display:flex;align-items:center;gap:9px}
.vdot{width:9px;height:9px;border-radius:50%}
.vlabel{font-weight:800;font-size:17px;letter-spacing:-.01em}
.vnote{color:var(--ink2);font-size:13.5px;margin-top:6px}
.bar{height:7px;border-radius:4px;background:linear-gradient(90deg,#d9ecdf,#f0f2f6,#fbe3e0);position:relative;margin:16px 0 6px}
.bar i{position:absolute;top:-4px;width:3px;height:15px;background:var(--ink);border-radius:2px}
.barlbl{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px}
.vstats{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:15px;font-size:13.5px}
.vstats div span{color:var(--muted);display:block;font-size:12px}
.vstats div b{font-weight:700}
.basis{color:var(--muted);font-size:12px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.sect{border-top:1px solid var(--line);padding:26px 0}
.fold{border:1px solid var(--line);border-radius:10px;margin-top:16px;overflow:hidden}
.fold summary{padding:15px 18px;font-weight:700;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"⌄";font-size:18px;color:var(--muted);transition:transform .15s}
.fold[open] summary::after{transform:rotate(180deg)}
.fold summary:hover{background:var(--soft)}
.fold > div{padding:0 18px 18px}
.sect h2{margin-bottom:12px}
.desc{white-space:pre-line;color:var(--ink2);font-size:15px;max-width:760px}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 26px;margin-top:6px}
.specs .r{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs .r span:first-child{color:var(--muted)}
.specs .r span:last-child{font-weight:600;text-align:right}
.note{background:var(--soft);border-left:3px solid var(--line);padding:12px 15px;border-radius:0 6px 6px 0;font-size:14px;color:var(--ink2);margin-top:10px;white-space:pre-line}
.note b{color:var(--ink);display:block;margin-bottom:3px;font-size:13px}
table.sold{width:100%;border-collapse:collapse;font-size:14.5px}
table.sold th{text-align:left;color:var(--muted);font-weight:600;font-size:12.5px;padding:0 8px 8px 0;text-transform:uppercase;letter-spacing:.03em}
table.sold td{padding:11px 8px 11px 0;border-top:1px solid var(--line)}
table.sold td:last-child,table.sold th:last-child{text-align:right;font-weight:700}
.docs a{display:inline-block;border:1px solid var(--line);border-radius:6px;padding:8px 13px;margin:0 8px 8px 0;font-size:14px;color:var(--focus);font-weight:600}
.thin{background:#fffbeb;border:1px solid #fde68a;color:#8a6100;padding:12px 14px;border-radius:8px;font-size:13.5px;margin-top:12px}
@media(max-width:860px){.obj,.obj.harnav{grid-template-columns:minmax(0,1fr)}aside .stick{position:static}
  /* Pa telefon lag prisrutan (avslutas, ledande bud, vardering) efter bade
     beskrivning, FAQ och liknande objekt, pa 3 400 av 6 500 px. Koparen letar
     efter priset forst, sa rutan gar fore bilderna i enkolumnslaget. */
  .obj aside{order:-1}}

/* ---------- Telefon ---------- */
@media(max-width:600px){
  /* Ett kort per rad ar rent sloseri pa en 375px-skarm. Tva ryms val. */
  .grid>*{flex:0 1 calc((100% - 10px)/2);min-width:0}
  .grid{gap:10px}
  .grid .t{font-size:14px;line-height:1.3}
  .grid .pris{font-size:16.5px}
  .cattiles>*{flex:0 1 calc((100% - 10px)/2);min-width:0}
  .cattiles{gap:10px}
  .tnamn{font-size:14.5px;left:12px;right:48px;bottom:11px}
  .tant{font-size:12px}
  .tikonbricka{width:32px;height:32px;border-radius:9px;left:10px;top:10px}
  .tikonbricka svg{width:18px;height:18px}
  .tpil{width:29px;height:29px;right:10px;bottom:10px}
  .mgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mgrid>*{min-width:0;max-width:100%}
  .stadgrid>*,.stadgrid.liten>*{flex:0 1 calc((100% - 10px)/2);min-width:0}
  .grid.fyra>*{flex:0 1 calc((100% - 10px)/2);min-width:0}

  /* Headern ska inte ata halva skarmen. */
  .topbar{height:auto;min-height:60px;gap:10px;padding:10px 20px;flex-wrap:wrap}
  .searchbox{order:3;flex:1 1 auto;width:100%;min-width:0}
  /* Klaraviks ordning: loggan forst, knapparna till hoger, burgaren ytterst.
     nav.main har margin-left:auto fran en tidigare brytpunkt; utan nollningen
     har delas hogersidan i tva oar med ett gap i mitten. */
  .logo{order:-1;margin-right:auto}
  .topkonto{order:1}
  nav.main{order:1;margin-left:0}
  .meny{order:2}
  .meny>summary{margin-left:0}
  /* Hjalpraden ar borta pa telefon: inloggningen bor i headern, som Klaravik. */
  .hjalprad{display:none}
  .logo .mark{width:34px;height:34px}
  .logo .word{font-size:22px}
  .cats a{padding:12px 11px;font-size:13.5px;gap:6px}
  .cats a svg{width:18px;height:18px}
  .hjalprad .wrap{height:38px;font-size:12.5px;gap:14px}
  .hjlogga{height:38px;padding:0 13px}

  /* Nedrakningen och reservationspris-brickan la sig over varandra nar kortet
     bara ar halva skarmen brett. De staplas i stallet. */
  .respris{right:auto;left:8px;bottom:34px;font-size:10px;padding:3px 7px}
  .klocka{font-size:11px;padding:4px 8px}
  .fav{width:29px;height:29px}

  .fdrop>summary{padding:11px 16px;font-size:14.5px;gap:8px;border-radius:12px}
  .fpop{min-width:min(88vw,300px);max-height:66vh}
  .fspace{display:none}
  /* Antalet hor till filterraden hos Klaravik, inte till en egen rad under. */
  .resbar{margin:0 0 12px;justify-content:flex-end}
  .rescount{font-size:14px;color:var(--muted)}
  .chip{padding:6px 13px;font-size:13.5px}
  .faktiv{padding:10px 0 0;gap:6px}
  /* Snabbvalen ryms inte som egen rad ovanfor; de blir en rullbar remsa. */
  .filters{display:flex;flex-wrap:nowrap;gap:7px;overflow-x:auto;scrollbar-width:none;margin:12px 0 4px;padding-bottom:2px}
  .filters::-webkit-scrollbar{display:none}
  .filters .chip{flex:none;white-space:nowrap}

  /* Sektionsrubriker och brodtext. */
  h1{font-size:25px}
  h2{font-size:19px}
  .blockhead h2{font-size:19px}

  /* Objektsidan: pris och budknapp ska mota anvandaren direkt. Efter galleriet
     och sexton miniatyrer ar de tre skarmar ner. */
  .obj{gap:20px}
  /* Galleriet forst: sticky CTA gor att knappen anda alltid ar nabar. */
  .pricebig{font-size:30px}
  .nyckel div{min-width:50%}
  /* Knappen till kallans bilder tog hela bildens bredd och la sig over raknaren. */
  .allabilder{right:8px;bottom:8px;font-size:11.5px;padding:6px 10px;max-width:52%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bildraknare{top:auto;left:8px;bottom:8px;font-size:11.5px;padding:4px 9px}
  .thumbs{gap:5px}

  /* Foten: tva kolumner ar tratt pa 375px. */
  .fgrid{grid-template-columns:1fr;gap:22px}
  .fkat{margin-top:24px;padding-top:18px}
  .fkatlankar{gap:6px 16px}
  .fmarke{margin-bottom:4px}
}
@media(max-width:340px){
  .grid>*,.cattiles>*,.mgrid>*{flex:0 1 100%}
}

.card .mv.grov{color:var(--muted)}
.card .mv.grov::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-right:6px;vertical-align:2px;opacity:.6}

/* Sticky CTA pa objektsidan. Bara telefon: pa bred skarm star prisrutan kvar
   i sidokolumnen och ar synlig anda. Ligger ovanfor flikraden, aldrig pa den. */
.objcta{display:none}
@media(max-width:820px){
  .objcta{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;z-index:52;
    bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
    padding:10px 14px;background:var(--bg);border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(11,18,32,.10)}
  .objcta .fav{position:static;width:48px;height:48px;flex:none;border:1.5px solid var(--line);
    background:var(--bg);box-shadow:none;border-radius:12px}
  .objcta .fav.on{border-color:var(--ink)}
  .objcta-knapp{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
    height:48px;padding:0 14px;border-radius:12px;background:var(--ink);color:#fff;
    font-size:15px;font-weight:700;line-height:1.15;text-align:center}
  .objcta-knapp svg{flex:none}
  /* Prisrutans egen knapp blir en dubblett nar den sticky finns. */
  .obj .pricebox .cta,.obj .pricebox .ctanote{display:none}
  /* Innehallet maste fa plats over bada raderna. */
  body:has(.objcta){padding-bottom:calc(var(--tabh) + 68px + env(safe-area-inset-bottom))}
  /* Bara dold dar sticky-kopknappen ager botten, inte pa hela mobilen. */
  body:has(.objcta) .chattknapp{display:none}
}
/* Det grovre benamningsblocket ska inte se ut som en riktig vardering. */
.verdict.grov{border-style:dashed}
.verdict.grov .vlabel{color:var(--ink2)}

/* Filterarket. Specen vill ha ett drag-upp-ark i stallet for en trang
   sidopanel: alla filter pa ett stalle och en knapp som sager hur manga
   objekt valet ger. Byggt pa <details> sa det fungerar utan javascript. */
.fark{display:none}
.fark>summary{list-style:none}
.fark>summary::-webkit-details-marker{display:none}
@media(max-width:820px){
  /* Klaraviks filterrad pa telefon OCH surfplatta: lanet i full bredd, sedan
     Filtrera och sortering. Samma brytpunkt som flikraden, annars star
     surfplattan utan filterarket som testerna och specen kraver. */
  .fbar{gap:9px;padding:12px 0 12px;flex-wrap:wrap}
  .flan{display:block;flex:1 0 100%}
  .flan .fdrop>summary{width:100%;justify-content:space-between;padding:13px 16px;font-size:15px;
    border-radius:12px}
  .flan .fpop{width:100%;min-width:0}
  .fmobil{display:block;flex:0 0 auto}
  .fdesktop{display:none}
  .fark{display:block}
  .fark>summary{display:flex;align-items:center;gap:8px;cursor:pointer;
    border:1.5px solid var(--line);border-radius:12px;padding:11px 16px;
    font-size:14.5px;font-weight:600;color:var(--ink2);background:var(--bg);white-space:nowrap}
  .fark[data-aktiva]>summary{background:var(--ink);color:#fff;border-color:var(--ink)}
  .farkbak{position:fixed;inset:0;z-index:60;background:rgba(11,18,32,.45);
    animation:tona .16s ease-out}
  .farkin{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;
    flex-direction:column;background:var(--bg);border-radius:18px 18px 0 0;
    animation:arkupp .24s cubic-bezier(.2,.7,.3,1);overflow:hidden}
  @keyframes arkupp{from{transform:translateY(100%)}to{transform:none}}
  /* Draghandtaget signalerar att arket kom underifran. */
  .farkhuvud{position:relative;display:flex;align-items:center;justify-content:space-between;
    padding:20px 18px 12px;border-bottom:1px solid var(--line);flex:none}
  .farkhuvud::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:99px;background:var(--line)}
  .farkhuvud b{font-family:var(--disp);font-size:17px;font-weight:600}
  /* 46 och inte 44: rektangeln mats med decimaler och 44.0 rundas ibland ner. */
  .farkstang{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
    border-radius:50%;background:var(--soft);color:var(--ink);cursor:pointer;flex:none}
  .farkkropp{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 18px 18px}
  .farkkropp section{padding:14px 0;border-bottom:1px solid var(--line)}
  .farkkropp section:last-child{border-bottom:0}
  .farkkropp h4{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin-bottom:10px}
  .farkval{display:flex;flex-wrap:wrap;gap:8px}
  .farkval a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 15px;
    border:1.5px solid var(--line);border-radius:99px;font-size:14.5px;font-weight:600;
    color:var(--ink2);background:var(--bg)}
  .farkval a span{font-size:12px;color:var(--muted);font-weight:600}
  .farkval a.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .farkval a.on span{color:rgba(255,255,255,.7)}
  .farkkropp form{display:flex;flex-direction:column;gap:10px}
  .farkkropp .tva{display:flex;gap:10px}
  .farkkropp input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;
    padding:12px 13px;font-size:16px;font-family:inherit;color:var(--ink)}
  .farkkropp input:focus{outline:none;border-color:var(--ink)}
  .farkkropp form button{height:46px;border:0;border-radius:11px;background:var(--soft);
    color:var(--ink);font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer}
  .farkfot{flex:none;display:flex;gap:10px;align-items:center;padding:12px 18px;
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);background:var(--bg)}
  .farkrensa{flex:none;padding:0 16px;height:50px;display:flex;align-items:center;
    color:var(--ink2);font-weight:600;font-size:15px}
  .farkvisa{flex:1;height:50px;display:flex;align-items:center;justify-content:center;
    border-radius:12px;background:var(--ink);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
  /* Arket ersatter de gamla dropparna helt pa telefon. */
  .fdesktop{display:none}
  body:has(.fark[open]){overflow:hidden}
}

/* Prisfordelningen pa modellsidan. Staplarna ar divar och inte en bild, sa
   den fungerar utan javascript och gar att lasa med skarmlasare via title. */
.fordelning{display:flex;align-items:flex-end;gap:4px;height:132px;margin-top:16px;
  padding:0 2px;border-bottom:1px solid var(--line)}
.fstapel{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;cursor:default}
.fstapel>i{display:block;width:100%;height:var(--h);min-height:3px;
  background:var(--line);border-radius:4px 4px 0 0;transition:background .15s}
.fstapel:hover>i{background:var(--ink2)}
.fstapel.median>i{background:var(--good)}
.fordelningaxel{display:flex;justify-content:space-between;margin-top:8px;
  font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.fordelningaxel span:nth-child(2){color:var(--good);font-weight:700}
@media(max-width:600px){.fordelning{height:104px;gap:3px}.fordelningaxel{font-size:11.5px}}

/* Prishistoriken pa objektsidan. Varje prick ar ett verkligt slutpris, linjen
   ar kvartalsmedianen. Ritas som inline-SVG av samma skal som staplarna ovan:
   sajten ska fortsatta klara sig utan byggkedja och utan javascript. */
.phist{display:block;width:100%;height:auto;margin-top:16px}
.phistsmal{display:none}
@media(max-width:700px){.phistbred{display:none}.phistsmal{display:block}}
.phist .rutlinje{stroke:var(--line);stroke-width:1}
.phist .axtxt{fill:var(--muted);font-family:var(--sans);font-size:var(--faxel,12px)}
.phist .prick{fill:var(--ink2);opacity:.45}
.phist .prick:hover{opacity:1}
.phist .trend{fill:none;stroke:var(--good);stroke-width:2.6;
  stroke-linejoin:round;stroke-linecap:round}
.phist .tpunkt{fill:var(--good)}
.phist .nulinje{stroke:var(--focus);stroke-width:1.6;stroke-dasharray:5 4}
.phist .nutxt{fill:var(--focus);font-family:var(--sans);font-size:var(--faxel,12px);font-weight:600}
.phistsum{margin-top:14px;font-size:15.5px;line-height:1.5}
.phistsum b{font-weight:700}
.phistnot{color:var(--muted);font-size:13px;margin-top:9px}
.phistlegend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;
  font-size:13px;color:var(--muted)}
.phistlegend span{display:flex;align-items:center;gap:7px}
.phistlegend i{display:block;width:13px;height:13px;border-radius:50%;background:var(--ink2);opacity:.45}
.phistlegend i.linje{width:18px;height:3px;border-radius:2px;background:var(--good);opacity:1}
.phistlegend i.nu{width:18px;height:0;border-radius:0;opacity:1;
  border-top:2px dashed var(--focus)}
@media(max-width:600px){.phistsum{font-size:14.5px}}

/* Karusell pa startsidan. Pa telefon blir tre rader kort en vagg man maste
   scrolla forbi; en rullbar rad later en se att det finns mer at sidan och
   komma vidare till nasta sektion. Pa bred skarm ar det ett vanligt rutnat. */
@media(max-width:820px){
  /* display:flex kravs har: .grid ar numera display:grid pa telefon, och en
     karusell i grid-lage staplar korten i stallet for att rulla i sidled. */
  .grid.rull{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    justify-content:flex-start;padding-bottom:4px;
    /* Korten ska kunna borja i kant med sidan och anda ha luft i slutet. */
    margin-inline:-16px;padding-inline:16px;scroll-padding-left:16px}
  .grid.rull::-webkit-scrollbar{display:none}
  .grid.rull>*{flex:0 0 68vw;max-width:250px;scroll-snap-align:start}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
  .grid.rull{scroll-snap-type:none}
}

/* Bevakningar. Knappen sitter over traffraknaren, listan bor pa Sparade. */
.bevakrad{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 2px}
.bevaka{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;
  border:1.5px solid var(--line);border-radius:99px;background:var(--bg);color:var(--ink2);
  font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;transition:.14s}
.bevaka:hover{border-color:var(--ink);color:var(--ink)}
.bevaka.pa{background:var(--ink);color:#fff;border-color:var(--ink)}
.bevaka svg{flex:none;opacity:.75}
.bevaknot{color:var(--muted);font-size:13px;max-width:46ch}
.bevaknytt{flex:1 0 100%;background:var(--goodbg);color:var(--good);border-radius:10px;
  padding:11px 14px;font-size:14.5px;font-weight:600}
.bevgrid{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.bevkort{flex:1 1 260px;min-width:0;border:1px solid var(--line);border-radius:13px;
  padding:15px 17px;background:var(--bg);transition:.14s}
.bevkort:hover{border-color:var(--ink);box-shadow:0 5px 16px rgba(11,18,32,.07)}
.bevkort b{display:block;font-size:15.5px;margin-bottom:3px}
.bevkort span{color:var(--muted);font-size:13.5px}
.tomtext{color:var(--muted);max-width:56ch}
@media(max-width:600px){.bevaknot{display:none}.bevkort{flex:1 1 100%}}

/* Utskicksbevakningen. Tillsluten tar den en rad, oppen ar den ett riktigt
   formular. <details> for att den ska fungera helt utan javascript. */
.bevakut{flex:1 1 100%;margin-top:2px}
.bevakut>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  color:var(--focus);font-size:14px;font-weight:600;padding:6px 0;list-style:none}
.bevakut>summary::-webkit-details-marker{display:none}
.bevakut>summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.bevakut[open]>summary::before{transform:rotate(45deg)}
.bevakutform{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:6px}
.bevakutform label{display:flex;flex-direction:column;gap:5px;flex:1 1 190px;min-width:0;
  font-size:13px;color:var(--muted);font-weight:600}
/* min-height:44 ar inte pynt: under 44 px blir faltet svart att traffa med
   tummen, och testsviten faller pa det. */
.bevakutform input,.bevakutform select{width:100%;min-width:0;min-height:44px;
  border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;
  font:15px var(--sans);color:var(--ink);background:#fff}
.bevakutform input:focus,.bevakutform select:focus{outline:none;border-color:var(--ink)}
.bevakutform>button{flex:0 0 auto;border:0;border-radius:10px;background:var(--ink);color:#fff;
  font:600 15px var(--sans);padding:12px 20px;min-height:44px;cursor:pointer}
.bevakutform>button:hover{background:var(--ink2)}
.bevakutnot{flex:1 1 100%;color:var(--muted);font-size:12.5px;line-height:1.5;margin:0}
@media(max-width:600px){.bevakutform label,.bevakutform>button{flex:1 1 100%}}

/* Prisnivaerna. Det enda stallet pa sajten dar vi argumenterar for att nagon
   ska betala, sa den far kosta pa sig mer farg och tyngd an resten. */
.plhero{max-width:66ch;margin:6px 0 24px}
.plhero h1{font-size:clamp(30px,5vw,42px);letter-spacing:-.035em;line-height:1.1}
.plhero p{color:var(--ink2);font-size:17.5px;line-height:1.55;margin-top:14px}
.plbrad{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:var(--warnbg);color:var(--warn);border-radius:20px;
  padding:7px 14px;font:600 14px var(--sans)}
.plbrad::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}

/* Manad eller ar. Tva lankar och ingen javascript: valet syns i adressen och
   gar att dela, till skillnad fran en knapp som glommer sig vid omladdning. */
.plvaxel{display:inline-flex;gap:4px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin:4px 0 22px}
.plvaxel a{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 18px;border-radius:9px;font:600 14.5px var(--sans);color:var(--muted)}
.plvaxel a span{font-weight:600;font-size:11.5px;color:var(--good)}
.plvaxel a.pa{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(11,18,32,.1)}

/* Beskedet om att vi inte tar betalt an maste sta i klartext och synligt.
   Det lag en stund inne i en hopfalld FAQ, och ett forbehall man maste klicka
   fram ar inget forbehall. Testsviten vaktar meningen. */
.plarlig{max-width:74ch;margin:0 0 20px;padding:13px 16px;border-radius:12px;
  background:var(--soft);border:1px solid var(--line);
  color:var(--ink2);font-size:14px;line-height:1.55}
/* Tre pagaende fynd pa prissidan. Riktiga objekt ur var egen databas, inte
   stockbilder: en bild pa nagot som faktiskt gar att buda pa just nu bevisar
   produkten, en glad person vid en dator bevisar ingenting. */
.plexempel{margin:34px 0 8px}
.plexhuvud h2{font-size:24px;letter-spacing:-.03em}
.plexhuvud p{margin-top:9px;color:var(--muted);font-size:15px;line-height:1.55;max-width:68ch}
.plexrutnat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.plexkort{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s}
.plexkort:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,18,32,.1)}
.plexbild{position:relative;display:block;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.plexbild img{width:100%;height:100%;object-fit:cover;display:block}
.plexbild.utanbild{background:var(--midbg)}
.plexbadge{position:absolute;left:12px;top:12px;background:var(--good);color:#fff;
  font:700 12.5px var(--sans);padding:5px 11px;border-radius:20px}
.plexin{display:flex;flex-direction:column;gap:5px;padding:15px 16px 17px;flex:1}
.plexkalla{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.plextitel{font:600 15px var(--sans);line-height:1.4;color:var(--ink)}
.plexpris{margin-top:auto;padding-top:9px}
.plexpris b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em}
.plexpris span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.plexnot{margin-top:14px;color:var(--muted);font-size:12.5px}
@media(max-width:820px){
  .plexrutnat{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:20px -16px 0;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .plexrutnat::-webkit-scrollbar{display:none}
  .plexrutnat .plexkort{flex:0 0 84%;scroll-snap-align:center}
  .plexhuvud p{display:none}
}
.plrutnat{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 10px;align-items:stretch}
/* Pa mobil sveper man mellan nivakorten i stallet for att skrolla forbi tre
   staplade kort. Nasta kort skymtar i kanten sa svepet upptacker sig sjalvt,
   och rekommenderade Plus ligger forst. */
/* Pa mobil staplas korten med Plus forst. Karusellen gomde gratisnivan
   utanfor skarmen, och en prissida ska inte dolja ett av sina tre val. */
@media(max-width:820px){
  .plrutnat{flex-direction:column;gap:14px;margin:0 0 10px;padding:14px 0 0}
  .plrutnat .plkort{flex:0 0 auto}
  .plrutnat .pl-plus{order:-1}
}
.plhero{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;margin:6px 0 36px}
.plhero h1{font-size:40px;letter-spacing:-.035em;line-height:1.08;margin:0}
.plhero p{color:var(--muted);font-size:16px;line-height:1.55;margin-top:14px;max-width:52ch}
.ifonram{display:flex;justify-content:center}
.ifon{position:relative;width:min(300px,100%);aspect-ratio:9/19;border:10px solid #0B1220;border-radius:52px;background:#0B1220;
  overflow:hidden;box-shadow:0 30px 70px rgba(11,18,32,.28),inset 0 0 0 2px #2a3350;font-family:var(--sans);isolation:isolate}
.ifonoo{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:34%;height:24px;border-radius:99px;background:#0B1220;z-index:5}
.ifonstatus{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-between;padding:0 24px;font:600 12px var(--sans);color:#fff}
.ifonstatus.mork{color:#0B1220}
.ifonikoner{display:flex;gap:4px;align-items:center}
.ifonikoner i{display:block;width:14px;height:8px;border-radius:2px;background:currentColor;opacity:.9}
.ifonikoner i:first-child{width:10px}.ifonikoner i:last-child{width:20px;border-radius:3px}
.ifonlock{position:absolute;inset:0;background:linear-gradient(160deg,#1e44a8 0%,#0B1220 70%);color:#fff;padding:64px 16px 0;
  animation:ifonlock 12s ease-in-out infinite}
.ifondatum{text-align:center;font-size:13px;opacity:.85;text-transform:capitalize}
.ifontid{text-align:center;font:600 64px/1 var(--disp);letter-spacing:-.03em;margin-top:4px}
.ifonnotis{margin-top:34px;display:flex;gap:10px;background:rgba(255,255,255,.94);color:#0B1220;border-radius:18px;padding:11px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);animation:ifonnotis 12s cubic-bezier(.2,.7,.3,1) infinite}
.ifonnotisikon{flex:none;width:36px;height:36px;border-radius:10px;background:#0B1220;color:#fff;font:800 20px var(--disp);
  display:flex;align-items:center;justify-content:center}
.ifonnotistext{font-size:12px;line-height:1.35}
.ifonnotistext b{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:2px}
.ifonnotistext b span{font-weight:400;color:#6b7688;font-size:11px}
.ifonapp{position:absolute;inset:0;background:#fff;padding:54px 12px 0;animation:ifonapp 12s ease-in-out infinite}
.ifonsok{display:flex;align-items:center;gap:8px;background:var(--soft);border:1.5px solid var(--line);border-radius:12px;padding:9px 12px;font-size:13px;color:var(--ink)}
.ifonsok svg{width:15px;height:15px;color:var(--muted);flex:none}
.ifonkort{margin-top:12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(11,18,32,.08)}
.ifonbild{position:relative;aspect-ratio:4/3;background:var(--midbg)}
.ifonbild img{width:100%;height:100%;object-fit:cover;display:block}
.ifonbadge{position:absolute;left:10px;top:10px;background:var(--good);color:#fff;font:700 11.5px var(--sans);padding:4px 9px;border-radius:99px;
  animation:ifonbadge 12s ease infinite}
.ifonin{padding:11px 12px 12px}
.ifonkalla{font:700 10.5px var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.ifontitel{font:600 13.5px/1.3 var(--sans);margin-top:3px;color:var(--ink)}
.ifonpris{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.ifonpris span{display:block;font-size:10.5px;color:var(--muted)}
.ifonpris b{display:block;font:700 17px var(--disp);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.kfunktel .ifonpris b{font-size:14.5px}
.ifonpris b.ifonvarde{color:var(--good)}
.ifonklocka{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--warn);margin-top:9px}
.ifonklocka svg{width:13px;height:13px;flex:none}
.ifonknapp{margin-top:10px;background:#16a34a;color:#fff;text-align:center;font:600 13px var(--sans);padding:11px;border-radius:11px}
.ifonkvitto{position:absolute;left:12px;right:12px;bottom:18px;display:flex;align-items:center;gap:8px;background:#0B1220;color:#fff;
  border-radius:14px;padding:11px 13px;font:600 12.5px var(--sans);animation:ifonkvitto 12s ease infinite}
.ifonkvitto svg{color:#4ade80;width:18px;height:18px;flex:none}
@keyframes ifonlock{0%,38%{opacity:1}44%,95%{opacity:0}99%,100%{opacity:1}}
@keyframes ifonnotis{0%,6%{opacity:0;transform:translateY(-40px) scale(.96)}12%,100%{opacity:1;transform:none}}
.ifonnotis.andra{margin-top:8px;animation-name:ifonnotis2}
@keyframes ifonnotis2{0%,16%{opacity:0;transform:translateY(-30px) scale(.96)}22%,100%{opacity:1;transform:none}}
@keyframes ifonapp{0%,38%{opacity:0;transform:translateY(10px)}44%,92%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes ifonbadge{0%,50%{transform:scale(.6);opacity:0}56%{transform:scale(1.12);opacity:1}60%,100%{transform:none;opacity:1}}
@keyframes ifonkvitto{0%,68%{opacity:0;transform:translateY(20px)}74%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ifonlock{display:none}.ifonapp,.ifonbadge,.ifonkvitto,.ifonnotis{animation:none;opacity:1;transform:none}}
.plpro{border:1.5px solid #ecd9ae;border-radius:18px;padding:24px;background:#fffaf0}
.plproetikett{position:static;display:inline-block;margin-bottom:12px}
.plprorad{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.plprorad a{flex:1 1 220px}
@media(max-width:820px){.plhero{grid-template-columns:1fr;gap:22px}.plhero h1{font-size:30px}.ifonram{margin-top:6px}}
.plkort{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;
  border:1.5px solid var(--line);border-radius:18px;padding:24px;background:#fff;position:relative}
.plkort.vald{border-color:var(--ink);border-width:2px;box-shadow:0 12px 38px rgba(11,18,32,.11)}
.pletikett{position:absolute;top:-12px;left:24px;background:var(--ink);color:#fff;
  font:600 12px var(--sans);padding:5px 12px;border-radius:20px;letter-spacing:.01em}
.plikon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;background:var(--midbg);color:var(--ink2)}
.plikon svg{width:22px;height:22px}
.pl-plus .plikon{background:#e7eeff;color:var(--focus)}
.pl-pro .plikon{background:#fbf1de;color:var(--gold)}
.plkort h2{font-size:20px;letter-spacing:-.025em}
.plfor{color:var(--muted);font-size:14px;margin:6px 0 16px;min-height:2.8em}
.plpris{font-family:var(--disp);font-weight:700;font-size:38px;letter-spacing:-.035em;
  line-height:1;margin:0 0 18px}
.plpris span{display:block;margin-top:7px;font-family:var(--sans);font-weight:400;
  font-size:13.5px;color:var(--muted);letter-spacing:0;line-height:1.4}
.pllista{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.pllista li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;line-height:1.45}
.pllista li svg{flex:none;margin-top:1px;color:var(--good)}
.plform{display:flex;flex-direction:column;gap:8px}
.plform input{width:100%;min-width:0;min-height:44px;border:1.5px solid var(--line);
  border-radius:10px;padding:12px;font:15px var(--sans);color:var(--ink)}
.plform input:focus{outline:none;border-color:var(--ink)}
.plform button,.plgratis{border:0;border-radius:10px;background:var(--ink);color:#fff;
  font:600 15px var(--sans);padding:13px 16px;min-height:44px;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.plkort:not(.vald) .plform button,.plgratis{background:#fff;color:var(--ink);
  border:1.5px solid var(--ink)}
.plform button:hover{opacity:.88}
.plfin{color:var(--muted);font-size:12.5px;margin-top:9px;line-height:1.45;text-align:center}
.plbetal{color:var(--muted);font-size:11px;text-align:center;margin-top:5px;letter-spacing:.03em;opacity:.85}
.plmuskler{color:var(--muted);font-size:13.5px;margin:-6px 0 14px}
.plussticky{transition:transform .2s ease,opacity .2s ease}
.plussticky.undan{transform:translateY(120%);opacity:0;pointer-events:none}
/* Rubriken finns for sokmotorer och skarmlasare, inte for ogat. */
.plseo{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
/* Periodvalet i kortet: segmenterad vaxel dar den morka pillen glider
   mellan Manad och Ar, och priset korsglider under. */
.perval{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);
  border-radius:99px;padding:3px;margin:0 0 14px;background:var(--soft)}
.perval button{position:relative;z-index:1;border:0;background:none;min-height:44px;padding:6px 10px;
  border-radius:99px;font:600 13.5px var(--sans);color:var(--ink2);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;
  transition:color .22s ease}
.perval button em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--good)}
.perval button.pa{color:#fff}
.perval button.pa em{color:#a7e3b8}
.pervalglid{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:99px;
  background:var(--ink);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.perval[data-val="ar"] .pervalglid{transform:translateX(100%)}
@media(prefers-reduced-motion:reduce){.pervalglid{transition:none}}
.plprisanim{position:relative;display:grid}
.prisvy{grid-area:1/1;opacity:0;transform:translateY(9px) scale(.985);pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.3,1)}
.prisvy.pa{opacity:1;transform:none}
.prisvy b{display:block;color:var(--ink);font-family:var(--disp);font-weight:700;font-size:38px;letter-spacing:-.035em;line-height:1}
.prisvy>span{display:block;margin-top:7px;font:400 13.5px var(--sans);color:var(--muted);line-height:1.4;letter-spacing:0}
@media(prefers-reduced-motion:reduce){.prisvy{transition:none}}
/* Kopknappen direkt i heron: pa telefon ska vagen till kassan vara ett svep
   och ett tryck, inte en textvagg. */
.plherocta{display:inline-flex;margin-top:16px;padding:14px 28px;font-size:16px;border-radius:12px}
.plherofin{color:var(--muted);font-size:13px;margin-top:9px}
/* Kopknappen ar gron: pengar och klartecken, och den enda grona knappen pa
   sidan. Vit text pa #16a34a. Galler bade valda och ovalda kort. */
.plkop,.plkort .plkop,.plkort:not(.vald) .plkop{background:#16a34a;color:#fff;border:0;
  box-shadow:0 6px 18px rgba(22,163,74,.26);transition:transform .15s ease,box-shadow .15s ease,background .15s}
.plkop:hover{background:#15803d;transform:translateY(-1px);box-shadow:0 9px 24px rgba(22,163,74,.34)}
.pletikett.foretag{background:#fbf1de;color:#8a6425;border:1px solid #ecd9ae}
.plkort{transition:transform .18s ease,box-shadow .18s ease}
.plkort:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(11,18,32,.12)}
@media(prefers-reduced-motion:no-preference){
  .plkort{animation:plupp .45s cubic-bezier(.2,.7,.3,1) backwards}
  .plrutnat .plkort:nth-child(2){animation-delay:.08s}
  .plrutnat .plkort:nth-child(3){animation-delay:.16s}
}
@keyframes plupp{from{opacity:0;transform:translateY(14px)}}
/* Plus-kortet i trafflistan: ett per sida dar kopintresset ar som storst. */
.card.pluskort{background:linear-gradient(140deg,#0c2f1e,#14532d 55%,#166534);
  border-color:#14532d;color:#fff;justify-content:center}
.card.pluskort:hover{border-color:#166534}
.pluskortin{padding:20px 18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.pluskortin>svg{opacity:.75}
.pluskortin b{font-family:var(--disp);font-size:17.5px;letter-spacing:-.02em;line-height:1.25}
.pluskortin p{font-size:13.5px;line-height:1.5;color:#b9e6c8;margin:0}
.pluskortknapp{margin-top:5px;background:#22c55e;color:#07230f;font-weight:700;font-size:13.5px;
  padding:10px 16px;border-radius:99px;display:inline-flex;align-items:center;min-height:40px}

/* Rakneargumentet. Mork platta sa att den skiljer sig fran korten ovanfor och
   lases som en sammanfattning och inte som en fjarde niva. */
.plvarde{display:flex;flex-wrap:wrap;gap:28px;align-items:center;margin:34px 0 6px;
  background:var(--ink);color:#fff;border-radius:20px;padding:30px}
.plvardetext{flex:1 1 320px;min-width:0}
.plvarde h2{font-size:24px;letter-spacing:-.03em;color:#fff}
.plvarde p{margin-top:12px;font-size:16px;line-height:1.6;color:#dfe4ee}
.plvarde b{color:#fff}
.plvardenot{font-size:13px !important;color:#9aa5b8 !important;line-height:1.55 !important}
.plvardetal{flex:0 1 240px;display:flex;flex-direction:column;gap:14px}
.plvt{background:rgba(255,255,255,.08);border-radius:14px;padding:16px 18px}
.plvt span{display:block;font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:-.03em}
.plvt small{display:block;margin-top:4px;font-size:12.5px;color:#9aa5b8;line-height:1.4}
.plvt.liten span{font-size:22px;color:#9aa5b8}

/* Jamforelsetabellen. Rullar i sidled i sin egen ruta pa telefon, aldrig hela sidan. */
.pltabellrull{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
.pltabell{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.pltabell th,.pltabell td{padding:13px 14px;text-align:center;border-bottom:1px solid var(--line)}
.pltabell thead th{font:700 15px var(--disp);letter-spacing:-.02em;padding-bottom:14px}
.pltabell th[scope=row]{text-align:left;font-weight:400;color:var(--ink2);min-width:230px}
.pltabell .vald{background:var(--soft)}
.pltabell thead .vald{border-radius:10px 10px 0 0}
.pltabell .ja{color:var(--good);display:inline-flex}
.pltabell .nej{color:var(--line);display:inline-flex}
.pltabell .varde{font-weight:600;font-size:13.5px}
@media(max-width:820px){.plkort{flex:1 1 100%}.plvarde{padding:24px;gap:20px}
  .plvardetal{flex:1 1 100%;flex-direction:row}.plvt{flex:1}}

/* Sist i stilmallen: allt som maste vinna over tidigare mobilregler.
   Chattknappen och panelen ska ligga ovanfor flikraden, aldrig pa den, och
   hamburgaren behovs inte nar Meny-fliken oppnar samma panel. */
@media(max-width:820px){
  .topbar{gap:12px}
  .chattknapp{bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 12px)}
  .chattpanel{bottom:calc(var(--tabh) + env(safe-area-inset-bottom) + 8px);
    max-height:calc(100vh - var(--tabh) - 96px)}
}