/* Biotherm Heat · webbplatsen · gemensamt för alla sidor (ovanpå bas.css).
   Sidhuvud, mobilmeny, sektionshuvuden, kort, höjdkurveband, fjällets ljuslinje, sidfot och formulärdialog.
   Prestanda: inga backdrop-filter och inga mix-blend-mode – sidhuvudet är en tät yta i stället för glas. */

html { scroll-behavior: smooth; }
section[id], article[id] { scroll-margin-top: 84px; }
main { position: relative; }
.nw { white-space: nowrap; }
.fotnot { font-size: .8125rem; line-height: 1.5; color: var(--is-4); }
.t-etikett .nr { color: var(--is-2); margin-right: 12px; font-variant-numeric: tabular-nums; }
.t-etikett.tvar { display: inline-flex; align-items: center; gap: 14px; }
.t-etikett.tvar::before, .t-etikett.tvar::after { content: ""; width: 28px; height: 1px; background: currentColor; }
/* produktsidornas H1 (2026-10-26): etikettraden med panntyp och effekt och det stora namnet i samma H1 – ser ut som förut.
   H1 ärver sidans typsnitt (inte webbläsarens 2em och fetstil), namnet är ett eget block och etiketten en rad. Blir etiketten
   två rader på en smal skärm står strecket vid första raden. Innehållslänkar på egen rad: .lank-rad (text + länk). */
h1.h1-par { font: inherit; }
.h1-par > .h1-namn { display: block; }
.t-etikett.med-linje.h1-etikett { align-items: flex-start; }
.t-etikett.med-linje.h1-etikett::before { flex: none; margin-top: .65em; }
.lank-rad { margin-top: clamp(28px, 3vw, 48px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; color: var(--is-2); max-width: 64em; }

/* ---------- sidhuvud ---------- */
.topp { position: fixed; inset: 0 0 auto; z-index: 60; transition: opacity 1.2s ease var(--d, 0s); }
.topp::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(4, 10, 24, .94); box-shadow: inset 0 -1px 0 var(--linje); transition: opacity .7s var(--ease); }
.topp.scrollad::before { opacity: 1; }
.topp-in { display: flex; align-items: center; height: 96px; transition: height .7s var(--ease); }
.topp.scrollad .topp-in { height: 76px; }
.ordmarke { display: block; flex: none; padding: 6px 0; }
.ordmarke img { width: 140px; height: auto; }
.huvudmeny { margin-left: auto; }
.huvudmeny ul { display: flex; align-items: center; gap: clamp(26px, 2.5vw, 46px); }
.huvudmeny .meny-lank, .huvudmeny .meny-knapp { display: inline-flex; align-items: center; line-height: 1.55; padding: 6px 0; }
.kontakt-pill { margin-left: clamp(32px, 3vw, 56px); display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; background: var(--is); color: var(--natt); font-size: .9375rem; font-weight: 450; font-variation-settings: "opsz" 16; transition: background-color .5s var(--ease); white-space: nowrap; }
.kontakt-pill:hover { background: #fff; }
/* språkväljaren SV | EN (2026-10-16): två små etiketter, det valda språket ljust med en tunn värmelinje under */
.sprakval { margin-left: clamp(24px, 2.6vw, 44px); display: inline-flex; align-items: center; gap: 2px; }
.sprakval a { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 9px; font-size: .8125rem; font-weight: 600; font-stretch: 80%;
  font-variation-settings: "opsz" 12; letter-spacing: .16em; color: var(--is-3); transition: color .4s ease; }
.sprakval a + a::before { content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: var(--linje-2); }
.sprakval a:hover { color: var(--is); }
.sprakval a[aria-current] { color: var(--is); }
.sprakval a[aria-current]::after { content: ""; position: absolute; left: 9px; right: calc(9px + .16em); bottom: 9px; height: 1px; background: var(--flode); }
.menyknapp { display: none; margin-left: auto; width: 44px; height: 44px; margin-right: -10px; position: relative; }
.menyknapp i { position: absolute; left: 11px; width: 22px; height: 1.5px; border-radius: 2px; background: var(--is); transition: transform .6s var(--ease), top .6s var(--ease); }
.menyknapp i:nth-child(2) { top: 18px; }
.menyknapp i:nth-child(3) { top: 25px; }
html.meny-oppen .menyknapp i:nth-child(2) { top: 21.5px; transform: rotate(45deg); }
html.meny-oppen .menyknapp i:nth-child(3) { top: 21.5px; transform: rotate(-45deg); }
.mobilmeny { position: fixed; inset: 0; z-index: 55; background: var(--natt); display: flex; flex-direction: column; padding: 112px var(--marg) 32px; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
html.meny-oppen .mobilmeny { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
html.meny-oppen, html.meny-oppen body { overflow: hidden; }
.mobilmeny ul { border-top: 1px solid var(--linje); }
.mobilmeny li { border-bottom: 1px solid var(--linje); opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .8s var(--ease); }
.mobilmeny li a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 1.75rem; font-weight: 300; font-variation-settings: "opsz" 48; letter-spacing: -.015em; color: var(--is); }
.mobilmeny li a .pil { color: var(--bla); }
.mobilmeny .knapp { margin-top: 32px; width: 100%; }
.mobilmeny-fot { margin-top: auto; display: flex; justify-content: space-between; gap: 16px; padding-top: 24px; }
html.meny-oppen .mobilmeny li { opacity: 1; transform: none; }
html.meny-oppen .mobilmeny li:nth-child(2) { transition-delay: .05s; }
html.meny-oppen .mobilmeny li:nth-child(3) { transition-delay: .1s; }
html.meny-oppen .mobilmeny li:nth-child(4) { transition-delay: .15s; }
html.meny-oppen .mobilmeny li:nth-child(5) { transition-delay: .2s; }
html.meny-oppen .mobilmeny li:nth-child(6) { transition-delay: .25s; }

/* ---------- produktmenyn: en panel under sidhuvudet (öppnas med klick, och med hover på dator) ---------- */
.meny-knapp { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 1.0625rem; font-weight: 380; color: var(--is-2); padding: 6px 0; transition: color .4s ease; }
.meny-knapp .chev { width: 10px; height: 6px; transition: transform .5s var(--ease); }
.meny-knapp:hover, .meny-knapp.aktiv, .meny-knapp[aria-expanded="true"] { color: var(--is); }
.meny-knapp[aria-expanded="true"] .chev { transform: rotate(180deg); }
.meny-knapp::after { content: ""; position: absolute; left: 0; right: 18px; bottom: -4px; height: 2px; border-radius: 2px; background: var(--flode); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--ease); }
.meny-knapp.aktiv::after, .meny-knapp[aria-expanded="true"]::after { transform: scaleX(1); }
.topp.mega-oppen::before { opacity: 1; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: #050d20; box-shadow: inset 0 1px 0 var(--linje), 0 40px 80px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s ease, transform .5s var(--ease), visibility 0s linear .3s; }
.topp.mega-oppen .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .5s var(--ease), visibility 0s; }
.mega-skugga { position: fixed; inset: 0; z-index: 59; background: rgba(2, 6, 17, .6); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
html.mega-oppen .mega-skugga { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.mega-in { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1.05fr; gap: 0 clamp(28px, 3.2vw, 64px); padding: 40px 0 46px; }
.mega-kol > .t-etikett { display: block; margin-bottom: 18px; }
.mega-bransle li + li { margin-top: 6px; }
.mega-bransle a { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 16px; padding: 6px 10px 6px 6px; margin-left: -6px; border-radius: 14px; transition: background-color .35s ease; }
.mega-bransle a:hover, .mega-bransle a:focus-visible { background: rgba(238, 243, 250, .05); }
.mega-bransle img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #0b1934; }
.mega-bransle b { display: block; font-size: 1.0625rem; font-weight: 420; color: var(--is); }
.mega-bransle small, .mega-lista small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--is-3); font-variant-numeric: tabular-nums; }
.mega-lista li + li { margin-top: 2px; }
.mega-lista a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linje); }
.mega-lista a span { display: block; }
.mega-lista a b { font-size: 1.0625rem; font-weight: 400; color: var(--is); transition: color .3s ease; }
.mega-lista a .pil { width: 18px; color: var(--bla); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .5s var(--ease); }
.mega-lista a:hover .pil, .mega-lista a:focus-visible .pil { opacity: 1; transform: none; }
.mega-kort { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: radial-gradient(90% 70% at 50% 30%, #0e2148, #071430 60%, #050d20); border: 1px solid var(--linje); padding: 22px 24px 24px; }
.mega-kort img { height: 132px; width: auto; max-width: 100%; object-fit: contain; align-self: center; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); }
.mega-kort p.t-etikett { margin-top: 14px; }
.mega-kort h3 { margin-top: 8px; font-size: 1.25rem; font-weight: 340; line-height: 1.25; }
.mega-kort .lank { margin-top: 16px; font-size: .9375rem; }
.mega-fot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0 18px; border-top: 1px solid var(--linje); }
.mega-fot .t-liten { color: var(--is-3); }
.mega-fot-v { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.mega-fot .lank { font-size: .9375rem; }
.mega-in { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
/* rullgardiner: Om oss, Vanliga frågor */
.rull-li { position: relative; }
.rull { position: absolute; left: -26px; top: calc(100% + 22px); z-index: 2; width: 300px; padding: 22px 14px 14px; border-radius: 18px; background: #050d20; box-shadow: inset 0 0 0 1px var(--linje), 0 30px 60px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .45s var(--ease), visibility 0s linear .25s; }
.rull::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; }
.rull-li.oppen .rull { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .45s var(--ease), visibility 0s; }
.rull .t-etikett { padding: 0 12px 10px; }
.huvudmeny .rull ul { display: block; }
.rull li + li { margin-top: 2px; }
.rull a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; transition: background-color .3s ease; }
.rull a:hover, .rull a:focus-visible, .rull a[aria-current="page"] { background: rgba(238, 243, 250, .05); }
.rull a b { display: block; font-size: 1.0625rem; font-weight: 400; color: var(--is); }
.rull a small { display: block; margin-top: 2px; font-size: .8125rem; color: var(--is-3); }
.rull a .pil { width: 18px; flex: none; color: var(--bla); opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .5s var(--ease); }
.rull a:hover .pil, .rull a:focus-visible .pil, .rull a[aria-current="page"] .pil { opacity: 1; transform: none; }
/* nedåtpil (Följ …, Till formuläret) – gemensam för alla sidor */
.pil.ner { transform: rotate(90deg); width: 18px; }
.lank:hover .pil.ner { transform: rotate(90deg) translateX(4px); }
.kontakt-pill.aktiv { box-shadow: 0 0 0 2px rgba(0, 152, 212, .55); }
.fot-luft { margin-top: 14px; }
/* mobilmenyn: produkterna fälls ut */
.mm-under { display: none; padding: 4px 0 18px; }
.mm-grupp.oppen .mm-under { display: block; }
.mm-grupp > button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 1.75rem; font-weight: 300; font-variation-settings: "opsz" 48; letter-spacing: -.015em; color: var(--is); text-align: left; }
.mm-grupp > button .chev { width: 14px; height: 8px; color: var(--bla); transition: transform .5s var(--ease); }
.mm-grupp.oppen > button .chev { transform: rotate(180deg); }
.mm-under .t-etikett { display: block; margin: 14px 0 6px; }
.mobilmeny .mm-under a { display: flex; padding: 8px 0; font-size: 1.125rem; font-weight: 360; font-variation-settings: "opsz" 18; letter-spacing: 0; color: var(--is-2); }
.mobilmeny .mm-under a small { margin-left: auto; color: var(--is-3); font-size: .875rem; }
.mobilmeny { overflow-y: auto; }
/* 2026-10-24: barnen krymper inte när Produkter fälls ut (knappen blev annars 25 px hög) */
.mobilmeny > * { flex-shrink: 0; }

/* ---------- brödsmulor ---------- */
.smulor { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: .875rem; color: var(--is-3); }
.smulor a { color: var(--is-2); transition: color .3s ease; }
.smulor a:hover { color: var(--is); }
.smulor .sep { width: 6px; height: 10px; color: var(--is-4); }

/* ---------- sektioner: rytm och huvud (etikett med nummer, h2 till vänster, ingress till höger) ---------- */
.sek { position: relative; padding-top: var(--sektion); }
.sek-huvud { align-items: end; row-gap: 28px; margin-bottom: clamp(56px, 6.4vw, 112px); }
.sh-v { grid-column: 1 / span 7; }
.sh-h { grid-column: 9 / span 4; }
.sh-v .t-etikett { margin-bottom: 30px; }
.sh-text { font-size: clamp(1.125rem, 1rem + .32vw, 1.375rem); line-height: 1.45; }
.centrerad { text-align: center; }
.centrerad .t-ingress { margin: 30px auto 0; max-width: 640px; }

/* ---------- produktkort på natt ---------- */
.kortrad { display: grid; gap: var(--spalt); }
.kortrad.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ruta { position: relative; border-radius: 22px; background: #030a17; border: 1px solid var(--linje); overflow: hidden; display: flex; flex-direction: column; transition: border-color .6s ease; }
.ruta:hover { border-color: var(--linje-2); }
.ruta .bild { position: relative; height: clamp(220px, 18vw, 320px); display: flex; align-items: flex-end; justify-content: center; padding: 22px 22px 0; }
.ruta .bild::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(242, 154, 60, .14), rgba(242, 154, 60, .04) 55%, rgba(242, 154, 60, 0)); }
.ruta .bild.kall::before { background: radial-gradient(closest-side, rgba(31, 116, 184, .2), rgba(31, 116, 184, .05) 55%, rgba(31, 116, 184, 0)); }
.ruta .bild img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.ruta .text { padding: 26px clamp(22px, 2vw, 32px) clamp(24px, 2.2vw, 32px); display: flex; flex-direction: column; flex: 1; }
.ruta h3 { margin-top: 10px; }
.ruta .text > p:not(.t-etikett) { margin-top: 10px; color: var(--is-2); font-size: 1rem; line-height: 1.55; }
.ruta dl { margin-top: auto; padding-top: 22px; }
.ruta dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--linje); font-size: .9375rem; }
.ruta dt { color: var(--is-3); }
.ruta dd { margin: 0; color: var(--is); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- höjdkurvor (statisk canvas, ritas en gång) ---------- */
.topo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.topo canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.topo-band { position: relative; height: clamp(120px, 13vw, 220px); overflow: hidden; }
.topo-band .topo { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }

/* ---------- fjällets ljuslinje: kall vid foten, varm vid toppen ---------- */
.fjall-linje { position: relative; height: 84px; }
.fjall-linje svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.fjall-linje path { fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease) .1s; }
.fjall-linje.syns path { stroke-dashoffset: 0; }

/* ---------- fjällets ljuslinje före avslutningen (A15) ---------- */
.fjall-avd { padding-top: var(--sektion); }

/* ---------- avslutning: fjällets topp över "Låt oss räkna på er värme." – samma på alla sidor ----------
   2026-10-17 (kunden valde förslaget Toppen): värmeplymen borta, fjällets ljuslinje (sajt.js) står som en krona över
   texten med ett svagt soluppgångsljus bakom toppen. Ingen levande grafik – linjen ritas en gång när den syns. */
.slut { position: relative; overflow: hidden; isolation: isolate; margin-top: clamp(48px, 6vw, 110px); padding: clamp(36px, 4vw, 64px) 0 clamp(64px, 6vw, 96px);
  background: radial-gradient(28% 34% at 50% 20%, rgba(242, 154, 60, .16), rgba(242, 154, 60, 0) 72%),
              radial-gradient(70% 60% at 50% 0%, rgba(31, 62, 124, .28), rgba(31, 62, 124, 0) 70%), var(--natt); }
.slut::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%; pointer-events: none; background: linear-gradient(180deg, var(--natt), rgba(4, 10, 24, 0)); }   /* ljuset tonas in, ingen kant mot avsnittet ovanför */
.slut-fjall { position: relative; z-index: 1; height: clamp(150px, 15vw, 230px); pointer-events: none; }
.slut-text { position: relative; z-index: 1; margin-top: clamp(18px, 2vw, 30px); text-align: center; }
.slut-text .t-etikett.med-linje { justify-content: center; margin-bottom: 20px; }
.slut-text .t-etikett.med-linje::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.slut-text h2 { margin-inline: auto; font-size: clamp(2.5rem, 1.4rem + 2.9vw, 4.6rem); }
.slut-text h2 .rad { display: inline-block; vertical-align: top; }
.slut-text h2 .rad + .rad { margin-left: 0; }
.slut-text .t-ingress { margin: 18px auto 0; max-width: 52ch; }
.slut-knappar { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 40px; }
.slut-rad { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; color: var(--is-3); }
.slut-rad a:hover { color: var(--is); }

@media (max-width: 760px) {
  .slut-fjall { height: 120px; }
  .slut-text h2 { font-size: 2.75rem; }
  .slut-text h2 .rad { display: block; }
  .slut-text h2 .rad + .rad { margin-left: 0; }
  .slut-text .t-etikett.med-linje::before, .slut-text .t-etikett.med-linje::after { display: none; }
  .slut-knappar { flex-direction: column; align-items: stretch; gap: 18px; }
  .slut-knappar .knapp { width: 100%; }
  .slut-knappar .lank { justify-content: center; }
}


/* ---------- sidfot ---------- */
.fot { padding: clamp(80px, 7vw, 120px) 0 36px; background: var(--djup); }
.fot-topp { row-gap: 48px; }
.fot-marke { grid-column: 1 / span 4; }
.fot-marke img { width: 140px; height: auto; }
.fot-marke p { margin-top: 26px; font-size: 1.375rem; font-weight: 300; font-variation-settings: "opsz" 40; letter-spacing: -.01em; color: var(--is); max-width: 14ch; line-height: 1.2; }
.fot-kol { grid-column: span 2; }
.fot-kol .t-etikett { margin-bottom: 16px; }
.fot-kol p, .fot-kol li { font-size: .9375rem; line-height: 1.7; color: var(--is-2); }
.fot-kol a { transition: color .4s ease; }
.fot-kol a:hover { color: var(--is); }
.fot-botten { margin-top: clamp(64px, 6vw, 104px); padding-top: 24px; border-top: 1px solid var(--linje); display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; font-size: .875rem; color: var(--is-3); }
.fot-botten .linje-flode { width: 44px; align-self: center; }

/* ---------- formulär (dialog) ---------- */
.dlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--linje-2); border-radius: 24px; background: #06112a; color: var(--is); box-shadow: 0 40px 120px rgba(0, 0, 0, .55); overflow: auto; }
@supports (height: 100dvh) { .dlg { max-height: calc(100dvh - 48px); } }   /* iOS: höjden med verktygsfälten synliga */
.dlg::backdrop { background: rgba(2, 6, 17, .82); }
.dlg[open] { animation: dlg-in .7s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.dlg-in { padding: clamp(28px, 4vw, 48px); position: relative; }
.dlg-stang { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--is-2); transition: background-color .4s ease, color .4s ease; }
.dlg-stang:hover { background: rgba(238, 243, 250, .08); color: var(--is); }
.dlg h2 { margin-top: 16px; max-width: 14ch; }
.dlg .t-liten { margin-top: 14px; max-width: 460px; }
.falt-rutnat { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.falt { display: flex; flex-direction: column; gap: 8px; }
.falt.hel { grid-column: 1 / -1; }
.falt > span { font-size: .8125rem; font-weight: 600; font-stretch: 80%; letter-spacing: .14em; text-transform: uppercase; color: var(--is-3); font-variation-settings: "opsz" 12; }
.falt input, .falt select { height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--linje-2); background: rgba(4, 10, 24, .6); color: var(--is); font-size: 1rem; outline: none; transition: border-color .4s ease, box-shadow .4s ease; -webkit-appearance: none; appearance: none; }
.falt select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239fb4c4' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.falt select option { background: #06112a; color: var(--is); }
.falt input:focus, .falt select:focus { border-color: var(--bla); box-shadow: 0 0 0 3px rgba(0, 152, 212, .2); }
.dlg-skicka { margin-top: 28px; display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.dlg-tack { padding: 12px 0 4px; outline: none; }
/* formulären (dialogen och kontaktsidan): felraden om skicka.php inte svarar, länken i fotnoten, fällan för robotar */
.skickfel { flex-basis: 100%; margin: 0; font-size: .9375rem; line-height: 1.5; color: #ffb3a4; }
.skickfel a, .fotnot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.skickfel a:hover, .fotnot a:hover { color: var(--is); }
/* display:none (inte bara utanför bild): webbläsarnas autofyll fyller bara fält som går att fokusera, så en riktig
   besökare kan aldrig fastna i fällan. Fältet följer ändå med i FormData. */
.hp { display: none; }
form[aria-busy="true"] button[type="submit"] { opacity: .6; cursor: progress; }
.dlg-tack .t-brod { margin-top: 16px; max-width: 460px; }

/* ---------- mellanstora skärmar ---------- */
@media (max-width: 1100px) {
  .sh-v, .sh-h { grid-column: 1 / -1; }
  .sh-h { max-width: 640px; }
  .kortrad.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kortrad.tre > :last-child { grid-column: 1 / -1; }
  .fot-marke { grid-column: 1 / -1; }
  .fot-kol { grid-column: span 3; }
}
@media (max-width: 960px) {
  .huvudmeny, .kontakt-pill, .mega, .mega-skugga { display: none; }
  .sprakval { margin-left: auto; margin-right: 6px; }
  .sprakval ~ .menyknapp { margin-left: 0; }
  .sprakval a { height: 44px; }
  .menyknapp { display: block; }
}

/* ---------- mobil ---------- */
@media (max-width: 760px) {
  .topp-in, .topp.scrollad .topp-in { height: 68px; }
  .ordmarke img { width: 112px; }
  section[id], article[id] { scroll-margin-top: 72px; }
  .sek-huvud { margin-bottom: 48px; row-gap: 22px; }
  .sh-v .t-etikett { margin-bottom: 22px; }
  .t-etikett.tvar::before, .t-etikett.tvar::after { width: 18px; }
  .t-etikett.med-linje.h1-etikett { gap: 12px; }
  .t-etikett.med-linje.h1-etikett::before { width: 18px; }
  .centrerad .t-ingress { font-size: 1.125rem; margin-top: 24px; }
  .kortrad.tre { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--marg)); padding: 0 var(--marg) 6px; scroll-padding-inline: var(--marg); scrollbar-width: none; overscroll-behavior-x: contain; }
  .kortrad.tre::-webkit-scrollbar { display: none; }
  .kortrad.tre > * { scroll-snap-align: start; }
  .kortrad.tre > :last-child { grid-column: auto; }
  .ruta { border-radius: 18px; }
  .ruta .bild { height: 220px; }
  .fjall-linje { height: 64px; }
  .fot-kol { grid-column: span 2; }
  .falt-rutnat { grid-template-columns: 1fr; }
  .dlg-skicka .knapp { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* öppen mobilmeny: sidhuvudet får samma botten som menyn, så att det som skrollas inte syns bakom ordmärket */
html.meny-oppen .topp::before { opacity: 1; box-shadow: none; background: var(--natt); }

/* ---------- smala och låga datorskärmar (granskning 2026-10-24): vid 961–1180 px bröts menyposterna på två rader
   ("Om oss", "Vanliga frågor") och ordmärket nuddade menyn; produktmenyn (672 px hög) blev högre än skärmen på en
   bärbar dator med 768 px (fönstret är då bara ca 650 px). Tätare meny, något mindre text i panelen – och panelen får
   alltid rulla om den ändå inte ryms, så att de sista posterna och "Alla produkter" aldrig hamnar utanför. ---------- */
.mega { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linje-2) transparent; }
.topp.scrollad .mega { max-height: calc(100vh - 76px); }
@media (min-width: 961px) and (max-width: 1180px) {
  .huvudmeny ul { gap: 22px; }
  .huvudmeny .meny-lank, .huvudmeny .meny-knapp { font-size: 1rem; white-space: nowrap; }
  .sprakval { margin-left: 18px; }
  .kontakt-pill { margin-left: 20px; padding: 0 16px; }
  .mega-in { column-gap: 24px; }
}
@media (min-width: 961px) and (max-width: 1180px), (min-width: 961px) and (max-height: 820px) {
  .mega-in { padding: 30px 0 34px; }
  .mega-kol > .t-etikett { margin-bottom: 14px; }
  .mega-lista a { padding: 7px 0; }
  .mega-lista a b, .mega-bransle b { font-size: 1rem; }
  .mega-bransle img { width: 42px; height: 42px; }
  .mega-bransle a { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; }
}
@media (min-width: 961px) and (max-width: 1040px) {
  .ordmarke img { width: 124px; }
  .huvudmeny ul { gap: 16px; }
  .sprakval { margin-left: 10px; }
  .kontakt-pill { margin-left: 14px; }
}

/* ---------- WePly-chatten (kalla/chatt.html, 2026-10-25) ----------
   Chatten är en iframe från cdn.weply.chat, fast nere till höger med högsta möjliga z-index. Den döljs medan mobilmenyn är
   öppen (annars ligger den över effektberäkningsknappen, telefon och e-post längst ner i menyn), och sidfoten får luft under
   sista raden när chatten finns på sidan, så att raden går att rulla fram ovanför chattknappen. WePly sätter visibility
   i iframens style-attribut utan !important, så regeln här går före. */
html.meny-oppen iframe[src^="https://cdn.weply.chat/"] { visibility: hidden !important; }
/* luften följer rutans verkliga höjd (2026-10-26): hälsningsbubblan gör den cirka 180 px hög, och då täckte den sidfotens
   Cookieinställningar. --chatt-h mäts av samtycke.js (avståndet från rutans överkant till fönstrets nederkant). Samma värde
   som scroll-padding, så att element som får fokus med tangentbordet rullas fram ovanför rutan. */
html:has(iframe[src^="https://cdn.weply.chat/"]) { scroll-padding-bottom: calc(var(--chatt-h, 196px) + 16px); }
html:has(iframe[src^="https://cdn.weply.chat/"]) .fot { padding-bottom: max(128px, calc(var(--chatt-h, 196px) + 24px)); }

/* ---------- samtycke: första lagret och cookieinställningarna (assets/samtycke.js, 2026-10-26) ----------
   Första lagret (#samtycke) är icke-modalt och visas bara när inget val finns: en låg list längst ned i hela bredden på
   dator (text till vänster, knapparna till höger – hjältarnas huvudknappar ligger ovanför den), staplat på mellanbredd och
   ett kompakt ark på mobil. Neka och Godkänn har samma klass, storlek och vikt; Inställningar är en textknapp.
   z-index 58: under sidhuvudet (60) och produktmenyns skugga (59). Den döljs medan mobilmenyn är öppen, och sidfoten får
   luft under sig så länge listen syns (--samtycke-h mäts av samtycke.js). Dialogen (#samtycke-installningar) är samma
   .dlg som formuläret; växeln är en riktig kryssruta med role=switch. Bara Bricolage Grotesque, ingen bärnsten. */
.samtycke { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58; padding: 16px 0 18px; background: #06112a; color: var(--is);
  box-shadow: inset 0 1px 0 var(--linje-2), 0 -24px 60px rgba(0, 0, 0, .45); animation: samtycke-in .7s var(--ease); }
@keyframes samtycke-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.samtycke[hidden] { display: none; }
.samtycke-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px clamp(32px, 4vw, 72px); }
.samtycke-text { font-size: .9375rem; line-height: 1.5; font-weight: 360; font-variation-settings: "opsz" 14; color: var(--is-2); text-wrap: pretty; }
.samtycke-text a, .samtycke-mer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .3s ease; }
.samtycke-text a:hover, .samtycke-mer a:hover { color: var(--is); }
.samtycke-knappar { display: grid; grid-template-columns: 148px 148px auto; gap: 10px; align-items: center; }
.samtycke-knappar .knapp { height: 48px; padding: 0 18px; }
.samtycke-knappar .lank { min-height: 44px; padding: 0 4px 0 12px; font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: var(--linje-2); }
.samtycke-knappar .lank:hover { text-decoration-color: currentColor; }
html.meny-oppen .samtycke { visibility: hidden; }
html.samtycke-visas .fot { padding-bottom: calc(var(--samtycke-h, 120px) + 24px); }
/* fokus får inte hamna bakom lagret (WCAG 2.4.11): webbläsaren rullar fram fokuserade element ovanför det */
html.samtycke-visas { scroll-padding-bottom: calc(var(--samtycke-h, 120px) + 16px); }
/* main är bara ett programmatiskt fokusmål (efter valet i lagret och Hoppa till innehållet) och ska inte få fokusramen */
#innehall:focus { outline: none; }
/* etiketten står först på textens rad: en rad mindre, så att listen och arket håller sig under hjältarnas knappar */
.samtycke-info { max-width: 92ch; font-size: .9375rem; line-height: 1.5; }   /* raderna följer textens storlek, inte body */
.samtycke-info > p { display: inline; }
.samtycke-info .t-etikett { margin-right: 12px; vertical-align: 1px; }
@media (max-width: 1100px) {
  .samtycke-in { grid-template-columns: minmax(0, 1fr); }
  .samtycke-knappar { justify-content: start; }
}
/* cookieinställningarna: kategorierna som rader med namn, förklaring och kontroll till höger */
.samtycke-dlg { width: min(620px, calc(100vw - 32px)); overscroll-behavior: contain; }   /* sidan bakom rullar inte med på mobil */
.samtycke-dlg h2 { max-width: 18ch; }
.samtycke-kat { margin-top: 24px; border-top: 1px solid var(--linje); }
.samtycke-rad { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; padding: 16px 0 18px; border-bottom: 1px solid var(--linje); }
.samtycke-forkl { grid-column: 1 / -1; }
.samtycke-namn { display: block; font-size: 1.0625rem; font-weight: 420; line-height: 1.4; color: var(--is); }
label.samtycke-namn { cursor: pointer; }
.dlg .samtycke-rad .t-liten { margin-top: 2px; max-width: none; color: var(--is-2); }
.samtycke-alltid { font-size: .75rem; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .14em; text-transform: uppercase; color: var(--is-3); white-space: nowrap; }
.samtycke-vaxel { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 32px; }
.samtycke-vaxel input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.samtycke-spar { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; background: rgba(170, 196, 228, .1); box-shadow: inset 0 0 0 1px var(--is-3); transition: background-color .35s ease, box-shadow .35s ease; }   /* kanten minst 3:1 i avslaget läge */
.samtycke-spar::after { content: ""; position: absolute; left: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; background: var(--is-3); transition: transform .45s var(--ease), background-color .35s ease; }
.samtycke-vaxel input:checked ~ .samtycke-spar { background: var(--bla); box-shadow: none; }
.samtycke-vaxel input:checked ~ .samtycke-spar::after { transform: translateX(20px); background: #fff; }
.samtycke-vaxel input:focus-visible ~ .samtycke-spar { outline: 2px solid var(--bla); outline-offset: 3px; }
.samtycke-lage { min-width: 2ch; font-size: .75rem; font-weight: 600; font-stretch: 80%; font-variation-settings: "opsz" 12; letter-spacing: .14em; text-transform: uppercase; color: var(--is-3); text-align: right; }
.samtycke-lage::before { content: attr(data-av); }
.samtycke-vaxel input:checked ~ .samtycke-lage::before { content: attr(data-pa); color: var(--is); }
.dlg .samtycke-mer { margin-top: 16px; max-width: none; }
.samtycke-dlg-knappar { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.samtycke-dlg-knappar .knapp { height: 52px; padding: 0 14px; }
/* tydligare kant på valknapparna (5,3:1 i stället för 2,1:1), lika för neka och godkänn; hovringen i bas.css går före */
.samtycke-knappar .knapp, .samtycke-dlg-knappar .knapp { box-shadow: inset 0 0 0 1px var(--is-3); }
/* sidfoten: Cookieinställningar ser ut som länken Integritetspolicy bredvid, och båda är understrukna så att de syns som
   länkar utan att muspekaren förs över raden (samma diskreta streck som Inställningar i lagret); knappen i
   integritetspolicyn bara med JS */
.fot-botten a { text-decoration: underline; text-decoration-color: var(--linje-2); text-underline-offset: 4px; text-decoration-thickness: 1px; padding-block: 4px; transition: color .4s ease, text-decoration-color .4s ease; }
.fot-botten a:hover { color: var(--is); text-decoration-color: currentColor; }
.fot-botten [data-samtycke-installningar] { white-space: nowrap; }
html:not(.js) .samtycke-andra { display: none; }
@media (max-width: 760px) {
  /* inget overscroll-behavior: contain – då rullade inte sidan när man drog med fingret på arket (granskningen 2026-10-27) */
  .samtycke { max-height: calc(var(--vh) * 60); overflow-y: auto; padding: 16px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; }
  .samtycke-in { gap: 12px; }
  .samtycke .t-etikett { font-size: .75rem; margin-right: 8px; }
  .samtycke-info, .samtycke-text { font-size: .875rem; line-height: 1.45; }
  .samtycke-knappar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; }
  .samtycke-knappar .knapp { padding: 0 10px; }
  .samtycke-knappar .lank { padding: 0 2px 0 6px; font-size: .875rem; }
  html.samtycke-visas .fot { padding-bottom: calc(var(--samtycke-h, 220px) + 16px); }
  /* sidfotens länkar (Cookieinställningar är enda vägen att ändra valet på varje sida): större yta att trycka på, samma radavstånd */
  /* länkarna står kvar på raden (fokusramen som förut); ytan förlängs med ett osynligt ::after */
  .fot-botten a { position: relative; }
  .fot-botten a::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
}
/* låga fönster (liggande mobil, 200 % zoom): knapparna står kvar längst ned i dialogen även när den är bred. scroll-padding
   gör att fokus (växeln, länken) rullas fram ovanför knappraden i stället för att hamna bakom den (WCAG 2.4.11) */
@media (max-height: 700px) {
  .samtycke-dlg { scroll-padding-bottom: 84px; }
  .samtycke-dlg-knappar { position: sticky; bottom: 0; z-index: 1; margin: 18px -4px 0; padding: 12px 4px 4px; background: #06112a; box-shadow: 0 -18px 18px -6px #06112a; }
}
@media (max-width: 560px) {
  .samtycke-rad { gap: 4px 16px; }
  /* knapparna står kvar längst ned i dialogen medan texten rullar: Neka alla och Godkänn alla bredvid varandra, Spara val under
     (två rader knappar: mer scroll-padding, så att fokus inte hamnar bakom dem) */
  .samtycke-dlg { scroll-padding-bottom: 140px; }
  .samtycke-dlg-knappar { position: sticky; bottom: 0; z-index: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 18px -4px 0; padding: 12px 4px 4px; background: #06112a; box-shadow: 0 -18px 18px -6px #06112a; }
  .samtycke-dlg-knappar .knapp { height: 48px; padding: 0 10px; }
  .samtycke-dlg-knappar [data-samtycke-spara] { grid-column: 1 / -1; }
}
/* smala mobiler: första meningen (står även i inställningarna och policyn) utelämnas, så att arket inte täcker hjältens knapp */
@media (max-width: 400px) {
  .samtycke { padding-top: 12px; }
  .samtycke-extra { display: none; }
}
/* liggande mobil: text och knappar bredvid varandra och utan första meningen, så att listen inte tar nästan halva höjden */
@media (max-height: 480px) and (min-width: 640px) {
  .samtycke { padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 0; }
  .samtycke-extra { display: none; }
  .samtycke-in { grid-template-columns: minmax(0, 1fr) auto; }
  .samtycke-knappar { grid-template-columns: 120px 120px auto; }
}
@media print { .samtycke { display: none; } }