/* PepDix – shared styles (nav, footer, tokens, page head) */
:root{
  /* EN sanning om bottenmenyns höjd. Sju olika gissningar (60/64/73/80/84/96/
     176px) fanns i koden — allt som ska ligga OVANFÖR menyn räknar härifrån. */
  --bottenmeny: calc(60px + env(safe-area-inset-bottom));
  --brand-1:#2563EB;--brand-2:#7C3AED;
  --brand-grad:linear-gradient(135deg,#2563EB 0%,#7C3AED 100%);
  --bg:#FAFAF7;--surface:#fff;--surface-2:#F4F3EE;--surface-tint:#EFEEFF;
  --ink:#0A0A0C;--ink-2:#2A2A30;--muted:#6B6B73;
  --line:rgba(10,10,12,.08);--line-strong:rgba(10,10,12,.14);
  --ok:#0F7A2E;--warn:#B45309;--err:#DC2626;   /* WCAG: 34C759 gav 2,1:1 som text, EF4444 3,9:1 — mörkare toner klarar 4,5:1 */
  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:24px;--r-2xl:32px;--r-pill:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.55}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
.tap,button{transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .25s var(--ease);-webkit-tap-highlight-color:transparent}
button:active,.tap:active{transform:scale(.98)}
.shell{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(250,250,247,.85);backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid var(--line)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.01em}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--brand-grad);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
.nav-links{display:flex;gap:4px;justify-content:center}
.nav-link{padding:8px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;position:relative}
.badge-new{position:absolute;top:-2px;right:-2px;background:var(--brand-2);color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;padding:2px 5px;border-radius:4px;pointer-events:none}
.nav-link:hover{background:var(--surface-2)}
.nav-link.active{background:var(--ink);color:var(--bg)}
.nav-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.icon-btn{width:40px;height:40px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.icon-btn:hover{background:var(--surface-2)}
.cart-btn{background:var(--ink);color:var(--bg);height:40px;padding:0 16px;gap:8px;font-size:13px;font-weight:500;border-radius:var(--r-pill);display:inline-flex;align-items:center}
.cart-count{background:#fff;color:var(--ink);min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;color:#fff}
@media(max-width:900px){.nav-links{display:none}.nav-inner{grid-template-columns:1fr auto;height:56px}.cart-label{display:none}.cart-btn{padding:0;width:40px;justify-content:center}}

/* crumb */
/* Brödsmula: sentence case, 13 px — mono-versaler i 10 px var den etikettstil auditen 2026-09-12 pekade ut som orolig. */
.crumb{font-family:inherit;font-size:13px;letter-spacing:0;color:var(--muted);text-transform:none;padding:20px 0 4px}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--ink)}

/* page head */
.phead{padding:8px 0 28px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:flex-end}
/* QA 2026-09-28: .shell med margin:auto som rutnätsbarn krympte till innehållet och
   centrerades — shoppens och kassans rubrik låg inte i linje med sidan under */
.phead>.shell{width:100%;box-sizing:border-box;grid-column:1/-1}
/* Brödsmulor och info-chips i samma typsnitt överallt (några sidor hade mono + versaler) */
.crumb{font-family:var(--font-body)!important;text-transform:none!important;letter-spacing:0!important}
.phead .chip,.phead .hints .chip{font-family:var(--font-body)!important;letter-spacing:0!important}
@media(max-width:820px){.phead{grid-template-columns:1fr}}
.phead h1{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:-.03em;line-height:1;margin:0 0 12px;text-wrap:balance}
.phead h1 em{font-style:normal;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.phead .sub{color:var(--muted);font-size:15px;max-width:580px;margin:0;text-wrap:pretty}
.phead .hints{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:12px;font-weight:500;color:var(--ink-2);font-family:var(--font-mono);letter-spacing:.02em}
.chip svg{color:var(--brand-2)}

/* footer */
footer{background:var(--surface-2);padding:48px 0 36px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:64px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px}
@media(max-width:780px){.foot{grid-template-columns:1fr 1fr;gap:24px}}
.foot h5{font-family:var(--font-display);font-size:13px;font-weight:600;margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
.foot a{display:block;padding:3px 0;color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot-b{max-width:320px;font-size:12px;line-height:1.55}
.foot-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:12px;color:var(--ink)}
.foot-legal{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;font-size:11px;flex-wrap:wrap;gap:14px;font-family:var(--font-mono);letter-spacing:.04em;color:var(--muted)}
.foot-legal a:hover{color:var(--ink)}

/* generic utility */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:11px;font-weight:600;color:var(--ink-2);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-pill);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer}
.btn.p{background:var(--ink);color:var(--bg)}
.btn.s{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.btn.s:hover{background:var(--surface-2)}
.btn.grad{background:var(--brand-grad);color:#fff}

/* V1.0g — Alias för kunskapsbank-artiklar (använder gamla --color-* namn) */
:root{
  --color-primary:#2563EB;
  --color-text:#0A0A0C;
  --color-text-secondary:#6B6B73;
  --color-surface:#fff;
  --color-border:rgba(10,10,12,.08);
  --color-bg:#FAFAF7;
}

/* Global compactness (V3.0.7) — tighter spacing on ALL pages. !important så det slår inline style i design-filer. */
body{font-size:15px!important}
.phead{padding:4px 0 18px!important}
.phead h1{font-size:clamp(1.7rem,4.2vw,2.6rem)!important;margin:0 0 8px!important}
.phead .sub{font-size:14px!important}
.crumb{padding:14px 0 2px!important;font-size:13px!important}
footer{padding:28px 0 20px!important;margin-top:36px!important}
.foot{gap:24px!important}
.foot-legal{margin-top:24px!important;padding-top:14px!important}
.nav-inner{height:72px!important}
.hero{padding-top:clamp(20px,3vw,36px)!important;padding-bottom:clamp(16px,3vw,28px)!important}
/* Bara lodrätt — 'margin:X 0' nollade margin:auto på centrerade sektioner (kvittots värva-ruta låg i kant). */
section{margin-top:clamp(40px,6vw,80px)!important;margin-bottom:clamp(40px,6vw,80px)!important}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)!important}
@media(max-width:900px){.nav-inner{height:60px!important}}

/* ========================================================================
   V3.0.9 — MOBIL-RESPONSIV PASS (global overrides)
   V3.1.3 FIX — overflow-x på html bryter scroll på iOS; flytta till body + clip
   ======================================================================== */
body{overflow-x:hidden;max-width:100vw;position:relative}

@media(max-width:820px){
  button,.tap,.btn,.nav-link,.chip,.pill,a.btn{min-height:44px}
  .icon-btn{width:44px!important;height:44px!important}
  .cart-btn{height:44px!important;width:44px!important}
  input,select,textarea{min-height:44px;font-size:16px!important}
  .nav-inner{height:60px!important;padding:0!important}
  .logo{font-size:15px!important}
  .logo-mark{width:24px!important;height:24px!important;font-size:11px!important}
  .cart-count{min-width:18px!important;height:18px!important;font-size:10px!important;padding:0 5px!important}
}

@media(max-width:640px){
  .shell{padding:0 16px!important}
  .phead{padding:2px 0 14px!important;gap:12px!important}
  .phead h1{font-size:clamp(1.5rem,6vw,2rem)!important;margin:0 0 6px!important;line-height:1.05!important}
  .phead .sub{font-size:13.5px!important}
  .phead .hints{gap:6px!important;flex-wrap:wrap}
  .chip{font-size:12px!important;padding:5px 10px!important}
  .crumb{padding:10px 0 2px!important;font-size:13px!important;letter-spacing:0!important}
  .btn{height:46px!important;padding:0 18px!important;font-size:13.5px!important}
  .btn.p,.btn.grad{width:100%;max-width:360px}
  h1{font-size:clamp(1.4rem,5.5vw,2rem)!important}
  h2{font-size:clamp(1.25rem,4.5vw,1.6rem)!important}
  h3{font-size:clamp(1.1rem,3.8vw,1.3rem)!important}
  section{margin-top:clamp(28px,7vw,44px)!important;margin-bottom:clamp(28px,7vw,44px)!important}
  .grid,.product-grid{gap:12px!important}
}

@media(max-width:540px){
  .foot{grid-template-columns:1fr!important;gap:20px!important}
  .foot-legal{flex-direction:column;align-items:flex-start!important;gap:8px!important;font-size:12px!important}
  footer{padding:24px 0 20px!important;margin-top:24px!important}
  .foot-b{max-width:100%!important}
}

img,svg,video{max-width:100%;height:auto}
table{max-width:100%;overflow-x:auto;display:block}
:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px;border-radius:4px}

@supports(-webkit-touch-callout:none){
  input[type=text],input[type=email],input[type=number],input[type=tel],input[type=password],select,textarea{font-size:16px!important}
}

/* V1.6.7: iOS-fixar — SCROLL-SÄKRA */
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}
button,a{touch-action:manipulation}
/* V1.6.7 hade img{-webkit-user-drag:none} här — borttagen 2026-08-15 på
   ägarens begäran: kunder ska kunna kopiera/spara produktbilderna. */
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
/* V1.6.9: overflow-x:clip förhindrar horisontell scroll på mobil utan att
   låsa vertikal scroll (säkrare än overflow-x:hidden som låste scroll). */
body{overflow-x:clip}
/* Bottenmenyn visas nu upp till 900px — samma brytpunkt som desktopmenyn
   göms vid. Tidigare fanns en död zon 769–900px (iPad stående) helt utan
   navigering: desktopmenyn dold, bottenmenyn inte påslagen. */
@media(max-width:900px){
  body{padding-bottom:var(--bottenmeny)}
}
@media(max-width:768px){
  .btn,button,.tap,a[class*=btn]{min-height:44px}
  h1{font-size:clamp(1.6rem,7vw,2.2rem)!important;line-height:1.15!important}
  h2{font-size:clamp(1.3rem,5vw,1.7rem)!important;line-height:1.2!important}
}

/* En fast list åt gången på mobil: när produktsidans köprad (.fm-sticky) är
   uppe glider bottenmenyn ner och köpraden tar dess plats. */
@media(max-width:900px){
  .bottom-tabs{transition:transform .25s ease}
  /* QA 2026-09-28: 110 % räckte inte — mittknappen sticker upp ~30 px över menyn och syntes under köpraden */
  body.px-sticky-kop .bottom-tabs{transform:translateY(calc(100% + 56px))}
  body.px-sticky-kop .fm-sticky{bottom:calc(12px + env(safe-area-inset-bottom))!important}
  body.px-sticky-kop #wlSupportWrap{bottom:calc(84px + env(safe-area-inset-bottom))!important}
}
/* Tapytor på mobil (auditen 2026-09-12): sidfotslänkar och brödsmulor var
   15–19 px höga — tumfelen hamnar på grannlänken. Luft, inte större text. */
@media(max-width:900px){
  .px-foot-col a{padding:6px 0;margin-bottom:2px}
  .pp-bc a,.crumb a{display:inline-block;padding:8px 2px;margin:-8px 0}
  .sideNav-links a{min-height:44px}
}
/* ── BOTTOM TABS (mobil only) ── */
.bottom-tabs{display:none}
@media(max-width:900px){
  .bottom-tabs{display:block;position:fixed;bottom:0;left:0;right:0;z-index:90;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bottom-tabs-inner{display:flex;justify-content:space-around;align-items:center;max-width:540px;margin:0 auto}
  .btab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.01em;position:relative;text-decoration:none;min-height:48px;justify-content:center}
  .btab.active{color:var(--ink)}
  .btab-icon{line-height:1;display:flex;align-items:center;justify-content:center}
  .btab-icon svg{width:21px;height:21px}
  .btab.active .btab-icon svg{stroke-width:2.2}
  .btab-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  @media(max-width:379px){.btab-label{font-size:10px;letter-spacing:0}}
  .btab-badge{position:absolute;top:4px;right:calc(50% - 18px);background:var(--brand-1);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;min-width:16px;text-align:center;line-height:1.4}
  /* OBS: ingen body{padding-bottom} här — raden 64px låg EFTER safe-area-
     calcen med samma specificitet och nollade den på varje iPhone. */
}

/* ── TELEGRAM FLOATING BUTTON ── */
.tg-float-wrap{position:fixed;bottom:24px;right:24px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
@media(max-width:900px){
  .tg-float-wrap{bottom:calc(var(--bottenmeny) + 20px);right:16px}
}
.tg-float-btn{width:56px;height:56px;border-radius:50%;background:#0088cc;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px -6px rgba(0,136,204,.5),0 4px 12px -2px rgba(10,10,12,.2);cursor:pointer;border:none;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.tg-float-btn:hover{transform:scale(1.06);box-shadow:0 12px 32px -6px rgba(0,136,204,.6),0 6px 16px -2px rgba(10,10,12,.25)}
.tg-float-btn:active{transform:scale(.96)}
.tg-float-btn svg{width:28px;height:28px}
.tg-float-icon-close{display:none}
.tg-open .tg-float-icon-open{display:none}
.tg-open .tg-float-icon-close{display:block}
.tg-float-menu{display:none;background:#1a1d24;color:#fff;border-radius:16px;padding:18px;min-width:280px;box-shadow:0 16px 48px -8px rgba(10,10,12,.4),0 8px 20px -4px rgba(10,10,12,.2);transform:translateY(8px) scale(.96);opacity:0;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.tg-open .tg-float-menu{display:block;transform:translateY(0) scale(1);opacity:1}
.tg-float-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#fff;margin-bottom:6px;transition:background .15s var(--ease)}
.tg-float-opt:hover{background:rgba(255,255,255,.08)}
.tg-float-opt:last-child{margin-bottom:0}
.tg-float-opt strong{color:#fff;font-size:14px;font-weight:600}

/* ── REVEAL ANIMATIONS ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}

@media print{.bottom-tabs,.tg-float,.exit-modal,.cookie-bar{display:none !important}}

/* ---- Penna i 3D (produktsidor för Reta/Tirza/Sema-pennor) ----
   Byggs parametriskt i js/penna3d.js. three.js hämtas först vid klick, så
   sidans LCP påverkas inte. */
.p3{position:relative;border:1px solid rgba(10,10,12,.09);border-radius:16px;
    background:linear-gradient(180deg,#F6F3EF 0%,#EFEAE4 100%);overflow:hidden;margin:6px 0 0}
.p3-duk{height:420px;touch-action:pan-y}
.p3-duk.drar{cursor:grabbing}
.p3.kor .p3-duk{cursor:grab}
.p3-duk canvas{display:block;width:100%;height:100%}
.p3-start{position:absolute;inset:0;width:100%;border:0;background:transparent;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    font:600 14px Inter,system-ui,sans-serif;color:#0A0A0C}
.p3-start:hover{background:rgba(232,89,12,.04)}
.p3-start:disabled{cursor:default}
.p3-start b{display:block;font-size:15px}
.p3-start span{font-weight:500;font-size:12.5px;color:#6B6B73}
.p3-verktyg{position:absolute;left:0;right:0;bottom:0;display:flex;gap:6px;justify-content:center;
    padding:10px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.72))}
.p3-verktyg button{border:1px solid rgba(10,10,12,.12);background:#fff;border-radius:999px;
    padding:7px 13px;font:600 12px Inter,system-ui,sans-serif;color:#0A0A0C;cursor:pointer}
.p3-verktyg button:hover{border-color:#E8590C;color:#E8590C}
.p3-not{margin:8px 0 0;font-size:12px;color:#6B6B73;line-height:1.5}
@media(max-width:760px){.p3-duk{height:320px}}

/* ---- 3D-pennans utpekade delar och doseringsfakta ----
   Etiketterna ar HTML ovanpa duken, inte text i scenen: da forblir de skarpa vid
   varje zoom, gar att lasa av skarmlasare och kan brytas till mobilbredd. */
.p3{position:relative}
.p3-etiketter{position:absolute;inset:0;pointer-events:none}
.p3-etiketter.av{display:none}
.p3-etikett{position:absolute;top:0;left:0;max-width:172px;padding:6px 9px;border-radius:9px;
  background:rgba(255,255,255,.95);border:1px solid rgba(10,10,12,.1);
  box-shadow:0 2px 8px -2px rgba(10,10,12,.16);transition:opacity .18s}
.p3-etikett b{display:block;font:600 11.5px/1.25 'Inter',system-ui,sans-serif;color:#0A0A0C}
.p3-etikett span{display:block;font:500 10.5px/1.35 'Inter',system-ui,sans-serif;color:#6B6B73;margin-top:1px}
.p3-etikett.bakom{opacity:.28}
.p3-fakta{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:1px;
  background:rgba(10,10,12,.08);border-top:1px solid rgba(10,10,12,.08)}
.p3-fakta div{background:#FAFAF7;padding:10px 12px}
.p3-fakta b{display:block;font:600 10px/1 'Inter',system-ui,sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:#8A8A92;margin-bottom:3px}
.p3-fakta span{font:600 14px/1.2 'Inter',system-ui,sans-serif;color:#0A0A0C}
@media(max-width:560px){.p3-etikett{max-width:132px;padding:5px 7px}
  .p3-etikett span{display:none}}

/* ═══ MENYKNAPPARNA — grund. Menyn 7.1 (header, bottenmeny, panel) ligger sist i filen. ═══ */
.nav-kur,.nav-shop,.btab-kur,.btab-shop{background:none;border:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;color:inherit}

/* ═══ PRODUKTKORTEN V8.96 — Apples valrutor och glaset (KN 2026-10-11) ═══════════════════════
   KN: "ja gillar design A, men ha en mini box med alla priser för mg o st pris som apple hade designat", "gör de
   snyggare … gissa inte utan gör de ordenligt" → mockupen agent/mockuper/v8.94-produktkort/runda9.html ("Okej kör"),
   och "kan du göra produkt korten lite mörkare typ som glas? lite tonade apple design" → runda10.html.
   Uppifrån: bilden 6:5 med analysen · raden ovanför namnet (kampanjen lila, lagret i bärnsten; platsen står kvar) ·
   namnet med storleken i grått · priset med strykpris · APPLES VALRUTOR · raden under rutorna (kr/mg, var det är
   lägst, vad man sparar) · Köp (gradienten — CLAUDE.md: primära köpknappar) och "Läs mer ›". Köp öppnar KÖPARKET
   (längst ner i blocket). Två kort i bredd i telefonen (KN: "inte bara en gigantisk kort per rad i mobilen utan 2 st").
   MÄTT, INTE GISSAT: Apples valrutor (apple.com/se/shop AirTag/iPad/Watch 2026-10-11): ram 1 px #86868b, hörn 12 px,
   vald ram 2 px #0071e3 (luften 1 px mindre, rutan växer inte), namnet halvfet, priset normal, båda #1d1d1f, rutans yta
   rgba(255,255,255,.8). Apples HIG: minst 11 pt text, minst 28 × 28 pt tryckyta, kontrast 4,5:1 upp till 17 pt.
   GLASET: HIG Materials — "Don't use Liquid Glass in the content layer … use standard materials" → korten är frostat,
   tonat glas (oskärpa + mättnad) på sajtens Glas 5.0-bakgrund. KN valde ur tre styrkor (runda 10):
     A Frostat  --kort-yta:rgba(255,255,255,.62); --kort-blur:blur(28px) saturate(1.5); --kort-kant:rgba(255,255,255,.85); grått #6e6e73, länk #0066cc
     B Tonat ★  --kort-yta:rgba(232,232,237,.5);  --kort-blur:blur(20px) saturate(1.8); --kort-kant:rgba(255,255,255,.55); grått #57575c, länk #0057b0, lagret #92400E
     C Rökglas  --kort-yta:rgba(29,29,31,.8);     --kort-blur:blur(20px) saturate(1.8); vit text, grått rgba(235,235,245,.72), länk #8cc4ff
   KN valde B ("Kör B", 2026-10-11). Grått, länkblått och lagrets bärnsten är valda så att kontrasten mätt i de RENDERADE
   pixlarna på shop, start och en kategorisida (glaset blandas med Glas 5.0-bakgrunden, så den räknas på riktigt) är
   minst 4,5:1 vid 390 och 1 280 px — mätt i Playwright 2026-10-11 (REGLER, avsnittet Produktkorten V8.96). Markupen: pxKort() i js/kortextra.js = agent/kategorisynk.py kort_html (ettkorttest G).
   Scopat till .product-grid: ops/admin/planera har egna .card-klasser. */
.product-grid{row-gap:22px!important;padding-bottom:6px}
@media(max-width:640px){.product-grid{gap:16px 12px!important}}
.product-grid>.card{min-width:0}
.product-grid .card{--kb:#2563EB;--kb-mjuk:#EAF1FE;--kb-text:#1D4ED8;--gron:#0F7A2E;--deal:#6D28D9;--deal-mjuk:#F1EAFE;--deal-text:#5B21B6;--lager:#92400E;
  --val-ram:#86868b;--val-vald:#0071e3;--val-yta:rgba(255,255,255,.8);
  --kort-yta:rgba(232,232,237,.5);--kort-blur:blur(20px) saturate(1.8);--kort-kant:rgba(255,255,255,.55);
  --kort-skugga:0 24px 48px -30px rgba(20,20,60,.34),0 1px 3px rgba(20,20,60,.06);
  --a-text:#1d1d1f;--a-sek:#57575c;--lank:#0057b0;
  position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0;border-radius:18px;overflow:hidden;
  background:var(--kort-yta);-webkit-backdrop-filter:var(--kort-blur);backdrop-filter:var(--kort-blur);box-shadow:inset 0 0 0 1px var(--kort-kant),var(--kort-skugga);
  color:var(--a-text);cursor:pointer;container-type:inline-size;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@media(hover:hover) and (pointer:fine){.product-grid .card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--kort-kant),0 11px 34px -10px rgba(0,0,0,.22)}}
/* bilden: fotot blandas med glaset (darken — fotots ljusa bakgrund tar glasets ton) */
.product-grid .card-media{position:relative;aspect-ratio:6/5;overflow:hidden;border-radius:0;background:transparent}
.product-grid .card-img{position:static;display:block;width:100%;height:100%;object-fit:cover;padding:0;border-radius:0;background:none;mix-blend-mode:darken;transition:transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){.product-grid .card:hover .card-img{transform:scale(1.03)}}
.product-grid .card.slut .card-img{opacity:.8;filter:grayscale(.25)}
.product-grid .card-badges,.product-grid .card-badge,.product-grid .card-desc{display:none}
/* analysen: pillret nere till vänster i bilden. Ikonerna ritas som mask (ingen SVG i varje kort). min-height:0 och
   min-width:0 är inte kosmetik: button,.tap{min-height:44px} på mobil. Tryckytan växer med ::after. */
.product-grid .card-analys{--ca-skold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.5 4.5 6v5.6c0 4.7 3.2 8.4 7.5 9.9 4.3-1.5 7.5-5.2 7.5-9.9V6z'/%3E%3Cpath d='m8.8 11.9 2.3 2.3 4.2-4.4'/%3E%3C/svg%3E");
  --ca-kolv:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 3h5'/%3E%3Cpath d='M10.2 3v6.2L5 18a2 2 0 0 0 1.7 3h10.6a2 2 0 0 0 1.7-3l-5.2-8.8V3'/%3E%3Cpath d='M7.6 15h8.8'/%3E%3C/svg%3E");
  position:absolute;left:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;max-width:calc(100% - 16px);min-width:0;min-height:0;height:22px;margin:0;padding:0 8px 0 6px;
  border:0;border-radius:980px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#1d1d1f;
  font:600 11px/1 var(--font-body);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 6px 14px -10px rgba(0,0,0,.45);transition:transform .18s var(--ease)}
.product-grid .card-analys::after{content:"";position:absolute;inset:-8px -4px}
.product-grid .card-analys .ca-ik{flex:none;display:block;width:12px;height:12px;background:var(--kb);-webkit-mask:var(--ca-skold) center/contain no-repeat;mask:var(--ca-skold) center/contain no-repeat}
.product-grid .card-analys.alla .ca-ik{-webkit-mask-image:var(--ca-kolv);mask-image:var(--ca-kolv)}
.product-grid .card-analys .ca-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.product-grid .card-analys em{font-style:normal;font-weight:500;color:#6e6e73}
.product-grid .card-analys:active{transform:scale(.96)}
.product-grid .card-analys:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* kroppen (namnets storlek med !important: shared.css h3{font-size:clamp(1.1rem,…)!important} under 640 px) */
.product-grid .card-body{display:flex;flex-direction:column;flex:1;gap:0;min-width:0;padding:10px 12px 12px!important}
.product-grid .card-meta{display:flex;margin:0 0 2px}
.product-grid .card-rel{font-size:11.5px;font-weight:600;color:var(--kb);white-space:nowrap}
.product-grid .card-ogon{min-height:16px;margin:0;font-size:11.5px;font-weight:600;line-height:16px;letter-spacing:-.005em}
.product-grid .card-ogon.deal{color:var(--deal)}
.product-grid .card-ogon.low,.product-grid .card-ogon.slut{color:var(--lager)}
.product-grid .card-title{margin:2px 0 0;font-family:var(--font-body);font-size:15px!important;font-weight:600;line-height:1.25;letter-spacing:-.016em;color:var(--a-text);overflow-wrap:break-word}
.product-grid .card-title .card-mg{display:inline;font-weight:500;letter-spacing:inherit;white-space:nowrap;color:var(--a-sek)}
/* V8.109: betygsraden på korten (js/kortextra.js betygH, agent/kategorisynk.py betyg_html) — tom rad utan betyg, så korten står lika */
.product-grid .card-betyg{min-height:16px;margin:3px 0 0;display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:400;line-height:16px;letter-spacing:-.005em;color:var(--a-text,#1d1d1f)}
.product-grid .card-betyg:empty{display:none}
.product-grid:has(.card-st) .card-betyg:empty{display:flex}
.product-grid .card-betyg b{font-weight:700}
.product-grid .card-betyg .m{color:var(--a-sek)}
.product-grid .card-st{font-size:11px;letter-spacing:1px;background:linear-gradient(90deg,#D97706 var(--b,0%),rgba(10,10,12,.2) var(--b,0%));-webkit-background-clip:text;background-clip:text;color:transparent}
.product-grid .card-mg .u{margin-left:.2em;font-size:1em;font-weight:inherit;letter-spacing:0;color:inherit;text-transform:lowercase}
.product-grid .card-mg .u.iu{text-transform:uppercase}
.product-grid .card-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin-top:6px;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.2;letter-spacing:-.016em;color:var(--a-text);font-variant-numeric:tabular-nums}
.product-grid .card-price .kr{margin-left:-2px;font-size:1em;font-weight:inherit;color:inherit}
.product-grid .card-price .kmp-new{color:inherit}
.product-grid .card-oldprice{font-family:var(--font-body);font-size:12.5px;font-weight:400;letter-spacing:0;color:var(--a-sek);text-decoration:line-through}
.product-grid .card-save{display:none}
/* V8.182: vid fler än en i rutan — "−8 %" och "1 099 kr/st" till höger om totalen (KN 5 nov) */
.product-grid .card-rab{margin-left:auto;font-size:11px;font-weight:400;letter-spacing:-.005em;color:var(--a-sek);white-space:nowrap;text-align:right}
.product-grid .card-rab b{font-weight:600;color:var(--deal-text)}
.product-grid .card-stp{font-weight:400;color:var(--a-sek)}
/* APPLES VALRUTOR i mini: etiketten (halvfet) och priset (normal) — se mätningen ovan */
.product-grid .card-remsa{--rn:3;display:grid;grid-template-columns:repeat(var(--rn),minmax(0,1fr));gap:4px;margin:8px 0 0;padding:0;border-radius:0;background:none}
.product-grid .card-remsa.c2{--rn:2}
.product-grid .card-remsa.c4{--rn:4}
.product-grid .card-remsa .cs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:0;height:40px;margin:0;padding:0 3px;
  border:1px solid var(--val-ram);border-radius:12px;background:var(--val-yta);color:var(--a-text);font-family:var(--font-body);line-height:1;text-align:center;cursor:pointer;white-space:nowrap;
  box-shadow:none;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.product-grid .card-remsa .cs.on{padding:0 2px;border:2px solid var(--val-vald)}
.product-grid .card-remsa .cs-s{font-size:13px;font-weight:600;line-height:16px;letter-spacing:-.022em}
.product-grid .card-remsa .cs-p{font-size:11px;font-weight:400;line-height:14px;letter-spacing:-.01em;color:var(--a-text)}
.product-grid .card-remsa .cs.slut:not(.on){opacity:.45}
.product-grid .card-remsa .cs:active{transform:scale(.98)}
.product-grid .card-remsa .cs:focus-visible{outline:2px solid var(--val-vald);outline-offset:2px}
/* raden under rutorna */
.product-grid .card-under{min-height:14px;margin:6px 0 0;font-size:11px;font-weight:400;line-height:14px;letter-spacing:-.005em;color:var(--a-sek);text-wrap:balance}
.product-grid .card-under b{font-weight:600;color:var(--deal-text)}
/* foten: Köp och "Läs mer ›" — alltid nederst, så att knapparna i en rad ligger i linje */
.product-grid .card-fot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto;padding-top:10px}
.product-grid .card-add{position:relative;top:auto;right:auto;bottom:auto;display:inline-flex;align-items:center;justify-content:center;gap:4px;width:auto;min-width:0;height:30px;min-height:0;margin:0;padding:0 14px;
  border:0;border-radius:980px;background:var(--brand-grad);color:#fff;font:600 13.5px/1 var(--font-body);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 16px -10px rgba(91,63,227,.8);transform:none;transition:transform .15s var(--ease),filter .2s}
@media(hover:hover){.product-grid .card-add:hover{background:var(--brand-grad);color:#fff;filter:brightness(1.07);transform:none}}
.product-grid .card-add:active{transform:scale(.98)}
.product-grid .card-add:focus-visible{outline:2px solid #1d1d1f;outline-offset:2px}
.product-grid .card-add .ca-p{display:none}
.product-grid .card-add .ca-ok{display:none;align-items:center;gap:4px}
.product-grid .card-add .ca-ok svg{width:14px;height:14px}
.product-grid .card-add.lagd{background:var(--gron)}
.product-grid .card-add.lagd>:not(.ca-ok){display:none}
.product-grid .card-add.lagd .ca-ok{display:inline-flex}
.card-add.boka,.product-grid .card-add.boka{background:#B45309;box-shadow:none}
.product-grid .card-las{font-size:13px;line-height:1.2;color:var(--lank);white-space:nowrap}
@media(hover:hover) and (pointer:fine){.product-grid .card:hover .card-las{text-decoration:underline}}
/* i korgen: stegaren tar radens plats (shared.js ritaStegare) */
.product-grid .card-fot>.px-steg{flex:1 1 100%;min-width:0}
.product-grid .card-fot:has(.card-add.px-har:not(.lagd)) .card-las{display:none}
/* datorns kort (220 px och bredare): Apples storlekar */
@container (min-width:220px){
  .product-grid .card-body{padding:14px 18px 18px!important}
  .product-grid .card-ogon{font-size:12px}
  .product-grid .card-title{font-size:17px!important;letter-spacing:-.022em}
  .product-grid .card-price{margin-top:8px;font-size:17px;letter-spacing:-.022em}
  .product-grid .card-oldprice{font-size:14px}
  .product-grid .card-analys{left:12px;bottom:12px;max-width:calc(100% - 24px);height:26px;padding:0 10px 0 8px;font-size:12px;gap:5px}
  .product-grid .card-analys .ca-ik{width:14px;height:14px}
  .product-grid .card-remsa{gap:6px;margin-top:12px}
  .product-grid .card-remsa .cs{height:46px}
  .product-grid .card-remsa .cs-s{font-size:14px;line-height:17px}
  .product-grid .card-remsa.c4 .cs-s{font-size:13px}
  .product-grid .card-remsa .cs-p{font-size:12px;line-height:15px}
  .product-grid .card-under{min-height:16px;margin-top:8px;font-size:12px;line-height:16px}
  .product-grid .card-rab{font-size:12px}
  .product-grid .card-fot{padding-top:14px;gap:6px 16px}
  .product-grid .card-add{height:34px;padding:0 16px;font-size:14px}
  .product-grid .card-las{font-size:14px}
}
/* fyra storlekar (Retatrutide) i telefonen: två och två — fyra i bredd ger 32 px innanför ramen, "10 mg" är 36 px */
@container (max-width:219px){.product-grid .card-remsa.c4{--rn:2}}
/* 320-telefonen (kort under 165 px): tätare rutor */
@container (max-width:164px){
  .product-grid .card-remsa{gap:3px}
  .product-grid .card-remsa .cs{padding:0 1px}
  .product-grid .card-remsa .cs.on{padding:0}
  .product-grid .card-remsa .cs-s{font-size:12px}
}
/* listvyn i shoppen: bilden till vänster, kroppen till höger */
.product-grid.list .card{flex-direction:row;align-items:stretch;border-radius:20px}
.product-grid.list .card-media{flex:0 0 150px;width:150px;aspect-ratio:auto;align-self:stretch}
.product-grid.list .card-analys .ca-t{display:none}
.product-grid.list .card-analys{padding:0 6px}
.product-grid.list .card-body{padding:14px 16px!important}
.product-grid.list .card-remsa{max-width:420px}
@media(max-width:560px){.product-grid.list .card-media{flex-basis:104px;width:104px}}
/* ── KÖPARKET (js/kortextra.js arkRita): bottenark i telefonen, ruta mitt på datorn. Tjockt material (HIG: "thicker
   materials … better contrast for text"): vitt 92 % med oskärpa — Apples valrutor i full storlek (17 px halvfet / 12 px). */
html.px-ark-oppen{overflow:hidden}
.px-ark-bak{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.36);opacity:0;transition:opacity .25s var(--ease)}
.px-ark-bak.pa{opacity:1}
.px-ark{--val-ram:#86868b;--val-vald:#0071e3;--sek:#6e6e73;
  position:fixed;left:0;right:0;bottom:0;z-index:1001;max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 18px calc(22px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);box-shadow:0 -10px 40px -20px rgba(0,0,0,.4);
  color:#1d1d1f;font-family:var(--font-body);text-align:left;transform:translateY(105%);transition:transform .32s var(--ease)}
.px-ark.pa{transform:none}
.px-ark:focus{outline:none}
.px-ark .ak-handtag{width:36px;height:5px;margin:0 auto 12px;border-radius:3px;background:#d2d2d7}
.px-ark .ak-topp{display:grid;grid-template-columns:56px minmax(0,1fr) 30px;gap:12px;align-items:center}
.px-ark .ak-topp img,.px-ark .ak-bild{display:block;width:56px;height:56px;border-radius:12px;object-fit:cover;background:#f5f5f7;mix-blend-mode:darken}
.px-ark .ak-namn{min-width:0}
.px-ark .ak-namn b{display:block;font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.022em}
.px-ark .ak-namn b span{font-weight:500;color:var(--sek);white-space:nowrap}
.px-ark .ak-pris{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin:2px 0 0;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.px-ark .ak-pris s{font-size:13px;font-weight:400;color:var(--sek)}
.px-ark .ak-spar{padding:2px 7px;border-radius:8px;background:#F1EAFE;color:#5B21B6;font-size:11.5px;font-weight:600}
.px-ark .ak-lager{margin:2px 0 0;font-size:12px;font-weight:600;color:#B45309}
.px-ark .ak-stang{display:grid;place-items:center;width:30px;height:30px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:#ececf0;color:#3a3a3e;cursor:pointer}
.px-ark .ak-etikett{margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--sek)}
.px-ark .ak-val{--rn:3;display:grid;grid-template-columns:repeat(var(--rn),minmax(0,1fr));gap:8px}
.px-ark .ak-val.c2{--rn:2}.px-ark .ak-val.c4{--rn:4}
.px-ark .ak-val button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;min-height:0;margin:0;padding:11px 12px 10px;border:1px solid var(--val-ram);border-radius:12px;
  background:#fff;color:#1d1d1f;font:inherit;text-align:left;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.px-ark .ak-val button.on{padding:10px 11px 9px;border:2px solid var(--val-vald)}
.px-ark .ak-val button.slut:not(.on){opacity:.45}
.px-ark .ak-val button:active{transform:scale(.98)}
.px-ark .ak-val b{font-size:17px;font-weight:600;line-height:21px;letter-spacing:-.022em}
.px-ark .ak-val span{font-size:12px;line-height:16px;letter-spacing:-.01em}
.px-ark .ak-val em{font-style:normal;font-size:12px;line-height:16px;color:var(--sek)}
.px-ark .ak-val em.r{font-weight:600;color:#5B21B6}
.px-ark .ak-dos{display:grid;grid-template-columns:22px minmax(0,1fr) 16px;gap:12px;align-items:center;width:100%;min-height:0;margin:14px 0 0;padding:8px 4px 8px 2px;border:0;border-radius:12px;
  background:none;color:#1d1d1f;font:inherit;text-align:left;cursor:pointer}
@media(hover:hover){.px-ark .ak-dos:hover{background:#f5f5f7}}
.px-ark .ak-dos .cd-ik{width:22px;height:22px;color:var(--sek)}
.px-ark .ak-dos .cd-pil{width:16px;height:16px;color:#86868b}
.px-ark .ak-dos b{display:block;font-size:15px;font-weight:600}
.px-ark .ak-dos small{display:block;font-size:13px;color:var(--sek)}
.px-ark .ak-ingar{display:flex;align-items:flex-start;gap:7px;margin:12px 0 0;padding-top:12px;border-top:1px solid #e8e8ed;font-size:13px;line-height:1.4;color:var(--sek)}
.px-ark .ak-bock{flex:none;margin-top:1px;color:var(--gron,#0F7A2E)}
.px-ark .ak-kop{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:52px;min-height:0;margin:12px 0 0;border:0;border-radius:980px;background:var(--brand-grad);color:#fff;
  font:700 16px/1 var(--font-body);letter-spacing:-.01em;cursor:pointer;box-shadow:0 14px 26px -16px rgba(91,63,227,.85);transition:transform .15s var(--ease),filter .2s}
@media(hover:hover){.px-ark .ak-kop:hover{filter:brightness(1.07)}}
.px-ark .ak-kop:active{transform:scale(.98)}
.px-ark .ak-kop.lagd{background:var(--gron,#0F7A2E);box-shadow:none}
.px-ark .ak-kop.boka{background:#B45309;box-shadow:none}
.px-ark .ak-mer{display:block;width:100%;min-height:22px;margin:10px 0 0;padding:2px 0;border:0;background:none;color:#1D4ED8;font:600 13.5px/1.35 var(--font-body);text-align:center;cursor:pointer;text-wrap:balance}
.px-ark .ak-mer.tom{visibility:hidden}
@media(hover:hover){.px-ark button.ak-mer:hover{text-decoration:underline}}
.px-ark .ak-las{display:block;margin-top:6px;font-size:13px;color:#0066cc;text-align:center;text-decoration:none}
.px-ark button:focus-visible,.px-ark a:focus-visible{outline:2px solid var(--val-vald);outline-offset:2px}
@media(min-width:700px){
  .px-ark{left:50%;right:auto;top:50%;bottom:auto;width:420px;max-height:min(88vh,720px);padding:20px 22px 22px;border-radius:22px;opacity:0;transform:translate(-50%,-46%) scale(.98);transition:opacity .2s,transform .25s var(--ease)}
  .px-ark.pa{opacity:1;transform:translate(-50%,-50%)}
  .px-ark .ak-handtag{display:none}
}
@media(prefers-reduced-motion:reduce){.px-ark,.px-ark-bak,.px-ark .ak-kop,.px-ark .ak-val button,.product-grid .card,.product-grid .card-img,.product-grid .card-add,.product-grid .card-remsa .cs,.product-grid .card-analys{transition:none}
  .px-ark .ak-kop:active,.px-ark .ak-val button:active,.product-grid .card:hover,.product-grid .card:hover .card-img,.product-grid .card-add:active,.product-grid .card-remsa .cs:active,.product-grid .card-analys:active{transform:none}}
/* ═══ TABELLER PÅ SMÅ SKÄRMAR ════════════════════════════════════════
   Dostabellen på de statiska produktsidorna stack ut 70 px utanför en 390-
   skärm och kolumnen Administrering försvann. En tabell har ett naturligt
   minsta mått — då ska den scrolla i sidled inom sig själv, inte knuffa ut
   hela sidan. */
@media (max-width:640px){
  .pp-tbl{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch }
  .pp-tbl thead, .pp-tbl tbody, .pp-tbl tr{ width:max-content; min-width:100% }
}

/* ═══ FÖRDELAR + BIVERKNINGAR PÅ STATISKA PRODUKTSIDOR ═══════════════
   Injiceras av agent/produkttext_statiska.py ur samma TEXT-källa som
   product.html. Fördelarna med grön bock, biverkningarna med en neutral
   varningsprick — samma tyngd, inte finstilt (ägarens regel). */
.pp-inj{margin:22px 0 6px}
.pp-inj h2{font-size:clamp(19px,2.6vw,24px);letter-spacing:-.02em;margin:0 0 4px}
.pp-inj .pp-vad{color:var(--muted,#666);font-size:15px;line-height:1.6;margin:0 0 16px;max-width:64ch}
.pp-inj-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:720px){.pp-inj-grid{grid-template-columns:1fr}}
.pp-inj-kort{border:1px solid var(--line,rgba(10,10,12,.1));border-radius:16px;padding:18px 20px;background:var(--surface,#fff)}
.pp-inj-kort h3{font-size:14px;letter-spacing:.02em;text-transform:uppercase;margin:0 0 10px;color:var(--muted,#777)}
.pp-inj-kort ul{list-style:none;margin:0;padding:0}
.pp-inj-kort li{position:relative;padding:8px 0 8px 30px;font-size:14.5px;line-height:1.5;border-bottom:1px solid rgba(127,127,127,.08)}
.pp-inj-kort li:last-child{border-bottom:none}
.pp-inj-plus li::before{content:'✓';position:absolute;left:2px;top:8px;width:20px;height:20px;border-radius:50%;background:#ECFDF5;color:#16a34a;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pp-inj-minus li::before{content:'!';position:absolute;left:2px;top:8px;width:20px;height:20px;border-radius:50%;background:#FFF7ED;color:#c2410c;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ── KAMPANJPRIS ──────────────────────────────────────────────
   Gäller BARA varor med verkligt oldPrice (prisinformationslagen).
   Systemet 4.0: priset står i bläck och ordinarie pris i dämpad grå med
   vanlig överstrykning — gradienten och den lutade linjen gjorde prisraden
   till det mest rörliga elementet på kortet. */
.kmp-old{position:relative;display:inline-block;color:var(--muted,#6B6B73);font-weight:400;text-decoration:line-through;white-space:nowrap}
.kmp-new{color:var(--ink,#0A0A0C);font-weight:600}


/* ═══ MOTION-STÄDNING 2026-08-27 — fyra klasser som JS satte men CSS aldrig
   definierade: toasten var OSYNLIG (showToast körde mot tom klass), badge-
   "bouncen" gjorde ingenting, sticky-includes renderades som rå textrad,
   och btn-loading gav ingen visuell återkoppling alls. ═══ */
.ps-toast{position:fixed;left:50%;bottom:calc(var(--bottenmeny, 60px) + 16px);transform:translate(-50%,12px);
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:99px;
  box-shadow:0 10px 30px -8px rgba(10,10,12,.4);opacity:0;pointer-events:none;z-index:120;
  transition:opacity .25s var(--ease),transform .25s var(--ease);max-width:calc(100vw - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:901px){.ps-toast{bottom:24px}}

@keyframes wlBadgeBounce{0%{transform:scale(1)}35%{transform:scale(1.45)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.bounce{animation:wlBadgeBounce .45s var(--ease)}

.sticky-includes{position:fixed;left:50%;bottom:calc(var(--bottenmeny, 60px) + 12px);transform:translate(-50%,14px);
  display:flex;align-items:center;gap:7px;background:rgba(10,10,12,.88);backdrop-filter:blur(10px);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.01em;padding:8px 14px;border-radius:99px;opacity:0;pointer-events:none;z-index:85;
  transition:opacity .3s var(--ease),transform .3s var(--ease);white-space:nowrap}
.sticky-includes.show{opacity:1;transform:translate(-50%,0)}
.sticky-includes svg{flex-shrink:0}

.btn-loading{position:relative;color:transparent !important;pointer-events:none}
.btn-loading::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:wlSnurr .7s linear infinite}
@keyframes wlSnurr{to{transform:rotate(360deg)}}

/* Globalt skyddsnät: tre sidor saknade helt reduced-motion-hantering. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ═══ POLERING 2026-09-18 (ägarens ord: "skapa mer space, gör det viktiga
   större, gradient på viktiga knappar som syns och smälter in") ═══
   Ett knappsystem för hela sajten: de knappar som tar kunden framåt bär
   varumärkets gradient — Varukorg i menyn, Shoppa/Lägg i korgen/Till kassan/
   Slutför. Allt annat är svart eller kant. Undantag: .px-cta-knapp (Telegram-
   gruppen) är svart på ägarens beslut 2026-09-12 (omdomestest). */
.logo{font-size:19px!important;gap:11px!important}
.logo-mark{width:32px!important;height:32px!important;border-radius:9px!important;font-size:14px!important}
.nav-link{font-size:15px!important;padding:10px 16px!important}
.icon-btn{width:44px!important;height:44px!important}
.cart-btn{height:46px!important;padding:0 20px!important;font-size:14.5px!important;font-weight:600!important;background:var(--brand-grad)!important;color:#fff!important;box-shadow:0 10px 24px -12px rgba(37,99,235,.55)}
.cart-btn .cart-count{background:#fff!important;color:var(--ink)!important}
.btn,a.btn{height:52px;padding:0 26px;font-size:15px}
.btn.p,.btn-primary,.btn.grad,.fm-cta,.fm-sticky button,.fm-subnav .cta button,.mh-txt .kop,.co-btn,.cta-btn,.kb-cta,.px-grad-knapp{
  background:var(--brand-grad)!important;color:#fff!important;border:0!important;
  box-shadow:0 12px 28px -14px rgba(37,99,235,.6);transition:transform .2s var(--ease),box-shadow .25s var(--ease),filter .2s!important}
.btn.p:hover,.btn-primary:hover,.btn.grad:hover,.fm-cta:hover,.fm-sticky button:hover,.fm-subnav .cta button:hover,.mh-txt .kop:hover,.co-btn:hover,.cta-btn:hover,.kb-cta:hover{
  filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 16px 32px -14px rgba(124,58,237,.55)}
.btn.p:active,.btn-primary:active,.fm-cta:active,.co-btn:active,.cta-btn:active{transform:scale(.985)}
.fm-cta[disabled]{filter:grayscale(1);opacity:.5}
@media(max-width:900px){.cart-btn{padding:0!important;width:44px!important}.cart-btn{position:relative!important}.cart-btn .cart-count{position:absolute;top:-3px;right:1px}}
@media(prefers-reduced-motion:reduce){.btn.p,.btn-primary,.fm-cta,.co-btn,.cta-btn{transition:none!important;transform:none!important}}

/* ═══ GLAS 5.0 (2026-09-18) — ägarens "allt ser perfekt ut, bygg det" på
   mockupen agent/mockuper/glas-5.0. Frostat glas på en mjuk, suddig bakgrund;
   flytande menypiller; gradient bara på köpknapparna; prispiller som hänger
   under korten. Sidornas egna <style> ligger EFTER shared.css, därför
   !important på det som byter utseende. Ingen animation i bakgrunden. ═══ */
:root{--bg:#F2F0EA;--glas:rgba(255,255,255,.62);--glas-2:rgba(255,255,255,.42);--glas-line:rgba(255,255,255,.85);
  --skugga-glas:0 40px 80px -48px rgba(20,20,60,.38),0 2px 6px -2px rgba(20,20,60,.06);
  --skugga-knapp:0 16px 32px -14px rgba(37,99,235,.65);--color-bg:#F2F0EA}
html{background:#F2F0EA}
body{background:transparent!important}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 45% at 12% 8%,rgba(37,99,235,.30),transparent 62%),
    radial-gradient(48% 40% at 88% 14%,rgba(124,58,237,.26),transparent 60%),
    radial-gradient(42% 38% at 74% 88%,rgba(255,170,120,.46),transparent 62%),
    radial-gradient(36% 34% at 8% 84%,rgba(37,99,235,.18),transparent 60%),
    radial-gradient(30% 30% at 45% 40%,rgba(124,58,237,.10),transparent 60%),
    radial-gradient(30% 30% at 50% 50%,rgba(255,255,255,.5),transparent 70%),
    #F2F0EA}
/* glaspanelen som klass — sidor som vill ha den */
.glas{background:var(--glas);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border:1px solid var(--glas-line);border-radius:30px;box-shadow:var(--skugga-glas)}
.glas-2{background:var(--glas-2);border:1px solid rgba(255,255,255,.7);border-radius:22px}

/* ── menyn: flytande glaspiller, 76 px ── */
.nav{position:sticky;top:0;z-index:50;background:transparent!important;border-bottom:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:12px 0 0!important}
.nav>.shell{padding:0 clamp(12px,3vw,40px)!important;max-width:1240px}
.nav-inner{display:flex!important;align-items:center!important;gap:6px!important;height:76px!important;padding:0 12px 0 22px!important;border-radius:999px;
  background:var(--glas)!important;-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border:1px solid var(--glas-line);box-shadow:var(--skugga-glas)}
.nav-inner.shell{max-width:1240px}
.nav .logo{margin-right:auto!important;font-size:20px!important;gap:12px!important;line-height:1.1}
.nav .logo-mark{width:38px!important;height:38px!important}
/* QA 2026-09-28: på 1280–1560 px bröts loggans undertext i fyra rader och Kom igång låg över loggan.
   Loggan krymper aldrig; undertexten och "Spåra din order" (finns i Kom igång-panelen och sidfoten) ryker där det är trångt. */
@media(min-width:901px){.nav .logo{flex-shrink:0;min-width:max-content}.nav .nav-links{min-width:0}.nav .nav-links > *{white-space:nowrap}}
.nav .logo small{display:block;font-family:var(--font-body);font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:0;margin-top:1px}
.nav-links{display:flex!important;align-items:center;gap:2px!important;justify-content:flex-end}
.nav-link{display:inline-flex!important;align-items:center;gap:8px!important;height:48px;padding:0 16px!important;border-radius:999px!important;font-size:15.5px!important;font-weight:500!important;color:var(--ink-2)!important;background:none!important}
.nav-link:hover{background:rgba(255,255,255,.7)!important;color:var(--ink)!important}
.nav-link.active,.nav-link[aria-current="page"]{background:rgba(255,255,255,.85)!important;color:var(--ink)!important;font-weight:600!important}
.nav-kur[aria-expanded="true"]{background:rgba(255,255,255,.85)!important;color:var(--ink)!important}
.nav-actions{display:flex!important;align-items:center;gap:8px!important;margin-left:8px}
.icon-btn{width:48px!important;height:48px!important;background:rgba(255,255,255,.75)!important;border:1px solid var(--glas-line)!important;border-radius:50%!important}
.icon-btn:hover{background:#fff!important}
.cart-btn{height:52px!important;padding:0 22px 0 18px!important;font-size:15.5px!important;gap:10px!important;box-shadow:var(--skugga-knapp)!important}
@media(max-width:900px){
  .nav{padding:8px 0 0!important}
  .nav-inner{height:64px!important;padding:0 8px 0 16px!important;gap:6px!important}
  .nav .logo{font-size:18px!important}.nav .logo-mark{width:34px!important;height:34px!important}.nav .logo small{display:none}
  .nav-links{display:none!important}
  .cart-btn{width:48px!important;height:48px!important;padding:0!important;justify-content:center}
  .cart-btn .cart-count{top:-4px;right:-2px}
}

/* ── bottenmenyn (mobil): glaspiller 12 px från kanterna, Dummie-guiden som gradientpiller ── */
:root{--bottenmeny:calc(78px + env(safe-area-inset-bottom))}
@media(max-width:900px){
  .bottom-tabs{left:12px!important;right:12px!important;bottom:12px!important;border-radius:999px;border:1px solid var(--glas-line)!important;
    background:rgba(255,255,255,.88)!important;-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:var(--skugga-glas);padding:6px 6px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .bottom-tabs-inner{gap:2px}
  .btab{font-size:10.5px;min-height:52px}
  .btab.btab-guide{flex:0 0 auto;flex-direction:row;gap:6px;height:48px;min-height:0;padding:0 14px;border-radius:999px;background:var(--brand-grad);color:#fff!important;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:var(--skugga-knapp)}
  .btab.btab-guide .btab-icon svg{width:18px;height:18px;stroke-width:2}
  .mk-panel{bottom:calc(var(--bottenmeny, 78px) + 6px)}
}

/* ── knappar ── */
.btn,a.btn{border-radius:999px}
.btn.s,.btn-ghost,.btn.btn-ghost,.btn-white{background:rgba(255,255,255,.72)!important;border:1px solid var(--glas-line)!important;color:var(--ink)!important;box-shadow:0 10px 24px -20px rgba(20,20,60,.5)}
.btn.s:hover,.btn-ghost:hover,.btn-white:hover{background:#fff!important}
.btn-l{min-height:62px;padding:0 34px!important;font-size:17px!important}


/* ── sidfoten: grundstilen (QA 2026-09-29, B1) ──
   Låg förr bara inline i chassina/om.html — 22 produktsidor, omdomen, analys och
   aterforsaljare saknade blocket och fick ostylad sidfot. Samma regler som
   inline-blocket, FÖRE glas-överstyrningen nedan så den vinner som förut. */
.px-foot{border-top:1px solid rgba(10,10,12,.08);background:#FAFAF7;margin-top:56px;padding:44px 20px 30px;font-family:'Inter',system-ui,sans-serif}
.px-foot-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
@media(max-width:900px){.px-foot-in{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.px-foot-in{grid-template-columns:1fr;gap:24px}}
.px-foot-brand p{margin:10px 0 14px;font-size:13px;line-height:1.6;color:#6B6B73;max-width:34ch}
.px-foot-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em;color:#0A0A0C;display:flex;align-items:center;gap:9px;text-decoration:none}
.px-foot-name img{width:26px;height:26px}
.px-foot-badges{display:flex;flex-wrap:wrap;gap:5px}
.px-foot-badges span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;color:#6B6B73;border:1px solid rgba(10,10,12,.1);border-radius:5px;padding:3px 6px}
.px-foot-h{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0A0A0C;margin:0 0 11px}
.px-foot-col a{display:block;font-size:13.5px;line-height:1.5;color:#6B6B73;text-decoration:none;margin-bottom:7px}
.px-foot-col a:hover{color:#2563EB}
.px-foot-legal{max-width:1100px;margin:34px auto 0;padding-top:18px;border-top:1px solid rgba(10,10,12,.07);font-size:12px;line-height:1.6;color:#6B6B73;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ── sidfoten som glaspanel ── */
.px-foot{background:var(--glas)!important;border:1px solid var(--glas-line)!important;border-top:1px solid var(--glas-line)!important;border-radius:30px;
  width:min(1240px,calc(100% - 2*clamp(12px,3vw,40px)));margin:clamp(40px,6vw,72px) auto 24px!important;padding:clamp(24px,3vw,40px)!important;box-shadow:var(--skugga-glas)}
.px-foot-in{max-width:none!important}
@media(max-width:900px){.px-foot{margin-bottom:calc(var(--bottenmeny) + 8px)!important}}


/* ═══ DUMMIE-GUIDEN — komponenten (js/dummieguiden.js) ═══
   Samma utseende på startsidan, dummie-guiden.html och produktsidans panel. */
.lank{font-weight:600;font-size:14.5px;color:var(--brand-1);display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.lank:hover{text-decoration:underline}
.dg-steg{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:14px}
.dg-steg span{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;background:rgba(255,255,255,.55)}
.dg-steg i{width:22px;height:22px;border-radius:50%;background:rgba(10,10,15,.08);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11.5px;color:var(--ink)}
.dg-steg span.on{color:var(--ink);background:#fff}.dg-steg span.on i{background:var(--brand-grad);color:#fff}
.dg-steg span.klar i{background:var(--ok);color:#fff}
.dg-fraga{font-family:var(--font-display);font-weight:700;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.02em;margin:0 0 6px;line-height:1.15}
.dg-under{color:var(--muted);font-size:15px;margin:0 0 18px}
.dg-mal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:1100px){.dg-mal{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.dg-mal{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dg-mal button{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:20px;background:rgba(255,255,255,.7);border:1px solid var(--glas-line);text-align:left;font-weight:600;font-size:14.5px;line-height:1.3;transition:transform .2s var(--ease),background .2s;min-height:0}
.dg-mal button:hover{background:#fff;transform:translateY(-2px)}
.dg-mal button.on{box-shadow:0 0 0 2px var(--ink) inset;background:#fff}
.dg-mal button small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:-6px}
.dg-mal .ik{width:40px;height:40px;border-radius:12px;background:var(--brand-grad);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.dg-mal .ik svg{width:20px;height:20px}
.dg-tva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:560px){.dg-tva{grid-template-columns:minmax(0,1fr)}}
.dg-tva button{padding:18px;border-radius:20px;background:rgba(255,255,255,.7);border:1px solid var(--glas-line);text-align:left;font-weight:600;font-size:15.5px;line-height:1.3;transition:transform .2s var(--ease),background .2s}
.dg-tva button small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:4px}
.dg-tva button:hover{background:#fff;transform:translateY(-2px)}
.dg-byt{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.dg-byt>small{color:var(--muted);font-size:12.5px;margin-right:2px}
.dg-byt .chip{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;height:38px;padding:0 13px;background:rgba(255,255,255,.7);border:1px solid var(--glas-line);color:var(--ink-2);min-height:0}
.dg-byt .chip small{color:var(--muted);font-weight:400;margin-left:4px}
.dg-byt .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.dg-byt .chip.on small{color:rgba(255,255,255,.7)}
.dg-wrap{container-type:inline-size}
.dg-plan{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:18px;align-items:stretch}
@media(max-width:760px){.dg-plan{grid-template-columns:minmax(0,1fr)}}
@container (max-width:720px){.dg-plan{grid-template-columns:minmax(0,1fr)}}
.dg-kol{display:flex;flex-direction:column;gap:10px;min-width:0}
.dg-vara{display:flex;gap:16px;align-items:center;padding:14px;border-radius:22px;background:rgba(255,255,255,.75);border:1px solid var(--glas-line);color:inherit;text-decoration:none}
.dg-vara img{width:84px;height:84px;border-radius:16px;object-fit:cover;flex-shrink:0;background:#F3EDE9}
.dg-vara b{font-family:var(--font-display);font-size:18px;display:block;letter-spacing:-.01em;line-height:1.2}
.dg-vara small{color:var(--muted);font-size:13px}
.dg-vara .p{font-family:var(--font-display);font-weight:700;font-size:20px;margin-top:4px}
.dg-vara .p s{font-size:14px;color:var(--muted);font-weight:500;margin-left:6px}
.dg-tal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dg-tal>div{min-width:0;padding:14px 14px 12px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid var(--glas-line)}
.dg-tal small{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.dg-tal b{font-family:var(--font-display);font-size:26px;letter-spacing:-.02em;line-height:1;display:block;white-space:nowrap}
.dg-tal b em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:0;display:block;margin-top:3px;white-space:normal}
.dg-tal p{font-size:12.5px;color:var(--ink-2);margin:4px 0 0}
@media(max-width:560px){.dg-tal b{font-size:22px}}
.dg-gor{display:flex;flex-direction:column;gap:8px}
.dg-gor>div{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.55)}
.dg-gor>div>div{min-width:0}
.dg-gor i{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.dg-gor b{display:block;font-size:14.5px}
.dg-gor p{font-size:13px;color:var(--muted);margin:0}
.dg-spruta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 14px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(239,238,255,.75));border:1px solid var(--glas-line)}
.dg-spruta svg{width:100%;max-width:300px;height:auto}
.dg-spruta b{font-family:var(--font-display);font-size:19px;letter-spacing:-.02em;text-align:center}
.dg-spruta small{color:var(--muted);font-size:12.5px;text-align:center}
.dg-ingar{display:flex;gap:8px;flex-wrap:wrap}
.dg-ingar span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:rgba(15,122,46,.10);color:var(--ok);font-weight:600;font-size:12.5px}
.dg-ingar svg{width:14px;height:14px}
.dg-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* QA 2026-09-28: på mobil låg "Fortsätt" under tolv mål — nu följer den med i botten tills den nås */
@media(max-width:900px){.dg-cta{position:sticky;bottom:calc(var(--bottenmeny,78px) + 10px);z-index:6;border-radius:999px;box-shadow:0 10px 30px -10px rgba(37,99,235,.55)}}
.dg-cta .btn{white-space:normal;text-align:center;padding:0 20px;width:100%;min-height:58px;line-height:1.25}
.dg-cta .btn .ico{width:18px;height:18px;flex-shrink:0}
.dg-cta .btn.lagd{background:var(--ok)!important}
.dg-lev{font-size:13px;color:var(--muted);margin:0}.dg-lev b{color:var(--ink);font-weight:600}.dg-lev a{color:var(--brand-1);font-weight:600}
.dg-fot{margin:14px 0 0;font-size:14px}


/* ═══ NYBÖRJARGUIDEN ANIM (2026-09-18) — "Så gör du", från paketet till sista
   dosen (js/nyborjarguiden-anim.js, agent/NYBORJARGUIDEN-PLAN.md).
   Grundläget utan klass = SLUTBILDEN. `.redo` på kapitlet = startläge med
   pausad animation, `.spelar` = spelar. Varje scen spelas EN gång när den
   syns + "Spela igen" — inga oändliga animationer. Reduced motion: aldrig
   `.redo`, slutbilden visas och knappen döljs. ══════════════════════════ */
.sagor{display:flex;flex-direction:column;gap:14px}
.sagor-vald{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--glas-line);font-size:13.5px;font-weight:500;margin-top:12px;color:var(--ink-2)}
.sagor-vald b{font-family:var(--font-display);color:var(--ink)}
.sagor-exempel{font-size:13px;color:var(--muted);margin:8px 0 0}
.kap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:center;padding:clamp(16px,2vw,24px)!important;scroll-margin-top:110px}
.kap>*{min-width:0}
@media(max-width:760px){.kap{grid-template-columns:minmax(0,1fr)}}
/* Bilden är 320/220; Spela igen ligger i en egen rad UNDER bilden (låg förr ovanpå bildens nedre högra hörn och dolde etiketter i kapitel 1, 2, 3, 4, 6, 8). */
.kap-anim{position:relative;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(239,238,255,.72));border:1px solid var(--glas-line);overflow:hidden;display:flex;flex-direction:column}
.kap-anim svg{width:100%;height:auto;aspect-ratio:320/220;display:block}
.kap-spela{align-self:flex-end;margin:0 10px 10px;min-height:34px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--glas-line);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 4px 12px -6px rgba(10,10,12,.25)}
.kap-spela:hover{background:#fff}
.kap-h{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.kap-nr{width:30px;height:30px;border-radius:50%;background:var(--brand-grad);color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.kap h3{font-family:var(--font-display);font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.02em;margin:0;line-height:1.15}
.kap-rad{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.55);margin:0 0 6px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.kap-rad i{width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.kap-rad b{color:var(--ink);font-weight:600}
.kap-rad em{font-style:normal;font-family:var(--font-display);font-weight:700;color:var(--ink);white-space:nowrap}
.kap-lank{font-size:13.5px;margin:6px 0 0}
.kap-obs{font-size:13px;color:var(--ink-2);margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(37,99,235,.07)}
.kap-varning{font-size:13px;color:#B42318;margin:6px 0 0;padding:8px 12px;border-radius:12px;background:rgba(180,35,24,.06)}
.kap-klar{text-align:center;padding:clamp(20px,3vw,32px)!important}
.kap-klar h3{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em;margin:0 0 8px}
.kap-klar p{color:var(--muted);margin:0 0 16px}
.kap-klar .dg-cta{justify-content:center}
.kap-klar .dg-cta .btn{width:auto;min-width:240px}
/* transformer i SVG — fill-box så scaleY/rotate utgår från elementet självt */
.kap-anim .na{transform-box:fill-box;transform-origin:50% 100%}
/* scenernas egna origin — samma specificitet som raden ovan, annars vinner den (V8.8) */
.kap-anim .na1-lock{transform-origin:0% 100%}
.kap-anim .na2-dropp{transform-origin:50% 60%}
.kap-anim .na2-dag,.kap-anim .na3-vial,.kap-anim .na8-v{transform-origin:50% 50%}
.kap-anim .na4-r1,.kap-anim .na4-r2,.kap-anim .na4-r3{transform-origin:0 50%}
.kap-anim .na5-fyll{transform-origin:50% 0}
.kap.redo .na{animation-fill-mode:both;animation-timing-function:ease-in-out;animation-play-state:paused}
.kap.spelar .na{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.kap .na{animation:none!important}.kap-spela{display:none}}

/* kapitel 3 — blanda (9 s). Slutbild: klar lösning, datum, kylen. */
.na3-servett{opacity:0;transform:translateX(160px)}
.na3-fyll{transform:scaleY(0)}
.na3-bac{transform:scaleY(.35)}
.na3-spruta{transform:translateX(-160px)}
.na3-strale{opacity:0}
.na3-vatska{transform:scaleY(1)}
.na3-pulver{opacity:0}
.na3-vial{transform-origin:50% 50%}
.na3-skaka{opacity:0}
.na3-grumlig{opacity:0}
.kap.redo .na3-servett{animation-name:na3-servett;animation-duration:9s}
.kap.redo .na3-fyll{animation-name:na3-fyll;animation-duration:9s}
.kap.redo .na3-bac{animation-name:na3-bac;animation-duration:9s}
.kap.redo .na3-spruta{animation-name:na3-spruta;animation-duration:9s}
.kap.redo .na3-strale{animation-name:na3-strale;animation-duration:9s}
.kap.redo .na3-vatska{animation-name:na3-vatska;animation-duration:9s}
.kap.redo .na3-pulver{animation-name:na3-pulver;animation-duration:9s}
.kap.redo .na3-vial{animation-name:na3-vial;animation-duration:9s}
.kap.redo .na3-skaka{animation-name:na3-skaka;animation-duration:9s}
.kap.redo .na3-grumlig{animation-name:na3-grumlig;animation-duration:9s}
.kap.redo .na3-klar{animation-name:na3-klar;animation-duration:9s}
.kap.redo .na3-datum{animation-name:na3-datum;animation-duration:9s}
.kap.redo .na3-kyl{animation-name:na3-kyl;animation-duration:9s}
@keyframes na3-servett{0%,2%{opacity:1;transform:translateX(0)}15%{opacity:1;transform:translateX(160px)}18%,100%{opacity:0;transform:translateX(160px)}}
@keyframes na3-fyll{0%,18%{transform:scaleY(0)}31%,44%{transform:scaleY(1)}58%,100%{transform:scaleY(0)}}
@keyframes na3-bac{0%,18%{transform:scaleY(1)}31%,100%{transform:scaleY(.35)}}
@keyframes na3-spruta{0%,33%{transform:translateX(0)}42%,100%{transform:translateX(-160px)}}
@keyframes na3-strale{0%,44%{stroke-dashoffset:200;opacity:0}45%{stroke-dashoffset:200;opacity:1}58%{stroke-dashoffset:0;opacity:1}62%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes na3-vatska{0%,46%{transform:scaleY(0)}60%,100%{transform:scaleY(1)}}
@keyframes na3-pulver{0%,50%{opacity:1}62%,100%{opacity:0}}
@keyframes na3-vial{0%,62%{transform:rotate(0)}66%{transform:rotate(9deg)}70%{transform:rotate(-9deg)}73%{transform:rotate(7deg)}76%,100%{transform:rotate(0)}}
@keyframes na3-skaka{0%,62%{opacity:0}64%,75%{opacity:1}78%,100%{opacity:0}}
@keyframes na3-grumlig{0%,77%{opacity:.75}85%,100%{opacity:0}}
@keyframes na3-klar{0%,85%{opacity:0}88%,100%{opacity:1}}
@keyframes na3-datum{0%,89%{opacity:0}92%,100%{opacity:1}}
@keyframes na3-kyl{0%,92%{opacity:0}95%,100%{opacity:1}}

/* kapitel 4 — räkna dosen (4,5 s). Slutbild: tre rader + sprutan fylld till strecket. */
.na4-r1,.na4-r2,.na4-r3{transform-origin:0 50%}
.na4-fyll{transform:scaleY(1)}
.kap.redo .na4-r1{animation-name:na4-r1;animation-duration:4.5s}
.kap.redo .na4-r2{animation-name:na4-r2;animation-duration:4.5s}
.kap.redo .na4-r3{animation-name:na4-r3;animation-duration:4.5s}
.kap.redo .na4-fyll{animation-name:na4-fyll;animation-duration:4.5s}
.kap.redo .na4-mark{animation-name:na4-mark;animation-duration:4.5s}
@keyframes na4-r1{0%,4%{opacity:0;transform:translateY(8px)}18%,100%{opacity:1;transform:translateY(0)}}
@keyframes na4-r2{0%,26%{opacity:0;transform:translateY(8px)}40%,100%{opacity:1;transform:translateY(0)}}
@keyframes na4-r3{0%,48%{opacity:0;transform:translateY(8px)}62%,100%{opacity:1;transform:translateY(0)}}
@keyframes na4-fyll{0%,53%{transform:scaleY(0)}75%,100%{transform:scaleY(1)}}
@keyframes na4-mark{0%,76%{opacity:0}84%,100%{opacity:1}}

/* kapitel 5 — dra upp (5,5 s). Slutbild: exakt på strecket, inga bubblor. */
.na5-fyll{transform-origin:50% 0;transform:scaleY(1)}
.na5-kolv{transform:translateY(20px)}
.na5-bubbla{opacity:0}
.na5-knack{opacity:0}
.na5-over{opacity:0}
.na5-exakt{opacity:1}
.kap.redo .na5-fyll{animation-name:na5-fyll;animation-duration:5.5s}
.kap.redo .na5-kolv{animation-name:na5-kolv;animation-duration:5.5s}
.kap.redo .na5-bubbla{animation-name:na5-bubbla;animation-duration:5.5s}
.kap.redo .na5-knack{animation-name:na5-knack;animation-duration:5.5s}
.kap.redo .na5-over{animation-name:na5-over;animation-duration:5.5s}
.kap.redo .na5-exakt{animation-name:na5-exakt;animation-duration:5.5s}
@keyframes na5-kolv{0%,5%{transform:translateY(0)}27%,70%{transform:translateY(26px)}84%,100%{transform:translateY(20px)}}
@keyframes na5-fyll{0%,5%{transform:scaleY(0)}27%,70%{transform:scaleY(1.25)}84%,100%{transform:scaleY(1)}}
@keyframes na5-bubbla{0%,27%{opacity:0;transform:translateY(0)}32%,55%{opacity:1;transform:translateY(0)}68%,100%{opacity:0;transform:translateY(-22px)}}
@keyframes na5-knack{0%,38%{opacity:0;transform:translateX(0)}40%{opacity:1;transform:translateX(0)}44%{transform:translateX(14px)}48%{transform:translateX(0)}52%{transform:translateX(14px)}56%{opacity:1;transform:translateX(0)}60%,100%{opacity:0;transform:translateX(0)}}
@keyframes na5-over{0%,26%{opacity:0}30%,74%{opacity:1}80%,100%{opacity:0}}
@keyframes na5-exakt{0%,84%{opacity:0}90%,100%{opacity:1}}

/* kapitel 6 — injicera i magen (8,5 s). Slutbild: fält 1 klart, fält 2 näst på tur. */
.na6-servett{opacity:0;transform:translate(36px,26px)}
.na6-nypL,.na6-nypR{opacity:0}
.na6-spruta{opacity:0;transform:translateY(-70px)}
.na6-kolv{transform:translateY(10px)}
.na6-tid{opacity:0}
.na6-tryck{opacity:0}
.na6-ok1{opacity:1}
.na6-nasta{opacity:1}
.kap.redo .na6-servett{animation-name:na6-servett;animation-duration:8.5s}
.kap.redo .na6-nypL{animation-name:na6-nypL;animation-duration:8.5s}
.kap.redo .na6-nypR{animation-name:na6-nypR;animation-duration:8.5s}
.kap.redo .na6-spruta{animation-name:na6-spruta;animation-duration:8.5s}
.kap.redo .na6-kolv{animation-name:na6-kolv;animation-duration:8.5s}
.kap.redo .na6-tid{animation-name:na6-tid;animation-duration:8.5s}
.kap.redo .na6-tidc{animation-name:na6-tidc;animation-duration:8.5s;animation-timing-function:linear}
.kap.redo .na6-tryck{animation-name:na6-tryck;animation-duration:8.5s}
.kap.redo .na6-ok1{animation-name:na6-ok1;animation-duration:8.5s}
.kap.redo .na6-nasta{animation-name:na6-nasta;animation-duration:8.5s}
.kap.redo .na6-f2c{animation-name:na6-f2c;animation-duration:8.5s}
@keyframes na6-servett{0%,6%{opacity:0;transform:translate(0,0)}8%{opacity:1;transform:translate(0,0)}16%{opacity:1;transform:translate(36px,26px)}19%,100%{opacity:0;transform:translate(36px,26px)}}
@keyframes na6-nypL{0%,19%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(0)}28%,76%{opacity:1;transform:translateX(14px)}80%,100%{opacity:0;transform:translateX(0)}}
@keyframes na6-nypR{0%,19%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(0)}28%,76%{opacity:1;transform:translateX(-14px)}80%,100%{opacity:0;transform:translateX(0)}}
@keyframes na6-spruta{0%,30%{opacity:0;transform:translateY(-70px)}32%{opacity:1;transform:translateY(-70px)}40%,70%{opacity:1;transform:translateY(0)}77%{opacity:1;transform:translateY(-70px)}79%,100%{opacity:0;transform:translateY(-70px)}}
@keyframes na6-kolv{0%,40%{transform:translateY(0)}64%,100%{transform:translateY(10px)}}
@keyframes na6-tid{0%,40%{opacity:0}41%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes na6-tidc{0%,40%{stroke-dashoffset:151}64%,100%{stroke-dashoffset:0}}
@keyframes na6-tryck{0%,78%{opacity:0}80%,88%{opacity:1}91%,100%{opacity:0}}
@keyframes na6-ok1{0%,88%{opacity:0}92%,100%{opacity:1}}
@keyframes na6-nasta{0%,91%{opacity:0}96%,100%{opacity:1}}
@keyframes na6-f2c{0%,91%{stroke:#C9C9D2;stroke-width:1}96%,100%{stroke:#2563EB;stroke-width:2}}

/* ═══ NYBÖRJARGUIDEN ANIM, del 2 (2026-09-18) — scenerna 1, 2, 7, 8 ═══
   Samma regler som del 1: grundläget = slutbilden, .redo = start, .spelar
   spelar, inga oändliga loopar. Kalenderrutorna och veckoprickarna får sin
   fördröjning ur --i (satt inline av js/nyborjarguiden-anim.js). ══════════ */
/* kapitel 1 — paketet (7 s): locket öppnas, sakerna glider ut en i taget */
.na1-lock{transform-origin:0% 100%;transform:rotate(-22deg)}
.na1-a,.na1-b,.na1-c,.na1-d,.na1-e{opacity:1;transform:translateY(0)}
.kap.redo .na1-lock{animation-name:na1-lock;animation-duration:7s}
.kap.redo .na1-a{animation-name:na1-a;animation-duration:7s}
.kap.redo .na1-b{animation-name:na1-b;animation-duration:7s}
.kap.redo .na1-c{animation-name:na1-c;animation-duration:7s}
.kap.redo .na1-d{animation-name:na1-d;animation-duration:7s}
.kap.redo .na1-e{animation-name:na1-e;animation-duration:7s}
@keyframes na1-lock{0%,8%{transform:rotate(0)}22%,100%{transform:rotate(-22deg)}}
@keyframes na1-a{0%,20%{opacity:0;transform:translateY(30px)}32%,100%{opacity:1;transform:translateY(0)}}
@keyframes na1-b{0%,34%{opacity:0;transform:translateY(30px)}46%,100%{opacity:1;transform:translateY(0)}}
@keyframes na1-c{0%,48%{opacity:0;transform:translateY(30px)}60%,100%{opacity:1;transform:translateY(0)}}
@keyframes na1-d{0%,62%{opacity:0;transform:translateY(30px)}74%,100%{opacity:1;transform:translateY(0)}}
@keyframes na1-e{0%,76%{opacity:0;transform:translateY(20px)}88%,100%{opacity:1;transform:translateY(0)}}
/* kapitel 2 — BAC-vatten (6 s): droppen, bakterierna studsar av, 28 dagar fylls */
.na2-dropp{transform-origin:50% 60%}
.na2-bakt{transform:translateX(0)}
.na2-kyl{opacity:1}.na2-txt{opacity:1}
.na2-dag{transform-origin:50% 50%}
.kap.redo .na2-dropp{animation-name:na2-dropp;animation-duration:6s}
.kap.redo .na2-bakt{animation-name:na2-bakt;animation-duration:6s}
.kap.redo .na2-b2{animation-name:na2-bakt2}
.kap.redo .na2-b3{animation-name:na2-bakt3}
.kap.redo .na2-kyl{animation-name:na2-kyl;animation-duration:6s}
.kap.redo .na2-txt{animation-name:na2-txt;animation-duration:6s}
.kap.redo .na2-dag{animation-name:na2-dag;animation-duration:.3s;animation-delay:calc(3.3s + var(--i,0) * .075s)}
@keyframes na2-dropp{0%,4%{opacity:0;transform:scale(0)}22%,100%{opacity:1;transform:scale(1)}}
@keyframes na2-bakt{0%,24%{opacity:0;transform:translateX(26px)}30%{opacity:1;transform:translateX(26px)}44%{transform:translateX(-12px)}56%,100%{opacity:1;transform:translateX(0)}}
@keyframes na2-bakt2{0%,28%{opacity:0;transform:translateX(26px)}34%{opacity:1;transform:translateX(26px)}48%{transform:translateX(-14px)}60%,100%{opacity:1;transform:translateX(0)}}
@keyframes na2-bakt3{0%,32%{opacity:0;transform:translateX(26px)}38%{opacity:1;transform:translateX(26px)}52%{transform:translateX(-10px)}64%,100%{opacity:1;transform:translateX(0)}}
@keyframes na2-kyl{0%,60%{opacity:0}70%,100%{opacity:1}}
@keyframes na2-txt{0%,90%{opacity:0}96%,100%{opacity:1}}
@keyframes na2-dag{from{opacity:.15;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
/* kapitel 7 — efteråt (6 s): sprutan ner i flaskan, locket på, vialen in i kylen, bockar */
.na7-spruta{transform:translateY(0);opacity:1}
.na7-lock{transform:translateY(0);opacity:1}
.na7-vial{transform:translateX(0);opacity:1}
.na7-bock{opacity:1}.na7-txt{opacity:1}
.kap.redo .na7-spruta{animation-name:na7-spruta;animation-duration:6s}
.kap.redo .na7-lock{animation-name:na7-lock;animation-duration:6s}
.kap.redo .na7-vial{animation-name:na7-vial;animation-duration:6s}
.kap.redo .na7-k1{animation-name:na7-k1;animation-duration:6s}
.kap.redo .na7-k2{animation-name:na7-k2;animation-duration:6s}
.kap.redo .na7-k3{animation-name:na7-k3;animation-duration:6s}
.kap.redo .na7-txt{animation-name:na7-txt;animation-duration:6s}
@keyframes na7-spruta{0%,5%{opacity:0;transform:translateY(-70px)}12%{opacity:1;transform:translateY(-70px)}32%,100%{opacity:1;transform:translateY(0)}}
@keyframes na7-lock{0%,34%{opacity:0;transform:translateY(-22px)}36%{opacity:1;transform:translateY(-22px)}44%,100%{opacity:1;transform:translateY(0)}}
@keyframes na7-vial{0%,46%{opacity:0;transform:translateX(-60px)}50%{opacity:1;transform:translateX(-60px)}64%,100%{opacity:1;transform:translateX(0)}}
@keyframes na7-k1{0%,70%{opacity:0}74%,100%{opacity:1}}
@keyframes na7-k2{0%,78%{opacity:0}82%,100%{opacity:1}}
@keyframes na7-k3{0%,86%{opacity:0}90%,100%{opacity:1}}
@keyframes na7-txt{0%,90%{opacity:0}96%,100%{opacity:1}}
/* kapitel 8 — hur ofta & hur dosen ökas (7 s): linjen ritas, stegen tänds, varningen sist */
.na8-linje{stroke-dashoffset:0}
.na8-s{opacity:1;transform:translateY(0)}
.na8-varn{opacity:1}
.na8-v{transform-origin:50% 50%}
.kap.redo .na8-linje{animation-name:na8-linje;animation-duration:7s;animation-timing-function:linear}
.kap.redo .na8-s1{animation-name:na8-s1;animation-duration:7s}
.kap.redo .na8-s2{animation-name:na8-s2;animation-duration:7s}
.kap.redo .na8-s3{animation-name:na8-s3;animation-duration:7s}
.kap.redo .na8-s4{animation-name:na8-s4;animation-duration:7s}
.kap.redo .na8-varn{animation-name:na8-varn;animation-duration:7s}
.kap.redo .na8-v{animation-name:na8-v;animation-duration:.3s;animation-delay:calc(.6s + var(--i,0) * .22s)}
@keyframes na8-linje{0%,6%{stroke-dashoffset:400}66%,100%{stroke-dashoffset:0}}
@keyframes na8-s1{0%,16%{opacity:0;transform:translateY(6px)}24%,100%{opacity:1;transform:translateY(0)}}
@keyframes na8-s2{0%,30%{opacity:0;transform:translateY(6px)}38%,100%{opacity:1;transform:translateY(0)}}
@keyframes na8-s3{0%,44%{opacity:0;transform:translateY(6px)}52%,100%{opacity:1;transform:translateY(0)}}
@keyframes na8-s4{0%,58%{opacity:0;transform:translateY(6px)}66%,100%{opacity:1;transform:translateY(0)}}
@keyframes na8-varn{0%,74%{opacity:0}84%,100%{opacity:1}}
@keyframes na8-v{from{transform:scale(0)}to{transform:scale(1)}}
/* ═══ NYBÖRJARGUIDEN ANIM, del 3 (V8.56, 2026-09-30) — scenerna 10, 11, 12 ═══
   Samma regler: grundläget = slutbilden, .redo = start, .spelar spelar, inga loopar. */
/* kapitel 10 — misstagen (≈4 s): rad för rad, "gör så" först, sedan "inte så" och krysset */
.kap-anim .na10-x{transform-origin:50% 50%}
.kap.redo .na10-g{animation-name:na10-in;animation-duration:.4s;animation-delay:calc(.2s + var(--i,0) * .55s)}
.kap.redo .na10-i{animation-name:na10-in;animation-duration:.4s;animation-delay:calc(.45s + var(--i,0) * .55s)}
.kap.redo .na10-x{animation-name:na10-x;animation-duration:.35s;animation-delay:calc(.7s + var(--i,0) * .55s)}
@keyframes na10-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes na10-x{from{opacity:0;transform:scale(2.2)}to{opacity:1;transform:scale(1)}}
/* kapitel 11 — pennan (8 s): kanylen på, dosratten vrids, dosen i fönstret, knappen in, tio sekunder */
.kap-anim .na11-pil{transform-origin:50% 50%}
.kap-anim .na11-knapp{transform-origin:50% 50%;transform:translateX(7px)}
.kap.redo .na11-kanyl{animation-name:na11-kanyl;animation-duration:8s}
.kap.redo .na11-t1{animation-name:na11-t1;animation-duration:8s}
.kap.redo .na11-pil{animation-name:na11-pil;animation-duration:8s}
.kap.redo .na11-dos{animation-name:na11-dos;animation-duration:8s}
.kap.redo .na11-t2{animation-name:na11-t2;animation-duration:8s}
.kap.redo .na11-knapp{animation-name:na11-knapp;animation-duration:8s}
.kap.redo .na11-t3{animation-name:na11-t3;animation-duration:8s}
.kap.redo .na11-ring{animation-name:na11-ring;animation-duration:8s;animation-timing-function:linear}
@keyframes na11-kanyl{0%,4%{opacity:0;transform:translateX(34px)}8%{opacity:1;transform:translateX(34px)}18%,100%{opacity:1;transform:translateX(0)}}
@keyframes na11-t1{0%,16%{opacity:0}22%,100%{opacity:1}}
@keyframes na11-pil{0%,22%{opacity:0;transform:rotate(-200deg)}26%{opacity:1;transform:rotate(-200deg)}44%{opacity:1;transform:rotate(0)}50%,100%{opacity:1;transform:rotate(0)}}
@keyframes na11-dos{0%,36%{opacity:0;transform:translateY(6px)}44%,100%{opacity:1;transform:translateY(0)}}
@keyframes na11-t2{0%,42%{opacity:0}48%,100%{opacity:1}}
@keyframes na11-knapp{0%,52%{transform:translateX(0)}58%,100%{transform:translateX(7px)}}
@keyframes na11-t3{0%,56%{opacity:0}62%,100%{opacity:1}}
@keyframes na11-ring{0%,60%{stroke-dashoffset:94.3}96%,100%{stroke-dashoffset:0}}
/* kapitel 12 — nässprayn (5 s): pumpen två gånger, dimman, 0,1 ml sist */
.kap-anim .na12-dimma{transform-origin:0% 100%}
.kap.redo .na12-pump{animation-name:na12-pump;animation-duration:5s}
.kap.redo .na12-dimma{animation-name:na12-dimma;animation-duration:5s}
.kap.redo .na12-ml{animation-name:na12-ml;animation-duration:5s}
@keyframes na12-pump{0%,14%{transform:translateY(0)}20%,24%{transform:translateY(7px)}30%,54%{transform:translateY(0)}60%,64%{transform:translateY(7px)}70%,100%{transform:translateY(0)}}
@keyframes na12-dimma{0%,20%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1)}44%,58%{opacity:0;transform:scale(1.15)}70%,100%{opacity:1;transform:scale(1)}}
@keyframes na12-ml{0%,76%{opacity:0}86%,100%{opacity:1}}

/* ── V8.2: ingången till analyssidan på produktsidorna ──────────────────
   Gradienten ligger i ikonens stroke och i kantlinjen — inte som en fylld
   yta, sa den konkurrerar aldrig med kopknappen om blicken. */
.pp-analys{display:flex;align-items:center;gap:11px;margin:12px 0 0;padding:13px 14px;
  border-radius:14px;text-decoration:none;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);transition:border-color .18s,transform .18s,box-shadow .18s}
.pp-analys:hover{transform:translateY(-1px);box-shadow:0 14px 30px -24px rgba(37,99,235,.55)}
.pp-analys.har{border-color:transparent;background:
  linear-gradient(var(--surface),var(--surface)) padding-box,
  linear-gradient(118deg,rgba(37,99,235,.55),rgba(124,58,237,.55)) border-box;
  border:1.5px solid transparent}
.pp-an-ik{flex:0 0 26px;height:26px;display:flex;align-items:center;justify-content:center}
.pp-an-ik svg{width:23px;height:23px}
.pp-an-txt{flex:1;min-width:0}
.pp-an-txt b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.pp-an-txt i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.pp-an-pil{flex:0 0 auto;color:var(--muted)}
.pp-an-pil svg{width:16px;height:16px;display:block}
.pp-analys:hover .pp-an-pil{color:var(--brand-1)}
@media(max-width:560px){.pp-analys{min-height:56px}}
/* V8.7: länken till alla analyser har samma gradientkant som batchbandet. */
.pp-analys.alla{border-color:transparent;background:
  linear-gradient(var(--surface),var(--surface)) padding-box,
  linear-gradient(118deg,rgba(37,99,235,.55),rgba(124,58,237,.55)) border-box;
  border:1.5px solid transparent}


/* ═══ V8.3 PSYKOLOGI/KONVERTERING ═══
   Mini-korg, antalsstegare och delsumma i headern. Ingen nedrakning,
   ingen flygande bild, ingen farg-som-magi — inget av det har stod
   i forskningen. Det har har det: totalpriset direkt, en bekraftelse
   som star kvar, och ett satt att oka antalet utan att byta sida. */

/* ── mini-korg ── */
.pxmk{position:fixed;top:16px;right:16px;z-index:99998;width:320px;max-width:calc(100vw - 32px);
  background:var(--surface,#fff);color:var(--ink,#0A0A0C);
  border:1px solid var(--line,rgba(10,10,12,.1));border-radius:18px;
  box-shadow:0 24px 48px -12px rgba(10,10,12,.25);padding:16px;
  font-family:var(--font-body,system-ui,-apple-system,sans-serif);
  transform:translateX(120%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pxmk.pa{transform:translateX(0)}
.pxmk-topp{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pxmk-topp strong{flex:1;min-width:0;font-size:14px;letter-spacing:-.01em}
.pxmk-ok{width:20px;height:20px;border-radius:50%;background:var(--ok,#0F7A2E);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.pxmk-x{background:none;border:0;cursor:pointer;font-size:20px;line-height:1;
  color:var(--muted,#6B6B73);padding:0 2px;min-width:32px;min-height:32px}
.pxmk-x:hover{color:var(--ink,#0A0A0C)}
.pxmk-vara{font-size:13px;font-weight:600;margin-bottom:10px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pxmk-vara span{font-weight:400;color:var(--muted,#6B6B73)}
.pxmk-rad{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:13px;color:var(--ink-2,#2A2A30);padding:3px 0}
.pxmk-rad b{font-variant-numeric:tabular-nums;font-weight:600}
.pxmk-spar{color:var(--ok,#0F7A2E)}.pxmk-spar b{color:var(--ok,#0F7A2E)}
.pxmk-tot{border-top:1px solid var(--line,rgba(10,10,12,.08));margin-top:5px;padding-top:8px;font-size:14px}
.pxmk-tot b{font-family:var(--font-display,inherit);font-size:17px;font-weight:700;letter-spacing:-.02em}
.pxmk-bar{height:6px;border-radius:99px;background:var(--surface-2,rgba(10,10,12,.06));
  overflow:hidden;margin:11px 0 7px}
.pxmk-bar i{display:block;height:100%;border-radius:99px;background:var(--brand-grad,#0A0A0C);
  transition:width .5s cubic-bezier(.2,.8,.2,1)}
.pxmk-bar.klar i{background:var(--ok,#0F7A2E)}
.pxmk-frakt{font-size:12px;color:var(--muted,#6B6B73);margin-bottom:12px}
.pxmk-frakt b{color:var(--ink,#0A0A0C);font-weight:600}
.pxmk-cta{display:block;text-align:center;background:var(--ink,#0A0A0C);color:#fff;
  padding:12px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;
  margin-bottom:6px;min-height:44px;line-height:20px}
.pxmk-cta:hover{opacity:.9}
.pxmk-fort{display:block;width:100%;text-align:center;background:none;border:0;cursor:pointer;
  color:var(--muted,#6B6B73);font-size:12.5px;padding:8px;min-height:36px;
  font-family:inherit}
.pxmk-fort:hover{color:var(--ink,#0A0A0C)}
/* Botten-tabbarna tar 87 px fran underkanten (matt 390×844) — mini-korgen
   lag 13 px in over dem innan. */
@media(max-width:560px){.pxmk{top:auto;bottom:calc(97px + env(safe-area-inset-bottom));right:12px;left:12px;
  width:auto;max-width:none;transform:translateY(160%)}
  .pxmk.pa{transform:translateY(0)}}
/* En bekraftelse i taget: sidans toast och supportknappen stegar undan. */
body.pxmk-pa #wlToast,body.pxmk-pa .ps-toast{opacity:0!important;pointer-events:none!important}
body.pxmk-pa #wlSupportWrap{opacity:0;pointer-events:none;transition:opacity .2s}

/* ── antalsstegaren (Baymard: köpknappen blir − n + efter första trycket) ──
   Utanför korten: gradientpillret som förut. På produktkorten (V8.91): ett mjukt blått piller med antalet och
   summan, "Du sparar …" och nästa steg i mängdrabatten ("Ta 6 st → −25 %") — riktiga tal ur trappan. */
.px-steg{display:inline-flex;align-items:center;height:44px;padding:0 2px;
  border-radius:999px;background:var(--brand-grad,#0A0A0C);color:#fff}
/* 40×44 per knapp */
.px-steg-b{width:40px;height:100%;border:0;border-radius:999px;background:none;color:#fff;
  cursor:pointer;font-size:17px;line-height:1;font-family:inherit;
  display:inline-flex;align-items:center;justify-content:center;padding:0}
.px-steg-b:hover{background:rgba(255,255,255,.18)}
.px-steg-n{min-width:22px;text-align:center;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;color:#fff}
.px-steg.px-av{display:none!important}
.product-grid .px-steg{display:flex;flex-direction:column;gap:6px;height:auto;padding:0;border-radius:0;background:none;color:inherit;box-shadow:none}
.product-grid .px-steg-rad{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;min-height:44px;border-radius:980px;background:var(--kb-mjuk,#EAF1FE);color:var(--kb-text,#1D4ED8)}
.product-grid .px-steg-b{width:44px;height:44px;min-height:44px;border-radius:980px;color:var(--kb-text,#1D4ED8);font-size:20px}
@media(hover:hover){.product-grid .px-steg-b:hover{background:rgba(37,99,235,.10)}}
.product-grid .px-steg-b:focus-visible{outline:2px solid var(--kb,#2563EB);outline-offset:-2px}
.product-grid .px-steg-mitt{display:flex;flex-direction:column;align-items:center;min-width:0;line-height:1.15;text-align:center}
.product-grid .px-steg-mitt b{font-size:13px;font-weight:600;white-space:nowrap}
.product-grid .px-steg-n{min-width:0;font-size:inherit;font-weight:inherit;color:inherit}
.product-grid .px-steg-s{font-size:11px;font-weight:500;opacity:.75;white-space:nowrap}
.product-grid .px-steg-spar{font-size:12px;font-weight:600;line-height:1.3;color:var(--gron,#0F7A2E);text-align:center}
.product-grid .px-nasta{position:relative;width:100%;min-width:0;min-height:36px;margin:0;padding:0 10px;border:0;border-radius:980px;background:#EAF6EE;color:#0F5E25;
  font:600 12px/1 var(--font-body);white-space:nowrap;cursor:pointer}
.product-grid .px-nasta::after{content:"";position:absolute;inset:-4px 0}
@media(hover:hover){.product-grid .px-nasta:hover{background:#DDF0E3}}
.product-grid .px-nasta:focus-visible{outline:2px solid var(--gron,#0F7A2E);outline-offset:2px}
@container (max-width:199px){.product-grid .px-steg-ik{display:none}}
.product-grid .card-add.px-har{display:none}
.product-grid .card-add.px-har.lagd{display:flex}
.product-grid .card-add.lagd+.px-steg{display:none!important}

/* ── delsumma i headerns korgknapp ── */
.cart-sum{font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:600;opacity:.85;
  margin-left:2px;white-space:nowrap}
@media(max-width:900px){.cart-sum{display:none!important}}


/* ═══ V8.35 Tillbehörskitet ═══ */
.tbh-kit{margin:26px 0;padding:18px;border:1px solid rgba(10,10,12,.09);border-radius:16px;background:#fff}
.tbh-rubrik{display:flex;gap:12px;align-items:flex-start;margin-bottom:10px}
.tbh-rubrik svg{flex:0 0 auto;width:22px;height:22px;color:#0A0A0C;margin-top:2px}
.tbh-rubrik h2{font-size:16px;margin:0;letter-spacing:-.015em}
.tbh-rubrik p{font-size:12.5px;color:#6B6B73;margin:2px 0 0}
.tbh-rad{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(10,10,12,.07)}
.tbh-rad:first-child{border-top:0}
.tbh-media{flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:#F1F5F9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tbh-media img{width:100%;height:100%;object-fit:contain;padding:4px}
.tbh-info{flex:1;min-width:0;display:flex;flex-direction:column}
.tbh-namn{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.tbh-dos{font-size:11.5px;color:#6B6B73}
.tbh-add{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid rgba(10,10,12,.14);border-radius:999px;background:#fff;color:#0A0A0C;font-size:12.5px;font-weight:600;cursor:pointer;transition:transform .15s cubic-bezier(.2,.8,.2,1),border-color .15s}
.tbh-add:hover{border-color:rgba(10,10,12,.3)}
.tbh-add:active{transform:scale(.98)}
.tbh-add:focus-visible,.tbh-mer:focus-visible{outline:2px solid #0A0A0C;outline-offset:2px}
.tbh-pris{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:12px;font-weight:500;color:#6B6B73}
.tbh-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#0F7A2E;font-weight:600;white-space:nowrap}
.tbh-mer{min-width:44px;min-height:44px;border:1px solid rgba(10,10,12,.14);border-radius:999px;background:#fff;color:#0A0A0C;font-size:12.5px;font-weight:600;cursor:pointer;margin-left:8px}
.tbh-mer:active{transform:scale(.98)}
.tbh-kompakt{margin:14px 0;padding:14px}
.tbh-kompakt .tbh-rubrik svg{width:18px;height:18px}
.tbh-kompakt .tbh-rubrik h2{font-size:14px}
/* QA 2026-09-28: kassans egna h2-regler slog igenom (33 px rubrik i sidopanelen) */
.tbh-kit .tbh-rubrik h2{font-size:16px!important;line-height:1.3;font-family:var(--font-display,inherit)}
.tbh-kit.tbh-kompakt .tbh-rubrik h2{font-size:14px!important}
@media(prefers-reduced-motion:reduce){.tbh-add,.tbh-mer{transition:none}}

/* ═══ Kur 9.0: rådgivarens moduler i guiden ═══ */
.dg-varfor{border:1px solid var(--line,rgba(10,10,12,.09));border-left:3px solid #2563EB;border-radius:12px;padding:12px 14px;margin:12px 0;background:#FAFAFE}
.dg-varfor h4{font-size:12.5px;margin:0 0 6px;display:flex;align-items:center;gap:6px}
.dg-varfor h4 svg{width:13px;height:13px;color:#2563EB;flex:0 0 auto}
.dg-varfor p{font-size:12.5px;margin:0 0 4px;color:#3A3A42}
.dg-varfor p.ex{color:#6B6B73}
.dg-varfor p.vann{color:#6B6B73;font-size:11.5px;margin:6px 0 0;font-style:italic}
.dg-kombo{display:flex;align-items:center;gap:8px;font-size:13px;margin-top:14px;padding:10px 12px;border-radius:10px;background:#EFFCF3;color:#0F7A2E}
.dg-kombo svg{width:14px;height:14px;flex:0 0 auto}
.dg-extra{border-top:2px solid var(--line,rgba(10,10,12,.09));margin-top:18px;padding-top:14px}
.dg-extra h3{font-size:15px;margin:0 0 10px;letter-spacing:-.01em}
.dg-minidos{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#3A3A42;margin:10px 0}
.dg-minidos svg{width:13px;height:13px;color:#0F7A2E;flex:0 0 auto}
.dg-varningar{margin-top:14px}
.dg-varningar p{font-size:12px;margin:0 0 6px;padding:8px 10px;border-radius:8px}
.dg-varningar p.info{background:#F4F4F6;color:#3A3A42}
.dg-varningar p.warn{background:#FEF6E7;color:#8A5A00}
.dg-alt{margin-top:10px}
.dg-alt a{color:inherit}
.dg-cta-alla{margin-top:16px}

/* ═══ KURPLANEN (Kur 9.0 steg 3, 2026-09-27) — js/kurplan.js i guiden ═══
   Det bästa ur "Bygg din kur" + "Planera kuren": förslag, bocka i själv,
   kontrollpanel, schema, kalender, PDF, doslogg. Ett kort per del, panelen
   sticky på dator, under innehållet på mobil. */
.kp-kort{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:clamp(14px,2vw,20px);margin:0 0 14px;min-width:0}
.kp-kort>h2{font-family:var(--font-display);font-size:1.2rem;letter-spacing:-.02em;margin:0;line-height:1.2}
.kp-kort>h3{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.02em;margin:0}
.kp-sub{color:var(--muted);font-size:13.5px;margin:4px 0 14px}
.kp-et{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 8px}
.kp-h3{font-family:var(--font-display);font-size:1rem;letter-spacing:-.01em;margin:22px 0 10px}
.kp-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kp-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink)}
.kp-chip small{font-weight:500;color:var(--muted);font-size:12px}
.kp-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.kp-chip.on small{color:rgba(255,255,255,.75)}
.kp-chip:active,.kp-cta:active,.kp-cta2:active,.kp-rknapp:active,.kp-tick:active{transform:scale(.98)}
.kp-start{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:13.5px;font-weight:600;background:var(--surface)}
.kp-start input{border:0;background:transparent;min-height:40px;font-size:13.5px}
.kp-malg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.kp-malg button{display:flex;gap:9px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:12px;padding:10px;min-height:44px;background:var(--surface);font-size:12.5px}
.kp-malg button b{display:block;font-size:13px;line-height:1.25}
.kp-malg button small{display:block;color:var(--muted);font-size:11px;line-height:1.3}
.kp-malg .ik{width:28px;height:28px;border-radius:8px;background:var(--surface-2);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.kp-malg .ik svg{width:16px;height:16px}
.kp-malg button.on{box-shadow:0 0 0 1.5px var(--ink) inset}.kp-malg button.on .ik{background:var(--ink);color:#fff}
.kp-sparad{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:rgba(15,122,46,.08);color:var(--ok);font-size:13.5px;margin:0 0 14px}
.kp-sparad svg{width:16px;height:16px;flex:0 0 auto}.kp-sparad b{color:var(--ink)}
.dg-tre{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
@media(max-width:760px){.dg-tre{grid-template-columns:minmax(0,1fr)}}
.dg-steg a{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:99px;background:rgba(255,255,255,.55);color:inherit}
/* layout */
.kp-lay{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
.kp-huvud{min-width:0}
.kp-panel{position:sticky;top:96px;min-width:0}
/* förslag */
.kp-fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kp-fk{position:relative;border:1px solid var(--line-strong);border-radius:14px;padding:14px;background:var(--surface);min-width:0;transition:border-color .2s var(--ease),opacity .2s var(--ease)}
.kp-fk.on{border:1.5px solid var(--ink)}
.kp-fk:not(.on){opacity:.72}
.kp-tick{position:absolute;top:10px;right:10px;display:inline-flex;gap:6px;align-items:center;min-height:44px;padding:0 6px;font-size:12px;font-weight:700;color:var(--ok)}
.kp-fk:not(.on) .kp-tick{color:var(--muted)}
.kp-ftopp{display:flex;gap:12px;align-items:center;padding-right:96px;color:inherit}
.kp-ftopp img{width:62px;height:62px;border-radius:10px;background:var(--surface-2);object-fit:cover;flex:0 0 auto}
.kp-ftopp b{display:block;font-family:var(--font-display);font-size:15px;line-height:1.25}
.kp-ftopp small{display:block;color:var(--muted);font-size:12px}
.kp-ftopp em{display:block;font-style:normal;font-weight:700;font-size:13.5px;margin-top:2px}
.kp-roller{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.kp-roller span{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--surface-tint);color:#3730A3}
.kp-dos{display:flex;gap:12px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px}
.kp-dos b{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em;line-height:1}
.kp-dos small{display:block;color:var(--muted);font-size:12px}
.kp-box{width:20px;height:20px;border-radius:6px;border:1.5px solid #B9B9C3;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--surface)}
.kp-box.on{background:var(--ink);border-color:var(--ink);color:#fff}
.kp-box svg{width:13px;height:13px}
/* bocka i själv */
.kp-bibl-topp{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.kp-sok{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:12px;padding:0 12px;min-height:44px;background:var(--surface);color:var(--muted)}
.kp-sok svg{width:16px;height:16px;flex:0 0 auto}
.kp-sok input{flex:1;min-width:0;border:0;background:transparent;min-height:42px;font-size:14px;color:var(--ink);outline:0}
.kp-sok:focus-within{border-color:var(--brand-1);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.kp-vaxel{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:13px;font-weight:600}
.kp-vaxel i{width:34px;height:20px;border-radius:999px;background:#C9C9D2;position:relative;display:inline-block;transition:background .2s var(--ease)}
.kp-vaxel i:after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.kp-vaxel.on i{background:var(--ink)}.kp-vaxel.on i:after{transform:translateX(14px)}
.kp-grupp h4{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.kp-rad{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.kp-rknapp{display:flex;gap:10px;align-items:center;text-align:left;min-height:52px;min-width:0}
.kp-rknapp img{width:44px;height:44px;border-radius:8px;background:var(--surface-2);object-fit:cover;flex:0 0 auto}
.kp-rtxt{min-width:0}.kp-rtxt b{font-size:13.5px}.kp-rtxt b small{font-weight:500;color:var(--muted)}
.kp-rtxt>small{display:block;color:var(--muted);font-size:12px;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kp-bad{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.kp-bad.match{background:rgba(15,122,46,.1);color:var(--ok)}.kp-bad.rad{background:var(--surface-tint);color:#3730A3}
.kp-pris{font-weight:700;font-size:13px;white-space:nowrap}
.kp-rad.spärr .kp-rknapp{opacity:.5}
.kp-krock{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--err);background:rgba(220,38,38,.07);border-radius:8px;padding:6px 10px;margin:0 0 4px}
.kp-byt{min-height:32px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid rgba(220,38,38,.3);font-weight:700;font-size:12px;color:var(--err)}
.kp-inga,.kp-antal{font-size:13px;color:var(--muted);margin:12px 0 0}
/* kontrollpanel */
.kp-nyck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:12px 0}
.kp-nyck div{background:var(--surface-2);border-radius:10px;padding:8px;text-align:center}
.kp-nyck b{display:block;font-family:var(--font-display);font-size:20px;letter-spacing:-.02em}
.kp-nyck small{font-size:11px;color:var(--muted)}
.kp-prad{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.kp-prad b{white-space:nowrap}.kp-prad b.ok{color:var(--ok)}
.kp-prad.tot{font-weight:700;font-size:15px}.kp-prad.tot b{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em}
.kp-check{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;padding:8px 10px;border-radius:9px;margin-top:6px}
.kp-check svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}
.kp-check.ok{background:rgba(15,122,46,.08);color:var(--ok)}.kp-check.w{background:rgba(180,83,9,.08);color:var(--warn)}
.kp-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:15px;margin-top:12px}
.kp-cta svg,.kp-cta2 svg{width:17px;height:17px;flex:0 0 auto}
.kp-cta2{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:13px;padding:0 14px}
.kp-panel-in .kp-cta2{width:100%;margin-top:8px}
.kp-lev{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0}.kp-lev a{color:var(--brand-1);font-weight:600}
/* schema */
.kp-faser{width:100%;border-collapse:collapse;font-size:13px}
.kp-faser th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;font-weight:700}
.kp-faser td{padding:10px 8px;border-top:1px solid var(--line);vertical-align:top}
.kp-faser td small{display:block;color:var(--muted);font-size:11.5px}
.kp-seg b{font-family:var(--font-mono);font-size:12px}.kp-seg em{font-style:normal;color:var(--muted);font-size:12px}
.kp-fbar{display:grid;gap:3px;margin-top:6px;max-width:220px}
.kp-fbar i{height:8px;border-radius:3px;background:#DCE4FF}.kp-fbar i.h{background:var(--brand-grad)}
.kp-vhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.kp-vhead b{font-family:var(--font-display)}
.kp-pil{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;background:var(--surface)}
.kp-pil svg{width:18px;height:18px}.kp-pil:disabled{opacity:.35;cursor:default}
.kp-vecka{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.kp-dag{border:1px solid var(--line);border-radius:12px;padding:8px;min-height:110px;background:var(--surface);min-width:0}
.kp-dag>b{font-size:12.5px}.kp-dag>small{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}.kp-dag>em{font-style:normal;color:var(--muted);font-size:11.5px}
.kp-dp{display:flex;align-items:center;gap:6px;width:100%;text-align:left;font-size:11px;line-height:1.25;padding:6px;border-radius:8px;margin-top:4px;min-height:36px}
.kp-dp .kp-box{width:15px;height:15px;border-radius:4px}.kp-dp .kp-box svg{width:10px;height:10px}
.kp-dp.f0{background:#E8F5EC;color:#0F5B25}.kp-dp.f1{background:var(--surface-tint);color:#3730A3}.kp-dp.f2{background:#FDF0E6;color:#8A4204}.kp-dp.f3{background:#F3E8FF;color:#6B21A8}
.kp-dp.klar{text-decoration:line-through;opacity:.7}
.kp-tva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kp-blanda{border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px}
.kp-blanda h4{font-size:13.5px;margin:0 0 6px}
.kp-blanda ol{padding-left:18px;margin:0;color:var(--ink-2)}.kp-blanda li{margin-bottom:3px}
.kp-knappar{display:flex;gap:8px;flex-wrap:wrap}
.kp-efter{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kp-efter div{border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;color:var(--ink-2)}
.kp-efter b{display:block;font-size:13.5px;margin-bottom:3px;color:var(--ink)}
.kp-fusk{border:1.5px dashed #C9C9D2;border-radius:12px;padding:14px;font-family:var(--font-mono);font-size:12px;line-height:1.75;background:#FCFCFB}
.kp-prim .dg-plan{margin-top:6px}
.kp-toast{position:fixed;left:50%;bottom:calc(var(--bottenmeny) + 16px);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;font-weight:600;z-index:200;max-width:calc(100% - 32px);text-align:center;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.kp-toast.pa{opacity:1;transform:translate(-50%,0)}
@media(min-width:901px){.kp-toast{bottom:24px}}
.kp-chip:focus-visible,.kp-malg button:focus-visible,.kp-tick:focus-visible,.kp-rknapp:focus-visible,.kp-vaxel:focus-visible,.kp-cta:focus-visible,.kp-cta2:focus-visible,.kp-pil:focus-visible,.kp-dp:focus-visible,.kp-byt:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
@media(max-width:1100px){.kp-lay{grid-template-columns:minmax(0,1fr)}.kp-panel{position:static}.kp-malg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.kp-fgrid,.kp-tva,.kp-efter{grid-template-columns:minmax(0,1fr)}.kp-vecka{grid-template-columns:repeat(2,minmax(0,1fr))}.kp-malg{grid-template-columns:repeat(2,minmax(0,1fr))}.kp-rad .kp-bad{display:none}.kp-faser td:last-child,.kp-faser th:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.kp-fk,.kp-vaxel i,.kp-vaxel i:after,.kp-toast{transition:none}}
/* Spara som PDF: bara planen */
@media print{
  body.kp-skriv>*:not(main){display:none!important}
  body.kp-skriv main>*:not(.dgp-wiz){display:none!important}
  body.kp-skriv .dgp-side,body.kp-skriv .kp-inst,body.kp-skriv .kp-bibl,body.kp-skriv .kp-forslag,body.kp-skriv .kp-prim,body.kp-skriv .dg-steg,body.kp-skriv .dg-fot,body.kp-skriv .kp-knappar,body.kp-skriv .kp-cta,body.kp-skriv .kp-cta2,body.kp-skriv .kp-lev,body.kp-skriv .dg-varningar,body.kp-skriv .dg-alt,body.kp-skriv .kp-pil{display:none!important}
  body.kp-skriv .kp-lay{display:block}
  body.kp-skriv .glas{box-shadow:none!important;background:#fff!important;border:0!important;padding:0!important}
  body.kp-skriv .kp-kort{break-inside:avoid;border-color:#ccc}
}
.kp-kort>h2{font-size:1.25rem!important;margin:0!important}
table.kp-faser{width:100%!important;max-width:none!important;display:table!important}
.kp-byt{min-height:44px;padding:0 14px}
details.kp-inst>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;min-height:44px}
details.kp-inst>summary::-webkit-details-marker{display:none}
details.kp-inst>summary b{display:block;font-family:var(--font-display);font-size:1.1rem;letter-spacing:-.02em}
details.kp-inst>summary small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
details.kp-inst>summary em{font-style:normal;font-weight:600;font-size:13.5px;color:var(--brand-1);white-space:nowrap}
details.kp-inst[open]>summary em{visibility:hidden}
details.kp-inst[open]>summary{margin-bottom:4px}
.kp-bort summary{cursor:pointer;font-size:13px;color:var(--muted);font-weight:600;min-height:44px;display:flex;align-items:center}
@media(max-width:1100px){.kp-huvud{display:contents}.kp-lay>*,.kp-huvud>*{order:3}.kp-huvud>.kp-forslag{order:1}.kp-lay>.kp-panel{order:2}}
@media(max-width:760px){.dgp-wiz.kp-full #dg{padding:14px 10px!important}.kp-kort{padding:14px 12px}.kp-ftopp{padding-right:0;padding-top:34px}}

/* ========================================================================
   KUNSKAPSBANK/GUIDER — QA 2026-09-28 (punkt A, D, E, M)
   ======================================================================== */
/* A. Sammanslagna sektioner (data-merged) och .art-* saknade all stil — sektionen
   ligger nu inne i .kb-page (kunskapsbank_synk.py) och får samma tabellutseende som
   .kb-table. Ingen ny palett: bara --line/--surface/--muted. */
.kb-page .kb-section[data-merged]{margin:40px 0 0}
.kb-page .kb-section[data-merged] h2{font-size:22px!important;letter-spacing:-.02em;margin:32px 0 12px}
.kb-page .kb-section[data-merged] h3{font-size:17px;margin:22px 0 8px}
.kb-page .kb-section[data-merged] p,.kb-page .kb-section[data-merged] li{font-size:15px;line-height:1.7}
.kb-page .kb-section[data-merged] ul,.kb-page .kb-section[data-merged] ol{padding-left:22px;margin:0 0 14px}
.art-dose-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:14px}
.art-dose-table th{text-align:left;padding:10px 14px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--surface-2)}
.art-dose-table td{padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.art-info-box{margin:16px 0;padding:14px 16px;border-left:3px solid var(--ink);border-radius:0 10px 10px 0;background:var(--surface-2);font-size:14.5px;line-height:1.6}
.art-info-box strong{display:block;margin-bottom:4px}

/* D. Tabeller i .tbl-wrap: wrappen är scrollern (shared.css gör annars table{display:block}
   med egen overflow, så wrappen aldrig scrollar). Scroll-skugga i högerkanten + "Svep"-hint
   som BARA finns när tabellen faktiskt är bredare än wrappen: scroll-driven animation
   (scroll(inline)) är inaktiv utan överskjutande innehåll → grundläget (ingen skugga, ingen
   hint) gäller. Utan stöd (äldre Safari): skugga + hint under 640 px, där tabellerna har
   min-width 440 px och alltid skjuter över. Inga täckande färgfält — sidbakgrunden är en
   mjuk gradient (GLAS 5.0), så background-attachment:local-tricket ser fel ut här. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}
.tbl-wrap>table{display:table!important;overflow:visible!important;width:100%;max-width:none!important}
.tbl-wrap::after{content:"Svep åt sidan för hela tabellen \2192";display:block;text-align:right;font-size:12px;font-weight:600;color:var(--muted);
  line-height:22px;padding:0 6px;height:0;opacity:0;overflow:hidden;pointer-events:none}
@supports(animation-timeline:scroll()){
  .tbl-wrap{animation:px-tbl-skugga linear both;animation-timeline:scroll(self inline)}
  .tbl-wrap::after{animation:px-tbl-hint linear both;animation-timeline:scroll(nearest inline)}
  @keyframes px-tbl-skugga{
    0%{box-shadow:inset -28px 0 22px -22px rgba(10,10,12,.28)}
    12%,88%{box-shadow:inset -28px 0 22px -22px rgba(10,10,12,.28),inset 28px 0 22px -22px rgba(10,10,12,.28)}
    100%{box-shadow:inset 28px 0 22px -22px rgba(10,10,12,.28)}}
  @keyframes px-tbl-hint{0%{height:24px;opacity:1}45%,100%{height:24px;opacity:0}}
}
@supports not (animation-timeline:scroll()){
  @media(max-width:640px){.tbl-wrap{box-shadow:inset -28px 0 22px -22px rgba(10,10,12,.28)}.tbl-wrap::after{height:24px;opacity:1}}
}

/* E. .kb-cta bär gradient (regeln ovan, !important) — sekundärknappen .alt var blå text på
   blått. Vit text + vit ram: 5,2:1 mot #2563EB, 5,7:1 mot #7C3AED. */
.kb-cta a.alt{color:#fff!important;background:transparent!important;border:1px solid rgba(255,255,255,.75)!important}
.kb-cta a.alt:hover{background:rgba(255,255,255,.12)!important}

/* M. Inline-länkar i brödtext ska gå att skilja från text: brand-färg + tunn understrykning.
   Knappar/kort (a med klass) och kb-rel/kb-cta-länkar rörs inte. */
.kb-page :is(p,li,td,th,dd) a:not([class]),.kb-page .art-info-box a:not([class]),
.gd-sec :is(p,li,td,th,dd) a:not([class]),.gd-note a:not([class]),
.dz-sec :is(p,li,td,th,dd) a:not([class]),.jf-sec :is(p,li,td,th,dd) a:not([class]){
  color:var(--brand-1);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(37,99,235,.55)}
.kb-page :is(p,li,td,th,dd) a:not([class]):hover,.gd-sec :is(p,li,td,th,dd) a:not([class]):hover,
.dz-sec :is(p,li,td,th,dd) a:not([class]):hover,.jf-sec :is(p,li,td,th,dd) a:not([class]):hover{text-decoration-color:currentColor}
/* "Tillbaka"-länkarna var 13 px och ~20 px höga på guide/dosering/jämför */
.kb-back,.gd-back,.dz-back,.jf-back{font-size:15px!important;min-height:44px;display:inline-flex!important;align-items:center;gap:6px}

/* ========================================================================
   QA 2026-09-29 (agent A/C) — regler inlämnade via _css-kb.txt / _css-kat.txt,
   inlagda av agent B efter KUNSKAPSBANK/GUIDER-blocket så de vinner över inline-<style>.
   ======================================================================== */
/* A14. .kb-cta bär gradient (regeln ".btn.p,…,.kb-cta{background:var(--brand-grad)!important}")
   och primärknappen "Till shoppen →" (a utan .alt) hade också gradient i sidornas inline-CSS →
   gradient-på-gradient, knappen syntes knappt. Vit knapp med brand-blå text (kontrast 5,2:1
   mot #2563EB-gradienten). .alt-knappen (regel E ovan) rörs inte. */
.kb-cta a:not(.alt){background:#fff!important;color:var(--brand-1)!important;box-shadow:0 6px 18px -10px rgba(10,10,12,.5)}
.kb-cta a:not(.alt):hover{background:#F4F3EE!important;color:var(--brand-1)!important;transform:translateY(-1px)}

/* A2. Rutan "X utgår ur vårt sortiment — vi rekommenderar Retatrutide" överst på kunskapsbank/semaglutide,
   tirzepatide, cagrilintid, kopa-semaglutide-sverige, kopa-tirzepatide-sverige (markup .art-info-box.kb-utgar,
   skrivs av agent/kunskapsbank_synk.py). Renderas redan via .art-info-box; den här regeln ger bara
   samma bärnstensfärgade kant som "Slut — går att boka" (#B45309) så rutan skiljer sig från vanliga infoboxar. */
.kb-utgar{border-left-color:#B45309;margin:14px 0 4px}
.kb-utgar strong{color:#B45309}

/* QA 2026-09-29 (B14): kategorisidornas rutnät (inline-CSS ur agent/kategorisynk.py
   säger repeat(2,1fr)!important) fick ojämna kolumner på 390 px — 210/140 — när ett
   kort bar ett långt obrytbart ord (mg-chipet "32G 6mm", "30G 12.7mm"). 1fr = minmax(auto,1fr);
   minmax(0,1fr) låter kolumnerna vara lika breda och ordet bryts i stället. */
div.kt-prods.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
@media(max-width:760px){div.kt-prods.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}   /* V8.96: två i bredd även i telefonen */
div.kt-prods.product-grid>.card{min-width:0}

/* QA 2026-09-29 (agent C) — C9: prisbalken göms medan Kom igång-panelen är öppen (body.mk-oppen sätts av shared.js). */
body.mk-oppen .fm-sticky{opacity:0;pointer-events:none;transition:opacity .2s}


/* ═══ MENYN 7.2 (2026-09-29) — ägarens ord efter 7.1 live: "Shop, Dosering, Meny,
   Spåra, Analys — Meny ska istället vara en snygg perfekt samlingslänk för alla
   länkar vi har på sajten … designen som är på meny ska appliceras på shop".
   Header (facit korg.html → agent/meny.py --tvang): logo · Shop (knapp → #shopPanel)
   · Dosering · [Meny] (→ #mkPanel) · Spåra · Analys · sök · Varukorg. Bottenmeny
   (shared.js): samma fem, Meny som 58 px-cirkel i mitten. Två paneler ur samma
   fabrik (shared.js byggPanel): SHOP = gradient-CTA "Visa alla N peptider" +
   kategorier med antal + Mest köpta (js/menydata.js, agent/menysynk.py);
   MENY = "Allt på PepDix", länkkartan i fyra grupper + chips + Telegram.
   7.1 (Kom igång-länk, allt i en panel) ersatte NAV 6.0 och V8.5-Analysblocket. ═══ */
.nav .nav-inner{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important}
.nav .logo{margin-right:0!important;justify-self:start}
.nav .nav-links{justify-self:center;justify-content:center!important;gap:2px!important}
.nav .nav-actions{justify-self:end}
.nav .nav-actions .icon-btn{flex:none}
/* Kvittosidan (bekraftelse.html) bär ordernumret i headern (#navOrderId — sidans skript skriver dit, och
   agent/meny.py flyttar med elementet). I rutnätet logo · meny · åtgärder blev det ett fjärde barn som tog
   åtgärdernas plats: sök och Varukorg föll ner på en egen rad UNDER menypillret, på mobil och dator (mätt
   2026-10-06 — så sedan Menyn 7.1). Numret står överst på kvittot (#ordNr); i headern döljs det, elementet
   finns kvar för skriptet. */
.nav .nav-inner>#navOrderId{display:none}
/* ═══ MENYN 8.0 — DATORNS RAD (V8.70 del 2; ägaren om mockupen 2026-10-06: "ja gillar den på datorn") ═══
   EN rad, 60 px hög och 10 px från överkanten (70 px i stället för 88): märket · Shop ▾ · Dosering ·
   [Omdömen & reviews | Labbanalys] · Spåra · Meny ▾ · sök · Varukorg. En färgad knapp: Varukorg.
   Beviset — omdömena och labbanalyserna — sitter ihop i en kapsel med gradientkant. Meny är en post
   som de andra (lista + pil) och blir svart när panelen är öppen; den svarta pillen i mitten är borta.
   Underlag: agent/mockuper/v8.70-menyn/ (nav.css, oversikt-dator.jpg). Markupen: facit korg.html →
   agent/meny.py --tvang.
   ALLT HÄR GÄLLER FRÅN 901 px. Mobilens rad (märket, sök, korgen) och bottenmenyn är orörda — rita
   aldrig om dem utan ägarens ord. Reglerna för .nav .nav-links … är datorns av sig själva (länkarna
   är dolda till och med 900 px); allt annat i headern står inne i @media(min-width:901px) längre ner.
   Kassans header (märket + trygghetsraden, samma .nav-inner) får samma rad. */
.nav .nav-links .nav-link{height:40px;padding:0 12px!important;gap:7px!important;border-radius:12px!important;font-size:14.5px!important;font-weight:500!important;color:var(--ink-2)!important;position:relative;transition:background-color .15s var(--ease),color .15s var(--ease)}
.nav .nav-links .nav-link>svg{width:17px;height:17px;flex:0 0 auto;opacity:.8}
/* tryckytan är radens hela höjd (60 px) — också för den som pekar med fingret på en bred skärm */
.nav .nav-links .nav-link::before{content:"";position:absolute;inset:-10px 0}
.nav .nav-links .nav-link:hover{background:rgba(10,10,12,.05)!important;color:var(--ink)!important}
.nav .nav-links .nav-link:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
/* sidan man står på: tonad platta (aria-current sätts av agent/meny.py). Pricken från 7.2 är borta. */
.nav .nav-links .nav-link[aria-current="page"]{background:rgba(10,10,12,.07)!important;color:var(--ink)!important;font-weight:600!important}
/* Shop och Meny öppnar en panel: pilen vänder och posten blir svart så länge panelen är öppen */
.nav .nav-links .nav-link .nav-pil{display:flex;margin-left:-2px;opacity:.55;transition:transform .26s var(--pop,cubic-bezier(.34,1.56,.64,1))}
.nav .nav-links .nav-link .nav-pil svg{width:13px;height:13px;display:block}
.nav .nav-links .nav-link[aria-expanded="true"]{background:var(--ink)!important;color:#fff!important;font-weight:600!important}
.nav .nav-links .nav-link[aria-expanded="true"]>svg{opacity:1}
.nav .nav-links .nav-link[aria-expanded="true"] .nav-pil{transform:rotate(180deg);opacity:.9}
/* ── BEVISKAPSELN: Omdömen & reviews | Labbanalys ──
   Vit kapsel med gradientkant, två poster med var sin gradientruta (pratbubbla med stjärna, sköld med
   bock — samma sköld som analysmärket på produktkorten och i bottenmenyn) och ett tunt streck emellan.
   Namnen står i bläck: gradienten bär kanten och rutorna. Sidan man står på får en blå ton. */
.nav .nav-links .nav-bevis{display:inline-flex;align-items:center;height:40px;margin:0 6px;padding:0 3px;border:1.5px solid transparent;border-radius:13px;background:linear-gradient(#fff,#fff) padding-box,var(--brand-grad) border-box}
.nav .nav-links .nav-bevis .nav-link{height:31px;padding:0 10px 0 5px!important;border-radius:9px!important;font-weight:600!important;color:var(--ink)!important}
.nav .nav-links .nav-bevis .nav-link::before{inset:-14.5px 0}
.nav .nav-links .nav-bevis .nav-link+.nav-link{margin-left:7px}
.nav .nav-links .nav-bevis .nav-link+.nav-link::after{content:"";position:absolute;left:-4px;top:7px;bottom:7px;width:1px;background:rgba(10,10,12,.12)}
.nav-bevis .na-ik{width:22px;height:22px;border-radius:7px;background:var(--brand-grad);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.nav-bevis .na-ik svg{width:13px;height:13px;display:block}
.nav .nav-links .nav-bevis .nav-link[aria-current="page"]{background:rgba(37,99,235,.09)!important}
.mk-hb{width:16px;height:12px;position:relative;display:block}
.mk-hb i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:#fff;transition:transform .32s var(--pop,cubic-bezier(.34,1.56,.64,1)),opacity .2s,top .32s var(--pop,cubic-bezier(.34,1.56,.64,1))}
.mk-hb i:nth-child(1){top:0}.mk-hb i:nth-child(2){top:5px}.mk-hb i:nth-child(3){top:10px}
[aria-expanded="true"] .mk-hb i:nth-child(1){top:5px;transform:rotate(45deg)}
[aria-expanded="true"] .mk-hb i:nth-child(2){opacity:0;transform:scaleX(.2)}
[aria-expanded="true"] .mk-hb i:nth-child(3){top:5px;transform:rotate(-45deg)}
.mk-lbl{position:relative;width:44px;height:18px;overflow:hidden;display:block;text-align:left}
.mk-lbl span{position:absolute;left:0;top:0;line-height:18px;transition:transform .3s var(--ease),opacity .2s}
.mk-lbl span+span{transform:translateY(120%);opacity:0}
[aria-expanded="true"] .mk-lbl span:first-child{transform:translateY(-120%);opacity:0}
[aria-expanded="true"] .mk-lbl span+span{transform:none;opacity:1}
/* raden själv — bara på dator */
@media(min-width:901px){
  .nav{padding:10px 0 0!important}
  .nav>.shell{max-width:1280px;padding:0 20px!important}
  /* radens utseende — huvudmenyn och kassans header */
  .nav .nav-inner{height:60px!important;border-radius:20px;
    background:rgba(255,255,255,.8)!important;-webkit-backdrop-filter:saturate(1.6) blur(20px);backdrop-filter:saturate(1.6) blur(20px);
    border:1px solid rgba(255,255,255,.92);box-shadow:0 22px 44px -30px rgba(20,20,60,.5),0 0 0 1px rgba(10,10,12,.03)}
  /* huvudmenyn (.nav > .shell > .nav-inner): märket, länkarna i mitten av luften, åtgärderna till höger */
  .nav>.shell>.nav-inner{display:flex!important;gap:4px!important;padding:0 9px 0 16px!important}
  /* kassan (.nav > .shell.nav-inner — raden ÄR skalet): samma bredd och kant, upplägget (märket, trygghetsraden i mitten) står kvar */
  .nav>.shell.nav-inner{width:calc(100% - 40px);max-width:1240px;padding:0 16px!important}
  .nav .logo{margin-right:6px!important;font-size:19px!important;gap:10px!important;letter-spacing:-.02em;line-height:1}
  .nav .logo-mark{width:32px!important;height:32px!important}
  .nav .nav-links{margin:0 auto;gap:2px!important}
  .nav .nav-links>*,.nav .nav-links .nav-bevis>*{flex:0 0 auto}   /* en post trycks aldrig ihop — bredderna byts i stegen nedan */
  .nav .nav-actions{margin-left:6px;gap:8px!important;flex:0 0 auto}
  .nav .icon-btn{width:42px!important;height:42px!important;background:#fff!important;border:1px solid rgba(10,10,12,.07)!important}
  .nav .cart-btn{height:44px!important;padding:0 18px 0 15px!important;gap:9px!important;border-radius:14px!important;font-size:14.5px!important;font-weight:600!important;box-shadow:0 14px 26px -14px rgba(37,99,235,.75)!important}
  .nav .cart-btn .cart-count{min-width:20px;height:20px;font-size:11.5px}
}
/* STEGEN (V8.129: Support-fliken tog 106 px — mätt om med 12 varor, 15 068 kr och en rullningslist på 17 px, som
   tar av sidans bredd men inte av mediefrågans; varje steg har minst 15 px luft på båda sidor om länkarna).
   Delsumman i korgknappen (V8.3) står där den ryms: från 1280 px. Där ersätter den ordet "Varukorg" när korgen har
   varor (shared.js sätter .har-summa) — ord + summa ryms inte bredvid Support. Ordet finns kvar för skärmläsare. */
@media(min-width:901px) and (max-width:1279px){.cart-sum{display:none!important}}
@media(min-width:901px){
  .nav .cart-btn.har-summa .cart-label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav .cart-btn.har-summa .cart-sum{opacity:1}
}
/* 901–1279 px: fliken heter "Omdömen" och korgen visar ikon + antal (hela namnen + "Varukorg" kräver 1 280 px) */
@media(min-width:901px) and (max-width:1279px){
  .nav .nav-links .nav-omdome .na-lang{display:none}
  .nav .cart-label{display:none!important}
  .nav .cart-btn{padding:0 13px!important;gap:7px!important;min-width:44px;justify-content:center}
}
/* 901–1129 px: posterna utan ikon och tätare (med ikoner blir luften kring länkarna under 15 px) */
@media(min-width:901px) and (max-width:1129px){
  .nav>.shell{padding:0 10px!important}
  .nav>.shell>.nav-inner{padding:0 8px 0 12px!important;gap:2px!important}
  .nav .nav-links{gap:0!important}
  .nav .nav-links>.nav-link>svg{display:none}
  .nav .nav-links .nav-link{padding:0 9px!important}
  .nav .nav-links .nav-bevis{margin:0 3px}
  .nav .nav-links .nav-bevis .nav-link{padding:0 8px 0 5px!important}
  .nav .nav-actions{margin-left:2px;gap:6px!important}
}
/* 901–936 px: Support-fliken vilar (den finns i Meny-arket och i supportknappen) — annars under 15 px luft */
@media(min-width:901px) and (max-width:936px){.nav .nav-links .nav-support{display:none!important}}
/* kassans header (raden ÄR skalet) står kvar på sitt gamla steg: 10 px till kanten till och med 1039 px */
@media(min-width:901px) and (max-width:1039px){
  .nav>.shell.nav-inner{width:calc(100% - 20px);padding:0 12px!important}
}
@media(max-width:900px){
  .nav .nav-inner{grid-template-columns:1fr auto!important}
  .nav .nav-links{display:none!important}
}

/* ── bottenmenyn: fem platser, Meny i mitten som cirkel som lyfter ur baren ── */
@media(max-width:900px){
  .bottom-tabs{padding:0 4px calc(0px + env(safe-area-inset-bottom))!important;height:calc(64px + env(safe-area-inset-bottom));overflow:visible}
  .bottom-tabs-inner{display:grid!important;grid-template-columns:1fr 1fr 64px 1fr 1fr;align-items:center;height:64px;max-width:540px;margin:0 auto;gap:0!important;padding:0 2px}
  .btab{min-height:56px;height:56px;padding:0 2px;gap:3px;font-size:9.5px;font-weight:500;color:var(--muted);border-radius:14px;justify-content:center}
  .btab-label{font-size:9.5px;letter-spacing:0;white-space:nowrap;overflow:visible;max-width:none}
  .btab-icon svg{width:21px;height:21px;stroke-width:1.9}
  .btab.active{color:var(--ink);font-weight:600}
  .btab.active .btab-icon{color:var(--brand-1)}
  .btab.active .btab-icon svg{stroke-width:2}
  /* Labbanalys (V8.68): gradientrutan med sköld — samma märke som på produktkorten. Rutan är 28 px men
     tar ikonens 21 px i höjd (negativ marginal), så etiketten står på samma rad som de andras. */
  .btab.btab-analys .btab-icon{width:28px;height:28px;margin:-5px 0 -2px;border-radius:9px;background:var(--brand-grad);color:#fff;display:grid;place-items:center;box-shadow:0 8px 14px -8px rgba(37,99,235,.8),inset 0 1px 0 rgba(255,255,255,.3)}
  .btab.btab-analys .btab-icon svg{width:16px;height:16px;stroke-width:2.3}
  .btab.btab-analys .btab-label{font-weight:600;color:var(--brand-1);background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .btab.btab-analys.active .btab-icon{color:#fff;box-shadow:0 0 0 2px var(--bg,#F2F0EA),0 0 0 3.5px var(--brand-1)}
  .btab.btab-analys.active .btab-icon svg{stroke-width:2.3}
  /* 320 px: fliken är 54 px och "Labbanalys" 51 — en halv punkt mindre ger luft mot barens rundade hörn */
  @media(max-width:340px){.btab.btab-analys .btab-label{font-size:9px}}
  .btab.btab-navet{flex:none;min-height:0;height:auto;position:relative;color:var(--ink);transform:translateY(-16px);padding:0;gap:0;overflow:visible;width:64px;-webkit-tap-highlight-color:transparent}
  .btab.btab-navet .btab-icon.mk-c{width:58px;height:58px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;margin:0 auto;position:relative;box-shadow:0 12px 26px -10px rgba(10,10,12,.7);border:3px solid var(--bg,#F2F0EA);transform:none;transition:transform .2s var(--pop,cubic-bezier(.34,1.56,.64,1))}
  .btab.btab-navet .btab-icon.mk-c::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brand-grad);opacity:1;transition:opacity .3s}
  .btab.btab-navet[aria-expanded="true"] .btab-icon.mk-c::before{opacity:0}
  .btab.btab-navet:active .btab-icon.mk-c{transform:scale(.95)}
  .btab.btab-navet .mk-hb{width:18px;height:14px;position:relative;z-index:1}
  .btab.btab-navet .mk-hb i:nth-child(2){top:6px}.btab.btab-navet .mk-hb i:nth-child(3){top:12px}
  .btab.btab-navet[aria-expanded="true"] .mk-hb i:nth-child(1){top:6px}
  .btab.btab-navet[aria-expanded="true"] .mk-hb i:nth-child(3){top:6px}
  .btab.btab-navet .btab-label.mk-lbl{font-size:10px;font-weight:600;color:var(--ink);margin-top:4px;width:38px;height:14px;text-align:center}
  .btab.btab-navet .btab-label.mk-lbl span{left:0;right:0;line-height:14px}
  body.mk-oppen{overflow:hidden}
  /* baren ligger över skärmen (z 129) medan panelen är öppen, så mittknappen syns som kryss och stänger */
  body.mk-oppen .bottom-tabs{z-index:131!important}
}

/* ── panelen ── */
.mk-panel{position:fixed;z-index:130!important;background:rgba(255,255,255,.92)!important;-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);border:1px solid rgba(255,255,255,.75)!important;border-radius:26px!important;box-shadow:0 30px 70px -30px rgba(10,10,12,.45)!important;padding:20px 20px 16px!important;color:var(--ink);
  opacity:0;transform:translateY(-10px) scale(.985);transform-origin:50% 0;pointer-events:none;visibility:hidden;transition:opacity .28s var(--ease),transform .32s var(--ease),visibility 0s .32s;outline:none}
.mk-panel.oppen{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .28s var(--ease),transform .32s var(--ease),visibility 0s}
.mk-skarm{position:fixed;inset:0;z-index:129!important;background:rgba(10,10,12,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.mk-skarm.pa{opacity:1;pointer-events:auto}
body.mk-oppen .tg-float-wrap,body.mk-oppen #wlSupportWrap{opacity:0;pointer-events:none;transition:opacity .2s}
/* headern ligger över skärmen medan panelen är öppen (som i mockupen): knappen syns som kryss och tonas inte */
body.mk-oppen header.nav{z-index:131}
.mk-ik{width:24px;height:24px;display:block;flex:none}
.mk-eb{font-family:var(--font-mono,ui-monospace,monospace);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.mk-eb2{margin-top:14px}
.mk-sok{display:none}
.mk-g{display:grid;grid-template-columns:1.9fr 1fr;gap:22px}
.mk-g>.mk-kol{min-width:0}
/* kategorirutorna */
.mk-kat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mk-kt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--surface,#fff);border:1px solid rgba(10,10,12,.06);text-decoration:none;color:var(--ink);min-height:62px;position:relative;
  opacity:0;transform:translateY(8px);transition:transform .18s var(--ease),box-shadow .18s}
.mk-panel.oppen .mk-kt{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .4s var(--ease),box-shadow .18s}
.mk-panel.oppen .mk-kt:nth-child(1){transition-delay:.04s}.mk-panel.oppen .mk-kt:nth-child(2){transition-delay:.08s}.mk-panel.oppen .mk-kt:nth-child(3){transition-delay:.12s}.mk-panel.oppen .mk-kt:nth-child(4){transition-delay:.16s}
.mk-panel.oppen .mk-kt:nth-child(5){transition-delay:.2s}.mk-panel.oppen .mk-kt:nth-child(6){transition-delay:.24s}.mk-panel.oppen .mk-kt:nth-child(7){transition-delay:.28s}.mk-panel.oppen .mk-kt:nth-child(8){transition-delay:.32s}
.mk-kt:hover,.mk-kt:focus-visible{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(10,10,12,.35);outline:none}
.mk-kt:focus-visible{box-shadow:0 0 0 2px var(--brand-1)}
.mk-kt-txt{min-width:0;flex:1 1 auto;display:block}
.mk-bx{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;color:var(--ink);background:var(--surface-2,#F1F0EA)}
.mk-bx .mk-ik{width:22px;height:22px}
.mk-bx.a{background:#E6EFEA;color:#0F8A5F}.mk-bx.b{background:#E7ECFB;color:#2563EB}.mk-bx.c{background:#F0E8FA;color:#7C3AED}.mk-bx.d{background:#FBEBDD;color:#B45309}.mk-bx.e{background:#FBE4EA;color:#BE185D}.mk-bx.f{background:#E4F1F5;color:#0E7490}.mk-bx.g{background:#F1F0EA;color:#3F3F46}
.mk-t{display:block;font-family:var(--font-display);font-weight:600;font-size:13.5px;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-u{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-n{margin-left:auto;flex:none;font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;color:var(--muted);background:var(--surface-2,#F1F0EA);border-radius:999px;padding:2px 8px;line-height:1.5}
/* CTA:n överst i Shop-panelen — det ägaren ville ha tydligare: "Visa alla 55 peptider" */
.mk-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 16px;padding:12px 12px 12px 20px;min-height:64px;border-radius:18px;background:var(--brand-grad);color:#fff;text-decoration:none;box-shadow:0 14px 30px -14px rgba(124,58,237,.7);transition:transform .2s var(--pop,cubic-bezier(.34,1.56,.64,1)),box-shadow .2s}
.mk-cta:hover{transform:translateY(-1px);box-shadow:0 18px 34px -14px rgba(124,58,237,.8)}
.mk-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mk-cta-txt{min-width:0}
.mk-cta b{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.mk-cta small{display:block;font-size:12.5px;color:rgba(255,255,255,.82);margin-top:3px;font-weight:500}
.mk-cta-pil{width:40px;height:40px;border-radius:999px;background:#fff;color:var(--brand-1);display:grid;place-items:center;flex:none}
.mk-cta-pil .mk-ik{width:18px;height:18px;stroke-width:2.2}
/* Mest köpta */
.mk-topp{display:block}
.mk-pr{display:flex;align-items:center;gap:10px;padding:6px 6px;border-radius:12px;text-decoration:none;color:var(--ink);min-height:44px;position:relative}
.mk-pr:hover{background:rgba(10,10,12,.05)}
.mk-pr img{width:44px;height:44px;border-radius:11px;object-fit:cover;background:var(--surface,#fff);border:1px solid rgba(10,10,12,.06);flex:none}
.mk-pr-txt{min-width:0;flex:1 1 auto;display:block}
.mk-pt{display:block;font-weight:600;font-size:13.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-pp{display:block;font-family:var(--font-mono,ui-monospace,monospace);font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap}
.mk-pp b{color:var(--ink);font-weight:500}
.mk-plus{margin-left:auto;width:44px;height:44px;flex:none;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;color:#fff;-webkit-tap-highlight-color:transparent;min-height:0}
.mk-plus::before{content:"";position:absolute;width:26px;height:26px;border-radius:999px;background:var(--ink);transition:transform .2s var(--pop,cubic-bezier(.34,1.56,.64,1)),background .2s}
.mk-plus .mk-ik{width:13px;height:13px;position:relative}
.mk-plus:hover::before{transform:scale(1.1)}
.mk-plus.lagd::before{background:var(--ok,#0F8A5F);transform:scale(1.15)}
.mk-plus:focus-visible{outline:none}.mk-plus:focus-visible::before{box-shadow:0 0 0 2px var(--brand-1)}
.mk-panel .px-steg{display:none!important}
/* ═══ MENY-ARKET 8.1 (V8.70) — sex kvadratiska rutor + resten mindre ═══
   KN 2026-10-07: "kvadratiga boxar med länkar till alla viktigaste som Omdömen … under dessa 6
   kvadratiga boxar ska resten komma av flikarna o de ska vara tydligt o mindre". Markupen byggs i
   shared.js (byggMenyPaneler). Mätt på riktiga sajten varje pixel 320–430 px och 901–1920 px —
   underlag och mått: agent/mockuper/v8.70-menyn/. Ändra aldrig ett steg utan att mäta om. */
.mk-rutor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-ru{position:relative;aspect-ratio:1/1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:10px 10px 9px;border-radius:16px;background:var(--surface,#fff);border:1px solid rgba(10,10,12,.06);color:var(--ink);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s}
.mk-ru .mk-bx{width:34px;height:34px;border-radius:11px}
.mk-ru .mk-bx .mk-ik{width:19px;height:19px}
.mk-ru-t{display:block;max-width:100%;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:-.01em;line-height:1.15;color:inherit}
.mk-ru-t .nb{white-space:nowrap}
.mk-ru:hover,.mk-ru:focus-visible{transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(10,10,12,.35);outline:none}
.mk-ru:focus-visible{box-shadow:0 0 0 2px var(--brand-1)}
.mk-ru:active{transform:scale(.98)}
.mk-ru.har{background:rgba(37,99,235,.07);border-color:rgba(37,99,235,.28)}
/* första rutan — beviset: gradientram, gradientruta, namnet i gradienten (samma språk som Labbanalys-fliken) */
.mk-ru.bevis{border:1.5px solid transparent;background:linear-gradient(var(--surface,#fff),var(--surface,#fff)) padding-box,var(--brand-grad) border-box;padding:9.5px 9.5px 8.5px}
.mk-ru.bevis.har{background:linear-gradient(#F0F4FE,#F0F4FE) padding-box,var(--brand-grad) border-box}
.mk-ru.bevis .mk-bx{background:var(--brand-grad);color:#fff;box-shadow:0 8px 14px -8px rgba(37,99,235,.8),inset 0 1px 0 rgba(255,255,255,.3)}
.mk-ru.bevis .mk-ru-t{color:var(--brand-1);background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* resten: tre grupper × fyra rader, två kolumner på mobil */
.mk-lista{margin-top:4px}
.mk-lr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
.mk-lista .mk-eb{display:flex;align-items:center;gap:7px;margin:7px 0 0 4px;font-size:10px;line-height:13px}
.mk-lista .mk-eb i{width:7px;height:7px;border-radius:99px;background:var(--muted);flex:none}
.mk-lista .mk-eb.b i{background:#2563EB}.mk-lista .mk-eb.c i{background:#7C3AED}.mk-lista .mk-eb.a i{background:#0F8A5F}
.mk-li{display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;padding:0 4px;border-radius:10px;color:var(--ink);text-decoration:none;font-family:var(--font-body);font-weight:600;font-size:13px;line-height:1.15}
.mk-li .mk-bx{width:28px;height:28px;border-radius:8px}
.mk-li .mk-bx .mk-ik{width:15px;height:15px}
.mk-li-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-li:hover,.mk-li:focus-visible{background:rgba(10,10,12,.05);outline:none}
.mk-li:focus-visible{box-shadow:0 0 0 2px var(--brand-1)}
.mk-li.har{background:rgba(37,99,235,.07)}
/* foten — mobil: brevknapp + svart knapp i en rad. Dator: hjälprutan (samma element, en knapp och ett mål) */
.mk-fot.kort{display:flex;align-items:center;gap:8px;margin-top:10px}
.mk-fot-eb,.mk-fot-rub,.mk-fot-txt,.mk-post-t{display:none}
.mk-tele{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;text-decoration:none;white-space:nowrap}
.mk-tele .mk-ik{width:16px;height:16px}
.mk-fot.kort .mk-tele{flex:1}
.mk-post{order:-1;width:44px;height:44px;flex:none;border-radius:999px;display:grid;place-items:center;background:var(--surface,#fff);border:1px solid rgba(10,10,12,.12);color:var(--ink);text-decoration:none}
.mk-post .mk-ik{width:17px;height:17px}
.mk-tele:focus-visible,.mk-post:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
.mk-tele:active,.mk-post:active{transform:scale(.98)}
/* mobil: arket kramar innehållet — fäst i nederkant, högst så högt som förut (84 px upptill, bottenmenyn + 26 px nedtill).
   Utan dvh (äldre webbläsare) gäller den fasta ramen från .mk-panel. */
@media(max-width:900px){
  @supports (height:100dvh){
    .mk-panel.karta{top:auto!important;max-height:calc(100dvh - 84px - env(safe-area-inset-top) - var(--bottenmeny,78px) - 26px)}
  }
}
/* smala telefoner: två textsteg (mätt: inget rutnamn över två rader, inget radnamn klipps) */
@media(max-width:374px){
  .mk-ru-t{font-size:12.5px}
  .mk-lr{column-gap:8px}
  .mk-li{gap:8px;padding:0 2px;font-size:12.5px}
  .mk-li .mk-bx{width:26px;height:26px}
}
@media(max-width:345px){
  .mk-rutor{gap:6px}
  .mk-ru{padding:8px 8px 7px;border-radius:14px}
  .mk-ru.bevis{padding:7.5px 7.5px 6.5px}
  .mk-ru .mk-bx{width:30px;height:30px;border-radius:9px}
  .mk-ru .mk-bx .mk-ik{width:16px;height:16px}
  .mk-ru-t{font-size:12px}
  .mk-lr{column-gap:6px}
  .mk-li{gap:6px;font-size:12px}
  .mk-li .mk-bx{width:22px;height:22px;border-radius:7px}
  .mk-li .mk-bx .mk-ik{width:13px;height:13px}
}
/* surfplatta 601–900 px: sex rutor i en rad, grupperna bredvid varandra */
@media(min-width:601px) and (max-width:900px){
  .mk-rutor{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mk-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;margin-top:6px}
  .mk-lr{display:block}
}
/* 601–699 px: sex i rad ger rutor på 85–101 px — samma lilla steg som de smalaste telefonerna */
@media(min-width:601px) and (max-width:699px){
  .mk-rutor{gap:6px}
  .mk-ru{padding:8px 8px 7px;border-radius:14px}
  .mk-ru.bevis{padding:7.5px 7.5px 6.5px}
  .mk-ru .mk-bx{width:30px;height:30px;border-radius:9px}
  .mk-ru .mk-bx .mk-ik{width:16px;height:16px}
  .mk-ru-t{font-size:12px}
}
/* dator: rutorna till vänster, resten i tre kolumner, foten som rad under (hjälpruta till höger från 1280 px) */
@media(min-width:901px){
  .mk-panel.karta{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;row-gap:14px;align-items:start}
  .mk-panel.karta .mk-rutor{grid-template-columns:repeat(3,124px);gap:10px}
  .mk-panel.karta .mk-ru{padding:12px 12px 11px;border-radius:18px}
  .mk-panel.karta .mk-ru.bevis{padding:11.5px 11.5px 10.5px}
  .mk-panel.karta .mk-ru .mk-bx{width:40px;height:40px;border-radius:12px}
  .mk-panel.karta .mk-ru .mk-bx .mk-ik{width:22px;height:22px}
  .mk-panel.karta .mk-ru-t{font-size:14.5px}
  .mk-panel.karta .mk-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;margin-top:0}
  .mk-panel.karta .mk-lr{display:block}
  .mk-panel.karta .mk-lista .mk-eb{margin:4px 0 6px 4px;font-size:11px}
  .mk-panel.karta .mk-li{font-size:13.5px}
  /* rutor och rader tonar in en gång när panelen öppnas (--i sätts av shared.js). backwards: efteråt gäller vanliga regler, så hover fungerar */
  .mk-panel.karta.oppen .mk-ru,.mk-panel.karta.oppen .mk-li{animation:mk-in .34s var(--ease) backwards;animation-delay:calc(40ms + var(--i,0) * 30ms)}
  /* foten som rad: Fastnar du? · text · knappen · e-posten */
  .mk-panel.karta .mk-fot.kort{grid-column:1/-1;gap:12px;margin-top:0;padding-top:14px;border-top:1px solid rgba(10,10,12,.07)}
  .mk-panel.karta .mk-fot-rub{display:block;font-weight:700;font-size:14px;color:var(--ink);white-space:nowrap}
  .mk-panel.karta .mk-fot-txt{display:block;font-size:13.5px;color:var(--ink-2);margin-right:auto}
  .mk-panel.karta .mk-fot.kort .mk-tele{flex:none}
  .mk-panel.karta .mk-post{order:0;width:auto;height:44px;padding:0 16px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;white-space:nowrap}
  .mk-panel.karta .mk-post-t{display:inline}
}
@keyframes mk-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 901–999 px: mindre rutor, så att radnamnen får plats (mätt varje pixel) */
@media(min-width:901px) and (max-width:999px){
  .mk-panel.karta{column-gap:16px}
  .mk-panel.karta .mk-rutor{grid-template-columns:repeat(3,108px);gap:8px}
  .mk-panel.karta .mk-ru{padding:10px 10px 9px;border-radius:16px}
  .mk-panel.karta .mk-ru.bevis{padding:9.5px 9.5px 8.5px}
  .mk-panel.karta .mk-ru .mk-bx{width:36px;height:36px;border-radius:11px}
  .mk-panel.karta .mk-ru .mk-bx .mk-ik{width:20px;height:20px}
  .mk-panel.karta .mk-ru-t{font-size:13.5px}
  .mk-panel.karta .mk-lista{column-gap:10px}
  .mk-panel.karta .mk-li{font-size:13px;gap:8px}
  .mk-panel.karta .mk-li .mk-bx{width:26px;height:26px}
}
/* från 1280 px (panelen är 1 240 px): hjälprutan står till höger om listan */
@media(min-width:1280px){
  .mk-panel.karta{grid-template-columns:auto minmax(0,1fr) 252px;column-gap:22px}
  .mk-panel.karta .mk-lista{column-gap:14px}
  .mk-panel.karta .mk-fot.kort{grid-column:auto;align-self:stretch;flex-direction:column;align-items:stretch;gap:0;padding:16px 18px 18px;border-top:0;border-radius:18px;background:var(--surface-2,#F4F3EE)}
  .mk-panel.karta .mk-fot-eb{display:block;margin:4px 0 14px}
  .mk-panel.karta .mk-fot-rub{font-family:var(--font-display);font-size:22px;line-height:1.1;letter-spacing:-.02em;white-space:normal}
  .mk-panel.karta .mk-fot-txt{margin:8px 0 14px;font-size:14px;line-height:1.45}
  .mk-panel.karta .mk-fot.kort .mk-tele{margin-top:auto;min-height:46px;font-size:14.5px}
  .mk-panel.karta .mk-post{height:42px;margin-top:8px;justify-content:center;gap:9px}
}
@media(min-width:901px){
  .mk-panel{width:min(1240px,calc(100vw - 36px))!important;max-height:calc(100vh - 110px);overflow:auto}
  .mk-panel.shop{width:min(1080px,calc(100vw - 36px))!important}
}
@media(min-width:901px) and (max-width:1180px){
  .mk-g{grid-template-columns:1.6fr 1fr;gap:16px}
  .mk-panel{padding:16px 16px 14px!important}
  /* mätt 1024 px: rutan är ~207 px — exempelraden får inte plats, namnet får radbrytas */
  .mk-kt{gap:10px;padding:9px 10px;min-height:58px}
  .mk-kt .mk-bx{width:36px;height:36px}
  .mk-t{font-size:12.5px;letter-spacing:-.02em;white-space:normal;overflow:visible}
  .mk-u{display:none}
  .mk-pt,.mk-pp{white-space:normal}
  .mk-pt{font-size:13px}
}
/* 901–1000 px (mätt 960: rutan är 192 px): mindre ikon och 12 px namn så inget klipps */
@media(min-width:901px) and (max-width:1000px){
  .mk-kt{gap:7px;padding:8px 7px}
  .mk-kt .mk-bx{width:32px;height:32px;border-radius:10px}
  .mk-kt .mk-bx .mk-ik{width:19px;height:19px}
  .mk-t{font-size:11.5px}
  .mk-n{padding:2px 5px;font-size:11px}
}
/* ── mobil: arket glider upp från botten, ovanför bottenmenyn ── */
@media(max-width:900px){
  .mk-panel{left:12px!important;right:12px!important;top:calc(84px + env(safe-area-inset-top))!important;bottom:calc(var(--bottenmeny,78px) + 26px)!important;padding:12px 12px 12px!important;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;transform:translateY(16px);transform-origin:50% 100%}
  .mk-panel.oppen{transform:none}
  .mk-sok{display:flex;align-items:center;gap:8px;height:44px;border-radius:999px;background:var(--surface,#fff);border:1px solid rgba(10,10,12,.08);padding:0 14px;color:var(--muted);font-size:14px;margin-bottom:12px;text-decoration:none}
  .mk-sok .mk-ik{width:16px;height:16px}
  .mk-g{display:block}
  .mk-kol+.mk-kol{margin-top:14px}
  .mk-eb{font-size:10px;margin:0 0 8px 2px}
  .mk-kat{gap:6px}
  .mk-kt{flex-direction:column;align-items:flex-start;gap:7px;padding:9px 9px 8px;min-height:64px;border-radius:13px;opacity:1;transform:none}
  .mk-kt .mk-n{position:absolute;top:7px;right:7px;margin:0;font-size:10px;padding:1px 6px}
  .mk-kt .mk-bx{width:30px;height:30px;border-radius:9px}
  .mk-kt .mk-bx .mk-ik{width:16px;height:16px}
  .mk-kt-txt{width:100%}
  .mk-t{font-size:12.5px;white-space:normal;overflow:visible}
  .mk-u{display:none}
  .mk-topp{display:flex;gap:8px;overflow-x:auto;margin:0 -12px;padding:0 12px 4px;scrollbar-width:none;scroll-snap-type:x proximity}
  .mk-topp::-webkit-scrollbar{display:none}
  .mk-pr{flex:0 0 108px;flex-direction:column;align-items:stretch;gap:0;background:var(--surface,#fff);border:1px solid rgba(10,10,12,.06);border-radius:14px;padding:6px;scroll-snap-align:start}
  .mk-pr:hover{background:var(--surface,#fff)}
  .mk-pr img{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
  .mk-pt{font-size:11.5px;margin-top:6px;white-space:normal;min-height:2.3em}
  .mk-pp{font-size:10.5px;white-space:normal}
  .mk-plus{position:absolute;top:2px;right:2px;margin:0}
  .mk-cta{margin:0 0 12px;padding:10px 10px 10px 14px;min-height:56px;border-radius:16px}
  .mk-cta b{font-size:15.5px}.mk-cta small{font-size:11px;margin-top:2px}
  .mk-cta-pil{width:36px;height:36px}
}
/* surfplatta 601–900 px: rutorna som på dator (ikon · namn + exempel · antal), två kolumner */
@media(min-width:601px) and (max-width:900px){
  .mk-kt{flex-direction:row;align-items:center;gap:12px;padding:10px 12px;min-height:62px}
  .mk-kt .mk-n{position:static;margin-left:auto;font-size:12px;padding:2px 8px}
  .mk-kt .mk-bx{width:40px;height:40px;border-radius:12px}
  .mk-kt .mk-bx .mk-ik{width:22px;height:22px}
  .mk-kt-txt{width:auto}
  .mk-t{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mk-u{display:block}
  .mk-pr{flex-basis:128px}
}
@media(max-width:360px){
  .mk-t{font-size:11.5px}
  .btab-label{font-size:9.5px}
}
/* minskad rörelse: allt stilla — panel, rutor, streck, etikett, cirkel */
@media(prefers-reduced-motion:reduce){
  .mk-panel,.mk-panel.oppen,.mk-kt,.mk-panel.oppen .mk-kt,.mk-ru,.mk-tele,.mk-post,.mk-hb i,.mk-lbl span,.mk-skarm,.mk-plus::before,.mk-cta,.nav .nav-links .nav-link,.nav .nav-links .nav-link .nav-pil,
  .btab.btab-navet .btab-icon.mk-c,.btab.btab-navet .btab-icon.mk-c::before{transition:none!important;transition-delay:0s!important}
  .mk-cta:hover{transform:none}
  .mk-panel.karta.oppen .mk-ru,.mk-panel.karta.oppen .mk-li{animation:none!important}
  .mk-ru:hover,.mk-ru:focus-visible,.mk-ru:active,.mk-tele:active,.mk-post:active{transform:none}
}
/* Kom igång-panelen (äldre): NY-brickan lever kvar för andra ställen. */
.mk-nytt{display:inline-block;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--brand-grad,linear-gradient(135deg,#2563EB,#7C3AED));color:#fff;padding:2px 6px;border-radius:99px;margin-left:6px;vertical-align:2px;line-height:1.2}

/* ═══ V8.128 Gruppen — Telegram-gruppen där frågan uppstår (KN 2026-10-23 "promota den mer", mockup
   agent/mockuper/v8.128-gruppen/, "fortsätt" 2026-10-24). Ritas av agent/gruppkort.py (raden och kortet).
   Samma språk som Omdömessidan: svart knapp, ingen gradient. Talet i [data-tg-antal] fylls av shared.js. ═══ */
.pxg-rad{display:flex;align-items:center;gap:11px;margin:8px 0 0;padding:12px 14px;border-radius:14px;
  text-decoration:none!important;color:var(--ink)!important;background:var(--surface);border:1px solid var(--line-strong);
  min-height:56px;transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.pxg-rad:hover{transform:translateY(-1px);box-shadow:0 14px 30px -24px rgba(10,10,12,.45)}
.pxg-rad:active{transform:scale(.98)}
.pxg-rad:focus-visible,.pxg-knapp:focus-visible,.pxg-sup:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pxg-ik{flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.pxg-ik svg{width:16px;height:16px;margin-left:-1px}
.pxg-txt{flex:1;min-width:0}
.pxg-txt b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.pxg-txt i{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}
.pxg-pil{flex:0 0 auto;color:var(--muted)}
.pxg-pil svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pxg-kort{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:22px 20px 20px;box-shadow:0 24px 48px -36px rgba(20,20,60,.38);color:var(--ink);text-align:left}
.pxg-ovan{display:inline-flex;align-items:center;gap:7px;margin:0!important;padding:6px 11px 6px 9px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-strong);font:600 12.5px/1 var(--font-body)!important;color:var(--ink)!important}
.pxg-ovan svg{width:14px;height:14px;fill:none;stroke:#1D4ED8;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pxg-eb{display:block;margin:0 0 10px;font:600 11.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pxg-kort .pxg-h{font-family:var(--font-display)!important;font-size:clamp(23px,3vw,30px)!important;font-weight:700!important;
  line-height:1.12!important;letter-spacing:-.028em!important;margin:14px 0 8px!important;color:var(--ink)!important;text-align:left!important}
.pxg-ingress{margin:0 0 18px!important;color:var(--ink-2)!important;font-size:15px!important;line-height:1.55!important;max-width:58ch}
.pxg-ingress a{color:var(--ink)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pxg-lista{list-style:none!important;margin:0 0 20px!important;padding:0!important;display:grid;gap:13px}
.pxg-lista li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;margin:0!important;padding:0!important}
.pxg-lista li::before{display:none!important}
.pxg-lista .ik{width:36px;height:36px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;color:var(--ink)}
.pxg-lista .ik svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pxg-lista b{display:block;font-size:14.5px;font-weight:650;line-height:1.3;color:var(--ink)}
.pxg-lista span{display:block;font-size:13px;color:var(--muted);line-height:1.45;margin-top:2px}
.pxg-knapp{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:52px;padding:0 24px;border-radius:999px;
  background:var(--ink)!important;color:#fff!important;font-size:15.5px;font-weight:600;text-decoration:none!important;
  box-shadow:0 14px 28px -16px rgba(10,10,12,.55);transition:background .2s var(--ease),transform .15s var(--ease)}
.pxg-knapp:hover{background:var(--ink-2)!important}
.pxg-knapp:active{transform:scale(.98)}
.pxg-knapp svg{width:18px;height:18px}
.pxg-fot{margin:10px 0 0!important;font-size:12.5px!important;color:var(--muted)!important;text-align:center;line-height:1.45}
.pxg-qr{display:none}
.pxg-citat{display:grid;gap:10px;margin:0 0 18px}
.pxg-c{margin:0;padding:13px 14px 14px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.pxg-c .topp{display:flex;align-items:center;gap:10px}
.pxg-c .av{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 12px/1 var(--font-body)}
.pxg-c .namn{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pxg-c .namn b{font-size:13.5px;font-weight:600;color:var(--ink)}
.pxg-c .namn i{font-style:normal;font-size:12px;color:var(--muted)}
.pxg-c p{margin:8px 0 0!important;font-size:14.5px!important;line-height:1.5!important;color:var(--ink-2)!important}
.pxg-c-fin{margin:-8px 0 16px!important;font-size:12px!important;color:var(--muted)!important}
.pxg-plats{margin:16px 0 0}
@media(min-width:900px){
  .pxg-kort.bred{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:center;padding:34px 36px}
  .pxg-kort.bred .pxg-qr{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;border-radius:20px;
    background:var(--surface-2);text-align:center}
  .pxg-kort.bred .pxg-qr svg{display:block;border-radius:8px}
  .pxg-kort.bred .pxg-qr b{display:block;font-size:14px;font-weight:650}
  .pxg-kort.bred .pxg-qr small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
  .pxg-knapp{width:auto;display:inline-flex}
  .pxg-fot{text-align:left}
  .pxg-citat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.k3 + .pxg-rad{margin-top:16px}   /* kalkylatorn: raden under svaret */
#gApp .pxg-rad{margin:18px 0 0}   /* Din guide: sist i guiden */
@media(prefers-reduced-motion:reduce){.pxg-rad,.pxg-knapp{transition:none}.pxg-rad:hover{transform:none}}

/* ═══ MENYN 9.0 — Apple-raden (V8.188, KN 8 nov "okej bygg" på mockupen agent/mockuper/v8.188-menyn) ═══
   Headern är <header class="nav"><div class="m9" id="m9">…</div></header> (facit korg.html → agent/meny.py --tvang).
   De gamla .nav-reglerna träffar inget inuti; bara headerns egen ram nollställs här. Ingen bottenmeny längre. */
header.nav:has(>#m9){padding:0!important;z-index:120;background:none!important;border:0!important}
html:has(#m9){--bottenmeny:env(safe-area-inset-bottom,0px)}
html.m9-las{overflow:hidden}
.m9-l[aria-current="page"]{color:var(--ink);font-weight:600}
.m9-mr[aria-current="page"]{color:var(--brand-1)}
.m9{position:relative;font-family:var(--font-body)}
.m9-rad{position:relative;z-index:3;height:52px;display:flex;align-items:center;gap:8px;max-width:1080px;margin:0 auto;padding:0 22px}
.m9::before{content:"";position:absolute;inset:0 0 auto;height:52px;z-index:2;background:rgba(250,250,247,.78);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid rgba(10,10,12,.07);transition:background .3s var(--ease)}
.m9.oppen::before{background:rgba(250,250,247,.98);border-bottom-color:transparent}
.m9-logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;margin-right:auto;min-height:44px}
.m9-logo img{width:24px;height:24px;border-radius:6px}
.m9-lankar{display:flex;align-items:center;gap:4px;list-style:none;margin:0 auto;padding:0}
.m9-l{display:inline-flex;align-items:center;height:44px;padding:0 13px;border:0;background:none;font:500 13.5px var(--font-body);letter-spacing:-.005em;color:rgba(10,10,12,.78);text-decoration:none;cursor:pointer;border-radius:10px;transition:color .2s var(--ease)}
.m9-l:hover,.m9-l[aria-expanded="true"]{color:var(--ink)}
.m9-l:focus-visible,.m9-i:focus-visible,.m9-panel a:focus-visible,.m9-mr:focus-visible,.m9-till:focus-visible,.m9-ms:focus-visible{outline:2px solid rgba(37,99,235,.55);outline-offset:2px}
.m9-ik{display:flex;align-items:center;gap:2px;margin-left:auto}
.m9-i{position:relative;width:44px;height:44px;display:grid;place-items:center;border:0;background:none;color:rgba(10,10,12,.8);border-radius:12px;cursor:pointer}
.m9-i:hover{color:var(--ink)}
.m9-i svg{width:19px;height:19px}
.m9-antal{position:absolute;top:7px;right:6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--ink);color:#fff;font:700 10.5px/17px var(--font-body);align-items:center;justify-content:center}
.m9-ham{display:none}
.m9-ham span{position:absolute;left:13px;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.m9-ham span:first-child{top:18px}.m9-ham span:last-child{top:25px}
.m9-ham[aria-expanded="true"] span:first-child{top:21.5px;transform:rotate(45deg)}
.m9-ham[aria-expanded="true"] span:last-child{top:21.5px;transform:rotate(-45deg)}

/* panelen: hela bredden, glider ner, sidan bakom suddas (Apples flyout) */
.m9-panel{position:absolute;left:0;right:0;top:52px;z-index:2;background:rgba(250,250,247,.98);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .38s cubic-bezier(.4,0,.2,1),visibility 0s .38s;box-shadow:0 30px 60px -40px rgba(20,20,60,.35)}
.m9-panel.on{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .38s cubic-bezier(.4,0,.2,1)}
.m9-inner{max-width:1080px;margin:0 auto;padding:34px 22px 46px 66px;display:grid;grid-template-columns:1.15fr 1fr 1.2fr;gap:28px 56px;
  opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .3s var(--ease)}
.m9-panel.on .m9-inner{opacity:1;transform:none;transition-delay:.08s}
.m9-kol h3{margin:0 0 12px;font:500 12px var(--font-body);color:#86868b;letter-spacing:.01em}
.m9-kol a{display:block;padding:4px 0;font-size:13px;color:var(--ink);text-decoration:none;line-height:1.5}
.m9-kol a:hover{color:var(--brand-1)}
.m9-stor a{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.25;padding:3px 0}
.m9-tal{color:#86868b;font-weight:500;font-size:12px;margin-left:4px}
.m9-prod{display:flex!important;align-items:center;gap:10px;padding:6px 0!important}
.m9-prod img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#EFEFF2;flex:none}
.m9-prod b{display:block;font-size:13px;font-weight:600}
.m9-prod b i{font-style:normal;color:#86868b;font-weight:500}
.m9-prod small{display:block;font-size:12px;color:#55555d}
.m9-prod s{color:#86868b}
.m9-slaja{position:fixed;inset:0;z-index:110;background:rgba(232,232,237,.4);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.m9-slaja.on{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}

/* mobilen: logga · sök · kasse · två streck → helskärmsmeny */
.m9-mob{display:none}
@media(max-width:900px){
  .m9-rad{height:48px;padding:0 8px 0 16px}
  .m9::before{height:48px}
  .m9-lankar,.m9-panel{display:none}
  .m9-ham{display:grid}
  .m9-mob{display:block;position:fixed;left:0;right:0;top:48px;bottom:0;z-index:2;background:rgba(250,250,247,.985);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
    overflow:hidden;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .4s cubic-bezier(.4,0,.2,1),visibility 0s .4s}
  .m9.mob-on .m9-mob{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .4s cubic-bezier(.4,0,.2,1)}
  .m9-mspar{position:relative;height:100%}
  .m9-hem,.m9-under{position:absolute;inset:0;overflow-y:auto;padding:22px 26px 40px;transition:transform .38s cubic-bezier(.4,0,.2,1),opacity .3s var(--ease)}
  .m9-hem ul{list-style:none;margin:0;padding:0}
  .m9-mr{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:52px;padding:4px 0;border:0;background:none;text-align:left;font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.025em;color:var(--ink);text-decoration:none;cursor:pointer;
    opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
  .m9-mr svg{width:20px;height:20px;color:#86868b}
  .m9.mob-on .m9-hem .m9-mr{opacity:1;transform:none}
  .m9.mob-on .m9-hem li:nth-child(2) .m9-mr{transition-delay:.03s}.m9.mob-on .m9-hem li:nth-child(3) .m9-mr{transition-delay:.06s}
  .m9.mob-on .m9-hem li:nth-child(4) .m9-mr{transition-delay:.09s}.m9.mob-on .m9-hem li:nth-child(5) .m9-mr{transition-delay:.12s}.m9.mob-on .m9-hem li:nth-child(6) .m9-mr{transition-delay:.15s}
  .m9-snabb{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
  .m9-snabb a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
  .m9-under{transform:translateX(100%);opacity:0}
  .m9-under.on{transform:none;opacity:1}
  .m9-hem.ut{transform:translateX(-30%);opacity:0}
  .m9-under .m9-mr{opacity:1;transform:none;font-size:24px}
  .m9-till{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-6px 0 6px -6px;padding:0 6px;border:0;background:none;font:500 15px var(--font-body);color:#86868b;cursor:pointer}
  .m9-till svg{width:18px;height:18px}
  .m9-uh{margin:0 0 6px;font:500 13px var(--font-body);color:#86868b}
  .m9-under h3{margin:22px 0 6px;font:500 12.5px var(--font-body);color:#86868b}
  .m9-ms{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(10,10,12,.05)}
  .m9-mprod .m9-prod{min-height:56px;border-bottom:1px solid rgba(10,10,12,.05)}
  .m9-slaja{display:none}
}
@media(prefers-reduced-motion:reduce){.m9 *,.m9-slaja,.m9-panel,.m9-mob{transition:none!important}}
/* chattbubblan göms medan menyn är öppen (den låg över menyn) */
html:has(.m9.mob-on) #wlSupportWrap,html:has(.m9.oppen) #wlSupportWrap{opacity:0;visibility:hidden;pointer-events:none}
.m9-rad>nav{margin:0 auto}

/* ═══ V8.209 PROFILEN "VIT" (KN 10 nov 2026: "ha vit design … design it as Apple, but with a soul") ═══
   Sval vit botten med blått → violett ljus (loggans färger), vitt glas, rubrikerna i Schibsted Grotesk.
   Mockup: agent/mockuper/v8.209-ny-profil/. Ligger sist — går över Glas 5.0 ovan. */
/* html:root — väger tyngre än sidornas egna :root (index, shop, dosering m.fl. sätter --surface-2:#F4F3EE i sin egen stil) */
html:root{--bg:#F2F4FA;--color-bg:#F2F4FA;--surface-2:#EDF0F6;--surface-tint:#E8EDFF;--muted:#5B6074;
  --glas:rgba(255,255,255,.80);--glas-2:rgba(255,255,255,.56);--glas-line:rgba(255,255,255,.96);
  --skugga-glas:0 24px 48px -30px rgba(24,36,110,.34),0 2px 6px -2px rgba(24,36,110,.06);
  --skugga-knapp:0 16px 32px -14px rgba(70,70,245,.60);
  --well:#F5F5F7;
  --font-display:'Schibsted Grotesk',ui-sans-serif,system-ui,sans-serif}
html{background:#F2F4FA}
/* samma rubrikstil på varje sida (full QA 10 nov: 13 sidtyper satte h1 i Inter i sin egen stil) — kassan rörs inte */
html:not([data-no-chrome]) h1,html:not([data-no-chrome]) h2{font-family:var(--font-display)!important}
body::before{background:
    radial-gradient(52% 40% at 96% -2%,rgba(124,58,237,.26),transparent 64%),
    radial-gradient(60% 46% at -6% 16%,rgba(37,99,235,.24),transparent 62%),
    radial-gradient(46% 40% at 104% 92%,rgba(37,99,235,.14),transparent 62%),
    radial-gradient(40% 36% at -4% 96%,rgba(124,58,237,.12),transparent 60%),
    #F2F4FA}
/* Vit: ytor — det som var varmt beige blir svalt vitt glas */
.m9::before{background:rgba(255,255,255,.78)}
.m9.oppen::before{background:rgba(250,251,254,.98)}
.m9-logo{font-weight:720;letter-spacing:-.03em}

/* ── V8.209 Menyn 10: bottenmenyn (mobil) och arket "Alla sidor" ── */
.px-bb,.px-alla{display:none}
@media(max-width:900px){
  html:has(#pxBb){--bottenmeny:calc(84px + env(safe-area-inset-bottom,0px))}
  /* toppraden blir ett flytande glaspiller; menyn öppnas från bottenmenyns mitt */
  .m9-rad{height:52px;margin:8px 10px 0;padding:0 6px 0 14px}
  .m9::before{inset:8px 10px auto;height:52px;border-radius:999px;background:var(--glas);border:1px solid var(--glas-line);box-shadow:var(--skugga-glas)}
  .m9-ham{display:none!important}
  .m9-logo{font-size:17px}.m9-logo img{width:28px;height:28px;border-radius:8px}
  .px-bb{display:grid;grid-template-columns:1fr 1fr 68px 1fr 1fr;align-items:center;position:fixed;z-index:118;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:64px;padding:0 6px;
    border-radius:999px;background:var(--glas);border:1px solid var(--glas-line);box-shadow:var(--skugga-glas),0 10px 30px -18px rgba(24,36,110,.45);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5)}
  .px-bb a{height:52px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 10.5px/1 var(--font-body);letter-spacing:0;color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),color .15s var(--ease)}
  .px-bb a svg{width:21px;height:21px}
  .px-bb a:active{transform:scale(.94)}
  .px-bb a[aria-current="page"]{color:var(--ink)}
  .px-bb a[aria-current="page"] svg{color:var(--brand-1)}
  .px-bb-m{position:relative;justify-self:center;width:58px;height:58px;margin-top:-18px;border:0;border-radius:50%;padding:0;cursor:pointer;background:var(--brand-grad);box-shadow:var(--skugga-knapp),0 0 0 5px rgba(255,255,255,.92);-webkit-tap-highlight-color:transparent;transition:transform .25s var(--ease)}
  .px-bb-m:active{transform:scale(.94)}
  .px-bb-m i{position:absolute;left:19px;width:20px;height:2.2px;border-radius:2px;background:#fff;transition:transform .3s var(--ease),top .3s var(--ease),opacity .2s var(--ease)}
  .px-bb-m i:nth-child(1){top:21px}.px-bb-m i:nth-child(2){top:28px}.px-bb-m i:nth-child(3){top:35px}
  .px-bb-m[aria-expanded="true"]{transform:rotate(90deg)}
  .px-bb-m[aria-expanded="true"] i:nth-child(1){top:28px;transform:rotate(45deg)}
  .px-bb-m[aria-expanded="true"] i:nth-child(2){opacity:0}
  .px-bb-m[aria-expanded="true"] i:nth-child(3){top:28px;transform:rotate(-45deg)}
  .px-bb a:focus-visible,.px-bb-m:focus-visible,.px-alla a:focus-visible,.px-alla button:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px}
  .px-alla{display:block;position:fixed;inset:0;z-index:117}
  .px-alla[hidden]{display:none}
  .px-alla-slaja{position:absolute;inset:0;background:rgba(10,12,30,.32);opacity:0;transition:opacity .3s var(--ease)}
  .px-alla-in{position:absolute;left:0;right:0;bottom:0;top:max(56px,env(safe-area-inset-top,0px));display:flex;flex-direction:column;border-radius:30px 30px 0 0;background:#F7F8FC;border-top:1px solid #fff;box-shadow:0 -24px 60px -24px rgba(20,30,90,.4);
    transform:translateY(104%);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
  .px-alla.on .px-alla-slaja{opacity:1}.px-alla.on .px-alla-in{transform:none}
  .px-alla-topp{display:flex;align-items:center;justify-content:space-between;padding:20px 16px 0 20px}
  .px-alla-topp h2{margin:0;font-family:var(--font-display);font-size:30px;font-weight:760;letter-spacing:-.04em;line-height:1;color:var(--ink)}
  .px-alla-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer}
  .px-alla-x svg{width:20px;height:20px}
  .px-alla-sok{display:flex;align-items:center;gap:10px;margin:14px 16px 0;height:52px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}
  .px-alla-sok svg{width:19px;height:19px;flex:none}
  .px-alla-sok input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:500 16px var(--font-body);color:var(--ink);-webkit-appearance:none;appearance:none}
  .px-alla-sok:focus-within{border-color:var(--brand-1);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
  .px-alla-lista{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 16px calc(110px + env(safe-area-inset-bottom,0px))}
  .px-alla-s h3{margin:20px 4px 8px;font:650 14px/1.2 var(--font-body);color:var(--brand-1);letter-spacing:0}
  .px-alla-g{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden}
  .px-alla-l{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:0 16px;border-top:1px solid rgba(10,12,24,.06);font:600 16px/1.25 var(--font-body);color:var(--ink);text-decoration:none}
  .px-alla-l[hidden]{display:none}
  .px-alla-g .px-alla-l:first-child{border-top:0}
  .px-alla-l:active{background:var(--surface-2)}
  .px-alla-l::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid rgba(10,12,24,.3);border-top:2px solid rgba(10,12,24,.3);transform:rotate(45deg);margin-right:2px}
  .px-alla-l .m9-tal{margin-left:auto;font:600 13px var(--font-body);color:var(--muted)}
  .px-alla-tom{margin:26px 6px;font:500 15.5px/1.5 var(--font-body);color:var(--ink-2)}
  .px-alla-tom a{color:var(--brand-1);font-weight:650}
  html:has(.px-alla.on) #wlSupportWrap{opacity:0;visibility:hidden;pointer-events:none}
  /* supportbubblan och flytande köprader står ovanför bottenmenyn */
  html:has(#pxBb) body.px-sticky-kop .fm-sticky{bottom:calc(var(--bottenmeny) + 2px)!important}
  html:has(#pxBb) body.px-sticky-kop #wlSupportWrap{bottom:calc(var(--bottenmeny) + 78px)!important}
  /* V8.210 (KN 10 nov "2 ja"): på sidor med fast köprad är chatten en rund ikon — två lager längst ner i stället för tre. Namnet står kvar i aria-label. */
  /* V8.212 (KN 10 nov "bygg allting"): rund ikon på ALLA mobilsidor med bottenmenyn — pillret täckte ett produktkort i shoppen */
  html:has(#pxBb) #wlSupportBtn.pc-flyt{padding:8px;gap:0}
  html:has(#pxBb) #wlSupportBtn .pc-ftx{display:none}
}
@media(prefers-reduced-motion:reduce){.px-bb a,.px-bb-m,.px-bb-m i,.px-alla-slaja,.px-alla-in{transition:none!important}}
/* Vit: hårdkodat varmt beige på enskilda ytor → svalt */
.fa{background:rgba(247,248,252,.92)!important}
.m62-foto,.tg-vag,.fm-vax,.po-uppl,span.chip{background-color:var(--surface-2)!important}

/* ═══ V8.214 MJUKT OCH SNABBT (KN 10 nov: "make the website smooth … when you click something smooth … you get the feeling. Do it in
   every page … Make it faster and much more smooth feeling") ═══
   1. Sidbyten tonar över i stället för att blinka vitt (cross-document view transitions: Chrome/Android 126+, Safari/iOS 18.2+;
      äldre webbläsare byter sida som förut). Kassan (checkout, betala) väljer bort det i egen fil.
   2. Allt tryckbart svarar direkt: knappar trycks in en aning (scale — egen egenskap, krockar inte med knappens transform),
      länkar dämpas, den grå tryckblixten är borta och dubbeltrycksfördröjningen likaså (touch-action). :where() = noll
      specificitet, så varje knapps egna regler vinner.
   3. Produktkorten har ingen oskärpa bakom sig längre: bakgrunden bakom dem är jämn, så oskärpan syntes inte (mätt: skillnad
      < 1/255 per kanal) men kostade en bildruta av tio vid rullning (42 kort i shoppen).
   Förladdningen av nästa sida ligger i shared.js (pxForladda). Allt stängs av med prefers-reduced-motion. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:pxVtUt .16s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:pxVtIn .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes pxVtUt{to{opacity:0}}
@keyframes pxVtIn{from{opacity:0;transform:translateY(6px)}}
/* V8.214c: menyn får INGET eget view-transition-name — ett namngivet element blir en egen bakgrundsrot, och då ser menyns glas
   (backdrop-filter) inte längre sidan bakom sig: oskärpan försvann och texten lyste igenom (KN:s skärmbild 10 nov). */
:where(a,button,[role="button"],summary,label,select,input[type="checkbox"],input[type="radio"]){touch-action:manipulation}
:where(a,button,[role="button"],summary){-webkit-tap-highlight-color:transparent}
:where(button,[role="button"],summary,.btn,.chip){transition:scale .16s cubic-bezier(.2,.8,.2,1),opacity .16s cubic-bezier(.2,.8,.2,1)}
:where(button,[role="button"],summary,.btn,.chip):where(:not(:disabled)):active{scale:.97}
:where(a){transition:opacity .16s cubic-bezier(.2,.8,.2,1)}
:where(a):active{opacity:.72}
.product-grid .card{-webkit-backdrop-filter:none;backdrop-filter:none}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  :where(a,button,[role="button"],summary,.btn,.chip){transition:none}
  :where(button,[role="button"],summary,.btn,.chip):active{scale:none}
}