/* =============================================================================
   friluftslivet.nu — Kommersiella v1-sidtyper (mockup-lager)
   Ägs ENBART av mockup-filerna:
     mockup-topic.html, mockup-best-in-test.html, mockup-facet.html,
     mockup-product.html
   Bygger ENBART på tokens i fl-tokens.css + komponenter i fl-components.css.
   Namespace .flc-* (FL Commercial) så inget krockar med .fl-* i systemet.

   Designhållning: stilrent, FLAT, MYCKET LUFT. Hellre för mycket andrum än
   för lite. Eldglöd sparsamt (utmärkelser, en CTA, en glödlinje). Naturgrönt
   för betyg/positivt, sjöblå för länkar. Ljust + mörkt, AA, 44px, fokusringar,
   färg aldrig enda indikator, reduced-motion.
   ========================================================================== */


/* =============================================================================
   0. SIDANS GRUNDRYTM — sektioner med rejäl vertikal luft
   ========================================================================== */
.flc-sektion { padding-block: var(--fl-luft-9); }
.flc-sektion--tat { padding-block: var(--fl-luft-8); }
.flc-sektion--mjuk { background: var(--fl-bg-mjuk); }
.flc-sektion + .flc-sektion { padding-top: 0; }
.flc-sektion--mjuk + .flc-sektion,
.flc-sektion + .flc-sektion--mjuk { padding-top: var(--fl-luft-9); }

/* Sektionshuvud — kicker + rubrik + ev. ingress, generös marginal under */
.flc-huvud { max-width: 62ch; margin-bottom: var(--fl-luft-7); }
.flc-huvud .fl-kicker { margin-bottom: var(--fl-luft-4); }
.flc-huvud h2 { margin: 0 0 var(--fl-luft-4); }
.flc-huvud p { margin: 0; color: var(--fl-text-mjuk); font-size: var(--fl-text-md); line-height: var(--fl-lh-normal); }

/* Två-kolumns sidlayout: huvudspalt + sidospalt (sticky) */
.flc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--fl-luft-8) var(--fl-luft-8);
  align-items: start;
}
.flc-layout--smal-vanster {
  grid-template-columns: 280px minmax(0, 1fr);
}
.flc-sido { position: sticky; top: calc(var(--fl-header-h) + var(--fl-luft-5)); display: grid; gap: var(--fl-luft-6); }
@media (max-width: 980px) {
  .flc-layout, .flc-layout--smal-vanster { grid-template-columns: 1fr; gap: var(--fl-luft-7); }
  .flc-sido { position: static; top: auto; }
}


/* =============================================================================
   1. HERO — pelar-/ämneshero (solid mörk, transparent header över)
   Lugn skymningston, inga tunga skuggor. Generös padding.
   ========================================================================== */
.flc-hero {
  position: relative;
  color: var(--fl-sno);
  margin-top: 0;                 /* solid header tar egen plats — ingen bleed under */
  padding-block: var(--fl-luft-7) var(--fl-luft-7);
  background:
    radial-gradient(120% 130% at 82% 8%, rgba(232,112,42,0.20), transparent 52%),
    linear-gradient(165deg, var(--fl-skymning) 0%, var(--fl-natt) 78%);
  overflow: hidden;
}
/* Foto-hero: vandringsbild i botten + mörk slöja (vänster→höger) för textkontrast.
   Sätt bilden via inline-stil: style="--fl-hero-bild:url('/uploads/...')" */
.flc-hero--foto {
  background:
    linear-gradient(90deg, rgba(7,10,20,0.85) 0%, rgba(7,10,20,0.6) 46%, rgba(7,10,20,0.28) 100%),
    linear-gradient(0deg, rgba(7,10,20,0.55), rgba(7,10,20,0.12) 60%),
    var(--fl-hero-bild, none) center 30%/cover no-repeat,
    var(--fl-skymning);
}
.flc-hero--foto::after { display: none; }   /* riktig bild ersätter den ritade siluetten */
/* diskret fjällsiluett i botten av heron */
.flc-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: var(--fl-fjall-djup);
  opacity: 0.5;
  clip-path: polygon(0 100%, 0 64%, 12% 44%, 26% 60%, 40% 34%, 54% 56%, 68% 30%, 82% 54%, 94% 38%, 100% 50%, 100% 100%);
  pointer-events: none;
}
.flc-hero__inner { position: relative; z-index: 1; max-width: 70ch; }
.flc-hero .fl-bread { margin-bottom: var(--fl-luft-6); }
.flc-hero .fl-bread a { color: var(--fl-dis-ljus); }
.flc-hero .fl-bread a:hover { color: var(--fl-glod); }
.flc-hero .fl-bread__avskilj { color: rgba(199,210,234,0.4); }
.flc-hero .fl-bread [aria-current="page"] { color: var(--fl-sno); }
.flc-hero .fl-kicker { color: var(--fl-glod); margin-bottom: var(--fl-luft-4); }
.flc-hero h1 {
  color: var(--fl-sno);
  font-size: clamp(2rem, 4.2vw, var(--fl-text-3xl));
  max-width: 18ch;
  margin-bottom: var(--fl-luft-4);
}
.flc-hero__ingress {
  color: var(--fl-dis-ljus);
  font-size: var(--fl-text-md);
  line-height: var(--fl-lh-normal);
  max-width: 56ch;
  margin: 0 0 var(--fl-luft-6);
}
.flc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--fl-luft-3); }

/* Hero-metarad: korta fakta (antal testade, senast uppdaterad) */
.flc-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--fl-luft-3) var(--fl-luft-6);
  margin-top: var(--fl-luft-5);
  font-family: var(--fl-font-ui);
  font-size: var(--fl-text-sm);
  color: var(--fl-dis-ljus);
}
.flc-hero__meta span { display: inline-flex; align-items: center; gap: var(--fl-luft-2); }
.flc-hero__meta svg { width: 16px; height: 16px; color: var(--fl-glod); flex: none; }

/* Kompakt sid-hero (facett/produkt): mindre, men fortfarande luftig */
.flc-hero--kompakt { padding-block: var(--fl-luft-7) var(--fl-luft-7); }
.flc-hero--kompakt h1 { font-size: clamp(2rem, 4.4vw, var(--fl-text-3xl)); }


/* =============================================================================
   2. "SÅ VÄLJER DU" — kortrad med ledtrådar/kriterier
   ========================================================================== */
.flc-valjkort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--fl-luft-5);
}
.flc-valjkort__kort {
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.flc-valjkort__ikon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  margin-bottom: var(--fl-luft-4);
  border-radius: var(--fl-radie);
  background: var(--fl-accent-mjuk);
  color: var(--fl-kicker-farg);
}
[data-fl-tema="morkt"] .flc-valjkort__ikon { color: var(--fl-barnsten); }
.flc-valjkort__ikon svg { width: 22px; height: 22px; }
.flc-valjkort__kort h3 { margin: 0 0 var(--fl-luft-3); font-size: var(--fl-text-md); }
.flc-valjkort__kort p { margin: 0; font-size: var(--fl-text-base); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }


/* =============================================================================
   3. FACETT-/UNDERNAVIGERING — stora klickbara ingångar (chips + kort)
   ========================================================================== */
.flc-facettnav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--fl-luft-4);
}
.flc-facettnav__lank {
  display: flex; flex-direction: column; gap: var(--fl-luft-1);
  min-height: 88px;
  padding: var(--fl-luft-5);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
  text-decoration: none;
  color: var(--fl-text);
  transition: border-color var(--fl-tid) var(--fl-ease),
              transform var(--fl-tid) var(--fl-ease),
              box-shadow var(--fl-tid) var(--fl-ease);
}
.flc-facettnav__lank:hover {
  border-color: var(--fl-accent);
  transform: translateY(-2px);
  box-shadow: var(--fl-skugga-2);
  color: var(--fl-text);
}
.flc-facettnav__titel { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); font-size: var(--fl-text-md); }
.flc-facettnav__antal { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.flc-facettnav__lank:hover .flc-facettnav__antal { color: var(--fl-text-mjuk); }


/* =============================================================================
   4. SPEC-LISTRAD — produkter i lista med R-värde/vikt/packmått tydligt
   Bygger på en egen, luftig listrad (inte .fl-produkt-kortet) för täta
   jämförbara listningar med specar i kolumn.
   ========================================================================== */
.flc-speclista { display: grid; gap: var(--fl-luft-5); }

.flc-rad {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: var(--fl-luft-6);
  align-items: center;
  padding: var(--fl-luft-5) var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
  transition: border-color var(--fl-tid) var(--fl-ease), box-shadow var(--fl-tid) var(--fl-ease);
}
.flc-rad:hover { border-color: var(--fl-linje-stark); box-shadow: var(--fl-skugga-1); }
.flc-rad--topp { border-color: var(--fl-accent); }
.flc-rad--topp::before {
  content: ""; position: absolute; left: 0; top: var(--fl-luft-6); bottom: var(--fl-luft-6);
  width: 3px; border-radius: 0 3px 3px 0; background: var(--fl-accent);
}

.flc-rad__media { width: 132px; }
.flc-rad__media .fl-platshallare { --ratio: 1 / 1; border-radius: var(--fl-radie-md); }

.flc-rad__kropp { min-width: 0; display: flex; flex-direction: column; gap: var(--fl-luft-3); }
.flc-rad__rubrikrad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-luft-3); }
.flc-rad__titel { margin: 0; font-size: var(--fl-text-lg); line-height: var(--fl-lh-tat); }
.flc-rad__titel a { color: var(--fl-text); text-decoration: none; }
.flc-rad__titel a:hover { color: var(--fl-accent-hover); }
.flc-rad__marke { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.flc-rad__sammanfattning { margin: 0; font-size: var(--fl-text-base); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }

/* Spec-strip: nyckeltal sida vid sida (R-värde, vikt, packmått, tjocklek) */
.flc-specstrip {
  display: flex; flex-wrap: wrap; gap: var(--fl-luft-5);
  margin: 0; padding: 0;
}
.flc-specstrip > div { display: flex; flex-direction: column; gap: 2px; }
.flc-specstrip dt {
  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);
}
.flc-specstrip dd {
  margin: 0;
  font-family: var(--fl-font-display);
  font-weight: var(--fl-vikt-fet);
  font-size: var(--fl-text-md);
  color: var(--fl-text);
  line-height: 1;
}
.flc-specstrip dd small { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: var(--fl-vikt-normal); color: var(--fl-text-svag); }

/* Höger åtgärdskolumn: betyg + pris + CTA, staplat luftigt */
.flc-rad__atgard {
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--fl-luft-3);
  text-align: right;
  min-width: 150px;
}
.flc-rad__pris { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.flc-rad__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);
}
.flc-rad__pris-tal { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-lg); color: var(--fl-text); }

@media (max-width: 760px) {
  .flc-rad { grid-template-columns: 96px minmax(0, 1fr); }
  .flc-rad__media { width: 96px; }
  .flc-rad__atgard { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; }
  .flc-rad__pris { align-items: flex-start; }
  .flc-rad--topp::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
}
@media (max-width: 440px) {
  .flc-rad { grid-template-columns: 1fr; }
  .flc-rad__media { width: 100%; max-width: 160px; }
}


/* =============================================================================
   5. TOPPVAL-PANEL — utvalt redaktionsval med extra rymd
   ========================================================================== */
.flc-toppval {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--fl-luft-7);
  align-items: center;
  padding: var(--fl-luft-7);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
  box-shadow: var(--fl-skugga-1);
}
.flc-toppval__media .fl-platshallare { --ratio: 4 / 3; }
.flc-toppval__kropp { display: flex; flex-direction: column; gap: var(--fl-luft-4); }
.flc-toppval__rubrik { margin: 0; font-size: var(--fl-text-xl); }
.flc-toppval__motivering { margin: 0; color: var(--fl-text-mjuk); font-size: var(--fl-text-md); line-height: var(--fl-lh-normal); }
.flc-toppval__rad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-luft-4); }
@media (max-width: 680px) {
  .flc-toppval { grid-template-columns: 1fr; gap: var(--fl-luft-5); }
}


/* =============================================================================
   6. INGÅNGSKORT — stora dubbla ingångar (bäst-i-test + köpguide)
   ========================================================================== */
.flc-ingangar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-luft-5); }
.flc-ingang {
  position: relative;
  display: flex; flex-direction: column; gap: var(--fl-luft-3);
  padding: var(--fl-luft-7);
  border-radius: var(--fl-radie-lg);
  text-decoration: none;
  color: var(--fl-sno);
  overflow: hidden;
  min-height: 200px;
  justify-content: flex-end;
  background: linear-gradient(150deg, var(--fl-trad) 0%, var(--fl-trad-djup) 100%);
  transition: transform var(--fl-tid) var(--fl-ease), box-shadow var(--fl-tid) var(--fl-ease);
}
.flc-ingang--eld {
  background:
    radial-gradient(120% 130% at 85% 12%, rgba(232,112,42,0.34), transparent 55%),
    linear-gradient(150deg, var(--fl-skymning) 0%, var(--fl-indigo) 80%);
}
.flc-ingang:hover { transform: translateY(-3px); box-shadow: var(--fl-skugga-3); color: var(--fl-sno); }
.flc-ingang .fl-kicker { color: var(--fl-glod); }
.flc-ingang h3 { color: var(--fl-sno); margin: 0; font-size: var(--fl-text-xl); }
.flc-ingang p { color: var(--fl-dis-ljus); margin: 0; font-size: var(--fl-text-base); max-width: 36ch; }
.flc-ingang__pil { display: inline-flex; align-items: center; gap: var(--fl-luft-2); font-family: var(--fl-font-ui); font-weight: var(--fl-vikt-fet); color: var(--fl-glod); }
.flc-ingang__pil svg { width: 18px; height: 18px; transition: transform var(--fl-tid) var(--fl-ease); }
.flc-ingang:hover .flc-ingang__pil svg { transform: translateX(4px); }
@media (max-width: 680px) { .flc-ingangar { grid-template-columns: 1fr; } }


/* =============================================================================
   7. RANKAD TESTLISTA (bäst-i-test) — produktkort med rangordning + utmärkelse
   Generösa kort, mycket vertikal luft mellan dem.
   ========================================================================== */
.flc-rank { display: grid; gap: var(--fl-luft-7); }

.flc-testkort {
  position: relative;
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--fl-luft-7);
  padding: var(--fl-luft-7);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.flc-testkort--vinnare { border-color: var(--fl-accent); box-shadow: var(--fl-skugga-2); }
.flc-testkort__vanster { display: flex; flex-direction: column; gap: var(--fl-luft-4); }
.flc-testkort__media { position: relative; }
.flc-testkort__media .fl-platshallare { --ratio: 4 / 3; }
.flc-testkort__rang {
  position: absolute; top: var(--fl-luft-3); left: var(--fl-luft-3); z-index: 1;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--fl-radie-pill);
  background: var(--fl-skymning); color: var(--fl-glod);
  font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-md);
}
.flc-testkort__hoger { display: flex; flex-direction: column; gap: var(--fl-luft-4); min-width: 0; }
.flc-testkort__topp { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--fl-luft-3); justify-content: space-between; }
.flc-testkort__titelblock { display: flex; flex-direction: column; gap: var(--fl-luft-1); }
.flc-testkort__marke { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.flc-testkort__titel { margin: 0; font-size: var(--fl-text-xl); }
.flc-testkort__titel a { color: var(--fl-text); text-decoration: none; }
.flc-testkort__titel a:hover { color: var(--fl-accent-hover); }
.flc-testkort__omdome { margin: 0; color: var(--fl-text-mjuk); font-size: var(--fl-text-base); line-height: var(--fl-lh-brod); max-width: 62ch; }
.flc-testkort__utmarkelser { display: flex; flex-wrap: wrap; gap: var(--fl-luft-2); }
.flc-testkort__fot {
  margin-top: var(--fl-luft-2);
  padding-top: var(--fl-luft-5);
  border-top: 1px solid var(--fl-linje);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fl-luft-4);
}
.flc-testkort__pris { display: flex; align-items: baseline; gap: var(--fl-luft-2); }
.flc-testkort__pris-tal { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-lg); color: var(--fl-text); }
.flc-testkort__pris-etikett { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
@media (max-width: 760px) {
  .flc-testkort { grid-template-columns: 1fr; gap: var(--fl-luft-5); padding: var(--fl-luft-5); }
}

/* Nyckelspec-rutnät i testkort (kompakt men luftigt) */
.flc-nyckelspecs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--fl-luft-4); margin: 0;
}
.flc-nyckelspecs > div { display: flex; flex-direction: column; gap: 2px; }
.flc-nyckelspecs dt {
  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);
}
.flc-nyckelspecs dd { margin: 0; font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); font-size: var(--fl-text-md); color: var(--fl-text); }


/* =============================================================================
   8. METODIK-BLOCK ("Så testar vi") — lugnt, förtroendeingivande
   ========================================================================== */
.flc-metodik {
  padding: var(--fl-luft-8) var(--fl-luft-7);
  background: var(--fl-bg-mjuk);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.flc-metodik__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--fl-luft-6);
  margin-top: var(--fl-luft-6);
}
.flc-metodik__post { display: flex; flex-direction: column; gap: var(--fl-luft-3); }
.flc-metodik__nr {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--fl-radie-pill);
  background: var(--fl-accent-mjuk); color: var(--fl-kicker-farg);
  font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-md);
}
[data-fl-tema="morkt"] .flc-metodik__nr { color: var(--fl-barnsten); }
.flc-metodik__post h3 { margin: 0; font-size: var(--fl-text-md); }
.flc-metodik__post p { margin: 0; font-size: var(--fl-text-base); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }


/* =============================================================================
   9. PRODUKTSIDA — galleri, spectabell, prisjämförelse
   ========================================================================== */
.flc-produktsida { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--fl-luft-8); align-items: start; }
@media (max-width: 900px) { .flc-produktsida { grid-template-columns: 1fr; gap: var(--fl-luft-7); } }

/* Galleri: stor bild + miniatyrer */
.flc-galleri { display: grid; gap: var(--fl-luft-4); position: sticky; top: calc(var(--fl-header-h) + var(--fl-luft-5)); }
@media (max-width: 900px) { .flc-galleri { position: static; } }
.flc-galleri__stor .fl-platshallare { --ratio: 4 / 3; }
.flc-galleri__miniatyrer { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fl-luft-3); }
.flc-galleri__mini {
  padding: 0; border: 2px solid var(--fl-linje); border-radius: var(--fl-radie); overflow: hidden;
  background: none; cursor: pointer;
  transition: border-color var(--fl-tid) var(--fl-ease);
}
.flc-galleri__mini .fl-platshallare { --ratio: 1 / 1; border-radius: 0; }
.flc-galleri__mini[aria-pressed="true"] { border-color: var(--fl-accent); }
.flc-galleri__mini:hover { border-color: var(--fl-linje-stark); }

/* Produktöversikt (höger spalt) */
.flc-produktinfo { display: flex; flex-direction: column; gap: var(--fl-luft-5); }
.flc-produktinfo__marke { font-family: var(--fl-font-ui); font-size: var(--fl-text-base); color: var(--fl-text-svag); margin: 0; }
.flc-produktinfo h1 { margin: 0; font-size: clamp(2rem, 4vw, var(--fl-text-3xl)); }
.flc-produktinfo__betygsrad { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fl-luft-4); }
.flc-produktinfo__sammanfattning { margin: 0; font-size: var(--fl-text-md); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }

/* Snabbspec-rutnät högst upp */
.flc-snabbspec {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fl-luft-4);
  margin: 0; padding: var(--fl-luft-5);
  background: var(--fl-bg-mjuk); border-radius: var(--fl-radie-md);
}
.flc-snabbspec > div { display: flex; flex-direction: column; gap: 2px; }
.flc-snabbspec dt { 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); }
.flc-snabbspec dd { margin: 0; font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); font-size: var(--fl-text-md); color: var(--fl-text); }

/* Köp-panel: pris + bästa pris + CTA */
.flc-koppanel {
  padding: var(--fl-luft-6);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
  box-shadow: var(--fl-skugga-1);
  display: flex; flex-direction: column; gap: var(--fl-luft-4);
}
.flc-koppanel__pris { display: flex; align-items: baseline; gap: var(--fl-luft-3); flex-wrap: wrap; }
.flc-koppanel__tal { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-2xl); color: var(--fl-text); line-height: 1; }
.flc-koppanel__fran { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.flc-koppanel .fl-knapp { width: 100%; }


/* =============================================================================
   10. PRISJÄMFÖRELSE — återförsäljarlista
   ========================================================================== */
.flc-priser { display: grid; gap: var(--fl-luft-2); }
.flc-pris {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--fl-luft-5); align-items: center;
  padding: var(--fl-luft-4) var(--fl-luft-5);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-md);
  transition: border-color var(--fl-tid) var(--fl-ease);
}
.flc-pris:hover { border-color: var(--fl-linje-stark); }
.flc-pris--bast { border-color: var(--fl-trygg); background: rgba(63,143,106,0.06); }
[data-fl-tema="morkt"] .flc-pris--bast { background: rgba(111,147,82,0.12); }
.flc-pris__butik { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flc-pris__namn { font-family: var(--fl-font-ui); font-weight: var(--fl-vikt-fet); color: var(--fl-text); }
.flc-pris__not { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }
.flc-pris__tal { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-md); color: var(--fl-text); white-space: nowrap; }
@media (max-width: 520px) {
  .flc-pris { grid-template-columns: 1fr auto; gap: var(--fl-luft-3); }
  .flc-pris .fl-knapp { grid-column: 1 / -1; }
}


/* =============================================================================
   11. TESTDATA — uppmätt vs uppgivet (tydlig liten tabell-känsla)
   ========================================================================== */
.flc-matvarden { display: grid; gap: var(--fl-luft-2); margin: 0; }
.flc-matrad {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--fl-luft-5); align-items: baseline;
  padding: var(--fl-luft-3) 0;
  border-bottom: 1px solid var(--fl-linje);
}
.flc-matrad:last-child { border-bottom: 0; }
.flc-matrad__namn { font-family: var(--fl-font-ui); color: var(--fl-text-mjuk); }
.flc-matrad__varde { font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); color: var(--fl-text); text-align: right; }
.flc-matrad__varde small { display: block; font-family: var(--fl-font-ui); font-weight: var(--fl-vikt-normal); font-size: var(--fl-text-xs); color: var(--fl-text-svag); letter-spacing: var(--fl-sparrning-versal); text-transform: uppercase; }
.flc-matrad__diff { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: var(--fl-vikt-fet); text-align: right; }
.flc-matrad__diff--over { color: var(--fl-fara); }
.flc-matrad__diff--under { color: var(--fl-trygg); }
.flc-matrad__diff--lika { color: var(--fl-text-svag); }
[data-fl-tema="morkt"] .flc-matrad__diff--over { color: #f08a72; }


/* =============================================================================
   12. "VAR DEN RANKAR" — liten kontextruta som länkar till bäst-i-test
   ========================================================================== */
.flc-rankar {
  display: flex; align-items: center; gap: var(--fl-luft-5); flex-wrap: wrap;
  padding: var(--fl-luft-6);
  background: var(--fl-bg-mjuk);
  border-radius: var(--fl-radie-lg);
}
.flc-rankar__pos {
  display: grid; place-items: center;
  width: 64px; height: 64px; flex: none;
  border-radius: var(--fl-radie-pill);
  background: var(--fl-accent-mjuk);
  color: var(--fl-kicker-farg);
  font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart);
  line-height: 1;
}
[data-fl-tema="morkt"] .flc-rankar__pos { color: var(--fl-barnsten); }
.flc-rankar__pos span { font-size: var(--fl-text-2xl); }
.flc-rankar__pos small { font-size: var(--fl-text-xs); }
.flc-rankar__text { flex: 1; min-width: 220px; }
.flc-rankar__text p { margin: 0 0 var(--fl-luft-1); }
.flc-rankar__text h3 { margin: 0; font-size: var(--fl-text-md); }


/* =============================================================================
   13. SEO-COPY-BLOCK (facettsidor) — substantiell brödtext, kontrollerad bredd
   ========================================================================== */
.flc-copy { max-width: var(--fl-bredd-text); }
.flc-copy > :first-child { margin-top: 0; }

/* Märkesblock (märkesfacett) — om varumärket, med liten logotyp-platshållare */
.flc-marke {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fl-luft-6); align-items: start;
  padding: var(--fl-luft-7);
  background: var(--fl-bg-upphojd);
  border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg);
}
.flc-marke__logga {
  width: 96px; height: 96px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--fl-radie-md);
  background: var(--fl-bg-mjuk);
  border: 1px solid var(--fl-linje);
  font-family: var(--fl-font-display); font-weight: var(--fl-vikt-svart); font-size: var(--fl-text-lg);
  color: var(--fl-text-mjuk);
  text-align: center; line-height: 1.1; padding: var(--fl-luft-3);
}
.flc-marke__kropp h2 { margin: 0 0 var(--fl-luft-4); }
.flc-marke__kropp p { margin: 0 0 var(--fl-luft-4); color: var(--fl-text-mjuk); }
.flc-marke__kropp p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .flc-marke { grid-template-columns: 1fr; gap: var(--fl-luft-4); } }


/* =============================================================================
   14. RELATERADE FACETTER — chip-moln
   ========================================================================== */
.flc-relfacetter { display: flex; flex-wrap: wrap; gap: var(--fl-luft-3); }


/* Temaväxlaren flyttad till footerns botten-rad, se fl-header-footer.css (.fl-footer__tema) */

/* =============================================================================
   PASSAR FÖR — behov-taggar på produktsidan (härledda ur behov-taxonomin).
   Tydligare än generiska .fl-tagg: grön naturton, touch-vänliga pillar.
   ========================================================================== */
.fl-passar { margin-top: var(--fl-luft-7); }
.fl-passar__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; color: var(--fl-text-svag);
}
.fl-passar__rubrik svg { width: 16px; height: 16px; color: var(--fl-trad); flex: none; }
[data-fl-tema="morkt"] .fl-passar__rubrik svg { color: var(--fl-gras); }
.fl-passar__lista { display: flex; flex-wrap: wrap; gap: var(--fl-luft-3); margin: 0; padding: 0; list-style: none; }
.fl-passar__tagg {
  display: inline-flex; align-items: center; gap: var(--fl-luft-2);
  min-height: 40px; padding: 0.4em 1.1em;
  background: rgba(63, 143, 106, 0.10); border: 1px solid rgba(63, 143, 106, 0.30);
  border-radius: var(--fl-radie-pill);
  font-family: var(--fl-font-ui); font-size: var(--fl-text-base); font-weight: var(--fl-vikt-medium);
  color: var(--fl-text); text-decoration: none;
  transition: border-color var(--fl-tid) var(--fl-ease), background var(--fl-tid) var(--fl-ease);
}
.fl-passar__tagg svg { width: 16px; height: 16px; color: var(--fl-trad); flex: none; }
[data-fl-tema="morkt"] .fl-passar__tagg { background: rgba(111, 147, 82, 0.16); border-color: rgba(111, 147, 82, 0.34); }
[data-fl-tema="morkt"] .fl-passar__tagg svg { color: var(--fl-gras); }
.fl-passar__tagg:hover { border-color: var(--fl-trad); background: rgba(63, 143, 106, 0.18); color: var(--fl-text); }


/* =============================================================================
   KÖPGUIDE (låst slug) — redaktionell köphjälp
   ========================================================================== */
.flc-kopguide-topp { padding-bottom: var(--fl-luft-6); }
.flc-kopguide-topp h1 { margin: var(--fl-luft-3) 0 var(--fl-luft-4); }
.flc-kopguide-topp__lead {
  max-width: 60ch;
  margin: 0;
  font-size: var(--fl-text-lg);
  line-height: var(--fl-lh-normal);
  color: var(--fl-text-mjuk);
}
.flc-kopguide-topp__hjalp { margin: var(--fl-luft-4) 0 0; font-size: var(--fl-text-base); color: var(--fl-text-mjuk); }

/* Länk-variant av väljkorten (beslutsrutter ur behov-taxonomin) */
.flc-valjkort--lankar .flc-valjkort__kort {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.flc-valjkort--lankar .flc-valjkort__kort:hover {
  border-color: var(--fl-trad);
  transform: translateY(-2px);
  box-shadow: var(--fl-skugga-mjuk, 0 6px 20px rgba(0,0,0,.08));
}
.flc-valjkort__mer {
  display: inline-flex;
  align-items: center;
  gap: var(--fl-luft-2);
  margin-top: var(--fl-luft-4);
  font-size: var(--fl-text-sm);
  font-weight: 600;
  color: var(--fl-kicker-farg);
}
[data-fl-tema="morkt"] .flc-valjkort__mer { color: var(--fl-barnsten); }
.flc-valjkort__mer svg { width: 16px; height: 16px; }
.flc-valjkort--lankar .flc-valjkort__kort:hover .flc-valjkort__mer svg { transform: translateX(3px); transition: transform .15s ease; }

/* CTA till bäst i test */
.flc-kopguide-cta { margin-top: var(--fl-luft-7); text-align: center; }
.fl-knapp--stor { font-size: var(--fl-text-md); padding: var(--fl-luft-4) var(--fl-luft-7); gap: var(--fl-luft-3); }
.fl-knapp--stor svg { width: 18px; height: 18px; }

/* Pil-länk (inline, t.ex. "Läs hela köpguiden") */
.fl-lank-pil {
  display: inline-flex; align-items: center; gap: var(--fl-luft-2);
  font-weight: 600; color: var(--fl-kicker-farg); text-decoration: none;
}
.fl-lank-pil:hover { text-decoration: underline; }
.fl-lank-pil:hover svg { transform: translateX(3px); transition: transform .15s ease; }
[data-fl-tema="morkt"] .fl-lank-pil { color: var(--fl-barnsten); }


/* =============================================================================
   HERO-FOTO via mediabiblioteket — riktig responsiv <picture> bakom gradienten
   (LCP-bild: eager + fetchpriority). Gradienten behålls identisk som overlay.
   ========================================================================== */
.fl-herofoto { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fl-herofoto img, .fl-herofoto picture { width: 100%; height: 100%; }
.fl-herofoto img { object-fit: cover; object-position: center; display: block; }

.flc-hero--bild { background: var(--fl-skymning); }
.flc-hero--bild .fl-herofoto img { object-position: center 30%; }
.flc-hero--bild::after {
  content: ""; position: absolute; inset: 0; z-index: 1; display: block;
  opacity: 1; height: auto; clip-path: none;
  background:
    linear-gradient(90deg, rgba(7,10,20,0.85) 0%, rgba(7,10,20,0.6) 46%, rgba(7,10,20,0.28) 100%),
    linear-gradient(0deg, rgba(7,10,20,0.55), rgba(7,10,20,0.12) 60%);
}
.flc-hero--bild .flc-hero__inner { z-index: 2; }


/* =============================================================================
   JÄMFÖRTABELL (datatillgång) + R-värdeskala
   ========================================================================== */
.fl-jmf { width: 100%; border-collapse: collapse; font-size: var(--fl-text-sm); }
.fl-jmf th, .fl-jmf td { padding: var(--fl-luft-3); text-align: left; border-bottom: 1px solid var(--fl-linje); vertical-align: middle; }
.fl-jmf thead th { border-bottom: 2px solid var(--fl-linje); white-space: nowrap; font-size: var(--fl-text-xs, .74rem); text-transform: uppercase; letter-spacing: .03em; color: var(--fl-text-mjuk); }
.fl-jmf .adm-num, .fl-jmf td.adm-num { text-align: right; font-variant-numeric: tabular-nums; }
.fl-jmf__sort { cursor: pointer; user-select: none; }
.fl-jmf__sort:hover { color: var(--fl-text); }
.fl-jmf__sort[aria-sort="ascending"]::after { content: " ↑"; color: var(--fl-accent); }
.fl-jmf__sort[aria-sort="descending"]::after { content: " ↓"; color: var(--fl-accent); }
.fl-jmf__namn { font-weight: 600; text-decoration: none; color: var(--fl-lank, var(--fl-accent)); display: block; }
.fl-jmf__marke { display: block; font-size: var(--fl-text-xs, .74rem); color: var(--fl-text-mjuk); }
.fl-jmf__utm { display: inline-block; margin-top: 3px; font-size: var(--fl-text-xs, .72rem); background: var(--fl-accent-mjuk); color: var(--fl-kicker-farg); padding: 1px 7px; border-radius: 999px; }
.fl-jmf__rtal { display: block; font-weight: 600; }
.fl-betyg--liten { display: inline-block; padding: 2px 7px; border-radius: 6px; font-weight: 700; font-size: var(--fl-text-xs, .76rem); }
.fl-knapp--sm { padding: 5px 12px; font-size: var(--fl-text-sm); }

/* R-värdeskala (återanvändbar) */
.fl-rskala { margin-top: 4px; min-width: 80px; }
.fl-rskala__spar {
  position: relative; height: 7px; border-radius: 999px;
  background: linear-gradient(90deg, #6fa8d6 0%, #6f9352 42%, #e8a23a 70%, #d8643a 100%);
}
.fl-rskala__tick { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--fl-text, #1a1a1a); transform: translate(-50%, -50%); }
.fl-rskala__tick--2 { border-color: var(--fl-accent); }
.fl-rskala__band { position: absolute; top: 0; bottom: 0; background: rgba(26,26,26,.18); border-radius: 999px; }
.fl-rskala--zoner { min-width: 220px; }
.fl-rskala__zoner { display: flex; margin-top: 3px; font-size: 10px; color: var(--fl-text-mjuk); text-align: center; }
.fl-rskala__zoner span { border-right: 1px solid var(--fl-linje); }
.fl-rskala__zoner span:last-child { border-right: 0; }


/* =============================================================================
   KÖPGUIDE-KALKYLATORER
   ========================================================================== */
.fl-kalk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-luft-5); }
@media (max-width: 760px) { .fl-kalk-grid { grid-template-columns: 1fr; } }
.fl-kalk {
  padding: var(--fl-luft-6); background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg); display: flex; flex-direction: column;
}
.fl-kalk h3 { margin: 0 0 var(--fl-luft-4); font-size: var(--fl-text-md); }
.fl-kalk__intro { margin: 0 0 var(--fl-luft-4); font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }
.fl-kalk__falt { display: flex; flex-direction: column; gap: var(--fl-luft-3); }
.fl-kalk__falt--rad { flex-direction: row; align-items: flex-end; gap: var(--fl-luft-3); }
.fl-kalk label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fl-text-sm); font-weight: 600; flex: 1; }
.fl-kalk select, .fl-kalk input[type="number"] {
  padding: 9px 11px; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie);
  font: inherit; font-weight: 400; background: var(--fl-bg, #fff);
}
.fl-kalk__check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; }
.fl-kalk__check input { width: auto; }
.fl-kalk__plus { padding-bottom: 10px; font-size: var(--fl-text-lg); color: var(--fl-text-mjuk); }
.fl-kalk__resultat { margin-top: var(--fl-luft-5); padding-top: var(--fl-luft-4); border-top: 1px dashed var(--fl-linje); }
.fl-kalk__svar { margin: 0 0 var(--fl-luft-3); font-size: var(--fl-text-md); }
.fl-kalk__not { margin: var(--fl-luft-2) 0 0; font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }
.fl-kalk .fl-rskala { margin-top: var(--fl-luft-3); }


/* =============================================================================
   VÄRMEFLÖDESDIAGRAM (visuell tillgång)
   ========================================================================== */
.fl-varmeflode { margin: 0 0 var(--fl-luft-6); max-width: 560px; }
.fl-varmeflode__svg { width: 100%; height: auto; display: block; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg); background: var(--fl-bg-upphojd); }
.fl-varmeflode figcaption { margin-top: var(--fl-luft-3); font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }
.vf-mark { fill: var(--fl-fjall-djup, #2b3a4a); opacity: .85; }
[data-fl-tema="morkt"] .vf-mark { fill: #11202e; }
.vf-pad { fill: var(--fl-accent, #3f8f6a); }
.vf-kropp { fill: var(--fl-glod, #e8702a); }
.vf-etikett { font-family: var(--fl-font-ui, sans-serif); font-size: 14px; font-weight: 600; fill: var(--fl-text); }
.vf-etikett--ljus { fill: #eef2ff; }
.vf-etikett--pad { fill: #fff; font-size: 13px; }
.vf-etikett--varm { fill: var(--fl-glod, #e8702a); }
.vf-flode path { stroke-linecap: round; stroke-linejoin: round; fill: none; }
.vf-flode--varm path { stroke: var(--fl-glod, #e8702a); stroke-width: 3; }
.vf-flode--varm path[d*="Z"] { fill: var(--fl-glod, #e8702a); stroke: none; }
.vf-flode--svag path { stroke: #6f93d6; stroke-width: 1.6; }
.vf-flode--svag path[d*="Z"] { fill: #6f93d6; stroke: none; }
.vf-sno path { stroke: #cfe0ff; stroke-width: 1.6; stroke-linecap: round; fill: none; }


/* =============================================================================
   HUB-AND-SPOKE-navigering (nav <-> systerytor)
   ========================================================================== */
.fl-spokes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--fl-luft-3); }
.fl-spoke {
  display: flex; flex-direction: column; gap: 2px; padding: var(--fl-luft-4) var(--fl-luft-5);
  background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg);
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease;
}
.fl-spoke:hover { border-color: var(--fl-trad, var(--fl-accent)); transform: translateY(-2px); }
.fl-spoke span { font-family: var(--fl-font-rubrik); font-weight: 600; }
.fl-spoke small { color: var(--fl-text-mjuk); font-size: var(--fl-text-sm); }


/* =============================================================================
   PASSAR / MINDRE BRA FÖR (ärlig vinkel, bäst-i-test + produktsida)
   ========================================================================== */
.flc-passa { margin: var(--fl-luft-3) 0; display: grid; gap: 6px; }
.flc-passa__rad { margin: 0; display: flex; gap: var(--fl-luft-2); font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); }
.flc-passa__rad span:first-child { flex: none; font-weight: 700; width: 18px; text-align: center; }
.flc-passa__rad--ja span:first-child { color: var(--fl-trad, #3f8f6a); }
.flc-passa__rad--nej span:first-child { color: var(--fl-glod, #e8702a); }
.flc-rank__verktyg { margin-top: var(--fl-luft-6); text-align: center; }


/* =============================================================================
   PRODUKTBILDER i listor/kort/detalj (illustrativa ur mediabiblioteket)
   ========================================================================== */
.flc-rad__media picture, .flc-testkort__media picture, .flc-toppval__media picture,
.flc-galleri__stor picture { display: block; width: 100%; }
.flc-produktbild { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: var(--fl-radie-md); }
.flc-toppval__media .flc-produktbild, .flc-galleri__stor .flc-produktbild { aspect-ratio: 3 / 2; }
.flc-testkort__media .flc-produktbild { aspect-ratio: 4 / 3; border-radius: var(--fl-radie); }


/* Köpråd-panel (bäst-i-test, köpvägledning) — vänsterförankrad panel i linje med rubriker/listor.
   Ingen centrering: panelens vänsterkant följer samma innehållskant som resten av sidan. */
.flc-koprad {
  margin: 0;
  background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg); padding: var(--fl-luft-6) var(--fl-luft-7);
}
/* Fyll bredden i stället för en smal kolumn med tomrum: 2 spalter på desktop, som facett-intron. */
.flc-koprad .fl-prose { max-width: none; }
@media (min-width: 760px) {
  .flc-koprad .fl-prose { columns: 2; column-gap: var(--fl-luft-9); }
  .flc-koprad .fl-prose > * { break-inside: avoid; }
  .flc-koprad .fl-prose h2, .flc-koprad .fl-prose h3, .flc-koprad .fl-prose .fl-block-cta { column-span: all; }
  .flc-koprad .fl-prose > :last-child { margin-bottom: 0; }
}
.flc-koprad .fl-block-cta { margin-top: var(--fl-luft-5); }


/* CTA-knapp inne i .fl-prose ska behålla knappstilen (annars vinner .fl-prose a) */
.fl-prose a.fl-knapp { color: var(--_fg, #2a1402); text-decoration: none; }
.fl-prose a.fl-knapp:hover { color: var(--_fg, #2a1402); text-decoration: none; }
.fl-prose a.fl-knapp--pa-morkt { color: var(--fl-sno, #fff); }

/* Spoke-navets rubrik */
.fl-spokes-huvud { margin-bottom: var(--fl-luft-4); }


/* =============================================================================
   PELARSIDA: interaktiv matchare, facettkort, värmeeffektivitet-teaser
   ========================================================================== */
.fl-matchare {
  background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje);
  border-radius: var(--fl-radie-lg); padding: var(--fl-luft-6);
}
.fl-matchare__fragor { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fl-luft-5); }
.fl-matchare__fraga { border: 0; margin: 0; padding: 0; min-width: 0; }
.fl-matchare__fraga legend { padding: 0; margin: 0 0 var(--fl-luft-3); font-weight: 600; font-size: var(--fl-text-sm); }
.fl-matchare__fraga label {
  display: flex; align-items: center; gap: var(--fl-luft-2);
  padding: 8px 10px; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie);
  margin-bottom: 6px; font-size: var(--fl-text-sm); cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.fl-matchare__fraga label:has(input:checked) { border-color: var(--fl-accent); background: var(--fl-accent-mjuk); }
.fl-matchare__fraga input { accent-color: var(--fl-accent); }

.fl-matchare__resultat { margin-top: var(--fl-luft-5); padding-top: var(--fl-luft-5); border-top: 1px dashed var(--fl-linje); }
.fl-matchres__etikett { margin: 0 0 var(--fl-luft-3); font-size: var(--fl-text-xs, .74rem); text-transform: uppercase; letter-spacing: .06em; color: var(--fl-kicker-farg); font-weight: 700; }
.fl-matchres { display: flex; gap: var(--fl-luft-5); align-items: center; }
.fl-matchres__media { flex: none; width: 120px; }
.fl-matchres__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--fl-radie-md); display: block; }
.fl-matchres__topp { display: flex; align-items: baseline; gap: var(--fl-luft-3); flex-wrap: wrap; }
.fl-matchres__namn { margin: 0; font-size: var(--fl-text-lg); }
.fl-matchres__betyg { font-weight: 700; color: var(--fl-accent); font-size: var(--fl-text-sm); }
.fl-matchres__specs { margin: var(--fl-luft-2) 0 var(--fl-luft-4); color: var(--fl-text-mjuk); font-size: var(--fl-text-sm); font-variant-numeric: tabular-nums; }
.fl-matchres__atgard { display: flex; align-items: center; gap: var(--fl-luft-4); flex-wrap: wrap; }
@media (max-width: 520px) { .fl-matchres { flex-direction: column; align-items: stretch; } .fl-matchres__media { width: 100%; } }

/* Facettkort */
.fl-behovkort { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--fl-luft-4); }
.fl-behovkort__kort {
  display: flex; flex-direction: column; gap: 4px; padding: var(--fl-luft-5);
  background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg);
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease;
}
.fl-behovkort__kort:hover { border-color: var(--fl-trad, var(--fl-accent)); transform: translateY(-2px); }
.fl-behovkort__namn { font-family: var(--fl-font-rubrik); font-weight: 600; font-size: var(--fl-text-md); }
.fl-behovkort__besk { color: var(--fl-text-mjuk); font-size: var(--fl-text-sm); flex: 1; }
.fl-behovkort__antal { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--fl-luft-2); font-size: var(--fl-text-sm); font-weight: 600; color: var(--fl-kicker-farg); }
.fl-behovkort__antal svg { width: 15px; height: 15px; }
[data-fl-tema="morkt"] .fl-behovkort__antal { color: var(--fl-barnsten); }

/* Värmeeffektivitet topp 3 */
.fl-efflista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fl-luft-3); max-width: 640px; }
.fl-efflista__rad { display: flex; align-items: center; gap: var(--fl-luft-4); padding: var(--fl-luft-4); background: var(--fl-bg-upphojd); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); text-decoration: none; color: inherit; }
.fl-efflista__rad:hover { border-color: var(--fl-trad, var(--fl-accent)); }
.fl-efflista__rank { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--fl-accent); color: #2a1402; font-weight: 700; }
.fl-efflista__namn { flex: 1; font-weight: 600; }
.fl-efflista__eff { font-variant-numeric: tabular-nums; color: var(--fl-text-mjuk); font-size: var(--fl-text-sm); }
.fl-efflista__eff strong { color: var(--fl-text); font-size: var(--fl-text-md); }


/* =============================================================================
   FAQ-accordion (bäst-i-test m.fl.)
   ========================================================================== */
.fl-faq { max-width: 760px; }
.fl-faq__item { border-bottom: 1px solid var(--fl-linje); }
.fl-faq__item:first-child { border-top: 1px solid var(--fl-linje); }
.fl-faq__fraga {
  list-style: none; cursor: pointer; padding: var(--fl-luft-4) var(--fl-luft-6) var(--fl-luft-4) 0;
  font-family: var(--fl-font-rubrik); font-weight: 600; font-size: var(--fl-text-md);
  position: relative; display: block;
}
.fl-faq__fraga::-webkit-details-marker { display: none; }
.fl-faq__fraga::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.4em; font-weight: 400; color: var(--fl-accent); line-height: 1;
}
.fl-faq__item[open] .fl-faq__fraga::after { content: "\2212"; }
.fl-faq__svar { padding: 0 0 var(--fl-luft-5); }
.fl-faq__svar p { margin: 0; max-width: var(--fl-bredd-text); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }

/* Facett: unik motivering per produkt (icke-doorway rankningssida) */
.flc-motiv { display: flex; gap: var(--fl-luft-2); align-items: flex-start; margin: var(--fl-luft-2) 0 0; font-size: var(--fl-text-sm); line-height: var(--fl-lh-normal); color: var(--fl-text-mjuk); }
.flc-motiv__ikon { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; margin-top: 2px; }
.flc-motiv__ikon svg { width: 13px; height: 13px; }
.flc-motiv--ja .flc-motiv__ikon { background: #e7f4ec; color: #2f8f5b; }
.flc-motiv--nej .flc-motiv__ikon { background: #fdeede; color: #c25a1a; }

/* Produktsida: härledda mått (differentierare mot e-butiker) */
.flc-harledd { margin-top: var(--fl-luft-6); padding: var(--fl-luft-5); background: var(--fl-bg-mjuk); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); }
.flc-harledd__rubrik { margin: 0 0 var(--fl-luft-4); 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); }
.flc-harledd__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--fl-luft-5); margin: 0; }
.flc-harledd__grid dt { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }
.flc-harledd__grid dd { margin: var(--fl-luft-1) 0; font-family: var(--fl-font-display); font-size: var(--fl-text-xl); font-weight: var(--fl-vikt-fet); color: var(--fl-text); }
.flc-harledd__grid dd small { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: 400; color: var(--fl-text-svag); }
.flc-harledd__not { margin: 0; font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); }

/* Produktsida: fältverklighet, alternativ, byline */
.flc-falt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--fl-luft-4); margin-top: var(--fl-luft-5); }
.flc-falt__kort { padding: var(--fl-luft-4) var(--fl-luft-5); background: var(--fl-bg-mjuk); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); }
.flc-falt__rubrik { margin: 0 0 var(--fl-luft-2); font-family: var(--fl-font-display); font-size: var(--fl-text-md); font-weight: var(--fl-vikt-fet); }
.flc-falt__kort p { margin: 0; font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); line-height: var(--fl-lh-normal); }
.flc-altrad { display: grid; gap: var(--fl-luft-3); margin-top: var(--fl-luft-5); }
.flc-altkort { display: flex; align-items: center; gap: var(--fl-luft-4); padding: var(--fl-luft-3) var(--fl-luft-4); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); text-decoration: none; color: inherit; transition: border-color 0.15s ease, background 0.15s ease; }
.flc-altkort:hover { border-color: var(--fl-accent); background: var(--fl-bg-mjuk); }
.flc-altkort__media { flex: 0 0 auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.flc-altkort__media img { max-width: 100%; max-height: 64px; object-fit: contain; }
.flc-altkort__kropp { flex: 1; min-width: 0; }
.flc-altkort__namn { display: block; font-family: var(--fl-font-display); font-weight: var(--fl-vikt-fet); }
.flc-altkort__text { display: block; font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flc-byline { margin-top: var(--fl-luft-8); padding-top: var(--fl-luft-5); border-top: 1px solid var(--fl-linje); font-size: var(--fl-text-sm); color: var(--fl-text-svag); }

/* Utrustningskatalog: klickbara avdelningskort (kliv in i ett område, som en katalog) */
.flc-avd { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--fl-luft-4); }
.flc-avdkort { display: flex; flex-direction: column; align-items: flex-start; gap: var(--fl-luft-3); background: var(--fl-sno, #fff); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-lg); padding: var(--fl-luft-5); min-height: 168px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
a.flc-avdkort:hover { transform: translateY(-3px); box-shadow: var(--fl-skugga-2); border-color: var(--fl-accent); }
.flc-avdkort__ikon { width: 54px; height: 54px; border-radius: 15px; background: var(--fl-accent-mjuk); color: var(--fl-accent-hover); display: grid; place-items: center; }
.flc-avdkort__ikon svg { width: 28px; height: 28px; }
.flc-avdkort__namn { font-family: var(--fl-font-display); font-size: var(--fl-text-lg); font-weight: var(--fl-vikt-fet); line-height: 1.15; }
.flc-avdkort__meta { font-family: var(--fl-font-ui); font-size: var(--fl-text-sm); font-weight: 600; color: var(--fl-accent-hover); margin-top: auto; }
.flc-avdkort--snart { opacity: .72; }
.flc-avdkort--snart .flc-avdkort__meta { color: var(--fl-text-svag); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }

/* Produktgalleri: primärbild contain i vit box (beskär inte produkten) + miniatyrer */
.flc-galleri__stor { background: #fff; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); overflow: hidden; }
.flc-galleri__stor .flc-produktbild { aspect-ratio: 1 / 1; object-fit: contain; padding: 7%; box-sizing: border-box; border-radius: 0; background: #fff; }
.flc-galleri__mini { background: #fff; }
.flc-galleri__mini .flc-produktbild { aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; box-sizing: border-box; border-radius: 0; background: #fff; }

/* Produktgalleri: zoom-knapp, bildtext, miniatyrer, lightbox */
.flc-galleri__stor { position: relative; }
.flc-galleri__zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: #fff; cursor: zoom-in; }
.flc-galleri__zoomikon { position: absolute; right: 10px; bottom: 10px; background: rgba(16, 20, 30, 0.55); color: #fff; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; pointer-events: none; }
.flc-galleri__zoomikon svg { width: 18px; height: 18px; }
.flc-galleri__bildtext { font-size: var(--fl-text-sm); color: var(--fl-text-mjuk); margin: var(--fl-luft-3) 0 0; text-align: center; }
.flc-galleri__mini { cursor: pointer; }
.flc-galleri__mini img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: 8%; box-sizing: border-box; background: #fff; display: block; }
.flc-galleri__mini.is-aktiv { border-color: var(--fl-accent); }
.fl-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 12, 20, 0.92); display: grid; place-items: center; padding: 24px; }
.fl-lightbox img { max-width: min(92vw, 1100px); max-height: 90vh; object-fit: contain; background: #fff; border-radius: 10px; }
.fl-lightbox__stang { position: absolute; top: 14px; right: 22px; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }

/* Tillverkar-infobox på produktsidan */
.flc-tillverkare { display: flex; align-items: center; gap: var(--fl-luft-4); margin-top: var(--fl-luft-4); padding: var(--fl-luft-4); background: var(--fl-bg-mjuk); border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); }
.flc-tillverkare__logo { flex: 0 0 auto; width: 68px; height: 46px; display: grid; place-items: center; background: #fff; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie); padding: 6px; box-sizing: border-box; }
.flc-tillverkare__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.flc-tillverkare__kropp { display: flex; flex-direction: column; gap: 2px; font-size: var(--fl-text-sm); min-width: 0; }
.flc-tillverkare__namn { font-weight: 700; font-family: var(--fl-font-ui); color: var(--fl-text); }

/* Utgången-produkt-banner */
.flc-utgangen { display: flex; flex-direction: column; gap: 2px; margin: 0 0 var(--fl-luft-4); padding: var(--fl-luft-3) var(--fl-luft-4); background: #fbf3e6; border: 1px solid #e6d4b0; border-left: 4px solid #c98a2b; border-radius: var(--fl-radie-md); }
.flc-utgangen__rubrik { margin: 0; font-family: var(--fl-font-ui); font-weight: 700; font-size: var(--fl-text-sm); letter-spacing: .02em; text-transform: uppercase; color: #9a6416; }
.flc-utgangen__text { margin: 0; color: var(--fl-text); }

/* Kategori-showcase: ämneskort med toppprodukter (visuell förhandstitt) */
.flc-amneslista { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fl-luft-4); }
.flc-amneskort { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md); padding: var(--fl-luft-4); text-align: center; }
.flc-amneskort__titel { margin: 0; font-size: var(--fl-text-md, 1.15rem); }
.flc-amneskort__titel a { color: var(--fl-text); text-decoration: none; }
.flc-amneskort__titel a:hover { color: var(--fl-accent-hover); }
.flc-amneskort__antal { margin: 5px 0 0; color: var(--fl-text-svag); font-size: var(--fl-text-sm); }
.flc-amneskort__cta { margin-top: auto; align-self: center; }
/* Toppprodukterna som en lätt vinklad kollektion av vita kort */
.flc-amneskort__kollektion { display: flex; justify-content: center; align-items: flex-end; padding: var(--fl-luft-4) 0; }
.flc-amneskort__ko {
  flex: 0 0 auto; width: clamp(74px, 8.5vw, 104px);
  display: flex; flex-direction: column; position: relative;
  background: #fff; border: 1px solid var(--fl-linje); border-radius: var(--fl-radie-md);
  box-shadow: var(--fl-skugga-2); padding: 10px 10px 9px;
  text-decoration: none; color: var(--fl-text); transform-origin: bottom center;
  transition: transform .3s var(--fl-ease), box-shadow .3s var(--fl-ease);
}
.flc-amneskort__ko:nth-child(1) { transform: rotate(-7deg); z-index: 1; margin-right: -18px; }
.flc-amneskort__ko:nth-child(2) { transform: translateY(-12px); z-index: 3; }
.flc-amneskort__ko:nth-child(3) { transform: rotate(7deg); z-index: 1; margin-left: -18px; }
.flc-amneskort__ko:hover, .flc-amneskort__ko:focus-visible { transform: translateY(-20px) rotate(0deg) scale(1.04); z-index: 5; box-shadow: var(--fl-skugga-3); outline: none; }
.flc-amneskort__ko-media { aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.flc-amneskort__ko-media picture { display: contents; }
.flc-amneskort__ko .flc-amneskort__pbild { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.flc-amneskort__ko-namn { margin-top: 8px; font-size: var(--fl-text-xs, 0.78rem); font-weight: 600; line-height: 1.2; text-align: center; color: var(--fl-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flc-amneskort__ko-betyg { position: absolute; top: 7px; right: 7px; z-index: 2; box-shadow: var(--fl-skugga-1); }
@media (max-width: 900px) { .flc-amneslista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .flc-amneslista { grid-template-columns: 1fr; }
  .flc-amneskort__ko { width: clamp(96px, 26vw, 128px); }
  .flc-amneskort__ko:nth-child(1) { margin-right: -22px; }
  .flc-amneskort__ko:nth-child(3) { margin-left: -22px; }
}

/* Facett-intro: fyll bredden (2 kolumner på desktop) i stället för en smal kolumn med tomrum, och mindre luft. */
.flc-sektion.flc-facett-introsektion { padding-block: var(--fl-luft-6); }
.flc-facett-intro { max-width: none; }
.flc-facett-intro p { max-width: none; }
@media (min-width: 760px) {
  .flc-facett-intro { columns: 2; column-gap: var(--fl-luft-9); }
  .flc-facett-intro p { margin-bottom: var(--fl-luft-4); break-inside: avoid; }
  .flc-facett-intro p:last-of-type { margin-bottom: 0; }
  .flc-facett-intro .fl-block-cta { column-span: all; margin: var(--fl-luft-5) 0 0; }
}

/* Katalog: gruppetiketter (FAS-anpassad utrustningskatalog) */
.flc-avd__grupp { margin: var(--fl-luft-7) 0 var(--fl-luft-4); }
.flc-avd__grupp:first-child { margin-top: 0; }