@font-face{font-family:"Fredoka";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/fredoka-700.woff2") format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/fredoka-600.woff2") format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/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}
/* =====================================================================
   SNAPPAT designsystem — från snappat-mockup.html + SNAPPAT-DESIGN-HANDOFF.md
   (C:\snappatgrym, 2026-09-03). Familjen Grotesk för rubriker/priser, Inter för UI.
   Grönt = knapp, aktivt val eller verifierat. Rött/gult är signaler, aldrig dekor.
   Inga skuggor på kort i vila. Inga emoji som UI-ikoner.
   ===================================================================== */

:root{
  --skog:#0e7a4d;--skogmork:#0b5c3b;--skogdjup:#0a3b27;--skogljus:#e4f1ea;
  --black:#171d1a;--gra:#5f6864;--ljusgra:#626b66;--linje:#e6eae7;--dimma:#f1f3f2;--krita:#fff;
  --rod:#cc2c24;--bla:#1d4ed8;--blaljus:#e8efff;--varn:#b7791f;--varnljus:#fdf3e3;--varntext:#8a5a12;
  --disp:'Inter','Helvetica Neue',Arial,sans-serif;--ui:'Inter','Helvetica Neue',Arial,sans-serif;
  /* alias för äldre vyer (Mina sidor, chatt, kassa m.fl.) */
  --gron:var(--skog);--gronmork:var(--skogmork);--gronljus:var(--skogljus);
  --ink:var(--black);--bg:var(--dimma);--gul:var(--varntext);--foretag:#1a3a8f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--ui);font-size:15px;color:var(--black);background:var(--dimma);line-height:1.45;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
main{flex:1}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select,textarea{font-family:inherit}
h1,h2,h3{font-family:var(--disp);letter-spacing:-.01em}
/* Inter som rubriktypsnitt (Annas val 2026-09-03): något tätare spärrning i stora storlekar */
h1,h2,h3,.logga,.k-pris,.priskort .pris,.tile .n,.typ .n,.kpi .v,.stat .v{letter-spacing:-.03em}
body{font-feature-settings:'cv05','cv11'}
.num{font-variant-numeric:tabular-nums}
.wrap,.main-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;flex-shrink:0}
:focus-visible{outline:2px solid var(--bla);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--skog);color:#fff;padding:8px 16px;z-index:100;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ============ HUVUD ============ */
.huvud{background:var(--krita);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--linje)}
.huvud-rad{display:flex;align-items:center;gap:22px;height:64px}
.logga{font-family:'Fredoka',var(--disp);font-size:30px;font-weight:700;color:var(--skog);letter-spacing:0;line-height:1;white-space:nowrap}
.sokform{flex:1;display:flex;max-width:620px;position:relative;min-width:0}
.sokform input{flex:1;border:1.5px solid #cfd6d2;border-right:none;border-radius:6px 0 0 6px;padding:10px 14px 10px 40px;font-size:15px;font-family:inherit;min-width:0;background:var(--krita)}
.sokform input:focus{border-color:var(--skog);outline:none}
.sokform .lupp{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ljusgra);width:17px;height:17px;pointer-events:none}
.sokform button{background:var(--black);color:#fff;border:1.5px solid var(--black);border-radius:0 6px 6px 0;padding:0 20px;font-weight:600}
.sokform button:hover{background:#000}
.sokdrop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--krita);border:1px solid var(--linje);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:none;z-index:60;overflow:hidden}
.sokdrop.pa{display:block}
.sokdrop .rad{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;font-size:14px;color:var(--black)}
.sokdrop .rad:hover{background:var(--dimma)}
.sokdrop .rad .ik{width:30px;height:20px;color:var(--ljusgra);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sokdrop .rad .ik svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sokdrop .rad .t{flex:1;min-width:0}
.sokdrop .rad .t small{display:block;color:var(--gra);font-size:13.5px}
.sokdrop .rad .n{color:var(--ljusgra);font-size:13.5px}
.sokdrop .tolk{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--linje);background:#fafbfa}
.sokdrop .tolk span{background:var(--skogljus);color:var(--skog);font-weight:600;font-size:13.5px;padding:3px 9px;border-radius:99px}
.sokdrop .tolk .l{background:none;color:var(--gra);font-weight:400;padding-left:0}
.hlank{display:flex;gap:2px;align-items:center;font-size:13.5px;margin-left:auto}
.hval{display:flex;flex-direction:column;align-items:center;gap:3px;color:#3a423e;padding:6px 10px;border-radius:6px;line-height:1.2;position:relative;font-size:12.5px;background:none;border:none}
.hval:hover{background:var(--dimma)}
.hval svg{width:19px;height:19px}
.hval .not{position:absolute;top:1px;right:7px;background:var(--rod);color:#fff;font-size:12px;font-weight:700;border-radius:8px;padding:1px 5px}
.knapp-salj{background:var(--skog);color:#fff;font-weight:600;padding:10px 18px;border-radius:6px;margin-left:8px;white-space:nowrap;font-family:var(--disp);font-size:15px;border:none;display:inline-flex;align-items:center;gap:6px}
.knapp-salj:hover{background:var(--skogmork);color:#fff}
.knapp-salj svg{width:15px;height:15px}
/* huvudkategorier */
.katband{background:var(--krita)}
.katrad{display:flex;gap:2px;font-size:13.5px;overflow-x:auto;scrollbar-width:none}
.katrad::-webkit-scrollbar{display:none}
.katrad a{color:#3a423e;white-space:nowrap;padding:11px 12px;border-bottom:2.5px solid transparent;font-weight:500}
.katrad a:hover{color:var(--black)}
.katrad a[aria-current]{color:var(--skog);font-weight:700;border-bottom-color:var(--skog)}

/* ============ UNDERMENY: FORDONSTYPER ============ */
.under{background:var(--krita);border-top:1px solid var(--linje);border-bottom:1px solid var(--linje);position:sticky;top:64px;z-index:40}
.under .wrap{position:relative}
.typrad{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;gap:0}
.typrad::-webkit-scrollbar{display:none}
.typ{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:46px;color:#3a423e;white-space:nowrap;position:relative;scroll-snap-align:start;font-weight:500;font-size:13.5px;border-radius:6px 6px 0 0}
.typ:hover{background:var(--dimma)}
.typ .ill{width:34px;height:22px;color:var(--gra);flex-shrink:0}
.typ .ill svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.typ .n{font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--black)}
.typ[aria-current] .n,.typ[aria-current] .ill{color:var(--skog)}
.typ .sasong{width:6px;height:6px;border-radius:50%;background:var(--skog);position:absolute;top:8px;left:40px;box-shadow:0 0 0 2px var(--krita)}
.markor{position:absolute;bottom:-1px;height:3px;background:var(--skog);border-radius:3px 3px 0 0;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}
.under .fade{position:absolute;top:0;bottom:0;right:20px;width:56px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--krita) 70%);pointer-events:none;display:none}
.under.spill .fade{display:block}
.under .pilknapp{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--linje);background:var(--krita);display:none;align-items:center;justify-content:center;font-size:16px;color:var(--gra);z-index:2}
.under.spill .pilknapp{display:flex}
.under .pilknapp:hover{border-color:var(--skog);color:var(--skog)}

/* ============ LAYOUT, HERO, TILES ============ */
.smula{padding:14px 0 6px;font-size:13.5px;color:var(--ljusgra)}
.smula a{color:var(--gra)}
.smula a:hover{text-decoration:underline}
.hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:18px 0 22px;flex-wrap:wrap}
.hero h1{font-size:40px;font-weight:700;line-height:1.05;letter-spacing:-.025em}
.hero p{color:var(--gra);font-size:15px;margin-top:8px;max-width:52ch}
.hero.liten{padding:18px 0 16px;align-items:center}
.hero.liten p{margin:0;font-size:14.5px}
.hero .ort{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--linje);background:var(--krita);border-radius:99px;padding:8px 14px;font-weight:600;font-size:13.5px}
.start-hero{padding:26px 0 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.start-hero h1{font-size:40px;font-weight:700;line-height:1.05;letter-spacing:-.025em}
.start-hero p{color:var(--gra);font-size:15px;margin-top:8px}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:168px;gap:14px}
.tile{background:var(--krita);border:1px solid transparent;border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .15s}
.tile:hover{border-color:var(--skog)}
.tile:hover .ill{transform:translateX(4px);color:var(--skog)}
.tile.stor{grid-column:span 2;grid-row:span 2}
.tile.stor .ill{width:74%;bottom:22px;right:18px}
.tile.stor .n{font-size:30px}
.tile .n{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.1;letter-spacing:-.02em;padding-right:8px}
.tile .c{color:var(--gra);font-size:13px;margin-top:4px}
.tile .c b{color:var(--black);font-weight:600}
.tile .ill{position:absolute;right:10px;bottom:12px;width:56%;color:#8a948f;transition:transform .2s,color .2s;opacity:.9}
.tile .ill svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tile .nytt{display:none}
.tile.stor .nytt{display:block;margin-top:auto;font-size:13.5px;color:var(--gra);position:relative;z-index:1}
.tile.delar .ill{width:46%}
.kattiles{grid-auto-rows:150px}
.kattiles .tile .n{font-size:18px}
.kattiles .tile.stor .n{font-size:28px}
.kattiles .tile .ill{width:50%;bottom:12px}
.kattiles .tile.stor .ill{width:62%;bottom:20px}
.sektion{margin:34px 0 0}
.sektion-huvud{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sektion>.sektion-huvud h2{font-size:22px;font-weight:700}
.sektion .mer{color:var(--black);font-weight:600;font-size:13.5px;text-decoration:underline}
.senaste{margin:28px 0 48px}
.tryggrad{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;margin-bottom:48px;background:var(--skogdjup);border-radius:10px;overflow:hidden}
.tryggrad .trygg{color:#fff;padding:22px 24px;border-left:1px solid rgba(255,255,255,.12);display:block;margin:0;font-size:inherit;font-weight:400}
.tryggrad .trygg:first-child{border-left:none}
.tryggrad .trygg h3{font-size:18px;font-weight:600;margin-bottom:4px;color:#fff}
.tryggrad .trygg p{color:rgba(255,255,255,.72);font-size:13px;line-height:1.5}
.tryggrad .trygg .i{color:#8fd4b3;font-size:22px;margin-bottom:10px}
.tryggrad+.tryggmer{text-align:center;margin:-32px 0 48px}
.tryggmer a{color:var(--skog);font-weight:600;font-size:14px}
.gratisband{margin:38px 0 48px;background:var(--krita);border:1px solid var(--linje);border-radius:10px;padding:26px 28px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.gratisband h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.gratisband p{color:var(--gra);margin-top:4px;max-width:56ch}
.gratisband .k{margin-left:auto;background:var(--skog);color:#fff;border:none;border-radius:6px;padding:12px 20px;font-family:var(--disp);font-weight:600;font-size:16px;display:inline-block}
.gratisband .k:hover{background:var(--skogmork);color:#fff}
.tvakol{display:flex;gap:20px;align-items:flex-start;padding:6px 0 48px}
.innehall{flex:1;min-width:0}
.panel{background:var(--krita);border:1px solid var(--linje);border-radius:10px;padding:20px;margin-bottom:14px}
.panel h2,h2.avsnitt{font-size:17px;font-weight:600;margin-bottom:12px}
.form-ok{background:var(--skogljus);border:1px solid #cfe5da;color:var(--skogmork);border-radius:6px;padding:11px 15px;margin:12px 0;font-size:13.5px;font-weight:600}
.form-error{background:#fdeceb;border:1px solid #f3c2bf;color:var(--rod);border-radius:6px;padding:11px 15px;margin:12px 0;font-size:13.5px;font-weight:600}
.listhuvud{padding:14px 0 4px}
.listhuvud h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.listhuvud p{color:var(--gra);font-size:13.5px;margin-top:4px}

/* ============ FILTERPANEL ============ */
.filter{width:270px;flex-shrink:0;background:#fff;border:1px solid var(--linje);border-radius:10px;position:sticky;top:124px;max-height:calc(100vh - 144px);display:flex;flex-direction:column}
.filter.med-under{top:172px;max-height:calc(100vh - 192px)}
.f-topp{display:none}
.filter>form{display:flex;flex-direction:column;min-height:0;flex:1}
.filter-rulle{overflow-y:auto;flex:1;min-height:0}
.f-grupp{border-bottom:1px solid #eee;padding:13px 15px}
.f-grupp:last-child{border-bottom:none}
.f-grupp h3,.f-grupp h2.fr{font-family:var(--ui);font-size:13px;margin-bottom:9px;font-weight:700;display:flex;align-items:center}
.f-grupp h3 .valt,.f-grupp h2.fr .valt{margin-left:6px;background:var(--skog);color:#fff;font-size:12px;border-radius:8px;padding:1px 7px;font-weight:700}
.f-grupp label{display:flex;align-items:center;padding:4px 0;cursor:pointer;font-size:13.5px}
.f-grupp label .antal{margin-left:auto;color:var(--ljusgra);font-size:13.5px}
.f-grupp input[type=checkbox]{width:15px;height:15px;margin-right:8px;accent-color:var(--skog);flex-shrink:0}
.f-sok{width:100%;border:1px solid #ccc;border-radius:6px;padding:7px 10px;font-size:13px;font-family:inherit;margin-bottom:7px}
.f-sok:focus{outline:none;border-color:var(--skog)}
.visa-fler{font-size:13.5px;color:var(--skog);font-weight:600;cursor:pointer;padding-top:4px;display:inline-block;background:none;border:none}
.spann{display:flex;gap:7px}
.spann select,.f-grupp select,.f-input{flex:1;border:1px solid #ccc;padding:7px 6px;font-size:13px;border-radius:6px;font-family:inherit;background:#fff;min-width:0;width:100%}
.f-input{padding:7px 10px}
.f-input:focus,.spann select:focus{outline:none;border-color:var(--skog)}
.piller{display:flex;gap:6px;flex-wrap:wrap}
.piller button,.piller a,.piller label{border:1px solid #ccc;background:#fff;border-radius:99px;padding:6px 13px;font-size:13.5px;color:#444;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-weight:500}
.piller button[aria-pressed=true],.piller .pa,.piller label:has(input:checked){background:var(--skogljus);border-color:var(--skog);color:var(--skog);font-weight:700}
.piller label input{position:absolute;opacity:0;width:0;height:0;margin:0}
.f-grupp.stangd h3{margin-bottom:0}
.f-grupp h3 button.rubrik,.f-grupp h2.fr button.rubrik{all:unset;cursor:pointer;display:flex;align-items:center;width:100%;font:inherit}
.f-grupp.stangd .f-inne{display:none}
.f-grupp h3 .pil,.f-grupp h2.fr .pil{margin-left:auto;color:var(--ljusgra);font-weight:400;font-size:13.5px;transition:transform .15s}
.f-grupp:not(.stangd) h3 .pil{transform:rotate(180deg)}
.modellgrupp{margin-top:4px}
.modellgrupp .mg-rubrik{font-size:12.5px;color:var(--ljusgra);font-weight:600;margin:6px 0 2px}
.modellgrupp label{padding-left:8px}
.f-dold{display:none}
.f-grupp.alla .f-dold{display:flex}
.plats{display:flex;gap:7px;align-items:center}
.plats input{flex:1;border:1px solid #ccc;border-radius:6px;padding:7px 10px;font-size:13px;font-family:inherit;min-width:0}
.plats select{flex:0 0 106px}
.plats-tips{font-size:12.5px;color:var(--ljusgra);margin-top:6px}
/* ortväljaren — egen förslagslista i stället för webbläsarens datalist */
.ortval{position:relative;flex:1;min-width:0}
.ortval input{width:100%}
.ortlista{position:absolute;top:calc(100% + 4px);left:0;min-width:min(260px,calc(100vw - 40px));background:#fff;border:1px solid var(--linje);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:70;display:none;max-height:260px;overflow-y:auto}
.ortlista.pa{display:block}
.ortlista button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:9px 12px;border:none;background:none;font-size:13.5px;color:var(--black);cursor:pointer}
.ortlista button:hover,.ortlista button.aktiv{background:var(--dimma)}
.ortlista button small{color:var(--gra);white-space:nowrap}
.ortlista .tom{padding:9px 12px;font-size:13.5px;color:var(--ljusgra)}
.f-botten{border-top:1px solid var(--linje);padding:11px 13px;background:#fff;border-radius:0 0 10px 10px}
@media (min-width:901px){.f-botten.tom{display:none}}
.visa-knapp{display:none;width:100%;background:var(--skog);color:#fff;border:none;border-radius:6px;padding:12px;font-size:14.5px;font-weight:700}
.bevaka{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:#fff;border:1px solid var(--skog);color:var(--skog);border-radius:6px;padding:10px;font-size:13px;font-weight:600;cursor:pointer}
.bevaka:hover{background:var(--skogljus)}
.bevaka.pa{background:var(--skog);color:#fff}
.reduljus{color:var(--ljusgra);font-size:12.5px;text-align:center;margin-top:7px}
.flerfilter{display:none}
.flerfilter.pa{display:block}
.filter-head{display:none}

/* aktiva filter-chips */
.aktiva{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:0 2px 12px}
.fchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--skog);color:var(--skog);border-radius:99px;padding:5px 7px 5px 13px;font-size:13.5px;font-weight:600}
.fchip .x{width:18px;height:18px;border-radius:50%;background:var(--skogljus);border:none;color:var(--skog);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.fchip .x:hover{background:var(--skog);color:#fff}
.rensa-alla{font-size:13.5px;color:var(--gra);text-decoration:underline;margin-left:4px;background:none;border:none}

/* resultat-topp */
.res-topp{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:0 2px 12px}
.res-topp .antal{font-size:14px;color:var(--gra)}
.res-topp .antal b{color:var(--black);font-family:var(--disp);font-size:17px}
.res-topp .nya{font-size:13.5px;color:var(--skog);font-weight:600;margin-left:8px}
.sortera{margin-left:auto;font-size:13px;color:var(--gra);display:flex;align-items:center;gap:8px}
.sortera select{border:1px solid #ccc;padding:6px 9px;font-size:13px;font-family:inherit;background:#fff;border-radius:6px}
.vyval{display:inline-flex;border:1px solid #ccc;border-radius:6px;overflow:hidden}
.vyval button{border:none;background:#fff;padding:6px 11px;font-size:13.5px;color:#666;font-weight:500;display:inline-flex;align-items:center;gap:5px}
.vyval button[aria-pressed=true]{background:var(--skog);color:#fff}
.vyval svg{width:14px;height:14px}
.filterknapp{display:none;align-items:center;gap:6px;border:1px solid var(--skog);color:var(--skog);background:#fff;border-radius:6px;padding:8px 12px;font-weight:700;font-size:13px}
.filterknapp .valt{background:var(--skog);color:#fff;font-size:12px;border-radius:8px;padding:1px 6px}

/* ============ ANNONSKORT ============ */
.rutnat{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}
.kort{background:#fff;border:1px solid transparent;border-radius:10px;overflow:hidden;position:relative;display:flex;flex-direction:column;color:var(--black)}
.kort:hover{border-color:#b9c5be}
.kort:hover .k-titel a{text-decoration:underline}
.k-bild{position:relative;aspect-ratio:4/3;background:#e4e8e6;display:flex;align-items:center;justify-content:center;color:#a8b0ac;font-size:12.5px;overflow:hidden}
.k-bild img{width:100%;height:100%;object-fit:cover;display:block}
.k-bild .noimg{color:#a8b0ac;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.k-bild .bildantal{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;padding:2px 7px;border-radius:3px;display:flex;align-items:center;gap:4px}
.k-bild .nyflik{position:absolute;left:8px;top:8px;background:var(--skog);color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:3px}
.k-bild .sankt{position:absolute;left:8px;top:8px;background:var(--rod);color:#fff;font-size:12px;font-weight:700;padding:3px 7px;border-radius:3px}
.hjarta{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.95);border:none;font-size:15px;color:#888;box-shadow:0 1px 3px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;z-index:2}
.hjarta:hover{color:var(--skog)}
.hjarta[aria-pressed=true],.hjarta.pa{color:var(--skog);background:var(--skogljus)}
.hjarta .i{width:18px;height:18px;transform-origin:55% 60%}
.k-kropp{padding:10px 12px 12px;flex:1;display:flex;flex-direction:column}
.k-prisrad{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.k-pris{font-family:var(--disp);font-size:19px;font-weight:700;letter-spacing:-.02em}
.k-gammalt{font-size:13.5px;color:var(--ljusgra);text-decoration:line-through}
.k-titel{font-family:var(--ui);font-size:13.5px;margin:2px 0 6px;font-weight:600;line-height:1.35;letter-spacing:0}
.k-titel a::after{content:"";position:absolute;inset:0;z-index:1}
.spec-rad{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.spec-rad span{background:#f2f2f2;border-radius:3px;padding:2px 8px;font-size:12.5px;color:#444}
.k-meta{font-size:13.5px;color:var(--ljusgra)}
.k-meta .verif{color:var(--skog);font-weight:600}
.badges{display:none}
.badges span{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;color:var(--skog);background:var(--skogljus);padding:2px 6px;border-radius:3px}
.k-fot{display:flex;align-items:center;margin-top:auto;padding-top:8px;gap:8px;position:relative;z-index:2}
.k-bra{font-size:12.5px;color:var(--skog);font-weight:700;display:inline-flex;align-items:center;gap:4px;position:relative}
.k-bra .info{width:14px;height:14px;border-radius:50%;border:1px solid var(--skog);font-size:11.5px;display:inline-flex;align-items:center;justify-content:center;background:none;color:var(--skog);padding:0}
.k-bra .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:0;background:var(--black);color:#fff;font-weight:400;font-size:12.5px;padding:8px 10px;border-radius:6px;width:210px;line-height:1.4;z-index:5}
.k-bra:hover .tip,.k-bra:focus-within .tip,.k-bra.oppen .tip{display:block}
.k-tid{font-size:12.5px;color:var(--ljusgra);margin-left:auto}
.k-jamfor{font-size:12.5px;color:var(--gra);display:flex;align-items:center;gap:5px;cursor:pointer;opacity:0;transition:opacity .12s;margin-left:8px}
.kort:hover .k-jamfor,.kort.jamfor-vald .k-jamfor,.k-jamfor:focus-within{opacity:1}
@media (hover:none){.k-jamfor{opacity:1}}
.k-jamfor input{accent-color:var(--bla);width:14px;height:14px;margin:0}
.kort.jamfor-vald{border-color:var(--bla);box-shadow:0 0 0 2px var(--blaljus)}
.jamforlist{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--linje);box-shadow:0 -4px 14px rgba(0,0,0,.08);z-index:60;transform:translateY(100%);transition:transform .2s}
.jamforlist.pa{transform:none}
.jamforlist .wrap{display:flex;align-items:center;gap:12px;height:58px}
.jamforlist .valda{display:flex;gap:6px;flex:1;overflow-x:auto;font-size:13.5px;scrollbar-width:none}
.jamforlist .valda span{background:var(--blaljus);color:var(--bla);padding:5px 10px;border-radius:99px;white-space:nowrap;font-weight:600}
.jamforlist .valda .medd{background:var(--varnljus);color:var(--varntext)}
.jamforlist .knapp{background:var(--bla);color:#fff;border:none;border-radius:6px;padding:10px 16px;font-weight:700;white-space:nowrap}
.jamforlist .knapp.av{background:var(--dimma);color:var(--gra);border:1px solid var(--linje);pointer-events:none}
.jamforlist .stang{background:none;border:none;color:var(--gra);font-size:13px;text-decoration:underline}
.jamfor-svep{overflow-x:auto;margin-bottom:40px}
.jamfor{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linje);border-radius:10px;overflow:hidden;font-size:13.5px}
.jamfor th,.jamfor td{padding:10px 14px;border-bottom:1px solid #f0f2f1;vertical-align:top;text-align:left;min-width:170px}
.jamfor thead th{vertical-align:bottom;position:relative;padding-top:14px}
.jamfor tbody th{color:var(--gra);font-weight:500;font-family:var(--ui);width:150px;min-width:130px}
.jamfor .jbild{display:block;aspect-ratio:4/3;background:#e4e8e6;border-radius:6px;overflow:hidden;margin-bottom:8px}
.jamfor .jbild img{width:100%;height:100%;object-fit:cover;display:block}
.jamfor .jtitel{font-family:var(--disp);font-weight:600;font-size:15px;display:block;padding-right:24px;line-height:1.25}
.jamfor .jbort{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;border:1px solid var(--linje);background:#fff;font-size:12.5px}
@media (max-width:640px){.jamforlist{bottom:60px}}
/* listläge */
.rutnat.lista{grid-template-columns:1fr;gap:10px}
.rutnat.lista .kort{flex-direction:row}
.rutnat.lista .k-bild{width:220px;aspect-ratio:4/3;flex-shrink:0}
.rutnat.lista .k-kropp{padding:12px 16px}
.rutnat.lista .k-titel{font-size:15px}
.rutnat.lista .badges{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}
.rutnat.lista .k-beskr{display:block}
.k-beskr{display:none;font-size:13px;color:var(--gra);overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.5;margin-bottom:6px}
.rutnat.lista .k-beskr{display:-webkit-box}

/* paginering / tomt */
.pager{display:flex;justify-content:center;padding:26px 0 6px;font-size:13.5px}
.pager nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.pager a,.pager span[aria-current],.pager span[aria-disabled]{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--linje);background:#fff;padding:0 8px}
.pager span[aria-current]{background:var(--skog);border-color:var(--skog);color:#fff;font-weight:700}
.pager span[aria-disabled]{opacity:.45}
.pager a:hover{border-color:var(--skog)}
.pager svg{width:16px;height:16px}
.pager p{display:none}
.tomt{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:40px 24px;text-align:center}
.tomt h2{font-size:22px;margin-bottom:6px}
.tomt p{color:var(--gra);margin-bottom:16px}
.tomt .forslag{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tomt .forslag a{border:1px solid var(--skog);color:var(--skog);background:#fff;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600}
.tomt .forslag a:hover{background:var(--skogljus)}
.empty-state{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:28px;text-align:center;color:var(--gra)}
.empty-state p{margin-bottom:12px}

/* ============ ANNONSSIDA ============ */
.annons{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;padding:6px 0 40px}
.annons>*{min-width:0}
.galleri{background:var(--krita);border:1px solid var(--linje);border-radius:10px;overflow:hidden}
.galleri .stor{aspect-ratio:3/2;background:#e4e8e6;display:flex;align-items:center;justify-content:center;color:#a8b0ac;font-size:13px;position:relative}
.galleri .stor img{width:100%;height:100%;object-fit:contain;background:#151a17;display:block}
.galleri .stor .raknare{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.6);color:#fff;font-size:13.5px;padding:3px 9px;border-radius:4px}
.galleri .stor .nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);border:none;font-size:18px;box-shadow:0 1px 4px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
.galleri .stor .nav.v{left:12px}.galleri .stor .nav.h{right:12px}
.tumm{display:flex;gap:6px;padding:8px;overflow-x:auto;scrollbar-width:none}
.tumm img{flex:0 0 78px;height:58px;object-fit:cover;background:#e4e8e6;border-radius:4px;border:2px solid transparent;cursor:pointer}
.tumm img.active{border-color:var(--skog)}
.a-huvud{margin-top:18px}
.a-huvud h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.a-meta{color:var(--gra);font-size:13.5px;margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.specgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--krita);border:1px solid var(--linje);border-radius:10px;overflow:hidden;margin-top:18px}
.specgrid>div{background:var(--krita);padding:12px 14px;box-shadow:inset -1px -1px 0 var(--linje)}
.specgrid .l{font-size:12.5px;color:var(--ljusgra)}
.specgrid .v{font-family:var(--disp);font-weight:600;font-size:16px;margin-top:2px}
.kontroll{margin-top:18px;background:var(--krita);border:1px solid var(--linje);border-radius:10px;padding:16px 18px}
.kontroll h2{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.kontroll .kalla{margin-left:auto;font-family:var(--ui);font-weight:400;font-size:13.5px;color:var(--ljusgra)}
.kolls{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px}
.kolls div{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;padding:5px 0}
.kolls .i{color:var(--skog);margin-top:3px;flex-shrink:0}
.kolls .i.varn{color:var(--varn)}
.kolls small{display:block;color:var(--ljusgra);font-size:13.5px}
.kolls .i.info{color:var(--ljusgra)}
.kontroll .komplett{font-family:var(--ui);font-size:12.5px;font-weight:700;color:var(--skog);background:var(--skogljus);border:1px solid var(--skog);border-radius:99px;padding:2px 9px;margin-left:6px}
.kontroll .tyst{font-size:13.5px;color:var(--gra)}
.k-komplett{font-size:12.5px;font-weight:700;color:var(--skog);border:1px solid var(--skog);border-radius:99px;padding:1px 8px;line-height:1.5}
.k-fot{flex-wrap:wrap}.k-bra,.k-tid,.k-komplett{white-space:nowrap}
.f-hjalp{font-size:13.5px;color:var(--ljusgra);margin-top:6px;line-height:1.45}
.dfraga{padding:16px 0;border-top:1px solid var(--linje)}
.dfraga:first-child{border-top:none;padding-top:0}
.dfraga h3{font-family:var(--disp);font-size:15px;font-weight:600;margin-bottom:8px}
.dfraga .d-hj{font-size:13.5px;color:var(--gra);margin:-4px 0 10px}
.svarkort{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.svarkort label{border:1.5px solid var(--linje);background:#fff;border-radius:8px;padding:10px 12px;font-size:13.5px;color:var(--gra);line-height:1.4;cursor:pointer;position:relative}
.svarkort label b{display:block;font-family:var(--disp);font-size:14.5px;font-weight:600;color:var(--black)}
.svarkort label input{position:absolute;opacity:0;width:0;height:0}
.svarkort label:has(input:checked){border-color:var(--skog);background:var(--skogljus)}
.svarkort label:has(input:checked) b{color:var(--skog)}
.svarkort.kompakt{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.svarkort.kompakt label{text-align:center;padding:10px 6px}
.dfraga textarea,.dfraga input[type=text],.dfraga select{width:100%;margin-top:10px;border:1px solid var(--linje);border-radius:6px;padding:10px 12px;font:inherit;font-size:14px;background:#fff}
.dfraga textarea:focus,.dfraga input[type=text]:focus,.dfraga select:focus{outline:none;border-color:var(--skog)}
.besrad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.besrad select{margin-top:10px}
.a-sektion{margin-top:22px}
.a-sektion h2{font-size:17px;font-weight:600;margin-bottom:8px}
.a-sektion p,.beskrivning{max-width:70ch;line-height:1.6;color:#2b322f;white-space:pre-line;font-size:14.5px}
.regskylt-liten{display:inline-flex;align-items:stretch;border:2px solid var(--black);border-radius:6px;overflow:hidden;background:#fff;vertical-align:middle;line-height:1}
.regskylt-liten .eu{background:#1d4ed8;color:#fff;font-size:8px;font-weight:700;padding:0 5px;display:flex;align-items:flex-end;padding-bottom:3px}
.regskylt-liten span+span{font-family:var(--disp);font-weight:600;letter-spacing:.12em;padding:4px 9px;font-size:15px}
.a-sida{position:sticky;top:80px;display:flex;flex-direction:column;gap:12px}
.a-sida.med-under{top:128px}
.priskort{background:var(--krita);border:1px solid var(--linje);border-radius:10px;padding:18px}
.priskort .pris{font-family:var(--disp);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1}
.priskort .prisrad2{font-size:13.5px;color:var(--ljusgra);margin-top:6px}
.priskort .prisrad2 b{color:var(--varntext)}
.priskort .varde{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gra)}
.varde .stapel{flex:1;height:6px;border-radius:3px;background:#e3e8e5;position:relative;overflow:visible}
.varde .stapel .spann{position:absolute;top:0;bottom:0;background:var(--skog);border-radius:3px;opacity:.85}
.varde .stapel .pek{position:absolute;top:-4px;width:3px;height:14px;background:var(--black);border-radius:2px;transform:translateX(-50%)}
.priskort .vtext{font-size:13.5px;color:var(--skog);font-weight:600;margin-top:6px}
.priskort .vtext.ok{color:var(--gra)}
.priskort .vtext.hog{color:var(--varn)}
.cta{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cta>button,.cta>form>button,.ctarad button,.cta>a.knapp{border-radius:6px;padding:13px;font-family:var(--disp);font-size:16px;font-weight:600;border:1.5px solid var(--skog);text-align:center;display:block;width:100%;cursor:pointer}
.ctarad{display:flex;gap:8px}
.ctarad>*{flex:1;min-width:0}
.ctarad button,.ctarad .knapp{font-size:15px;padding:11px 8px;width:auto;flex:1;min-width:0}
.ctarad form{display:contents}
.cta .prim{background:var(--skog);color:#fff}
.cta .prim:hover{background:var(--skogmork);color:#fff}
.cta .sek{background:var(--krita);color:var(--skog)}
.cta .sek:hover{background:var(--skogljus)}
.cta .sek.pa{background:var(--skogljus)}
.tider{margin-top:12px;border-top:1px solid var(--linje);padding-top:12px}
.tider .r{font-size:13.5px;color:var(--gra);margin-bottom:8px;font-weight:600}
.tider .t{display:flex;gap:6px;flex-wrap:wrap}
.tider .t button,.tider .t span{border:1px solid var(--linje);background:var(--krita);border-radius:6px;padding:7px 10px;font-size:13.5px;line-height:1.25;text-align:left;font-family:var(--disp);font-weight:600}
.tider .t button:hover{border-color:var(--skog)}
.tider .t .pa{background:var(--skog);border-color:var(--skog);color:#fff}
.tider .t .upptagen{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.tider .hj{font-size:13.5px;color:var(--gra);margin-top:8px;line-height:1.5}
.bokatrad{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--gra)}
.bokatrad .i{color:var(--skog);font-size:18px;flex-shrink:0}
.bokatrad b{display:block;color:var(--black);font-family:var(--disp);font-size:15px;font-weight:600}
.bokatrad a,.bokatrad button{color:var(--skog);font-weight:600;text-decoration:underline;background:none;border:none;padding:0;font:inherit;cursor:pointer}
.saljare{background:var(--krita);border:1px solid var(--linje);border-radius:10px;padding:16px 18px;display:flex;gap:12px;align-items:center}
.saljare .av{width:46px;height:46px;border-radius:50%;background:var(--skogdjup);color:#fff;font-family:var(--disp);font-weight:600;font-size:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.saljare .namn{font-weight:600;font-size:15px}
.saljare .namn a:hover{text-decoration:underline}
.saljare .rad{font-size:13.5px;color:var(--gra);margin-top:2px}
.saljare .bankid,.saljare .verif{display:inline-flex;align-items:center;gap:4px;color:var(--skog);font-weight:600}
.saljare .lankar{margin-top:6px;font-size:13.5px}
.saljare .lankar a{color:var(--skog);font-weight:600}
.tryggliten{font-size:13.5px;color:var(--gra);line-height:1.55;padding:0 4px}
.tryggliten b{color:var(--black)}
.tryggliten a{color:var(--skog);font-weight:600}
.liknande{margin:8px 0 48px}
.maxinfo{font-size:13.5px;color:var(--gra);margin-top:12px;line-height:1.6;border-top:1px solid var(--linje);padding-top:11px}
.forslag-falt{display:flex;gap:7px;margin-top:8px}
.forslag-falt input{flex:1;min-width:0;border:1.5px solid #cfd6d2;padding:9px 12px;font-size:16px;font-weight:600;border-radius:6px;font-family:var(--disp)}
.forslag-falt input:focus{outline:none;border-color:var(--skog)}
.forslag-falt button{background:var(--skog);border:none;font-weight:600;font-size:14px;padding:0 16px;border-radius:6px;color:#fff;font-family:var(--disp)}
.forslag-falt button:hover{background:var(--skogmork)}
.hjalptext{font-size:13.5px;color:var(--gra);margin-top:6px}
.vacation-note{background:var(--varnljus);border:1px solid #efe2b8;color:var(--varntext);border-radius:6px;padding:9px 12px;font-size:13.5px;margin-bottom:10px}
.rapportera{font-size:13.5px;color:var(--ljusgra);margin-top:16px}
.rapportera a,.rapportera summary{color:var(--ljusgra);text-decoration:underline;cursor:pointer}
.mobilpris{display:none}

/* legacy-knappar som Mina sidor, kassa m.fl. använder */
.knapp-stor,.btn-primary{display:block;width:100%;background:var(--skog);color:#fff;border:none;font-weight:600;font-size:16px;padding:13px;border-radius:6px;text-align:center;font-family:var(--disp)}
.knapp-stor:hover,.btn-primary:hover{background:var(--skogmork);color:#fff}
.knapp-grans,.btn-secondary{display:block;width:100%;text-align:center;background:#fff;border:1px solid #cfd6d2;font-size:13.5px;font-weight:600;padding:10px;border-radius:6px;margin-top:8px;color:var(--black)}
.knapp-grans:hover,.btn-secondary:hover{border-color:var(--skog);color:var(--skog)}
.btn-danger:hover{border-color:var(--rod);color:var(--rod)}
.knapp-ghost{background:#fff;border:1px solid #cfd6d2;font-size:13.5px;font-weight:600;padding:12px 18px;border-radius:6px;color:#444;display:inline-block}
.knapp-ghost:hover{border-color:var(--skog);color:var(--skog)}
.slot{border:1px solid #cfd6d2;background:#fff;border-radius:99px;padding:7px 14px;font-size:13.5px;color:#444;font-weight:600}
.slot.pa{background:var(--skogljus);border-color:var(--skog);color:var(--skog);font-weight:700}
.slot.upptagen{opacity:.45;text-decoration:line-through;cursor:not-allowed}
.slotrad{display:flex;gap:7px;flex-wrap:wrap}
.slot-val{cursor:pointer}
.reg{display:inline-block;background:#fff;border:2px solid var(--black);border-radius:4px;padding:2px 10px;font-weight:600;letter-spacing:.12em;font-size:13px;font-family:var(--disp)}

/* statusbrickor */
.tagg,.mstatus,.ad-badge,.status-badge,.biz-tag,.biz-mini{display:inline-block;font-size:12px;font-weight:700;border-radius:3px;padding:2px 8px;letter-spacing:.02em;text-transform:uppercase}
.tagg.gron,.mstatus.aktiv,.status-badge.status-active{background:var(--skogljus);color:var(--skog)}
.tagg.gul,.mstatus.slutar,.status-badge.status-deactivated{background:var(--varnljus);color:var(--varntext)}
.tagg.rod{background:#fdeceb;color:var(--rod)}
.tagg.gra,.mstatus.sald,.status-badge.status-sold{background:#eee;color:#5f6864}
.ad-badge.free{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.68);color:#fff;text-transform:none;font-size:12.5px;z-index:2}
.biz-tag,.biz-mini{background:var(--foretag);color:#fff}
.verif{font-size:12.5px;color:var(--skog);font-weight:700}

/* prisguide (säljflödet + äldre vyer) */
.prisguide{background:#fafbfa;border:1px solid var(--linje);border-radius:8px;padding:13px 15px}
.pg-rubrik{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--gra);margin-bottom:24px;text-transform:uppercase}
.pg-stapel{position:relative;height:8px;background:#e3e8e5;border-radius:4px;margin:0 0 6px}
.pg-spann{position:absolute;top:0;bottom:0;background:var(--skog);opacity:.35;border-radius:4px}
.pg-pil{position:absolute;top:-22px;transform:translateX(-50%);background:var(--skog);color:#fff;font-size:12.5px;font-weight:700;border-radius:3px;padding:2px 8px;white-space:nowrap}
.pg-pil:after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--skog)}
.pg-et{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ljusgra)}
.pg-not{font-size:13.5px;color:var(--gra);margin-top:7px}

/* ============ MINA SIDOR ============ */
.mina-yta{display:flex;gap:18px;align-items:flex-start;padding-bottom:40px;padding-top:14px}
.mina-meny{width:220px;flex-shrink:0;background:#fff;border:1px solid var(--linje);border-radius:10px;overflow:hidden}
.mina-profil{padding:16px;border-bottom:1px solid var(--linje);display:flex;gap:11px;align-items:center}
.mina-profil .namn{font-weight:700;font-size:14.5px;font-family:var(--disp)}
.mina-profil .sedan{font-size:12.5px;color:var(--ljusgra)}
.mina-meny a{display:flex;align-items:center;padding:11px 16px;font-size:13.5px;color:#444;border-bottom:1px solid #f4f4f4}
.mina-meny a:hover{background:#f7f7f7}
.mina-meny a.vald{background:var(--skogljus);color:var(--skog);font-weight:700;box-shadow:inset 3px 0 0 var(--skog)}
.mina-meny a .n{margin-left:auto;color:var(--ljusgra);font-size:13.5px}
.mina-meny a .n.rod{background:var(--rod);color:#fff;border-radius:8px;padding:0 7px;font-size:12.5px;font-weight:700}
.profil-lank{display:block;text-align:center;font-size:13.5px;color:var(--skog);font-weight:600;padding:9px}
.mina-meny .logga-ut{display:block;width:100%;text-align:left;padding:11px 16px;font-size:13.5px;color:var(--gra);background:none;border:none;border-top:1px solid #f4f4f4;font-weight:500}
.mina-meny .logga-ut:hover{background:#fdeceb;color:var(--rod)}
.mina-inneh{flex:1;min-width:0}
.mina-inneh h1{font-size:26px;font-weight:700;margin-bottom:14px;letter-spacing:-.02em}
h2.mina-sekt{font-family:var(--ui);font-size:13px;font-weight:700;margin:18px 0 9px;color:var(--gra);letter-spacing:.03em;text-transform:uppercase}
.statrad{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.stat{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:12px 18px;min-width:125px}
.stat .e{font-size:12.5px;color:var(--ljusgra)}
.stat .v{font-size:26px;font-weight:700;font-family:var(--disp);letter-spacing:-.02em}
.stat .v.gron{color:var(--skog)}
.uppm{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--linje);border-left:4px solid var(--skog);border-radius:10px;padding:13px 16px;margin-bottom:8px;color:var(--black)}
.uppm:hover{border-color:#b9c5be;border-left-color:var(--skog)}
.uppm.rod{border-left-color:var(--rod)}
.uppm.rod:hover{border-left-color:var(--rod)}
.uppm.gul{border-left-color:var(--varn)}
.uppm.gul:hover{border-left-color:var(--varn)}
.uppm-text{flex:1;min-width:0}
.uppm-titel{font-weight:700;font-size:13.5px}
.uppm-under{font-size:13.5px;color:var(--gra);margin-top:1px;font-weight:400}
.uppm-gor{font-size:13px;color:var(--skog);font-weight:700;white-space:nowrap}
.aktflod{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:6px 16px}
.akt{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f2f2f2;font-size:13px;align-items:baseline}
.akt:last-child{border-bottom:none}
.akt .nar{margin-left:auto;color:var(--ljusgra);font-size:13.5px;white-space:nowrap}
.mrad{display:flex;gap:13px;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:12px;margin-bottom:9px;align-items:stretch}
.mrad-status{width:4px;border-radius:2px;flex-shrink:0}
.mrad-status.gron{background:var(--skog)}
.mrad-status.rod{background:var(--rod)}
.mrad-status.gul{background:var(--varn)}
.mrad-status.gra{background:#ccc}
.r-bild{width:150px;height:112px;background:#e4e8e6;display:flex;align-items:center;justify-content:center;color:#a8b0ac;font-size:12.5px;border-radius:6px;flex-shrink:0;overflow:hidden}
.r-bild img{width:100%;height:100%;object-fit:cover}
.mrad .r-bild{width:110px;height:82px}
.mrad-mitt{flex:1;min-width:0;align-self:center}
.mrad-titel{font-weight:700;font-size:14.5px}
.mrad-titel a:hover{text-decoration:underline}
.mrad-meta{font-size:13.5px;color:var(--ljusgra);margin-top:2px}
.mrad-hoger{text-align:right;flex-shrink:0;align-self:center}
.mrad-pris{font-size:17px;font-weight:700;font-family:var(--disp)}
.mknappar{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;flex-wrap:wrap}
.mknapp{border:1px solid #cfd6d2;background:#fff;border-radius:6px;padding:6px 12px;font-size:13.5px;color:#444;display:inline-block}
.mknapp:hover{border-color:var(--skog);color:var(--skog)}
.mknapp.primar{background:var(--skog);border-color:var(--skog);color:#fff;font-weight:700}
.mknapp.primar:hover{background:var(--skogmork);color:#fff}
.mknapp.fara:hover{border-color:var(--rod);color:var(--rod)}
.subpiller{display:flex;gap:7px;margin-bottom:13px;flex-wrap:wrap}
.subpiller button,.subpiller a{border:1px solid #cfd6d2;background:#fff;border-radius:99px;padding:7px 16px;font-size:13px;color:#444;font-weight:600}
.subpiller .pa{background:var(--skog);border-color:var(--skog);color:#fff}
.bevak-kort{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:14px 16px;margin-bottom:9px;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.bevak-kort.ny{border-color:var(--skog);background:#fbfefc}
.bevak-mitt{flex:1;min-width:180px}
.bevak-titel{font-weight:700;font-size:14px}
.bevak-meta{font-size:13.5px;color:var(--ljusgra);margin-top:2px}

/* inställningar & formulär */
.installning,.form-card{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:22px;max-width:560px}
.form-card h1{font-size:24px;font-weight:700;margin-bottom:14px;letter-spacing:-.02em}
.form-page{max-width:560px;margin:22px auto 50px;padding:0 16px}
.form-page-wide{max-width:660px}
.form-page-wide .form-card{max-width:none}
.frad,.form-group{margin-bottom:14px}
.frad label,.form-group label{display:block;font-weight:600;font-size:13px;margin-bottom:5px}
.frad input:not([type=checkbox]):not([type=radio]):not([type=file]),.frad select,.frad textarea,
.form-group input:not([type=checkbox]):not([type=radio]):not([type=file]),
.form-group select,.form-group textarea{width:100%;border:1.5px solid #cfd6d2;border-radius:6px;padding:10px 12px;font-size:14px;background:#fff;min-height:42px;color:var(--black)}
.frad input:focus,.frad select:focus,.frad textarea:focus,
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--skog)}
.frad textarea,.form-group textarea{min-height:0}
input[type=date]{font-family:inherit}
@media(max-width:640px){
  .frad input,.frad select,.frad textarea,.form-group input,.form-group select,.form-group textarea,
  .sokform input,.skrivrad textarea{font-size:16px}
}
.bilddrop{display:block;border:2px dashed #b9c5be;border-radius:10px;padding:24px;text-align:center;color:var(--gra);font-size:13.5px;background:#fafbfa;cursor:pointer}
.bilddrop:hover,.bilddrop.drar{border-color:var(--skog);color:var(--skog);background:var(--skogljus)}
.bilddrop b{display:block;font-size:16px;color:var(--black);margin-bottom:3px;font-family:var(--disp);font-weight:600}
.bilddrop input[type=file]{position:absolute;opacity:0;width:0;height:0}
.bildgrid{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.bildkort{position:relative;width:104px;height:78px;border:1px solid #ddd;border-radius:6px;overflow:hidden;background:#eee;cursor:grab}
.bildkort img{width:100%;height:100%;object-fit:cover;display:block}
.bildkort.laddar img{opacity:.45}
.bildkort.fel{outline:2px solid var(--rod)}
.huvudbild{position:absolute;top:4px;left:4px;background:var(--skog);color:#fff;font-size:11.5px;font-weight:700;border-radius:3px;padding:1px 6px;z-index:2}
.bildstatus{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.55);color:#fff;font-size:12px;text-align:center;padding:2px;z-index:2}
.bildstatus.felst{background:var(--rod)}
.bildverktyg{position:absolute;top:2px;right:2px;display:flex;gap:2px;opacity:0;transition:opacity .12s;z-index:3}
.bildkort:hover .bildverktyg{opacity:1}
.bildverktyg button{width:22px;height:22px;border-radius:4px;border:none;background:rgba(255,255,255,.95);font-size:13.5px;line-height:1;cursor:pointer;color:#333;padding:0}
.bildverktyg button:hover{background:var(--skog);color:#fff}
@media(pointer:coarse){.bildverktyg{opacity:1}}
.bildvantar{display:none;font-size:13.5px;color:var(--varntext);font-weight:700}
.bildvantar.pa{display:inline}
.frad .hjalp,.form-group .hjalp{font-size:13.5px;color:var(--ljusgra);margin-top:4px}
.tva,.form-row-2{display:flex;gap:12px}
.tva>div,.form-row-2>div{flex:1}
.radio-row,.bock{display:flex;align-items:center;font-weight:400;font-size:13.5px;padding:5px 0;cursor:pointer}
.radio-row input,.bock input{width:15px;height:15px;margin-right:9px;accent-color:var(--skog)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f2f2f2;font-size:13.5px}
.toggle-row:last-child{border-bottom:none}
.toggle-row input{width:16px;height:16px;accent-color:var(--skog)}

/* ============ SÄLJFLÖDET ============ */
.salj-yta{max-width:760px;margin:0 auto;padding-bottom:50px}
.salj-yta h1{font-size:36px;font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:28px 0 14px}
.salj-kort{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:24px 28px;margin-bottom:14px}
.salj-kort h2{font-size:19px;font-weight:600;margin-bottom:13px}
.salj-kort h2 .frivillig{font-family:var(--ui);font-weight:400;color:var(--ljusgra);font-size:13.5px}
.salj-botten{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.knapp-publicera{background:var(--skog);color:#fff;border:none;font-weight:600;font-size:17px;padding:13px 26px;border-radius:6px;font-family:var(--disp)}
.knapp-publicera:hover{background:var(--skogmork)}
.regnr-rad{display:flex;gap:8px}
.regnr-rad input{flex:0 1 190px;text-transform:uppercase;background:#fff;border:2px solid var(--black);border-radius:8px;color:var(--black);font-weight:600;letter-spacing:.12em;font-size:22px;text-align:center;padding:6px 10px;font-family:var(--disp)}
.regnr-rad input::placeholder{color:#b9c5be;font-weight:500}
.regnr-rad input:focus{outline:none;box-shadow:0 0 0 3px rgba(14,122,77,.15)}
.regnr-rad .knapp-ghost{white-space:nowrap;padding:10px 16px}
.regnr-status{font-size:13.5px;margin-top:6px}
.lank-knapp{background:none;border:none;color:var(--gra);font-size:13.5px;text-decoration:underline;padding:7px 0 0;cursor:pointer;display:block}
.lank-knapp:hover{color:var(--skog)}
.regnr-status.ok{color:var(--skogmork)}
.regnr-status.fel{color:var(--rod)}
.salj-info{font-size:13.5px;color:var(--ljusgra);margin-left:auto}
.photo-grid{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.photo-grid img,.photo-preview{width:86px;height:64px;object-fit:cover;border:1px solid #ddd;border-radius:4px}
.photo-cell{position:relative;display:block}
.photo-remove{display:block;font-size:12.5px;color:var(--gra);margin-top:3px}
.photo-remove input{accent-color:var(--skog);margin-right:4px}
.steg-rad{display:flex;align-items:center;margin:20px 0 20px}
.steg{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ljusgra)}
.steg .cirkel{width:26px;height:26px;border-radius:50%;border:2px solid #ccc;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:#999;background:#fff}
.steg.klar .cirkel{background:var(--skog);border-color:var(--skog);color:#fff}
.steg.nu{color:var(--black);font-weight:700}
.steg.nu .cirkel{border-color:var(--skog);color:var(--skog)}
.steg-linje{flex:1;height:2px;background:#ddd;margin:0 10px;min-width:24px}

/* ============ CHATT ============ */
.chatt-yta{display:flex;background:#fff;border:1px solid var(--linje);border-radius:10px;overflow:hidden;min-height:480px;margin-bottom:30px}
.konv-lista{width:100%;background:#fff;border:1px solid var(--linje);border-radius:10px;overflow:hidden;margin-bottom:30px}
.konv{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid #f0f0f0;position:relative;color:var(--black);align-items:center}
.konv:hover{background:#fafbfa}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--skogdjup);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex-shrink:0;text-transform:uppercase;font-family:var(--disp)}
.avatar-lg{width:64px;height:64px;font-size:24px}
.konv .avatar{width:40px;height:40px;font-size:15px}
.konv-mitt{flex:1;min-width:0}
.konv-namn{font-weight:700;font-size:13.5px}
.konv-annons{font-size:12.5px;color:var(--skog);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konv-sista{font-size:13.5px;color:var(--gra);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.konv-tid{font-size:12.5px;color:var(--ljusgra);flex-shrink:0}
.konv .olast{width:9px;height:9px;border-radius:50%;background:var(--skog);flex-shrink:0}
.trad-huvud{display:flex;gap:12px;align-items:center;padding:11px 16px;background:#fff;border-radius:10px 10px 0 0;border:1px solid var(--linje);border-bottom:none}
.trad-bild{width:52px;height:40px;background:#e4e8e6;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11.5px;color:#a8b0ac;overflow:hidden}
.trad-bild img{width:100%;height:100%;object-fit:cover}
.trad-titel{font-weight:700;font-size:13.5px}
.trad-pris{font-size:13.5px;color:var(--gra)}
.trad-huvud .visa{margin-left:auto;font-size:13.5px;color:var(--skog);font-weight:700;white-space:nowrap}
.medd-yta{background:#fafbfa;border:1px solid var(--linje);border-top:none;padding:18px 20px;max-height:56vh;overflow-y:auto}
.bubbla{max-width:72%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45;margin-bottom:8px;clear:both;word-wrap:break-word;white-space:pre-line}
.bubbla .btid{display:block;font-size:12px;opacity:.6;margin-top:3px}
.bubbla.dom{background:#fff;border:1px solid var(--linje);float:left;border-bottom-left-radius:4px}
.bubbla.jag{background:var(--skog);color:#fff;float:right;border-bottom-right-radius:4px}
.chat-empty{color:var(--ljusgra);text-align:center;padding:20px 0;clear:both}
.fkort{clear:both;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:12px 15px;margin:12px auto;max-width:86%;text-align:center}
.fkort.gron{border-color:var(--skog);background:var(--skogljus)}
.fkort-rubrik{font-family:var(--disp);font-size:15px;font-weight:600;margin-bottom:4px}
.fkort.gra .fkort-rubrik{color:var(--gra)}
.fkort-rad{font-size:13.5px;margin-bottom:3px}
.fkort-knappar{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap;justify-content:center}
.skrivrad{display:flex;gap:8px;padding:12px 16px;border:1px solid var(--linje);border-top:1px solid var(--linje);background:#fff;border-radius:0 0 10px 10px;margin-bottom:30px}
.skrivrad textarea,.skrivrad input[type=text]{flex:1;border:1.5px solid #cfd6d2;border-radius:10px;padding:10px 14px;font-size:14px;resize:none;min-width:0}
.skrivrad textarea:focus{outline:none;border-color:var(--skog)}
.skrivrad .skicka{border:none;background:var(--skog);color:#fff;font-weight:700;border-radius:20px;padding:0 22px;font-size:14px}
.skrivrad .skicka:hover{background:var(--skogmork)}
.chat-back{font-size:13px;color:var(--gra);display:inline-block;margin-bottom:10px}
.chat-back:hover{color:var(--skog)}
.snabbsvar{display:flex;gap:7px;padding:10px 16px 0;flex-wrap:wrap}
.snabbsvar button{border:1px solid var(--linje);background:#fff;border-radius:99px;padding:6px 12px;font-size:13.5px;color:var(--gra);transition:border-color .15s,color .15s}
.snabbsvar button:hover{border-color:var(--black);color:var(--black)}

/* ============ PROFIL ============ */
.profil-kort{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:22px;display:flex;gap:18px;align-items:center;margin-bottom:14px;flex-wrap:wrap;margin-top:14px}
.profil-namn{font-size:24px;font-weight:700;font-family:var(--disp);letter-spacing:-.02em}
.profil-rad{font-size:13px;color:var(--gra);margin-top:3px}
.profil-stj{color:#e8a000;font-size:14px}
.profil-knappar{margin-left:auto;display:flex;flex-direction:column;gap:8px}
.flik-rad{display:flex;gap:2px;border-bottom:2px solid var(--linje);margin-bottom:14px}
.flik{padding:10px 18px;font-size:14px;font-weight:600;color:var(--gra);border:none;background:none;border-bottom:2.5px solid transparent;margin-bottom:-2px}
.flik.pa{color:var(--skog);border-bottom-color:var(--skog);font-weight:700}
.omdome{background:#fff;border:1px solid var(--linje);border-radius:10px;padding:15px 17px;margin-bottom:9px}
.omdome-topp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.omdome-topp .stj{color:#e8a000;font-size:13px}
.omdome-topp .star-dim{color:#ddd}
.omdome-topp .vem{font-weight:700;font-size:13.5px}
.omdome-topp .nar{margin-left:auto;font-size:13.5px;color:var(--ljusgra)}
.omdome-text{font-size:13.5px;color:#333;margin-top:5px}
.star-pick{display:flex;gap:4px;font-size:24px}
.star-pick input{position:absolute;opacity:0}
.star-pick .star-opt span{color:#ddd;cursor:pointer}
.star-pick .star-opt input:checked~span,.star-pick .star-opt:hover span{color:#e8a000}
.saljbox,.side-card{border:1px solid var(--linje);border-radius:10px;padding:16px;background:#fff;margin-top:12px}
.saljrad,.seller-row{display:flex;gap:11px;align-items:center;margin-bottom:8px}
.saljbox .namn,.seller-name{font-weight:700;font-size:14px}
.saljbox .stj{color:#e8a000;font-size:13.5px}
.saljbox .detalj,.seller-sub{font-size:13.5px;color:var(--gra);line-height:1.55}
.safety-list{list-style:none;font-size:13.5px;color:var(--gra);line-height:1.9}
.safety-list li:before{content:'✓ ';color:var(--skog);font-weight:700}

/* ============ KASSAN ============ */
.kassa-yta{display:flex;gap:20px;align-items:flex-start;padding-bottom:50px}
.kassa-vanster{flex:1;min-width:0}
.kassa-hoger{width:330px;flex-shrink:0}
.trygg{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gra);font-weight:600}
.trygg svg{width:18px;height:18px;color:var(--skog)}
.valkort{display:flex;gap:13px;border:1px solid #cfd6d2;border-radius:8px;padding:14px 16px;margin-bottom:10px;cursor:pointer;align-items:flex-start;background:#fff}
.valkort:hover{border-color:var(--skog)}
.valkort.pa{border-color:var(--skog);background:#fbfefc;box-shadow:inset 0 0 0 1px var(--skog)}
.valkort input[type=radio]{width:16px;height:16px;margin-top:2px;accent-color:var(--skog);flex-shrink:0}
.valkort .v-mitt{flex:1;min-width:0}
.valkort .v-titel{font-weight:700;font-size:14px}
.valkort .v-under{font-size:13.5px;color:var(--gra);margin-top:2px;line-height:1.55}
.valkort .v-pris{font-weight:700;font-size:14px;white-space:nowrap}
.valkort .v-pris.gratis{color:var(--skog)}
.skydd{display:flex;gap:12px;background:var(--skogljus);border:1px solid #cfe5da;border-radius:8px;padding:13px 15px;margin-bottom:14px}
.skydd svg{width:21px;height:21px;color:var(--skog);flex-shrink:0;margin-top:1px}
.skydd .s-titel{font-weight:700;font-size:13.5px;color:var(--skogmork)}
.skydd .s-text{font-size:13.5px;color:#2c4a3c;margin-top:2px;line-height:1.6}
.summering{border:1px solid var(--linje);border-radius:10px;background:#fff;padding:18px;position:sticky;top:76px}
.sum-vara{display:flex;gap:12px;padding-bottom:13px;border-bottom:1px solid var(--linje)}
.sum-bild{width:74px;height:56px;background:#e4e8e6;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#a8b0ac;font-size:12px;overflow:hidden}
.sum-bild img{width:100%;height:100%;object-fit:cover}
.sum-titel{font-weight:700;font-size:13.5px;line-height:1.35}
.sum-salj{font-size:13.5px;color:var(--gra);margin-top:3px}
.sum-rad{display:flex;font-size:13.5px;padding:5px 0}
.sum-rad .e{color:var(--gra)}
.sum-rad .v{margin-left:auto;font-weight:600}
.sum-rad.rabatt .v{color:var(--skog)}
.sum-rad.total{border-top:1px solid var(--linje);margin-top:7px;padding-top:11px}
.sum-rad.total .e{font-weight:700;color:var(--black);font-size:14.5px}
.sum-rad.total .v{font-weight:700;font-size:18px;letter-spacing:-.02em;font-family:var(--disp)}
.sum-not{font-size:12.5px;color:var(--ljusgra);margin-top:9px;line-height:1.6}
.klart-topp{text-align:center;padding:26px 0 10px}
.klart-topp .ring{width:56px;height:56px;border-radius:50%;background:var(--skog);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.klart-topp .ring svg{width:26px;height:26px}
.klart-topp h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
.klart-topp p{font-size:13.5px;color:var(--gra);margin-top:5px}
.kvitto{border:1px solid var(--linje);border-radius:10px;background:#fff;padding:20px;margin-bottom:14px}
.kvitto-topp{display:flex;align-items:baseline;border-bottom:1px solid var(--linje);padding-bottom:11px;margin-bottom:6px;flex-wrap:wrap;gap:6px}
.kvitto-topp b{font-size:14.5px}
.kvitto-topp .nr{margin-left:auto;font-size:13.5px;color:var(--ljusgra)}
.kvitto-rad{display:flex;font-size:13.5px;padding:7px 0;border-bottom:1px solid #f2f2f2}
.kvitto-rad:last-child{border-bottom:none}
.kvitto-rad .e{color:var(--ljusgra);width:140px;flex-shrink:0}
.kvitto-rad .v{font-weight:600}
.tidslinje{padding:2px 0}
.t-rad{display:flex;gap:13px;position:relative;padding-bottom:20px}
.t-rad:last-child{padding-bottom:0}
.t-rad:before{content:'';position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--linje)}
.t-rad:last-child:before{display:none}
.t-punkt{width:26px;height:26px;border-radius:50%;border:2px solid #ccc;background:#fff;color:#999;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;flex-shrink:0;z-index:1}
.t-rad.klar .t-punkt{background:var(--skog);border-color:var(--skog);color:#fff}
.t-rad.nu .t-punkt{border-color:var(--skog);color:var(--skog)}
.t-titel{font-weight:700;font-size:13.5px;padding-top:3px}
.t-rad.nu .t-titel{color:var(--skogmork)}
.t-under{font-size:13.5px;color:var(--gra);margin-top:2px;line-height:1.55}
.teststamp{font-size:12.5px;color:var(--varntext);background:var(--varnljus);border-radius:3px;padding:2px 8px;font-weight:700;display:inline-block;margin-left:6px;vertical-align:1px}

/* ============ HANDLARPLATTFORMEN ============ */
.tabell-svep{overflow-x:auto}
.tabell{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--linje);border-radius:10px;overflow:hidden}
.tabell th{text-align:left;font-size:13.5px;color:var(--gra);font-weight:500;padding:10px 12px;border-bottom:1px solid var(--linje);background:#fafbfa;white-space:nowrap}
.tabell td{padding:11px 12px;border-bottom:1px solid #f0f2f1;font-size:13.5px;vertical-align:middle}
.tabell tr:hover td{background:#fafbfa}
.tb-bild{width:58px;height:42px;background:#e4e8e6;border-radius:4px;display:inline-block;vertical-align:middle;overflow:hidden}
.tb-bild img{width:100%;height:100%;object-fit:cover;display:block}
.tb-titel{font-weight:600;font-size:13.5px}
.tb-titel a:hover{text-decoration:underline}
.tb-under{font-size:12.5px;color:var(--ljusgra)}
.lage{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;white-space:nowrap}
.lage::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.lage.bra{color:var(--skog)}.lage.ok{color:var(--gra)}.lage.hog{color:var(--varn)}
.lead{display:flex;gap:13px;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:13px 15px;margin-bottom:9px;align-items:center;flex-wrap:wrap}
.lead.olast{border-left:4px solid var(--skog)}
.lead-typ{font-size:12px;font-weight:700;letter-spacing:.05em;border-radius:3px;padding:3px 8px;flex-shrink:0;text-transform:uppercase}
.lead-typ.forslag{background:var(--varnljus);color:var(--varntext)}
.lead-typ.bokning{background:var(--skogljus);color:var(--skog)}
.lead-typ.fraga{background:var(--blaljus);color:var(--bla)}
.lead-mitt{flex:1;min-width:200px}
.lead-titel{font-weight:700;font-size:13.5px}
.lead-under{font-size:13.5px;color:var(--gra);margin-top:1px}
.lead-tid{font-size:12.5px;color:var(--ljusgra);white-space:nowrap}
.lead-tid.rod{color:var(--rod);font-weight:700}
.ansvarig{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--gra)}
.ansvarig select{border:1px solid #ddd;border-radius:6px;font-size:13.5px;padding:4px 6px;background:#fff}
.pyt{width:26px;height:26px;border-radius:50%;background:var(--skogdjup);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;flex-shrink:0;text-transform:uppercase}
.team-rad{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:12px 15px;margin-bottom:8px;flex-wrap:wrap}
.team-rad .pyt{width:36px;height:36px;font-size:14px}
.team-mitt{flex:1;min-width:180px}
.team-namn{font-weight:700;font-size:13.5px}
.team-under{font-size:13.5px;color:var(--ljusgra)}
.roll{font-size:13.5px;color:var(--gra)}
.roll select{border:1px solid #ddd;border-radius:6px;font-size:13.5px;padding:4px 6px;background:#fff}
.page-intro{font-size:13px;color:var(--gra);margin:-4px 0 14px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:880px){.settings-grid{grid-template-columns:1fr}}
.settings-h{font-size:17px;font-weight:600;margin-bottom:12px}
.label-hint{font-weight:400;color:var(--ljusgra);font-size:13.5px}
.f-label{font-size:13.5px;font-weight:700;letter-spacing:.03em;color:var(--gra);text-transform:uppercase}

/* ============ FOT ============ */
.fot{border-top:1px solid var(--linje);background:#fff;padding:26px 0;font-size:13.5px;color:var(--gra);margin-top:24px}
.fot .wrap{display:flex;gap:50px;flex-wrap:wrap}
.fot b{display:block;color:var(--black);margin-bottom:7px;font-family:var(--disp);font-size:14px}
.fot a{display:block;padding:2px 0;color:var(--gra)}
.fot a:hover{text-decoration:underline}
.fot .copy{margin-left:auto;color:var(--gra)}
.fot p{max-width:260px;line-height:1.6}

/* ============ PANELEN (Mina sidor / företagspanel) — mockupens .panel/.pnav ============ */
.mina-yta{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:20px 0 60px;align-items:start}
.mina-meny{position:sticky;top:84px;display:flex;flex-direction:column;gap:2px;width:auto;background:none;border:none;border-radius:0;overflow:visible}
.mina-meny .firma{display:flex;gap:10px;align-items:center;padding:8px 10px 14px}
.mina-meny .firma .lg{width:36px;height:36px;border-radius:8px;background:var(--black);color:#fff;font-family:var(--disp);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.mina-meny .firma b{display:block;font-size:14px;line-height:1.2}
.mina-meny .firma span{font-size:13.5px;color:var(--gra)}
.mina-meny a,.mina-meny .logga-ut{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;border:none;background:none;font-size:14px;color:var(--gra);text-align:left;width:100%;box-shadow:none}
.mina-meny a:hover,.mina-meny .logga-ut:hover{background:#fff;color:var(--black)}
.mina-meny a.vald{background:#fff;color:var(--black);font-weight:600;box-shadow:none}
.mina-meny a svg{width:16px;height:16px;flex-shrink:0}
.mina-meny a .n{margin-left:auto;font-size:12.5px;color:#fff;background:var(--skog);border-radius:99px;padding:1px 7px;font-weight:600}
.mina-meny a .n.gra{background:none;color:var(--ljusgra);font-weight:500}
.mina-meny .sep{height:1px;background:var(--linje);margin:8px 10px}
.mina-meny .logga-ut:hover{color:var(--rod)}
.phuvud{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.phuvud h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0}
.phuvud p{color:var(--gra);font-size:13.5px;margin-top:2px}
.phuvud .knappar{display:flex;gap:8px}
.phuvud .knappar a,.phuvud .knappar button{border-radius:6px;padding:10px 16px;font-family:var(--disp);font-size:14.5px;font-weight:600;border:1.5px solid var(--linje);background:#fff;color:var(--black);display:inline-block}
.phuvud .knappar .p{background:var(--skog);border-color:var(--skog);color:#fff}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi>div{background:#fff;border-radius:10px;padding:16px 18px}
.kpi .l{font-size:13.5px;color:var(--gra)}
.kpi .v{font-family:var(--disp);font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.kpi .d{font-size:13.5px;margin-top:6px;color:var(--gra)}
.kpi .d.upp{color:var(--skog);font-weight:600}
.kpi .d.ner{color:var(--rod);font-weight:600}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;margin-top:12px;align-items:start}
.pkort{background:#fff;border-radius:10px;padding:16px 18px}
.pkort+.pkort{margin-top:12px}
.pkort h2{font-size:16px;font-weight:600;margin-bottom:10px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pkort h2 a{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--black);text-decoration:underline}
.pkort h2 span.lm{font-family:var(--ui);font-size:13.5px;font-weight:400;color:var(--gra)}
.gora{display:flex;flex-direction:column}
.gora>div{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--linje);font-size:13.5px}
.gora>div:first-child{border-top:none}
.gora .ik{width:32px;height:32px;border-radius:8px;background:var(--skogljus);color:var(--skog);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px;font-weight:700}
.gora .ik.varn{background:var(--varnljus);color:var(--varntext)}
.gora .ik.rod{background:#fdeceb;color:var(--rod)}
.gora .t{flex:1;min-width:0}
.gora .t b{display:block}
.gora .t small{color:var(--gra);font-size:13.5px}
.gora a.k,.gora button.k{border:1px solid var(--linje);background:#fff;border-radius:6px;padding:6px 10px;font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--black)}
.gora a.k:hover,.gora button.k:hover{border-color:var(--skog);color:var(--skog)}
.gora .kk{display:flex;gap:6px}
.graf{display:flex;align-items:flex-end;gap:5px;height:90px;margin-top:8px}
.graf i{flex:1;background:var(--skogljus);border-radius:3px 3px 0 0;position:relative;min-height:2px}
.graf i.idag{background:var(--skog)}
.graf-etik{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ljusgra);margin-top:6px}
.bokning{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--linje);font-size:13.5px}
.bokning:first-child{border-top:none}
.bokning .tid{font-family:var(--disp);font-weight:600;font-size:14px;width:120px;flex-shrink:0;line-height:1.25}
.bokning .t{flex:1;min-width:0}
.bokning .t b{display:block}
.bokning .t small{color:var(--gra);font-size:13.5px}
.bokning .av{width:30px;height:30px;border-radius:50%;background:var(--skogdjup);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-transform:uppercase}
.bokning .st{font-size:12.5px;color:var(--skog);font-weight:600;white-space:nowrap}
.bokning .st.ny{color:var(--varntext)}
.pbokdag h3{font-family:var(--ui);font-size:13.5px;color:var(--gra);font-weight:600;margin:14px 0 4px}
.pbokdag h3:first-child{margin-top:0}
.filterrad{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.filterrad button{border:1px solid var(--linje);background:#fff;border-radius:99px;padding:6px 12px;font-size:13.5px;color:var(--gra)}
.filterrad button[aria-pressed=true]{background:var(--black);color:#fff;border-color:var(--black);font-weight:600}
.filterrad input{margin-left:auto;border:1.5px solid var(--linje);border-radius:6px;padding:7px 12px;font-family:inherit;font-size:13px;width:220px}
.stapel-mini{display:inline-block;width:70px;height:5px;border-radius:3px;background:#e3e8e5;position:relative;vertical-align:middle;margin-left:6px}
.stapel-mini i{position:absolute;top:0;left:0;bottom:0;border-radius:3px;background:var(--skog)}
.status{font-size:13.5px;color:var(--gra)}
.status.varn{color:var(--varntext);font-weight:600}
.tabell .mer{border:none;background:none;font-size:16px;color:var(--gra);padding:2px 6px}
.tabell .bil{display:flex;gap:10px;align-items:center}
.tabell .bil .mini{width:52px;height:38px;border-radius:4px;background:#e4e8e6;flex-shrink:0;overflow:hidden}
.tabell .bil .mini img{width:100%;height:100%;object-fit:cover;display:block}
.tabell .bil b{display:block;font-weight:600;white-space:nowrap}
.tabell .bil small{color:var(--gra);font-size:13.5px}
.tabell .r{text-align:right}
.tabell tr.dold{display:none}
.import{display:flex;gap:12px;align-items:center;background:var(--skogdjup);color:#fff;border-radius:10px;padding:16px 18px;margin-top:12px}
.import .i{font-size:22px;color:#8fd4b3;flex-shrink:0}
.import b{display:block;font-family:var(--disp);font-size:15px;font-weight:600}
.import p{font-size:13.5px;color:rgba(255,255,255,.72);line-height:1.5}
.import a{margin-left:auto;background:#fff;color:var(--skogdjup);border:none;border-radius:6px;padding:9px 14px;font-weight:700;white-space:nowrap}

/* ============ MEDDELANDEN (mockupens .medd) ============ */
.medd{display:grid;grid-template-columns:340px minmax(0,1fr);gap:0;background:var(--krita);border:1px solid var(--linje);border-radius:10px;overflow:hidden;margin:0 0 20px;height:calc(100vh - 140px);min-height:560px}
.inbox{border-right:1px solid var(--linje);display:flex;flex-direction:column;min-height:0}
.inbox-huvud{padding:16px 16px 10px;display:flex;align-items:baseline;justify-content:space-between}
.inbox-huvud h1{font-size:22px;font-weight:700;margin:0}
.inbox-huvud span{font-size:13.5px;color:var(--gra)}
.inbox-flik{display:flex;gap:4px;padding:0 12px 10px;border-bottom:1px solid var(--linje)}
.inbox-flik button{border:1px solid var(--linje);background:#fff;border-radius:99px;padding:5px 12px;font-size:13.5px;color:var(--gra)}
.inbox-flik button[aria-pressed=true]{background:var(--black);color:#fff;border-color:var(--black);font-weight:600}
.trad-lista{overflow-y:auto;flex:1}
.trad{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #eef1ef;cursor:pointer;position:relative;color:var(--black)}
.trad:hover{background:#fafbfa}
.trad.vald{background:var(--skogljus)}
.trad.dold{display:none}
.trad .mini{width:52px;height:52px;border-radius:8px;background:#e4e8e6;flex-shrink:0;position:relative;overflow:visible}
.trad .mini img{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.trad .mini .av{position:absolute;right:-6px;bottom:-6px;width:24px;height:24px;border-radius:50%;background:var(--skogdjup);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;text-transform:uppercase}
.trad .txt{flex:1;min-width:0}
.trad .r1{display:flex;justify-content:space-between;gap:8px}
.trad .namn{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trad .tid{font-size:12.5px;color:var(--ljusgra);white-space:nowrap}
.trad .om{font-size:13.5px;color:var(--gra);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trad .sn{font-size:13px;color:var(--gra);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.trad.olast .sn{color:var(--black);font-weight:600}
.trad.olast::after{content:"";position:absolute;right:16px;bottom:14px;width:8px;height:8px;border-radius:50%;background:var(--skog)}
.trad .hand{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--skog);font-weight:600;margin-top:3px}
.trad .hand::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--skog)}
.konv{display:flex;flex-direction:column;min-height:0;min-width:0;gap:0;padding:0;border:none;align-items:stretch;position:static}
.konv:hover{background:none}
.konv-tom{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ljusgra);font-size:14px;text-align:center;padding:20px}
.konv-huvud{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--linje)}
.konv-huvud .mini{width:44px;height:44px;border-radius:6px;background:#e4e8e6;flex-shrink:0;position:relative;overflow:hidden}
.konv-huvud .mini img{width:100%;height:100%;object-fit:cover;display:block}
.konv-huvud .mini .sb{position:absolute;left:0;right:0;bottom:0;text-align:center;background:var(--skog);color:#fff;font-size:11.5px;font-weight:700;padding:1px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.konv-huvud .t{flex:1;min-width:0}
.konv-huvud .t b{display:block;font-size:14.5px}
.konv-huvud .t span{font-size:13.5px;color:var(--gra)}
.konv-huvud .t a{color:var(--skog);font-weight:600}
.konv-huvud .t .num{font-family:var(--disp);font-weight:600;color:var(--black);font-size:14px}
.konv-huvud .st{font-size:13.5px;color:var(--gra);display:flex;align-items:center;gap:6px;white-space:nowrap}
.konv-huvud .st .verif{color:var(--skog);font-weight:600;font-size:13.5px}
.konv-huvud .mer{border:1px solid var(--linje);background:#fff;border-radius:6px;padding:7px 10px;font-size:13.5px;white-space:nowrap;color:var(--black)}
.tillbaka{display:none;background:none;border:none;font-size:20px;padding:4px 8px 4px 0}
.affar{display:flex;align-items:center;gap:0;padding:10px 18px;border-bottom:1px solid var(--linje);background:#fff;overflow-x:auto;scrollbar-width:none}
.affar .s{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ljusgra);white-space:nowrap}
.affar .s .p{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--linje);display:flex;align-items:center;justify-content:center;font-size:11.5px;background:#fff;flex-shrink:0}
.affar .s.klar{color:var(--gra)}
.affar .s.klar .p{background:var(--skog);border-color:var(--skog);color:#fff}
.affar .s.nu{color:var(--skog);font-weight:600}
.affar .s.nu .p{border-color:var(--skog);color:var(--skog);box-shadow:0 0 0 3px var(--skogljus)}
.affar .lin{flex:1;min-width:14px;height:1.5px;background:var(--linje);margin:0 8px}
.affar .lin.klar{background:var(--skog)}
.bubblor{flex:1;overflow-y:auto;padding:18px 18px 10px;display:flex;flex-direction:column;gap:10px;background:#fafbfa}
.dag{text-align:center;font-size:12.5px;color:var(--ljusgra);margin:4px 0}
.bub{max-width:68%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.45;position:relative;white-space:pre-line;word-wrap:break-word}
.bub.dem{background:#fff;border:1px solid var(--linje);align-self:flex-start;border-bottom-left-radius:4px}
.bub.jag{background:var(--skog);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.bub .t{display:none;font-size:12px;opacity:.6;margin-top:4px;text-align:right}
.bub:hover .t,.bub.sist .t{display:block}
.bub+.bub.dem,.bub+.bub.jag{margin-top:-6px}
.bub.dem+.bub.dem{border-top-left-radius:6px}
.bub.jag+.bub.jag{border-top-right-radius:6px}
.last{align-self:flex-end;font-size:12.5px;color:var(--ljusgra);margin-top:-6px}
.sys{align-self:center;max-width:78%;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:12px 14px;font-size:13px;text-align:center}
.sys .i{color:var(--skog)}
.sys b{font-family:var(--disp);font-size:15px;font-weight:600;display:block}
.sys .num.stor{font-family:var(--disp);font-size:22px;font-weight:700;letter-spacing:-.02em;display:block;margin:4px 0}
.sys .knappar{display:flex;gap:6px;justify-content:center;margin-top:10px;flex-wrap:wrap;align-items:center}
.sys .knappar button,.sys .knappar a{border-radius:6px;padding:8px 14px;font-weight:600;font-size:13px;border:1.5px solid var(--skog);background:#fff;color:var(--skog);display:inline-block}
.sys .knappar .p{background:var(--skog);color:#fff}
.sys .knappar .g{border-color:var(--linje);color:var(--gra)}
.sys .knappar input{width:110px;border:1.5px solid #cfd6d2;border-radius:6px;padding:7px 8px;font-size:13px;font-family:var(--disp);font-weight:600}
.sys .knappar form{display:contents}
.sys small{display:block;color:var(--gra);font-size:13.5px;margin-top:6px}
.sys.ok{border-color:var(--skog);background:var(--skogljus)}
.sys.gra{color:var(--gra)}
.svar{display:flex;gap:6px;padding:8px 18px 0;background:#fff;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--linje)}
.svar button{border:1px solid var(--linje);background:#fff;border-radius:99px;padding:6px 12px;font-size:13.5px;color:var(--gra);white-space:nowrap}
.svar button:hover{border-color:var(--black);color:var(--black)}
.snabb{display:flex;gap:6px;padding:10px 18px 0;flex-wrap:wrap;background:#fff;align-items:center}
.snabb .nasta{font-size:12.5px;color:var(--ljusgra);margin-right:2px}
.snabb button,.snabb a{border:1px solid var(--skog);background:#fff;border-radius:99px;padding:6px 12px;font-size:13.5px;color:var(--skog);display:inline-flex;align-items:center;gap:5px;font-weight:600}
.snabb button:hover,.snabb a:hover{background:var(--skogljus)}
.skriv{display:flex;gap:8px;padding:10px 18px 14px;background:#fff;align-items:flex-end}
.skriv textarea{flex:1;border:1.5px solid #cfd6d2;border-radius:10px;padding:10px 14px;font-family:inherit;font-size:14px;resize:none;height:44px;min-width:0}
.skriv textarea:focus{outline:none;border-color:var(--skog)}
.skriv button{width:44px;height:44px;border-radius:50%;background:var(--skog);color:#fff;border:none;font-size:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

/* ============ SÄLJ I FEM STEG (mockupens .salj) ============ */
.salj-yta .ingress{color:var(--gra);font-size:15px;margin-top:-6px;margin-bottom:8px}
.salj-yta .steg{display:flex;gap:0;margin:22px 0 22px;border-bottom:1px solid var(--linje)}
.salj-yta .steg button{flex:1;padding:10px 0;font-size:13px;color:var(--ljusgra);border:none;border-bottom:3px solid transparent;margin-bottom:-1px;display:flex;gap:8px;align-items:center;background:none;justify-content:flex-start}
.salj-yta .steg button b{width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:13.5px;flex-shrink:0}
.salj-yta .steg button.pa{color:var(--skog);border-bottom-color:var(--skog);font-weight:600}
.salj-yta .steg button.pa b{background:var(--skog);color:#fff;border-color:var(--skog)}
.salj-yta .steg button.klar{color:var(--skog)}
.salj-yta .steg button.klar b{background:var(--skogljus);border-color:var(--skog)}
.stegvy{display:none}
.stegvy.pa{display:block}
.saljkort{background:var(--krita);border:1px solid var(--linje);border-radius:10px;padding:24px 28px}
.saljkort+.saljkort{margin-top:14px}
.saljkort h2{font-size:19px;font-weight:600;margin-bottom:4px}
.saljkort .hj{color:var(--gra);font-size:13.5px;margin-bottom:16px}
.navrad{display:flex;justify-content:space-between;margin-top:18px;gap:10px}
.navrad .bak{background:none;border:1.5px solid var(--linje);border-radius:6px;padding:12px 18px;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--gra)}
.navrad .navmitt{flex:1;display:flex;align-items:center;justify-content:center}
.navrad .hoppa{background:none;border:none;color:var(--gra);font:inherit;font-size:13.5px;text-decoration:underline;cursor:pointer;padding:8px;white-space:nowrap}
.navrad .fram{background:var(--black);color:#fff;border:none;border-radius:6px;padding:12px 22px;font-family:var(--disp);font-size:16px;font-weight:600}
.regskylt{display:flex;align-items:center;border:2px solid var(--black);border-radius:8px;overflow:hidden;background:#fff;max-width:300px}
.regskylt .eu{background:#1d4ed8;color:#fff;font-size:11.5px;font-weight:700;padding:0 7px;align-self:stretch;display:flex;align-items:flex-end;padding-bottom:6px}
.regskylt input{flex:1;border:none;font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:.12em;padding:6px 12px;text-transform:uppercase;min-width:0;width:100%}
.regskylt input:focus{outline:none}
.regrad{display:flex;gap:10px;align-items:stretch}
.regrad .hamta{background:var(--skog);color:#fff;border:none;border-radius:8px;padding:0 22px;font-family:var(--disp);font-size:16px;font-weight:600;white-space:nowrap}
.regrad .hamta:hover{background:var(--skogmork)}
.salj-yta .alt{margin-top:10px;font-size:13px;color:var(--gra)}
.salj-yta .alt button{background:none;border:none;color:var(--skog);font-weight:600;text-decoration:underline;padding:0;font:inherit;cursor:pointer}
.hamtat{margin-top:14px;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--skog);font-size:13.5px}
.hamtat.fel{color:var(--rod)}
.fotoguide{margin-top:20px;border-top:1px solid var(--linje);padding-top:16px}
.fotoguide .r{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;width:100%;background:none;border:none;padding:0;text-align:left;font:inherit;cursor:default}
.stegvy .saljkort+.saljkort{margin-top:14px}
@media (max-width:640px){
  .fotoguide .r{cursor:pointer}
  .fotoguide .r span::after{content:" ▾";color:var(--gra)}
  .fotoguide.oppen .r span::after{content:" ▴"}
  .fotoguide:not(.oppen) .guide,.fotoguide:not(.oppen) .tips{display:none}
  .fotoguide:not(.oppen) .r{margin-bottom:0}
}
.fotoguide .r b{font-family:var(--disp);font-size:15px;font-weight:600}
.fotoguide .r span{font-size:13.5px;color:var(--gra)}
.fotoguide .r span em{font-style:normal;color:var(--skog);font-weight:600}
.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.guide div{display:flex;gap:8px;align-items:center;font-size:13.5px;padding:8px 10px;border:1px solid var(--linje);border-radius:6px;color:var(--gra)}
.guide div.klar{border-color:var(--skog);color:var(--black);background:var(--skogljus)}
.guide div .i{color:var(--skog)}
.guide div .ring{width:14px;height:14px;border:1.5px solid #b9c5be;border-radius:50%;flex-shrink:0}
.tips{margin-top:14px;font-size:13.5px;color:var(--gra);line-height:1.55}
.pristyp{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pristyp label{border:1.5px solid var(--linje);background:#fff;border-radius:8px;padding:10px 14px;font-size:13px;color:var(--gra);cursor:pointer;line-height:1.4;flex:1;min-width:140px}
.pristyp label b{display:block;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--black)}
.pristyp label input{position:absolute;opacity:0;width:0;height:0}
.pristyp label:has(input:checked){border-color:var(--skog);background:var(--skogljus)}
.pristyp label:has(input:checked) b{color:var(--skog)}
.prisrad{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.prisin{display:flex;align-items:center;border:1.5px solid #cfd6d2;border-radius:8px;overflow:hidden;background:#fff}
.prisin input{border:none;font-family:var(--disp);font-size:30px;font-weight:600;padding:8px 14px;width:190px;letter-spacing:-.02em;text-align:right;-moz-appearance:textfield}
.prisin input::-webkit-outer-spin-button,.prisin input::-webkit-inner-spin-button{-webkit-appearance:none}
.prisin input:focus{outline:none}
.prisin span{padding:0 14px;color:var(--gra);font-size:15px;background:#fafbfa;align-self:stretch;display:flex;align-items:center;border-left:1px solid var(--linje)}
.skala{margin-top:34px;display:none}
.skala.pa{display:block}
.skala .lin{position:relative;height:10px;border-radius:5px;background:#e3e8e5}
.skala .lin .spann{position:absolute;top:0;bottom:0;background:#bfe0cf;border-radius:5px}
.skala .lin .pek{position:absolute;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--black);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transform:translateX(-50%);left:41%;transition:left .15s}
.skala .lin .band{position:absolute;top:-22px;text-align:center;font-size:12.5px;color:var(--skog);font-weight:600;white-space:nowrap;transform:translateX(-50%)}
.skala .etik{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ljusgra);margin-top:8px}
.prisbesked{margin-top:12px;display:none;gap:8px;align-items:center;background:var(--skogljus);color:var(--skog);border-radius:6px;padding:10px 12px;font-size:13px;font-weight:600}
.prisbesked.pa{display:flex}
.prisbesked.varn{background:var(--varnljus);color:var(--varntext)}
.valrad{display:flex;flex-direction:column;gap:10px;margin-top:18px;border-top:1px solid var(--linje);padding-top:16px}
.vaxel{display:flex;align-items:center;gap:12px;cursor:pointer;position:relative}
.vaxel .sw{width:40px;height:22px;border-radius:11px;background:#cfd6d2;position:relative;flex-shrink:0;transition:background .15s}
.vaxel .sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.vaxel input{position:absolute;opacity:0;width:0;height:0}
.vaxel input:checked+.sw{background:var(--skog)}
.vaxel input:checked+.sw::after{left:20px}
.vaxel b{font-weight:600;display:block}
.vaxel small{color:var(--gra);font-size:13.5px}
.tidval{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.tidval label,.tidval button{text-align:left;border:1.5px solid var(--linje);background:#fff;border-radius:8px;padding:12px 14px;font-size:13.5px;color:var(--gra);line-height:1.4;cursor:pointer;position:relative}
.tidval label b,.tidval button b{display:block;font-family:var(--disp);font-size:15px;font-weight:600;color:var(--black)}
.tidval label input{position:absolute;opacity:0;width:0;height:0}
.tidval label:has(input:checked),.tidval button[aria-pressed=true]{border-color:var(--skog);background:var(--skogljus)}
.tidval label:has(input:checked) b,.tidval button[aria-pressed=true] b{color:var(--skog)}
.tidval label.bokad{opacity:.75;cursor:default}
.egnatider{display:none;margin-top:12px;flex-direction:column;gap:8px}
.egnatider.pa{display:flex}
.egnatider input{width:100%;border:1.5px solid #cfd6d2;border-radius:6px;padding:10px 12px;font-size:14px}
.visnot{margin-top:12px;font-size:13.5px;color:var(--gra);line-height:1.55}
.visnot b{color:var(--black)}
.granska{display:grid;grid-template-columns:270px 1fr;gap:22px}
.granska .kort{cursor:default}
.granska .kort .k-titel a::after{display:none}
.checklista{display:flex;flex-direction:column;gap:8px}
.checklista div{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;padding:10px 12px;border:1px solid var(--linje);border-radius:6px}
.checklista .i{color:var(--skog);margin-top:2px;flex-shrink:0}
.checklista div.varn .i{color:var(--varn)}
.checklista small{display:block;color:var(--gra);font-size:13.5px}
.checklista button{background:none;border:none;color:var(--skog);font-weight:600;text-decoration:underline;padding:0;font:inherit;cursor:pointer}
.pubrad{margin-top:20px;background:var(--skogdjup);color:#fff;border-radius:10px;padding:20px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pubrad h3{font-size:20px;font-weight:600}
.pubrad p{color:rgba(255,255,255,.72);font-size:13px;flex:1;min-width:220px}
.pubrad .pub{background:#fff;color:var(--skogdjup);border:none;border-radius:6px;padding:13px 24px;font-family:var(--disp);font-size:17px;font-weight:700}
.pubrad .pub:hover{background:var(--skogljus)}
.saljlofte{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.saljlofte div{font-size:13px;color:var(--gra);line-height:1.5}
.saljlofte div b{display:block;color:var(--black);font-family:var(--disp);font-size:15px;font-weight:600;margin-bottom:2px}
.stegfel{color:var(--rod);font-size:13px;font-weight:600;margin-top:10px;display:none}
.stegfel.pa{display:block}
@media (max-width:900px){
  .salj-yta .steg button{font-size:0;gap:0;justify-content:center}
  .salj-yta .steg button b{font-size:13.5px}
  .saljlofte{grid-template-columns:1fr}
  .granska{grid-template-columns:1fr}
  .granska .kort{max-width:340px}
  .guide{grid-template-columns:repeat(2,1fr)}
  .regrad{flex-direction:column}
  .regskylt{max-width:none}
  .regrad .hamta{padding:12px}
  .saljkort{padding:18px}
}
@media (max-width:560px){.prisin input{width:150px;font-size:26px}}

/* ============ MODAL (Ge prisförslag) ============ */
[hidden]{display:none!important}
.modal-bak{position:fixed;inset:0;background:rgba(23,29,26,.45);z-index:90;display:none;align-items:center;justify-content:center;padding:16px}
.modal-bak.pa{display:flex}
.modal{background:var(--krita);border-radius:12px;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25);margin:0}
.modal .mh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--linje)}
.modal .mh h2{font-size:19px;font-weight:600;margin:0}
.modal .mh button{background:none;border:none;font-size:20px;color:var(--gra);line-height:1;padding:4px}
.modal .mk{padding:18px 20px}
.modal .mf{padding:14px 20px 18px;border-top:1px solid var(--linje);display:flex;gap:8px;justify-content:flex-end}
.modal .mf button{border-radius:6px;padding:11px 18px;font-size:15px;font-weight:600;border:1.5px solid var(--linje);background:#fff;color:var(--gra)}
.modal .mf button.p{background:var(--skog);border-color:var(--skog);color:#fff}
.modal .mf button.p:hover{background:var(--skogmork)}
.annonsrad{display:flex;gap:12px;align-items:center;background:#fafbfa;border:1px solid var(--linje);border-radius:8px;padding:10px 12px;margin-bottom:16px}
.annonsrad .mini{width:56px;height:42px;background:#e4e8e6;border-radius:4px;flex-shrink:0;overflow:hidden}
.annonsrad .mini img{width:100%;height:100%;object-fit:cover;display:block}
.annonsrad b{display:block;font-size:14px}
.annonsrad span{font-size:13.5px;color:var(--gra)}
.mlabel{font-weight:600;font-size:13.5px;margin-bottom:6px;display:block}
.mnot{font-size:13.5px;color:var(--gra);margin-top:12px;line-height:1.5}
.budin{display:flex;align-items:center;border:1.5px solid #cfd6d2;border-radius:8px;overflow:hidden;background:#fff;max-width:260px}
.budin input{border:none;font-size:28px;font-weight:600;padding:8px 12px;width:180px;text-align:right;letter-spacing:-.02em;-moz-appearance:textfield;min-width:0}
.budin input::-webkit-outer-spin-button,.budin input::-webkit-inner-spin-button{-webkit-appearance:none}
.budin input:focus{outline:none}
.budin span{padding:0 12px;color:var(--gra);background:#fafbfa;align-self:stretch;display:flex;align-items:center;border-left:1px solid var(--linje)}
.budsnabb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.budsnabb button{border:1px solid var(--linje);background:#fff;border-radius:99px;padding:5px 11px;font-size:13.5px;color:var(--gra);font-variant-numeric:tabular-nums}
.budsnabb button:hover{border-color:var(--skog);color:var(--skog)}
.budbesked{margin-top:12px;font-size:13px;padding:10px 12px;border-radius:6px;background:var(--skogljus);color:var(--skog);font-weight:600;display:none}
.budbesked.pa{display:block}
.budbesked.varn{background:var(--varnljus);color:var(--varntext)}

/* ============ SÅ FUNKAR DET / prosasidor ============ */
.omsida{max-width:760px;margin:0 auto;padding:30px 0 60px}
.omsida h1{font-size:36px;font-weight:700;letter-spacing:-.025em;line-height:1.05}
.omsida .ingress{color:var(--gra);font-size:15.5px;margin-top:8px;max-width:56ch;line-height:1.55}
.omsida h2{font-size:22px;font-weight:700;margin:36px 0 14px;letter-spacing:-.02em}
.omsida.prose p,.omsida.prose li{font-size:14.5px;line-height:1.65;color:#2b322f;max-width:66ch}
.omsida.prose p{margin-bottom:12px}
.omsida.prose ul,.omsida.prose ol{margin:0 0 14px 20px}
.omsida.prose a{color:var(--skog);font-weight:600;text-decoration:underline}
.omsida .prose-updated{color:var(--ljusgra);font-size:13.5px}
.steglista{display:flex;flex-direction:column;gap:10px}
.steglista>div{display:flex;gap:16px;background:var(--krita);border-radius:10px;padding:18px 20px;align-items:flex-start}
.steglista .nr{width:34px;height:34px;border-radius:50%;background:var(--skogljus);color:var(--skog);font-family:var(--disp);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.steglista b{display:block;font-family:var(--disp);font-size:17px;font-weight:600;margin-bottom:3px}
.steglista p{font-size:14px;color:#2b322f;line-height:1.55;max-width:60ch}
.omsida .fakta{background:var(--krita);border-radius:10px;padding:4px 20px;display:block}
.omsida .fakta div{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--linje);font-size:14px}
.omsida .fakta div:last-child{border-bottom:none}
.omsida .fakta dt{color:var(--gra)}
.omsida .fakta dd{line-height:1.5}
.omsida .kontakt{margin-top:30px;font-size:14px;color:var(--gra)}
.omsida .kontakt b{color:var(--black)}
.form-foot{font-size:13px;color:var(--gra);margin-top:14px}
.form-foot a{color:var(--skog);font-weight:600}
.form-card h1{font-size:26px}

/* ============ RESPONSIVT ============ */
.bnav{display:none}
@media (max-width:1000px){.tiles{grid-template-columns:repeat(4,1fr);grid-auto-rows:140px}}
@media (max-width:900px){
  .huvud-rad{gap:10px;height:58px}
  .hval .txt{display:none}
  .hval{padding:6px 6px}
  .hlank{flex-shrink:0;margin-left:0}
  .sokform{flex:1 1 100px;min-width:0}
  .knapp-salj{padding:8px 12px;margin-left:4px;font-size:14px}
  .under{top:58px}
  .under .fade{display:block}
  .typ{padding:8px 12px;min-height:46px}
  .typ .ill{width:30px;height:20px}
  .typ .n{font-size:14px}
  .hero h1,.start-hero h1{font-size:30px}
  .hero{padding:12px 0 16px}
  .tryggrad{grid-template-columns:1fr}
  .tryggrad .trygg{display:flex;gap:14px;align-items:flex-start;padding:16px;border-left:none;border-top:1px solid rgba(255,255,255,.12)}
  .tryggrad .trygg:first-child{border-top:none}
  .tryggrad .trygg .i{margin:2px 0 0}
  .annons{grid-template-columns:minmax(0,1fr)}
  .a-sida,.a-sida.med-under{position:static}
  .specgrid{grid-template-columns:repeat(2,1fr)}
  /* filterpanelen blir bottensheet */
  .filterknapp{display:inline-flex}
  .filter,.filter.med-under{position:fixed;inset:0;top:auto;width:auto;max-height:92vh;border-radius:14px 14px 0 0;z-index:80;transform:translateY(100%);transition:transform .22s;box-shadow:0 -8px 30px rgba(0,0,0,.2)}
  .filter.oppen{transform:none}
  .f-topp{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--linje);font-weight:700;font-size:15px}
  .f-topp button{background:none;border:none;font-size:22px;color:var(--gra);line-height:1}
  .visa-knapp{display:block;margin-bottom:8px}
  .bevaka{border:none;padding:6px}
  .reduljus{display:none}
  .tack{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:75;display:none}
  .tack.pa{display:block}
  .rutnat{grid-template-columns:repeat(2,1fr);gap:10px}
  .k-kropp{padding:8px 10px 10px}
  .sortera{margin-left:0;width:100%}
  .sortera select{flex:1;width:100%;min-width:0}
  .sortera{flex-wrap:wrap;row-gap:8px}
  .sortera form{display:flex !important;flex:1 1 200px;min-width:0}
  .sortera .vyval{margin-left:auto;flex-shrink:0}
  .aktiva{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;margin:0 -14px;padding-left:14px;padding-right:14px}
  .fchip{white-space:nowrap;flex-shrink:0}
  .item-layout,.a-layout,.kassa-yta{flex-direction:column}
  .a-box,.kassa-hoger{width:100%}
  .summering{position:static}
  .mina-yta{grid-template-columns:1fr;gap:12px;padding-top:12px}
  .mina-meny{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .mina-meny::-webkit-scrollbar{display:none}
  .mina-meny .firma,.mina-meny .sep,.mina-meny .logga-ut,.mina-profil,.profil-lank{display:none}
  .mina-meny a{white-space:nowrap;width:auto;background:#fff;flex-shrink:0}
  .fakta,.spec-list{grid-template-columns:1fr}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:1fr}
  .tabell th:nth-child(3),.tabell td:nth-child(3),.tabell th:nth-child(5),.tabell td:nth-child(5){display:none}
  .import{flex-wrap:wrap}.import a{margin-left:0;width:100%;text-align:center}
  .medd{grid-template-columns:minmax(0,1fr);height:calc(100vh - 100px);margin:0 -14px;border-radius:0;border-left:none;border-right:none}
  .medd .konv{display:none}
  .medd.oppen .inbox{display:none}
  .medd.oppen .konv{display:flex}
  .tillbaka{display:inline-block}
  .konv-huvud .st{display:none}
  .bub{max-width:82%}
  .sys{max-width:94%}
  .affar{padding:8px 14px}
  .omsida h1{font-size:28px}
  .omsida .fakta div{grid-template-columns:1fr;gap:4px}
}
@media (max-width:640px){
  body{padding-bottom:64px}
  .tiles,.kattiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:128px;gap:10px}
  .tile{padding:14px}
  .tile.stor .n{font-size:24px}
  .tile .n{font-size:17px}
  .tile .ill{width:56%}
  .kolls{grid-template-columns:1fr}
  .gratisband{padding:20px}
  .gratisband .k{width:100%;margin-left:0;text-align:center}
  .hlank{display:none}
  .knapp-salj{display:none}
  .tva,.form-row-2{flex-direction:column;gap:0}
  .fot .wrap{gap:22px}
  .salj-kort{padding:18px}
  .mobilpris{display:block;margin-top:14px}
  .mobilpris .pris{font-family:var(--disp);font-size:26px;font-weight:700;letter-spacing:-.02em}
  .mobilpris .rad{font-size:13.5px;color:var(--ljusgra);margin-top:2px}
  .mobilpris .rad b{color:var(--skog)}
  /* bottennav — 5 val, Sälj som grön mittknapp (beslutat mobilmönster) */
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--linje);padding:6px 4px 10px;z-index:60}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12.5px;color:var(--gra);font-weight:600;padding:4px 0;position:relative;min-height:44px}
  .bnav a.vald{color:var(--skog)}
  .bnav svg{width:23px;height:23px}
  .bnav .salj-cirkel{width:44px;height:44px;border-radius:50%;background:var(--skog);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:-16px;box-shadow:0 3px 10px rgba(14,122,77,.4);border:3px solid var(--dimma)}
  .bnav .salj-cirkel svg{width:20px;height:20px}
  .bnav .not{position:absolute;top:0;right:calc(50% - 20px);background:var(--rod);color:#fff;font-size:11.5px;font-weight:700;border-radius:8px;padding:1px 5px;border:1.5px solid #fff}
  /* klistrad köpstång på annonssidan */
  .kopstang{position:fixed;left:0;right:0;bottom:60px;background:#fff;border-top:1px solid var(--linje);display:flex;gap:9px;padding:10px 14px;z-index:55;align-items:center}
  .kopstang .pris{font-family:var(--disp);font-size:17px;font-weight:700;white-space:nowrap}
  .kopstang .kop{flex:1;background:var(--skog);color:#fff;border:none;border-radius:6px;padding:12px;font-size:14px;font-weight:600;text-align:center;font-family:var(--disp)}
  .kopstang .forslag{border:1px solid #cfd6d2;background:#fff;border-radius:6px;padding:12px 14px;font-size:13px;font-weight:600}
  .kopstang button.kop,.kopstang button.forslag{font:inherit;cursor:pointer}
  .kopstang button.kop{font-family:var(--disp);font-weight:600;font-size:14px}
  .annons{padding-bottom:120px}
  .filter{bottom:0}
}
@media (max-width:560px){
  .sokform input{padding-left:32px;font-size:14px}
  .sokform .lupp{left:10px}
  .sokform button{padding:0 10px}
  .wrap{padding:0 14px}
  .under .fade{right:14px}
  .under .pilknapp{display:none!important}
  .logga{font-size:26px}
  /* Rutnät: två kolumner, bild överst, kompakt text. Lista: en per rad, bild till vänster. */
  .rutnat{grid-template-columns:repeat(2,1fr);gap:10px}
  .rutnat:not(.lista) .k-kropp{padding:8px 9px 10px}
  .rutnat:not(.lista) .k-pris{font-size:17px}
  .rutnat:not(.lista) .k-titel{font-size:13px;margin:2px 0 5px}
  .rutnat:not(.lista) .k-meta{font-size:12.5px}
  .rutnat:not(.lista) .hjarta{width:36px;height:36px}
  .rutnat.lista{grid-template-columns:1fr}
  .rutnat.lista .kort{flex-direction:row}
  .rutnat.lista .k-bild{width:42%;aspect-ratio:1/1;flex-shrink:0}
  .rutnat.lista .k-kropp{padding:10px 12px}
  .rutnat.lista .k-beskr{display:none}
  .k-bild .bildantal{left:6px;bottom:6px}
  .k-titel{margin:0 0 4px}
  .bubbla{max-width:82%}
  .a-huvud h1{font-size:22px}
  .priskort .pris{font-size:28px}
}
@media (min-width:641px){.kopstang{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Snäppet (2026-09-03): Snappats signaturgest – handen knäpper, tre streck flyger ut, "Snappat!"-toast ===== */
.hjarta{overflow:visible}
.hjarta.snappar .i{animation:snapp .45s ease-out}
.hjarta::after{content:"";position:absolute;top:-6px;right:-6px;width:16px;height:16px;opacity:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230e7a4d' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 2v4'/%3E%3Cpath d='M9 4L6.5 6.5'/%3E%3Cpath d='M13 9H9'/%3E%3C/svg%3E") no-repeat center/contain;transform:scale(.4);transform-origin:20% 80%}
.hjarta.snappar::after{animation:klick .5s ease-out}
.hval:hover svg,.bnav a:active svg{animation:snapp .45s ease-out;transform-origin:55% 60%}
@keyframes snapp{0%{transform:rotate(0)}35%{transform:rotate(-14deg)}55%{transform:rotate(6deg)}100%{transform:rotate(0)}}
@keyframes klick{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
.snapp-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--skogdjup,#0a3b27);color:#fff;padding:10px 16px;border-radius:99px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;z-index:120;transition:opacity .2s,transform .25s cubic-bezier(.2,1.4,.4,1);max-width:calc(100% - 32px)}
.snapp-toast.visa{opacity:1;transform:translate(-50%,0)}
.snapp-toast .i{width:18px;height:18px;flex-shrink:0;transform-origin:55% 60%;animation:snapp .45s ease-out}
@media (max-width:760px){.snapp-toast{bottom:calc(72px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.hjarta.snappar .i,.hjarta.snappar::after,.hval:hover svg,.snapp-toast .i{animation:none}}
/* Loggans märke (2026-09-03): grön ruta med vit hand som knäpper vid hover/tryck */
.logga{display:inline-flex;align-items:center;gap:8px}
.logga .lmark{width:32px;height:32px;border-radius:8px;background:var(--skog);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.logga .lmark .i{width:20px;height:20px;stroke-width:2.2;transform-origin:55% 60%}
.logga:hover .lmark .i,.logga:active .lmark .i{animation:snapp .45s ease-out}
@media (max-width:760px){.logga .lmark{width:28px;height:28px}.logga .lmark .i{width:17px;height:17px}}
@media (prefers-reduced-motion:reduce){.logga:hover .lmark .i{animation:none}}

/* ===== 10/10-svep 2026-09-03: tryckytor ≥44 px, Mina annonser på mobil, flikrad med fade, kryssrader vänsterställda ===== */
.sokform input{min-height:44px}
.sokform button{min-height:44px}
.logga{min-height:44px}
.hval{min-height:44px;justify-content:center}
.flik{min-height:44px}
.fot a{padding:8px 0;min-height:36px;display:flex;align-items:center}
.mknapp{padding:9px 14px;font-size:13.5px;min-height:40px;display:inline-flex;align-items:center}
.pager a,.pager span[aria-current],.pager span[aria-disabled]{min-width:40px;height:40px}
.toggle-row{justify-content:flex-start;gap:12px;text-align:left;min-height:44px;padding:8px 0;font-size:14.5px}
.toggle-row input{width:20px;height:20px;flex-shrink:0}
.mina-meny a{min-height:44px}
.mrad-titel{font-size:15.5px}
.mrad-meta{font-size:13.5px}
.k-titel{font-size:14.5px}
@media (max-width:760px){
  .mrad{flex-wrap:wrap}
  .mrad .r-bild{width:96px;height:72px}
  .mrad-mitt{flex:1 1 calc(100% - 130px);min-width:0}
  .mrad-titel a{display:block;overflow-wrap:anywhere}
  .mrad-hoger{flex:1 1 100%;text-align:left;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding-top:8px;border-top:1px solid var(--linje);margin-top:4px}
  .mrad-hoger .mrad-pris{font-size:17px;font-weight:700}
  .mknappar{justify-content:flex-start;margin:0;flex:1 1 100%}
  .mknapp{min-height:44px;flex:1 1 auto;justify-content:center}
  .mina-meny{position:relative;top:auto;scroll-snap-type:x proximity;padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .mina-meny a{scroll-snap-align:start}
  .mina-meny a:last-of-type{margin-right:40px}
}
.fot a{padding:10px 0;min-height:40px}
.mina-meny .logga-ut{font-size:14px;min-height:44px}
.nyflik,.sankt{font-size:12.5px}
.bnav a{font-size:12.5px;color:var(--gra)}
/* steg 2: copy-svep */
.fot-knapp{border:none;background:none;cursor:pointer;color:var(--gra);padding:10px 0;min-height:40px;font-size:inherit;font-family:inherit;display:flex;align-items:center}
.fot-knapp:hover{text-decoration:underline}
.uppger-rad{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.uppger-rad h2{margin:0}
.liten-info{font-size:13.5px;color:var(--gra);margin-top:8px;line-height:1.5}
.form-intro{font-size:14.5px;color:var(--gra);margin-bottom:12px}
.form-hint{font-size:13.5px;color:var(--gra);margin-top:12px;line-height:1.55}
.form-hint a{color:var(--skog);text-decoration:underline}
.profil-namn-badges{display:flex;gap:6px;align-items:center;margin-top:4px}
.etikett-liten{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gra);margin-bottom:4px}
/* tryckytor, sista svepet */
.hjarta{width:40px;height:40px}
.f-topp button,.mh button,.jbort,.fchip .x{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.f-input,select.f-input{min-height:44px}
.galleri .stor .nav{width:44px;height:44px}
.pilknapp{width:44px;height:44px}
.smula a{display:inline-block;padding:10px 3px;margin:-10px -3px}
.katrad a{min-height:44px;display:inline-flex;align-items:center}
.typrad .typ{min-height:44px}
@media (max-width:600px){.fot .wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}.fot .wrap>div:first-child{grid-column:1/-1}.fot .copy{grid-column:1/-1;margin-left:0;padding-top:8px;border-top:1px solid var(--linje)}}
/* Kategoritext (SEO/GEO-block under listan) */
.kat-ingress{color:var(--gra);font-size:14.5px;margin-top:6px;max-width:70ch;line-height:1.55}
.kat-om{background:#fff;border-top:1px solid var(--linje);margin-top:28px;padding:34px 0 40px}
.kat-om .wrap{max-width:760px}
.kat-om h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.kat-om h3{font-size:16px;font-weight:700;margin:22px 0 8px}
.kat-om p{font-size:15px;line-height:1.65;color:var(--text,#2b3330);margin-bottom:12px;max-width:68ch}
.kat-om ul{margin:0 0 6px 20px;font-size:15px;line-height:1.6}
.kat-om li{margin-bottom:4px}
.kat-faq details{border:1px solid var(--linje);border-radius:8px;margin-bottom:6px;padding:0 14px;background:#fff}
.kat-faq summary{cursor:pointer;font-weight:600;font-size:15px;padding:12px 0;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.kat-faq summary::after{content:'+';color:var(--skog);font-weight:700}
.kat-faq details[open] summary::after{content:'–'}
.kat-faq p{padding:0 0 12px;margin:0}
.kat-mer{font-size:14px;color:var(--gra);margin-top:16px}
.kat-mer a{color:var(--skog);font-weight:600;text-decoration:underline}
/* Guider */
.guide-index .ingress,.guide .ingress{max-width:60ch}
.guide-lista{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
@media(max-width:700px){.guide-lista{grid-template-columns:1fr}}
.guide-kort{display:block;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:18px 20px;color:inherit}
.guide-kort:hover{border-color:var(--skog)}
.guide-kort h2{font-size:17px;margin:6px 0 6px;letter-spacing:-.01em;line-height:1.3}
.guide-kort p{font-size:14px;color:var(--gra);line-height:1.55;margin:0 0 10px}
.gk-etikett{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--skog)}
.gk-datum{font-size:12.5px;color:var(--ljusgra)}
.guide-brod h2{font-size:22px;margin:32px 0 10px}
.guide-brod h3{font-size:17px;margin:20px 0 8px}
.guide-brod p,.guide-brod li{font-size:15.5px;line-height:1.7}
.guide-brod p{margin-bottom:14px;max-width:68ch}
.guide-brod ul,.guide-brod ol{margin:0 0 16px 22px}
.guide-brod li{margin-bottom:6px}
.guide-brod a{color:var(--skog);font-weight:600;text-decoration:underline}
.guide-mall{white-space:pre-wrap;font:13.5px/1.55 ui-monospace,Menlo,Consolas,monospace;background:var(--dimma);border:1px solid var(--linje);border-radius:8px;padding:16px 18px;overflow-x:auto;margin:10px 0 18px}
.guide-kallor{font-size:14px;color:var(--gra);border-top:1px solid var(--linje);padding-top:14px;margin-top:26px}
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--skogljus);border-radius:10px;padding:18px 20px;margin:26px 0}
.guide-cta b{display:block;font-size:16px}
.guide-cta span{font-size:14px;color:var(--gra)}
.guide-rutnat{margin-bottom:10px}
.guide-fler{margin:8px 0 30px 20px;font-size:15px;line-height:1.7}
.guide-fler a{color:var(--skog);text-decoration:underline}
.kat-guider{margin:0 0 6px 20px;font-size:15px;line-height:1.7}
.kat-guider a{color:var(--skog);font-weight:600;text-decoration:underline}
.hem-guider{margin:26px 0 18px}
.hg-huvud{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.hg-huvud h2{font-size:20px;letter-spacing:-.02em}
.hg-huvud a{color:var(--skog);font-weight:600;font-size:14px;text-decoration:underline;white-space:nowrap}
.hg-lista{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.hg-lista{grid-template-columns:1fr}}
.hg-kort{display:block;background:#fff;border:1px solid var(--linje);border-radius:10px;padding:14px 16px;color:inherit;min-height:44px}
.hg-kort:hover{border-color:var(--skog)}
.hg-kort b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--skog);margin-bottom:4px}
.hg-kort span{font-size:14.5px;font-weight:600;line-height:1.35}
.guide-sida{max-width:780px;margin:0 auto;padding:22px 0 40px}
.guide-sida h1{font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:10px 0 12px}
.guide-sida .ingress{font-size:17px;line-height:1.6;color:var(--gra);margin:0 0 10px}
.guide-sida .prose-updated{font-size:13px;color:var(--ljusgra);margin:0 0 6px}
.guide-sida>h2,.guide-artikel h2#fragor{font-size:22px;margin:30px 0 10px}
@media(max-width:700px){.guide-sida h1{font-size:25px}.guide-sida .ingress{font-size:16px}}
/* Inkorg: sök, flikar, daggrupper, chips (2026-09-03) */
.inbox-verktyg{padding:0 12px 10px;border-bottom:1px solid var(--linje)}
.inbox-sok{display:flex;align-items:center;gap:8px;border:1px solid var(--linje);border-radius:8px;background:#fff;padding:0 10px;margin-bottom:8px;min-height:40px}
.inbox-sok .i{width:16px;height:16px;color:var(--ljusgra);flex-shrink:0}
.inbox-sok input{border:none;background:none;flex:1;min-width:0;font-size:14.5px;padding:8px 0;outline:none}
.inbox-sok:focus-within{border-color:var(--skog)}
.inbox-flik{padding:0;border-bottom:none;flex-wrap:wrap}
.inbox-flik button .num{margin-left:4px;font-weight:700}
.trad-dag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ljusgra);padding:12px 16px 4px;background:var(--krita);position:sticky;top:0;z-index:1}
.trad-dag.dold{display:none}
.trad .om{display:flex;align-items:center;gap:6px;min-width:0}
.trad .om .omt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.trad .chip{flex-shrink:0;font-size:11.5px;font-weight:700;line-height:1;padding:4px 7px;border-radius:99px;background:#eef1ef;color:var(--gra)}
.trad .chip.r-saljer{background:#e8f1ec;color:var(--skogdjup)}
.trad .chip.r-koper{background:#eaeef8;color:#2f4a8a}
.trad .chip.st-bud{background:var(--varnljus);color:var(--varntext)}
.trad .chip.st-overens{background:var(--skog);color:#fff}
.trad .chip.st-visning{background:#e8f1ec;color:var(--skogdjup)}
.trad .chip.st-sald{background:#e4e8e6;color:var(--gra)}
.trad .sn{display:flex;align-items:center;gap:8px;white-space:normal}
.trad .sn .snt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.trad .sn .ant{flex-shrink:0;background:var(--skog);color:#fff;font-size:11.5px;font-weight:700;min-width:20px;height:20px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.trad .sn .ant.prick{min-width:8px;width:8px;height:8px;padding:0}
.trad.olast::after{display:none}
.trad-alla{display:block;text-align:center;padding:14px;font-size:14px;font-weight:600;color:var(--skog);border-top:1px solid var(--linje)}
.trad-ingen{padding:30px 20px}
@media (max-width:900px){
  .medd.oppen{position:fixed;top:0;left:0;right:0;bottom:0;height:auto;margin:0;z-index:90;border:none;border-radius:0;background:var(--krita);padding-bottom:env(safe-area-inset-bottom)}
  .medd.oppen .konv{height:100%}
  .konv-huvud .tillbaka{font-size:26px;padding:6px 12px 6px 4px;min-width:44px;min-height:44px;display:inline-flex;align-items:center}
}
/* Mobilsvep 2026-09-03: iOS-zoom, bottenmeny, tryckytor, textstorlek, scroll-ledtrådar */
.info{width:22px;height:22px;font-size:12.5px;position:relative;vertical-align:middle}
.info::after{content:"";position:absolute;inset:-11px}
.nyflik{font-size:12.5px}
.gk-etikett{font-size:12.5px}
.trad-dag{font-size:12.5px}
.trad .mini .av{font-size:12.5px}
.trad .chip{font-size:12px}
.mstatus{font-size:12.5px}
.biz-tag{font-size:12.5px}
.tagg{font-size:12.5px}
.bub .t{font-size:12.5px}
.visa-fler{padding:10px 0;min-height:44px;display:inline-flex;align-items:center}
.bevaka{min-height:44px}
.filterknapp{min-height:44px;padding:10px 14px}
.svar button{min-height:40px;padding:8px 14px}
.inbox-flik button{min-height:36px}
.inbox-sok{min-height:44px}
.hg-huvud a{padding:10px 0;display:inline-block}
.lankar a{display:inline-block;padding:12px 0}
.anmal-lank a,.anmal-lank summary{display:inline-block;padding:10px 0}
#filter label{display:flex;align-items:center;gap:9px;min-height:40px;padding:2px 0;cursor:pointer}
#filter label input[type=checkbox]{width:20px;height:20px;margin:0;accent-color:var(--skog)}
.cat-row{min-height:44px;align-items:center}
.katrad,.typrad{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);padding-right:24px}
.katrad:has(> :last-child:hover),.typrad:has(> :last-child:hover){mask-image:none;-webkit-mask-image:none}
@media (max-width:900px){
  body{padding-bottom:84px}
  body:has(.kopstang){padding-bottom:156px}
  .kopstang{bottom:69px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}
  #sokfalt{font-size:16px}
  .affar{padding:8px 12px;gap:0}
  .affar .s{font-size:12.5px;gap:5px}
  .affar .lin{min-width:8px;margin:0 5px}
  .guide-mall{font-size:12.5px;overflow-wrap:anywhere;word-break:break-all}
  .konv-huvud .mer{min-height:40px;display:inline-flex;align-items:center}
  .mina-yta .k{min-height:40px;display:inline-flex;align-items:center}
  .overview h2 a,.mina-inneh h2 a{padding:10px 0;display:inline-block}
}
/* Mobilsvep runda 2: hela annonskortet klickbart, specificitet */
.kort{cursor:pointer}
.k-titel a::after{content:"";position:absolute;inset:0;z-index:1;border-radius:10px}
.kort .hjarta,.kort .k-bra,.kort label,.kort button,.kort .jamfor{position:relative;z-index:2}
.kort .hjarta{position:absolute}
.kort:focus-within{outline:2px solid var(--skog);outline-offset:2px}
.k-bra button.info{width:22px;height:22px;font-size:12.5px}
.k-bild .nyflik{font-size:12.5px}
.vyval button{min-height:36px}
summary.anmal-lank{display:inline-block;padding:10px 0;cursor:pointer}
.mrad-titel a{display:inline-block;padding:6px 0}
.konv-huvud .t a{display:inline-block;padding:5px 0}
.saljare a{display:inline-block;padding:6px 0}
@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{font-size:16px!important}
}
@media (max-width:900px){#sokfalt::placeholder{font-size:15px;text-overflow:ellipsis}#sokfalt{text-overflow:ellipsis}}
/* Kategoritext: lugnare, resten bakom Läs mer (2026-09-04) */
.kat-om{margin-top:22px;padding:26px 0 28px}
.kat-om h2{font-size:19px;margin-bottom:8px}
.kat-om>.wrap>p{font-size:14.5px;color:var(--gra)}
.kat-vik{margin-top:4px}
.kat-vik>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14.5px;font-weight:600;color:var(--skog)}
.kat-vik>summary::-webkit-details-marker{display:none}
.kat-vik>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.kat-vik[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
.kat-vik-inneh{padding-top:8px}
/* Notisbubblan: större och tydligare (2026-09-04) */
.hval .not,.bnav .not{position:absolute;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--rod);color:#fff;font-size:13.5px;font-weight:800;line-height:1;letter-spacing:0;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.18);font-variant-numeric:tabular-nums}
.hval .not{top:-6px;right:-2px}
@media (max-width:900px){.bnav .not{top:-4px;right:calc(50% - 26px)}}
/* Driftmeddelande (Inställningar i admin) och admin-läge (Logga in som) */
.driftrad{background:#fff3cd;color:#5c4400;border-bottom:1px solid #f0d98a;padding:9px 16px;text-align:center;font-size:14px;font-weight:500}
.imprad{background:#0a3b27;color:#fff;padding:8px 16px;text-align:center;font-size:13.5px;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}
.imprad form{display:inline}
.imprad button{background:#fff;color:#0a3b27;border:none;border-radius:6px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer}
/* UX-finputs 2026-09-08 */
.tile .c.tom{color:var(--ljusgra);font-size:13px;font-weight:500}
.stegnu{display:none;font-size:14.5px;font-weight:600;color:var(--skog);margin:-6px 0 14px}
@media(max-width:760px){.stegnu{display:block}}
.losen-wrap{position:relative}
.losen-wrap input{padding-right:64px !important}
.visa-losen{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--skog);padding:8px 10px;min-height:36px;cursor:pointer;border-radius:6px}
.visa-losen:hover,.visa-losen:focus-visible{background:var(--skogljus);outline:none}
.mknappar details.mer{display:inline-block}
.mknappar details.mer summary{list-style:none;cursor:pointer;display:inline-block}
.mknappar details.mer summary::-webkit-details-marker{display:none}
.mknappar details.mer[open] summary{background:var(--dimma)}
.mknappar .mer-inneh{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;width:100%}

/* ===== Bilduppladdaren 2.0 (2026-09-08) ===== */
.bildknappar{display:flex;gap:8px;margin-top:10px}
.bildknappar label{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1.5px solid var(--linje,#d5dbe0);border-radius:10px;font-weight:600;font-size:15px;cursor:pointer;background:#fff;color:var(--black)}
.bildknappar label.prim{background:var(--skog);border-color:var(--skog);color:#fff}
.bildknappar label svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bildknappar input[type=file]{position:absolute;opacity:0;width:0;height:0}
@media(pointer:fine){.bildknappar{display:none}}
@media(pointer:coarse){.bilddrop{display:none}}
.bilddrop.full,.bildknappar.full{display:none}
.bildgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin-top:12px}
.bildkort{width:auto;height:auto;aspect-ratio:4/3;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border-radius:8px}
.bildkort:first-child{grid-column:span 2;grid-row:span 2}
.bildkort.dras{opacity:.35}
.bildkort.mal{outline:3px solid var(--skog);outline-offset:-3px}
.bildghost{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 12px 32px rgba(0,0,0,.35);transform:scale(1.05);opacity:.95;border-radius:8px;overflow:hidden}
.bildbar{position:absolute;left:8px;right:8px;bottom:8px;height:6px;border-radius:3px;background:rgba(255,255,255,.55);overflow:hidden;z-index:2}
.bildbar i{display:block;height:100%;width:0;background:var(--skog);transition:width .15s}
.bildvarn{position:absolute;left:4px;top:4px;background:rgba(180,83,9,.92);color:#fff;font-size:11px;font-weight:700;border-radius:3px;padding:1px 6px;z-index:2;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bildkort:first-child .bildvarn{top:26px}
.bildflytt{position:absolute;bottom:2px;right:2px;display:none;gap:2px;z-index:3}
.bildflytt button{width:26px;height:26px;border-radius:5px;border:none;background:rgba(255,255,255,.95);font-size:16px;line-height:1;color:#333;padding:0}
@media(pointer:coarse){.bildflytt{display:flex}.bildverktyg button{width:28px;height:28px;font-size:15px}}
.bildtips{margin-top:8px;font-size:13.5px;color:var(--gra)}
.bildtoast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);background:#1f2937;color:#fff;padding:10px 14px;border-radius:10px;font-size:14px;display:flex;gap:14px;align-items:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:9000;box-shadow:0 8px 24px rgba(0,0,0,.25);white-space:nowrap}
.bildtoast.pa{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.bildtoast button{background:none;border:none;color:#86efac;font-weight:700;font-size:14px;cursor:pointer;padding:0}

/* ===== Chatt 2.0 (2026-09-08) ===== */
.konv-huvud{gap:10px;padding:10px 14px}
.konv-huvud .mini .av{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-weight:700;color:#fff;background:var(--skogdjup);font-size:15px}
.konv-huvud .t b .betyg{font-weight:600;color:var(--gra);font-size:13px;margin-left:4px}
.konv-huvud .t .skriver{display:block;color:var(--skog);font-weight:600;font-size:13px}
.konv-huvud .t .skriver i{font-style:normal;animation:cprick 1.2s infinite}
.konv-huvud .t .skriver i:nth-child(2){animation-delay:.2s}.konv-huvud .t .skriver i:nth-child(3){animation-delay:.4s}
@keyframes cprick{0%,60%,100%{opacity:.2}30%{opacity:1}}
.konv-meny{position:relative;margin-left:auto}
.konv-meny .mer.ikon{width:40px;height:40px;padding:0;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:8px}
.konv-meny .meny{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--linje);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14);min-width:230px;padding:6px;z-index:50;display:flex;flex-direction:column}
.konv-meny .meny a,.konv-meny .meny button{text-align:left;background:none;border:none;padding:10px 12px;border-radius:7px;font-size:14.5px;color:var(--black);cursor:pointer;font-family:inherit}
.konv-meny .meny a:hover,.konv-meny .meny button:hover{background:var(--krita)}
.konv-meny .meny .farlig{color:#b42318}
.bubblor{background:var(--krita);padding:14px 16px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:320px}
.bubblor .trygg{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--gra);background:#fff;border:1px solid var(--linje);border-radius:10px;padding:8px 12px;margin-bottom:4px}
.bubblor .trygg .i{width:16px;height:16px;color:var(--skog);flex-shrink:0;margin-top:1px}
.bubblor .trygg a{color:var(--skog);font-weight:600}
#medd-lista{display:flex;flex-direction:column;gap:6px}
.bub{max-width:76%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.bub.dem{background:#fff;border:1px solid var(--linje);border-bottom-left-radius:6px}
.bub.jag{background:var(--skog);color:#fff;border-bottom-right-radius:6px}
.bub .t{display:block;font-size:11.5px;opacity:.65;margin-top:3px;text-align:right}
.bub+.bub.dem,.bub+.bub.jag{margin-top:-2px}
.bub.bild{padding:4px;max-width:min(76%,340px);background:#fff;border:1px solid var(--linje)}
.bub.bild.jag{background:var(--skog);border-color:var(--skog)}
.bub.bild a{display:block;border-radius:14px;overflow:hidden;cursor:zoom-in}
.bub.bild img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover}
.bub.bild .t{padding:0 8px 4px}
.last{align-self:flex-end;font-size:12px;color:var(--ljusgra);margin-top:-4px;margin-right:4px}
.m-sys{align-self:center;display:flex;align-items:center;gap:8px;max-width:88%;background:#e9eeeb;color:var(--gra);border-radius:99px;padding:6px 14px;font-size:13px;text-align:center;margin:4px 0}
.m-sys time{font-size:11.5px;opacity:.7;white-space:nowrap}
.m-traff{align-self:center;width:min(100%,380px);background:#fff;border:1.5px solid var(--skog);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:start;margin:4px 0}
.m-traff .ik{width:36px;height:36px;border-radius:50%;background:var(--skogljus);display:flex;align-items:center;justify-content:center}
.m-traff .ik .i{width:18px;height:18px;color:var(--skog)}
.m-traff b{display:block;font-family:var(--disp);font-size:15px;font-weight:600}
.m-traff .plats,.m-traff .nar{display:block;font-size:14px;color:var(--black)}
.m-traff .nar{color:var(--gra)}
.m-traff time{font-size:11.5px;color:var(--ljusgra)}
.m-traff .knappar{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.m-traff .knappar button{border-radius:8px;padding:8px 14px;font-weight:600;font-size:13.5px;border:1.5px solid var(--skog);background:#fff;color:var(--skog);cursor:pointer;font-family:inherit}
.m-traff .knappar .p{background:var(--skog);color:#fff}
.m-traff .knappar .g{border-color:var(--linje);color:var(--gra)}
.m-traff.st-accepted{border-color:var(--skog);background:var(--skogljus)}
.m-traff.st-declined,.m-traff.st-withdrawn{border-color:var(--linje);opacity:.75}
.skriver-bub{align-self:flex-start;background:#fff;border:1px solid var(--linje);border-radius:18px;border-bottom-left-radius:6px;padding:10px 14px;display:flex;gap:4px}
.skriver-bub i{width:7px;height:7px;border-radius:50%;background:var(--gra);animation:cprick 1.2s infinite}
.skriver-bub i:nth-child(2){animation-delay:.2s}.skriver-bub i:nth-child(3){animation-delay:.4s}
.blockrad{background:#fef3c7;color:#92400e;padding:10px 16px;font-size:14px;text-align:center;border-top:1px solid #fcd34d}
.skriv{gap:8px;padding:10px 12px 12px;align-items:flex-end}
.skriv .kam{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--linje);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;background:#fff;color:var(--gra)}
.skriv .kam:hover{border-color:var(--skog);color:var(--skog)}
.skriv .kam svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skriv .kam input{position:absolute;opacity:0;width:0;height:0}
.skriv textarea{height:44px;max-height:160px;border-radius:22px;padding:11px 16px;font-size:15px;line-height:1.4;overflow-y:auto}
.skriv button[type=submit] svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;margin-left:2px}
.skriv button[type=submit]:disabled{opacity:.5}
.cmodal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:400;padding:16px}
.cmodal-ruta{background:#fff;border-radius:16px;padding:20px;width:min(100%,440px);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cmodal-ruta h3{margin:0 0 4px;font-family:var(--disp);font-size:19px}
.cmodal-ruta .hj{margin:0 0 14px;color:var(--gra);font-size:14px}
.cmodal-ruta label{display:block;font-size:13.5px;font-weight:600;margin-top:10px}
.cmodal-ruta input,.cmodal-ruta select,.cmodal-ruta textarea{display:block;width:100%;margin-top:4px;border:1.5px solid #cfd6d2;border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;min-height:44px}
.cmodal-ruta .rad{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmodal-ruta .knappar{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.cmodal-ruta .knappar button{border-radius:10px;padding:10px 16px;font-weight:600;font-size:14.5px;border:1.5px solid var(--linje);background:#fff;color:var(--gra);cursor:pointer;font-family:inherit;min-height:44px}
.cmodal-ruta .knappar .p{background:var(--skog);border-color:var(--skog);color:#fff}
.cbild{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:500;cursor:zoom-out;padding:12px}
.cbild img{max-width:100%;max-height:100%;border-radius:8px}
@media(max-width:760px){
  .medd.oppen .inbox{display:none}
  .konv-huvud .t > span:not(.skriver){display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .konv-huvud .t > span span{display:inline}
  .bub{max-width:84%}
  .bubblor{min-height:0}
}

/* ===== Filter: valknappar (Drivmedel, Växellåda, Säljare) — egna, tydliga regler (2026-09-08) ===== */
.f-grupp .piller{display:flex;flex-wrap:wrap;gap:8px;padding:0}
#filter .piller label,.f-grupp .piller label{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;min-height:38px;padding:0 14px;margin:0;border:1.5px solid var(--linje,#d5dbe0);border-radius:8px;background:#fff;color:var(--black);font-size:14px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap}
.f-grupp .piller label:hover{border-color:var(--skog)}
#filter .piller label:has(input:checked),.f-grupp .piller label:has(input:checked){background:var(--skog);border-color:var(--skog);color:#fff;font-weight:600}
.f-grupp .piller label:has(input:focus-visible){outline:2px solid var(--skog);outline-offset:2px}
.f-grupp .piller label input{position:absolute;opacity:0;width:0;height:0;margin:0}
@media(pointer:coarse){#filter .piller label,.f-grupp .piller label{min-height:44px;padding:0 16px}}

/* ===== Nya märket: kartnålen (2026-09-09). Handen (#s-snapp) är kvar som Sparade-ikon. ===== */
.logga .lmark{width:auto;height:32px;background:none;border-radius:0;color:inherit}
.logga .lmark .i.nal{width:22px;height:32px;stroke:none;fill:none;transform-origin:50% 100%}
.logga:hover .lmark .i.nal,.logga:active .lmark .i.nal{animation:nalstuds .45s ease-out}
@keyframes nalstuds{0%{transform:translateY(0)}35%{transform:translateY(-3px) scale(1.04)}70%{transform:translateY(1px)}100%{transform:translateY(0)}}
@media (max-width:760px){.logga .lmark{width:auto;height:28px}.logga .lmark .i.nal{width:19px;height:28px}}

/* Knappar inne i prosa-sidor (t.ex. /foretag) ska inte ärva länkfärgen */
.omsida.prose a.btn-primary{color:#fff;text-decoration:none}

/* --- Finputs 2026-09-09: mindre ram, mer varor --- */
.hem-lan{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gra)}
.hem-lan select{border:1px solid #ccc;border-radius:6px;padding:8px 10px;font:inherit;font-size:14px;background:#fff;max-width:220px}
.senaste .sektion-huvud{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.senaste .sektion-huvud h2{font-size:22px;font-weight:700;letter-spacing:-.02em}
.senaste .sektion-huvud .mer{color:var(--skog);font-weight:600;text-decoration:underline}
.senaste{margin:18px 0 34px}
.uppger-tom{margin:14px 0 4px}
.a-fot{font-size:12.5px;color:var(--ljusgra);margin-top:14px}
.a-sida .rapportera{margin-top:6px}
@media (max-width:640px){
  .start-hero{padding:18px 0 12px}
  .hem-lan{width:100%}
  .hem-lan select{flex:1;max-width:none}
  .senaste .sektion-huvud h2{font-size:19px}
  /* kategorisidan: en rad med antal, filter och sortering */
  .res-topp{flex-wrap:nowrap}
  .res-topp .antal .nya{display:none}
  .sortera{width:auto;margin-left:auto;flex-wrap:nowrap}
  .sortera .lbl{display:none}
  .sortera form{flex:0 1 auto}
  .sortera select{max-width:140px;padding:7px 6px;font-size:12.5px}
  .vyval{display:none}
  .k-jamfor{display:none}
  /* annonssidan: priset står redan överst och i köpstången */
  .priskort .pris,.priskort .prisrad2{display:none}
  .a-sida{min-height:0}
  /* säljflödet: fortsätt-knappen alltid inom räckhåll */
  .navrad{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));background:#fff;margin:18px -14px 0;padding:10px 14px;border-top:1px solid var(--linje);z-index:5}
  .navrad .fram{flex:1}
}
@media (max-width:640px){
  .annons{padding-bottom:16px}
  body:has(.kopstang) .liknande{padding-bottom:96px}
}
.kpi-privat{grid-template-columns:repeat(2,1fr)}

/* Säljsteg 1: kategorirutor i stället för att leta i rullistan */
.kat-val{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 10px}
.kat-knapp{background:#fff;border:1.5px solid var(--linje);border-radius:8px;padding:10px 10px 8px;font:inherit;font-size:14px;font-weight:600;color:var(--black);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;min-height:44px}
.kat-knapp svg{width:56px;height:28px;color:var(--gra)}
.kat-knapp[aria-pressed=true]{border-color:var(--skog);background:var(--skogljus);color:var(--skog)}
.kat-knapp[aria-pressed=true] svg{color:var(--skog)}
.kat-under{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:10px;background:var(--krita);border-radius:8px}
.kat-knapp.liten{padding:8px 12px;font-size:13.5px;font-weight:500;min-height:38px;flex-direction:row}
.kat-select label{font-size:12.5px;color:var(--gra)}
@media (max-width:640px){.kat-val{grid-template-columns:repeat(2,1fr)}}
.fototips{font-size:13.5px;color:var(--gra);margin:8px 0 4px}

/* Säljflödet, enklare (2026-09-10) */
.kat-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px solid var(--skog);background:var(--skogljus);border-radius:8px;padding:12px 14px;margin:4px 0 16px;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--skog)}
.kat-sum button{background:none;border:none;color:var(--skog);font:inherit;font-size:13.5px;text-decoration:underline;cursor:pointer;padding:4px 0}
.sammanfattning{display:flex;flex-direction:column}
.sammanfattning div{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--linje);font-size:14px}
.sammanfattning div:first-child{border-top:none;padding-top:0}
.sammanfattning b{width:84px;flex-shrink:0;font-family:var(--disp);font-weight:600}
.sammanfattning span{flex:1;color:var(--gra)}
.sammanfattning button{background:none;border:none;color:var(--skog);font:inherit;font-size:13.5px;font-weight:600;text-decoration:underline;cursor:pointer;padding:6px 0}
.pubnot{margin-top:18px;font-size:13.5px;color:var(--gra)}
.navrad .fram.pub{background:var(--skog)}
.navrad .fram.pub:hover{background:var(--skogmork)}
.bildvantar{display:none;margin-top:8px}
.bildvantar.pa{display:block}
@media (max-width:760px){
  .salj-yta h1{font-size:28px;margin:18px 0 10px}
  .salj-yta.inne .ingress{display:none}
  .salj-yta .steg{margin:14px 0 14px}
  #vehicle-fields .tva{flex-direction:row;gap:10px}
  .dekl .svarkort{grid-template-columns:1fr 1fr}
  .dekl .svarkort.kompakt{grid-template-columns:repeat(3,1fr)}
  .dekl .svarkort label{padding:9px 10px;font-size:12.5px}
  .dekl .svarkort label b{font-size:14px}
  .dfraga{padding:12px 0}
  .kat-knapp{padding:8px 8px 6px;font-size:13.5px}
  .kat-knapp svg{width:48px;height:24px}
}

/* Kategorival i säljflödet: lista med rader */
.kat-lista{display:flex;flex-direction:column;border:1px solid var(--linje);border-radius:8px;overflow:hidden;background:#fff;margin:4px 0 16px}
.kat-rad{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--linje);padding:12px 14px;min-height:48px;font:inherit;font-size:15px;font-weight:500;color:var(--black);cursor:pointer}
.kat-rad:first-child{border-top:none}
.kat-rad:hover{background:var(--krita)}
.kat-rad span{color:var(--ljusgra);font-size:20px;line-height:1}
.kat-rad.bak{color:var(--skog);font-weight:600;background:var(--krita)}