/* Biotherm Heat · produktsidan Fjäderomrörare (produkter/fjaderomrorare.html), ovanpå bas.css och sajt.css.
   Signatur: "Svepet" – planritningen ovanifrån där fjäderarmarna roterar runt navet, med cirklarna 4 och 6 m.
   Runda former, kall och blå. Jättetalen i kall flödestextur som på Förråd. Prefix fj-. */

.fj-hero ~ section[id] { scroll-margin-top: calc(84px - var(--sektion) + clamp(40px, 4vw, 72px)); }

/* jättetal i kall flödestextur (som .fo-textur på Förråd) */
.fj-textur { display: inline-block; font-weight: 760; font-stretch: 78%; font-variation-settings: "opsz" 96; letter-spacing: -.02em; line-height: .84; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums;
  background: url("../bild/produktsidor/forrad-tex.webp") 62% 30% / cover; -webkit-background-clip: text; background-clip: text; color: transparent; }
.fj-textur small { -webkit-text-fill-color: var(--is-3); font-size: .3em; font-weight: 400; font-stretch: 100%; letter-spacing: 0; margin-left: .14em; }

.fj-rader { display: grid; gap: 0 var(--spalt); }
.fj-rader > div { padding: 16px 0 20px; border-top: 1px solid var(--linje); }
.fj-rader dt, .fj-fakta dt { 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); }
.fj-rader dd { margin: 8px 0 0; font-size: 1.0625rem; line-height: 1.5; color: var(--is); }

/* ---------- hjälten: bunkern i blå timmen ---------- */
.fj-hero { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(720px, calc(var(--vh) * 100), 1080px); display: flex; }
.fj-hero-bild { position: absolute; inset: 0; z-index: -1; }
.fj-hero-bild picture, .fj-hero-bild img { display: block; width: 100%; height: 100%; }
.fj-hero-bild img { object-fit: cover; object-position: 62% 50%; }
.fj-hero-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 10, 24, .92) 0%, rgba(4, 10, 24, .7) 28%, rgba(4, 10, 24, 0) 52%), linear-gradient(180deg, rgba(4, 10, 24, .8) 0%, rgba(4, 10, 24, 0) 22%, rgba(4, 10, 24, 0) 62%, var(--natt) 100%); }
.fj-hero-in { position: relative; display: flex; flex-direction: column; padding-top: clamp(116px, 9vw, 150px); padding-bottom: clamp(24px, 2.4vw, 40px); }
.fj-hero-text { margin-top: clamp(22px, 2.6vw, 44px); max-width: 640px; }
.fj-hero-text h1 { margin-bottom: 26px; }
.fj-hero .t-h1 { font-size: clamp(3.25rem, 1.3rem + 5.6vw, 8rem); text-shadow: 0 2px 30px rgba(4, 10, 24, .6); }
.fj-hero-text .t-ingress { margin-top: 28px; max-width: 30em; color: var(--is); }
.fj-knappar { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.fj-hero-fot { margin-top: auto; padding-top: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 5vw, 96px); }
.fj-hero-tal .t-etikett { display: block; margin-bottom: 12px; }
.fj-hero-tal .fj-textur { font-size: clamp(6rem, 2.4rem + 8vw, 11.5rem); }
.fj-fakta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--spalt); padding-bottom: .6em; }
.fj-fakta > div { padding-top: 14px; border-top: 1px solid var(--linje-2); }
.fj-fakta dd { margin: 8px 0 0; font-size: clamp(1.0625rem, .95rem + .3vw, 1.3125rem); font-weight: 340; color: var(--is); }

/* ---------- 01 svepet: planritningen ---------- */
.fj-svep-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 48px; align-items: center; }
.fj-svep-text { grid-column: 8 / -1; }
.fj-svep-text .t-etikett.med-linje { margin-bottom: 30px; }
.fj-tal-6 { display: block; margin-top: 28px; font-size: clamp(7rem, 3rem + 10vw, 14rem); }
.fj-svep-text .t-ingress { margin-top: 26px; }
.fj-svep-text .fj-rader { margin-top: 32px; }

/* ---------- 02 delarna: CAD med utrop ---------- */
.fj-cad { position: relative; margin: 0 auto; max-width: 1240px; }
.fj-cad::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -2%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 116, 184, .2), rgba(31, 116, 184, 0)); z-index: -1; }
.fj-cad img { width: 100%; height: auto; }
.fj-utrop { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 12px; transform: translate(-14px, -14px); white-space: nowrap; font-size: 1rem; font-weight: 420; color: var(--is); text-shadow: 0 1px 12px rgba(4, 10, 24, .95), 0 0 3px rgba(4, 10, 24, .9); pointer-events: none; }
.fj-utrop i { flex: none; order: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .8125rem; font-weight: 500; color: var(--natt); background: var(--is); box-shadow: 0 0 0 5px rgba(238, 243, 250, .14), 0 6px 16px rgba(0, 0, 0, .5); text-shadow: none; }
.fj-utrop::after { content: ""; order: 1; width: 22px; height: 1px; margin: 0 -2px; background: rgba(238, 243, 250, .6); }
.fj-utrop > span { order: 2; }
.fj-utrop.hoger { flex-direction: row-reverse; transform: translate(calc(-100% + 14px), -14px); }
.fj-utrop.ovan { flex-direction: column-reverse; align-items: flex-start; gap: 6px; transform: translate(-14px, calc(-100% + 14px)); }
.fj-utrop.ovan::after { width: 1px; height: 16px; margin: 0 0 0 13.5px; }
.fj-delar-fot { margin-top: clamp(48px, 5vw, 80px); row-gap: 32px; align-items: start; }
.fj-delar-lista { grid-column: 1 / span 8; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--spalt); }
.fj-delar-lista li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; padding-top: 18px; border-top: 1px solid var(--linje); }
.fj-delar-lista .nr { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .8125rem; font-weight: 500; color: var(--natt); background: #e9f0f8; }
.fj-delar-lista b { font-size: 1.1875rem; font-weight: 420; line-height: 28px; }
.fj-delar-lista li > span:last-child { color: var(--is-2); }
.fj-verkstad { grid-column: 10 / -1; padding-top: 18px; border-top: 1px solid var(--linje); color: var(--is-2); }

/* ---------- 03 pannorna: tre pannor ---------- */
.fj-pannor-rad { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--spalt); }
.fj-panna a { position: relative; display: flex; flex-direction: column; height: 100%; padding: 0 0 6px; border-top: 1px solid var(--linje-2); }
.fj-panna-bild { position: relative; height: clamp(240px, 22vw, 380px); display: flex; align-items: flex-end; justify-content: center; padding: 28px 0 20px; }
.fj-panna-bild::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 6px; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 116, 184, .2), rgba(31, 116, 184, 0)); }
.fj-panna-bild img { position: relative; max-width: 78%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .8s var(--ease); }
.fj-panna a:hover .fj-panna-bild img, .fj-panna a:focus-visible .fj-panna-bild img { transform: translateY(-6px); }
.fj-panna .t-etikett { margin-top: 8px; }
.fj-panna-ma .t-etikett { color: var(--bla); }
.fj-panna b { margin-top: 8px; font-size: clamp(1.5rem, 1.2rem + .8vw, 2.125rem); font-weight: 300; letter-spacing: -.015em; line-height: 1.1; }
.fj-panna-eff { margin-top: 6px; color: var(--is-2); font-variant-numeric: tabular-nums; }
.fj-panna .lank { margin-top: 18px; }
.fj-panna a:focus-visible { outline: none; }
.fj-panna a:focus-visible b { text-decoration: underline; text-decoration-color: var(--bla); text-underline-offset: 6px; }
.fj-pannor-vc { margin-top: clamp(40px, 4vw, 64px); padding-top: 20px; border-top: 1px solid var(--linje); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; color: var(--is-2); max-width: 64em; }
/* två rader under varandra (värmecentralen, flispannan – 2026-10-26): den andra utan linje och med luft, som på skrapförrådet */
.fj-pannor-vc + .fj-pannor-vc { margin-top: 18px; padding-top: 0; border-top: 0; }

/* ---------- 04 matning och storlek ---------- */
.fj-tva { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.fj-tva .t-h3 { margin-bottom: 24px; }
.fj-kedja { position: relative; padding-left: 34px; }
.fj-kedja::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #4f7fbf, #9fb4c4 60%, #f29a3c); }
.fj-kedja li { position: relative; padding: 12px 0 14px; border-bottom: 1px solid var(--linje); }
.fj-kedja li::before { content: ""; position: absolute; left: -33px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--natt); box-shadow: inset 0 0 0 2px #9fb4c4; }
.fj-kedja li.varm::before { background: var(--varm); box-shadow: 0 0 0 4px rgba(242, 154, 60, .18); }
.fj-kedja b { display: block; font-size: 1.1875rem; font-weight: 420; }
.fj-kedja span { display: block; margin-top: 4px; color: var(--is-2); }
.fj-matning .t-liten { margin-top: 18px; }
.fj-matning .lank, .fj-dim .lank { margin-top: 22px; }
.fj-dim .t-brod { max-width: 32em; }
.fj-jamfor { margin-top: 30px; display: grid; gap: 18px; --skala: 220; }
.fj-stapel { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "namn varde" "bar bar"; row-gap: 8px; align-items: baseline; }
.fj-stapel-namn { grid-area: namn; font-size: .9375rem; color: var(--is-2); }
.fj-stapel b { grid-area: varde; font-size: 1.375rem; font-weight: 340; font-variant-numeric: tabular-nums; }
.fj-stapel-bar { grid-area: bar; height: 14px; border-radius: 2px; background: rgba(170, 196, 228, .06); position: relative; overflow: hidden; }
.fj-stapel-bar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / var(--skala) * 100%); border-radius: 2px; background: linear-gradient(90deg, #1d3a78, #1f74b8 60%, #8fb2d8); }
.fj-stapel.fjader .fj-stapel-bar::before { background: repeating-linear-gradient(135deg, rgba(185, 200, 214, .7) 0 2px, rgba(185, 200, 214, .16) 2px 7px); }
.js .fj-dim .fj-stapel-bar::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--ease) .2s; }
.js .fj-dim.syns .fj-stapel-bar::before { transform: none; }
.fj-dim .fotnot { margin-top: 18px; }

/* ---------- 05 fler förråd ---------- */
.fj-fler-rutnat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalt); row-gap: 40px; align-items: start; }
.fj-fler-v { grid-column: 1 / span 5; }
.fj-fler-v .t-etikett { margin-bottom: 30px; }
.fj-fler-v .t-brod { margin-top: 26px; max-width: 28em; }
.fj-fler-lista { grid-column: 7 / -1; }
.fj-fler-lista ul { border-top: 1px solid var(--linje); }
.fj-fler-lista li { border-bottom: 1px solid var(--linje); }
.fj-fler-lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: baseline; gap: 20px; padding: 18px 0; }
.fj-fler-lista b { font-size: clamp(1.375rem, 1.1rem + .6vw, 1.875rem); font-weight: 300; letter-spacing: -.015em; }
.fj-fler-lista a > span { color: var(--is-2); font-variant-numeric: tabular-nums; }
.fj-fler-lista .pil { color: var(--bla); align-self: center; transition: transform .6s var(--ease); }
.fj-fler-lista a:hover .pil, .fj-fler-lista a:focus-visible .pil { transform: translateX(4px); }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .fj-hero-fot { grid-template-columns: 1fr; row-gap: 28px; }
  .fj-svep-text { order: -1; }
  .fj-delar-lista, .fj-verkstad { grid-column: 1 / -1; }
  .fj-pannor-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fj-tva { grid-template-columns: 1fr; }
  .fj-fler-v, .fj-fler-lista { grid-column: 1 / -1; }
}

/* ---------- hjälten staplad (mobil och stående skärmar) ---------- */
@media (max-width: 760px), (max-aspect-ratio: 5/4) {
  .fj-hero { display: block; min-height: 0; }
  .fj-hero-bild { position: relative; inset: auto; z-index: 0; aspect-ratio: 1200 / 822; margin-top: 0; }
  .fj-hero-bild::after { background: linear-gradient(180deg, var(--natt) 0%, rgba(4, 10, 24, 0) 18%, rgba(4, 10, 24, 0) 72%, var(--natt) 100%); }
  .fj-hero-bild img { object-position: 50% 50%; }
  .fj-hero-in { display: contents; }
  .fj-hero { display: flex; flex-direction: column; }
  .fj-hero .smulor { order: 1; padding: clamp(96px, 14vw, 128px) var(--marg) 0; }
  .fj-hero-text { order: 2; padding: 0 var(--marg); max-width: none; }
  .fj-hero-bild { order: 3; margin-top: 24px; }
  .fj-hero-fot { order: 4; padding: 0 var(--marg); margin-top: -24px; position: relative; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .fj-hero .t-h1 { font-size: clamp(3rem, 14vw, 4rem); }
  .fj-hero-text .t-ingress { font-size: 1.125rem; }
  .fj-knappar { flex-direction: column; align-items: stretch; gap: 16px; }
  .fj-knappar .knapp { width: 100%; }
  .fj-knappar .lank { justify-content: center; }
  .fj-hero-tal .fj-textur { font-size: 6rem; }
  .fj-fakta { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .fj-tal-6 { font-size: 8rem; }
  .fj-utrop { font-size: .8125rem; gap: 8px; }
  .fj-utrop i { width: 24px; height: 24px; font-size: .75rem; }
  .fj-utrop::after { width: 10px; }
  .fj-utrop.ovan::after { height: 10px; }
  .fj-cad { margin-inline: -8px; }
  .fj-delar-lista { grid-template-columns: 1fr; row-gap: 4px; }
  .fj-delar-lista li { padding: 14px 0; }
  .fj-pannor-rad { grid-template-columns: 1fr; row-gap: 40px; }
  .fj-panna-bild { height: 240px; }
  .fj-fler-lista a { grid-template-columns: minmax(0, 1fr) auto 18px; gap: 12px; }
  .fj-fler-lista a > span { font-size: .875rem; }
}

/* ================= 01 svepet: CAD ovanifrån som snurrar (kalla/fj_2026.py – ändra där och kör om) ================= */
.fj-snurr { grid-column: 1 / span 6; margin: 0; }
.fj-snurr-yta { --arm: 349.9deg; position: relative; aspect-ratio: 1; max-width: 720px; margin-inline: auto; overflow: clip; }   /* det roterande kvadratiska lagret får inte ge sidscroll */
.fj-snurr-yta::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(31, 116, 184, .18), rgba(31, 116, 184, 0)); transform: scale(1.12); }
.fj-snurr-bas, .fj-snurr-rot, .fj-snurr-rot img, .fj-snurr-skiva { position: absolute; inset: 0; width: 100%; height: 100%; }
/* armarna och svepet snurrar kring navet (bildens mitt) */
.fj-snurr-rot { animation: fj-snurr 22s linear infinite; animation-play-state: paused; will-change: transform; }
.fj-snurr.syns:not(.vilar) .fj-snurr-rot { animation-play-state: running; }
@keyframes fj-snurr { to { transform: rotate(360deg); } }
html.visa-allt .fj-snurr-rot { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .fj-snurr-rot { animation: none; } }
/* ljussvepet: ett mjukt, varmt sken som släpar efter varje arm (armarna går medurs) */
.fj-snurr-svep { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from calc(var(--arm) - 70deg), rgba(255, 214, 150, 0) 0deg, rgba(255, 214, 150, .28) 70deg, rgba(255, 214, 150, 0) 70deg 180deg,
    rgba(255, 214, 150, .28) 250deg, rgba(255, 214, 150, 0) 250deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 15%, #000 24%, #000 66%, transparent 74%); mask-image: radial-gradient(closest-side, transparent 15%, #000 24%, #000 66%, transparent 74%); opacity: .9; }
.fj-snurr figcaption { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .9375rem; color: var(--is-2); text-align: center; }
@media (max-width: 1100px) {
  .fj-snurr { grid-column: 1 / -1; max-width: 640px; margin-inline: auto; width: 100%; }
  .fj-svep-text { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .fj-snurr { margin-inline: calc(-1 * var(--marg) + 4px); max-width: none; width: auto; }
  .fj-snurr figcaption { font-size: .875rem; }
}