/* Biotherm Heat · kategorisidan Flispannor (flispannor.html, en/wood-chip-boilers.html – 2026-10-26).
   Ovanpå bas.css, sajt.css, produkter.css (produktkort, steg, egenskapsrutor, hjälprutan), foretaget.css (datarader, stora
   textlänkar) och vanliga-fragor.css (frågorna). Här bara det som saknas, i samma stil som Kunskapsbanken och Projekt:
   hjälten med innehållet som stora rader (som kb-hero/kb-index), tabellen (som kb-tabell), kostnadsdrivarna, textblock,
   referenserna (fotona i sin egen proportion, som projektkorten) och frågornas spalter. Ingen ny visuell stil. */

/* ---------- hjälte (som Kunskapsbanken) ---------- */
.fp-hero { position: relative; padding: clamp(128px, 10.5vw, 172px) 0 clamp(8px, 2vw, 32px); overflow: hidden; }
.fp-hero > .topo { opacity: .7; -webkit-mask-image: radial-gradient(60% 70% at 78% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(60% 70% at 78% 30%, #000 10%, transparent 75%); }
.fp-hero-rutnat { position: relative; z-index: 1; align-items: start; row-gap: clamp(56px, 5vw, 80px); }
.fp-hero-text { grid-column: 1 / span 9; }
.fp-hero .smulor { margin-bottom: clamp(32px, 3.4vw, 56px); }
.fp-hero h1 { margin-top: 26px; font-size: clamp(3rem, 1.4rem + 4.2vw, 6.5rem); }
.fp-hero .t-ingress { margin-top: 30px; max-width: 42ch; }
.fp-knappar { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.fp-hero-rad { margin-top: 28px; }
/* innehållet som stora rader (ankarlänkar), två grupper */
.fp-index { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.4vw, 84px); row-gap: 44px; align-items: start; }
.fp-index .t-etikett { margin-bottom: 14px; }
.fp-index ol { border-top: 1px solid var(--linje-2); }
.fp-index a { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 22px; align-items: baseline; column-gap: 8px; padding: 16px 0 15px; border-bottom: 1px solid var(--linje); }
.fp-index a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--flode); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.fp-index a::after { content: ""; align-self: center; width: 16px; height: 1.4px; background: var(--bla); justify-self: end; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .5s var(--ease); }
.fp-index a:hover::before, .fp-index a:focus-visible::before { transform: scaleX(1); }
.fp-index a:hover::after, .fp-index a:focus-visible::after { opacity: 1; transform: none; }
.fp-index .nr { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; color: var(--is-3); font-variant-numeric: tabular-nums; }
.fp-index b { display: block; font-size: clamp(1.1875rem, 1.02rem + .5vw, 1.5rem); line-height: 1.2; font-weight: 320; letter-spacing: -.012em; color: var(--is); font-variation-settings: "opsz" 40; }
.fp-index small { display: block; margin-top: 4px; font-size: .9375rem; line-height: 1.45; color: var(--is-3); }

/* ---------- gemensamt i avsnitten ---------- */
.fp-under { display: block; margin-top: clamp(56px, 5.6vw, 96px); margin-bottom: 18px; }
.sek-huvud + .fp-under { margin-top: 0; }
.fp-under + .fo-vidare-lista { margin-top: 0; }
.fp-lankar { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 36px; }
.lank.dampad { color: var(--is-2); }
.lank.dampad:hover { color: var(--is); }
.fp-sek .fo-data + .fp-text, .fp-sek .fo-data + .fp-knappar { margin-top: clamp(40px, 4vw, 64px); }
.fp-pris-data, .fp-inst-data { margin-top: clamp(40px, 4vw, 64px); }
.fp-not { margin-top: 16px; }
/* länkar i löptext (som svaren på Vanliga frågor) */
.fp-text p a, .fp-rad a, .fp-fr-v p a { color: var(--is); text-decoration: underline; text-decoration-color: rgba(0, 152, 212, .75); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .3s ease; }
.fp-text p a:hover, .fp-rad a:hover, .fp-fr-v p a:hover { text-decoration-color: var(--bla); }

/* ---------- 01 · fler vägar: fyra stora textlänkar (foretaget.css) ---------- */
.fo-vidare-lista.fp-fyra { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-fyra .fo-v-rubrik { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.875rem); }

/* ---------- 02 · tabellen (som kb-tabell) och tumregeln ---------- */
.fp-tabell-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fp-tabell { width: 100%; border-collapse: collapse; }
.fp-tabell thead th { padding: 0 20px 14px 0; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--linje-2); font-size: .8125rem; line-height: 1.3; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); white-space: nowrap; }
.fp-tabell tbody th, .fp-tabell td { padding: 20px 20px 20px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linje); }
.fp-tabell tr > :last-child { padding-right: 0; }
.fp-tabell tbody th { width: 26%; font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.4375rem); line-height: 1.25; font-weight: 340; letter-spacing: -.01em; color: var(--is); }
.fp-tabell tbody th a { color: var(--is); text-decoration: underline; text-decoration-color: rgba(0, 152, 212, .55); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color .3s ease; }
.fp-tabell tbody th a:hover { text-decoration-color: var(--bla); }
.fp-tabell tbody th small { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.4; font-weight: 380; letter-spacing: 0; color: var(--is-3); }
.fp-tabell td { font-size: 1rem; line-height: 1.55; color: var(--is-2); }
.fp-tabell td.tal { width: 18%; font-size: 1.125rem; line-height: 1.4; color: var(--is); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-tabell tbody tr:hover th, .fp-tabell tbody tr:hover td { background: rgba(238, 243, 250, .025); }
.fp-del { margin-top: clamp(56px, 5.6vw, 96px); align-items: start; row-gap: 32px; }
.fp-del-v { grid-column: 1 / span 5; }
.fp-del-v .t-brod { margin-top: 18px; max-width: 46ch; }
.fp-del-v .fp-lankar { margin-top: 28px; }
.fp-del-h { grid-column: 7 / span 6; }

/* ---------- 03 · det här styr priset: numrerade rader i två spalter ---------- */
.fp-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.4vw, 84px); }
.fp-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; align-content: start; padding: 22px 0 24px; border-top: 1px solid var(--linje); }
.fp-lista li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--linje); }
.fp-nr { grid-row: span 2; padding-top: 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; color: var(--is-3); font-variant-numeric: tabular-nums; }
.fp-lista h3 { font-size: clamp(1.1875rem, 1.05rem + .4vw, 1.4375rem); line-height: 1.25; font-weight: 340; letter-spacing: -.01em; color: var(--is); }
.fp-lista p { margin-top: 8px; font-size: 1rem; line-height: 1.55; color: var(--is-2); max-width: 54ch; text-wrap: pretty; }
.fp-sek .fp-knappar { margin-top: 40px; }

/* ---------- 04 · sex steg på en rad (produkter.css pd-steg): rubrikerna får plats även på 1100–1440 px ---------- */
.fp-sek .pd-steg h3 { hyphens: manual; overflow-wrap: normal; }
@media (min-width: 1101px) {
  .fp-sek .pd-steg h3 { font-size: clamp(1.1875rem, .55rem + .95vw, 1.5rem); }
}

/* ---------- 04 · var pannan kan stå (produkter.css pd-egen) ---------- */
.fp-sek .pd-egen .lank { margin-top: 18px; font-size: .9375rem; }

/* ---------- hjälprutan: länken till säljarna under texten ---------- */
.po-hjalp-in > div > .lank { margin-top: 18px; }

/* ---------- 05–06 · textblock med rubrik ---------- */
.fp-text { margin-top: clamp(48px, 5vw, 80px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(32px, 4.4vw, 84px); }
.fp-text.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); }
.fp-text > div { padding-top: 20px; border-top: 1px solid var(--linje-2); }
.fp-text h3 { font-size: clamp(1.3125rem, 1.15rem + .5vw, 1.75rem); line-height: 1.18; font-weight: 400; font-variation-settings: "opsz" 32; letter-spacing: -.008em; color: var(--is); }
.fp-text p { margin-top: 12px; font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.55; color: var(--is-2); max-width: 58ch; text-wrap: pretty; }
.fp-text .lank { margin-top: 20px; }
.fp-rad { margin-top: clamp(40px, 4vw, 64px); max-width: 62ch; }
.fp-rad + .fp-lankar { margin-top: 24px; }

/* ---------- 08 · referenser: hela fotona i sin egen proportion (som projektkorten), texten på samma linje ---------- */
.fp-ref-rutnat { --tak: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 0; align-items: start; }
@supports (grid-template-rows: subgrid) {
  .fp-ref { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .fp-ref > .fp-ref-foto { align-self: end; }
}
.fp-ref { position: relative; min-width: 0; }
.fp-ref-foto { position: relative; width: calc(100% * min(1, var(--r, 1.3333) * var(--tak))); aspect-ratio: var(--r, 4 / 3); border-radius: 14px; overflow: hidden; }
.fp-ref-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-ref-foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(238, 243, 250, 0); transition: box-shadow .4s ease; pointer-events: none; }
.fp-ref:hover .fp-ref-foto::after { box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .4); }
.fp-ref-text { margin-top: 24px; padding-bottom: clamp(56px, 5vw, 88px); }
.fp-ref-text .t-etikett { font-size: .75rem; }
.fp-ref-rubrik { margin-top: 12px; font-size: clamp(1.5rem, 1.2rem + .7vw, 1.9375rem); line-height: 1.1; font-weight: 300; font-variation-settings: "opsz" 60; letter-spacing: -.018em; text-wrap: balance; }
.fp-ref-rubrik a { color: var(--is); }
.fp-ref-rubrik a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }   /* hela kortet är länken */
.fp-ref-rubrik a:focus-visible { outline: none; }
.fp-ref-rubrik a:focus-visible::after { outline: 2px solid var(--bla); outline-offset: 6px; }
.fp-ref-ingress { margin-top: 12px; font-size: 1rem; line-height: 1.55; color: var(--is-2); text-wrap: pretty; }
.fp-ref-fakta { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--spalt); }
.fp-ref-fakta div { padding-top: 10px; border-top: 1px solid var(--linje-2); }
.fp-ref-fakta dt { font-size: .6875rem; line-height: 1.3; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .14em; text-transform: uppercase; color: var(--is-3); }
.fp-ref-fakta dd { margin-top: 4px; font-size: 1rem; line-height: 1.32; font-weight: 360; color: var(--is); font-variant-numeric: tabular-nums; }
.fp-ref-rutnat + .fp-lankar { margin-top: 0; }

/* ---------- 09 · vanliga frågor: rubriken till vänster, frågorna (vanliga-fragor.css) till höger ---------- */
.fp-fr { align-items: start; row-gap: 40px; }
.fp-fr-v { grid-column: 1 / span 5; position: sticky; top: 120px; }
.fp-fr-v h2 { margin-top: 30px; font-size: clamp(2.375rem, 1.4rem + 2.6vw, 4.25rem); }
.fp-fr-v .t-brod { margin-top: 26px; max-width: 34ch; }
.fp-fr-h { grid-column: 7 / span 6; }
.fp-fr-h .fr-svar { padding-right: 0; }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .fp-hero-text { grid-column: 1 / -1; }
  .fo-vidare-lista.fp-fyra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-del-v, .fp-del-h { grid-column: 1 / -1; }
  .fp-text.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-ref-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fp-fr-v, .fp-fr-h { grid-column: 1 / -1; }
  .fp-fr-v { position: static; }
}
/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .fp-hero { padding-top: 110px; }
  .fp-hero .smulor { margin-bottom: 26px; }
  .fp-hero h1 { margin-top: 20px; font-size: 2.875rem; }
  .fp-hero .t-ingress { margin-top: 24px; font-size: 1.1875rem; }
  .fp-knappar { flex-direction: column; align-items: stretch; gap: 18px; }
  .fp-knappar .knapp { width: 100%; }
  .fp-knappar .lank { justify-content: center; }
  .fp-index { grid-template-columns: 1fr; row-gap: 36px; }
  .fp-index a { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0 13px; }
  .fp-index a::after { display: none; }
  .fp-index b { font-size: 1.1875rem; }
  .fp-index small { font-size: .875rem; }
  .fo-vidare-lista.fp-fyra { grid-template-columns: 1fr; }
  .fp-tabell-wrap { overflow: visible; }
  .fp-tabell, .fp-tabell tbody, .fp-tabell tr { display: block; }
  .fp-tabell thead { display: none; }
  .fp-tabell tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--linje); }
  .fp-tabell tbody tr:first-child { border-top: 1px solid var(--linje-2); }
  .fp-tabell tbody th, .fp-tabell td { display: block; width: auto; padding: 0; border: 0; }
  .fp-tabell tbody th { font-size: 1.1875rem; }
  .fp-tabell td.tal { align-self: start; text-align: right; font-size: 1rem; padding-top: 2px; }
  .fp-tabell td:last-child { grid-column: 1 / -1; margin-top: 10px; font-size: .9375rem; }
  .fp-tabell tbody tr:hover th, .fp-tabell tbody tr:hover td { background: none; }
  .fp-sek .fo-data { grid-template-columns: 1fr; row-gap: 0; }   /* datarader: etiketten till vänster, värdet till höger (som kb-data) */
  .fp-sek .fo-data > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--linje); }
  .fp-sek .fo-data > div:last-child { border-bottom: 1px solid var(--linje); }
  .fp-sek .fo-data dd { margin: 0; text-align: right; font-size: 1.0625rem; }
  .fp-lista { grid-template-columns: 1fr; }
  .fp-lista li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 20px; }
  .fp-lista li:nth-last-child(-n + 2) { border-bottom: 0; }
  .fp-lista li:last-child { border-bottom: 1px solid var(--linje); }
  .fp-lista h3 { font-size: 1.1875rem; }
  .fp-lista p { font-size: .9375rem; }
  .fp-text, .fp-text.tre { grid-template-columns: 1fr; gap: 32px; }
  .fp-lankar { flex-direction: column; align-items: flex-start; gap: 16px; }
  .fp-ref-rutnat { grid-template-columns: 1fr; }
  .fp-ref-text { margin-top: 20px; padding-bottom: 56px; }
  .fp-fr-v h2 { font-size: 2.375rem; }
}