/* =============================================================================
   friluftslivet.nu — Innehållskomponenter (utvecklings-fas 1, batch 2)
   Block och element som artikel-, recensions- och ledssidor byggs av.

   Bygger ENBART på tokens i fl-tokens.css. Ingen hårdkodad färg eller luft
   (alfa-toner härleds ur råfärgernas RGB där genomskinlighet behövs).
   Allt namespace:at .fl-* så det lyfts rakt in i blocktemat.

   Innehåll:
     1. Brödtextflöde ............ .fl-prose
     2. Faktarutor / callouts .... .fl-ruta
     3. Bildblock ................ .fl-figur, .fl-bildrutnat, .fl-platshallare
     4. Produktkort ............. .fl-produkt (+ list-rad-variant)
     5. Betyg ................... .fl-betyg, .fl-stjarnor, .fl-utmarkelse
     6. För & emot .............. .fl-foremot
     7. Jämförelsetabell ........ .fl-tabell
     8. Byline / E-E-A-T ........ .fl-byline
     9. Artikel-/pelarkort ...... .fl-kort
    10. Brödsmulor & taggar ..... .fl-bread, .fl-tagg, .fl-taggar
   ========================================================================== */


/* =============================================================================
   1. BRÖDTEXTFLÖDE — .fl-prose
   Vertikal rytm för artikelinnehåll. Optimal radlängd (--fl-bredd-text).
   Block som ska gå utanför textspalten (figurer, rutor, tabeller) sätter
   själva sin maxbredd och kan brytas ut.
   ========================================================================== */
.fl-prose {
  max-width: var(--fl-bredd-text);
  font-family: var(--fl-font-brod);
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-brod);
  color: var(--fl-text);
}

/* Rubrikrytm — generös luft ovanför, stramare under */
.fl-prose h2 {
  font-size: var(--fl-text-2xl);
  margin-top: var(--fl-luft-8);
  margin-bottom: var(--fl-luft-4);
}
.fl-prose h3 {
  font-size: var(--fl-text-xl);
  margin-top: var(--fl-luft-7);
  margin-bottom: var(--fl-luft-3);
}
.fl-prose h4 {
  font-size: var(--fl-text-lg);
  margin-top: var(--fl-luft-6);
  margin-bottom: var(--fl-luft-3);
}
.fl-prose > :first-child { margin-top: 0; }

.fl-prose p {
  margin: 0 0 var(--fl-luft-5);
  max-width: var(--fl-bredd-text);
}

/* Ingress / lead — större, lugnare, sätter tonen */
.fl-prose__lead,
.fl-prose .fl-lead {
  font-size: var(--fl-text-md);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
  margin-bottom: var(--fl-luft-6);
}

/* Länkar i brödtext — blå (sjöblå-token) */
.fl-prose a {
  color: var(--fl-lank);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--fl-tid-snabb) var(--fl-ease);
}
.fl-prose a:hover { color: var(--fl-lank-hover); }
/* Knappar i prosa ska bära KNAPPENS textfärg, inte länkfärgen (annars blå text på orange knapp).
   Ligger här (globalt laddad) så det gäller alla sidtyper, inte bara de kommersiella. */
.fl-prose a.fl-knapp,
.fl-prose a.fl-knapp:hover { color: var(--_fg); text-decoration: none; }
.fl-prose a.fl-knapp--pa-morkt,
.fl-prose a.fl-knapp--pa-morkt:hover { color: var(--fl-sno); }

.fl-prose strong, .fl-prose b { font-weight: var(--fl-vikt-fet); }
.fl-prose em, .fl-prose i { font-style: italic; }

/* Listor */
.fl-prose ul,
.fl-prose ol {
  max-width: var(--fl-bredd-text);
  margin: 0 0 var(--fl-luft-5);
  padding-left: var(--fl-luft-5);
}
.fl-prose li { margin-bottom: var(--fl-luft-2); }
.fl-prose li::marker { color: var(--fl-accent); }
.fl-prose ul ul, .fl-prose ol ol,
.fl-prose ul ol, .fl-prose ol ul { margin: var(--fl-luft-2) 0 0; }

/* Blockcitat / citat */
.fl-prose blockquote,
.fl-citat {
  max-width: var(--fl-bredd-text);
  margin: var(--fl-luft-6) 0;
  padding: var(--fl-luft-2) 0 var(--fl-luft-2) var(--fl-luft-5);
  border-left: 4px solid var(--fl-accent);
  font-size: var(--fl-text-md);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
  font-style: italic;
}
.fl-prose blockquote p:last-child,
.fl-citat p:last-child { margin-bottom: 0; }
.fl-citat__kalla,
.fl-prose blockquote cite {
  display: block;
  margin-top: var(--fl-luft-3);
  font-style: normal;
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text-svag);
}

/* Avskiljare */
.fl-prose hr,
.fl-hr {
  max-width: var(--fl-bredd-text);
  border: 0;
  height: 1px;
  background: var(--fl-linje);
  margin: var(--fl-luft-7) 0;
}

/* Tabeller i brödtext */
.fl-prose table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--fl-luft-6) 0;
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
  overflow: hidden;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  line-height: var(--fl-lh-normal);
}
.fl-prose th,
.fl-prose td {
  padding: var(--fl-luft-3) var(--fl-luft-4);
  text-align: left;
  border-bottom: 1px solid var(--fl-linje);
  vertical-align: top;
}
.fl-prose thead th {
  background: var(--fl-bg-mjuk);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
  border-bottom: 2px solid var(--fl-linje-stark);
  white-space: nowrap;
}
.fl-prose tbody tr:last-child td { border-bottom: 0; }
.fl-prose tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.025); }
/* Numeriska kolumner (allt utom första) högerställs och tabulerar jämnt */
.fl-prose thead th:not(:first-child),
.fl-prose tbody td:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fl-prose td:first-child { font-weight: var(--fl-vikt-fet); color: var(--fl-text); }

/* Figur i textflöde (bryter ut till hela prose-bredden) */
.fl-prose figure { margin: var(--fl-luft-6) 0; }


/* =============================================================================
   2. FAKTARUTOR / CALLOUTS — .fl-ruta
   Tre varianter via modifierare. Vänster kantmarkör i tonens färg + ikon.
   Bakgrunden är en mycket svag ton (alfa ur råfärgen) så den fungerar i
   både ljust och mörkt läge utan att skrika.
   ========================================================================== */
.fl-ruta {
  --_ton: var(--fl-bla);          /* default = info */
  --_ton-bg: rgba(31, 95, 176, 0.08);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fl-luft-3) var(--fl-luft-4);
  max-width: var(--fl-bredd-text);
  margin: var(--fl-luft-6) 0;
  padding: var(--fl-luft-5);
  background: var(--_ton-bg);
  border: 1px solid var(--fl-linje);
  border-left: 4px solid var(--_ton);
  border-radius: var(--fl-radie-md);
}
.fl-ruta__ikon {
  grid-row: 1 / span 2;
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--_ton);
  margin-top: 2px;
}
.fl-ruta__ikon svg { width: 100%; height: 100%; display: block; }
.fl-ruta__rubrik {
  margin: 0;
  align-self: center;
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-md);
  font-weight: var(--fl-vikt-fet);
  line-height: var(--fl-lh-tat);
  color: var(--fl-text);
}
.fl-ruta__text {
  grid-column: 2;
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-brod);
  color: var(--fl-text-mjuk);
}
.fl-ruta__text > :last-child { margin-bottom: 0; }
.fl-ruta__text a { color: var(--fl-lank); }

/* Variant: Tips (grön/natur) */
.fl-ruta--tips {
  --_ton: var(--fl-trygg);
  --_ton-bg: rgba(63, 143, 106, 0.10);
}
/* Variant: Säkerhet / obs (akta-gul) */
.fl-ruta--akta {
  --_ton: var(--fl-akta);
  --_ton-bg: rgba(217, 154, 43, 0.12);
}
/* Variant: Varning / fara (röd) — för väder, kyla, vatten, risk */
.fl-ruta--fara {
  --_ton: var(--fl-fara);
  --_ton-bg: rgba(200, 71, 47, 0.10);
}

/* I mörkt läge: lyft tonbakgrunden en aning så den syns mot natt */
[data-fl-tema="morkt"] .fl-ruta { --_ton-bg: rgba(127, 180, 255, 0.10); }
[data-fl-tema="morkt"] .fl-ruta--tips { --_ton-bg: rgba(111, 147, 82, 0.16); }
[data-fl-tema="morkt"] .fl-ruta--akta { --_ton-bg: rgba(247, 177, 62, 0.14); }
[data-fl-tema="morkt"] .fl-ruta--fara { --_ton-bg: rgba(232, 112, 42, 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-fl-tema="ljust"]) .fl-ruta { --_ton-bg: rgba(127, 180, 255, 0.10); }
  :root:not([data-fl-tema="ljust"]) .fl-ruta--tips { --_ton-bg: rgba(111, 147, 82, 0.16); }
  :root:not([data-fl-tema="ljust"]) .fl-ruta--akta { --_ton-bg: rgba(247, 177, 62, 0.14); }
  :root:not([data-fl-tema="ljust"]) .fl-ruta--fara { --_ton-bg: rgba(232, 112, 42, 0.14); }
}


/* =============================================================================
   3. BILDBLOCK — .fl-figur, .fl-bildrutnat
   Platshållarbild via .fl-platshallare (CSS, ratio). Byts mot riktig <img>
   med srcset i temat. Bildtext (figcaption) i svag, liten text.
   ========================================================================== */
.fl-figur {
  margin: var(--fl-luft-6) 0;
}
.fl-figur img,
.fl-figur .fl-platshallare {
  display: block;
  width: 100%;
  border-radius: var(--fl-radie-md);
}
.fl-figur figcaption,
.fl-bildtext {
  margin-top: var(--fl-luft-3);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-svag);
}
.fl-figur figcaption b,
.fl-bildtext b { color: var(--fl-text-mjuk); font-weight: var(--fl-vikt-fet); }

/* Full-bredd (bryter ut ur textspalten) */
.fl-figur--full { max-width: none; }

/* Två-upp-rutnät */
.fl-bildrutnat {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fl-luft-4);
  margin: var(--fl-luft-6) 0;
}
.fl-bildrutnat .fl-figur { margin: 0; }
@media (max-width: 560px) {
  .fl-bildrutnat { grid-template-columns: 1fr; }
}

/* Platshållare — neutral skymningston med diskret fjäll-motiv så det inte
   ser tomt ut i demon. Aspekt via inline --ratio eller modifierare. */
.fl-platshallare {
  position: relative;
  aspect-ratio: var(--ratio, 16 / 9);
  background:
    radial-gradient(120% 120% at 70% 18%, rgba(255, 206, 107, 0.18), transparent 46%),
    linear-gradient(160deg, var(--fl-indigo-2), var(--fl-skymning) 70%);
  border-radius: var(--fl-radie-md);
  overflow: hidden;
  color: var(--fl-dis);
}
.fl-platshallare::after {
  /* enkel fjällsiluett i botten */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: var(--fl-fjall-djup);
  clip-path: polygon(0 100%, 0 58%, 16% 30%, 30% 56%, 46% 18%, 62% 52%, 78% 26%, 92% 54%, 100% 38%, 100% 100%);
  opacity: 0.85;
}
.fl-platshallare[data-etikett]::before {
  content: attr(data-etikett);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: rgba(199, 210, 234, 0.7);
}
.fl-platshallare--kvadrat { --ratio: 1 / 1; }
.fl-platshallare--portratt { --ratio: 3 / 4; }
.fl-platshallare--bred { --ratio: 21 / 9; }


/* =============================================================================
   5. BETYG — .fl-betyg (poäng-chip), .fl-stjarnor, .fl-utmarkelse
   Placeras före produktkort så de kan refereras därifrån.
   ========================================================================== */
.fl-betyg {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15em;
  padding: 0.35em 0.7em;
  background: var(--fl-trad);
  color: var(--fl-sno);
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  line-height: 1;
}
.fl-betyg__poang { font-size: var(--fl-text-md); }
.fl-betyg__max {
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
  opacity: 0.75;
}
/* Färgkodning efter nivå (ej enda indikator: siffran står alltid kvar) */
.fl-betyg--hog  { background: var(--fl-trad); }
.fl-betyg--mellan { background: var(--fl-akta); color: #2a1c02; }
.fl-betyg--lag  { background: var(--fl-fara); }

/* Stjärnbetyg — fyllnadsgrad via --andel (0–1) på .fl-stjarnor */
.fl-stjarnor {
  --andel: 1;
  display: inline-block;
  position: relative;
  font-size: var(--fl-text-md);
  line-height: 1;
  letter-spacing: 0.1em;
  font-family: var(--fl-font-ui);
}
.fl-stjarnor::before {
  content: "★★★★★";
  color: var(--fl-linje-stark);
}
.fl-stjarnor__fyll {
  position: absolute;
  inset: 0;
  width: calc(var(--andel) * 100%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--fl-barnsten);
}
.fl-stjarnor__fyll::before { content: "★★★★★"; }
.fl-stjarnor__text {
  margin-left: var(--fl-luft-2);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag);
  letter-spacing: normal;
}

/* "Bäst i test"-utmärkelse */
.fl-utmarkelse {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  padding: 0.35em 0.8em;
  background: linear-gradient(120deg, var(--fl-eld), var(--fl-barnsten));
  color: #2a1402;
  border-radius: var(--fl-radie-pill);
  box-shadow: var(--fl-skugga-glod);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  line-height: 1;
}
.fl-utmarkelse svg { width: 14px; height: 14px; flex: none; }
/* Dämpad variant ("Prisvärt", "Lättast") */
.fl-utmarkelse--linje {
  background: transparent;
  color: var(--fl-kicker-farg);
  border: 1px solid var(--fl-accent);
  box-shadow: none;
}
[data-fl-tema="morkt"] .fl-utmarkelse--linje { color: var(--fl-barnsten); }


/* =============================================================================
   4. PRODUKTKORT — .fl-produkt (kort) + .fl-produkt--rad (list-rad)
   För utrustning / affiliate. Thumbnail, kicker, titel, betyg, nyckelspecs,
   pris-hint, primär CTA.
   ========================================================================== */
.fl-produkt {
  display: flex;
  flex-direction: column;
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
  overflow: hidden;
  transition: border-color var(--fl-tid) var(--fl-ease),
              box-shadow var(--fl-tid) var(--fl-ease),
              transform var(--fl-tid) var(--fl-ease);
}
.fl-produkt:hover {
  border-color: var(--fl-linje-stark);
  box-shadow: var(--fl-skugga-2);
  transform: translateY(-2px);
}
.fl-produkt__media {
  position: relative;
  background: var(--fl-bg-mjuk);
}
.fl-produkt__media .fl-platshallare { border-radius: 0; }
/* Utmärkelse fäst i hörn på bilden */
.fl-produkt__flagga {
  position: absolute;
  top: var(--fl-luft-3);
  left: var(--fl-luft-3);
  z-index: 1;
}
.fl-produkt__kropp {
  display: flex;
  flex-direction: column;
  gap: var(--fl-luft-3);
  padding: var(--fl-luft-5);
  flex: 1;
}
.fl-produkt__titel {
  margin: 0;
  font-size: var(--fl-text-lg);
  line-height: var(--fl-lh-tat);
}
.fl-produkt__titel a { color: var(--fl-text); text-decoration: none; }
.fl-produkt__titel a:hover { color: var(--fl-accent-hover); }
.fl-produkt__betygsrad { display: flex; align-items: center; gap: var(--fl-luft-3); flex-wrap: wrap; }

/* Nyckelspecar — definitionslista, kompakt */
.fl-produkt__specs {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fl-luft-1) var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
}
.fl-produkt__specs dt { color: var(--fl-text-svag); }
.fl-produkt__specs dd { margin: 0; color: var(--fl-text); font-weight: var(--fl-vikt-medium); }

/* Fot: pris-hint + CTA, knuffas till botten */
.fl-produkt__fot {
  margin-top: auto;
  padding-top: var(--fl-luft-4);
  border-top: 1px solid var(--fl-linje);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-luft-4);
  flex-wrap: wrap;
}
.fl-produkt__pris { display: flex; flex-direction: column; line-height: 1.2; }
.fl-produkt__pris-etikett {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: var(--fl-text-svag);
}
.fl-produkt__pris-tal {
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-md);
  color: var(--fl-text);
}
.fl-produkt .fl-knapp { padding-block: 0.55em; }

/* --- LIST-RAD-VARIANT — horisontell, för täta listningar / topplistor --- */
.fl-produkt--rad {
  flex-direction: row;
  align-items: stretch;
}
.fl-produkt--rad .fl-produkt__media {
  flex: none;
  width: 200px;
  display: flex;
}
.fl-produkt--rad .fl-produkt__media .fl-platshallare {
  --ratio: 1 / 1;
  width: 100%;
  height: 100%;
}
.fl-produkt--rad .fl-produkt__kropp { padding: var(--fl-luft-5) var(--fl-luft-6); }
/* Rang-siffra (topplista) */
.fl-produkt__rang {
  position: absolute;
  top: var(--fl-luft-3);
  left: var(--fl-luft-3);
  z-index: 1;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--fl-skymning);
  color: var(--fl-glod);
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-base);
}
@media (max-width: 600px) {
  .fl-produkt--rad { flex-direction: column; }
  .fl-produkt--rad .fl-produkt__media { width: 100%; }
  .fl-produkt--rad .fl-produkt__media .fl-platshallare { --ratio: 16 / 9; }
}


/* =============================================================================
   6. FÖR & EMOT — .fl-foremot
   Två kolumner: plus (grön) och minus (röd). Ikon som inte är enda indikator
   (rubrik + färg + position bär informationen).
   ========================================================================== */
.fl-foremot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fl-luft-4);
  max-width: var(--fl-bredd-text);
  margin: var(--fl-luft-6) 0;
}
.fl-foremot__kol {
  padding: var(--fl-luft-5);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
}
.fl-foremot__kol--plus {
  background: rgba(63, 143, 106, 0.07);
  border-color: rgba(63, 143, 106, 0.35);
}
.fl-foremot__kol--minus {
  background: rgba(200, 71, 47, 0.06);
  border-color: rgba(200, 71, 47, 0.30);
}
.fl-foremot__rubrik {
  display: flex;
  align-items: center;
  gap: var(--fl-luft-2);
  margin: 0 0 var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
}
.fl-foremot__kol--plus .fl-foremot__rubrik { color: var(--fl-trygg); }
.fl-foremot__kol--minus .fl-foremot__rubrik { color: var(--fl-fara); }
.fl-foremot__rubrik svg { width: 18px; height: 18px; }
.fl-foremot ul { list-style: none; margin: 0; padding: 0; }
.fl-foremot li {
  position: relative;
  padding-left: var(--fl-luft-5);
  margin-bottom: var(--fl-luft-3);
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text);
}
.fl-foremot li:last-child { margin-bottom: 0; }
.fl-foremot li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: var(--fl-vikt-svart);
}
.fl-foremot__kol--plus li::before { content: "+"; color: var(--fl-trygg); }
.fl-foremot__kol--minus li::before { content: "\2212"; color: var(--fl-fara); } /* minustecken */

[data-fl-tema="morkt"] .fl-foremot__kol--plus { background: rgba(111, 147, 82, 0.14); }
[data-fl-tema="morkt"] .fl-foremot__kol--minus { background: rgba(232, 112, 42, 0.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-fl-tema="ljust"]) .fl-foremot__kol--plus { background: rgba(111, 147, 82, 0.14); }
  :root:not([data-fl-tema="ljust"]) .fl-foremot__kol--minus { background: rgba(232, 112, 42, 0.12); }
}
@media (max-width: 560px) {
  .fl-foremot { grid-template-columns: 1fr; }
}


/* =============================================================================
   7. JÄMFÖRELSETABELL — .fl-tabell
   Responsiv spec-jämförelse. På smal skärm scrollar tabellen horisontellt
   inuti sin wrapper med första kolumnen "sticky" som radetikett.
   ========================================================================== */
.fl-tabell-wrap {
  margin: var(--fl-luft-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
}
.fl-tabell {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  min-width: 560px;
}
.fl-tabell caption {
  caption-side: top;
  text-align: left;
  padding: var(--fl-luft-4) var(--fl-luft-5);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag);
}
.fl-tabell th,
.fl-tabell td {
  padding: var(--fl-luft-3) var(--fl-luft-4);
  text-align: left;
  border-bottom: 1px solid var(--fl-linje);
  vertical-align: top;
}
.fl-tabell thead th {
  position: sticky;
  top: 0;
  background: var(--fl-bg-mjuk);
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
  border-bottom: 2px solid var(--fl-linje-stark);
}
/* Radetikett-kolumn (första) — fast, lätt avvikande */
.fl-tabell tbody th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--fl-bg-upphojd);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text-mjuk);
  white-space: nowrap;
}
.fl-tabell tbody tr:hover td,
.fl-tabell tbody tr:hover th[scope="row"] { background: var(--fl-accent-mjuk); }
/* Markera vinnar-kolumn */
.fl-tabell .fl-tabell__bast { background: rgba(63, 143, 106, 0.10); }
.fl-tabell thead th.fl-tabell__bast { background: var(--fl-trad); color: var(--fl-sno); }
[data-fl-tema="morkt"] .fl-tabell .fl-tabell__bast { background: rgba(111, 147, 82, 0.16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-fl-tema="ljust"]) .fl-tabell .fl-tabell__bast { background: rgba(111, 147, 82, 0.16); }
}
/* Ja/nej-celler */
.fl-tabell__ja { color: var(--fl-trygg); font-weight: var(--fl-vikt-fet); }
.fl-tabell__nej { color: var(--fl-text-svag); }


/* =============================================================================
   8. BYLINE / E-E-A-T — .fl-byline
   Författar-avatar, namn, roll, datum, granskningsnotis, transparens.
   ========================================================================== */
.fl-byline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fl-luft-3) var(--fl-luft-4);
  align-items: center;
  max-width: var(--fl-bredd-text);
  margin: var(--fl-luft-6) 0;
  padding: var(--fl-luft-5);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
}
.fl-byline__avatar {
  grid-row: 1 / span 2;
  width: 54px; height: 54px;
  flex: none;
  border-radius: var(--fl-radie-pill);
  background:
    radial-gradient(circle at 50% 35%, var(--fl-barnsten), var(--fl-eld) 60%, var(--fl-glod-djup));
  display: grid;
  place-items: center;
  color: #2a1402;
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-md);
  overflow: hidden;
}
.fl-byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.fl-byline__namn {
  margin: 0;
  align-self: end;
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-md);
  font-weight: var(--fl-vikt-fet);
  line-height: var(--fl-lh-tat);
}
.fl-byline__namn span { color: var(--fl-text-svag); font-weight: var(--fl-vikt-normal); }
.fl-byline__meta {
  grid-column: 2;
  align-self: start;
  margin: 0;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag);
}
.fl-byline__meta time { color: var(--fl-text-mjuk); }
/* Märken: Granskad / Så testar vi — chips i metaraden */
.fl-byline__markning {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-luft-2);
  margin-top: var(--fl-luft-1);
}
.fl-byline__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-1);
  padding: 0.25em 0.65em;
  background: var(--fl-accent-mjuk);
  color: var(--fl-kicker-farg);
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  line-height: 1.4;
}
.fl-byline__chip svg { width: 13px; height: 13px; }
[data-fl-tema="morkt"] .fl-byline__chip { color: var(--fl-barnsten); }
/* Transparensnotis (affiliate / hur vi tjänar pengar) */
.fl-byline__notis {
  grid-column: 1 / -1;
  margin: var(--fl-luft-1) 0 0;
  padding-top: var(--fl-luft-3);
  border-top: 1px solid var(--fl-linje);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-svag);
}
.fl-byline__notis a { color: var(--fl-lank); }
@media (max-width: 480px) {
  .fl-byline { grid-template-columns: auto 1fr; }
}


/* =============================================================================
   9. ARTIKEL-/PELARKORT — .fl-kort
   För listningar, startsida, relaterat. Bild, kicker, titel, utdrag, meta.
   ========================================================================== */
.fl-kort {
  display: flex;
  flex-direction: column;
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
  overflow: hidden;
  height: 100%;
  transition: border-color var(--fl-tid) var(--fl-ease),
              box-shadow var(--fl-tid) var(--fl-ease),
              transform var(--fl-tid) var(--fl-ease);
}
.fl-kort:hover {
  border-color: var(--fl-linje-stark);
  box-shadow: var(--fl-skugga-2);
  transform: translateY(-3px);
}
.fl-kort__media .fl-platshallare { border-radius: 0; }
.fl-kort__kropp {
  display: flex;
  flex-direction: column;
  gap: var(--fl-luft-3);
  padding: var(--fl-luft-5);
  flex: 1;
}
.fl-kort__titel {
  margin: 0;
  font-size: var(--fl-text-lg);
  line-height: var(--fl-lh-tat);
}
/* Dra ihop kicker (kategori/typ) och rubrik i kort */
.fl-kort__kropp .fl-kicker { margin-bottom: calc(var(--fl-luft-2) * -1); }
/* Hela kortet klickbart via "stretched link" på titellänken */
.fl-kort__titel a {
  color: var(--fl-text);
  text-decoration: none;
}
.fl-kort__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fl-kort { position: relative; }
.fl-kort:hover .fl-kort__titel a { color: var(--fl-accent-hover); }
.fl-kort__utdrag {
  margin: 0;
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fl-kort__meta {
  margin-top: auto;
  padding-top: var(--fl-luft-3);
  display: flex;
  align-items: center;
  gap: var(--fl-luft-3);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag);
}
.fl-kort__meta .fl-prick { width: 3px; height: 3px; border-radius: 50%; background: var(--fl-text-svag); flex: none; }

/* Bred variant (utvald artikel): bild vänster, text höger */
.fl-kort--bred { flex-direction: row; }
.fl-kort--bred .fl-kort__media { flex: none; width: 44%; }
.fl-kort--bred .fl-kort__media .fl-platshallare { height: 100%; --ratio: auto; }
.fl-kort--bred .fl-kort__kropp { padding: var(--fl-luft-6); justify-content: center; }
.fl-kort--bred .fl-kort__titel { font-size: var(--fl-text-xl); }
@media (max-width: 640px) {
  .fl-kort--bred { flex-direction: column; }
  .fl-kort--bred .fl-kort__media { width: 100%; }
  .fl-kort--bred .fl-kort__media .fl-platshallare { --ratio: 16 / 9; }
}

/* Rutnät-hjälpklass för listningar (kan användas i demon/temat) */
.fl-kortrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--fl-luft-5);
}


/* =============================================================================
   10. BRÖDSMULOR & TAGGAR — .fl-bread, .fl-tagg
   ========================================================================== */
.fl-bread { margin: 0 0 var(--fl-luft-5); }
.fl-bread__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fl-luft-2);
  margin: 0;
  padding: 0;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
}
.fl-bread__list li { display: flex; align-items: center; gap: var(--fl-luft-2); }
.fl-bread a { color: var(--fl-text-svag); text-decoration: none; }
.fl-bread a:hover { color: var(--fl-lank); text-decoration: underline; }
.fl-bread__avskilj { color: var(--fl-linje-stark); user-select: none; }
.fl-bread [aria-current="page"] { color: var(--fl-text); font-weight: var(--fl-vikt-medium); }

/* Taggar / chips */
.fl-taggar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-luft-2);
  margin: var(--fl-luft-4) 0;
  padding: 0;
  list-style: none;
}
.fl-tagg {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-1);
  min-height: 32px;
  padding: 0.3em 0.85em;
  background: var(--fl-bg-mjuk);
  color: var(--fl-text-mjuk);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
  text-decoration: none;
  transition: border-color var(--fl-tid-snabb) var(--fl-ease),
              background var(--fl-tid-snabb) var(--fl-ease),
              color var(--fl-tid-snabb) var(--fl-ease);
}
a.fl-tagg:hover {
  border-color: var(--fl-accent);
  background: var(--fl-accent-mjuk);
  color: var(--fl-text);
}
/* Aktiv/vald tagg (t.ex. i facettfilter) */
.fl-tagg--aktiv {
  background: var(--fl-accent);
  color: #2a1402;
  border-color: transparent;
}
a.fl-tagg--aktiv:hover { background: var(--fl-accent-hover); color: #2a1402; }
.fl-tagg__antal { color: var(--fl-text-svag); font-weight: var(--fl-vikt-normal); }
.fl-tagg--aktiv .fl-tagg__antal { color: rgba(42, 20, 2, 0.65); }


/* =============================================================================
   =============================================================================
   UTBYGGNAD (batch 3) — fler varianter + nya komponenttyper
   Samma regler: enbart tokens, namespace .fl-*, ljust + mörkt läge, AA-kontrast,
   synliga fokusringar, 44px touch targets, färg aldrig enda indikator.
   =============================================================================

   Innehåll:
    11. Knappvarianter ......... storlek, ghost, fara, ikon-bara, knappgrupp, tillstånd
    12. Faktaruta kompakt ...... .fl-ruta--kompakt
    13. Produktkort: slut ...... .fl-produkt--slut, .fl-lager
    14. Betyg: aggregerat ...... .fl-snittbetyg
    15. Formulärelement ........ .fl-falt, .fl-form, switch, kryss, radio, sök, fel
    16. Filter & facett ........ .fl-facett, .fl-chip, .fl-sortering, .fl-resultat
    17. Flikar ................. .fl-flikar
    18. Dragspel / FAQ ......... .fl-dragspel
    19. Paginering ............. .fl-paginering, .fl-laddafler
    20. Notiser / banners ...... .fl-notis
    21. Led-faktaruta .......... .fl-ledfakta
    22. Nyckeltal / statistik .. .fl-statrad, .fl-stat
    23. Innehållsförteckning ... .fl-toc
    24. Relaterat & CTA-banner . .fl-relaterat, .fl-ctabanner
    25. Avatar / badge / tooltip .fl-avatar, .fl-etikett, .fl-tooltip
    26. Progress / stepper ..... .fl-progress, .fl-stepper
    27. Tomt-tillstånd / skeleton .fl-tom, .fl-skeleton
   ========================================================================== */


/* =============================================================================
   11. KNAPPVARIANTER — bygger på .fl-knapp i fl-tokens.css
   ========================================================================== */

/* --- Ghost: ingen ram, ingen yta förrän hover (tertiär åtgärd) --- */
.fl-knapp--ghost {
  --_bg: transparent;
  --_fg: var(--fl-text);
  border-color: transparent;
}
.fl-knapp--ghost:hover {
  background: var(--fl-accent-mjuk);
  color: var(--fl-text);
  box-shadow: none;
}

/* --- Fara: destruktiv åtgärd (ta bort, avbryt) --- */
.fl-knapp--fara {
  --_bg: var(--fl-fara);
  --_fg: #fff;
}
.fl-knapp--fara:hover { background: #a93722; box-shadow: 0 6px 18px rgba(200, 71, 47, 0.32); }

/* --- Storlekar --- */
.fl-knapp--sm {
  min-height: 36px;
  padding: 0.45em 1em;
  font-size: var(--fl-text-sm);
}
.fl-knapp--lg {
  min-height: 52px;
  padding: 0.85em 1.8em;
  font-size: var(--fl-text-md);
}

/* --- Ikon i knapp --- */
.fl-knapp svg { width: 1.15em; height: 1.15em; flex: none; }

/* --- Ikon-bara-knapp (alltid kvadratisk, kräver aria-label) --- */
.fl-knapp--ikon {
  padding: 0;
  width: 44px;
  min-width: 44px;
}
.fl-knapp--ikon.fl-knapp--sm { width: 36px; min-width: 36px; }
.fl-knapp--ikon.fl-knapp--lg { width: 52px; min-width: 52px; }
.fl-knapp--ikon svg { width: 1.3em; height: 1.3em; }

/* --- Inaktiverad (gäller även <a aria-disabled>) --- */
.fl-knapp:disabled,
.fl-knapp[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* --- Knappgrupp: segmenterad kontroll (t.ex. vy-växling, sortering) --- */
.fl-knappgrupp {
  display: inline-flex;
  border: 1px solid var(--fl-linje-stark);
  border-radius: var(--fl-radie-pill);
  background: var(--fl-bg-upphojd);
  padding: 3px;
  gap: 2px;
}
.fl-knappgrupp__knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-luft-2);
  min-height: 38px;
  padding: 0 var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text-mjuk);
  background: transparent;
  border: 0;
  border-radius: var(--fl-radie-pill);
  cursor: pointer;
  transition: background var(--fl-tid-snabb) var(--fl-ease), color var(--fl-tid-snabb) var(--fl-ease);
}
.fl-knappgrupp__knapp svg { width: 1.1em; height: 1.1em; }
.fl-knappgrupp__knapp:hover { color: var(--fl-text); }
.fl-knappgrupp__knapp[aria-pressed="true"],
.fl-knappgrupp__knapp.fl-ar-vald {
  background: var(--fl-accent);
  color: #2a1402;
}


/* =============================================================================
   12. FAKTARUTA KOMPAKT — .fl-ruta--kompakt (en rad, mindre luft)
   ========================================================================== */
.fl-ruta--kompakt {
  gap: var(--fl-luft-3);
  padding: var(--fl-luft-3) var(--fl-luft-4);
  grid-template-columns: auto 1fr;
  align-items: center;
}
.fl-ruta--kompakt .fl-ruta__ikon { grid-row: auto; width: 22px; height: 22px; margin-top: 0; }
.fl-ruta--kompakt .fl-ruta__text { grid-column: auto; font-size: var(--fl-text-sm); }


/* =============================================================================
   13. PRODUKTKORT: SLUT-I-LAGER + lagerstatus-rad
   ========================================================================== */
.fl-produkt--slut { opacity: 0.92; }
.fl-produkt--slut .fl-produkt__media { position: relative; }
.fl-produkt--slut .fl-produkt__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 20, 0.45);
  z-index: 1;
}
.fl-produkt__slutflagga {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--fl-luft-2) var(--fl-luft-4);
  background: var(--fl-skymning);
  color: var(--fl-dis-ljus);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  text-align: center;
}

/* Lagerstatus-etikett (punkt + text, färg aldrig enda indikator) */
.fl-lager {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
  color: var(--fl-text-mjuk);
}
.fl-lager::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--fl-trygg);
  flex: none;
}
.fl-lager--fa::before { background: var(--fl-akta); }
.fl-lager--slut { color: var(--fl-text-svag); }
.fl-lager--slut::before { background: var(--fl-fara); }


/* =============================================================================
   14. BETYG: AGGREGERAT SNITTBETYG (stor siffra + delbetyg)
   ========================================================================== */
.fl-snittbetyg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--fl-luft-4) var(--fl-luft-6);
  align-items: center;
  max-width: var(--fl-bredd-text);
  margin: var(--fl-luft-6) 0;
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
}
.fl-snittbetyg__tal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fl-luft-2);
  text-align: center;
}
.fl-snittbetyg__siffra {
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-3xl);
  line-height: 1;
  color: var(--fl-text);
}
.fl-snittbetyg__av { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.fl-snittbetyg__delar { display: grid; gap: var(--fl-luft-3); }
.fl-snittbetyg__del { display: grid; grid-template-columns: 12ch 1fr auto; gap: var(--fl-luft-4); align-items: center; }
.fl-snittbetyg__etikett { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }
.fl-snittbetyg__bar {
  height: 8px;
  border-radius: var(--fl-radie-pill);
  background: var(--fl-linje);
  overflow: hidden;
}
.fl-snittbetyg__bar > span {
  display: block;
  height: 100%;
  width: var(--andel, 50%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fl-eld), var(--fl-barnsten));
}
.fl-snittbetyg__poang { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); font-size: var(--fl-text-base); color: var(--fl-text); min-width: 3ch; text-align: right; }
@media (max-width: 560px) {
  .fl-snittbetyg { grid-template-columns: 1fr; }
  .fl-snittbetyg__del { grid-template-columns: 9ch 1fr auto; }
}


/* =============================================================================
   15. FORMULÄRELEMENT — .fl-form, .fl-falt och kontroller
   ========================================================================== */
.fl-form { max-width: var(--fl-bredd-text); }
.fl-falt { margin-bottom: var(--fl-luft-5); }
.fl-falt__label {
  display: block;
  margin-bottom: var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
}
.fl-falt__krav { color: var(--fl-fara); }
.fl-falt__hjalp {
  margin: var(--fl-luft-2) 0 0;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-svag);
}

/* Textfält / textarea / select — delad bas */
.fl-input,
.fl-textarea,
.fl-select {
  width: 100%;
  min-height: 44px;
  padding: 0.6em 0.85em;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  line-height: 1.4;
  color: var(--fl-text);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje-stark);
  border-radius: var(--fl-radie);
  transition: border-color var(--fl-tid-snabb) var(--fl-ease), box-shadow var(--fl-tid-snabb) var(--fl-ease);
  -webkit-appearance: none;
  appearance: none;
}
.fl-input::placeholder,
.fl-textarea::placeholder { color: var(--fl-text-svag); }
.fl-input:hover,
.fl-textarea:hover,
.fl-select:hover { border-color: var(--fl-text-svag); }
.fl-input:focus,
.fl-textarea:focus,
.fl-select:focus {
  outline: none;
  border-color: var(--fl-fokus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-fokus) 28%, transparent);
}
.fl-textarea { min-height: 120px; resize: vertical; line-height: var(--fl-lh-normal); }

/* Select-pil */
.fl-select-wrap { position: relative; }
.fl-select { padding-right: 2.6em; cursor: pointer; }
.fl-select-wrap::after {
  content: "";
  position: absolute;
  right: 1em; top: 50%;
  width: 9px; height: 9px;
  margin-top: -3px;
  border-right: 2px solid var(--fl-text-mjuk);
  border-bottom: 2px solid var(--fl-text-mjuk);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Feltillstånd (validering) — färg + ikon + text, aldrig bara färg */
.fl-falt--fel .fl-input,
.fl-falt--fel .fl-textarea,
.fl-falt--fel .fl-select { border-color: var(--fl-fara); }
.fl-falt--fel .fl-input:focus,
.fl-falt--fel .fl-textarea:focus,
.fl-falt--fel .fl-select:focus { box-shadow: 0 0 0 3px rgba(200, 71, 47, 0.25); }
.fl-falt__fel {
  display: flex;
  align-items: center;
  gap: var(--fl-luft-2);
  margin: var(--fl-luft-2) 0 0;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
  color: var(--fl-fara);
}
.fl-falt__fel svg { width: 16px; height: 16px; flex: none; }
[data-fl-tema="morkt"] .fl-falt__fel { color: #f08a72; }

/* Lyckat tillstånd */
.fl-falt--ok .fl-input { border-color: var(--fl-trygg); }

/* Sökfält (input med ikon i kanten) */
.fl-sokfalt { position: relative; }
.fl-sokfalt .fl-input { padding-left: 2.7em; }
.fl-sokfalt__ikon {
  position: absolute;
  left: 0.85em; top: 50%;
  width: 20px; height: 20px;
  margin-top: -10px;
  color: var(--fl-text-svag);
  pointer-events: none;
}
.fl-sokfalt__ikon svg { width: 100%; height: 100%; }

/* Kryssruta + radio — egna kontroller, fokusbara, 44px klickyta via label */
.fl-val {
  display: flex;
  align-items: flex-start;
  gap: var(--fl-luft-3);
  min-height: 44px;
  padding: var(--fl-luft-2) 0;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  color: var(--fl-text);
  cursor: pointer;
}
.fl-val input {
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  accent-color: var(--fl-accent);
  cursor: pointer;
}
.fl-val input:focus-visible { outline: 3px solid var(--fl-fokus); outline-offset: 2px; }
.fl-val__text { line-height: 1.45; padding-top: 1px; }
.fl-val__text small { display: block; font-size: var(--fl-text-sm); color: var(--fl-text-svag); }

/* Toggle / switch */
.fl-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-3);
  min-height: 44px;
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  color: var(--fl-text);
  cursor: pointer;
}
.fl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fl-switch__spar {
  position: relative;
  flex: none;
  width: 46px; height: 26px;
  border-radius: var(--fl-radie-pill);
  background: var(--fl-linje-stark);
  transition: background var(--fl-tid) var(--fl-ease);
}
.fl-switch__spar::after {
  content: "";
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--fl-skugga-1);
  transition: transform var(--fl-tid) var(--fl-ease);
}
.fl-switch input:checked + .fl-switch__spar { background: var(--fl-trygg); }
.fl-switch input:checked + .fl-switch__spar::after { transform: translateX(20px); }
.fl-switch input:focus-visible + .fl-switch__spar { outline: 3px solid var(--fl-fokus); outline-offset: 2px; }


/* =============================================================================
   16. FILTER & FACETT-UI — facettsidornas verktygsrad och sidopanel
   ========================================================================== */

/* Verktygsrad: resultaträknare + sortering + vy */
.fl-resultatrad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fl-luft-4);
  margin: var(--fl-luft-5) 0;
  padding-bottom: var(--fl-luft-4);
  border-bottom: 1px solid var(--fl-linje);
}
.fl-resultat {
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  color: var(--fl-text-mjuk);
}
.fl-resultat strong { color: var(--fl-text); font-weight: var(--fl-vikt-fet); }
.fl-verktyg { display: flex; align-items: center; gap: var(--fl-luft-3); flex-wrap: wrap; }
.fl-sortering { display: inline-flex; align-items: center; gap: var(--fl-luft-2); }
.fl-sortering label { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); white-space: nowrap; }
.fl-sortering .fl-select { width: auto; min-height: 40px; padding-block: 0.35em; font-size: var(--fl-text-sm); }

/* Aktiva filterchips (borttagbara) */
.fl-chiprad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fl-luft-2);
  margin: var(--fl-luft-4) 0;
  padding: 0;
  list-style: none;
}
.fl-chiprad__etikett { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); margin-right: var(--fl-luft-1); }
.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  min-height: 36px;
  padding: 0.3em 0.4em 0.3em 0.85em;
  background: var(--fl-accent-mjuk);
  color: var(--fl-kicker-farg);
  border: 1px solid transparent;
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-medium);
}
[data-fl-tema="morkt"] .fl-chip { color: var(--fl-barnsten); }
.fl-chip__x {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex: none;
  transition: background var(--fl-tid-snabb) var(--fl-ease);
}
.fl-chip__x:hover { background: rgba(168, 67, 15, 0.16); }
[data-fl-tema="morkt"] .fl-chip__x:hover { background: rgba(247, 177, 62, 0.18); }
.fl-chip__x svg { width: 13px; height: 13px; }
/* Rensa-alla-länk */
.fl-rensa {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-lank);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.fl-rensa:hover { color: var(--fl-lank-hover); }

/* Facett-sidopanel */
.fl-facett {
  font-family: var(--fl-font-ui);
}
.fl-facett__grupp {
  padding: var(--fl-luft-5) 0;
  border-bottom: 1px solid var(--fl-linje);
}
.fl-facett__grupp:first-child { padding-top: 0; }
.fl-facett__rubrik {
  margin: 0 0 var(--fl-luft-3);
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
}
.fl-facett__lista { list-style: none; margin: 0; padding: 0; }
.fl-facett__lista .fl-val { padding-block: var(--fl-luft-1); min-height: 40px; font-size: var(--fl-text-sm); }
.fl-facett__antal { margin-left: auto; color: var(--fl-text-svag); font-size: var(--fl-text-sm); padding-left: var(--fl-luft-3); }
.fl-facett .fl-val { width: 100%; }
.fl-facett .fl-val__text { flex: 1; display: flex; align-items: center; }


/* =============================================================================
   17. FLIKAR — .fl-flikar (tablist) + paneler
   ========================================================================== */
.fl-flikar { margin: var(--fl-luft-6) 0; }
.fl-flikar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-luft-1);
  margin: 0 0 var(--fl-luft-5);
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--fl-linje);
}
.fl-flikar__knapp {
  position: relative;
  min-height: 44px;
  padding: 0 var(--fl-luft-4);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text-mjuk);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--fl-tid-snabb) var(--fl-ease), border-color var(--fl-tid-snabb) var(--fl-ease);
}
.fl-flikar__knapp:hover { color: var(--fl-text); }
.fl-flikar__knapp[aria-selected="true"] {
  color: var(--fl-text);
  border-bottom-color: var(--fl-accent);
}
.fl-flikar__panel { font-size: var(--fl-text-base); line-height: var(--fl-lh-brod); color: var(--fl-text-mjuk); }
.fl-flikar__panel[hidden] { display: none; }
.fl-flikar__panel > :last-child { margin-bottom: 0; }


/* =============================================================================
   18. DRAGSPEL / FAQ — <details>/<summary>
   ========================================================================== */
.fl-dragspel { margin: var(--fl-luft-6) 0; max-width: var(--fl-bredd-text); }
.fl-dragspel__item {
  border-bottom: 1px solid var(--fl-linje);
}
.fl-dragspel__item:first-child { border-top: 1px solid var(--fl-linje); }
.fl-dragspel__item > summary {
  display: flex;
  align-items: center;
  gap: var(--fl-luft-4);
  padding: var(--fl-luft-5) var(--fl-luft-1);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-md);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
}
.fl-dragspel__item > summary::-webkit-details-marker { display: none; }
.fl-dragspel__item > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 12px; height: 12px;
  border-right: 2px solid var(--fl-accent);
  border-bottom: 2px solid var(--fl-accent);
  transform: rotate(45deg);
  transition: transform var(--fl-tid) var(--fl-ease);
}
.fl-dragspel__item[open] > summary::after { transform: rotate(-135deg); }
.fl-dragspel__item > summary:hover { color: var(--fl-accent-hover); }
.fl-dragspel__svar {
  padding: 0 var(--fl-luft-1) var(--fl-luft-5);
  font-size: var(--fl-text-base);
  line-height: var(--fl-lh-brod);
  color: var(--fl-text-mjuk);
}
.fl-dragspel__svar > :last-child { margin-bottom: 0; }
.fl-dragspel__svar a { color: var(--fl-lank); }


/* =============================================================================
   19. PAGINERING + LADDA FLER
   ========================================================================== */
.fl-paginering {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fl-luft-2);
  margin: var(--fl-luft-7) 0;
  flex-wrap: wrap;
}
.fl-paginering__lank {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--fl-luft-3);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-medium);
  color: var(--fl-text);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie);
  text-decoration: none;
  transition: border-color var(--fl-tid-snabb) var(--fl-ease), background var(--fl-tid-snabb) var(--fl-ease);
}
.fl-paginering__lank:hover { border-color: var(--fl-accent); background: var(--fl-accent-mjuk); color: var(--fl-text); }
.fl-paginering__lank[aria-current="page"] {
  background: var(--fl-accent);
  color: #2a1402;
  border-color: transparent;
  font-weight: var(--fl-vikt-fet);
}
.fl-paginering__lank[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.fl-paginering__avstand { color: var(--fl-text-svag); padding: 0 var(--fl-luft-1); }
.fl-paginering__lank svg { width: 16px; height: 16px; }
.fl-laddafler { display: flex; flex-direction: column; align-items: center; gap: var(--fl-luft-3); margin: var(--fl-luft-7) 0; }
.fl-laddafler__status { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }


/* =============================================================================
   20. NOTISER / BANNERS (sidnivå) — .fl-notis (skild från faktarutor)
   Bredare, mer "system"-ton, kan stängas. Ej för artikelinnehåll.
   ========================================================================== */
.fl-notis {
  --_ton: var(--fl-bla);
  --_ton-bg: rgba(31, 95, 176, 0.10);
  display: flex;
  align-items: flex-start;
  gap: var(--fl-luft-4);
  margin: var(--fl-luft-5) 0;
  padding: var(--fl-luft-4) var(--fl-luft-5);
  background: var(--_ton-bg);
  border: 1px solid color-mix(in srgb, var(--_ton) 35%, transparent);
  border-radius: var(--fl-radie-md);
}
.fl-notis__ikon { flex: none; width: 24px; height: 24px; color: var(--_ton); margin-top: 1px; }
.fl-notis__ikon svg { width: 100%; height: 100%; }
.fl-notis__kropp { flex: 1; }
.fl-notis__rubrik {
  margin: 0 0 var(--fl-luft-1);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-base);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
}
.fl-notis__text { margin: 0; font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); color: var(--fl-text-mjuk); }
.fl-notis__text a { color: var(--fl-lank); }
.fl-notis__stang {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fl-text-mjuk);
  cursor: pointer;
  transition: background var(--fl-tid-snabb) var(--fl-ease);
}
.fl-notis__stang:hover { background: color-mix(in srgb, var(--_ton) 18%, transparent); color: var(--fl-text); }
.fl-notis__stang svg { width: 16px; height: 16px; }
.fl-notis--trygg { --_ton: var(--fl-trygg); --_ton-bg: rgba(63, 143, 106, 0.12); }
.fl-notis--akta  { --_ton: var(--fl-akta);  --_ton-bg: rgba(217, 154, 43, 0.14); }
.fl-notis--fara  { --_ton: var(--fl-fara);  --_ton-bg: rgba(200, 71, 47, 0.12); }
[data-fl-tema="morkt"] .fl-notis { --_ton-bg: rgba(127, 180, 255, 0.10); }
[data-fl-tema="morkt"] .fl-notis--trygg { --_ton-bg: rgba(111, 147, 82, 0.16); }
[data-fl-tema="morkt"] .fl-notis--akta  { --_ton-bg: rgba(247, 177, 62, 0.14); }
[data-fl-tema="morkt"] .fl-notis--fara  { --_ton-bg: rgba(232, 112, 42, 0.14); }


/* =============================================================================
   21. LED-FAKTARUTA — .fl-ledfakta (för leder/destinationer)
   Parallell till produktspecar: längd, svårighet, säsong, region, höjdmeter.
   ========================================================================== */
.fl-ledfakta {
  margin: var(--fl-luft-6) 0;
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-left: 4px solid var(--fl-trad);
  border-radius: var(--fl-radie-md);
}
[data-fl-tema="morkt"] .fl-ledfakta { border-left-color: var(--fl-gras); }
.fl-ledfakta__rubrik {
  margin: 0 0 var(--fl-luft-5);
  display: flex;
  align-items: center;
  gap: var(--fl-luft-3);
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-md);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
}
.fl-ledfakta__rubrik svg { width: 22px; height: 22px; color: var(--fl-trad); flex: none; }
[data-fl-tema="morkt"] .fl-ledfakta__rubrik svg { color: var(--fl-gras); }
.fl-ledfakta__rutnat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--fl-luft-5);
  margin: 0;
}
.fl-ledfakta__post { display: flex; flex-direction: column; gap: var(--fl-luft-1); }
.fl-ledfakta__etikett {
  display: flex;
  align-items: center;
  gap: var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: var(--fl-text-svag);
}
.fl-ledfakta__etikett svg { width: 15px; height: 15px; flex: none; }
.fl-ledfakta__varde {
  font-family: var(--fl-font-display);
  font-size: var(--fl-text-lg);
  font-weight: var(--fl-vikt-fet);
  color: var(--fl-text);
  line-height: var(--fl-lh-tat);
}
.fl-ledfakta__varde small { display: block; font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: var(--fl-vikt-normal); color: var(--fl-text-svag); margin-top: 2px; }

/* Svårighetsgrad-mätare (prickar, ej enbart färg) */
.fl-svarighet { display: inline-flex; align-items: center; gap: 4px; }
.fl-svarighet__prick { width: 9px; height: 9px; border-radius: 50%; background: var(--fl-linje-stark); }
.fl-svarighet__prick--pa { background: var(--fl-trad); }
[data-fl-tema="morkt"] .fl-svarighet__prick--pa { background: var(--fl-gras); }
.fl-svarighet--svar .fl-svarighet__prick--pa { background: var(--fl-fara); }
.fl-svarighet--medel .fl-svarighet__prick--pa { background: var(--fl-akta); }


/* =============================================================================
   22. NYCKELTAL / STATISTIK-BLOCK — stora siffror med etikett
   ========================================================================== */
.fl-statrad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--fl-luft-5);
  margin: var(--fl-luft-6) 0;
}
.fl-stat {
  padding: var(--fl-luft-5);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
  text-align: center;
}
.fl-stat__tal {
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-3xl);
  line-height: 1;
  color: var(--fl-accent);
  letter-spacing: var(--fl-sparrning-rubrik);
}
[data-fl-tema="morkt"] .fl-stat__tal { color: var(--fl-barnsten); }
.fl-stat__tal small { font-size: var(--fl-text-lg); font-weight: var(--fl-vikt-fet); }
.fl-stat__etikett {
  margin-top: var(--fl-luft-3);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-mjuk);
  line-height: var(--fl-lh-normal);
}
/* Variant: vänsterställd, ingen ram (i löptext) */
.fl-statrad--bar .fl-stat { background: none; border: 0; text-align: left; padding: 0; }


/* =============================================================================
   23. INNEHÅLLSFÖRTECKNING (TOC)
   ========================================================================== */
.fl-toc {
  padding: var(--fl-luft-5);
  background: var(--fl-bg-mjuk);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
  font-family: var(--fl-font-ui);
}
.fl-toc__rubrik {
  margin: 0 0 var(--fl-luft-3);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: var(--fl-sparrning-versal);
  text-transform: uppercase;
  color: var(--fl-text-svag);
}
.fl-toc__list { list-style: none; margin: 0; padding: 0; }
.fl-toc__list li { margin: 0; }
.fl-toc__list a {
  display: block;
  padding: var(--fl-luft-2) var(--fl-luft-3);
  border-left: 2px solid var(--fl-linje);
  color: var(--fl-text-mjuk);
  text-decoration: none;
  font-size: var(--fl-text-sm);
  transition: color var(--fl-tid-snabb) var(--fl-ease), border-color var(--fl-tid-snabb) var(--fl-ease);
}
.fl-toc__list a:hover { color: var(--fl-text); border-left-color: var(--fl-text-svag); }
.fl-toc__list a[aria-current="true"] {
  color: var(--fl-accent-hover);
  border-left-color: var(--fl-accent);
  font-weight: var(--fl-vikt-fet);
}
[data-fl-tema="morkt"] .fl-toc__list a[aria-current="true"] { color: var(--fl-barnsten); }
.fl-toc__list .fl-toc__niva2 a { padding-left: var(--fl-luft-5); }
/* Sticky-känsla (i en sidospalt) */
.fl-toc--sticky { position: sticky; top: calc(var(--fl-header-h) + var(--fl-luft-4)); }


/* =============================================================================
   24. RELATERAT & CTA-BANNER
   ========================================================================== */
/* Relaterat/Läs mer-block */
.fl-relaterat {
  margin: var(--fl-luft-7) 0;
  padding: var(--fl-luft-6);
  background: var(--fl-bg-mjuk);
  border-radius: var(--fl-radie-lg);
}
.fl-relaterat__rubrik {
  margin: 0 0 var(--fl-luft-5);
  font-size: var(--fl-text-lg);
}
.fl-relaterat__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fl-luft-2); }
.fl-relaterat__lank {
  display: flex;
  align-items: center;
  gap: var(--fl-luft-4);
  padding: var(--fl-luft-3) var(--fl-luft-4);
  border-radius: var(--fl-radie);
  text-decoration: none;
  color: var(--fl-text);
  transition: background var(--fl-tid-snabb) var(--fl-ease);
}
.fl-relaterat__lank:hover { background: var(--fl-accent-mjuk); color: var(--fl-text); }
.fl-relaterat__kicker { font-family: var(--fl-font-ui); font-size: var(--fl-text-xs); font-weight: var(--fl-vikt-fet); letter-spacing: var(--fl-sparrning-versal); text-transform: uppercase; color: var(--fl-kicker-farg); display: block; margin-bottom: 2px; }
[data-fl-tema="morkt"] .fl-relaterat__kicker { color: var(--fl-barnsten); }
.fl-relaterat__titel { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); font-size: var(--fl-text-base); }
.fl-relaterat__pil { margin-left: auto; flex: none; color: var(--fl-text-svag); transition: transform var(--fl-tid) var(--fl-ease); }
.fl-relaterat__lank:hover .fl-relaterat__pil { transform: translateX(3px); color: var(--fl-accent); }
.fl-relaterat__pil svg { width: 20px; height: 20px; }

/* CTA-banner (nyhetsbrev / community-teaser) */
.fl-ctabanner {
  position: relative;
  margin: var(--fl-luft-7) 0;
  padding: var(--fl-luft-8) var(--fl-luft-7);
  border-radius: var(--fl-radie-lg);
  background:
    radial-gradient(120% 140% at 88% 10%, rgba(232, 112, 42, 0.28), transparent 55%),
    linear-gradient(150deg, var(--fl-skymning), var(--fl-indigo) 75%);
  color: var(--fl-sno);
  overflow: hidden;
}
.fl-ctabanner__inner { position: relative; max-width: 56ch; }
.fl-ctabanner .fl-kicker { color: var(--fl-glod); }
.fl-ctabanner h3 {
  margin: var(--fl-luft-2) 0 var(--fl-luft-3);
  color: var(--fl-sno);
  font-size: var(--fl-text-xl);
}
.fl-ctabanner p { margin: 0 0 var(--fl-luft-5); color: var(--fl-dis-ljus); max-width: 50ch; }
.fl-ctabanner__form { display: flex; flex-wrap: wrap; gap: var(--fl-luft-3); }
.fl-ctabanner__form .fl-input {
  flex: 1;
  min-width: 220px;
  background: rgba(246, 244, 238, 0.10);
  border-color: rgba(246, 244, 238, 0.30);
  color: var(--fl-sno);
}
.fl-ctabanner__form .fl-input::placeholder { color: var(--fl-dis); }
.fl-ctabanner__form .fl-input:focus { border-color: var(--fl-glod); box-shadow: 0 0 0 3px rgba(255, 206, 107, 0.25); }


/* =============================================================================
   25. AVATAR / BADGE / TOOLTIP
   ========================================================================== */
/* Avatar — initial, bild, storlekar, stack */
.fl-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--fl-barnsten), var(--fl-eld) 60%, var(--fl-glod-djup));
  color: #2a1402;
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-base);
  overflow: hidden;
  line-height: 1;
}
.fl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fl-avatar--sm { width: 32px; height: 32px; font-size: var(--fl-text-sm); }
.fl-avatar--lg { width: 64px; height: 64px; font-size: var(--fl-text-lg); }
.fl-avatar--natur { background: radial-gradient(circle at 50% 35%, var(--fl-gras), var(--fl-trad) 65%, var(--fl-trad-djup)); color: var(--fl-sno); }
.fl-avatar--sjo { background: radial-gradient(circle at 50% 35%, var(--fl-sjo-ljus), var(--fl-sjo) 65%, var(--fl-bla-djup)); color: var(--fl-sno); }
.fl-avatar--ring { box-shadow: 0 0 0 2px var(--fl-bg-upphojd), 0 0 0 4px var(--fl-accent); }
.fl-avatarstack { display: inline-flex; }
.fl-avatarstack .fl-avatar { margin-left: -12px; box-shadow: 0 0 0 3px var(--fl-bg); }
.fl-avatarstack .fl-avatar:first-child { margin-left: 0; }

/* Badge / etikett-varianter (status-pill) */
.fl-etikett {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-1);
  padding: 0.25em 0.7em;
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-xs);
  font-weight: var(--fl-vikt-fet);
  letter-spacing: 0.02em;
  line-height: 1.5;
  background: var(--fl-bg-mjuk);
  color: var(--fl-text-mjuk);
  border: 1px solid var(--fl-linje);
}
.fl-etikett svg { width: 12px; height: 12px; }
.fl-etikett--trygg { background: rgba(63, 143, 106, 0.14); color: var(--fl-trygg); border-color: transparent; }
.fl-etikett--akta  { background: rgba(217, 154, 43, 0.18); color: #946309; border-color: transparent; }
.fl-etikett--fara  { background: rgba(200, 71, 47, 0.14); color: var(--fl-fara); border-color: transparent; }
.fl-etikett--info  { background: rgba(31, 95, 176, 0.14); color: var(--fl-bla); border-color: transparent; }
.fl-etikett--accent { background: var(--fl-accent); color: #2a1402; border-color: transparent; }
[data-fl-tema="morkt"] .fl-etikett--trygg { color: var(--fl-gras); }
[data-fl-tema="morkt"] .fl-etikett--akta  { color: var(--fl-barnsten); }
[data-fl-tema="morkt"] .fl-etikett--fara  { color: #f08a72; }
[data-fl-tema="morkt"] .fl-etikett--info  { color: var(--fl-bla-ljus); }

/* Tooltip — CSS-only, visas på hover/fokus */
.fl-tooltip { position: relative; display: inline-flex; }
.fl-tooltip__avtryckare {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--fl-text-svag);
  background: none;
  color: var(--fl-text-svag);
  font-family: var(--fl-font-ui);
  font-size: 12px;
  font-weight: var(--fl-vikt-fet);
  cursor: help;
}
.fl-tooltip__bubbla {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  padding: var(--fl-luft-3) var(--fl-luft-4);
  background: var(--fl-skymning);
  color: var(--fl-dis-ljus);
  border-radius: var(--fl-radie);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  font-weight: var(--fl-vikt-normal);
  line-height: var(--fl-lh-normal);
  box-shadow: var(--fl-skugga-3);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--fl-tid) var(--fl-ease), transform var(--fl-tid) var(--fl-ease);
  z-index: 50;
  pointer-events: none;
}
.fl-tooltip__bubbla::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--fl-skymning);
}
.fl-tooltip:hover .fl-tooltip__bubbla,
.fl-tooltip__avtryckare:focus-visible + .fl-tooltip__bubbla {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* =============================================================================
   26. PROGRESS / STEPPER
   ========================================================================== */
/* Progressbar */
.fl-progress { margin: var(--fl-luft-5) 0; max-width: var(--fl-bredd-text); }
.fl-progress__topp {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--fl-luft-2);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-text-mjuk);
}
.fl-progress__topp strong { color: var(--fl-text); font-weight: var(--fl-vikt-fet); }
.fl-progress__spar {
  height: 10px;
  border-radius: var(--fl-radie-pill);
  background: var(--fl-linje);
  overflow: hidden;
}
.fl-progress__fyll {
  display: block;
  height: 100%;
  width: var(--andel, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--fl-eld), var(--fl-barnsten));
  transition: width var(--fl-tid-lugn) var(--fl-ease);
}

/* Stepper — numrerade steg (t.ex. guide / beställning) */
.fl-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fl-luft-2);
  margin: var(--fl-luft-6) 0;
  padding: 0;
  list-style: none;
  counter-reset: steg;
}
.fl-stepper__steg {
  display: flex;
  align-items: center;
  gap: var(--fl-luft-3);
  flex: 1;
  min-width: 160px;
}
.fl-stepper__prick {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--fl-bg-upphojd);
  border: 2px solid var(--fl-linje-stark);
  color: var(--fl-text-svag);
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-svart);
  font-size: var(--fl-text-base);
}
.fl-stepper__text { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); }
.fl-stepper__text small { display: block; color: var(--fl-text-svag); }
.fl-stepper__steg:not(:last-child)::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--fl-linje);
  min-width: 16px;
}
/* Klart steg */
.fl-stepper__steg--klar .fl-stepper__prick { background: var(--fl-trygg); border-color: transparent; color: #fff; }
.fl-stepper__steg--klar:not(:last-child)::after { background: var(--fl-trygg); }
/* Aktivt steg */
.fl-stepper__steg--aktiv .fl-stepper__prick { background: var(--fl-accent); border-color: transparent; color: #2a1402; }
.fl-stepper__steg--aktiv .fl-stepper__text { color: var(--fl-text); font-weight: var(--fl-vikt-fet); }


/* =============================================================================
   27. TOMT-TILLSTÅND / SKELETON
   ========================================================================== */
/* Tomt-tillstånd (empty state) */
.fl-tom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--fl-luft-4);
  max-width: 46ch;
  margin: var(--fl-luft-7) auto;
  padding: var(--fl-luft-7) var(--fl-luft-5);
}
.fl-tom__ikon {
  width: 64px; height: 64px;
  color: var(--fl-fjall-ljus);
}
[data-fl-tema="morkt"] .fl-tom__ikon { color: var(--fl-fjall); }
.fl-tom__ikon svg { width: 100%; height: 100%; }
.fl-tom__rubrik { margin: 0; font-size: var(--fl-text-lg); }
.fl-tom__text { margin: 0; font-size: var(--fl-text-base); color: var(--fl-text-mjuk); }

/* Skeleton-laddning — pulserande platshållare */
.fl-skeleton {
  display: block;
  border-radius: var(--fl-radie-sm);
  background: linear-gradient(100deg, var(--fl-linje) 30%, color-mix(in srgb, var(--fl-linje) 50%, transparent) 50%, var(--fl-linje) 70%);
  background-size: 200% 100%;
  animation: fl-skelett 1.4s ease-in-out infinite;
}
@keyframes fl-skelett {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.fl-skeleton--text { height: 0.9em; margin-bottom: var(--fl-luft-2); }
.fl-skeleton--rubrik { height: 1.6em; width: 70%; margin-bottom: var(--fl-luft-4); }
.fl-skeleton--kort { height: 180px; border-radius: var(--fl-radie-md); margin-bottom: var(--fl-luft-4); }
.fl-skeleton--avatar { width: 44px; height: 44px; border-radius: 50%; }
.fl-skeleton--rad-kort { width: 90%; }
@media (prefers-reduced-motion: reduce) {
  .fl-skeleton { animation: none; }
}

/* Artikelkort-media (lägre 2:1, max 250px) — används på ämnessidans "Läs vidare" */
.fl-kort--artikel .fl-kort__media { aspect-ratio: 2 / 1; max-height: 250px; overflow: hidden; }
.fl-kort--artikel .fl-kort__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Nivå-indikator: 1-3 ifyllda prickar (nybörjare/medel/erfaren) */
.fl-niva { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.fl-niva__prick { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--fl-trad); box-sizing: border-box; }
.fl-niva__prick.is-fylld { background: var(--fl-trad); }
[data-fl-tema="morkt"] .fl-niva__prick { border-color: var(--fl-gras); }
[data-fl-tema="morkt"] .fl-niva__prick.is-fylld { background: var(--fl-gras); }

/* Guide-kort på startsidan (bild + titel + antal delar) */
.flc-guidekort { display: flex; flex-direction: column; background: var(--fl-sno, #fff); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg); overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.flc-guidekort:hover { transform: translateY(-3px); box-shadow: var(--fl-skugga-3); }
.flc-guidekort__pic { aspect-ratio: 16 / 9; background-size: cover; background-position: center; background-color: #2b3350; }
.flc-guidekort__body { padding: var(--fl-luft-4) var(--fl-luft-5) var(--fl-luft-5); }
.flc-guidekort__titel { font-family: var(--fl-font-display); font-size: var(--fl-text-lg); font-weight: 800; margin: 0 0 3px; line-height: 1.2; }
.flc-guidekort__meta { color: var(--fl-text-svag); font-size: var(--fl-text-sm); }

/* Obfuskerad e-post (block-epost) */
.fl-block-epost { margin: var(--fl-luft-4) 0; }
.fl-epost { display: inline-flex; align-items: center; gap: 8px; background: var(--fl-accent-mjuk); color: var(--fl-accent-hover); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-pill); padding: 9px 18px; font-family: var(--fl-font-ui); font-weight: 700; font-size: var(--fl-text-sm); cursor: pointer; }
.fl-epost:hover { background: var(--fl-accent); color: #fff; }
.fl-epost-lank { color: var(--fl-accent-hover); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }

/* =============================================================================
   Mörkt läge: kort-ytor som bygger på fasta ljusa toner (--fl-sno / #fff) flippar
   inte automatiskt, medan texten gör det -> ljus text på ljust kort. Här görs de
   adaptiva (--fl-bg-upphojd blir mörk i mörkt läge). Ljust läge påverkas inte.
   Rena bildramar (produktfoton) lämnas vita med flit.
   ========================================================================== */
[data-fl-tema="morkt"] .flc-guidekort,
[data-fl-tema="morkt"] .fg-guide,
[data-fl-tema="morkt"] .fg-del,
[data-fl-tema="morkt"] .fg-kort,
[data-fl-tema="morkt"] .fg-utlank a,
[data-fl-tema="morkt"] .fg-add__rad,
[data-fl-tema="morkt"] .flc-avdkort,
[data-fl-tema="morkt"] .flc-amneskort {
  background: var(--fl-bg-upphojd);
}