/* SEAFOOD_SLIDER 2026-10-26 – forsideslider (Tesla-stil) + kart maksbredde. Ingen sporing. */
/* v2: mindre slider i innholdsbredde med avrundede hjørner (samme bredde som kartet) */
/* v3 (David 18:54): bred hero i full bredde igjen (som den gamle), lavere enn original fullskjerm men litt høyere enn v2; neste seksjon titter fram */
.hs{position:relative;width:100%;margin:0;height:min(72vh,820px);min-height:460px;overflow:hidden;background:#05080d;color:#f5f5f7;isolation:isolate}
.hs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.hs-track{position:absolute;inset:0}
.hs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s;background:var(--sb,#05080d);color:var(--st,#f5f5f7)}
.hs-slide.is-on{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.hs-slide[data-tone=light]{--st:#0a0a0b;--sl:#3a3b40;--bb:rgba(10,10,11,.86);--bf:#fff;--bh:#000}
.hs-slide[data-tone=dark]{--st:#f5f5f7;--sl:#e3e4e8;--bb:rgba(245,245,247,.9);--bf:#0a0a0b;--bh:#fff}
.hs-media{position:absolute;inset:0;margin:0}
.hs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);display:block;-webkit-user-drag:none;user-select:none}
.hs-slide[data-fit=contain] .hs-media{inset:var(--ci,33% 4% 10%)}
.hs-slide[data-fit=contain] .hs-media img{inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
/* Mykt overgang mellom bildekant og bakgrunn (bare CSS-maske; selve bildefilen er uendret) */
.hs-slide[data-fit=contain] .hs-media img,.hs-slide .hs-media.fade img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.hs-txt{position:absolute;left:0;right:0;top:clamp(28px,6vh,64px);z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px}
.hs-t{font-weight:300;font-size:clamp(24px,2.5vw,38px);line-height:1.12;letter-spacing:-.01em;margin:0;max-width:16em;color:var(--st);text-wrap:balance}
.hs-l{margin:10px 0 0;font-size:clamp(14px,1.15vw,16px);line-height:1.45;font-weight:400;color:var(--sl);max-width:34em}
.hs-btn{margin-top:18px;display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:40px;padding:0 24px;border-radius:4px;font-size:14px;font-weight:500;text-decoration:none;background:var(--bb);color:var(--bf);transition:background .25s}
.hs-btn:hover{background:var(--bh)}
.hs-btn:focus-visible,.hs-dot:focus-visible,.hs-pause:focus-visible{outline:2px solid var(--st,#fff);outline-offset:3px}
.hs-ui{position:absolute;left:0;right:0;bottom:clamp(10px,2.2vh,22px);z-index:3;display:none;justify-content:center;align-items:center;gap:14px}
.hs.js .hs-ui{display:flex}
.hs-dots{display:flex;gap:10px;align-items:center}
.hs-dot{position:relative;width:34px;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.hs-dot:before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:var(--ui,rgba(255,255,255,.38))}
.hs-dot i{position:absolute;left:0;top:11px;height:2px;border-radius:2px;width:0;background:var(--uf,#fff)}
.hs-dot[aria-current=true] i{width:100%}
.hs.run .hs-dot[aria-current=true] i{width:0;animation:hsP var(--dur,6000ms) linear forwards}
.hs.hold .hs-dot[aria-current=true] i{animation-play-state:paused}
@keyframes hsP{from{width:0}to{width:100%}}
.hs-pause{width:32px;height:32px;border-radius:4px;border:0;padding:0;background:transparent;color:var(--uf,#fff);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:.8}
.hs-pause:hover{opacity:1}
.hs-pause svg{width:12px;height:12px;fill:currentColor}
.hs-pause .i-play{display:none}.hs-pause[data-state=paused] .i-play{display:block}.hs-pause[data-state=paused] .i-pause{display:none}
.hs[data-tone=light]{--ui:rgba(10,10,11,.3);--uf:#0a0a0b}
.hs[data-tone=dark]{--ui:rgba(255,255,255,.38);--uf:#fff}
/* v3: kartflaten reserverer samme høyde før og etter at MapLibre er lastet (hindrer layout-skift, CLS) */
/* Mix = samme duo-komposisjon som Mix i den nedre slideren (samme filer, samme diagonale snitt som .slide-media.duo i site.css) */
.hs-duo{position:absolute;inset:0}
.hs-duo .pa,.hs-duo .pb{position:absolute;inset:0;overflow:hidden}
.hs-duo .pa{clip-path:polygon(0 0,56% 0,44% 100%,0 100%)}
.hs-duo .pb{clip-path:polygon(56% 0,100% 0,100% 100%,44% 100%)}
.hs-media.duo .hs-duo img{position:absolute;inset:auto;top:0;height:100%;width:100%;object-fit:cover;object-position:50% 100%}
/* bred hero (2:1–3:1): vis midten av bildene så fisken og kassen ikke kuttes; stående/mobil beholder bunnjustering som i den nedre slideren */
@media (min-aspect-ratio:1/1){.hs-media.duo .hs-duo img{object-position:50% 56%}}
/* Svært brede heroer (f.eks. 2560×1440, over ca. 2,6:1 målt på selve heroen): enkeltbildene (Superior, Royal) vises i en sentrert
   flate på 2,4:1 med myk overgang til lysbildets bakgrunnsfarge, så kassen/fisken ikke kuttes hardt. Bare CSS; bildefilene er uendret. */
.hs{container-type:size}
@container (min-aspect-ratio:13/5){.hs-slide:not([data-fit=contain]) .hs-media:not(.duo){left:50%;right:auto;width:calc(100cqh*2.4);transform:translateX(-50%)}
 .hs-slide:not([data-fit=contain]) .hs-media:not(.duo) img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}}
.hs-media.duo .hs-duo .pa img{left:-6%}
.hs-media.duo .hs-duo .pb img{left:24%}
.hs-duo .cut{position:absolute;inset:0;background:rgba(255,255,255,.9);clip-path:polygon(55.85% 0,56.15% 0,44.15% 100%,43.85% 100%)}
/* tekst over duo: svak mørk toning øverst så teksten alltid kan leses (bare CSS, bildene er uendret) */
.hs-slide[data-key=mix] .hs-media.duo:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 40% at 50% 14%,rgba(5,8,13,.82),rgba(5,8,13,.6) 55%,transparent),linear-gradient(180deg,rgba(5,8,13,.45),transparent 42%);pointer-events:none}
/* Utvalget-teksten står nå under den nedre slideren, rett over «Opphav og levering» */

/* Stående skjermer: tekst øverst, bildet i nedre del (cover med myk overgang øverst); Mix vises helt (contain) */
@media (max-aspect-ratio:1/1){.hs-slide .hs-media{inset:auto 0 0;height:60%}
 .hs-slide:not([data-fit=contain]) .hs-media img{object-position:var(--opm,var(--op));-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%)}
 .hs-slide[data-fit=contain] .hs-media{inset:auto 3% 8% ;height:50%}}
@media (max-width:600px){.hs{height:66svh;min-height:460px;max-height:620px}.hs-txt{top:24px;padding:0 18px}.hs-t{font-size:24px}.hs-l{font-size:14px;margin-top:8px}.hs-btn{min-width:170px;margin-top:14px}}
@media (prefers-reduced-motion:reduce){.hs-slide,.hs-slide.is-on{transition:none}.hs.run .hs-dot[aria-current=true] i{animation:none;width:100%}}
/* Videoseksjonen (flyttet ned under «Velg miksen som passer») */
.hero.hv{min-height:min(calc(100svh - 64px),900px)}
/* Kart v2 (David 17:35): full bredde som på live, men fast høyde på desktop (som 1440 i dag) – samme skala, mer flate på sidene (JS-padding). Mobil som før. */
@media (min-width:701px){section.hk.gl figure.hk-map .hk-in{aspect-ratio:auto!important;height:min(43.75vw,630px)}
 section.hk:not(.gl) figure.hk-map .hk-in{max-width:1440px;margin-left:auto;margin-right:auto;min-height:min(43.75vw,630px)}
 section.hk.gl figure.hk-map .hk-gl{left:50%;right:auto;width:min(100%,calc(min(43.75vw,630px)*16/7));transform:translateX(-50%)}}
@media (min-width:1500px){section.hk.gl figure.hk-map .hk-gl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}}
/* Trøndelag-etikett (SVG-reserven) */
.hk-p.tl i{display:none}

/* ===== v9 (David 27.10 11:20): heroen = en større, loopende versjon av den nedre slideren =====
   Samme bilder (samme filer/markup), samme skrift (sidens --font og overskriftsvekt) og samme knapper (.btn .btn-primary/.btn-ghost)
   som den nedre slideren. Mix er urørt (nøyaktig som v7). For Royal og Superior endres bare størrelse/plassering av bildet:
   bildet fyller heroen bak teksten, og produktet (fisken / kassen med logo) holdes helt synlig under teksten. Bildefilene er uendret. */
.hs{--fs:clamp(26px,2.8vw,42px);--tt:clamp(28px,6vh,64px);--lb:calc(10px + 17px*1.45 + 18px + 48px)}
.hs-t{font-family:var(--font);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:var(--fs);max-width:18em}
.hs-l{font-family:var(--font);font-weight:400;font-size:17px;line-height:1.45;color:rgba(255,255,255,.85)}
.hs-txt{top:var(--tt)}
.hs-txt .btns{margin-top:18px;justify-content:center}
/* produktets rammeboks i bildet (andel av bredde/høyde, med litt luft) og antall tittellinjer */
.hs-slide[data-key=royal]{--ar:1.3391;--x0:.05;--x1:.97;--y0:.40;--y1:.79;--tl:2}
.hs-slide[data-key=superior]{--ar:1.3368;--x0:.15;--x1:.885;--y0:.31;--y1:.80;--tl:1}
.hs .hs-slide{--tx:calc(var(--tt) + var(--tl)*var(--fs)*1.05 + var(--lb))}
.hs .hs-slide:not([data-key=mix]) .hs-media{inset:0;left:0;right:0;width:auto;height:auto;transform:none;container-type:size}
.hs .hs-slide:not([data-key=mix]) .hs-media img{--ub:56px;--gt:12px;--sx:clamp(8px,2cqw,28px);
 --W:min(max(100cqw,calc(100cqh*var(--ar))),calc((100cqw - 2*var(--sx))/(var(--x1) - var(--x0))),calc((100cqh - var(--tx) - var(--gt) - var(--ub))*var(--ar)/(var(--y1) - var(--y0))));
 --H:calc(var(--W)/var(--ar));--sn:calc(var(--tx) + var(--gt) - var(--y0)*var(--H));
 --cy:calc((var(--tx) + var(--gt) + 100cqh - var(--ub))/2 - (var(--y0) + var(--y1))/2*var(--H));
 position:absolute;inset:auto;max-width:none;max-height:none;margin:0;width:var(--W);height:var(--H);object-fit:fill;
 left:clamp(calc(var(--sx) - var(--x0)*var(--W)),clamp(min(0px,calc(100cqw - var(--W))),calc(50cqw - (var(--x0) + var(--x1))/2*var(--W)),max(0px,calc(100cqw - var(--W)))),calc(100cqw - var(--sx) - var(--x1)*var(--W)));
 top:clamp(var(--sn),clamp(min(0px,calc(100cqh - var(--H))),min(var(--cy),max(0px,var(--sn))),max(0px,calc(100cqh - var(--H)))),calc(100cqh - var(--ub) - var(--y1)*var(--H)));
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);mask-composite:intersect}
/* diskret toning bak teksten (ingen egen flate) */
.hs .hs-slide:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,13,.55),rgba(5,8,13,.25) calc(var(--tx)*.8),rgba(5,8,13,0) calc(var(--tx) + 40px))}
@media (max-width:600px){.hs{--fs:24px;--tt:24px;--lb:calc(8px + 15px*1.45 + 14px + 48px)}.hs-l{font-size:15px}.hs-txt .btns{margin-top:14px}}

/* ===== v10 (David 27.10 12:53): Mix tilpasses som Royal og Superior =====
   Samme duo (samme filer, samme <picture>-markup, samme deling 56 %/44 % og samme skillelinje som den nedre slideren).
   Bare beskjæring, skalering og plassering endres: duoen fyller heroen bak teksten, og hvert bilde skaleres og plasseres
   i sin egen halvdel slik at hele fisken (venstre) og hele kassen med logo (høyre) er synlige under teksten. */
.hs-slide[data-key=mix]{--tl:1;--g:12px}
.hs .hs-slide[data-key=mix] .hs-media.duo{inset:0;left:0;right:0;top:0;bottom:0;width:auto;height:auto;transform:none;container-type:size}
.hs .hs-slide[data-key=mix] .hs-media.duo:after{content:none}
.hs .hs-slide[data-key=mix] .hs-duo .pa,.hs .hs-slide[data-key=mix] .hs-duo .pb{inset:0}
.hs .hs-slide[data-key=mix] .hs-duo img{--ub:56px;--gt:12px;--sx:clamp(4px,1.2cqw,20px);--bt:calc(var(--tx) + var(--gt));--bb:calc(100cqh - var(--ub));
 --Wh:calc((var(--bb) - var(--bt))*var(--ar)/(var(--y1) - var(--y0)));--H:calc(var(--W)/var(--ar));
 position:absolute;inset:auto;max-width:none;max-height:none;margin:0;width:var(--W);height:var(--H);object-fit:fill;object-position:50% 50%;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 88%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 88%,transparent);mask-composite:intersect}
/* Royal (venstre): fisken rett under teksten, så langt til høyre som skillelinjen tillater ved fiskens underkant */
.hs .hs-slide[data-key=mix] .hs-duo .pa img{--ar:1.3391;--x0:.05;--x1:.97;--y0:.40;--y1:.79;
 --Ww:calc((44cqw - var(--g) - var(--sx))/(var(--x1) - var(--x0)));
 --Ww:calc((100cqw*(0.56 - 0.12*(var(--bt)/100cqh)) - var(--g) - var(--sx))/((var(--x1) - var(--x0)) + 0.12*(var(--y1) - var(--y0))/var(--ar)*(100cqw/100cqh)));
 --W:min(var(--Ww),var(--Wh));
 --xr:calc(44cqw - var(--g));--xr:calc(100cqw*(0.56 - 0.12*((var(--bt) + (var(--y1) - var(--y0))*var(--H))/100cqh)) - var(--g));
 left:clamp(calc(var(--sx) - var(--x0)*var(--W)),calc(56cqw - var(--W) + max(0px,var(--W) - 56cqw)/2),calc(var(--xr) - var(--x1)*var(--W)));
 top:calc(var(--bt) - var(--y0)*var(--H))}
/* Superior (høyre): kassen rett under teksten, så langt til venstre som skillelinjen tillater ved kassens overkant */
.hs .hs-slide[data-key=mix] .hs-duo .pb img{--ar:1.3368;--x0:.15;--x1:.885;--y0:.31;--y1:.80;
 --xl:calc(56cqw + var(--g));--xl:calc(100cqw*(0.56 - 0.12*(var(--bt)/100cqh)) + var(--g));
 --W:min(calc((100cqw - var(--sx) - var(--xl))/(var(--x1) - var(--x0))),var(--Wh));
 left:clamp(calc(var(--xl) - var(--x0)*var(--W)),calc(44cqw - max(0px,var(--W) - 56cqw)/2),calc(100cqw - var(--sx) - var(--x1)*var(--W)));
 top:calc(var(--bt) - var(--y0)*var(--H))}
.hs .hs-slide[data-key=mix] .hs-duo .cut{-webkit-mask-image:linear-gradient(180deg,transparent calc(var(--tx) + 2px),#000 calc(var(--tx) + 48px));mask-image:linear-gradient(180deg,transparent calc(var(--tx) + 2px),#000 calc(var(--tx) + 48px))}

/* ===== v11 (David 27.10, t252u): Mix på smal/mobil visning = samme form, størrelse og plassering som Royal og Superior =====
   Gjelder bare stående visning opp til 820 px; desktop og landskap er som i v10. Samme duo (samme filer og <picture>-markup,
   side om side med den skrå skillelinjen). Hver halvdel bruker nøyaktig samme bildeberegning (bredde, høyde, topp, toning) som
   enkeltlysbildet for sitt produkt, altså mer innzoomet enn i v10; ytterkantene beskjæres av skillelinjen.
   Royal: fiskehodet med merket ligger allerede godt innenfor venstre halvdel i enkeltplasseringen.
   Superior: bildet flyttes bare sidelengs slik at HØVDING SEAFOOD AS-logoen (--k*) ligger helt til høyre for skillelinjen. */
@media (max-width:820px) and (max-aspect-ratio:1/1){
.hs .hs-slide[data-key=mix] .hs-duo .pa img,.hs .hs-slide[data-key=mix] .hs-duo .pb img{--ub:56px;--gt:12px;--sx:clamp(8px,2cqw,28px);
 --W:min(max(100cqw,calc(100cqh*var(--ar))),calc((100cqw - 2*var(--sx))/(var(--x1) - var(--x0))),calc((100cqh - var(--tx) - var(--gt) - var(--ub))*var(--ar)/(var(--y1) - var(--y0))));
 --H:calc(var(--W)/var(--ar));--sn:calc(var(--tx) + var(--gt) - var(--y0)*var(--H));
 --cy:calc((var(--tx) + var(--gt) + 100cqh - var(--ub))/2 - (var(--y0) + var(--y1))/2*var(--H));
 position:absolute;inset:auto;max-width:none;max-height:none;margin:0;width:var(--W);height:var(--H);object-fit:fill;
 --L:clamp(calc(var(--sx) - var(--x0)*var(--W)),clamp(min(0px,calc(100cqw - var(--W))),calc(50cqw - (var(--x0) + var(--x1))/2*var(--W)),max(0px,calc(100cqw - var(--W)))),calc(100cqw - var(--sx) - var(--x1)*var(--W)));left:var(--L);
 --T:clamp(var(--sn),clamp(min(0px,calc(100cqh - var(--H))),min(var(--cy),max(0px,var(--sn))),max(0px,calc(100cqh - var(--H)))),calc(100cqh - var(--ub) - var(--y1)*var(--H)));top:var(--T);
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);mask-composite:intersect}
.hs .hs-slide[data-key=mix] .hs-duo .pa img{--ar:1.3391;--x0:.05;--x1:.97;--y0:.40;--y1:.79}
.hs .hs-slide[data-key=mix] .hs-duo .pb img{--ar:1.3368;--x0:.15;--x1:.885;--y0:.31;--y1:.80;--kx0:.272;--kx1:.617;--ky0:.505;--ky1:.72;--g:8px;--kr:6px;
 --xl:calc(51cqw + var(--g));--xl:calc(100cqw*(0.56 - 0.12*((var(--T) + var(--ky0)*var(--H))/100cqh)) + var(--g));
 left:clamp(calc(var(--xl) - var(--kx0)*var(--W)),var(--L),calc(100cqw - var(--kr) - var(--kx1)*var(--W)))}
}

/* ===== v12 (David 27.10, t254u): hero-knappene tilbake til den tidligere Tesla-formen =====
   Til og med v8 hadde hero-knappene (.hs-btn) border-radius 4px; i v9 ble de byttet til sidens .btn (999px, pilleform).
   Bare radiusen settes tilbake; alt annet er som .btn i den nedre slideren. */
.hs .hs-slide .btns .btn{border-radius:4px}

/* ===== v12 B (David 27.10 14:16, t255u/t256u): vide skjermer – bildene fyller hele heroen i full bredde (cover) =====
   Gjelder alt som ikke er v11-smal visning (stående opp til 820 px). Bildet skaleres til minst full bredde og full høyde
   (cover); bare topp og bunn beskjæres, uten toning i kantene. Topp-plasseringen legger produktet rett under teksten når det får plass (ellers midtstilt), og holder alltid nøkkelområdet (fiskehodet med merket / HØVDING SEAFOOD AS-
   logoen) helt inne i heroen og helst mellom teksten og prikkene. Ingen toning, så ingen mørke felt.
   Bildefilene er uendret. */
.hs-slide[data-key=royal]{--kx0:.10;--kx1:.24;--ky0:.49;--ky1:.67}
.hs-slide[data-key=superior]{--kx0:.272;--kx1:.617;--ky0:.505;--ky1:.72}
/* ===== v12 C: Mix sentrert – skillelinjen står midt under tittel og knapper, like brede halvdeler (alle bredder) =====
   Samme skrå linje (samme helning), bare parallellforskjøvet --dl slik at den synlige delen av linjen (fra tekstens underkant
   til bunnen) krysser 50 % midt på: --dl = 6 % av bredden × tekstbunn/høyde. */
.hs .hs-slide[data-key=mix] .hs-duo{--dl:2.3cqw}
@supports (width:calc(1px * (2px / 1px))){.hs .hs-slide[data-key=mix] .hs-duo{--dl:calc(6cqw*(var(--tx)/100cqh))}}
.hs .hs-slide[data-key=mix] .hs-duo .pa{clip-path:polygon(0 0,calc(56% + var(--dl)) 0,calc(44% + var(--dl)) 100%,0 100%)}
.hs .hs-slide[data-key=mix] .hs-duo .pb{clip-path:polygon(calc(56% + var(--dl)) 0,100% 0,100% 100%,calc(44% + var(--dl)) 100%)}
.hs .hs-slide[data-key=mix] .hs-duo .cut{clip-path:polygon(calc(55.85% + var(--dl)) 0,calc(56.15% + var(--dl)) 0,calc(44.15% + var(--dl)) 100%,calc(43.85% + var(--dl)) 100%)}
@media not all and (max-width:820px) and (max-aspect-ratio:1/1){
.hs .hs-slide:not([data-key=mix]) .hs-media img,.hs .hs-slide[data-key=mix] .hs-duo .pa img,.hs .hs-slide[data-key=mix] .hs-duo .pb img{--ub:56px;--gt:12px;
 --H:calc(var(--W)/var(--ar));
 --cy:calc((var(--tx) + var(--gt) + 100cqh - var(--ub))/2 - (var(--y0) + var(--y1))/2*var(--H));
 --kl:calc(var(--tx) + var(--gt) - var(--ky0)*var(--H));--kh:calc(100cqh - var(--ub) - var(--ky1)*var(--H));
 --sn:calc(var(--tx) + var(--gt) - var(--y0)*var(--H));
 --T:clamp(calc(100cqh - var(--H)),min(var(--kh),max(var(--kl),var(--cy),var(--sn))),0px);
 position:absolute;inset:auto;max-width:none;max-height:none;margin:0;width:var(--W);height:var(--H);object-fit:fill;top:var(--T);
 -webkit-mask-image:none;mask-image:none}
.hs .hs-slide:not([data-key=mix]) .hs-media img{--W:max(100cqw,calc(100cqh*var(--ar)));left:calc(50cqw - var(--W)/2)}
/* Mix: hvert bilde dekker hele sin halvdel (logoen ligger til høyre for prikkene, så den kan gå helt ned mot bunnen); fisken står like langt fra venstre kant som kassen fra høyre kant (--mm) */
.hs .hs-slide[data-key=mix] .hs-duo{--Wr:max(calc(100cqh*1.3391),calc(56cqw + var(--dl)));--mm:calc(var(--Wr)*.065);
 --Ws:max(calc(100cqh*1.3368),calc((56cqw - var(--dl) - var(--mm))/.87))}
.hs .hs-slide[data-key=mix] .hs-duo .pa img{--ar:1.3391;--x0:.05;--x1:.97;--y0:.40;--y1:.79;--ky0:.49;--ky1:.67;--W:var(--Wr);left:0}
.hs .hs-slide[data-key=mix] .hs-duo .pb img{--ar:1.3368;--x0:.15;--x1:.885;--y0:.31;--y1:.80;--kx0:.272;--ky0:.505;--ky1:.72;--g:12px;--W:var(--Ws);
 --kh:calc(100cqh - 8px - var(--ky1)*var(--H));
 --xl:calc(51cqw + var(--dl) + var(--g));
 left:max(calc(100cqw - var(--mm) - .87*var(--W)),calc(var(--xl) - var(--kx0)*var(--W)))}
}
/* Lesbarhet: med cover kan produktet (kassen / fiskeryggen) ligge bak teksten på vide skjermer, så toningen bak teksten
   gjøres sterkere ned til tekstens underkant (samme farge som før, ingen egen flate) */
@media not all and (max-width:820px) and (max-aspect-ratio:1/1){
.hs .hs-slide:after{background:linear-gradient(180deg,rgba(5,8,13,.66),rgba(5,8,13,.6) var(--tx),rgba(5,8,13,0) calc(var(--tx) + 90px))}}
@supports (width:calc(1px * (2px / 1px))){@media not all and (max-width:820px) and (max-aspect-ratio:1/1){
.hs .hs-slide[data-key=mix] .hs-duo .pb img{--xl:calc(100cqw*(0.56 - 0.12*((var(--T) + var(--ky0)*var(--H))/100cqh)) + var(--dl) + var(--g))}}}
/* smal visning (v11): samme størrelser som før, men logoen holdes til høyre for den sentrerte linjen */
@media (max-width:820px) and (max-aspect-ratio:1/1){
.hs .hs-slide[data-key=mix] .hs-duo .pb img{--xl:calc(51cqw + var(--dl) + var(--g))}
@supports (width:calc(1px * (2px / 1px))){.hs .hs-slide[data-key=mix] .hs-duo .pb img{--xl:calc(100cqw*(0.56 - 0.12*((var(--T) + var(--ky0)*var(--H))/100cqh)) + var(--dl) + var(--g))}}
}