/* Biotherm Heat · Vanliga frågor (ovanpå bas.css och sajt.css). Byggd av kalla/vf_2026.py (2026-10-21) – ändra där.
   Hjälte med sökningen först och frågetecknet i flödestextur · ämnesraden som klistras under sidhuvudet och filtrerar ·
   ämnets rubrik till vänster, frågorna till höger (utfällbara <details>) · avslutningen "Hittade du inte svaret?". */

/* ---------- hjälte: rubriken, ingressen och sökfältet ---------- */
.fr-hero { position: relative; padding-top: clamp(124px, 10vw, 168px); padding-bottom: clamp(36px, 3.4vw, 56px); overflow: hidden; isolation: isolate; }
.fr-hero::before { content: ""; position: absolute; z-index: -1; right: -8%; bottom: -20%; width: 62%; height: 100%; background: radial-gradient(closest-side, rgba(31, 116, 184, .15), rgba(31, 116, 184, .04) 55%, rgba(31, 116, 184, 0)); pointer-events: none; }
.fr-hero-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: end; }
.fr-hero-text { grid-column: 1 / span 8; }
.fr-hero .smulor { margin-bottom: 30px; }
.fr-hero h1 { margin-top: 22px; font-size: clamp(3rem, 1.6rem + 3.8vw, 6rem); }
.fr-hero .t-ingress { margin-top: 24px; max-width: 40ch; }
.fr-tecken-yta { grid-column: 9 / span 4; position: relative; display: flex; justify-content: center; align-items: flex-end; }
.fr-tecken { display: block; width: auto; height: clamp(220px, 22vw, 380px); overflow: visible; }
.fr-tecken text { font-family: "Bricolage Grotesque", sans-serif; font-weight: 760; font-variation-settings: "opsz" 96; }
.fr-tecken-yta::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -22px; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 215, 160, .2), rgba(159, 180, 196, .08) 45%, rgba(31, 116, 184, 0)); pointer-events: none; }

/* sökfältet: stort och först */
.fr-sok { margin-top: clamp(32px, 3vw, 44px); max-width: 720px; }
.fr-sok-falt { position: relative; }
.fr-sok input { width: 100%; height: 66px; padding: 0 56px 0 58px; border: 1px solid var(--linje-2); border-radius: 999px; background: rgba(8, 21, 48, .72); color: var(--is); font-size: 1.1875rem; font-weight: 340; font-variation-settings: "opsz" 20; outline: none; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; -webkit-appearance: none; appearance: none; }
.fr-sok input::placeholder { color: var(--is-3); opacity: 1; }
.fr-sok input::-webkit-search-cancel-button, .fr-sok input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.fr-sok input:hover { border-color: rgba(170, 196, 228, .5); }
.fr-sok input:focus { border-color: var(--bla); box-shadow: 0 0 0 4px rgba(0, 152, 212, .18); background: rgba(8, 21, 48, .92); }
.fr-sok-ikon { position: absolute; left: 24px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--is-3); pointer-events: none; transition: color .3s ease; }
.fr-sok-falt:focus-within .fr-sok-ikon { color: var(--bla); }
.fr-sok-rensa { position: absolute; right: 12px; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center; border-radius: 50%; color: var(--is-2); transition: color .3s ease, background-color .3s ease; }
.fr-sok-rensa[hidden] { display: none; }
.fr-sok-rensa svg { width: 14px; height: 14px; }
.fr-sok-rensa:hover { color: var(--is); background: rgba(238, 243, 250, .07); }
.fr-sok-rad { margin-top: 14px; padding: 0 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: .9375rem; line-height: 1.4; color: var(--is-3); }
.fr-antal { font-variant-numeric: tabular-nums; }
.fr-tel a { color: var(--is); white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(0, 152, 212, .6); text-underline-offset: 4px; }

/* ---------- ämnesraden: klistras under sidhuvudet, ett klick filtrerar ---------- */
.fr-yta { padding-bottom: clamp(64px, 6vw, 112px); }
.fr-flikar { position: sticky; top: 76px; z-index: 20; background: rgba(4, 10, 24, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 var(--linje), inset 0 -1px 0 var(--linje); }
.fr-flikar-rad { display: flex; gap: 8px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; }
.fr-flikar-rad::-webkit-scrollbar { display: none; }
.fr-flik { flex: none; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 18px; border: 1px solid var(--linje-2); border-radius: 999px; font-size: .9875rem; font-weight: 400; color: var(--is-2); white-space: nowrap; transition: color .3s ease, border-color .3s ease, background-color .3s ease, opacity .3s ease; }
.fr-flik:hover { color: var(--is); border-color: rgba(170, 196, 228, .55); }
.fr-flik[aria-pressed="true"] { color: var(--natt); background: var(--is); border-color: var(--is); }
.fr-flik-antal { min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--is-2); background: rgba(170, 196, 228, .12); }
.fr-flik[aria-pressed="true"] .fr-flik-antal { color: var(--is); background: var(--natt); }
.fr-flik.tom { opacity: .35; }
.fr-flik:focus-visible { outline: 2px solid var(--bla); outline-offset: 2px; }

/* ---------- listan: ämnets rubrik till vänster (följer med), frågorna till höger ---------- */
.fr-lista { padding-top: clamp(40px, 4vw, 64px); }
.fr-lista .fr-grupp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); align-items: start; scroll-margin-top: 150px; }
.fr-lista .fr-grupp[hidden] { display: none; }
.fr-grupp + .fr-grupp { margin-top: clamp(56px, 5vw, 88px); }
.fr-grupp-huvud { grid-column: 1 / span 4; position: sticky; top: 168px; padding-top: 20px; }
.fr-grupp-huvud h2 { max-width: 14ch; }
.fr-gantal { margin-top: 10px; font-size: .9375rem; color: var(--is-3); font-variant-numeric: tabular-nums; }
.fr-grupp-fragor { grid-column: 5 / span 8; }
.fr-del { scroll-margin-top: 150px; }
.fr-del + .fr-del { margin-top: 34px; }
.fr-del-namn { padding: 18px 0 6px; 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); }
.fr-fragor { border-bottom: 1px solid var(--linje); }

/* en fråga: tunn linje överst som i broschyrens datarader; linjen värms upp när frågan är öppen */
.fr { position: relative; border-top: 1px solid var(--linje); scroll-margin-top: 108px; interpolate-size: allow-keywords; }
.fr::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, #1f74b8, #9fb4c4 55%, #f29a3c 85%, #ffd7a0); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease); pointer-events: none; }
.fr[open]::before, .fr:target::before { transform: none; }
.fr > summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; column-gap: 28px; align-items: center; padding: 24px 0 25px; cursor: pointer; list-style: none; border-radius: 2px; }
.fr > summary::-webkit-details-marker { display: none; }
.fr > summary::marker { content: ""; }
.fr > summary:focus-visible { outline-offset: 6px; }
.fr-q { font-size: clamp(1.1875rem, 1.02rem + .5vw, 1.5625rem); line-height: 1.28; font-weight: 340; font-variation-settings: "opsz" 32; letter-spacing: -.008em; color: var(--is); text-wrap: pretty; transition: color .3s ease; }
.fr > summary:hover .fr-q { color: #fff; }
.fr-ikon { position: relative; width: 18px; height: 18px; justify-self: end; color: var(--bla); }
.fr-ikon::before, .fr-ikon::after { content: ""; position: absolute; left: 0; top: 50%; width: 18px; height: 1.5px; margin-top: -.75px; border-radius: 2px; background: currentColor; transition: transform .55s var(--ease); }
.fr-ikon::after { transform: rotate(90deg); }
.fr > summary:hover .fr-ikon::before { transform: scaleX(1.12); }
.fr[open] .fr-ikon::after { transform: rotate(0deg); }
/* svaret glider fram där webbläsaren kan (::details-content); annars öppnas det direkt */
.fr::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
.fr[open]::details-content { block-size: auto; }
html.visa-allt .fr::details-content { transition: none; }
@media (prefers-reduced-motion: reduce) { .fr::details-content { transition: none; } }

.fr-svar { padding: 0 48px 38px 0; max-width: 70ch; }
.fr-svar > p { font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem); line-height: 1.6; font-weight: 340; font-variation-settings: "opsz" 18; color: var(--is-2); text-wrap: pretty; }
.fr-svar > p + p { margin-top: 14px; }
.fr-svar > 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; }
.fr-svar > p a:hover { text-decoration-color: var(--bla); }
.fr-svar > p.fr-not { margin-top: 14px; font-size: .9375rem; color: var(--is-3); }
.fr-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px var(--spalt); margin-top: 28px; }
.fr-data > div { padding-top: 12px; border-top: 1px solid var(--linje-2); }
.fr-data dt { font-size: .8125rem; 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); }
.fr-data dd { margin: 8px 0 0; font-size: clamp(1.25rem, 1.08rem + .5vw, 1.625rem); line-height: 1.2; font-weight: 300; font-variation-settings: "opsz" 40; letter-spacing: -.012em; color: var(--is); font-variant-numeric: tabular-nums; }
.fr-knapp { margin-top: 22px; }
.fr-lank { display: flex; width: fit-content; align-items: center; gap: 10px; margin-top: 26px; font-size: .9375rem; color: var(--is-3); transition: color .3s ease; }
.fr-lank::before { content: ""; width: 16px; height: 16px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%230098d4' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M6.6 9.4l2.8-2.8'/%3E%3Cpath d='M7.3 4.4l1.3-1.3a2.6 2.6 0 0 1 3.7 3.7L11 8.1'/%3E%3Cpath d='M8.7 11.6l-1.3 1.3a2.6 2.6 0 0 1-3.7-3.7L5 7.9'/%3E%3C/g%3E%3C/svg%3E") center / 16px no-repeat; }
.fr-lank:hover, .fr-lank.kopierad { color: var(--is); }
.fr mark { background: rgba(0, 152, 212, .3); color: #fff; border-radius: 3px; padding: 0 .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.fr-tom { padding: 8px 0 0; max-width: 46ch; }
.fr-tom .t-brod { margin-top: 14px; }
.fr-tom .t-brod a { color: var(--is); text-decoration: underline; text-decoration-color: rgba(0, 152, 212, .75); text-underline-offset: 4px; }
.fr-tom .lank { margin-top: 24px; }

/* ---------- avslutning: hittade du inte svaret? ---------- */
.fr-slut { position: relative; padding: clamp(40px, 4vw, 72px) 0 var(--sektion); isolation: isolate; }
.fr-slut::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(50% 70% at 72% 100%, rgba(14, 33, 72, .55), rgba(4, 10, 24, 0) 70%); pointer-events: none; }
.fr-slut .rutnat { align-items: end; }
.fr-slut-text { grid-column: 1 / span 5; }
.fr-slut-text .t-etikett { margin-bottom: 30px; }
.fr-slut-text .t-ingress { margin-top: 30px; max-width: 28ch; }
.fr-vagar { grid-column: 7 / span 6; border-bottom: 1px solid var(--linje); }
.fr-vag { position: relative; width: 100%; display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; column-gap: 20px; align-items: center; padding: 28px 0 30px; border-top: 1px solid var(--linje); text-align: left; color: var(--is); }
.fr-vag::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, #1f74b8, #9fb4c4 55%, #f29a3c 85%, #ffd7a0); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease); }
.fr-vag:hover::before, .fr-vag:focus-visible::before { transform: none; }
.fr-vag-nr { align-self: start; padding-top: 10px; font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .14em; color: var(--is-3); font-variant-numeric: tabular-nums; }
.fr-vag-text b { display: block; font-size: clamp(1.5rem, 1.15rem + 1vw, 2.25rem); line-height: 1.12; font-weight: 300; font-variation-settings: "opsz" 48; letter-spacing: -.02em; }
.fr-vag-text span { display: block; margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--is-2); }
.fr-vag .pil { color: var(--bla); transition: transform .6s var(--ease); }
.fr-vag:hover .pil, .fr-vag:focus-visible .pil { transform: translateX(6px); }

/* tätare frågerader och ankarlägen under ämnesraden */
.fr { scroll-margin-top: 150px; }
.fr > summary { padding: 20px 0 21px; }

/* ---------- mellanstora skärmar och mobil ---------- */
@media (max-width: 1100px) {
  .fr-hero-text { grid-column: 1 / span 9; }
  .fr-tecken-yta { grid-column: 10 / span 3; }
  .fr-lista .fr-grupp { display: block; }
  .fr-lista .fr-grupp[hidden] { display: none; }
  .fr-grupp-huvud { position: static; padding-top: 0; margin-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  .fr-grupp-huvud h2 { max-width: none; }
  .fr-gantal { margin-top: 0; white-space: nowrap; }
  .fr-slut-text, .fr-vagar { grid-column: 1 / -1; }
  .fr-vagar { margin-top: 56px; }
}
@media (max-width: 760px) {
  .fr-hero { padding-top: 108px; padding-bottom: 28px; }
  .fr-hero .smulor { margin-bottom: 24px; }
  .fr-hero-text { grid-column: 1 / -1; position: relative; z-index: 1; }
  .fr-hero h1 { font-size: 3.25rem; max-width: 7ch; }
  .fr-hero .t-ingress { font-size: 1.125rem; max-width: none; }
  .fr-tecken-yta { position: absolute; right: -6px; top: 118px; grid-column: auto; z-index: 0; opacity: .9; }
  .fr-tecken { height: 170px; }
  .fr-tecken-yta::after { display: none; }
  .fr-sok { margin-top: 26px; }
  .fr-sok input { height: 58px; padding-left: 50px; font-size: 1.0625rem; }
  .fr-sok-ikon { left: 20px; }
  .fr-sok-rad { padding: 0 6px; flex-direction: column; }
  .fr-flikar { top: 68px; }
  .fr-flikar .bredd { padding-right: 0; }
  .fr-flikar-rad { padding: 10px var(--marg) 10px 0; }
  .fr-flik { height: 38px; padding: 0 12px 0 14px; font-size: .9375rem; }
  .fr-lista { padding-top: 32px; }
  .fr-grupp + .fr-grupp { margin-top: 48px; }
  .fr-grupp, .fr-del, .fr { scroll-margin-top: 136px; }
  .fr > summary { column-gap: 18px; padding: 20px 0 21px; }
  .fr-svar { padding-right: 0; padding-bottom: 30px; }
  .fr-data { grid-template-columns: 1fr 1fr; }
  .fr-vag { grid-template-columns: 32px minmax(0, 1fr) 22px; column-gap: 12px; padding: 24px 0 26px; }
  .fr-vag-text b { font-size: 1.5rem; }
  .fr-vag-text span { font-size: .9375rem; }
  .fr-vagar { margin-top: 44px; }
}