/* GENERERAD FIL — ändra aldrig här. Källorna är src/styles/startsida-2026.css, src/styles/artikel-2026.css, src/styles/artikel-ta-2026.css, src/styles/ingrediens-2026.css, src/styles/produktsok-2026.css, src/styles/verktyg-2026.css, src/styles/sidor-2026.css.
   Byggs av scripts/omdesign-css.mjs. */

/* ===== src/styles/startsida-2026.css ===== */
/* Ny startsida (omdesign oktober 2026) — förslagsyta, /forhandsvisning/startsida/.
   Porterad ur docs/design/startsida-2026-10/startsida-tpl.html 2026-10-08. Mint = köp
   (ägarbeslut 2026-10-07); guld lever kvar i global.css tills omdesignen går skarp.

   Brytpunktsstegen (avgjord 2026-10-08, se README i docs/design/startsida-2026-10):
   640 en→två kolumner · 900 desktopmeny + rutinpanelen · 1000 guide- och INCI-rutnäten till tre
   kolumner · 1100 hjälten och blandaren i två spalter · 1200 sidmarginal och större huvudbild.
   Designlagens "EN mobilbrytpunkt: 640px" gäller tabeller och widgets (specen 2026-08-14 punkt 4),
   inte sidlayout; kravet som gäller här är att allt fungerar vid 640 px, utan vågrät scroll. */
/* Geist självhostad (prestandapasset 2026-10-13): Google Fonts kostade en extra
   väntan före första texten. Variabelt snitt, en fil för 400–700. Reservsnittet har
   Geists mått på Arial, så texten inte hoppar när Geist laddats klart. Det täcker bara
   Geists egna tecken: resten (t.ex. pilen →) faller som förut på systemets snitt. */
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/geist-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Tailwinds grundsnitt (global.css) var General Sans; omdesignen är Geist, och den
   gamla tokenen fick webbläsaren att hämta tre oanvända snitt på varje sida. */
:root{--font-sans:"Geist","Geist Fallback",system-ui,sans-serif}
@font-face{font-family:"Geist Fallback";src:local("Arial");size-adjust:104.76%;ascent-override:95.94%;descent-override:28.16%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --burst:polygon(100.0% 50.0%,90.2% 58.0%,96.2% 69.1%,84.1% 72.8%,85.4% 85.4%,72.8% 84.1%,69.1% 96.2%,58.0% 90.2%,50.0% 100.0%,42.0% 90.2%,30.9% 96.2%,27.2% 84.1%,14.6% 85.4%,15.9% 72.8%,3.8% 69.1%,9.8% 58.0%,0.0% 50.0%,9.8% 42.0%,3.8% 30.9%,15.9% 27.2%,14.6% 14.6%,27.2% 15.9%,30.9% 3.8%,42.0% 9.8%,50.0% 0.0%,58.0% 9.8%,69.1% 3.8%,72.8% 15.9%,85.4% 14.6%,84.1% 27.2%,96.2% 30.9%,90.2% 42.0%);

  /* Papperet ljusades upp ett snäpp 2026-10-08 (ägarbeslut): på #f1f2ef fick vita
     ytor för lite separation och läste som gråa. */
  --bg:#f3f4f2; --surface:#ffffff; --soft:#e7e9e5; --soft2:#dfe4e1; --ink:#121514; --muted:#5a615d; --line:#dcdfdb;
  --tile:#ffffff; --tile-line:#e6e8e4;
  --c-butter:#f4e38a; --c-lilac:#ddd3f5; --c-sky:#cde1f3; --c-peach:#f7d4c9; --c-rose:#f6c9dc; --c-sage:#d7e7cf;
  /* Kortmint: för förpackningar som inte har någon egen färg att härma (ägarbeslut
     2026-10-09: "om dom är helt vita kan vi köra på mintfärgen"). TYDLIGT ljusare än --buy,
     så köpknappen fortfarande läser sig som en knapp på ett mintkort — och svalare än
     salvia (--c-sage), som annars går att förväxla med den när korten står bredvid
     varandra. */
  --c-mint:#e6faf0;
  /* Stark rosa: ett steg djupare än --c-rose, för förpackningar vars rosa är
     mättad (IsaDoras gula-till-cerise-gradient, 2026-10-10). Fortfarande pastell —
     svart text ligger kvar långt över kontrastkravet. */
  --c-rose-stark:#f9aacd;
  /* Silver: för krom- och metallförpackningar (2026-10-10). Mint var fel ton för en
     silverfärgad mascara — den läste som grön produkt. Kall, ljus grå med en gnutta
     blått, så kromet på den vita plattan ser ut att höra hemma i kortet. */
  --c-silver:#e2e8ec;
  /* Djup vinröd: den första MÖRKA kortfärgen (ägarbeslut 2026-10-10, för The
     Ordinarys vinröda peeling). Kort som bär den sätter ljus text via [data-mork],
     annars faller rubrik och brödtext under kontrastkravet. Pastellerna är kvar
     som regel — vinrött väljs bara när förpackningen själv är mörkt röd. */
  --c-wine:#5e1b2e; --wine-ink:#ffffff; --wine-muted:#e7cdd6;
  --buy:#a8edc5; --buy-ink:#10201a; --pick:#167a54; --puck-fg:#a8edc5;
  --sel-fg:#a8edc5; --brand:#a8edc5;
  --shadow:0 1px 0 rgba(18,30,24,.04), 0 18px 40px -22px rgba(18,40,30,.28);
  --r-card:28px; --r-tile:20px; --r-pill:999px;
  --ease:cubic-bezier(.16,1,.3,1);
  --z-top:20;
  color-scheme:light;
}
/* Mörkt läge borttaget 2026-10-08 (ägarbeslut Nellma): sidan är alltid ljus. Sajten har
   aldrig haft mörkt läge, och att bära det hade dubblat arbetet för varje ny yta — utan
   vinst, eftersom produktbilderna ligger på vit platta och pastellkorten blir dova i mörkt.
   Här låg även demons alternativa köpfärger (guld/kobolt/bär); mint är beslutad, de är borta. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* overflow-x:clip, aldrig hidden: hidden gör body till en rullningsbehållare, och då
   blir varje view()-tidslinje inaktiv — rörelsen längst ned i filen startar aldrig. */
body{container-type:inline-size;margin:0;background:var(--bg);color:var(--ink);font-family:"Geist","Geist Fallback",system-ui,sans-serif;font-size:16px;line-height:1.55;overflow-x:clip;transition:background-color .4s var(--ease),color .4s var(--ease)}
img{display:block;max-width:100%}
/* Sajtens globala rubrikregel (global.css) bär den gamla serifen; omdesignen är Geist
   rakt igenom, som i skissen docs/design/startsida-2026-10 (ägarbeslut 2026-10-13). */
:where(.omdesign) :where(h1,h2,h3,h4,h5,h6){font-family:inherit}
/* Ikonerna är inbakad SVG i <i class="ph ph-namn"> (omdesign/Ikon.astro). Storleken
   följer font-size och färgen color, som när de var ett typsnitt. */
i.ph{display:inline-block;width:1em;height:1em;line-height:1;font-style:normal;vertical-align:-.125em;flex:none}
i.ph>svg{display:block;width:100%;height:100%}
a{color:inherit}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:600;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
p{text-wrap:pretty}
button{font:inherit;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
.wrap{max-width:1680px;margin:0 auto;padding:0 16px}
@media (min-width:1200px){.wrap{padding:0 56px}}
/* Avståndet från skärmkanten till innehållet: låter hyllan löpa ut till kanten men starta i linje med rubriken. */
main{--g:calc((100cqw - min(100cqw,1680px)) / 2 + 16px)}
@media (min-width:640px){main{--g:calc((100cqw - min(100cqw,1680px)) / 2 + 32px)}}
@media (min-width:1200px){main{--g:calc((100cqw - min(100cqw,1680px)) / 2 + 56px)}}
@media (min-width:640px){.wrap{padding:0 32px}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--r-pill)}
.skip:focus{left:8px}
b,.num{font-variant-numeric:tabular-nums}

/* ---------- Knappar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r-pill);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
/* Köpknappen: hover via inset box-shadow, aldrig filter/transform (designlagen). */
/* Köpknappen: pilen sitter i en egen cirkel och vrids till ↗ (du går vidare till butiken),
   och en mörkare yta växer ut ur cirkeln. Knappen själv rör sig aldrig, så klicket träffar alltid. */
.btn-buy{position:relative;isolation:isolate;overflow:hidden;background:var(--buy);color:var(--buy-ink);padding:0 6px 0 22px;gap:14px}
.btn-buy .bt{flex:1;text-align:center;transition:color .3s var(--ease)}
.btn-buy::before{content:"";position:absolute;z-index:-1;right:6px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .55s var(--ease)}
.puck{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--buy-ink);color:var(--puck-fg);font-size:17px;font-weight:700;line-height:1;transition:background .35s var(--ease),color .35s var(--ease)}
.puck span{display:block;transition:transform .5s var(--ease)}
.btn-buy:hover::before,a:hover .btn-buy::before{transform:scale(14)}
.btn-buy:hover .puck span,a:hover .btn-buy .puck span{transform:rotate(-45deg)}
.btn-buy:hover .bt,a:hover .btn-buy .bt{color:var(--bg)}
.btn-buy:hover .puck,a:hover .btn-buy .puck{background:var(--buy);color:var(--buy-ink)}
/* Knappar utan textlager (.btn-xs, "Köp →"): texten byter färg själv, annars blir knappen helt svart. */
.btn-buy:not(:has(.bt)){transition:box-shadow .25s var(--ease),color .3s var(--ease)}
.btn-buy:not(:has(.bt)):hover,a:hover .btn-buy:not(:has(.bt)){color:var(--bg)}
.btn-buy:active{box-shadow:inset 0 0 0 100px rgba(0,0,0,.12)}
.btn-sm.btn-buy{padding:0 5px 0 14px;gap:10px}
.btn-sm .puck{width:32px;height:32px;font-size:15px}
/* Riktigt smal telefon (320 px): en lång knapptext på en enda rad gjorde knappen
   bredare än skärmen, så pilcirkeln hamnade utanför. Texten får brytas i stället. */
@media (max-width:359px){
  .btn{padding:0 14px;font-size:14px}
  .btn-buy{padding:0 5px 0 14px;gap:9px}
  .btn-buy .bt{white-space:normal;line-height:1.2;text-align:left}
  .puck{width:32px;height:32px;font-size:15px}
}
.btn-sm.btn-buy::before{right:5px;width:32px;height:32px;margin-top:-16px}
@media (prefers-reduced-motion:reduce){.btn-buy::before{display:none}}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-dark:hover{box-shadow:inset 0 0 0 100px rgba(128,128,128,.22)}
.btn-dark:active{transform:scale(.98)}
.btn-sm{min-height:44px;font-size:15px;padding:0 14px;width:100%}
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px;transition:text-decoration-color .25s var(--ease)}
.link:hover{text-decoration-color:var(--ink)}

/* ---------- Produktyta: alltid vit, bilden oförändrad ---------- */
.tile{background:var(--tile);border-radius:var(--r-tile);display:grid;place-items:center;aspect-ratio:1;overflow:hidden;box-shadow:inset 0 0 0 1px var(--tile-line)}
/* Bilden placeras inne i ytan och kan aldrig trycka upp kortets höjd. */
.tile{position:relative}
.tile img{position:absolute;inset:0;margin:auto;width:80%;height:80%;object-fit:contain;transition:transform .7s var(--ease)}

/* ---------- Toppen ---------- */
/* Mastheaden följer INTE med när man rullar (ägarbeslut 2026-10-09): den ska inte
   sitta fast i toppen någonstans på sajten. Därför heller ingen blur bakom den —
   det finns inget att göra genomskinligt när den rullar ur bild med sidan. */
.top{position:relative;z-index:var(--z-top);background:var(--bg)}
/* Mastheaden är EN rad (ägarbeslut 2026-10-09): wordmarken till vänster, pillren i
   mitten, sökknappen till höger. Sökknappen låg tidigare på en egen rad ovanför
   pillren, och den raden ska bort — inte flyttas. */
.top .wrap.top-rad{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 20px;min-height:62px;padding-top:10px;padding-bottom:10px}
.logo{grid-column:1;font-weight:700;font-size:22px;letter-spacing:-.05em;text-decoration:none}
.logo span{color:var(--muted)}
.top-knappar{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.nav{grid-column:2;display:none;justify-content:center;gap:8px;flex-wrap:wrap}
.nav a{padding:7px 15px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);transition:background-color .2s var(--ease),color .2s var(--ease),transform .4s var(--ease)}
.nav a:hover{transform:translateY(-1px)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--ink);color:var(--sel-fg);border-color:var(--ink)}
.icon-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:19px;color:var(--ink)}
.search{display:none}
.menu-btn{display:grid}
/* Toppmenyn får en egen brytpunkt: fem länkar ryms inte på en rad vid 640 px. */
@media (min-width:900px){
  .nav{display:flex}
  .menu-btn{display:none}
  .search{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px;cursor:pointer}
  .search-m{display:none}
}
.mnav{display:none;border-top:1px solid var(--line);padding:8px 16px 16px}
.mnav a{display:block;padding:12px 0;font-size:17px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.top.open .mnav{display:block}

/* Sökrutan: samma jobb som sajtens egen overlay, byggd här för förhandsvisningen. */
.sokruta{background:var(--surface);border-bottom:1px solid var(--line);padding:16px 0 20px;box-shadow:0 18px 30px -24px rgba(18,40,30,.5)}
.sok-fält{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg)}
.sok-fält i{font-size:20px;color:var(--muted);flex:none}
.sok-fält input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);padding:10px 0;outline:none}
.sok-träffar{list-style:none;margin:14px 0 0;padding:0;max-height:min(52vh,420px);overflow-y:auto;display:grid;gap:2px}
.sok-träffar a{display:flex;align-items:baseline;gap:10px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--ink)}
.sok-träffar a:hover,.sok-träffar a:focus-visible{background:var(--soft)}
.sok-träffar b{font-weight:600;font-size:15.5px}
.sok-träffar span{font-size:12.5px;color:var(--muted);white-space:nowrap}
.sok-tomt{margin:16px 12px 0;color:var(--muted)}

/* ---------- 1. Hjälten: välj behov, få förstavalet ---------- */
.hero{display:grid;gap:28px;padding:20px 0 8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:center}
@media (min-width:640px){.hero{padding:48px 0 16px;gap:48px}}
@media (min-width:1100px){.stage-img{min-height:360px!important}.stage-name{font-size:26px!important}.hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);gap:72px;padding:56px 0 24px}}
.hero h1{font-size:clamp(58px,8vw,150px);letter-spacing:-.065em;line-height:.9;margin-left:-.04em}
/* Ordväggen: meningen "Jag har ..." där varje behov är en knapp. Det valda ordet blir en svart, lite sned lapp. */
.wall{font-size:clamp(27px,2.6vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.24;margin-top:22px;max-width:17em}
.w{font:inherit;letter-spacing:inherit;color:color-mix(in srgb,var(--ink) 48%,var(--bg));background:transparent;border:0;padding:.02em .1em;margin:0 -.02em 0 -.1em;border-radius:.16em;cursor:pointer;display:inline-block;transition:color .3s var(--ease),background-color .3s var(--ease),transform .5s var(--ease)}
.w:hover{color:var(--ink)}
.w[aria-pressed="true"]{background:var(--ink);color:var(--sel-fg);transform:rotate(-2.5deg)}
.hero .sub{font-size:16px;color:var(--muted);max-width:40ch;margin-top:22px}
.hero .help{margin-top:12px;font-size:15px;color:var(--muted)}

.stages{display:grid}
.stage{grid-area:1/1;position:relative;--card:var(--surface);background:var(--card);--muted:color-mix(in srgb,var(--ink) 70%,var(--card));border-radius:var(--r-card);padding:14px;box-shadow:var(--shadow);display:grid;gap:14px 16px;grid-template-columns:minmax(0,1fr);grid-template-areas:"img" "info" "buy" "more";visibility:hidden;opacity:0}
/* Produkten är kortets huvudsak: full bredd och 4:3 på mobil, inte en miniatyr. */
.stage-img.tile{aspect-ratio:4/3;width:100%}
.stage.is-on{visibility:visible;opacity:1}
.stage-img{grid-area:img;border-radius:18px;align-self:start}
.stage-info{grid-area:info;align-self:center;min-width:0}
.pick-label{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent);padding:4px 10px;border-radius:var(--r-pill)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage[data-k="torr-hud"]{--card:var(--c-sky)}
.stage[data-k="kanslig-hud"]{--card:var(--c-rose)}
.stage[data-k="rynkor"]{--card:var(--c-lilac)}
.stage[data-k="pigmentflackar"]{--card:var(--c-butter)}
.stage[data-k="fet-hy"]{--card:var(--c-peach)}
.stage[data-k="stora-porer"]{--card:var(--c-sky)}
.stage[data-k="rodnad"]{--card:var(--c-rose)}
.stage[data-k="finnar"]{--card:var(--c-lilac)}
.stage-img{box-shadow:0 22px 40px -22px rgba(30,30,50,.45);transform:rotate(-2deg)}
/* Klistermärket "Vårt förstaval" på bildens hörn, snurrar in vid varje byte. */
.sticker{clip-path:var(--burst)}
.sticker.st-hero{background:var(--buy);color:var(--buy-ink);position:absolute;z-index:2;top:-16px;left:0;width:84px;height:84px;font-size:10.5px;letter-spacing:-.03em;padding:0 6px;transform:rotate(-12deg)}
.pick-label i{font-size:16px}
.stage-name{font-size:17px;letter-spacing:-.015em;line-height:1.2;margin-top:4px}
.stage-spec{font-size:14px;color:var(--muted);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stage-guide{display:none}
/* Priset står ALLTID ovanför knappen, vänsterställt, oavsett kort och bredd
   (ägarbeslut 2026-10-09). Förut låg de bredvid varandra på bred skärm och under
   varandra på smal, så samma kort bytte ordning med fönstret. */
.stage-buy{grid-area:buy;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.stage-buy .btn{flex:none;width:100%}
/* Gällande och ordinarie pris står bredvid varandra och bryts bara om de inte får plats. */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;line-height:1.2}
.price b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.price span{font-size:12.5px;color:var(--muted)}
.stage-more{grid-area:more;display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;border-radius:18px;background:color-mix(in srgb,var(--surface) 55%,transparent);text-decoration:none;font-size:14.5px;font-weight:500;transition:background-color .25s var(--ease)}
.stage-more:hover{background:var(--soft)}
.stage-more i{margin-left:auto}
.thumbs{display:flex}
.thumbs .tile{width:46px;border-radius:12px;box-shadow:0 0 0 3px var(--card),0 8px 16px -8px rgba(30,30,50,.4);transition:transform .45s var(--ease)}
.thumbs .tile:nth-child(1){transform:rotate(-9deg)}
.thumbs .tile:nth-child(2){transform:rotate(4deg) translateY(-3px)}
.thumbs .tile:nth-child(3){transform:rotate(-3deg) translateY(2px)}
.stage-more:hover .thumbs .tile{transform:none}
.thumbs .tile+.tile{margin-left:-10px}
.thumbs .tile img{width:84%;height:84%}
/* Mobil: kortet bär fem block under varandra (bild, namnet, rätt-för-dig,
   köpraden, fler-raden) och blev rörigt när de hade olika radie, olika
   innerfärg och olika luft. Samma radie, samma innerfärg och en tydlig
   trappa i textstorlek gör det läsbart (ägarbeslut 2026-10-09). */
@media (max-width:639px){
  .stage{padding:16px;gap:16px}
  .stage-name{font-size:19px;line-height:1.18;margin-top:7px}
  .stage-spec{font-size:14px;margin-top:5px}
  .stage-fit{font-size:15px;padding:12px 14px;border-radius:16px}
  .stage-fit i{font-size:17px}
  .stage-buy{gap:12px}
  .stage-more{padding:10px 14px 10px 10px;border-radius:16px;font-size:14px;background:color-mix(in srgb,var(--surface) 62%,transparent)}
  .stage-more .thumbs .tile{width:42px}
}
@media (min-width:640px){
  .stage{padding:16px;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-rows:1fr auto auto;grid-template-areas:"img info" "img buy" "more more";gap:16px 24px}
  .stage-img{border-radius:var(--r-tile);align-self:stretch;aspect-ratio:auto;min-height:320px}
  .stage{padding:20px}
  .sticker.st-hero{width:118px;height:118px;font-size:14px;top:-28px;left:-24px}
  .stage-info{align-self:end;padding-top:12px}
  .stage-name{font-size:25px;line-height:1.12;margin-top:10px}
  .stage-spec{font-size:15px;margin-top:10px}
  .stage-guide{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
  .stage-guide:hover{color:var(--ink);text-decoration-color:var(--ink)}
  .stage-buy{padding-bottom:4px}
  .price b{font-size:24px}
}
@media (prefers-reduced-motion:no-preference){
  .stage{transition:opacity .45s var(--ease),visibility 0s linear .45s}
  .stage.is-on{transition:opacity .45s var(--ease),visibility 0s}
  .stage.is-on .stage-img{animation:drop .75s var(--ease)}
  .stage.is-on .sticker.st-hero{animation:spin .8s var(--ease)}
  @keyframes drop{from{transform:rotate(6deg) translateY(-18px) scale(.94);opacity:0}to{transform:rotate(-2deg);opacity:1}}
  @keyframes spin{from{transform:rotate(-200deg) scale(.4);opacity:0}to{transform:rotate(-12deg);opacity:1}}
  .stage.is-on .stage-info{animation:rise .6s var(--ease)}
  @keyframes pop{from{transform:scale(.9) translateY(10px);opacity:0}to{transform:none;opacity:1}}
  @keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- Sektionsskal ---------- */
.sec{padding-top:64px}
@media (min-width:640px){.sec{padding-top:88px}}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-bottom:18px}
.sec-head h2{font-size:clamp(34px,3.6vw,58px);font-weight:700;letter-spacing:-.045em}
.sec-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;max-width:100%}
.sec-head>*{min-width:0;max-width:100%}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--soft);max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{border:0;background:transparent;padding:8px 15px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 12px -6px rgba(0,0,0,.18)}
.arrows{display:none;gap:8px}
@media (min-width:640px){.arrows{display:flex}}
.fine{font-size:13px;color:var(--muted);margin-top:14px}

/* ---------- 2. Förstavalen: ett huvudkort + fyra olika former ---------- */
.shelf{display:grid;gap:14px}
.shelf[hidden]{display:none}
.feat,.pc{position:relative;text-decoration:none;border-radius:var(--r-card);transition:box-shadow .35s var(--ease)}
.feat:hover,.pc:hover{box-shadow:var(--shadow)}
.pc .tile,.feat .tile{transition:transform .55s var(--ease)}
/* Etiketten (Rengöring, Serum, Kräm) som en liten påklistrad lapp i stället för grå
   brödtext — samma klistermärkesspråk som "Vårt förstaval" och "Ny!". Vit lapp, svart
   text, en aning sned, så den syns mot pastellen utan att ta mint (mint = bara köp). */
.fmt{justify-self:start;align-self:start;width:fit-content;font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--ink);background:var(--surface);padding:5px 12px;border-radius:var(--r-pill);transform:rotate(-1.8deg);box-shadow:0 1px 0 rgba(18,30,24,.05),0 10px 18px -14px rgba(18,40,30,.55);transition:transform .45s var(--ease)}
.feat:hover .fmt,.pc:hover .fmt{transform:rotate(1.4deg)}
@media (max-width:639px){.fmt{font-size:12px;padding:4px 10px}}
.buyrow{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:10px}
.buyrow b{font-size:22px;font-weight:600;letter-spacing:-.02em}
/* Priset och ordinariepriset står bredvid varandra, vänsterställda över knappen.
   Knappen tar hela bredden — förut delade de rad, och då klämdes knappen till en
   stump på smala kort så fort det fanns två belopp. */
.buyrow .pris{display:flex;align-items:baseline;gap:3px 9px;min-width:0;flex-wrap:wrap}
.buyrow .btn{flex:none;width:100%}
/* Huvudkortet: rosa, produkten lutar och rätar upp sig vid hover */
.feat{display:grid;gap:4px;padding:16px;--card:var(--c-rose)}
.feat .tile{aspect-ratio:4/3;border-radius:22px;transform:rotate(-1.5deg);box-shadow:0 18px 36px -18px rgba(60,20,40,.45)}
.feat:hover .tile{transform:rotate(0)}
.feat:hover .tile img{transform:scale(1.05)}
.feat-body{display:grid;gap:8px;padding:18px 8px 6px;align-content:end}
.feat-name{font-size:clamp(28px,2.6vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.feat-why{font-size:17px;color:var(--muted);max-width:40ch}
.feat .buyrow b{font-size:26px}
.pc{display:flex;flex-direction:column;gap:6px;padding:22px;overflow:hidden}
.pc-name{font-size:21px;font-weight:600;letter-spacing:-.025em;letter-spacing:-.015em;line-height:1.2}
.pc-why{font-size:15.5px;color:var(--muted);line-height:1.45}
.pc .buyrow{margin-top:auto;padding-top:12px}
/* m1: högt kort med stor bild */
.m1{--card:var(--c-lilac)}
.m1 .tile{border-radius:18px;margin-bottom:10px;box-shadow:none}
.m1:hover .tile img{transform:scale(1.06) rotate(-3deg)}
/* m2: produkten lutar i övre hörnet, texten bredvid */
.m2{--card:var(--c-sky);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;grid-template-areas:"img fmt" "img name" "img why" "img buy";column-gap:20px;row-gap:6px}
/* I en hylla med FYRA kort är .m2 en smal kolumn (~425 px), och då får priset plus
   köpknappen inte plats i kortets högerhalva — pucken stack ut över kanten. Där tar
   köpraden hela kortets bredd, som i .m3, och bilden lämnar lite mer åt texten.
   Behovshyllan (.shelf-c) har bara tre kort och ett dubbelbrett .m2 — den rörs inte,
   annars hade knappen sträckts ut över hela det breda kortet. */
.shelf:not(.shelf-c) .m2{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}
.m2 .fmt{grid-area:fmt}.m2 .pc-name{grid-area:name;align-self:start}.m2 .pc-why{grid-area:why;margin-top:8px}.m2 .buyrow{grid-area:buy}
.m2 .tile{grid-area:img;width:100%;height:100%;min-height:240px;aspect-ratio:auto;border-radius:20px;transform:rotate(-1.5deg);box-shadow:0 0 0 3px var(--card),0 14px 26px -14px rgba(20,30,50,.45)}
.m2:hover .tile{transform:rotate(1deg)}
.m2 .tile img{width:84%;height:84%}
/* m3: rund produktbubbla */
.m3{--card:var(--c-butter);display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;grid-template-areas:"fmt img" "name img" "why img" "buy buy";column-gap:18px;row-gap:6px}
.m3 .fmt{grid-area:fmt}.m3 .pc-name{grid-area:name}.m3 .pc-why{grid-area:why}.m3 .buyrow{grid-area:buy}
.m3-top{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.m3-top>span:last-child{display:grid;gap:3px}
.m3 .tile{grid-area:img;align-self:center;width:210px;border-radius:50%;box-shadow:0 0 0 3px var(--card),0 10px 20px -10px rgba(60,50,10,.4)}
.m3 .tile img{width:80%;height:80%}
.m3:hover .tile{transform:rotate(-12deg) scale(1.06)}
/* m4: kompakt svart kort */
.m4{background:var(--ink);color:var(--bg)}
.m4 .fmt,.m4 .pc-why{color:color-mix(in srgb,var(--bg) 62%,var(--ink))}
.m4 .buyrow b{color:var(--bg)}
.m4-top{display:flex;gap:14px;align-items:flex-start}
.m4-text{display:grid;gap:4px;min-width:0}
.m4 .tile{flex:none;width:92px;border-radius:16px;transform:rotate(-6deg)}
.m4 .pc-why{-webkit-line-clamp:3}
.m4:hover .tile{transform:rotate(3deg) scale(1.05)}
/* m5: priset stort, produkten bredvid */
.m5{--card:var(--c-peach)}
.m5-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.m5-price{font-size:30px;font-weight:700;letter-spacing:-.05em;line-height:1}
.m5 .tile{width:56px;border-radius:16px;transform:rotate(9deg);box-shadow:0 0 0 3px var(--card),0 12px 22px -12px rgba(60,30,20,.45)}
.m5:hover .tile{transform:rotate(-4deg)}
.m5 .buyrow{margin-top:12px;padding-top:0}
.pc .pc-why{display:block}
@media (min-width:640px){
  .shelf{grid-template-columns:1fr 1fr;grid-template-areas:"feat feat" "m1 m2" "m1 m3"}
  .feat{grid-template-columns:1.25fr 1fr;grid-template-rows:auto;gap:24px;align-items:stretch}
  .feat .tile{min-height:340px!important}
  .feat-body{align-content:center;padding:12px 12px 12px 0}
  .feat{grid-area:feat}.m1{grid-area:m1}.m2{grid-area:m2}.m3{grid-area:m3}.m4{grid-area:m4}.m5{grid-area:m5}
}
@media (min-width:900px){
  .shelf{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"feat feat m1" "m2 m3 m1";gap:16px}
}
@media (min-width:1200px){
  .feat .tile{min-height:460px!important}
}
/* Huvudkortet och det höga kortet låter bilden växa så att inget tomrum uppstår */
.feat{grid-template-rows:minmax(130px,1fr) auto}
.feat .tile{aspect-ratio:auto;min-height:130px}
.m1 .tile{aspect-ratio:auto;flex:1;min-height:260px}
@media (max-width:639px){.feat .tile{min-height:220px}.m1 .tile{min-height:200px}}

/* ---------- Tonade kort ---------- */
.tint.tint{background:var(--card);--muted:color-mix(in srgb,var(--ink) 70%,var(--card))}
.glead{--card:var(--c-butter)}
.gside>.grow:nth-child(1){--card:var(--c-lilac)}
.gside>.grow:nth-child(2){--card:var(--c-sky)}
.gside>.grow:nth-child(3){--card:var(--c-peach)}
.tools>.panel:nth-child(1){--card:var(--c-sky)}
.tools>.panel:nth-child(2){--card:var(--c-peach)}
/* Rutinen: produkterna hänger snett som uppnålade lappar och rätar upp sig i en våg. */
.routine .tile{box-shadow:0 0 0 3px var(--card),0 14px 26px -14px rgba(20,30,50,.45);transition:transform .55s var(--ease)}
.routine li:nth-child(1) .tile{transform:rotate(-5deg)}
.routine li:nth-child(2) .tile{transform:rotate(3deg) translateY(6px)}
.routine li:nth-child(3) .tile{transform:rotate(-2deg)}
.routine li:nth-child(4) .tile{transform:rotate(5deg) translateY(4px)}
.panel:hover .routine li .tile{transform:none}
.panel:hover .routine li:nth-child(2) .tile{transition-delay:.06s}
.panel:hover .routine li:nth-child(3) .tile{transition-delay:.12s}
.panel:hover .routine li:nth-child(4) .tile{transition-delay:.18s}
.routine b{display:inline-block;justify-self:start;background:var(--ink);color:var(--bg);font-size:12.5px;padding:3px 9px;border-radius:var(--r-pill);margin-top:6px}
/* Ingredienskollen: stora runda symboler i stället för små etiketter. */
.pairs li{font-size:16.5px;padding:10px 10px 10px 18px}
.pairs .v{gap:10px;font-size:14px;font-weight:500}
.pairs .v i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:19px}
.pairs .v.sep i{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.pairs .v.sep{color:var(--ink)}
/* Så väljer vi: överstrykningar i olika pastellfärger. */
.mark{padding:0 .14em;margin:0 -.04em;border-radius:.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mark.m-a{background:var(--c-lilac)}
.mark.m-b{background:var(--c-butter)}
.mark.m-c{background:var(--c-rose)}
/* Sidfotens jätteordmärke */
.bigmark{display:block;margin-top:24px;font-weight:700;letter-spacing:-.075em;line-height:.78;font-size:clamp(64px,15.5vw,260px);color:var(--brand);white-space:nowrap;overflow:hidden;padding-bottom:.04em}

/* ---------- 3. Guiderna: rubriken först, produkterna som solfjäder ---------- */
.glist{display:grid;gap:14px}
.glist>*,.shelf>*{min-width:0}
.glist[hidden]{display:none}
.glead,.grow{text-decoration:none;border-radius:var(--r-card);transition:box-shadow .35s var(--ease)}
.glead:hover,.grow:hover{box-shadow:var(--shadow)}
.glead:hover .g-title,.grow:hover .g-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.g-meta,.g-title,.g-dek{display:block}
/* Guidens kategori får samma lapp; datumet och antalet står kvar som liten text intill. */
.g-meta{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.g-meta b{display:inline-block;color:var(--ink);background:var(--surface);font-weight:700;font-size:13px;padding:5px 12px;border-radius:var(--r-pill);box-shadow:0 1px 0 rgba(18,30,24,.05),0 10px 18px -14px rgba(18,40,30,.55)}
.glead{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:24px 24px 210px}
.glead .g-title{font-size:clamp(32px,3.2vw,54px);font-weight:600;letter-spacing:-.045em;line-height:1.02;text-wrap:balance;max-width:13em;padding-right:64px}
.glead .g-dek{font-size:17px;color:var(--muted);max-width:42ch}
.g-go{display:inline-flex;align-items:center;gap:12px;font-weight:600;font-size:16px;margin-top:10px;align-self:flex-start}
.go-dot{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:18px;font-weight:700}
.go-dot span{display:block;transition:transform .5s var(--ease)}
.glead:hover .go-dot span{transform:rotate(-45deg)}
/* Klistermärket: taggig stjärna, lite sned, vrider sig vid hover. */
.sticker{position:absolute;top:18px;right:18px;width:92px;height:92px;display:grid;place-items:center;text-align:center;background:var(--ink);color:var(--bg);font-weight:700;font-size:16px;line-height:1.05;letter-spacing:-.02em;transform:rotate(12deg);transition:transform .7s var(--ease)}
.glead:hover .sticker{transform:rotate(40deg) scale(1.05)}
/* Solfjädern */
.fan{display:flex}
.fan .tile{flex:none;box-shadow:0 0 0 3px var(--card,var(--bg)),0 16px 30px -14px rgba(20,20,30,.5);transition:transform .55s var(--ease)}
.fan-lg{position:absolute;right:24px;bottom:30px}
.fan-lg .tile{width:134px;border-radius:20px;transform-origin:50% 100%}
.fan-lg .tile+.tile{margin-left:-28px}
.fan-lg .tile:nth-child(1){transform:rotate(-7deg) translateY(8px)}
.fan-lg .tile:nth-child(2){transform:rotate(0);z-index:1}
.fan-lg .tile:nth-child(3){transform:rotate(7deg) translateY(8px)}
.fan-lg .tile:nth-child(4){transform:rotate(12deg) translateY(10px)}
.glead:hover .fan-lg .tile:nth-child(1){transform:rotate(-16deg) translate(-18px,-4px)}
.glead:hover .fan-lg .tile:nth-child(2){transform:rotate(-6deg) translate(-8px,-18px)}
.glead:hover .fan-lg .tile:nth-child(3){transform:rotate(7deg) translate(8px,-16px)}
.glead:hover .fan-lg .tile:nth-child(4){transform:rotate(16deg) translate(18px,-2px)}
.gside{display:grid;gap:14px}
.gcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px;text-decoration:none;border-radius:var(--r-card);transition:box-shadow .35s var(--ease)}
.gcard:hover{box-shadow:var(--shadow)}
.gcard:hover .g-title{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.gcard .g-title{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.18;margin-top:2px}
.gcard .g-dek{font-size:15.5px;color:var(--muted);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gcard .tile{box-shadow:0 0 0 3px var(--card,var(--ink)),0 16px 30px -14px rgba(20,20,30,.5);transition:transform .55s var(--ease)}
/* A: brett, en stor produkt som lutar ut ur hörnet */
.ga{--card:var(--c-lilac);padding-bottom:190px}
.ga-prod{position:absolute;right:20px;bottom:20px}
.ga-prod .tile{width:160px;border-radius:22px;transform:rotate(5deg)}
.ga:hover .ga-prod .tile{transform:rotate(-3deg) translateY(-6px)}
.ga .g-title{font-size:27px;letter-spacing:-.03em;max-width:20em}
/* B: en slarvig hög */
.gb{--card:var(--c-sky)}
.pile{display:flex;justify-content:center;margin:2px 0 16px}
.pile .tile{width:min(100%,250px);border-radius:24px}
.pile .tile:nth-child(1){transform:rotate(-4deg)}
.pile .tile:nth-child(2){left:58px;top:0;transform:rotate(5deg);z-index:1}
.pile .tile:nth-child(3){left:116px;top:24px;transform:rotate(16deg)}
.gb:hover .pile .tile:nth-child(1){transform:rotate(2deg) translateY(-6px)}
.gb:hover .pile .tile:nth-child(2){transform:rotate(0) translateY(-8px)}
.gb:hover .pile .tile:nth-child(3){transform:rotate(24deg) translate(10px,4px)}
/* C: svart kort med runda bubblor */
.gc{background:var(--ink);color:var(--bg);--card:var(--ink)}
.gc .g-meta{color:color-mix(in srgb,var(--bg) 62%,var(--ink))}
.gc .g-meta b{color:var(--ink);background:var(--bg)}
.gc .g-title{font-size:23px}
.gc-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:22px}
.gc-foot .go-dot{flex:none}
/* Bubblan får krympa när kortet är smalt: vid ca 1000 px är kortet 221 px brett
   och 210 px bubbla + pilcirkel sköt ut pilen utanför både kortet och skärmen. */
.bubbles{display:flex;min-width:0;flex:0 1 auto}
.bubbles .tile{width:210px;max-width:100%;min-width:0;flex:0 1 auto;border-radius:50%}
.bubbles .tile+.tile{margin-left:-12px}
.bubbles .tile img{width:76%;height:76%}
.gc:hover .bubbles .tile:nth-child(1){transform:rotate(-8deg) scale(1.04)}
.gc:hover .bubbles .tile:nth-child(2){transform:translateY(-12px)}
.gc:hover .bubbles .tile:nth-child(3){transform:translateY(-6px)}
.go-inv{background:var(--bg);color:var(--ink)}
.gc:hover .go-dot span{transform:rotate(-45deg)}
/* D: produkterna på rad, lutar åt olika håll */
.gd{--card:var(--c-peach);display:grid;gap:16px}
.gd-text{display:flex;flex-direction:column;gap:6px}
.gd-line{display:flex;gap:8px;padding:4px 2px}
.gd-line .tile{width:58px;border-radius:14px}
.gd-line .tile:nth-child(odd){transform:rotate(-7deg)}
.gd-line .tile:nth-child(even){transform:rotate(6deg) translateY(5px)}
.gd:hover .gd-line .tile{transform:translateY(-6px)}
.gd:hover .gd-line .tile:nth-child(2){transition-delay:.05s}
.gd:hover .gd-line .tile:nth-child(3){transition-delay:.1s}
.gd:hover .gd-line .tile:nth-child(4){transition-delay:.15s}
/* E: ett jättestort tal */
.ge{--card:var(--c-rose);min-height:200px;padding-right:120px}
.ge-count{display:flex;align-items:flex-end;gap:8px;margin-top:auto;padding-top:16px}
.ge-count b{font-size:72px;font-weight:700;letter-spacing:-.07em;line-height:.8}
.ge-count span{font-size:13px;color:var(--muted);max-width:6.5em;line-height:1.2;padding-bottom:4px}
.ge-prod{position:absolute;right:20px;bottom:20px}
.ge-prod .tile{width:86px;border-radius:16px;transform:rotate(-9deg)}
.ge:hover .ge-prod .tile{transform:rotate(5deg) translateY(-6px)}
@media (min-width:640px){
  .glist{grid-template-columns:1fr 1fr;grid-template-areas:"lead lead" "ga ga" "gb gc"}
  .glead{grid-area:lead}.ga{grid-area:ga}.gb{grid-area:gb}.gc{grid-area:gc}.gd{grid-area:gd}.ge{grid-area:ge}
  .gd{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .ga{padding:24px 280px 24px 24px;min-height:250px}
  .ga-prod{right:24px;top:20px;bottom:20px;margin:0;display:flex;align-items:center}
  .ga-prod .tile{width:auto;height:100%;max-height:230px;aspect-ratio:1}
}
@media (min-width:900px){
  .glead{padding:30px 30px 300px}
  .fan-lg{right:32px;bottom:32px}
  .fan-lg .tile{width:224px;border-radius:26px}
  .fan-lg .tile+.tile{margin-left:-46px}
  .sticker{width:104px;height:104px;font-size:18px;top:24px;right:24px}
}

@media (min-width:1000px){.glist{grid-template-columns:1.1fr .55fr .55fr;grid-template-areas:"lead ga ga" "lead gb gc" ". cit .";gap:16px}}

/* Mobil: stora men inte bredare än kortet */
@media (max-width:639px){
  .fan-lg .tile{width:108px}.fan-lg .tile+.tile{margin-left:-20px}
  .m2{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"img" "fmt" "name" "why" "buy"}.m2 .tile{aspect-ratio:4/3;min-height:0;margin-bottom:8px}
  .m3{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"img" "fmt" "name" "why" "buy"}.m3 .tile{width:220px;justify-self:center;margin-bottom:8px}
  .bubbles .tile{width:160px}
  .pile .tile{width:min(100%,220px)}
  .ga-prod .tile{width:140px}
}
@media (min-width:640px) and (max-width:899px){.fan-lg .tile{width:140px}.m3{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"img" "fmt" "name" "why" "buy"}.m3 .tile{width:190px;justify-self:center;margin-bottom:8px}}

/* ---------- 4. Verktygen ---------- */
.tools{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}
.panel{background:var(--surface);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column}
@media (min-width:640px){.panel{padding:32px}}
.panel h2{font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.04em}
.panel>p{color:var(--muted);margin-top:10px;max-width:44ch}
.routine{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:24px 0 10px}
@media (max-width:639px){
  .routine{grid-template-columns:minmax(0,1fr);gap:12px}
  .routine li{
    display:grid;
    grid-template-columns:78px minmax(0,1fr) auto;
    grid-template-areas:"bild etikett kop" "bild namn kop";
    align-items:center;
    column-gap:14px;
    row-gap:2px;
    padding:10px;
    border-radius:18px;
    background:color-mix(in srgb,var(--surface) 70%,transparent);
  }
  .routine li .tile{grid-area:bild;width:78px;margin:0;transform:none}
  .routine li b{grid-area:etikett;margin:0;align-self:end}
  .routine li span:not(.tile){grid-area:namn;align-self:start;font-size:13.5px}
  .routine li .btn-xs{grid-area:kop;margin:0}
}
.routine li{display:grid;gap:4px;align-content:start;min-width:0}
.routine .tile{border-radius:16px;margin-bottom:6px;background:var(--tile)}
.routine b{font-size:14px;font-weight:600}
.routine span:not(.tile){font-size:12.5px;color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
.panel .note{font-size:13px;color:var(--muted);margin-bottom:22px}
.pairs{display:grid;gap:8px;margin:24px 0}
.pairs li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--surface) 62%,transparent);font-weight:500}
.pairs li>span:first-child{display:inline-flex;align-items:center;gap:6px}
.pairs .ph-plus{color:var(--muted);font-size:13px}
.v{display:inline-flex;align-items:center;gap:6px;font-size:14px;white-space:nowrap}
.v i{font-size:17px}
.v.sep{color:var(--muted)}
.panel .btn{margin-top:auto;align-self:flex-start}

/* ---------- 5. Så väljer vi ---------- */
.creed{padding:88px 0 72px}
.creed p{font-size:clamp(23px,2.6vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.14;max-width:28ch;text-wrap:balance}

.creed .link{margin-top:28px;font-size:16px}

/* ---------- Sidfot ---------- */
.foot{border-top:1px solid var(--line);padding:48px 0 32px}
.foot-grid{display:grid;gap:36px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.foot .logo{display:inline-block;margin:0}
.foot .slogan{font-size:14px;color:var(--muted);margin-top:4px}
.foot .honest{font-size:14.5px;color:var(--muted);margin-top:16px;max-width:38ch}
.foot h3{font-size:14px;font-weight:600;margin-bottom:12px}
.foot li a{display:inline-block;padding:4px 0;font-size:14.5px;color:var(--muted);text-decoration:none}
.foot li a:hover{color:var(--ink)}
.ing{display:flex;flex-wrap:wrap;gap:6px}
.ing a{font-size:13.5px;padding:6px 12px;border-radius:var(--r-pill);background:var(--soft);text-decoration:none}
.ing a:hover{background:var(--soft2)}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

/* ---------- Inte rätt för dig? + prissänkning ---------- */
.stage-alt{display:none}
.stage-fit{max-width:46ch}
@media (max-width:639px){.stage-fit{margin-top:12px}}
.stage-alt{display:none!important}
@media (min-width:640px){.stage-alt{display:flex!important;max-width:44ch}.stage-alt b{color:var(--ink);font-weight:600}}
/* Rätt för dig om … + Inte rätt för dig? */
.fit,.stage-fit{display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.4;color:var(--ink);margin-top:10px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--surface) 62%,transparent)}
.fit i,.stage-fit i{font-size:18px;flex:none;margin-top:1px}
.fit b,.stage-fit b{font-weight:600}
.fitalt{display:block}
.alt,.stage-alt{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.4;color:color-mix(in srgb,var(--ink) 78%,var(--card,var(--surface)));margin-top:8px;padding:0 12px}
.alt i,.stage-alt i{font-size:17px;flex:none;margin-top:1px}
.alt b{color:var(--ink);font-weight:600}
/* Ordinariepriset: överstruket belopp, inget ord (ägarbeslut 2026-10-09). Rosa
   pillret med "Sänkt från [ordinariepris]" bar tre ord för en upplysning som ett streck ger
   direkt, och drog dessutom mer blick än priset man faktiskt betalar. */
.was{font-size:18px;font-weight:500;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,var(--ink) 45%,transparent);white-space:nowrap}
/* Rabatten i procent som märke i bildplattans hörn (ägarbeslut 2026-10-15, STANGDA
   "Rabattmärket i bildens hörn"). Samma rosa piller som "Nedsatta just nu"
   (.sokut__pct): i prisraden blev pris, överstruket pris, piller och butik för mycket
   på en rad. Siffran räknas ur feeden (rabattText). Pillret som togs bort 9/10 bar en
   hel mening i prisraden, "Sänkt från [ordinariepris]", och återinförs inte. */
.rabatt{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);background:var(--c-rose-stark);color:var(--ink);font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap}
.rabatt--horn{position:absolute;z-index:2;top:10px;left:10px}
.atb-band__media{position:relative}
/* Vänster överallt (ägarbeslut 2026-10-15), utom på Redaktionens val: där äger stjärnan
   vänster hörn, och rabatten flyttar till höger. */
.rabatt--hoger{left:auto;right:10px}
/* Bandets etikett hänger över plattans vänstra hörn bara från 900 px, bara i bandläget
   och bara på band som inte är spegelvända (artikel-ta-2026.css). Den når 16 px ned i
   plattan (uppmätt 2026-10-15), så rabatten läggs 10 px under den och sitter kvar till
   vänster. I kortläget ligger etiketten helt ovanför plattan; på mobil under bilden. */
@media (min-width:900px){.atb-band--band .rabatt--under-etikett{top:26px}}
/* "Finns hos [butik]" bredvid priset (ägarbeslut 2026-10-15, efter Teknikatletens köpmodul):
   knappen säger "Visa i butik", butiken står i prisraden direkt efter priset och
   bryter till egen rad när kortet är för smalt. Prisradernas egna span-regler skrivs över.
   I jämförelsetabellen och rutinkorten (smala) står den under priset. */
.finns,.pris .finns,.atb-kortpris .finns,.atb-kop__pris .finns,.price .finns,.sokut__pris .finns{font-size:13.5px;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--muted);white-space:nowrap}
.m4 .finns{color:color-mix(in srgb,var(--bg) 62%,var(--ink))}
.atb-jmf__info{display:flex;flex-direction:column;gap:2px;min-width:0}
.atb-jmf__info .finns{white-space:normal}
.rb2 .routine li .rb2-pris{flex-wrap:wrap;row-gap:2px}
.rb2 .routine li .rb2-pris .finns{flex-basis:100%;font-size:13px;font-weight:500;color:var(--muted);white-space:normal}
.m2{grid-template-rows:auto auto auto 1fr auto!important;grid-template-areas:"img fmt" "img name" "img why" "img alt" "img buy"!important}
.m2 .fitalt{grid-area:alt}
/* Köpraden spänner över hela kortet i en hylla med fyra kort (artikeln och
   kategoriflikarna): i den smala kolumnen fick priset plus knappen inte plats i
   högerhalvan och knappens text klipptes. Behovshyllans dubbelbreda .m2 rörs inte. */
.shelf:not(.shelf-c) .m2{grid-template-areas:"img fmt" "img name" "img why" "img alt" "buy buy"!important}
.m3{grid-template-rows:auto auto auto 1fr auto!important;grid-template-areas:"fmt img" "name img" "why img" "alt img" "buy buy"!important}
.m3 .fitalt{grid-area:alt}
@media (max-width:899px){
  .m3{grid-template-columns:1fr!important;grid-template-rows:auto!important;grid-template-areas:"img" "fmt" "name" "why" "alt" "buy"!important}
  .m3 .tile{width:190px!important;justify-self:center;margin-bottom:8px}
}
@media (max-width:639px){.m2{grid-template-columns:1fr!important;grid-template-rows:auto!important;grid-template-areas:"img" "fmt" "name" "why" "alt" "buy"!important}}
/* Behovsfliken: tre produkter */
@media (min-width:640px){.shelf-c{grid-template-areas:"feat feat" "m1 m2"}}
@media (min-width:900px){.shelf-c{grid-template-areas:"feat feat m1" "m2 m2 m1"}}
@media (min-width:640px) and (max-width:899px){.shelf-c .m2{grid-template-columns:1fr!important;grid-template-rows:auto!important;grid-template-areas:"img" "fmt" "name" "why" "alt" "buy"!important}.shelf-c .m2 .tile{aspect-ratio:4/3}}

/* ---------- Kan man blanda? Svart band, svaren landar som klistermärken ---------- */
.mix{margin:96px calc(-1 * var(--g)) 0;padding:72px var(--g) 80px;background:#121514;color:#f3f4f2}
.mix h2{font-size:clamp(34px,3.6vw,58px);font-weight:700;letter-spacing:-.045em;margin-bottom:28px}
.mix-row{font-size:clamp(25px,2.7vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.35;max-width:24em}
.mix-row+.mix-row{margin-top:10px}
.mix-lab{color:#f3f4f2;margin-right:.1em}
.mw{font:inherit;letter-spacing:inherit;background:transparent;border:0;color:#7d827f;padding:.02em .12em;margin:0 .02em;border-radius:.16em;cursor:pointer;display:inline-block;transition:color .3s var(--ease),background-color .3s var(--ease),transform .5s var(--ease)}
.mw:hover{color:#f3f4f2}
.mw[aria-pressed="true"]{background:#f3f4f2;color:#121514;transform:rotate(-2deg)}
.mw[data-row="b"][aria-pressed="true"]{transform:rotate(2deg)}
.mw:focus-visible{outline-color:#f3f4f2}
.verdicts{display:grid;margin-top:44px}
.vd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 32px;align-items:center}
.vd[hidden]{display:none}
.vd-st{width:170px;height:170px;display:grid;place-items:center;text-align:center;padding:26px;font-weight:700;font-size:19px;line-height:1.05;letter-spacing:-.02em;color:#121514;clip-path:var(--burst);transform:rotate(-10deg)}
.vd-good .vd-st{background:#f4e38a}
.vd-separate .vd-st{background:#f6c9dc}
.vd-neutral .vd-st{background:#ddd3f5}
.vd-same .vd-st{background:#f3f4f2}
.vd-txt{font-size:clamp(18px,1.6vw,24px);line-height:1.4;max-width:40ch;color:#f3f4f2}
@media (prefers-reduced-motion:no-preference){.vd:not([hidden]) .vd-st{animation:stamp .6s var(--ease)}@keyframes stamp{from{transform:rotate(-40deg) scale(1.4);opacity:0}to{transform:rotate(-10deg);opacity:1}}}
.mix-more{display:inline-flex;align-items:center;gap:8px;margin-top:36px;color:#f3f4f2;font-weight:600;text-decoration:underline;text-decoration-color:#4a4f4c;text-underline-offset:5px}
.mix-more:hover{text-decoration-color:#f3f4f2}
@media (min-width:1100px){
  .mix{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:72px;align-items:center}
  .mix h2{grid-column:1/-1}.mix-row{grid-column:1}.mix-more{grid-column:1;justify-self:start}
  .verdicts{grid-column:2;grid-row:2/span 3;margin-top:0;align-self:center}
  .vd{grid-template-columns:1fr;justify-items:start;gap:26px}
  .vd-st{width:220px;height:220px;font-size:24px;padding:32px}
}
@media (max-width:639px){.vd{grid-template-columns:1fr}.vd-st{width:130px;height:130px;font-size:16px;padding:18px}}

/* ---------- Rutinen: ett brett kort med köp per steg ---------- */
.tools{grid-template-columns:1fr!important}
.routine li .btn-xs{margin-top:8px}
.btn-xs{min-height:38px;padding:0 14px;font-size:14px;width:100%}
.btn-buy.btn-xs{padding:0 14px}
.rt-total{margin:4px 0 6px;font-size:16px}
.rt-total b{font-size:32px;font-weight:700;letter-spacing:-.04em;margin-right:6px}
.rt-total span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
@media (min-width:900px){
  .tools>.panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);grid-template-areas:"h steps" "p steps" "tot steps" "note steps" "cta steps";grid-template-rows:auto auto auto auto 1fr;column-gap:48px;padding:40px}
  .tools>.panel>h2{grid-area:h}.tools>.panel>p:not(.rt-total):not(.note){grid-area:p}.tools>.panel>.routine{grid-area:steps;margin:0;align-self:center}.tools>.panel>.rt-total{grid-area:tot;margin-top:24px}.tools>.panel>.note{grid-area:note}.tools>.panel>.btn{grid-area:cta;align-self:start;justify-self:start}
  .routine{gap:16px}
}

/* ---------- Innehållsförteckningen som bild ---------- */
.inci{margin:96px calc(-1 * var(--g)) 0;padding:72px var(--g);--card:var(--c-lilac);background:var(--card)}
/* minmax(0,1fr): utan den blir kolumnen så bred som kvittots bredaste rad kräver,
   och hela sektionen sköt ut ~70 px utanför skärmen på en liten telefon. */
.inci-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;align-items:center}
.inci-head h2{font-size:clamp(34px,3.6vw,58px);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.inci-head p{font-size:17px;color:color-mix(in srgb,var(--ink) 72%,var(--card));margin-top:16px;max-width:40ch}
.inci-buy{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin:26px 0 18px}
.inci-buy .price{grid-auto-flow:row}
.receipt{background:#fffefb;color:#121514;padding:28px 26px 40px;border-radius:8px 8px 0 0;box-shadow:0 30px 50px -28px rgba(40,30,70,.45);transform:rotate(-1.5deg);-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/24px 12px repeat-x;mask:linear-gradient(#000 0 0) top/100% calc(100% - 12px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/24px 12px repeat-x}
.rc-title{font-weight:700;font-size:16px;letter-spacing:-.01em;padding-bottom:12px;margin-bottom:6px;border-bottom:2px solid #121514}
.receipt ol,.receipt ul{margin:0;padding:0}
.receipt li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed #d6d6d0;font-size:16px}
.rc-n{width:20px;font-size:13px;color:#7a7f7c;font-variant-numeric:tabular-nums}
.rc-note{margin-left:auto;font-size:12px;font-weight:600;background:#f4e38a;padding:3px 10px;border-radius:999px;transform:rotate(-2deg);white-space:nowrap}
.rc-none{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-weight:600}
.rc-none b{background:#f6c9dc;padding:3px 12px;border-radius:999px;font-size:13.5px}
.rc-none+.rc-none{margin-top:8px}
.rc-src{font-size:12px;color:#7a7f7c;margin-top:18px}
/* Smal telefon: den gula noten får gå ned på egen rad i stället för att tvinga
   kvittot bredare än skärmen. */
@media (max-width:560px){
  .receipt li{flex-wrap:wrap;gap:4px 12px}
  .rc-note{margin-left:0;white-space:normal}
}
.inci-prod{width:min(100%,380px);justify-self:center;border-radius:28px;transform:rotate(4deg);box-shadow:0 0 0 4px var(--card),0 30px 50px -26px rgba(40,30,70,.45)}
.inci-prod img{width:84%;height:84%}
@media (min-width:1000px){.inci-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.85fr) minmax(0,.8fr);gap:48px}}

/* ---------- Flikarna: stora, under rubriken, valt = svart ---------- */
.sec-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:22px}
.sec-head .sec-tools{gap:10px 16px;width:100%}
.sec-head .seg{background:transparent;padding:2px;gap:8px;border-radius:0;overflow-x:auto;flex-wrap:nowrap}
.sec-head .seg button{padding:12px 20px;font-size:16px;font-weight:600;color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--line);border-radius:var(--r-pill);transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease)}
.sec-head .seg button:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sec-head .seg button:active{transform:scale(.97)}
.sec-head .seg button[aria-selected="true"]{background:var(--ink);color:var(--sel-fg);box-shadow:none}
.sec-head .sec-tools>.link{margin-left:auto;font-size:16px}
@media (max-width:639px){.sec-head .seg button{padding:10px 16px;font-size:15px}.sec-head .sec-tools>.link{margin-left:0}}

/* ---------- Rörelse: hierarki vid start, avslöjande vid scroll ---------- */
@media (prefers-reduced-motion:no-preference){
  .enter{opacity:0;transform:translateY(16px);animation:up .9s var(--ease) forwards;animation-delay:calc(var(--i,0)*80ms)}
  @keyframes up{to{opacity:1;transform:none}}
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- Bra att veta: anslagstavlan ---------- */
/* Lappar i sidans pastellpalett, var och en lite snedställd som på en riktig tavla.
   Myt-lappen vänds med ett tryck: båda sidorna ligger i samma gridcell, så höjden
   blir den högsta av dem och inget mått behöver hårdsättas. */
.sec-dek{margin:6px 0 0;color:var(--muted);font-size:16px;max-width:46ch}
.tavla{display:grid;gap:18px;margin-top:26px;grid-template-columns:1fr}
@media (min-width:640px){.tavla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.tavla{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lapp{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:var(--r-card);background:var(--card);transform:rotate(var(--v,0deg));transition:transform .5s var(--ease),box-shadow .35s var(--ease)}
.lapp:hover{transform:rotate(0deg) translateY(-3px);box-shadow:var(--shadow)}
.t0{--card:var(--c-rose);--v:-1.1deg}
.t1{--card:var(--c-sky);--v:1.3deg}
.t2{--card:var(--c-butter);--v:-.8deg}
.t3{--card:var(--c-lilac);--v:1deg}
.t4{--card:var(--c-peach);--v:-1.4deg}
.lapp-et{align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink);background:var(--surface);padding:5px 12px;border-radius:var(--r-pill);box-shadow:0 1px 0 rgba(18,30,24,.05),0 10px 18px -14px rgba(18,40,30,.55)}
.lapp-et-sant{background:var(--ink);color:var(--bg)}
.lapp-txt{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.32;text-wrap:pretty}
.lapp-fakta .lapp-txt{font-size:18px;font-weight:500;line-height:1.42}
.lapp-kalla{display:inline-flex;align-items:center;gap:7px;margin-top:auto;font-size:13px;font-weight:500;color:color-mix(in srgb,var(--ink) 62%,var(--card));text-decoration:none;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.lapp-kalla:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Vändningen */
.lapp-vand{display:grid;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.lapp-sida{grid-area:1/1;display:flex;flex-direction:column;gap:12px;transition:opacity .35s var(--ease),transform .5s var(--ease)}
.lapp-bak{opacity:0;transform:translateY(8px);pointer-events:none}
.lapp-vand[aria-expanded="true"] .lapp-fram{opacity:0;transform:translateY(-8px);pointer-events:none}
.lapp-vand[aria-expanded="true"] .lapp-bak{opacity:1;transform:none;pointer-events:auto}
.lapp-cta{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;margin-top:4px;font-size:14px;font-weight:600;color:var(--ink);border-bottom:1.5px solid color-mix(in srgb,var(--ink) 35%,var(--card));padding-bottom:2px}
.lapp-vand:hover .lapp-cta{border-bottom-color:var(--ink)}
@media (max-width:639px){.lapp{padding:20px}.lapp-txt{font-size:17.5px}.lapp-fakta .lapp-txt{font-size:16.5px}}


/* ---------- Marginalcitatet i guiderna ---------- */
/* En mening ur guiden rakt ovanför, med en ritad pil upp mot kortet. Den ligger i en
   egen lucka i rutnätet (rad tre, mittkolumnen) så ytan blir medvetet asymmetrisk
   i stället för ännu ett kort i raden. */
.gcitat{margin:0;padding:6px 4px 0;display:flex;flex-direction:column;gap:10px}
.gcitat-pil{display:none;width:86px;height:60px;color:color-mix(in srgb,var(--ink) 52%,var(--bg));transform:scaleX(-1) rotate(-4deg);margin:-4px 0 2px 10px}
.gcitat blockquote{margin:0;font-size:19px;font-weight:600;letter-spacing:-.028em;line-height:1.3;text-wrap:balance;color:var(--ink)}
.gcitat .cit-kort{display:none}
.gcitat figcaption a{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.gcitat figcaption a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (min-width:1000px){
  .gcitat{grid-area:cit;padding:14px 10px 0 2px}
  .gcitat-pil{display:block}
  .gcitat blockquote{font-size:23px}
  .gcitat .cit-lang{display:none}
  .gcitat .cit-kort{display:inline}
}
/* ---------- Pauselementen mellan sektionerna ---------- */
/* Samma familj som marginalnotisen i guiderna, men i två andra former: den breda
   centrerade pausen delar sidans tyngsta sektioner, och den signerade raden står
   vänsterställd med etikett. Varieras med flit så greppet inte blir en mall. */
.paus{margin:72px auto 64px;max-width:min(100%,900px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.paus blockquote{margin:0;max-width:15em;font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1.08;text-wrap:balance}
.paus figcaption a{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none}
.paus figcaption a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.paus-egen{max-width:min(100%,640px);text-align:left;align-items:flex-start;margin:64px 0 56px;padding-left:22px;border-left:3px solid var(--ink)}
.paus-egen blockquote{max-width:19em;font-size:clamp(21px,2.4vw,30px);font-weight:500;letter-spacing:-.028em;line-height:1.26}
.paus-et{font-size:12px;font-weight:700;color:var(--ink);background:var(--surface);padding:5px 12px;border-radius:var(--r-pill);box-shadow:0 1px 0 rgba(18,30,24,.05),0 10px 18px -14px rgba(18,40,30,.55)}
@media (max-width:639px){
  .paus{margin:52px auto 46px}
  .paus-egen{margin:44px 0 40px;max-width:100%;padding-left:16px}
}

/* Mint som utmärkelsefärg (ägarbeslut 2026-10-08): Redaktionens val-markören bär
   mint med svart text. Köpknappen skiljs genom FORMEN — den är den enda med puck. */
.pick-label{background:var(--buy);color:var(--buy-ink);font-weight:700}

/* ---------- Rörelse, gemensam för alla omdesignade sidor ----------
   Flyttad hit ur artikelns stilark 2026-10-09: samma rörelse ska gälla
   startsidan, artiklarna och de sidor som byggs om härnäst, så den bor i
   grunden i stället för bakom artikelns .atb-klasser. Artikelns egna ytor
   (produktbandets text, den klibbiga bilden) ligger kvar i artikel-ta-2026.css.

   Tre delar: mjuk rullning till ankare, kort och block som stiger när de kommer
   in i bild, och ett glansskimmer över köpknappen en gång när den syns. Allt
   ligger bakom prefers-reduced-motion, och stigningen dessutom bakom @supports —
   en webbläsare utan scroll-driven animation visar allt stilla och synligt. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* Lite luft ovanför ankarmålet, så rubriken inte klistras mot skärmkanten.
   (Tidigare 92 px för att komma under den klibbiga mastheaden — den är borta.) */
body[data-skal="omdesign"] [id]{scroll-margin-top:24px}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* .stig är utilityn för nya ytor; resten är startsidans egna block.
       Sektionerna själva rör vi inte — de ägs av .reveal-observatören. */
    .stig,
    .panel,
    .paus,
    .glist>*,
    .vd{
      animation:omd-stig linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 55%;
    }
    /* Hyllans kort stiger bara på bred skärm — i karusellen är scrollporten
       vågrät, och då utlöses animationen fel. */
    @media (min-width:761px){
      .shelf>*{
        animation:omd-stig linear both;
        animation-timeline:view();
        animation-range:entry 0% entry 60%;
      }
    }
    /* Glansskimmer över köpknappen en gång när den kommer in i bild. */
    .btn-buy{
      background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
      background-size:250% 100%;
      background-repeat:no-repeat;
      animation:omd-sken linear both;
      animation-timeline:view();
      animation-range:entry 60% cover 40%;
    }
  }
}
@keyframes omd-stig{
  from{opacity:0;transform:translateY(34px)}
  to{opacity:1;transform:none}
}
@keyframes omd-sken{
  from{background-position:130% 0}
  to{background-position:-130% 0}
}

/* ---------- Foten (riktning A, ägarbeslut 2026-10-09) ---------- */
/* Mörk botten, mint accent. Sidan slutar mörkt efter den ljusa pastellen — samma
   nästan-svart som "Kan man blanda?"-bandet och det svarta guidekortet, så foten är
   en yta sidan redan känner igen. Allt som var guld är mint. Bärs av Fot.astro, som
   bara sidor med skal="omdesign" laddar. */
.fot {
  margin-top: 64px;
  background: var(--ink);
  color: #e8ebe9;
  padding: 56px 0 28px;
}
.fot-topp {
  display: grid;
  gap: 40px;
}
@media (min-width: 900px) {
  .fot-topp { grid-template-columns: 1.1fr 0.9fr; gap: 56px; }
}
.fot-logo {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
/* Ljus grå på mörk fot: --muted är gjord för ljus yta och gav kontrast 2,9 (2026-10-13). */
.fot-logo span { color: color-mix(in srgb, var(--bg) 55%, var(--ink)); }
.fot-slogan {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand);
}
.fot-heder {
  margin: 18px 0 0;
  max-width: 42ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: #b6bdb9;
}
.fot-rubrik {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand);
}
.fot-rubrik--2 { margin-top: 28px; }
.fot-piller {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fot-piller a {
  border: 1px solid #2b322e;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 12.5px;
  color: #e8ebe9;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.fot-piller a:hover,
.fot-piller a:focus-visible { border-color: var(--brand); color: var(--brand); }
.fot-kat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fot-kat a {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9aa29d;
  text-decoration: none;
}
.fot-kat a:hover,
.fot-kat a:focus-visible { color: var(--brand); }
.fot-botten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #2b322e;
  font-size: 12px;
  color: #8d948f;
}
.fot-botten p { margin: 0; }
/* Flex med gap i stället för margin-right: på mobil bröt raden mitt inne i en
   länk ("Så väljer / vi") och mellanrummen blev ojämna. nowrap håller ihop varje
   etikett, radbrytningen sker mellan dem. */
.fot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.fot-legal a {
  color: #8d948f;
  text-decoration: none;
  white-space: nowrap;
}
.fot-legal a:hover,
.fot-legal a:focus-visible { color: var(--brand); }

/* Mörkt kort (vinrött): texten vänds, men köpknappen och mintpillren står kvar
   oförändrade — minten läser sig lika bra mot vinrött som mot pastell. */
[data-mork]{--ink:var(--wine-ink);--muted:var(--wine-muted);--line:rgba(255,255,255,.18);--soft:rgba(255,255,255,.12)}
[data-mork] .fmt{background:rgba(255,255,255,.14);color:var(--wine-ink)}

/* ---------- Rutinbyggaren (/bygg-rutin, 2026-10-12) ----------
   Startsidans rutinpanel (.panel.tint + .routine + .rt-total) med hjältens mening
   (.w-knapparna) överst. Bara det som skiljer bor här. */
.rb2-sida{padding-bottom:40px}
/* Sajtens globala h1/h2 bär den gamla serifen — här gäller omdesignens Geist. */
.rb2-sida h1,.rb2-sida h2{font-family:inherit}
.rb2-topp,.rb2,.rb2-guide,.rb2-faq{margin-inline:auto}
.rb2-topp{position:relative;padding:28px 0 26px;max-width:1200px}
.rb2-stamp{position:absolute;right:0;top:34px;width:108px;height:108px;display:grid;place-items:center;text-align:center;clip-path:var(--burst);background:var(--buy);color:var(--buy-ink);font-weight:700;font-size:14px;line-height:1.1;letter-spacing:-.02em;transform:rotate(12deg)}
@media (min-width:900px){.rb2-stamp{width:150px;height:150px;font-size:19px;right:12px;top:40px}}
@media (max-width:639px){.rb2-stamp{width:84px;height:84px;font-size:11.5px;top:auto;bottom:-30px;right:0;z-index:2}}
@media (prefers-reduced-motion:no-preference){.rb2-stamp{animation:rb2stamp .8s var(--ease) .2s both}@keyframes rb2stamp{from{transform:rotate(-30deg) scale(1.5);opacity:0}to{transform:rotate(12deg);opacity:1}}}
.rb2-crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:14px}
.rb2-crumbs a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.rb2-h1{font-size:clamp(40px,6vw,96px);font-weight:700;letter-spacing:-.055em;line-height:.96;max-width:13.5em;padding-right:min(18vw,170px)}
@media (max-width:639px){.rb2-h1{padding-right:0}}
.rb2-dek{margin-top:20px;font-size:clamp(18px,1.6vw,23px);font-weight:500;letter-spacing:-.015em;line-height:1.4;max-width:34ch}
.rb2{--card:var(--c-sky);max-width:1200px}
/* Kortens scrollinfasning (animation-timeline) är gjord för små kort; på en panel som
   är högre än skärmen blev den kvar halvgenomskinlig. Verktyget står still. */
.rb2.rb2{animation:none;opacity:1;transform:none}
.rb2-mening{display:grid;gap:6px}
.rb2-rad{font-size:clamp(23px,2.3vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.3}
.rb2-lab{margin-right:.15em}
.rb2 .w{color:color-mix(in srgb,var(--ink) 62%,var(--card));margin:0 .06em}
.rb2 .w:hover{color:var(--ink)}
.rb2 .w[aria-pressed="true"]{color:var(--sel-fg)}
.rb2:not([data-dygn]) .rb2-dygn{display:none}
.rb2-dinrubrik{margin-top:30px;padding-top:26px;border-top:1.5px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.rb2-dinrubrik h2{font-size:clamp(26px,2.6vw,40px)!important;font-weight:700;letter-spacing:-.04em;line-height:1.05}
.rb2-dinrubrik p{margin-top:8px;color:var(--muted);max-width:52ch}
.rb2-passar{display:inline-flex;align-items:flex-start;gap:5px;align-self:flex-start;margin-top:6px;padding:4px 10px 4px 7px;border-radius:var(--r-pill);background:var(--c-mint);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.3}
.rb2-passar i{font-size:14px;color:var(--pick);margin-top:1px}
.rb2-varfor strong{font-weight:600;color:var(--ink)}
/* Dator: korten delar radindelning (subgrid) — bild, etikett, namn, pris, bock, text,
   varning, köp. En rad som är högre på ett kort blir lika hög på alla, så allt ligger
   i linje (ägarkrav 2026-10-12: "det måste vara symmetriskt"). */
@media (min-width:640px){
  .rb2 .routine{row-gap:0;column-gap:16px}
  .rb2 .routine li{display:grid;grid-row:span 8;grid-template-rows:subgrid;row-gap:6px;align-content:stretch}
  .rb2 .routine li>b{justify-self:start;align-self:start}
  .rb2 .routine li .btn-xs{align-self:end;margin-top:10px}
  .rb2-passar,.rb2-pris,.rb2-varfor,.rb2-obs{margin-top:0}
}
.rb2-dygn{display:inline-flex;gap:4px;padding:4px;margin-top:26px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 55%,transparent);align-self:flex-start}
.rb2-dygn button{font:inherit;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;padding:9px 18px;border-radius:var(--r-pill);background:transparent;color:var(--muted);transition:background-color .3s var(--ease),color .3s var(--ease)}
.rb2-dygn button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.rb2-dygn i{font-size:17px}
/* Utan JS (inget data-dygn) syns båda passen under var sin rubrik; med JS ett i taget. */
.rb2-passrubrik{font-size:18px!important;font-weight:600!important;letter-spacing:-.02em!important;margin-top:24px}
.rb2[data-dygn] .rb2-passrubrik{display:none}
.rb2[data-dygn="am"] .rb2-pm,.rb2[data-dygn="pm"] .rb2-am{display:none}
.rb2 .routine{margin-top:20px}
.rb2-varfor{font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
.rb2-obs{font-size:12.5px;line-height:1.4;margin-top:4px;padding:6px 9px;border-radius:10px;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.rb2-gap{align-content:start;padding:14px;border-radius:16px;border:1.5px dashed color-mix(in srgb,var(--ink) 22%,transparent)}
.rb2 .rt-total{margin-top:22px}
.rb2-pris{display:flex;align-items:baseline;gap:8px;margin-top:4px;font-size:15px}
.rb2-pris strong{font-size:19px;font-weight:700;letter-spacing:-.02em}
.rb2 .routine li>span:not(.tile){color:var(--ink);font-size:13.5px;font-weight:500}
.rb2-pris s{color:var(--muted);font-size:13px}
/* Mobil: större kort än startsidans kompakta rad — bilden 120 px, texten bredvid,
   köpknappen i full bredd under (ägarfeedback 2026-10-12: "korten är lite för små"). */
@media (max-width:639px){
  .rb2.panel{padding:20px 12px}
  .rb2-mening,.rb2-dinrubrik,.rb2 .rt-total{padding-inline:6px}
  .rb2 .routine{gap:14px}
  .rb2 .routine li{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"bild etikett" "bild namn" "bild pris" "passar passar" "varfor varfor" "obs obs" "kop kop";column-gap:14px;padding:12px;border-radius:22px;align-items:start}
  .rb2 .routine li .tile{width:120px;grid-row:1/4;align-self:start}
  .rb2 .routine li span:not(.tile){font-size:15px;font-weight:500;color:var(--ink)}
  .rb2-pris{grid-area:pris;align-self:start}
  .rb2 .routine li .btn-xs{grid-area:kop;margin-top:12px;min-height:46px;font-size:15px}
  .rb2-passarrad{grid-area:passar}.rb2-passar{margin-top:12px}.rb2-passarrad:empty,.rb2-obsrad:empty,.rb2-varfor:empty{display:none}
  .rb2-varfor{grid-area:varfor;margin-top:6px}
  .rb2-obsrad{grid-area:obs}
  .rb2 .routine li.rb2-gap{display:block}
}
.rb2-guide,.rb2-faq{max-width:1200px;margin-top:80px}
.rb2-faq>*{max-width:720px}
/* Guiden under byggaren: ingress, sex stegkort, morgon/kväll, tumregel, vidare. */
.rb2-guide-topp{display:grid;gap:14px;margin-bottom:28px}
@media (min-width:900px){.rb2-guide-topp{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:end;column-gap:48px}}
.rb2-guide h2{font-size:clamp(40px,5vw,72px)!important;font-weight:700;letter-spacing:-.05em;line-height:.95}
.rb2-guide-ingress{font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.015em;line-height:1.45;max-width:46ch}
.rb2-steg{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));counter-reset:none}
.rb2-steg li{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--r-tile);padding:22px 22px 24px;display:grid;gap:8px;align-content:start;min-height:190px}
.rb2-steg li.is-valfri{background:transparent;border:1.5px dashed color-mix(in srgb,var(--ink) 22%,transparent)}
.rb2-steg-nr{position:absolute;right:14px;top:-6px;font-size:96px;font-weight:700;letter-spacing:-.06em;line-height:1;color:var(--c-mint);-webkit-text-stroke:1.5px color-mix(in srgb,var(--pick) 55%,transparent);pointer-events:none}
.rb2-steg li.is-valfri .rb2-steg-nr{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 20%,transparent)}
.rb2-steg-tag{justify-self:start;font-size:12px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);position:relative}
.rb2-steg li.is-valfri .rb2-steg-tag{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line)}
.rb2-steg h3{font-size:24px;font-weight:700;letter-spacing:-.035em;margin-top:6px;position:relative;font-family:inherit}
.rb2-steg p{font-size:15px;line-height:1.5;color:var(--muted);position:relative;max-width:36ch}
.rb2-dygnkort{display:grid;gap:12px;margin-top:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.rb2-dk{border-radius:var(--r-card);padding:28px;display:grid;gap:8px;align-content:start}
.rb2-dk i{font-size:30px}
.rb2-dk h3{font-size:clamp(24px,2.2vw,32px);font-weight:700;letter-spacing:-.04em;font-family:inherit}
.rb2-dk p{font-size:16px;line-height:1.5;max-width:44ch}
.rb2-dk-am{background:var(--c-peach)}
.rb2-dk-pm{background:var(--ink);color:var(--bg)}
.rb2-dk-pm i{color:var(--sel-fg)}
.rb2-dk-pm p{color:color-mix(in srgb,var(--bg) 82%,var(--ink))}
/* Vidare-bandet: samma mörka band som startsidans "Kan man blanda?". */
.rb2-band{margin:96px calc(-1 * var(--g)) 0;padding:72px var(--g) 84px;background:#121514;color:#f3f4f2}
.rb2-band-in{max-width:1200px;margin:0 auto;display:grid;gap:44px}
@media (min-width:900px){.rb2-band-in{grid-template-columns:minmax(0,1fr) 300px;align-items:center;column-gap:72px}.rb2-lapp{order:2}}
.rb2-band-text{display:grid;gap:22px}
.rb2-band-rad{font-size:clamp(24px,2.5vw,40px);font-weight:600;letter-spacing:-.035em;line-height:1.3;max-width:24em;text-wrap:pretty}
.rb2-band-ing{color:#f3f4f2}
.rb2-band-rad a{color:#f3f4f2;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--buy);text-underline-offset:.16em;border-radius:.16em;padding:0 .06em;transition:background-color .3s var(--ease),color .3s var(--ease)}
.rb2-band-ing a{color:#7d827f;text-decoration:none;display:inline-block;padding:.02em .12em;transition:color .3s var(--ease),background-color .3s var(--ease),transform .5s var(--ease)}
.rb2-band-ing a:hover,.rb2-band-ing a:focus-visible{background:#f3f4f2;color:#121514;transform:rotate(-2deg)}
.rb2-band-rad a:hover,.rb2-band-rad a:focus-visible{background:var(--buy);color:#121514;text-decoration-color:transparent}
.rb2-lapp{--card:var(--c-mint);--v:-4deg;color:var(--ink);margin:0;max-width:340px;justify-self:start;padding:26px}
.rb2-lapp .lapp-txt{font-size:21px}
.rb2-faq h2{font-size:clamp(28px,2.6vw,40px);font-weight:700;letter-spacing:-.04em;margin-bottom:14px}
.rb2-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.rb2-faq summary{font-weight:600;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.rb2-faq summary::-webkit-details-marker{display:none}
.rb2-faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.rb2-faq details[open] summary::after{transform:rotate(45deg)}
.rb2-faq details p{margin-top:10px;color:var(--muted);line-height:1.6}


/* ===== src/styles/artikel-2026.css ===== */
/* ARTIKELN I STARTSIDANS SPRÅK (omdesign oktober 2026) — förslagsyta.
   Ägarbeslut 2026-10-08: "glöm den gamla designen HELT, samma designspråk som
   startsidan". Det här är alltså ingen omlackering av magasinlayouten utan samma
   formvärld: ljus sten, pastellplattor, enorm tajt typografi, klistermärken,
   snedställda lappar, mint enbart för köp.

   TEXTEN, RUBRIKERNA OCH ALL SEO ÄR LÅSTA. Ingen mening, ingen H2 och ingen title
   ändras — bara ytan de står på.

   Bygger på startsida-2026.css (tokens, masthead, .btn/.puck, .tile, .sticker,
   .buybar) och sätter bara det som är artikelns eget. */

.art {
  background: var(--bg);
  color: var(--ink);
}
.art-wrap {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 640px) { .art-wrap { padding-inline: 32px; } }
@media (min-width: 1200px) { .art-wrap { padding-inline: 56px; } }

/* ---------- Hjälten: rubriken tar plats, förstavalet står bredvid ---------- */
.art-hero { display: grid; gap: 28px; padding-block: 24px 8px; align-items: center; }
@media (min-width: 1000px) {
  /* Samma viktning som startsidans hjälte (ägarbeslut 2026-10-08): KORTET får den
     större spalten, inte texten. Artikeln hade det omvänt, och kortet blev 120 px
     smalare än startsidans trots att det är samma kort. */
  .art-hero { grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.16fr); gap: 72px; padding-block: 48px 20px; }
}
.art-kat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(18, 30, 24, 0.05), 0 10px 18px -14px rgba(18, 40, 30, 0.55);
  transform: rotate(-1.4deg);
}
/* Rubriken i startsidans typografi: samma spärr, samma täta radavstånd och samma
   optiska upphängning (margin-left) så versalen står i kant med spalten. Taket är
   lägre än startsidans 150 px — "Sluta gissa." är två ord, artikelrubriken åtta. */
.art-h1 {
  margin: 20px 0 0;
  margin-left: -0.04em;
  font-size: clamp(36px, 5.1vw, 76px);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.92;
  text-wrap: balance;
}
/* Ingressen är sidans andra röst, inte en bildtext: startsidan har 37 px under sin
   rubrik, artikeln hade 21 px grå brödtext. Första satsen svart, resten dämpad. */
.art-ingress {
  margin: 22px 0 0;
  max-width: 28ch;
  font-size: clamp(19px, 2.3vw, 34px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.art-ingress-dampad { color: var(--muted); }
/* Ämnesordet i samma form som startsidans valda ord (.w[aria-pressed="true"]):
   svart yta, mint text, snett. Mint = köp, utmärkelse OCH valt läge — det här är
   valt läge, och artikelns ämne är sidans val. */
.art-amne {
  display: inline-block;
  padding: 0.02em 0.1em;
  margin: 0 -0.02em 0 -0.1em;
  border-radius: 0.16em;
  background: var(--ink);
  color: var(--sel-fg);
  transform: rotate(-2.5deg);
}
.art-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 24px;
  font-size: 13.5px;
  color: var(--muted);
}
.art-byline b { color: var(--ink); font-weight: 600; }
.art-byline .bprick { width: 5px; height: 5px; border-radius: 50%; background: var(--line); }

/* Hjältekortet ÄR startsidans .stage (ägarbeslut 2026-10-08) — markupen använder
   samma klasser, så stilen bor i startsida-2026.css och finns inte i två versioner.
   Enda tillägget här: stämpeln rymmer det längre ordet "Redaktionens". */
.art-hero .sticker.st-hero { width: 96px; height: 96px; font-size: 10px; padding: 0 10px; }
@media (min-width: 1000px) { .art-hero .sticker.st-hero { width: 126px; height: 126px; font-size: 13px; } }

/* ---------- Produktväggen ---------- */
.art-sek { margin-top: 64px; }
.art-sek-rubrik { margin: 0 0 20px; font-size: clamp(27px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; }
.art-prisnot { margin: 14px 2px 0; font-size: 12.5px; color: var(--muted); }

/* ---------- Brödtexten: band som växlar sida ----------
   Rytmen (ägarbeslut 2026-10-08, "apple-inspirerat"): rubrik och pauselement på ena
   sidan, prosan på den andra, nästa avsnitt spegelvänt — och emellan helbreda band
   (produktkorten, FAQ:n) som bryter av. Uppdelningen görs vid bygget, i
   src/lib/bandaBrodtext.ts; texten, rubrikerna och ordningen är oförändrade.
   En smal spalt mitt på sidan är borta: hela ytan används. */
.art-text { margin-top: 56px; }
.art-text :is(.bnd-h, .bnd-txt, .bnd-vis) > * { width: auto !important; margin-inline: 0 !important; }
.bnd { max-width: none; }
.bnd + .bnd { margin-top: clamp(52px, 7vw, 108px); }
.bnd-h > h2 { margin-top: 0 !important; }
.bnd-txt > :first-child { margin-top: 0 !important; }
.bnd-vis { display: grid; align-content: start; gap: 22px; margin-top: 28px; }

@media (min-width: 1000px) {
  .art-text { margin-top: 80px; }
  .bnd {
    display: grid;
    align-items: start;
    column-gap: clamp(40px, 5vw, 92px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "h txt" "vis txt";
  }
  .bnd[data-sida="b"] { grid-template-areas: "txt h" "txt vis"; }
  .bnd-h { grid-area: h; }
  .bnd-txt { grid-area: txt; max-width: 64ch; }
  .bnd-vis { grid-area: vis; margin-top: 34px; max-width: 700px; }
  /* Avsnitt UTAN bild, kort eller tabell delas inte (ägarbeslut 2026-10-08): det finns
     inget att visa i andra spalten, så uppdelningen ger bara en ensam rubrik i luften
     och en smal remsa text. Sidan bryts upp där det finns något att bryta upp den med. */
  .bnd--ren {
    display: block;
    max-width: 1100px;
  }
  .bnd--ren .bnd-txt { max-width: 68ch; }
  /* Intron: ingressen står bredvid hjältebilden i stället för ovanför den. */
  .bnd--intro {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    grid-template-areas: "txt vis";
    align-items: center;
  }
  .bnd--intro .bnd-vis { margin-top: 0; }
  /* Spalten söker ytterkanten: luften samlas i mittgången i stället för att bli en
     död remsa längst ut. Det är det som gör växlingen tydlig. */
  .bnd--par[data-sida="a"] .bnd-txt { justify-self: end; }
  .bnd--par[data-sida="b"] .bnd-vis { justify-self: end; }
  .bnd--intro .bnd-txt { justify-self: start; }
  .bnd--intro .bnd-vis { justify-self: end; }
  .bnd--full { grid-template-columns: minmax(0, 1fr); }
}

/* Banden stiger 36 px och tonar in när de kommer in i bild. Scrolldriven CSS: ingen
   JavaScript, och i webbläsare utan stöd står allt stilla och synligt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) {
    .bnd-txt,
    .bnd-vis,
    .bnd--full > * {
      animation: bnd-stig linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 48%;
    }
    .bnd-vis { animation-range: entry 0% entry 58%; }
  }
}
@keyframes bnd-stig {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}
.art-text :is(p, li) {
  font-size: 18px;
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink) 88%, var(--bg));
  text-wrap: pretty;
}
.art-text p { margin: 0 auto 1.15em; }
.art-text h2 {
  margin: 1.9em auto 0.55em;
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.03;
  text-wrap: balance;
}
.art-text h3 { margin: 1.6em auto 0.5em; font-size: clamp(21px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.035em; }
.art-text a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.art-text :is(ul, ol) { margin: 1.2em auto; padding-left: 1.2em; }
.art-text li + li { margin-top: 0.45em; }
.art-text .bnd--intro .bnd-txt > p:first-of-type { font-size: 20px; font-weight: 500; color: var(--ink); }
.art-text :is(figure, img) { border-radius: var(--r-tile); }


/* ---------- Widgetarna i brödtexten ----------
   Komponenternas scoped CSS är mer specifik än den här filen, därav !important.
   Varje blocktyp får sin egen pastell så texten andas mellan tunga partier. */
/* Widgetarna ligger i en egen wrapper i MDX-utdata, så en bredd satt på dem själva
   gav en annan mittlinje än brödtextens. De fyller wrappern i stället: en lugn kolumn
   med samma vänsterkant hela vägen ned. Bilden är det enda som får gå bredare. */
/* .dtab är utbruten ur listan 2026-10-10: tabellen ska få vara bredare än
   brödtextspalten på desktop (upp till jämförelsens bredd), och låsningen här
   höll den kvar på spaltens 648 px. Övriga ytor står kvar. */
.art-text :is(.savaldevi, .citat, .nyckelrad, details, .changelog, .pcard, .pk, .polaroid) { width: 100% !important; margin-inline: 0 !important; }
@media (max-width: 1023px) {
  .art-text .dtab { width: 100% !important; margin-inline: 0 !important; }
}


.art-text .savaldevi {
  background: var(--c-butter) !important;
  border: 0 !important;
  border-radius: var(--r-card) !important;
  padding: 26px !important;
}
.art-text .savaldevi__over { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: 0.12em; }

/* Citatet lyfts ur rutan och blir ett eget andetag i stor sättning. */
.art-text .citat {
  background: transparent !important;
  border: 0 !important;
  padding: 10px 0 !important;
  margin-block: 44px !important;
}
.art-text .citat p {
  font-style: normal !important;
  font-size: clamp(25px, 3.4vw, 40px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em;
  line-height: 1.07;
  text-align: left;
  text-wrap: balance;
  color: var(--ink) !important;
}



.art-text details {
  background: var(--surface);
  border: 0 !important;
  border-radius: 20px;
  margin-block: 10px !important;
  padding: 2px 20px;
}
.art-text summary { padding-block: 16px; font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em; cursor: pointer; }

.art-text .changelog { background: var(--surface); border: 0 !important; border-radius: var(--r-card); padding: 24px 26px; }
/* Loggens äldre rader ligger hopfällda inne i loggens egen yta, inte i ett eget FAQ-kort. */
.art-text .changelog details.changelog__fold { background: none; border-radius: 0; margin-block: 0 !important; padding: 0; }
.art-text .changelog .changelog__fold > summary { padding-block: 12px; font-size: 15px; letter-spacing: 0; }


/* Allt i artikeln sätts i Geist — widgetarnas egna snitt är mer specifika. */
.art,
.art :is(p, li, td, th, dt, dd, figcaption, caption, blockquote, strong, em, b, i, span, a, div, small, time, summary, details, h1, h2, h3, h4) {
  font-family: "Geist", "Geist Fallback", system-ui, sans-serif !important;
}

/* ---------- Marginalcitatet: samma grepp som på startsidan ---------- */
.art-margin { margin: 48px auto; width: min(100%, 680px); display: flex; flex-direction: column; gap: 10px; }
.art-margin-pil { width: 86px; height: 60px; color: color-mix(in srgb, var(--ink) 48%, var(--bg)); transform: scaleX(-1) rotate(-4deg); }
.art-margin blockquote { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -0.032em; line-height: 1.26; text-wrap: balance; }
.art-margin figcaption a { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; }
.art-margin figcaption a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Full-bleed pastellband ---------- */
.art-band { margin-top: 72px; padding-block: 56px; background: var(--band, var(--c-lilac)); }

/* ---------- Foten ---------- */
.art-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.art-chips a {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(18, 30, 24, 0.05), 0 10px 18px -14px rgba(18, 40, 30, 0.55);
  transition: transform 0.4s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.art-chips a:hover { transform: translateY(-2px); background: var(--ink); color: var(--sel-fg); }
.art-las { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .art-las { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.art-las a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 14px 14px 20px;
  border-radius: var(--r-card);
  background: var(--kort, var(--surface));
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.45s var(--ease), box-shadow 0.4s var(--ease);
}
.art-las li:nth-child(1) a { --kort: var(--c-rose); }
.art-las li:nth-child(2) a { --kort: var(--c-sky); }
.art-las li:nth-child(3) a { --kort: var(--c-butter); }
.art-las a:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.art-las .tile { border-radius: var(--r-tile); aspect-ratio: 4 / 3; }
.art-las .tile img { width: 100%; height: 100%; object-fit: cover; }
.art-las-kat { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--ink) 66%, var(--kort)); }
.art-las-titel { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.028em; line-height: 1.2; text-wrap: balance; }

/* Annonsmarkeringen syns, men stjäl inte. */
/* Annonsmarkeringen drogs ut i full bredd av komponentens egen CSS. */
.art-annons { margin: 16px auto 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.art-annons > * { max-width: 72ch; margin-inline: 0 !important; }

/* ---------- Rörelse ---------- */
@media (prefers-reduced-motion: no-preference) {
  .art .enter { opacity: 0; transform: translateY(16px); animation: artUpp 0.85s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 80ms); }
  @keyframes artUpp { to { opacity: 1; transform: none; } }
  .art .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .art .reveal.in { opacity: 1; transform: none; }
}

/* ---------- Bilden i brödtexten ---------- */
/* Polaroid-ramen hör till Guldnatt: vit passepartout, liten etikettrad och HD-sigill.
   I det nya språket är en bild en ren rundad bricka, som produktbrickorna. Ramen tas
   bort i stället för att målas om, och bildtexten blir en vanlig liten rad under. */
.art-text .polaroid {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  transform: none !important;
  margin: 36px auto !important;
  width: min(100%, 760px) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-text .polaroid__yta {
  border-radius: var(--r-tile) !important;
  box-shadow: var(--shadow);
  width: 100% !important;
  aspect-ratio: 16 / 10;
}
.art-text .polaroid__yta img { width: 100%; height: 100%; object-fit: cover; }
/* Etikettraden bar bildens eget sigill — den ersätts av en lapp i sidans språk. */
.art-text .polaroid__etikett {
  position: static !important;
  align-self: flex-start;
  padding: 6px 13px !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 0 rgba(18, 30, 24, 0.05), 0 10px 18px -14px rgba(18, 40, 30, 0.55);
  transform: rotate(-1.6deg);
}
.art-text .polaroid__kred { margin: 0 !important; font-size: 13px !important; color: var(--muted) !important; font-style: normal !important; }

/* Brödsmula, dek-rad och vägen tillbaka — navigation som fanns på den skarpa sidan
   och som föll bort i första utkastet. Fångat av ordjämförelsen mot /blogg/. */
.art-smula {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  box-shadow: 0 1px 0 rgba(18, 30, 24, 0.05), 0 10px 18px -14px rgba(18, 40, 30, 0.55);
  transform: rotate(-1.4deg);
}
/* Smulan bar kortets pastell i stallet for vitt: en farg i vanstra spalten som rimmar
   med hjaltekortet bredvid. Mint ar inte ledig har - den ar kop och utmarkelse. */
.art-hero .art-smula { background: var(--c-sky); }
.art-smula a:last-of-type { color: var(--ink); }
.art-smula a { color: var(--muted); text-decoration: none; }
.art-smula a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.art-sek-dek { margin: -10px 0 0; font-size: 15.5px; color: var(--muted); max-width: 46ch; }
.art-tillbaka { margin-top: 48px; font-size: 15px; font-weight: 600; }
.art-tillbaka a { color: var(--ink); text-decoration: none; }
.art-tillbaka a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* 2. GULDET BORT. Etiketterna i Nyckelrad och Så valde vi ärvde guldtokens från det
   gamla temat. Mint är reserverad för köp (ägarbeslut 2026-10-07), så de blir svarta
   — samma svarta lappspråk som förstavalsetiketten. */
.art-text :is(.nyckelrad__etikett, .savaldevi__over) {
  color: var(--ink) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.18em !important;
}
.art-text :is(.savaldevi__nr, .savaldevi__mer) { color: var(--ink) !important; }

/* 3. TABELLEN såg ut som förra designen. Nu i sidans språk: ingen svart balk, utan
   himmelsblå huvudrad med svart text, rundade hörn, varannan rad tonad och en tjock
   första kolumn — samma brickkänsla som korten. */
.art-text .dtab tbody td,

/* 4. "VANLIG TRÅKIG TEXT I EN GUL RUTA". Kriterierna blir vita brickor på den gula
   plattan, med numret som en egen rund markör — struktur i stället för en lista. */
.art-text .savaldevi { padding: 28px !important; }
.art-text .savaldevi__lista,
.art-text .savaldevi ol,
.art-text .savaldevi ul { display: grid; gap: 10px; margin: 18px 0 0 !important; padding: 0 !important; list-style: none !important; }
.art-text .savaldevi li {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: start;
  gap: 14px;
  margin: 0 !important;
  padding: 16px 18px !important;
  background: var(--surface);
  border: 0 !important;
  border-radius: 18px;
}
.art-text .savaldevi__nr {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 0 !important;
}
.art-text .savaldevi li > :not(.savaldevi__nr) { font-size: 15.5px; line-height: 1.5; }
.art-text .savaldevi__mer { font-weight: 700 !important; text-decoration: underline !important; text-underline-offset: 4px; }

/* 5. PRODUKTKORTEN I BRÖDTEXTEN var ihoptryckta: tre smala spalter med 13 px text.
   De får luft, större text och staplas tidigare i stället för att klämmas ihop. */
.art-text .pk-rad { --cols: 2 !important; gap: 14px !important; }
@media (max-width: 760px) { .art-text .pk-rad { --cols: 1 !important; } }
.art-text .pk { padding: 16px !important; }
.art-text .pk__text { gap: 8px !important; padding: 14px 4px 4px !important; }
.art-text .pk__namn { font-size: 17px !important; line-height: 1.2 !important; }
.art-text .pk__why { font-size: 15px !important; line-height: 1.5 !important; }
.art-text .pk__fot { gap: 10px !important; padding-top: 12px !important; }
.art-text .pk__bild { padding: 10px !important; }

/* Tabellrubriken låg innanför den rundade behållarens overflow:hidden och klipptes.
   Rundningen och skuggan flyttas till själva tabellen; rubriken står fritt ovanför. */

/* Sista guldresterna: polaroidens sigill, citatets källrad och hela ändringsloggen
   ärvde guldtokens. Mint är köpfärgen, så de blir svarta eller dämpade i stället. */
.art .polaroid__stamp { display: none !important; }
.art .citat span { color: var(--muted) !important; }
.art :is(.changelog__over, .changelog__date) { color: var(--muted) !important; }
.art .changelog__over { color: var(--ink) !important; font-weight: 700 !important; letter-spacing: 0.16em; }

/* ============ Mint som utmärkelsefärg (ägarbeslut 2026-10-08) ============ */
/* Regeln vidgas: mint är inte längre reserverad enbart för köpknappen, den bär
   också våra egna utmärkelser. Redaktionens val är den starkaste markören vi har
   och ska synas som det.

   Hierarkin som håller köpknappen tydlig trots att mint används på fler ytor:
   KÖP = fylld mint knapp med svart text OCH svart pilcirkel (den enda med puck).
   UTMÄRKELSE = mint yta med svart text, utan puck, i stjärn- eller lappform.
   VALT LÄGE = svart yta med mint text (oförändrat).
   Formen, inte färgen, skiljer dem åt — och bara köpet är en knapp. */
.art-pick .sticker {
  background: var(--buy) !important;
  color: var(--buy-ink) !important;
}
.art-text :is(.pk__etikett--guld, .pcard__flag) {
  background: var(--buy) !important;
  color: var(--buy-ink) !important;
}
/* Köpradens etikett följer med. */
.bb-for { color: var(--buy) !important; font-weight: 700; }

/* ============ Mint på informationsrutorna (ägarbeslut 2026-10-08) ============ */
/* Därmed får sidan en läsbar logik: PASTELL = produkterna (rosa, syren, smörgul,
   persika), MINT = vi — våra bedömningar, våra råd och köpet.

   Stora ytor tar en LJUS mint, små ytor (knapp, badge) den fulla. Annars skulle en
   hel ruta i köpknappens mint tävla med knappen och göra färgen tam. */
.art {
  --mint-ljus: color-mix(in srgb, var(--buy) 34%, #ffffff);
  --mint-kant: color-mix(in srgb, var(--buy) 62%, var(--ink) 8%);
}
.art-text .savaldevi {
  background: var(--mint-ljus) !important;
}
.art-text .nyckelrad {
  background: var(--mint-ljus) !important;
  border-left: 4px solid var(--mint-kant) !important;
  border-radius: 0 var(--r-card) var(--r-card) 0 !important;
}
/* Faktablock och citatrutor som kommer ur widgetarna hör till samma familj. */
.art-text :is(.faktaruta, .ruta, .claimcheck, .infobox) {
  background: var(--mint-ljus) !important;
  border: 0 !important;
  border-radius: var(--r-card) !important;
}
/* Resultat-tidslinjen (ResultTimeline/.rtl) bar fortfarande Guldnatt-guld och
   Fraunces-serif. Samma familj som .faktaruta: ljus mint-platta, mint-kant i
   stället för guld, ingen egen rubriktypografi (Geist-svepet ovan sköter det). */
.art-text .rtl {
  background: var(--mint-ljus) !important;
  border-radius: var(--r-card) !important;
  padding: 22px 26px !important;
}
.art-text .rtl__list {
  border-left: 2px solid var(--mint-kant) !important;
}
.art-text .rtl__item::before {
  background: var(--surface) !important;
  border-color: var(--mint-kant) !important;
}
.art-text .rtl__item:first-child::before {
  background: var(--pick) !important;
  border-color: var(--pick) !important;
}
.art-text .rtl__cap,
.art-text .rtl__what {
  color: var(--ink) !important;
}
.art-text .rtl__when {
  color: var(--pick) !important;
}
.art-text .rtl__foot {
  color: var(--muted) !important;
}
/* Tabellens huvudrad flyttar från himmelsblå till samma mintfamilj, så
   informationsytorna håller ihop. */


/* ---------- Nyckelraden som citat (ägarbeslut 2026-10-08) ---------- */
/* "Vi ska inte skriva Ta med dig, gör sånt som citat i stället, men snyggt som vi
   hade i gamla designen." Etiketten döljs och raden får citatets form: ingen ruta,
   stor tajt sättning och ett mint citattecken som enda dekor. Texten är orörd.
   Skillnaden mot PullQuote (.citat) är citattecknet — annars vore de två identiska
   grepp i samma artikel. */
.art-text .nyckelrad {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  padding: 10px 0 10px 76px !important;
  margin-block: 48px !important;
}
.art-text .nyckelrad::before {
  content: "”";
  position: absolute;
  left: 0;
  top: -0.18em;
  font-size: 92px;
  line-height: 1;
  font-weight: 700;
  color: var(--buy);
}
.art-text .nyckelrad__etikett { display: none !important; }
.art-text .nyckelrad :is(p, div, span) {
  font-size: clamp(23px, 2.8vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em;
  line-height: 1.14;
  color: var(--ink) !important;
  text-wrap: balance;
}
@media (max-width: 639px) {
  .art-text .nyckelrad { padding-left: 52px !important; margin-block: 36px !important; }
  .art-text .nyckelrad::before { font-size: 64px; }
}

/* ---------- Hjältekortet på mobil ---------- */
/* Startsidans kort lägger bilden i en 108 px-spalt bredvid texten. Det fungerar där,
   för hjälten ska rymmas på första skärmen. I artikeln blev följden att stämpeln
   täckte nästan hela produktbilden och texten klämdes i en 218 px-spalt. Här får
   kortet därför en egen mobilform: bilden överst i full bredd, texten under, och en
   mindre stämpel i hörnet. Desktop är oförändrat — där ÄR kortet startsidans. */
@media (max-width: 639px) {
  .art-hero .stage {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "info" "buy" "more";
    gap: 16px;
    padding: 14px;
  }
  .art-hero .stage-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
    transform: rotate(-1deg);
  }
  .art-hero .sticker.st-hero {
    width: 74px;
    height: 74px;
    font-size: 8.5px;
    padding: 0 8px;
    top: -12px;
    left: -6px;
  }
  .art-hero .stage-info { align-self: start; padding-top: 0; }
  .art-hero .stage-name { font-size: 20px; line-height: 1.16; margin-top: 8px; }
  .art-hero .stage-spec { font-size: 14.5px; margin-top: 8px; }
  .art-hero .stage-fit { margin-top: 12px; font-size: 15px; }
  .art-hero .stage-buy { flex-direction: column; align-items: stretch; gap: 10px; }
  .art-hero .stage-buy .price { flex-direction: row; align-items: baseline; gap: 8px; }
  .art-hero .stage-more { margin-top: 2px; }
}

/* Köpraden på mobil: produktnamnet klipptes till 103 px eftersom knappen tog 155.
   Sajtens egen regel säger "Köp →" på smala ytor och "Köp hos [butik] →" där det
   finns plats (CLAUDE.md "Design och konvertering") — den följs här. */
.bt-kort { display: none; }
@media (max-width: 639px) {
  .buybar .bt-lang { display: none; }
  .buybar .bt-kort { display: inline; }
  .buybar .bb-txt { min-width: 0; flex: 1; }
  .buybar .bb-name { font-size: 14px; line-height: 1.25; }
  .buybar .btn { flex: none; }
}
.art-text :is(.pcard, .pk):hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* Pastellerna varvas som i väggen. */
.art-text .picks__hero .pcard { --kortton: var(--c-rose); }
.art-text .pk-rad > *:nth-child(1) .pk,
.art-text .pk-rad > *:nth-child(1) { --kortton: var(--c-lilac); }
.art-text .pk-rad > *:nth-child(2) .pk,
.art-text .pk-rad > *:nth-child(2) { --kortton: var(--c-butter); }
.art-text .pk-rad > *:nth-child(3) .pk,
.art-text .pk-rad > *:nth-child(3) { --kortton: var(--c-peach); }
.art-text .pk-rad > *:nth-child(4) .pk,
.art-text .pk-rad > *:nth-child(4) { --kortton: var(--c-sky); }

/* Bilden: vit bricka med samma radie som väggens, aldrig en naken bild på pastellen. */
.art-text :is(.pcard__media, .pk__bild) {
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: var(--r-tile) !important;
  padding: 14px !important;
  display: grid;
  place-items: center;
}
.art-text :is(.pcard__img, .pk__bild img) { mix-blend-mode: normal; }

/* Etiketten: samma lapp som i väggen. */
.art-text :is(.pcard__flag, .pk__etikett) {
  position: static !important;
  align-self: flex-start;
  display: inline-block;
  width: fit-content;
  padding: 5px 12px !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  border: 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 0 rgba(18, 30, 24, 0.05), 0 10px 18px -14px rgba(18, 40, 30, 0.55);
  transform: rotate(-1.8deg);
  transition: transform 0.45s var(--ease);
}
.art-text :is(.pcard, .pk):hover :is(.pcard__flag, .pk__etikett) { transform: rotate(1.4deg); }
/* Redaktionens val i mint, som överallt annars. */
.art-text .pcard__flag:not(.pcard__flag--neutral),
.art-text .pk__etikett--guld {
  background: var(--buy) !important;
  color: var(--buy-ink) !important;
}

/* Text och fot med väggens mått. */
.art-text :is(.pcard__name, .pk__namn) {
  font-size: 17.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.028em;
  line-height: 1.2 !important;
}
.art-text :is(.pcard__body, .pk__why) { font-size: 15px !important; line-height: 1.5 !important; }
.art-text :is(.pcard__price, .pk__pris) { font-size: 20px !important; font-weight: 700 !important; letter-spacing: -0.03em; }
.art-text :is(.kop, .pk__kop, .btn-kop) {
  background: var(--buy) !important;
  background-image: none !important;
  color: var(--buy-ink) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  font-weight: 700 !important;
}
/* "Därför är den redaktionens val"-rutan: vit bricka i stället för en ram i kortet. */
.art-text .pcard__varfor {
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
}

/* ============ Tabellen med karaktär (ägarbeslut 2026-10-08) ============ */
/* "Ingen rolig tabell detta." Den gråa balken byts mot radband i pastell: varje rad
   är ett eget färgat fält med tjock första kolumn, rubrikraden står som små versaler
   utan egen platta. Formen följer korten — samma rundning, samma brickkänsla. */
/* Rundade hörn på hela raden, inte på enskilda celler. */

/* Bilden måste hållas INNE i brickan. Komponenterna positionerar sina bilder själva,
   och när brickan blev en grid svämmade bilden ut och lade sig över namn och pris.
   Brickans HÖJD kommer från komponentens eget rutnät, så procentmått på bilden biter
   inte — den förankras i brickan i stället och centreras med margin:auto. Produkten
   kapas aldrig (CLAUDE.md regel 5), object-fit:contain skalar in hela förpackningen. */
.art-text :is(.pcard__media, .pk__bild) {
  position: relative !important;
  display: block !important;
  min-height: 190px;
  overflow: hidden;
}
.art-text :is(.pcard__media, .pk__bild) img {
  position: absolute !important;
  inset: 16px;
  margin: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100% - 32px) !important;
  max-height: calc(100% - 32px) !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Förstavalskortets bildbricka krympte till 28 px: den ligger i en flexrad och
   förlorade sin bredd när display sattes om. Den får en egen basbredd, som väggens
   breda kort. */
.art-text .picks__hero .pcard__media {
  flex: 0 0 min(36%, 300px);
  min-height: 240px;
}
@media (max-width: 639px) {
  .art-text .picks__hero .pcard__inner { flex-direction: column; }
  .art-text .picks__hero .pcard__media { flex: none; width: 100%; min-height: 200px; }
}


/* Tabellens form bor i artikel-ta-2026.css under "Tabellerna i brödtexten" —
   EN tabellform på hela sajten (ägarbeslut 2026-10-10). Här låg ett tredje skinn
   ("radkort, inte en låda", 2026-10-08) som gjorde varje rad till ett pastellkort
   med versal rubrikrad. Det stred mot jämförelsens form och mot skinnet i
   ta-filen, och eftersom tre lager konkurrerade vann olika regler på olika sidor:
   pimple-patch behöll radkorten medan karbamid fick den nya tabellen. Struket.
   Lägg aldrig tabellregler här igen. */

/* Motiveringen står öppen (ägarbeslut 2026-10-08): rubriken är en rubrik, inte en
   knapp, och pilen som bad om ett klick är borta. */
.art-text .pcard__varfor summary {
  list-style: none;
  cursor: default;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none !important;
  margin-bottom: 8px;
}
.art-text .pcard__varfor summary::-webkit-details-marker { display: none; }
.art-text .pcard__varfor summary i,
.art-text .pcard__varfor summary svg { display: none; }
.art-text .pcard__varfor :is(p, div) { font-size: 15.5px; line-height: 1.55; margin: 0; }

/* Den vita plattan bakom raderna satt på .dtab__card — tabellstandardens egen
   kortyta, inte på .dtab som jag först trodde. Den tas bort: i radkortsformen är
   det RADERNA som är korten, och en låda runt dem gör tabellen till en låda igen. */
.art-text .dtab__card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* ---------- Produktväggen = startsidans hylla ----------
   Artikeln hade ett eget kortspråk: fyra likadana kort där det breda förstavalet
   fick en köpknapp som sträckte sig över hela kortet. Väggen använder nu .shelf
   med .feat + .m1/.m2/.m3 rakt av (startsida-2026.css), så korten finns i EN
   version. Här står bara det artikeln lägger till. */
/* Produktnamnen är H3 på den skarpa sidan och måste förbli det — rubriken bär
   därför kortets typografi i stället för rubrikens egna marginaler. */
.shelf :is(.feat-name, .pc-name) { margin: 0; }
/* Förstavalets etikett är en UTMÄRKELSE: mint yta, svart text, ingen puck.
   Köpet behåller pucken, så de två går inte att blanda ihop. */
.fmt-pick { background: var(--buy); color: var(--buy-ink); }

/* ---------- "Också toppval": hjältekortets form, inte ett tredje galleri ----------
   Samma fyra produkter står tre gånger på sidan, så blocket får varken se ut som
   hyllan längst upp eller som en tunn lista. Det tar hjältekortets form (.stage):
   stor vit bricka till vänster, etikett, namn och motivering till höger, pris och
   köp under. Avsnittet tål mer information än hyllan, och korten står ett per rad
   så de får ytan (ägarbeslut 2026-10-08).
   (--kortton sattes tidigare men lästes aldrig av någon regel, så korten var vita.) */
.art-text .pk-rad {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  overflow: visible !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}
@media (min-width: 1000px) { .art-text .pk-rad { grid-template-columns: 1fr 1fr !important; } }
.art-text .pk-rad > .pk { flex: none !important; }
.art-text .pk {
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-areas: "bild" "text" "fot";
  gap: 14px;
  padding: 14px !important;
  background: var(--kortton, var(--c-lilac)) !important;
  --muted: color-mix(in srgb, var(--ink) 70%, var(--kortton, var(--c-lilac)));
  border: 0 !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--shadow) !important;
  overflow: visible !important;
}
.art-text .pk:hover { transform: none; box-shadow: var(--shadow); }
/* Brickan: samma vita yta och lätta lutning som hjältekortets. */
.art-text .pk .pk__bild {
  grid-area: bild;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  padding: 16px !important;
  border: 0 !important;
  border-radius: var(--r-tile) !important;
  transform: rotate(-1.6deg);
  box-shadow: 0 22px 40px -22px rgba(30, 30, 50, 0.45);
}
.art-text .pk .pk__bild img { inset: 10% !important; max-width: 80% !important; max-height: 80% !important; }
.art-text .pk .pk__text { grid-area: text; display: grid; gap: 8px !important; padding: 0 4px !important; align-content: start; }
.art-text .pk .pk__namn { font-size: 22px !important; letter-spacing: -0.03em; line-height: 1.15 !important; margin: 0 !important; }
/* Motiveringen bär hjältekortets informationsruta i stället för att vara lös text. */
.art-text .pk .pk__why {
  margin: 0 !important;
  padding: 11px 14px !important;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}
.art-text .pk .pk__fot {
  grid-area: fot;
  display: flex !important;
  align-items: center;
  gap: 16px;
  padding: 0 4px !important;
  border: 0 !important;
}
.art-text .pk .pk__pris { margin: 0 !important; display: grid; line-height: 1.2; }
.art-text .pk .pk__kop { flex: 1; width: auto !important; }
@media (min-width: 640px) {
  .art-text .pk {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "bild text" "bild fot";
    gap: 16px 24px;
    padding: 18px !important;
  }
  .art-text .pk .pk__bild { aspect-ratio: 1 / 1; height: auto !important; min-height: 0 !important; align-self: center; }
  .art-text .pk .pk__text { align-content: center; }
  .art-text .pk .pk__namn { font-size: 25px !important; }
}

/* Blocket ligger i ett helbrett band. Utan tak blir korten 1570 px breda, och då blir
   brickan en liggande remsa med en liten produkt mitt i — formen stämmer inte med
   hjältekortet, som är 721 px med en nästan kvadratisk bricka. Taket håller korten i
   den storleken. */
/* Korten står två och två (ägarbeslut 2026-10-08), så bandets hela bredd används och
   varje kort landar på ~780 px — hjältekortets storlek. Tidigare stod de ett per rad och
   behövde ett tak på 820 px för att inte bli 1570 px breda remsor. Domen om förstavalet
   står ensam och behåller taket. */
.art-text .bnd--full .picks__hero { max-width: 820px; }

/* Domen om förstavalet bär pastellen den fick, i stället för att stå vit. */
.art-text .picks__hero .pcard { background: var(--kortton, var(--c-rose)) !important; }

/* Motiveringen är inte utfällbar längre (ägarbeslut 2026-10-08): <details> är borta och
   summaryns ord står som en vanlig rad över stycket. Ingen text har försvunnit. */
.art-text .pcard__varfor--oppen {
  margin-top: 14px;
  padding: 14px 16px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}
.art-text .pcard__varfor-rubrik {
  margin: 0 0 6px !important;
  font-size: 14.5px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.art-text .pcard__varfor--oppen p:not(.pcard__varfor-rubrik) {
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.55 !important;
}

/* Hjältekortet tappade två rader under 640 px: alternativet ("Diskret, under smink?
   Ta COSRX Master Patch Clear Fit") och länken ned till motiveringen. Startsidan
   gömmer dem med !important för att hålla kortet kompakt i väljaren, där man bläddrar
   mellan åtta behov. I artikeln är kortet sidans hjälte och båda raderna är riktig
   routing — de ska finnas på mobilen också (ägarbeslut 2026-10-08).
   Startsidans eget kort rörs inte; reglerna är låsta till .art-hero. */
@media (max-width: 639px) {
  .art-hero .stage-alt { display: flex !important; max-width: none; }
  .art-hero .stage-guide {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 4px;
  }
}

/* ---------- Mobil: korten i en karusell, väggen dold ----------
   Ordningen var fel på mobil: ett kort högst upp, sedan samma fyra produkter igen i
   väggen "Våra fyra val", sedan igen under "Så valde vi". Nu ligger alla fyra i en
   karusell högst upp — var och en i hjältekortets form — och väggen döljs, eftersom
   den visar exakt samma produkter. Listan under "Så valde vi" står kvar; den har ett
   annat jobb och bär motiveringarna (ägarbeslut 2026-10-08).

   OBS SEO: väggen döljs med display:none, inte tas bort. De fyra H3-produktnamnen
   finns kvar i HTML:en men är osynliga på mobila bredder, och sajten indexeras
   mobile-first. Avvägningen är Nellmas. */
/* Hjältekarusellen och produktväggen finns inte längre i mallen (2026-10-08):
   artikeln bygger på startsidans hylla och på produktband. Reglerna som gömde
   #toppval under 1000 px är borttagna med dem — de släckte den nya mallens toppval. */
/* Skrivbordet är oförändrat: förstavalet bredvid rubriken, väggen nedanför. */
@media (min-width: 1000px) {
  .art-hero .stage + .stage { display: none; }
}

/* "Bäst för"-raden på hjältekortet: etikett och värde, inte löptext. Värdena i
   bestFor är kolumnvärden — CompareTable visar dem under rubriken "Bäst för" — och
   alla går inte att läsa som en fortsättning på "för": "Bäst för diskret, under
   smink" är inte svenska. Rubriken står som en liten versalrad över värdet, precis
   som kolumnrubrikerna i artikelns tabell, och värdet behåller sin versalisering. */
.art-hero .stage-fit .fit-txt { display: grid; gap: 3px; }
.art-hero .stage-fit .fit-et {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ===== src/styles/artikel-ta-2026.css ===== */
/* ARTIKELMALLEN I TEKNIKATLETENS STRUKTUR, I HOTDROPS FÄRGER (förslagsyta 2026-10-08).
   Ägarbeslut: "samma artikelmall som Teknikatleten har, fast med Hotdrops färger —
   en mall som oftast är likadan är det bästa att göra här med."

   STRUKTUREN är Teknikatletens showcase-artikel, avsnitt för avsnitt:
     1. mörk ingress (annonspill, brödsmulor, datum, H1, ingress, två knappar, byline, bild till höger)
     2. översiktsraden (produktbilder som cirklar + "N produkter jämförda") med annonsmarkering
        och utfällbara rutor: snabbsvarsfrågan öppen, nästa fråga stängd
     3. pallplatsen — tre vita kort sida vid sida, nr 1 med mintkant
     4. "Vad behöver du?" — rutor som filtrerar fram vilka produkter som passar
     5. innehållskortet — hoppa till, hela innehållsförteckningen, så har vi bedömt
     6. produktbanden kant till kant: vitt, MÖRKT, vitt, bilden växlar sida
     7. resten som breda vita kort
     8. "Jämför sida vid sida" — produkterna som kolumner
     9. brödtexten i en spalt på vitt, 10. läs även + innehållsförteckning i marginalen

   FÄRGERNA, TYPSNITTET OCH KORTEN är Hotdrops: Geist, ljus sten (--bg), vit yta,
   pastellplattor, och MINT bara för köp och för "redaktionens val" (ägarbeslut
   2026-10-07). Teknikatletens blå köpknapp och guldkant finns inte här.
   Bygger på startsida-2026.css (tokens, .btn/.btn-buy/.puck, .tile, .buybar, masthead)
   och artikel-2026.css (brödtextens typografi, widgetarnas mint, Geist-svepet).

   TEXTEN, RUBRIKERNA OCH ALL SEO ÄR LÅSTA: varje mening kommer ur artikelns egen
   frontmatter eller renderas genom samma <Content> som den skarpa sidan. */

.atb {
  /* Mjuka hörn överallt (ägarbeslut 2026-10-08): sidan ska vara lekfull, inte
     rakbladsskarp. Inget band går kant i kant och ingen yta möter en annan i en
     rak linje — ytorna är kort som ligger på den ljusa stenen. */
  --r-stor: clamp(28px, 3vw, 44px);
  --night: #121514;
  --night-ink: #f4f6f2;
  --night-2: #c9d0cb;
  --night-muted: #99a29c;
  --night-line: rgba(255, 255, 255, 0.14);
}
/* Samma bredd som startsidan (ägarbeslut 2026-10-08): hela sidan används, korten blir
   stora. Brödtexten är det enda som håller sig smal, för radlängdens skull. */
.atb-wrap {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 640px) {
  .atb-wrap { padding-inline: 32px; }
}
@media (min-width: 1200px) {
  .atb-wrap { padding-inline: 56px; }
}
.atb-h2 {
  margin: 0 0 26px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}
/* Länkar är SVARTA. Mint är köpets färg, och inget annat på sidan är grönt —
   den mörkgröna tonen (--pick) bär bara statusprickan, som i mastheaden. */
.atb-mer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.atb-mer::after { content: "›"; font-size: 1.15em; transition: transform 0.2s var(--ease); }
.atb-mer:hover { text-decoration: underline; text-underline-offset: 3px; }
.atb-mer:hover::after { transform: translateX(2px); }
.on-night .atb-mer { color: var(--buy); }

/* Etikettpillret: MINT, alla etiketter — inte bara "Redaktionens val". */
.atb-lbl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--buy);
  color: var(--buy-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
}
.atb-prick {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- 1. Ingressen ----------
   Teknikatletens ingress är svart. Här är den LJUS STEN med svart rubrik, som
   startsidans hjälte (ägarbeslut 2026-10-08) — formen är Teknikatletens: texten
   till vänster, bilden till höger bakom en sned kant. */
.atb-hero {
  /* Kolumn på mobil, så att bilden kan ställas först (order fungerar inte på en
     vanlig block-layout). Två spalter från 900 px.

     HELA ingressen bär produktens pastell (ägarbeslut 2026-10-08), inte bara
     bildkortet: bilden, rubriken och bylinen hänger ihop som ett block, och
     papperet börjar först vid annonsraden. */
  display: flex;
  flex-direction: column;
  background: var(--c, var(--bg));
  --muted: color-mix(in srgb, var(--ink) 68%, var(--c, var(--bg)));
  border-radius: 0 0 var(--r-stor) var(--r-stor);
  color: var(--ink);
}
/* Mobil: bilden FÖRST och hela skärmens bredd, som i Teknikatletens artikel —
   produkten möter läsaren innan rubriken, och pastellfältet går ut i kanterna med
   mjukt rundad underkant. På bred skärm står bilden till höger om texten. */
.atb-hero__media { order: -1; }
.atb-hero__text {
  padding: 20px 16px 32px;
}
.atb-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13.5px;
  color: var(--muted);
}
.atb-hero__ad {
  padding: 2px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.atb-hero__crumbs { display: flex; gap: 8px; }
.atb-hero__crumbs a { color: var(--muted); text-decoration: none; }
.atb-hero__crumbs a:hover { color: var(--ink); }
/* Datumraden bor i bylinen (2026-10-10), inte ovanför rubriken: inline, så den
   ligger på samma rad som "Uppdaterad" och ärver bylinens storlek. */
.atb-hero__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Mint, inte den mörka picken (ägarbeslut 2026-10-10). */
.atb-hero__live {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--buy);
}
.atb-hero__live::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--buy);
  animation: atb-puls 2.4s ease-out infinite;
}
@keyframes atb-puls {
  0% { transform: scale(1); opacity: 0.6; }
  80%, 100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .atb-hero__live::after { animation: none; }
}
.atb-hero__h1 {
  margin: 16px 0 18px;
  max-width: 19ch;
  font-size: clamp(38px, 5.2vw, 76px);
  font-weight: 700;
  letter-spacing: -0.05em;
  /* Lite luft mellan raderna, annars nuddar plattan bakom ämnesordet raden under. */
  line-height: 1.08;
  text-wrap: balance;
}
.atb-hero__lede {
  max-width: 48ch;
  margin: 0;
  font-size: clamp(16.5px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--muted);
}
.atb-hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 26px;
}
.atb-hero__cta .atb-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease);
}
.atb-hero__cta .atb-pill:hover { color: var(--sel-fg); }
.atb-hero__by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.atb-hero__by b { color: var(--ink); font-weight: 600; }
/* Hjältekortet: samma grepp som startsidans — ett rundat pastellkort som ligger på
   stenen, med produkten på en vit platta och stjärnan i hörnet. Ingen skarp kant
   mot texten, ingen yta kant i kant. Produktbilden är oförändrad (regel 5). */
.atb-hero__media {
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
.atb-hero__kort {
  position: relative;
  width: 100%;
  padding: 16px 16px 4px;
  background: transparent;
}
/* Mobil: bilden ska vara en remsa högst upp, som Teknikatletens — inte en kvadrat
   som äter hela skärmen innan rubriken syns. */
.atb-hero__tile { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .atb-hero__kort { width: min(100%, 680px); padding: 0; }
  .atb-hero__tile { aspect-ratio: 4 / 3; }
}
.atb-hero__tile {
  width: 100%;
  border-radius: clamp(20px, 2.4vw, 30px);
  transform: rotate(-1.6deg);
}
/* Stjärnan (startsidans .sticker.st-hero) sitter i kortets hörn. Den klipper aldrig:
   på mobil flyttas den innanför kanten, eftersom karusellen beskär det som sticker ut. */
/* Två klasser, eftersom startsidans egen .sticker.st-hero annars vinner på
   specificitet och drar stjärnan utanför kortet — på mobil, där kortet går ut i
   skärmkanten, klipptes den då av. Där ligger den innanför kanten i stället. */
.sticker.st-hero.atb-stjarna { top: 12px; left: 12px; }
@media (min-width: 900px) {
  /* Bara kortformen får hänga utanför. Bandet går kant till kant, så dess vänstra
     kant ÄR skärmkanten — där klipptes stjärnan på mitten på bred skärm, av samma
     skäl som på mobil. Den ligger innanför i bandet, i alla bredder. */
  .atb-band--card .sticker.st-hero.atb-stjarna { top: -18px; left: -14px; }
  .atb-podium .sticker.st-hero.atb-stjarna,
  .atb-hero__kort .sticker.st-hero.atb-stjarna { top: -18px; left: -14px; }
}
.atb-podium__card, .atb-hero__kort, .atb-band__grid { position: relative; }

/* Ämnesordet i rubriken får startsidans valda läge: svart platta, mint text, snett. */
/* Plattan bakom ämnesordet ska ha samma tyngd som på startsidan — i artikeln är
   rubriken mindre, så samma em-värden gav en tajtare platta. */
.atb-amne {
  display: inline-block;
  padding: 0.1em 0.16em 0.12em;
  margin: 0 -0.06em 0 -0.16em;
  border-radius: 0.2em;
  background: var(--ink);
  color: var(--sel-fg);
  transform: rotate(-2.2deg);
}
@media (min-width: 900px) {
  .atb-hero__media { order: 0; }
  .atb-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
  }
  .atb-hero__text {
    align-self: center;
    padding: clamp(28px, 3.6vw, 56px) clamp(24px, 4vw, 56px) clamp(28px, 3.6vw, 56px)
      max(32px, calc((100vw - 1680px) / 2 + 56px));
  }
  .atb-hero__media { padding: clamp(32px, 4vw, 64px) max(32px, calc((100vw - 1680px) / 2 + 56px)) clamp(32px, 4vw, 64px) 0; }
}

/* ---------- 2. Översiktsraden ---------- */
/* Upptakten ska vara smal, som Teknikatletens: en tunn annonsrad, produktcirklarna
   och frågerutan — inte en egen skärm. */
.atb-ov {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-top: 18px;
}
.atb-ov > .atb-ov__disc {
  order: -1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
}
/* Annonsmarkeringen bär ETT streck, till vänster, som Teknikatletens — komponentens
   egna linjer över och under blev två streck tvärs över sidan. */
.atb-ov__disc aside {
  border: 0 !important;
  border-left: 2px solid var(--line) !important;
  padding: 2px 0 2px 16px !important;
  color: var(--muted) !important;
}
.atb-ov__trust {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--muted);
}
.atb-ov__trust p { margin: 0; }
.atb-ov__trust b { color: var(--ink); font-weight: 600; }
.atb-ov__thumbs { display: flex; flex: none; }
.atb-ov__thumbs img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px var(--tile-line);
  margin-left: -9px;
}
.atb-ov__thumbs img:first-child { margin-left: 0; }
/* Frågorna: två kort, inte en vit rektangel med en linje i (Nellma 2026-10-08).
   Snabbsvaret bär mint — sidans färg för vår egen bedömning — och en överrad som
   säger vad det är; följdfrågan står på vit yta bredvid. */
.atb-fragor {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}
.atb-fraga {
  padding: 22px 24px 24px;
  border-radius: var(--r-stor);
  background: var(--surface);
}
/* Här satt en överrad "Snabbsvar". Den togs bort 2026-10-09: artikeln har redan ett
   snabbsvar i brödtexten, och två på samma sida är en dubblett — dessutom är ordet
   som etikett ett AI-tell. */
/* Båda rutorna är vita (ägarbeslut 2026-10-09). Den första var mint, men mint är
   köpets och utmärkelsernas färg — på en faktaruta sa den ingenting. Första frågan
   skiljs ut med grad, inte med färg. */
/* Mobil: BÅDA frågorna står i upptakten (ägarbeslut 2026-10-09). Här göms den andra
   under 900 px, och då försvann "Funkar pimple patches verkligen?" helt för den som
   läser i telefonen — där de flesta läser. */
@media (max-width: 899px) {
  .atb-fraga { padding: 20px 20px 22px; }
}

.atb-fraga__q {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.atb-fraga--forst .atb-fraga__q { font-size: 19px; font-weight: 700; line-height: 1.3; }
.atb-fraga__a {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  color: color-mix(in srgb, var(--ink) 80%, var(--surface));
}
/* Bred skärm: frågorna står bredvid varandra med en tunn linje emellan, så rutan blir
   en upptakt i stället för en halv skärm. */
@media (min-width: 900px) {
  .atb-fragor { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; }
  .atb-fraga { padding: 26px 28px 28px; }
}
.atb-fold > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 22px 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.atb-fold > summary::-webkit-details-marker { display: none; }
.atb-fold > summary::after { content: " ▾"; font-size: 0.75em; color: var(--muted); }
.atb-fold[open] > summary::after { content: " ▴"; }
.atb-fold--oppen > summary {
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  font-weight: 700;
}
.atb-fold__body {
  max-width: 78ch;
  padding: 0 22px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 82%, var(--bg));
}
.atb-fold__body p { margin: 0; }

/* ---------- 3. Pallplatsen ---------- */
.atb-podium { padding-top: clamp(40px, 6vw, 88px); }
.atb-podium__row {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;
  gap: 0 14px;
}
/* Varje kort bär sin egen pastell (--card), som produktväggen på startsidan, och
   dämpad text räknas om mot kortets färg precis som .tint gör där. */
.atb-podium__card {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 16px 16px 22px;
  border-radius: var(--r-stor);
  background: var(--card, var(--surface));
  --muted: color-mix(in srgb, var(--ink) 70%, var(--card, var(--surface)));
}
.atb-podium__card.is-first { box-shadow: inset 0 0 0 2px var(--buy); }

.atb-podium__media { display: block; border-radius: clamp(18px, 2vw, 26px); }
.atb-podium__text { padding: 18px 4px 0; }
.atb-podium__text .atb-lbl { margin-bottom: 12px; }
.atb-podium__brand { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.atb-podium__name {
  margin: 2px 0 0;
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
}
.atb-podium__name a { text-decoration: none; }
.atb-podium__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.atb-podium__buy { align-self: end; padding-top: 18px; }
.atb-podium__more { align-self: end; margin-top: 14px; }
@media (max-width: 760px) {
  .atb-podium__row {
    display: flex;
    position: relative;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    gap: 12px;
  }
  .atb-podium__card {
    flex: 0 0 82%;
    scroll-snap-align: start;
    grid-template-rows: auto auto 1fr auto;
  }
}

/* Mobil: toppvalen sveps i sidled, som Teknikatletens pallplats — tre kort under
   varandra blev en halv sidas scroll innan motiveringarna ens började. Korten går ut
   i skärmkanten så att nästa kort tittar fram. */
@media (max-width: 760px) {
  .atb-podium .shelf {
    display: flex;
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .atb-podium .shelf::-webkit-scrollbar { display: none; }
  .atb-podium .shelf > * {
    flex: 0 0 84%;
    scroll-snap-align: start;
    /* Samma padding på alla tre, annars blir plattorna olika breda (hyllans kort har
       16 respektive 22 px). */
    padding: 16px 16px 20px;
  }
  /* Korten kommer ur startsidans hylla, där varje kort har sin egen bildform (stor
     4:3, kvadrat, bild bredvid texten). Bredvid varandra i en karusell ska de vara
     lika: samma 4:3-platta överst på alla tre, samma rundning och ingen lutning. */
  .atb-podium .shelf .m2 {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Bild och text delar EN vit yta (ägarbeslut 2026-10-08): ingen färgad remsa
     emellan, pastellen blir bara en ram runt kortet. Plattan rundas uppe, textrutan
     nere, och de möts utan mellanrum. */
  .atb-podium .shelf .tile {
    /* flex: none — annars växer plattan och äter kortets lediga höjd, så bilderna
       blev olika höga fast alla tre har samma 4:3. */
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-height: 0;
    margin: 0;
    border-radius: 22px 22px 0 0;
    transform: none;
    box-shadow: none;
  }
  .atb-podium .shelf .tile img { width: 80%; height: 80%; }
  /* Samma rubrikstorlek på alla tre korten — hjältekortets 28–42 px gjorde det första
     kortet till en annan sorts kort. Ytan som blir över går till luft: mer avstånd
     mellan bild, rubrik, mening och köprad. */
  .atb-podium .shelf .feat-body { display: grid; gap: 0; padding: 0; }
  .atb-podium .shelf .feat-name,
  .atb-podium .shelf .pc-name {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-top: 14px;
  }
  .atb-podium .shelf .feat-why,
  .atb-podium .shelf .pc-why {
    font-size: 15.5px;
    line-height: 1.5;
    margin-top: 10px;
  }
  /* Texten står på en VIT panel i kortet, så pastellen bara ramar in den (förslag
     2026-10-08). Bilden ligger redan på vitt, så kortet blir två vita ytor på färg. */
  /* Korten är lika höga i karusellen, och den vita rutan fyller resten av kortet
     under bilden — så blir alla vita rutor exakt lika stora, oavsett hur långt
     produktnamnet eller meningen är. Köpraden ligger i botten på allihop. */
  .atb-podium .shelf > * {
    display: flex;
    flex-direction: column;
    /* gap: 0 — hyllans kort har 4–6 px mellan sina delar, och det blev en smal
       pastellrand mellan bilden och texten. */
    gap: 0;
  }
  .atb-podium .shelf .atb-kortbody {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 0;
    padding: 4px 16px 18px;
    border-radius: 0 0 22px 22px;
    background: var(--surface);
  }
  .atb-podium .shelf .buyrow { margin-top: auto; padding-top: 18px; }
  /* Reglerna här löste en gammal krock: priset och knappen delade rad i det smala
     kortet, och ett långt butiksnamn tryckte ihop prisrutan till noll. Sedan priset
     står ovanför knappen (2026-10-09) finns ingen krock — men "flex: 1 1 120px" blev
     kvar och sträckte knappen till 120 px HÖJD i kolumnen, så den såg ut som en
     oval klump i karusellen. Knappen tar bredden, inte höjden. */
  .atb-podium .shelf .buyrow .btn { flex: none; width: 100%; min-width: 0; }
  .atb-podium .shelf .atb-kortbody .feat-name,
  .atb-podium .shelf .atb-kortbody .pc-name { margin-top: 12px; }
  .atb-podium .shelf .feat .buyrow b { font-size: 22px; }
}

/* Lappen på hyllans kort bär samma mint som alla andra etiketter. */
.atb-podium .shelf .fmt { background: var(--buy); color: var(--buy-ink); }

/* Bred skärm: startsidans MOSAIK är kvar (hjältekortet brett, ett högt och ett
   bredvid) — det är formen Nellma vill ha. Det som fattades var luft: texterna låg
   tätt på varandra och högerkortets text klämdes ihop under en för hög bild
   (2026-10-09). Omslaget räknas inte som egen ruta, så m1/m2:s grid-områden
   fungerar precis som på startsidan. */
@media (min-width: 761px) {
  .atb-podium .shelf .pc > .atb-kortbody { display: contents; }
  /* Luft mellan kortets delar. */
  .atb-podium .shelf .fmt { margin-bottom: 14px; }
  .atb-podium .shelf .feat-body { gap: 0; padding: 24px 10px 10px; align-content: center; }
  .atb-podium .shelf .feat-name,
  .atb-podium .shelf .pc-name { line-height: 1.12; }
  .atb-podium .shelf .feat-why,
  .atb-podium .shelf .pc-why { margin-top: 14px; line-height: 1.5; }
  .atb-podium .shelf .buyrow { margin-top: 22px; padding-top: 0; }
  .atb-podium .shelf .pc .buyrow { margin-top: auto; padding-top: 22px; }
  /* Det höga kortet: bilden får växa med kortets höjd men inte äta hela det, och
     texten behåller sin yta. Utan taket klämdes texten ihop; utan växten blev det
     en tom remsa över köpknappen. */
  .atb-podium .shelf .m1 .tile {
    flex: 1 1 auto;
    aspect-ratio: auto;
    min-height: 240px;
    max-height: 420px;
    margin-bottom: 18px;
  }
  /* Kortet med bilden bredvid texten: mer luft mellan spalterna och mellan raderna. */
  .atb-podium .shelf .m2 { column-gap: 26px; row-gap: 10px; }
  .atb-podium .shelf .m2 .pc-why { margin-top: 12px; }
}

/* Köpmodulen: priset med sin datumstämpel och mintknappen. */
.atb-kop { display: grid; gap: 12px; }
.atb-kop .btn { width: 100%; }
.atb-kop__pris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 9px; line-height: 1.2; }
.atb-kop__pris b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.atb-kop__pris span { font-size: 12.5px; color: var(--muted); }
.on-night .atb-kop__pris span { color: var(--night-muted); }
.atb-prisrad { margin: 14px 2px 0; font-size: 12.5px; color: var(--muted); }
/* Priset i hyllans kort bär sin egen datumstämpel, som startsidans hjältekort — den
   fristående raden under korten är borta (ägarbeslut 2026-10-08). Stämpeln är
   obligatorisk överallt där ett pris står (CLAUDE.md regel 1). */
.atb-kortpris { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; line-height: 1.15; }
.atb-kortpris b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.atb-kortpris span { font-size: 11.5px; color: var(--muted); }

/* ---------- 4. Vad behöver du? ---------- */
.atb-behov { padding-top: clamp(52px, 7vw, 92px); }
.atb-behov__sub { margin: 12px 0 0; max-width: 60ch; font-size: 17px; color: var(--muted); }
.atb-behov__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-top: 24px;
}
.atb-behov__tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px;
  border: 0;
  border-radius: clamp(20px, 2.2vw, 28px);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.22s var(--ease);
}
.atb-behov__tile:hover { box-shadow: inset 0 0 0 1.5px var(--soft2); }
.atb-behov__tile[aria-pressed="true"] {
  background: var(--ink);
  color: var(--sel-fg);
  box-shadow: none;
  transform: rotate(-1.2deg);
}
.atb-behov__tile[aria-pressed="true"] i,
.atb-behov__tile[aria-pressed="true"] .atb-behov__spec { color: var(--sel-fg); }
.atb-behov__tile i { font-size: 22px; margin-bottom: 8px; color: var(--ink); }
/* Knapptexten är produktens korta etikett när behovet är en hel mening (se
   BEHOV_MIN/KNAPPTAK i Artikel.astro). Tolv behov saknar en sådan etikett, och för
   dem är klämningen skyddsnätet: två rader, aldrig en knapp som växer till ett
   stycke. Hela behovet står kvar i jämförelsens rad "Bäst för". */
.atb-behov__titel {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.atb-behov__spec { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.atb-behov__res { margin-top: 18px; }
.atb-behov__count { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.atb-behov__list { display: flex; flex-wrap: wrap; gap: 8px; }
.atb-behov__item.is-out { display: none; }
.atb-behov__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-pill);
  background: var(--surface);
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.22s var(--ease);
}
.atb-behov__link:hover { box-shadow: inset 0 0 0 1.5px var(--soft2); }
.atb-behov__thumb {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--tile-line);
  overflow: hidden;
}
.atb-behov__thumb img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.atb-behov__text { display: flex; flex-direction: column; min-width: 0; }
.atb-behov__namn { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.atb-behov__etikett { font-size: 13px; color: var(--muted); }
.atb-behov__go { margin-left: 4px; color: var(--muted); }
@media (max-width: 639px) {
  .atb-behov__tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .atb-behov__tile {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 16px;
  }
  .atb-behov__tile i { grid-row: span 2; margin: 0; }
  .atb-behov__list { flex-direction: column; flex-wrap: nowrap; }
  .atb-behov__link { border-radius: 16px; padding-right: 14px; }
  .atb-behov__go { margin-left: auto; }
}

/* ---------- 5. Innehållskortet ---------- */
.atb-ik { padding-top: clamp(36px, 5vw, 60px); }
.atb-ik__card {
  border-radius: var(--r-stor);
  background: var(--surface);
  overflow: hidden;
}
/* Här satt "Hoppa till" — en sidscrollande rad med genvägar. Borttagen 2026-10-09:
   innehållsförteckningen under den bar samma länkar. */

/* De två rutorna är rader i kortet, inte lösa länkar. Varje rad har en egen
   klickyta över hela bredden, så rubriken och plustecknet hör ihop. */
.atb-ik__fold + .atb-ik__fold { border-top: 1px solid var(--line); }
.on-night .atb-ik__fold + .atb-ik__fold { border-top-color: var(--night-line); }
.atb-ik__fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background-color 0.2s var(--ease);
}
.atb-ik__fold > summary:hover { background: var(--bg); }
.atb-ik__fold[open] > summary { padding-bottom: 12px; }
.atb-ik__fold > summary::-webkit-details-marker { display: none; }
/* Plustecknet i en mintring: mint bär utmärkelserna och bockarna, och här markerar
   den vad som går att öppna. Ringen vrids ett kvarts varv till ett minus. */
.atb-ik__fold > summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--buy);
  color: var(--buy-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
}
.atb-ik__fold[open] > summary::after { content: "–"; }

/* Det utfällda innehållet får samma indrag som rubriken och luft under, så raden
   inte klistras mot nästa. */
.atb-ik__toc,
.atb-ik__metod { padding-inline: 22px; }
.atb-ik__toc {
  margin: 0;
  padding-block: 2px 20px;
  padding-left: 44px;
  columns: 2 280px;
  column-gap: 32px;
  font-size: 15px;
  list-style: decimal;
}
.atb-ik__toc li { break-inside: avoid; padding: 4px 0; }
.atb-ik__toc li.is-sub { list-style: none; margin-left: 12px; font-size: 14px; color: var(--muted); }
.atb-ik__toc a { text-decoration: none; }
.atb-ik__toc a:hover { text-decoration: underline; }
.atb-ik__metod {
  max-width: 76ch;
  padding-block: 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.atb-ik__metod p { margin: 0 0 10px; }
.atb-ik__kriterier {
  margin: 12px 0 14px;
  padding-left: 20px;
  list-style: decimal;
}
.atb-ik__kriterier li { padding: 4px 0; }
.atb-ik__kriterier strong { color: var(--ink); }
@media (max-width: 560px) {
  .atb-ik__fold > summary { padding: 16px; font-size: 15px; }
  .atb-ik__toc { padding-inline: 16px; padding-left: 36px; }
  .atb-ik__metod { padding-inline: 16px; }
}

/* ---------- 6–7. Produktbanden ---------- */
.atb-band { position: relative; }
.atb-band--band { padding-block: 0; margin-top: clamp(14px, 1.6vw, 22px); }
.atb-band--band > .atb-band__grid {
  padding: clamp(22px, 3vw, 48px);
  border-radius: var(--r-stor);
  background: var(--band, var(--surface));
}
/* Teknikatletens band växlar vitt och SVART. Här bär varje band sin egen PASTELL,
   som produktväggen på startsidan: pastell = produkt, mint = köp (artikel-2026.css).
   Rytmen kommer i stället ur att bilden växlar sida och färgen byts band för band.
   Den svarta varianten finns kvar nedan om rytmen vitt–svart–vitt ska provas. */
.atb-band--white,
.atb-band--pastell {
  background: transparent;
  --muted: color-mix(in srgb, var(--ink) 70%, var(--band, var(--surface)));
}
.atb-band--night { background: var(--night); color: var(--night-ink); }
.atb-band--card { margin-top: clamp(14px, 1.6vw, 22px); padding-inline: 16px; }
.atb-band--card .atb-band__grid {
  width: min(100%, 1680px);
  margin-inline: auto;
  padding: clamp(22px, 3vw, 48px);
  border-radius: var(--r-stor);
  background: var(--band, var(--surface));
  --muted: color-mix(in srgb, var(--ink) 70%, var(--band, var(--surface)));
}
.atb-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.atb-band__media {
  display: grid;
  /* Rutan är en enda cell som ALDRIG blir högre än plattan. Utan minmax(0,1fr)
     växte raden till bildens naturliga 600 px-kvadrat medan plattans ruta var
     klippt till sin satta höjd — bildens "82 %" räknades då mot raden och
     stack ut under kanten, där overflow: hidden skar av produkten (2026-10-09). */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  position: relative;
  height: clamp(260px, 72vw, 420px);
  border-radius: clamp(20px, 2.4vw, 30px);
  background: #fff;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--tile-line);
}
.atb-band__media img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  transition: transform 0.9s var(--ease);
}
.atb-band:hover .atb-band__media img { transform: scale(1.04); }
/* Texten börjar högst upp och köpmodulen sitter längst ned, så luften hamnar MELLAN
   delarna i stället för som en tom yta under knappen (ägarbeslut 2026-10-09). Förut
   centrerades allt som ett block, och i ett kort där bilden är högre än texten blev
   resultatet ett klump i mitten med död yta över och under. */
/* Textspalten centreras mot plattan. Med pillren borta består den av fyra till fem
   element, och då blev "köpmodulen i botten" ett 180 px stort hål mitt i kortet.
   Centrerad får blocket lika mycket luft över och under, och kortet läses som en
   enhet i stället för två delar med en lucka emellan (2026-10-09). */
.atb-band__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.atb-band__h {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
/* PLATSSIFFRAN står ÖVERST i textspalten, över rubriken (ägarbeslut 2026-10-09:
   den hörde inte hemma mitt i kortet vid pillren). Den fungerar som en vinjett i ett
   magasin: numret först, sedan ingången. Rubriken börjar därmed en bit längre ned,
   vilket var poängen.

   Talet är information — samma ordning som innehållsförteckningen och jämförelsen —
   och fanns redan i markupen, gömt inuti rubriken med display: none. Färgen blandas
   ur kortets egen pastell, så varje band får sin egen siffra utan en ny färg.
   Dold på mobil, där spalten inte har någon yta att ge bort. */
.atb-band__rang { display: none; }
@media (min-width: 900px) {
  .atb-band__rang {
    display: block;
    margin: 0 0 clamp(10px, 1.2vw, 18px);
    font-size: clamp(64px, 6vw, 104px);
    font-weight: 700;
    line-height: 0.76;
    letter-spacing: -0.06em;
    font-variant-numeric: lining-nums tabular-nums;
    color: color-mix(in srgb, var(--ink) 15%, transparent);
  }
}
/* Etiketten sitter i kortets hörn, på samma plats och med samma påklistrade känsla
   som Redaktionens val-stjärnan (ägarbeslut 2026-10-09). De krockar aldrig: ett
   förstaval bär stjärnan och saknar etikett, övriga tvärtom.
   Den är större än sajtens vanliga etikettpiller — upplysningen stod förut två
   gånger, här och som snabbfaktum, och när dubbletten ströks fick den som blir kvar
   bära den ensam. */
/* MOBIL: etiketten står i flödet, mellan bilden och texten, där den satt innan
   (ägarbeslut 2026-10-09). Hörnet gäller bara bred skärm — på en smal skärm ligger
   bilden överst och en etikett i hörnet lägger sig över produkten. */
.atb-band__horn {
  justify-self: start;
  margin-bottom: -8px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 900px) {
.atb-band__horn {
  position: absolute;
  z-index: 2;
  /* Indraget är större än stjärnans: en stjärna är rund och tål kortets rundade hörn,
     ett avlångt piller hamnar utanför kanten om det läggs lika nära. */
  top: 16px;
  left: 26px;
  padding: 8px 17px;
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(18, 30, 24, 0.05), 0 12px 22px -16px rgba(18, 40, 30, 0.6);
}
.atb-band--flip .atb-band__horn { left: auto; right: 26px; }
  /* Kortformen får hänga utanför kanten, som stjärnan. Bandet går kant till kant och
     håller sin etikett innanför — annars klipps den av skärmkanten. */
  .atb-band--card .atb-band__horn { top: -16px; left: -12px; }
  .atb-band--card.atb-band--flip .atb-band__horn { left: auto; right: -12px; }
}
.atb-band__brand { order: -1; margin-bottom: 4px; font-size: 13.5px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.on-night .atb-band__brand { color: var(--night-muted); }
.atb-band__model a { text-decoration: none; }
.atb-band__model a:hover { text-decoration: underline; text-underline-offset: 5px; }
.atb-band__lede {
  max-width: 48ch;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 84%, var(--band, var(--bg)));
}
.on-night .atb-band__lede { color: var(--night-2); }
.atb-band__varfor:first-of-type { margin-top: 16px; }
.atb-band__fit b { font-weight: 600; margin-right: 6px; }
/* Bockraderna: en skriven punkt per rad, bocken i mint. */
/* Snabbfakta-pillren togs bort 2026-10-09 — se ProduktBand.astro. Texten bär
   uppgifterna i stället. */


/* auto trycker ned modulen till spaltens botten när det finns plats över; padding
   håller minsta luften när texten fyller spalten (mobil, där inget sträcks). */
.atb-band__text > .atb-kop { margin-top: 26px; width: min(100%, 360px); }
.atb-band__varfor {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: 17.5px;
  line-height: 1.58;
  color: color-mix(in srgb, var(--ink) 82%, var(--bg));
}
.on-night .atb-band__varfor { color: var(--night-2); }

@media (min-width: 900px) {
  .atb-band__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: stretch;
  }
  .atb-band--flip .atb-band__media { order: 2; }
  /* Plattan har en EGEN form och sträcks inte av textspalten. Förut var den
     "height: auto" i en "align-items: stretch"-rad, så den växte med texten: när
     specifikationerna fälldes ut blev den en hög vit rektangel med en liten produkt
     mitt i, och bilden såg avklippt ut. Förhållandet 5/4 är samma form som den hade
     i stängt läge, så stängt ser likadant ut — öppet slutar hoppa. */
  .atb-band__media {
    align-self: start;
    height: auto;
    min-height: 0;
    aspect-ratio: 5 / 4;
  }
  /* Luften fördelas i TVÅ mellanrum i stället för att samlas i ett tomrum ovanför
     priset (ägarbeslut 2026-10-09). Det första lägger sig före snabbfakta, det andra
     före köpmodulen, så kortet läses i tre block: vad produkten är, vad den har,
     vad den kostar. Texten får samtidigt mer rad- och styckeluft, eftersom
     utrymmet nu finns. */
  /* De två styckena låg på 20 och 17,5 px i nästan samma svärta och lästes som två
     jämnstarka block — "för mycket som händer". Nu är ordningen tydlig: ingressen är
     påståendet, i full svärta, och motiveringen är detaljen, dämpad och mindre. */
  .atb-band__lede { margin-top: 22px; font-size: 20px; line-height: 1.55; color: var(--ink); }
  .atb-band__varfor { margin-top: 14px; font-size: 17.5px; line-height: 1.62; color: var(--muted); }
  /* Finns BÅDA styckena jämnas graderna ut. 209 av 302 produktkort har bara ett
     stycke och där får ingressen vara stor — men när ett andra följer är det
     LÄNGRE än det första (median 263 tecken mot 110), och då blev mest text satt i
     minst grad. Ordningen bärs av färg och vikt i stället: ingressen i full svärta,
     motiveringen dämpad. Tre prosagrader blir två. */
  .atb-band__text:has(.atb-band__varfor) .atb-band__lede {
    font-size: 17.5px;
    font-weight: 500;
    line-height: 1.62;
  }
  .atb-band__varfor:first-of-type { margin-top: 20px; }
}
@media (max-width: 899px) {
  .atb-band--card .atb-band__grid { padding: 18px 18px 28px; }
  .atb-band--band > .atb-band__grid { padding: 18px 18px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .atb-band__media img { transition: none; }
  .atb-band:hover .atb-band__media img { transform: none; }
}
.atb-fler { padding-top: clamp(52px, 7vw, 92px); }

/* ---------- 8. Jämför sida vid sida ---------- */
.atb-jmf { padding-top: clamp(52px, 7vw, 92px); }
.atb-jmf__card {
  /* Ingen padding: rutans vadd låg mellan scrollkanten och den frysta kolumnen, och
     i den springan syntes de andra kolumnerna passera förbi till vänster. Luften
     ligger i cellerna i stället. */
  padding: 0;
  border-radius: var(--r-stor);
  background: var(--surface);
  overflow-x: auto;
}
/* Uttoningen i högerkanten säger att det finns fler produkter att svepa fram till.
   Klasserna sätts av skriptet i Artikel.astro och bara när det finns mer att
   scrolla — ryms tabellen (bred skärm, få produkter) tonar ingenting ut. */
.atb-jmf__card.is-scroll:not(.is-slut) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}
.atb-jmf__grid {
  display: grid;
  /* Vänsterkolumnen sizas efter SITT eget innehåll (radrubrikerna är fasta: Format,
     Bäst för, Märke, Utmärker sig, Köp). Här stod 0.42fr, och då växte den i takt med
     produktkolumnerna: på nivea-q10 blev den 213 px och på tubing-mascara 249 px, fast
     den längsta rubriken behöver drygt 120. Den åt av den synliga ytan i en tabell som
     ändå sveps i sidled (ägarbeslut 2026-10-10). */
  grid-template-columns: minmax(84px, max-content) repeat(var(--cols, 4), minmax(168px, 1fr));
  min-width: 100%;
  width: max-content;
}
/* Raden bär sin egen färg, så den frysta vänsterkolumnen kan ärva den och inte bli
   genomskinlig när tabellen sveps i sidled. */
.atb-jmf__rad { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; background: var(--surface); }
.atb-jmf__rad:nth-child(even) { background: var(--bg); }
/* Vänsterkolumnen står still när man sveper. Bakgrunden sätts EXPLICIT per rad —
   `inherit` lät kolumnerna skina igenom bakom radrubriken. */
.atb-jmf__hornruta,
.atb-jmf__radh {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.atb-jmf__rad:nth-child(even) > .atb-jmf__radh,
.atb-jmf__rad:nth-child(even) > .atb-jmf__hornruta { background: var(--bg); }
.atb-jmf__radh { box-shadow: 1px 0 0 var(--line); }
.atb-jmf__hornruta, .atb-jmf__head { padding: 16px 14px 18px; }
.atb-jmf__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.atb-jmf__img { display: block; width: 100%; }
.atb-jmf__img img { width: 72px; height: 72px; object-fit: contain; margin-inline: auto; }
.atb-jmf__namn { font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; text-decoration: none; }
/* Etiketten är borttagen ur jämförelsens kolumnhuvuden (2026-10-10). */
.atb-jmf__namn:hover { text-decoration: underline; }
.atb-jmf__radh { padding: 12px 14px; font-size: 13.5px; color: var(--muted); }
.atb-jmf__cell { padding: 12px 14px; font-size: 14.5px; }
/* Knappen står i cellens botten, så att köpknapparna linjerar i alla kolumner även när
   ett pris saknas (ny köplänk före nattens prisuppdatering) eller ordinariepriset bryter
   rad. Med align-content: start hoppade knappen upp i kolumnen utan pris (2026-10-13). */
.atb-jmf__cell--kop { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; min-width: 0; }
.atb-jmf__cell--kop .btn { margin-top: auto; }
/* Knappen får aldrig spilla ut ur sin kolumn: texten bryter rad i stället. */
.atb-jmf__cell--kop .btn { width: 100%; min-width: 0; }
.atb-jmf__cell--kop .btn .bt { white-space: normal; line-height: 1.2; }
.atb-jmf__pris { font-size: 15px; font-weight: 600; }

/* ---------- 9. Brödtexten ---------- */
.atb-body {
  width: min(100%, 1680px);
  margin: clamp(52px, 7vw, 92px) auto 0;
  padding: clamp(36px, 5vw, 72px) 16px;
  border-radius: var(--r-stor);
  background: var(--surface);
}
.atb-body .atb-prosa {
  width: min(100%, 760px);
  margin-inline: auto;
}
/* Etiketten som säger att guiden börjar här. */
.atb-body__kick {
  width: min(100%, 760px);
  margin: 0 auto 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Första stycket får ingressens tyngd, så texten inte börjar mitt i. */
.atb-body .atb-prosa > p:first-of-type {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
}
/* Produktblocket i mdx:en (ProductPicks) visar samma produkter som pallplatsen och
   banden ovanför. I den här mallen äger sidan kortleken — som hos Teknikatleten, där
   artikeln aldrig har ett eget produktblock i texten.
   OBS: blocket GÖMS bara, det ligger kvar i HTML:en med sina köplänkar. Här stod att
   ett skript tar bort det ur DOM:en; något sådant skript finns inte. Rätt lösning vid
   utrullningen är att inte rendera blocket alls i den här mallen. */
.atb-body .picks,
.atb-body .savaldevi { display: none; }
.atb-slut {
  width: min(100%, 760px);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.atb-slut strong { color: var(--ink); }


/* ---------- Inga skuggor ----------
   Ägarbeslut 2026-10-08: sidan ska inte ha skuggor någonstans, som Teknikatleten.
   Ytorna hålls isär av färg, form och mellanrum. Startsidans hylla bär skuggor på
   lappen, korten vid hover och hjältekortets platta — de släcks här. */
.atb .fmt,
.atb .feat,
.atb .pc,
.atb .feat:hover,
.atb .pc:hover,
.atb .tile,
.atb .atb-hero__tile,
.atb-podium .shelf .tile { box-shadow: none; }
/* Produktytan behåller sitt hårstreck — det är en kant, inte en skugga. */
.atb .tile { box-shadow: inset 0 0 0 1px var(--tile-line); }
/* Köpraden ligger utanför .atb i DOM:en och behöver egen rad. Den behåller sitt
   hårstreck mot sidan, men tappar skuggan som fick den att sväva. */
.buybar { box-shadow: inset 0 0 0 1px var(--line); }
/* Chipsen i foten (kunskapsbanken) bär startsidans lappskugga — bort med den också. */
.atb .art-chips a { box-shadow: inset 0 0 0 1px var(--line); }
/* ---------- Tabellerna i brödtexten ----------
   EN tabellform på hela sajten (ägarbeslut 2026-10-10: "alla tabeller byggs om
   som pimple patch" + "tabeller ska vara simpla men inte fula"). Brödtextens
   tabeller bär samma utseende som "Jämför sida vid sida": vit yta utan ram och
   utan skugga, mjuka hörn, randning per rad, frusen vänsterkolumn med en hårlinje,
   dämpade radrubriker och ink-svart celltext.

   Här låg två konkurrerande skinn: ett i den här filen som gjorde kortet
   genomskinligt och rubriken till en versalrad, och ett i artikel-2026.css som
   gjorde tvärtom. Eftersom den här filen bundlas SIST vann den tysta varianten,
   och pimple-patch behöll gammal form medan karbamid fick ny. Nu finns formen på
   ett ställe: här.

   Komponenternas egna <style> är scopade av Astro med attributselektorer och bär
   dessutom !important på flera ställen (den gräddgula radrubriken, dess storlek).
   Därför är det här blocket medvetet !important-tungt. Det är ett HUDBYTE: alla
   Guldnatt-värden står kvar och gäller de artiklar som ännu kör klassiska mallen.

   Stapplingen under 640 px är struken för de här tabellerna (överspelar
   [[wide-tables-mobile-zoom]] för tabeller i omdesignen, 2026-10-10): de sveps i
   sidled som jämförelsen, med frusen vänsterkolumn. Sidkroppen scrollar aldrig.
   Undantag: meningstabellerna (.dtab--kort) blir kort per rad, se nedan (2026-10-13). */

/* Guldnatts tokens pekas om mot stenen och minten inne i omdesignens skal. */
body[data-skal="omdesign"] {
  --color-ink: var(--ink);
  --color-kort: var(--surface);
  --color-cream: var(--bg);
  --color-hair: var(--line);
  --color-ram: var(--line);
  --color-mut: var(--muted);
  --color-dim: var(--muted);
  --r-tab: var(--r-stor);
}

/* Kortet: exakt .atb-jmf__card. Ingen ram, ingen skugga, ingen vadd.
   overflow-x behöver !important: artikel-2026.css:774 sätter `.art-text .dtab__card
   { overflow: visible !important }` för den staplade radkortsformen, och utan
   !important här vinner den regeln tyst — tabellen svep-scrollar aldrig, den
   bara klipps av vid kortets kant (2026-10-11, salicylsyra BHA/AHA-tabellen). */
body[data-skal="omdesign"] .spec__card,
body[data-skal="omdesign"] .dtab__card,
body[data-skal="omdesign"] .art-text .dtab__card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--r-stor) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  overflow-x: auto !important;
}
/* Uttoningen i högerkanten: en tabell som tyst är bredare än sin ruta ser ut som
   ett renderingsfel (ägarbeslut 2026-10-09). Klasserna sätts av skriptet i
   Artikel.astro, samma som jämförelsens. */
body[data-skal="omdesign"] .spec__card.is-scroll:not(.is-slut),
body[data-skal="omdesign"] .dtab__card.is-scroll:not(.is-slut) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
}

body[data-skal="omdesign"] .spec__table,
body[data-skal="omdesign"] .dtab__table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
body[data-skal="omdesign"] .spec__table th,
body[data-skal="omdesign"] .spec__table td,
body[data-skal="omdesign"] .dtab__table th,
body[data-skal="omdesign"] .dtab__table td {
  padding: 12px 14px !important;
  font-size: 14.5px !important;
  line-height: 1.45;
  vertical-align: top;
  border: 0 !important;
}
body[data-skal="omdesign"] .spec__table td,
body[data-skal="omdesign"] .dtab__table td {
  min-width: 168px;
  color: var(--ink) !important;
}
body[data-skal="omdesign"] .spec__table thead th,
body[data-skal="omdesign"] .dtab__table thead th {
  min-width: 168px;
  padding: 16px 14px 18px !important;
  font-size: 15.5px !important;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: none !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
}
/* Randningen bärs av RADEN, så den frusna kolumnen kan ärva den och inte bli
   genomskinlig när tabellen sveps (samma lärdom som i .atb-jmf). */
body[data-skal="omdesign"] .spec__table tbody tr,
body[data-skal="omdesign"] .dtab__table tbody tr {
  background: var(--surface);
}
body[data-skal="omdesign"] .spec__table tbody tr:nth-child(even),
body[data-skal="omdesign"] .dtab__table tbody tr:nth-child(even) {
  background: var(--bg);
}
/* Radrubriken: dämpad, mindre, och står still när tabellen sveps. */
body[data-skal="omdesign"] .spec__table tbody th,
body[data-skal="omdesign"] .dtab__table tbody th,
body[data-skal="omdesign"] .spec__hornet,
body[data-skal="omdesign"] .spec__egenskap,
body[data-skal="omdesign"] .art-text .dtab--stack .dtab__table tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  text-align: left;
  background: inherit !important;
  box-shadow: 1px 0 0 var(--line) !important;
}
body[data-skal="omdesign"] .spec__table thead th:first-child,
body[data-skal="omdesign"] .dtab__table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 0;
  background: var(--surface) !important;
}
body[data-skal="omdesign"] .spec__cap,
body[data-skal="omdesign"] .dtab__cap,
body[data-skal="omdesign"] .art-text .dtab__cap {
  margin: 0 0 14px !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  color: var(--ink) !important;
}
body[data-skal="omdesign"] .spec__foot,
body[data-skal="omdesign"] .dtab__foot {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--muted);
}
/* Punktlistor i en cell (VersusCards "välj om") staplas, inte en radda med
   mittpunkter emellan. */
.spec__punkter {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.spec__punkter li {
  position: relative;
  padding-left: 14px;
}
.spec__punkter li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
}

/* Desktop: tabellen ska INTE scrolla (ägarbeslut 2026-10-10). Den får vara bredare
   än brödtexten, men aldrig bredare än jämförelsen — den sätter taket. Brödtext-
   spalten är 760 px och jämförelsens kort 1568 px vid stora fönster, så tabellen
   bryter ut ur spalten och centreras i samma bredd. Under 1024 px sveps den i
   stället, med uttoningen som ledtråd. */
@media (min-width: 1024px) {
  /* Bredden följer INNEHÅLLET, inte taket (ägarbeslut 2026-10-10: "jag sa inte att
     tabellerna måste vara såhär breda, det måste du justera per innehåll"). Golvet är
     brödtextspalten, taket är jämförelsens bredd. En tabell med tre korta kolumner
     stannar alltså i spalten; en med sex kolumner växer tills den är lika bred som
     jämförelsen och sveps först därefter.
     Centreringen görs med margin-left:50% + translateX(-50%): marginal-auto kan inte
     centrera ett block som är bredare än sin spalt, medan förskjutningen klarar vilken
     bredd som helst. */
  body[data-skal="omdesign"] .spec,
  body[data-skal="omdesign"] .dtab {
    width: fit-content !important;
    min-width: 100% !important;
    max-width: min(1568px, calc(100vw - 112px)) !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    transform: translateX(-50%);
  }
  body[data-skal="omdesign"] .spec__table,
  body[data-skal="omdesign"] .dtab__table {
    width: max-content;
    min-width: 100%;
  }
  body[data-skal="omdesign"] .spec__table td,
  body[data-skal="omdesign"] .dtab__table td,
  body[data-skal="omdesign"] .spec__table thead th,
  body[data-skal="omdesign"] .dtab__table thead th {
    min-width: 0;
  }
}

/* Stapplingen under 640 px gäller inte i omdesignen: tabellen sveps i stället,
   som jämförelsen. Reglerna nedan nollar .dtab--stack:s mobilform. Undantaget är
   meningstabellerna (.dtab--kort), som blir kort — se nästa block. */
@media (max-width: 639px) {
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody tr {
    display: table-row;
    padding: 0 !important;
    border-radius: 0 !important;
    background: var(--surface);
  }
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody tr:nth-child(even) {
    background: var(--bg);
  }
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody tr + tr {
    margin-top: 0;
  }
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody td {
    display: table-cell;
  }
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody td::before {
    display: none;
  }
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody th[scope="row"],
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table tbody .spec__label,
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__row-head {
    display: table-cell !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 0 !important;
    background: inherit !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--stack:not(.dtab--kort) .dtab__table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

/* Meningstabellerna: ett kort per rad under 640 px (ägarbeslut 2026-10-13).
   En tabell där cellerna är hela meningar går inte att läsa som svep — meningen
   klipps vid skärmkanten och läsaren svepar fram och tillbaka för varje cell.
   Bygget sätter .dtab--kort när minst en datacell har åtta ord eller fler
   (src/lib/meningstabell.mjs); värdetabeller (doser, halter) sveps som förut.
   Raden blir ett kort: radrubriken överst i fetstil, sedan varje kolumn som
   kolumnrubrik (ur data-label) ovanför sitt värde, så meningen får hela bredden.
   Korten ligger på stenen (--bg) så att de skiljs från den vita sidan.
   Desktop rörs inte. */
@media (max-width: 639px) {
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__card {
    overflow: visible !important;
    background: transparent !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table,
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody,
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody tr {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody tr,
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody tr:nth-child(even) {
    padding: 16px 16px 10px !important;
    border-radius: var(--r-stor) !important;
    background: var(--bg) !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody tr + tr {
    margin-top: 10px !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody th {
    position: static !important;
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    white-space: normal !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
    color: var(--ink) !important;
    background: none !important;
    box-shadow: none !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 9px 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block !important;
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--muted);
  }
  /* En enda datakolumn: etiketten vore samma i varje kort, och bildtexten säger den redan. */
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody td[data-label]:only-of-type::before {
    display: none !important;
  }
  body[data-skal="omdesign"] .art-text .dtab--kort .dtab__table tbody td:only-of-type {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* ---------- Rörelse, artikelns egna ytor ----------
   Hämtad från Teknikatleten (2026-10-09), som bär allt i CSS utan JavaScript:
   texten i produktbandet stiger när den kommer in i bild och bilden blir klibbig
   medan specifikationerna är utfällda, så man inte tappar produkten.

   Det som gäller ALLA omdesignade sidor — mjuk rullning, ankaroffseten och
   köpknappens glansskimmer — bor i startsida-2026.css under "Rörelse, gemensam
   för alla omdesignade sidor". Duplicera det inte hit. */

/* Rubriker utan id får samma offset som ankarmålen i grunden. */
.art-text :is(h2, h3) { scroll-margin-top: 24px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .atb-band__text,
    .atb-fragor,
    .atb-jmf__card,
    .atb-ik__card {
      animation: atb-stig linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* Hyllans kort stiger bara på bred skärm — i karusellen är scrollporten
       vågrät, och då utlöses animationen fel. */
    @media (min-width: 761px) {
      .atb-podium .shelf > * {
        animation: atb-stig linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }
  }
}
@keyframes atb-stig {
  from { opacity: 0; transform: translateY(34px); }
  to { opacity: 1; transform: none; }
}

/* Den fällbara rutans markör vrids mjukt i stället för att byta tecken hårt.
   Produktbandets specifikationer står öppet sedan 2026-10-09 och har ingen markör,
   och bilden behöver ingen sticky längre: bandet växer inte vid klick. */
/* Ringen roterar inte: ett minustecken som vrids ett kvarts varv ställer sig på
   högkant och ser ut som ett streck (2026-10-09). Tecknet byts, ringen står still. */
.atb-ik__fold > summary::after { transition: background-color 0.25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .atb-ik__fold > summary::after { transition: none; }
}

/* ---------- Mjuk utfällning av de fällbara rutorna (2026-10-09) ---------- */
/* <details> fäller ut hårt: innehållet bara finns där, och i produktbandet ryckte
   hela raden till. ::details-content + interpolate-size låter höjden gå från 0 till
   auto med en övergång, utan en rad JavaScript. Webbläsare som inte kan det visar
   innehållet direkt som förut — ingenting går sönder, det blir bara inte mjukt. */
:root { interpolate-size: allow-keywords; }

/* @supports-spärren är inte kosmetisk: regeln sätter block-size: 0 på innehållet, så
   en webbläsare som tar den men INTE kan animera till auto skulle dölja
   specifikationerna helt. Kan den inte nyckelordsinterpolering får den ingen regel
   alls, och <details> beter sig som vanligt. */
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: no-preference) {
  .atb-ik__fold::details-content,
  .atb-fold::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size 0.42s var(--ease),
      opacity 0.3s var(--ease),
      content-visibility 0.42s allow-discrete;
    transition-behavior: allow-discrete;
  }
  .atb-ik__fold[open]::details-content,
  .atb-fold[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}
}

/* ---------- Ordinariepriset i artikeln (2026-10-09) ---------- */
/* Rabatten ska synas på ALLA sidor, inte bara på startsidan. Formen är densamma
   som där: överstruket belopp, inget ord. Prisytorna i artikeln är grid, så det
   gamla beloppet hamnar under det gällande — i jämförelsens cell står de bredvid. */
.atb-kop__pris s,
.atb-kortpris s {
  font-size: 16.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.on-night .atb-kop__pris s,
.on-night .atb-kortpris s { color: var(--night-muted); }
.atb-jmf__pris s {
  margin-left: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Mobil: ett kort ska inte vara mycket högre än en telefonskärm (ägarbeslut
   2026-10-09). Banden mätte 879–915 px mot 844, och det mesta låg i produktplattan
   och i luften mellan pillren. Plattan är lägre här än på bred skärm — produkten
   syns lika bra — och pillren står tätare. */
@media (max-width: 899px) {
  /* Plattan styrs av HÖJD på mobil (aspect-ratio biter inte mot en satt height).
     72vw gav 281 px av en 844 px skärm — en tredjedel av kortet till en bild på vit
     botten. 56vw räcker för att produkten ska synas. */
  .atb-band__media { height: clamp(190px, 56vw, 300px); }
  .atb-band__text > .atb-kop { margin-top: 22px; }
}


/* ===== src/styles/ingrediens-2026.css ===== */
/* Ingredienssidorna i omdesignen (2026-10-12). Sidan byggs av startsidans och
   artikelmallens delar — ingressen (.atb-hero), hyllan (.shelf), jämförelsen
   (.atb-jmf), rutinpanelen och frågerutan — och den här filen bär BARA det som är
   ingredienssidans eget: faktaraden i ingressen, rutnätet för produkterna efter
   hyllan, guidekortet och "Kan man blanda?" i omdesignens färger. Inga kopior av
   delarnas stil; ändras de, ändras ingredienssidan med. Tokens ur startsida-2026.css.
   Omslaget heter .ingsida, inte .ing: startsidan har redan en .ing (ingredienschipsen),
   och dess "a"-regel gjorde varje kort på sidan till ett grått piller. */

/* .art är en flexbox: utan min-width:0 tar jämförelsens rutnät sin fulla bredd och
   drar hela sidan bredare än skärmen (ingressen klipptes i högerkanten). */
.art.ingsida > main,
.art.sida26 > main { min-width: 0; width: 100%; }

/* Sektionerna: samma luft som artikelns block. */
.ing-sek { padding-top: 56px; }
@media (min-width: 640px) { .ing-sek { padding-top: 80px; } }
.ing-sek > .atb-h2 { margin-bottom: 18px; }
.ing-dek { max-width: 60ch; margin: -6px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* Faktaraden i ingressen: siffran stort, förklaringen under. */
.ing-fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 24px 0 0;
}
.ing-fakta div { min-width: 0; max-width: 16ch; }
.ing-fakta dt { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ing-fakta dd { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* .sida26 är omslaget på de övriga omdesignade sidorna (kategori, bloggen,
   topplistorna, textsidorna, 2026-10-12): de byggs av samma delar som ingredienssidan.
   Korten ärver annars textfärgen som räknats ut på body, och då slår [data-mork]
   (vinrött kort, ljus text) aldrig igenom — rubriken blev mörk på mörkt. Artikelns
   toppval gör samma sak i sin egen regel. */
.ingsida .shelf > a,
.ingsida .ing-fler > a { color: var(--ink); }

/* Produkterna efter hyllan: ett jämnt rutnät av hyllans .pc-kort, bilden överst. */
.ing-fler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ing-pc .tile { border-radius: 18px; margin-bottom: 10px; }
.ing-pc:hover .tile img { transform: scale(1.05) rotate(-3deg); }

/* Kan man blanda? Komponenten bär egna gråtoner för den klassiska sidan; här får den
   omdesignens yta, radie och typsnitt. Mint betyder köp och används inte för domen. */
.ing-blanda {
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-card);
  background: var(--surface);
}
.ing-blanda [data-cc] { border: 0; padding: 0; margin: 0; max-width: none; background: transparent; }
.ing-blanda [data-cc] .cc-pick { justify-content: flex-start; }
.ing-blanda [data-cc] .cc-sel,
.ing-blanda [data-cc] .cc-fixed {
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--soft);
  color: var(--ink);
  padding: 0 20px;
}
.ing-blanda [data-cc] .cc-fixed { background: var(--ink); color: var(--sel-fg); font-weight: 600; }
.ing-blanda [data-cc] .cc-plus { font-family: inherit; font-weight: 600; color: var(--muted); }
.ing-blanda [data-cc] .cc-card { border: 0; border-radius: 22px; background: var(--bg); }
.ing-blanda [data-cc] .cc-badge { border-radius: var(--r-pill); letter-spacing: 0.06em; font-family: inherit; }
.ing-blanda [data-cc] .cc-badge--separate { background: var(--c-peach); color: var(--ink); }
.ing-blanda [data-cc] .cc-badge--good { background: var(--c-sky); color: var(--ink); }
.ing-blanda [data-cc] .cc-badge--neutral { background: var(--soft); color: var(--ink); border: 0; }
.ing-blanda [data-cc] .cc-reason { font-family: inherit; font-size: 18px; letter-spacing: -0.01em; }
.ing-blanda [data-cc] .cc-links,
.ing-blanda [data-cc] .cc-links a { font-family: inherit; }
.ing-blanda [data-cc] .cc-nojs { border-top-color: var(--line); }
.ing-blanda [data-cc] .cc-nojs-h { font-family: inherit; font-weight: 600; }
.ing-blanda [data-cc] .cc-nojs dt,
.ing-blanda [data-cc] .cc-nojs dd { font-family: inherit; }

/* Guidekortet: startsidans guidekort i liten skala, produkterna som omslag. */
.ing-guide {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 3vw, 40px);
  border-radius: var(--r-card);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.35s var(--ease);
}
.ing-guide:hover { box-shadow: var(--shadow); }
.ing-guide__text { display: grid; gap: 10px; align-content: center; }
.ing-guide__kick { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.ing-guide__titel { font-size: clamp(24px, 2.4vw, 36px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.ing-guide__dek { max-width: 52ch; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ing-guide__go { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; font-weight: 600; }
.ing-guide:hover .go-dot span { transform: rotate(-45deg); }
.ing-guide__fan { display: flex; justify-content: center; }
.ing-guide__fan .tile {
  width: min(32%, 150px);
  border-radius: 18px;
  box-shadow: 0 0 0 3px var(--card), 0 12px 22px -12px rgba(30, 30, 50, 0.4);
  transition: transform 0.45s var(--ease);
}
.ing-guide__fan .tile + .tile { margin-left: -14px; }
.ing-guide__fan .tile:nth-child(1) { transform: rotate(-7deg); }
.ing-guide__fan .tile:nth-child(2) { transform: translateY(-8px); z-index: 1; }
.ing-guide__fan .tile:nth-child(3) { transform: rotate(7deg); }
.ing-guide:hover .ing-guide__fan .tile { transform: none; }
@media (min-width: 900px) {
  .ing-guide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}

/* Frågorna: artikelns ruta, men alla frågor och i ett rutnät som tar fler än två. */
.ing-fragor h3.atb-fraga__q { margin: 0 0 8px; }
@media (min-width: 900px) {
  .atb-fragor.ing-fragor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Översikten /ingrediens/ ---------- */
.ingx-topp { padding-top: clamp(24px, 4vw, 56px); }
.ingx-smulor { font-size: 13.5px; color: var(--muted); }
.ingx-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  padding-top: clamp(28px, 4vw, 48px);
}
.ingx-kort {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: var(--r-card);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.35s var(--ease);
}
.ingx-kort:hover { box-shadow: var(--shadow); }
.ingx-namn { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ingx-dek {
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ingx-fot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; }
.ingx-bilder { display: flex; }
.ingx-bilder .tile {
  width: 52px;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--card), 0 8px 16px -8px rgba(30, 30, 50, 0.4);
  transition: transform 0.45s var(--ease);
}
.ingx-bilder .tile + .tile { margin-left: -12px; }
.ingx-bilder .tile:nth-child(odd) { transform: rotate(-6deg); }
.ingx-bilder .tile:nth-child(even) { transform: rotate(5deg); }
.ingx-kort:hover .ingx-bilder .tile { transform: none; }
.ingx-antal { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- Grupperna på ingredienssidan (Kräm, Serum …, ägarbeslut 2026-10-12) ----------
   Hoppraden överst som chips (artikelns .art-chips-form), siffran dämpad. Varje grupp får
   en egen rubrik med samma dämpade siffra, och luft nog att läsas som ett eget avsnitt. */
.ing-grupper { display: flex; flex-wrap: wrap; gap: 9px; margin: -4px 0 8px; }
.ing-grupper a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.ing-grupper a span,
.ing-grupp__h span { color: var(--muted); font-weight: 500; }
.ing-grupper a:hover { background: var(--ink); color: var(--sel-fg); }
.ing-grupper a:hover span { color: inherit; }
.ing-grupp { padding-top: 40px; }
.ing-grupp__h {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.035em;
}
/* Rutnätet utan hylla ovanför börjar direkt under rubriken. */
.ing-fler--forst { margin-top: 0; }


/* ===== src/styles/produktsok-2026.css ===== */
/* Produktsöket (2026-10-12): artikelblocket "Nedsatta … just nu" + "Sök bland N …"
   (SokUt.astro) och produktraderna i sidtoppens sökruta (Masthead.astro).
   Bygger på startsida-2026.css: tokens, .btn/.btn-buy/.puck, .sokruta. Köpet är
   samma mintknapp med svart pilcirkel som i toppvalen; sökknappen är medvetet INTE
   mint, eftersom bara köpet är en köpknapp. */

/* ---------- Artikelblocket ---------- */
.sokut{margin-top:72px;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.sokut__h{margin:0}
.sokut__rad{position:relative;min-width:0}
.sokut__lista{list-style:none;margin:0;padding:4px 2px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:min(62vw,232px);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain}
.sokut__lista>li{scroll-snap-align:start;display:flex}
.sokut__kort{flex:1;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:4px;padding:12px 12px 14px;border-radius:var(--r-tile);background:var(--surface);box-shadow:var(--shadow);color:var(--ink);text-decoration:none}
.sokut__bild{position:relative;display:block;aspect-ratio:1;margin-bottom:8px;border-radius:14px;background:#fff;overflow:hidden}
.sokut__bild img{display:block;width:100%;height:100%;object-fit:contain}
.sokut__pct{position:absolute;top:8px;left:8px;padding:4px 10px;border-radius:var(--r-pill);background:var(--c-rose-stark);color:var(--ink);font-size:13px;font-weight:700;line-height:1.2}
.sokut__marke{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sokut__namn{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sokut__pris{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin-top:6px}
.sokut__pris b{font-size:17px}
.sokut__pris s{font-size:13px;color:var(--muted)}
.sokut__kop{margin-top:8px;width:100%;min-height:42px}
.sokut__kop .bt{white-space:normal;line-height:1.2;text-align:left;font-size:14px}

/* Bläddrarna: bara på skärmar med mus, och bara åt det håll där det finns mer. */
.sokut__bladdra{position:absolute;top:calc(min(62vw,232px) / 2 - 22px);width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);display:grid;place-items:center;font-size:20px;cursor:pointer}
.sokut__bladdra[hidden]{display:none}
.sokut__bladdra--bak{left:-10px}
.sokut__bladdra--fram{right:-10px}
@media (hover:none){.sokut__bladdra{display:none}}
/* Svepledtråden: en uttoning i högerkanten så länge det finns fler kort. */
.sokut__rad::after{content:"";position:absolute;top:0;right:0;bottom:14px;width:40px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--bg));opacity:0;transition:opacity .2s}
.sokut__rad.is-scroll::after{opacity:1}

/* Sökknappen var för anonym (Nellma 2026-10-12: "väldigt anonym"). Nu mörk och bred,
   med förstoringsglaset i en mintcirkel: den omvända formen mot köpknappen (mint
   knapp med svart pilcirkel), så den syns utan att kunna tas för ett köp. */
.sokut__sok{display:flex;align-items:center;gap:14px;width:100%;max-width:640px;min-height:68px;padding:8px 10px 8px 8px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font:inherit;font-size:17px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:background-color .25s var(--ease)}
.sokut__lupp{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--buy);color:var(--buy-ink);font-size:24px}
.sokut__text{flex:1;min-width:0}
.sokut__sok:hover,.sokut__sok:focus-visible{background:color-mix(in srgb,var(--ink) 86%,var(--buy))}
.sokut__pil{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--bg) 30%,transparent);font-weight:700}
.sokut__pil span{display:block;transition:transform .4s var(--ease)}
.sokut__sok:hover .sokut__pil span{transform:translateX(3px)}
@media (max-width:639.98px){.sokut__sok{font-size:16px;min-height:62px}.sokut__lupp{width:46px;height:46px;font-size:21px}}

/* ---------- Sökrutan som popup (2026-10-12) ----------
   En modal <dialog> som öppnas där läsaren är, i stället för en ruta i flödet under
   menyn som kastade upp läsaren till toppen. Dator: en kolumn en bit ned från toppen.
   Under 640 px: hela skärmen, så tangentbordet inte äter träfflistan. Sidan bakom
   scrollar inte medan dialogen är öppen. */
.sokdialog{position:fixed;inset:0;margin:7vh auto auto;width:min(760px,calc(100vw - 32px));max-width:none;max-height:86vh;padding:0;border:0;border-radius:var(--r-card);background:var(--surface);color:var(--ink);box-shadow:0 30px 80px -30px rgba(18,40,30,.55)}
.sokdialog[open]{display:flex;flex-direction:column}
.sokdialog::backdrop{background:rgba(18,21,20,.42);backdrop-filter:blur(3px)}
.sokdialog__inre{display:flex;flex-direction:column;min-height:0;flex:1;padding:16px 16px 10px}
html:has(.sokdialog[open]){overflow:hidden}
@media (max-width:639.98px){
  .sokdialog{margin:0;width:100%;height:100dvh;max-height:none;border-radius:0}
  .sokdialog__inre{padding:12px 12px 8px}
}

/* ---------- Sökrutans produkter ---------- */
.sok-resultat{margin-top:14px;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.sok-resultat .sok-träffar{margin:0;max-height:none;overflow:visible}
.sok-rubrik{margin:16px 12px 6px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.sok-rubrik span{text-transform:none;letter-spacing:0;font-weight:400}
.sok-prod{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sok-prod a{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:12px;padding:8px 12px;border-radius:14px;color:var(--ink);text-decoration:none}
.sok-prod a:hover,.sok-prod a:focus-visible{background:var(--soft)}
.sok-prod__bild{width:56px;height:56px;border-radius:10px;background:#fff;overflow:hidden;border:1px solid var(--tile-line)}
.sok-prod__bild img{width:100%;height:100%;object-fit:contain;display:block}
.sok-prod__text{display:grid;gap:1px;min-width:0}
.sok-prod__marke{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sok-prod__namn{font-size:14.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sok-prod__rad{font-size:13px;color:var(--muted)}
.sok-prod__rad b{color:var(--ink)}
.sok-prod__rad s{margin-left:4px}
.sok-prod__pct{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--c-rose-stark);color:var(--ink);font-size:12px;font-weight:700}
.sok-prod__pct[hidden],.sok-prod__rad s[hidden]{display:none}
.sok-info{margin:12px 12px 4px;font-size:13px;color:var(--muted)}
/* Webbläsarens eget lilla kryss i sökfältet stod bredvid dialogens stängkryss. */
.sokdialog input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

/* ---------- Sökfältet i sidtoppen (2026-10-12) ----------
   "Sök bland 60 000+ produkter" i samma form som artikelns sökknapp: mörk pill,
   förstoringsglaset i en mintcirkel. Dator: i sidtoppens högra kant (lång text från
   1200 px, "Sök produkter" där menyn behöver platsen). Mobil: en egen rad över hela
   bredden under wordmarken, som rehabprodukters. */
.search__lupp{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--buy);color:var(--buy-ink);font-size:18px}
@media (min-width:900px){
  .top .search{height:46px;padding:0 20px 0 6px;gap:10px;border:0;background:var(--ink);color:var(--bg);font-size:14.5px;font-weight:600;box-shadow:var(--shadow);transition:background-color .25s var(--ease)}
  .top .search:hover,.top .search:focus-visible{background:color-mix(in srgb,var(--ink) 86%,var(--buy))}
}
.search__lang{display:none}
@media (min-width:1200px){.search__lang{display:inline}.search__kort{display:none}}
.msok-rad{padding:0 16px 12px}
.msok{display:flex;align-items:center;gap:12px;width:100%;height:54px;padding:0 18px 0 7px;border:0;border-radius:var(--r-pill);background:var(--ink);color:var(--bg);font:inherit;font-size:16px;font-weight:600;text-align:left;cursor:pointer}
.msok .search__lupp{width:40px;height:40px;font-size:20px}
@media (min-width:900px){.msok-rad{display:none}}

/* ---------- Sökrutans startläge (2026-10-12) ----------
   Kategoriknappar, sex nedsatta i två kolumner (en på mobil) och en räknarrad. */
.sok-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 8px 6px}
.sok-chip{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--c-mint);color:var(--ink);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:background-color .2s var(--ease)}
.sok-chip:hover,.sok-chip:focus-visible{background:var(--buy)}
@media (min-width:640px){.sok-prod--start{grid-template-columns:1fr 1fr;column-gap:8px}}
.sok-fot{margin:14px 12px 4px;padding-top:12px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--muted)}


/* ===== src/styles/verktyg-2026.css ===== */
/* Verktygssidorna i omdesignen (2026-10-12): /kan-man-blanda och /hitta-ratt.
   Sidorna byggs av delar som redan finns — rutinbyggarens sidhuvud (.rb2-topp,
   .rb2-h1, .rb2-stamp) och vidare-band (.rb2-band), startsidans blandarord (.mw),
   lappar (.tavla, .lapp), mening (.rb2-mening), panel (.panel), produktkort (.pc, .tint, .fmt, .buyrow,
   .btn-buy) och ingredienssidornas rutnät (.ing-fler). Den här filen bär BARA det som
   är verktygens eget: blandarens svarskort, hitta rätts panel och filterknapparna.
   Tokens ur startsida-2026.css. */

.vk-sida h3 { font-family: inherit; }
.vk-sida [hidden] { display: none !important; }
/* Mobil: stämpeln lägger sig under ingressen i stället för över dess sista rad. */
@media (max-width: 639px) {
  .vk-sida .rb2-topp { padding-bottom: 64px; }
  .vk-sida .rb2-stamp { bottom: -6px; }
}

/* ---------- Blandaren: startsidans svarta band, med hela rutinen ---------- */
.bl {
  margin: 56px calc(-1 * var(--g)) 0;
  padding: 64px var(--g) 76px;
  background: #121514;
  color: #f3f4f2;
}
.bl > * { max-width: 1200px; margin-inline: auto; }
.bl h2 { font-size: clamp(34px, 3.6vw, 58px); font-weight: 700; letter-spacing: -0.045em; margin-bottom: 24px; }
/* Fler ord än startsidans sex, så meningen går ett snäpp mindre. */
.bl-rad { font-size: clamp(23px, 2.3vw, 38px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.4; }
.bl-tom { margin-top: 36px; font-size: 17px; color: #a9aeab; }
.bl-svar { margin-top: 8px; }
.bl-kort {
  display: grid;
  gap: 14px;
  margin-top: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.bl-dygn {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.bl-grupp {
  border-radius: var(--r-card);
  padding: 24px;
  color: var(--ink);
  background: var(--card);
  --muted: color-mix(in srgb, var(--ink) 72%, var(--card));
}
.bl-krock { --card: var(--c-rose); }
.bl-ihop { --card: var(--c-butter); }
.bl-am { --card: var(--c-peach); }
.bl-pm { --card: var(--c-lilac); }
.bl-both { --card: var(--c-sky); }
.bl-grupp h3 { display: flex; align-items: center; gap: 9px; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.bl-grupp h3 i { font-size: 26px; }
.bl-grupp ul { margin-top: 12px; }
.bl-grupp li { display: grid; gap: 4px; padding: 12px 0; border-top: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.bl-grupp li b { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
.bl-grupp li span { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 60ch; }
.bl-grupp li a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 4px; }
.bl-grupp li a:hover { text-decoration-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .bl-grupp:not([hidden]) { animation: vk-in 0.5s var(--ease); }
  @keyframes vk-in { from { opacity: 0; transform: translateY(10px) rotate(-0.6deg); } to { opacity: 1; transform: none; } }
}

/* Krockarna i klartext: startsidans anslagstavla. */
.vk-klartext { max-width: 1200px; margin: 80px auto 0; }
.vk-klartext h2 { font-size: clamp(30px, 3vw, 48px); font-weight: 700; letter-spacing: -0.045em; }
.vk-klartext .lapp-txt { font-size: 19px; }
.vk-svar { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
/* På pastellappen räcker inte --muted (kontrast 4,3–4,4); bläcket genomskinligt
   ger samma gråton på varje pastell, över gränsen 4,5 (2026-10-13). */
.lapp .vk-svar { color: color-mix(in srgb, var(--ink) 74%, transparent); }
/* Vidare-bandet utan lapp: texten får hela bredden. */
@media (min-width: 900px) { .vk-band-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hitta rätt: meningen ---------- */
/* Rutinbyggarens mening och rubrik (.rb2-mening, .rb2-dinrubrik) på en vit panel;
   resultatet är startsidans hylla (Produktvagg). */
.hr.rb2 { --card: var(--surface); margin-top: 8px; }
.hr-res { margin-top: 4px; }
.hr-lage .shelf, .hr-lage .ing-fler { margin-top: 22px; }
.hr-lage .shelf > a { color: var(--ink); }
.hr-alla { margin-top: 20px; font-size: 16px; }
.hr-rutin { margin-top: 30px; padding-top: 24px; border-top: 1.5px solid color-mix(in srgb, var(--ink) 12%, transparent); font-size: clamp(19px, 1.8vw, 26px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; }
.hr-rutin a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--buy);
  text-underline-offset: 0.16em;
  border-radius: 0.16em;
  transition: background-color 0.3s var(--ease);
}
.hr-rutin a:hover { background: var(--buy); }
@media (prefers-reduced-motion: no-preference) {
  .hr-lage { animation: vk-in 0.45s var(--ease); }
}

/* ---------- Alla produkter: filterknapparna och rutnätet ---------- */
.vk-alla { max-width: 1200px; margin: 88px auto 0; }
.vk-filter { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 10px; }
.vk-fgrupp:first-child { flex-basis: 100%; }
.vk-flab { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.vk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vk-chip {
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: pointer;
  transition: box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.vk-chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.vk-chip.is-on { background: var(--ink); color: var(--sel-fg); box-shadow: none; }
.vk-n { margin-left: 2px; font-size: 12.5px; opacity: 0.6; }
.vk-select { max-width: 100%; padding-right: 12px; }
.vk-antal { margin-top: 28px; font-size: 15px; color: var(--muted); }
.vk-antal b { color: var(--ink); font-weight: 700; }
.vk-sida .ing-fler > a { color: var(--ink); }
.df-brand { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vk-mer { margin-top: 28px; text-align: center; }
.vk-tom { padding: 48px 0; text-align: center; font-size: 17px; color: var(--muted); }


/* ===== src/styles/sidor-2026.css ===== */
/* Sidorna utanför artiklarna i omdesignen (2026-10-12): kategori, bloggens
   listsida, topplistorna och textsidorna. De byggs av startsidans, artikelmallens och
   ingredienssidans delar (omslaget .sida26 delar ingredienssidans regler) — den här
   filen bär BARA det som de sidorna har och delarna saknar. Tokens ur startsida-2026.css. */

/* ---------- Bloggens listsida och kategorisidorna ---------- */
/* Filterraden: hoppradens form, den aktiva kategorin svart. */
.sid-filter { margin: 22px 0 0; }
.sid-filter a[aria-current="page"] { background: var(--ink); color: var(--sel-fg); }
.sid-lista { padding-top: clamp(28px, 4vw, 48px); }
.sid-lista > .sid-forst { margin-bottom: 14px; }
.sid-guider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}
.sid-guider .ingx-namn { font-size: 21px; }
.sid-kick,
.ing-guide__kick { font-size: 13px; color: var(--muted); }
.sid-kick b,
.ing-guide__kick b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.ingx-kort:hover .go-dot span { transform: rotate(-45deg); }

/* Kategorins ingress: de längre styckena under beskrivningen, dämpade. */
.sid-intro { max-width: 62ch; margin-top: 14px; display: grid; gap: 10px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.sid-intro p { margin: 0; }

/* "Hitta rätt": problemet ovanför, målet i fet stil med pilen. */
.sid-hitta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sid-hitta a {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 18px 20px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.35s var(--ease);
}
.sid-hitta a:hover { box-shadow: var(--shadow); }
.sid-hitta__problem { font-size: 14px; color: var(--muted); }
.sid-hitta__mal { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.sid-hitta__mal .go-dot { flex-shrink: 0; transform: scale(0.8); }
.sid-hitta a:hover .go-dot span { transform: rotate(-45deg); }

/* ---------- Topplistorna (omdesign/Topplista) ---------- */
.sid-jmf-dek { margin: -4px 0 18px; padding: 0; }
.sid-jmf-dek p { max-width: 62ch; margin: 0; color: var(--muted); }
.atb-band__guide { margin: 14px 0 0; }

/* ---------- Textsidorna (TextPage) och 404 ---------- */
.sid-textsida { margin-top: clamp(28px, 4vw, 48px); }
.sid-textsida .art-text { margin-top: 0; }
.sid-404 { margin: 0 0 6px; font-size: clamp(64px, 10vw, 120px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: var(--muted); }
.sid-sok { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* ---------- /lankar/: länk-i-bio, en smal kolumn ---------- */
.art.sida26 > main.sid-lankar { width: min(100% - 32px, 620px); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 64px; }
.sid-lankar__topp { display: grid; justify-items: center; text-align: center; }
.sid-lankar__topp .atb-hero__lede { margin-inline: auto; }
.sid-lankar__fasta { display: grid; gap: 10px; margin-top: 28px; }
.sid-lankar__fasta a {
  display: block;
  padding: 16px 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--sel-fg);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.sid-lankar__fasta a:first-child { background: var(--buy); color: var(--buy-ink); }
.sid-lankar__h { margin: 44px 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sid-lankar__lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sid-lankar__lista a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.sid-lankar__lista .tile { flex: none; width: 60px; border-radius: 14px; }
.sid-lankar__lista .tile--tom { aspect-ratio: 1; background: var(--soft); }
.sid-lankar__text { display: grid; gap: 3px; min-width: 0; }
.sid-lankar__kat { font-size: 12px; color: var(--muted); }
.sid-lankar__titel { font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.sid-lankar__pil { margin-left: auto; padding-left: 6px; color: var(--muted); transition: transform 0.25s var(--ease); }
.sid-lankar__lista a:hover .sid-lankar__pil { transform: translateX(3px); color: var(--ink); }
.sid-lankar__fot { margin-top: 40px; text-align: center; font-size: 13px; color: var(--muted); }

/* Upptakten: ingressen stort till vänster, snabbsvaret i frågerutan till höger. */
.sid-start { display: grid; gap: 14px; padding-top: 8px; }
.sid-start__ingress p { margin: 0; max-width: 34ch; font-size: clamp(22px, 2.3vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.25; }
.sid-start__ingress strong { font-weight: inherit; }
.sid-start__svar .atb-fraga__a { font-size: 17px; }
@media (min-width: 900px) {
  .sid-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
}

/* Behovskartan: ett pastellkort per förstaval, hoppar ner till produktbandet. */
.sid-karta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 28px;
}
@media (min-width: 640px) { .sid-karta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sid-karta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sid-karta__kort {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.3s var(--ease);
}
.sid-karta__kort:hover { transform: translateY(-2px); }
.sid-karta__kort .tile { flex: none; width: 64px; border-radius: 16px; }
.sid-karta__text { display: grid; gap: 3px; min-width: 0; }
.sid-karta__cat { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.sid-karta__spec { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.sid-karta__pil { margin-left: auto; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 700; transition: transform 0.3s var(--ease); }
.sid-karta__kort:hover .sid-karta__pil { transform: translateY(2px); }

/* Noten under kartan: liten och dämpad. */
.sid-not { padding-top: 18px; padding-bottom: clamp(36px, 5vw, 64px); }
.sid-not p { max-width: 70ch; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.sid-not a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--buy); text-decoration-thickness: 2px; text-underline-offset: 3px; }