/* Kritisk geometri: samma kvadratiska bildyta före bilder och senare temastilar. */
.PT_Wrapper .PT_Bildruta .artcell-slider{position:relative;width:100%;aspect-ratio:1 / 1}
.PT_Wrapper .PT_Bildruta .artcell-slider>.img-slider{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.PT_Wrapper .PT_Bildruta .artcell-slider>.img-slider>.img-wrapper{position:relative;flex:0 0 100%;width:100%;min-width:100%;max-width:100%;height:100%;padding-bottom:0!important;scroll-snap-align:start}
.PT_Wrapper .PT_Bildruta .artcell-slider>.img-slider>.img-wrapper>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}

/* Clip only the scroll viewport: fractional iOS slide edges must not reveal the next photo.
   Decals and navigation remain outside this clipping layer. */
@media(max-width:46.9rem){.PT_Wrapper .PT_Bildruta .artcell-slider>.img-slider{clip-path:inset(0 1px 0 0 round 1em 0 1em 0)}}

/* Kategorihuvudets läs-mer-yta (P1.3, 2026-09-24): samma höjd redan före main.css/artgrp.css.
   Utan dessa regler är kategoritexten fullt utfälld (~1 900 px på mobil, ~950 px på desktop) tills
   de sena stilmallarna kollapsar den, och hela produktlistan hoppar upp – uppmätt CLS ≈ 0,9 i
   replikan så snart .preloader inte längre täcker vyn. Värdena är kopierade från main.css och
   artgrp.css (samma selektorer, samma brytpunkter); de sena filerna vinner som förut i kaskaden. */
.readmoreWrap{position:relative;overflow:hidden}
.readmoreWrap[data-maxheight="250"]{max-height:250px}
.readmoreWrap.open{max-height:20000px}
@media(max-width:46.9rem){
  .ArtgrpMediaWrap.ArtgrpTextWrap .readmoreWrap[data-maxheight="250"]{max-height:100vw}
  .ArtgrpMediaWrap.ArtgrpTextWrap .readmoreWrap.open[data-maxheight="250"]{max-height:20000px}
}
@media(min-width:46.91rem){
  .ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap[data-maxheight="250"]{max-height:11.5vw}
  .ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap.open{max-height:20000px!important}
}
@media(min-width:46.91rem) and (max-width:75rem){.ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap[data-maxheight="250"]{max-height:9vw!important}}
@media(min-width:1360px) and (max-width:1620px){.ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap[data-maxheight="250"]{max-height:13vw}}
@media(min-width:1620px){.ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap[data-maxheight="250"]{max-height:250px}}

/* Runda 9: låg desktophöjd (Sebastian 2026-09-25, korr 2026-09-25, korr 2 2026-09-25). Önskemål:
   PDP:ns huvudbild ska krympa i höjd så att HELA bilden syns direkt under sticky-headern, utan att
   man behöver rulla – flytande i HELA desktopläget, aldrig mindre än en golvhöjd, rundade hörn kvar
   och videon anpassad på samma villkor, men HELT oförändrad så fort allt ryms (verifierat pixel för
   pixel vid 1440×900, se testutfall).

   Brytpunkt (bredd): samma nedre gräns som temats egen desktop-galleri (critical.css @media
   min-width:46.91rem – där .carousel .item byter till padding-bottom:100% i stället för mobilens
   0, miniatyrraden #thumbs blir synlig och object-fit blir cover). Under 46.91rem är det
   mobilgalleriet (annan höjdlogik, ej berört här).

   Ingen fast höjdbrytpunkt för SJÄLVA KRYMPNINGEN (korr 2): förra rundans platta max-height:760px
   är borttagen. I stället är "krymp bara vid behov" uttryckt som en formel: .item får en EXPLICIT
   höjd (aspect-ratio:1;height:auto – se motivering nedan) plus max-height:calc(100vh - avdrag)
   ovanpå. max-height är ett TAK, inte ett tvingat värde: är viewporten hög nog ryms hela kvadraten
   och taket gör ingenting; är viewporten låg klipper taket ner till min(kvadrat, 100vh-avdrag)
   automatiskt, oavsett bredd.

   Varför en explicit höjd behövs (mätt fram i denna korr): max-height klarar INTE av att klippa en
   höjd som kommer enbart från padding-bottom-tricket (height:auto + padding-bottom:%) – testat
   isolerat: ett block med padding-bottom:100% och max-height:200px renderas ändå på hela sin
   opåverkade höjd. Det räcker alltså inte att bara lägga max-height ovanpå temats orörda
   padding-bottom:100%. Vald lösning: aspect-ratio:1 + height:auto (elementets egen bredd, en
   deterministisk höjd som går att klippa). Ett försök med container query-enheter (för att i
   stället läsa exakt samma innehållande-block-bredd som padding-bottom-tricket, i jakt på
   bit-exakt paritet med temat) gav inkonsekventa mätvärden mellan körningar på i övrigt identisk
   uppställning – troligen webbteckensladdningens egen timing, inte en pålitlig teknik.

   VIKTIGT (hittat i denna korr, orsaken till att 1440×900 tidigare INTE var pixelidentisk): en
   aspect-ratio-driven höjd skiljer sig 0–2px från temats padding-bottom-tal (565 mot 565–567px) –
   i sig osynligt för ögat, men en bildomskalning till ett par pixlar annorlunda mål-storlek gör om
   HELA fotots pixlar (varje utdatapixel samplas om från en annan käll-position) och syns tydligt i
   en pixel-diff. Lösningen: aspect-ratio/height/min-height/padding-bottom LIGGER DÄRFÖR INNE I
   SAMMA per-bredd-tak-regler som max-height nedan, aldrig som ett eget, alltid aktivt block – är
   rutan inte hopklämd (utanför alla tre höjdgränserna) rör vi alltså padding-bottom:100% inte alls,
   och bilden renderas då med EXAKT samma tal som temat redan hade.

   Rundade hörn försvinner med object-fit:contain (korr 2, Sebastian upptäckte detta): critical.css
   rad 3349 lägger hörnradien (4 % uppe-vänster, 4 % nere-höger – temats snedställda form) direkt på
   <img>-taggen, och det är elementets EGEN ruta (inte den synliga bilden) som klipps. I normal
   cover-drift fyller bilden hela img-rutan så det syns inte, men ett tidigare försök i denna korr
   höll img-rutan tvingad till 100 % (min-width/min-height:100 % ärvt från critical.css rad 3554)
   och lät enbart object-fit:contain krympa den SYNLIGA bilden inuti – då hamnar den rundade
   klippningen på den nu osynliga, för stora rutans hörn i stället för på fotots egna, indragna
   hörn. Lösningen: släpp img-rutans tvingade minimum (min-width:0;min-height:0) och låt storleken
   i stället vara auto, begränsad av max-width/max-height:100 % (samma teknik som critical.css
   redan använder för .item img i sitt baslägesfall, rad 3337, fast utan det senare
   skrivbordstillägget) – då blir img-rutan lika stor som den faktiskt synliga bilden, och samma
   4 %-radie (skriven direkt här, inte ärvd) följer alltså fotots riktiga hörn oavsett storlek.
   Video (item.media) hade aldrig detta problem: dess rundade hörn sitter på .item.media-omslaget
   (overflow:hidden + samma 4 %-radie, critical.css rad 3349/3354), som redan krymper med
   .carousel .item – ingen särskild hörnregel behövs för video.

   Men (samma logik som för höjden ovan): object-fit:contain skulle ge FEL resultat – annan
   beskärning/zoom än temats cover – så fort rutan INTE faktiskt är hopklämd. CSS kan inte fråga
   "klipper max-height just nu?", så img/video/iframe-reglerna upprepas i VARJE bredd-taks egen
   media-regel, bakom SAMMA höjdgräns som klipper .item (se nästa stycke) – aldrig i ett delat,
   alltid aktivt block. Under gränsen är rutan redan hopklämd och cover skulle bara zooma in fel;
   över gränsen ska allt se ut precis som förut, cover och allt.

   Höjdavdraget OCH höjdgränsen skiljer sig mellan tre bredd-tak, eftersom .dummy-header (den fasta
   headerns platshållare) har tre olika höjder i critical.css. Höjdgränsen = rutans normala
   (okrympta) höjd, dvs elementets egen bredd (uppmätt ~565–580px i alla tre bredd-taken – ändras
   knappt med viewportbredden, sidans egen max-bredd begränsar bildkolumnen långt innan 1620px) plus
   samma avdrag som takets max-height, plus någon marginal, avrundat till ett städat tal:
    - 46.91rem–64rem (≈750–1024px): tablet-header (samma platshållare som mobilen, @media
      max-width:64rem → .dummy-header{height:124px}). Uppmätt i huvudbutiken (headless Chrome,
      live-sajten, 760/900/1024px bredd, hög viewport så inget klipps): bildrutans topp ligger vid
      y≈162px oavsett bredd i detta intervall → avdrag 175px (162 + marginal). Höjdgräns 680px
      (565+175=740 vid bredaste delen av taket, 1024px – 680 ligger under det, hellre missa några
      pixlar i överkant än byta utseende i onödan).
    - 64.01rem–1284px (≈1024–1284px): två menyraders header (critical.css @media min-width:64.01rem
      and max-width:1284px → .dummy-header{height:233px}). Uppmätt vid 1030/1280px bredd: bildrutans
      topp ligger vid y≈295px → avdrag 300px (1025–1279px har EXAKT samma headerhöjd som 1280px,
      inte högre – hela 1024–1284-remsan delar samma 233px-header). Höjdgräns 870px (565+300=865,
      +5 marginal).
    - ≥1285px: en menyrad (critical.css bas: min-width:64.01rem → .dummy-header{height:183px},
      vinner här eftersom 1284px-taket i tvårads-regeln inte längre matchar). Uppmätt vid
      1300/1440px bredd: bildrutans topp ligger vid y≈245px → avdrag 260px. Höjdgräns 850px
      (565+260=825, +25 marginal – bekräftar uttryckligen att 1440×800 (800<850) ska få hörn+contain
      och 1440×900 (900>850) ska vara helt opåverkad, precis det Sebastian bad om att verifiera).

   Golvhöjd: min-height:360px (Sebastians förslag). Vid 1024×600 (smalaste bredd-taket, tightaste
   verkliga fall som ändå inte är det snävaste avdraget) ger formeln 600−175=425px – golvet används
   inte där, det är en ren skyddsgräns. Den slår i stället in i det mellersta bredd-taket
   (1024–1284px, avdrag 300px) under ca 660px viewporthöjd (660−300=360), så att bilden aldrig blir
   mindre än en tydligt läsbar produktbild även vid ovanligt korta fönster – hellre några pixlars
   skroll än en frimärkesbild. CSS löser min-height > max-height-konflikten automatiskt: golvet
   vinner (spec: used min-height överskrider alltid max-height).

   Video (item.media): temats egen regel (critical.css .item iframe{width:90%;height:57.7%}) är en
   fast andel av rutan, inte ett golv/tak-baserat contain-fit, så när rutan blir lägre krymper
   videon proportionellt FÖR MYCKET. Askås-sidans egen Vimeo-anpassning (ett fristående skript
   utanför temat/repot, inte ss-fit.css – injicerat på produktsidan, se
   `.item.media.ss-fitted-vimeo`/`data-ss-video-ratio` i sidans källkod) sätter själv inline
   width/height med !important när den lyckas hämta videons proportioner (kan bli SMALARE än rutan
   för en stående video), och vinner då alltid över CSS här – men skriptet rör aldrig position/
   transform, så centreringen (top:50%;left:50%;translate(-50%,-50%), samma teknik som critical.css
   rad 3419) måste finnas kvar i vår regel, annars hamnar en smalare video i hörnet i stället för
   centrerad (rättat i denna korr – en tidigare version satte av misstag top:0;left:0;transform:none,
   vilket bara ser rätt ut när skriptet råkar fylla hela rutan). Regeln nedan är CSS-golvet för alla
   andra fall (innan skriptet hunnit köra, om det misslyckas, eller för en vanlig <video>-tagg):
   iframen fyller HELA rutan (100 %/100 %, ingen 90/57.7-andel) med object-fit:contain, precis som
   bilden. En stående (9:16) video i en bredare-än-hög ruta blir ändå smalare i pixlar än förut –
   det är korrekt contain-anpassning, inte ett fel (golvhöjden 360px begränsar hur extremt det blir).

   Pilar och miniatyrer: #thumbs, .thumbs-arrow och .hover-arrows ligger redan i normalt dokumentflöde
   direkt efter .carousel/.productzoom-inner-wrapper (eller är positionerade relativt samma ruta) –
   de flyttar upp automatiskt när rutan krymper, ingen egen regel behövs (verifierat med skärmdumpar).

   Ingen !important: den här filen laddas redan direkt efter critical.css både i bokmärket
   (build-preview.cjs, css-listan) och i publicerad drift (tt/shop/shop_header_includes.tt, samma
   "css"-array i den ordningen) — själva källan till konflikten (critical.css) ligger alltid före,
   så samma specificitet räcker. :not(.popped_img) speglar critical.css rad 3555 och håller
   förstoringsläget (zoom) helt oberört: dess egna regler (.popped_img .carousel, .popped_img
   .productzoom-wrapper, .popped_img .item iframe) matchar aldrig dessa selektorer. */
@media(min-width:46.91rem) and (max-width:64rem) and (max-height:680px){
body:not(.popped_img) .carousel .item{aspect-ratio:1;height:auto;min-height:360px;padding-bottom:0;max-height:calc(100vh - 175px)}
body:not(.popped_img) .item img,body:not(.popped_img) .item video{width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-top-left-radius:4%;border-bottom-right-radius:4%}
body:not(.popped_img) .item iframe{width:100%;height:100%;max-width:none;max-height:none;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:contain}
}
@media(min-width:64.01rem) and (max-width:1284px) and (max-height:870px){
body:not(.popped_img) .carousel .item{aspect-ratio:1;height:auto;min-height:360px;padding-bottom:0;max-height:calc(100vh - 300px)}
body:not(.popped_img) .item img,body:not(.popped_img) .item video{width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-top-left-radius:4%;border-bottom-right-radius:4%}
body:not(.popped_img) .item iframe{width:100%;height:100%;max-width:none;max-height:none;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:contain}
}
@media(min-width:1285px) and (max-height:850px){
body:not(.popped_img) .carousel .item{aspect-ratio:1;height:auto;min-height:360px;padding-bottom:0;max-height:calc(100vh - 260px)}
body:not(.popped_img) .item img,body:not(.popped_img) .item video{width:auto;height:auto;min-width:0;min-height:0;max-width:100%;max-height:100%;object-fit:contain;object-position:center;border-top-left-radius:4%;border-bottom-right-radius:4%}
body:not(.popped_img) .item iframe{width:100%;height:100%;max-width:none;max-height:none;top:50%;left:50%;transform:translate(-50%,-50%);object-fit:contain}
}

/* Kategorihuvudet (bild + text) på surfplatta och dator: Askås ger textytan en fast maxhöjd i vw (90 px vid 1000 px
   bredd), så att bara rubriken syns och toningen döljer resten. Här fyller texten i stället rutans höjd (bildens höjd)
   ned till Läs mer-raden, rubriken skalas med bredden och toningen täcker bara sista raden. Öppnat läge är oförändrat. */
@media(min-width:46.91rem){
  .ArtgrpTextWrap.ArtgrpMediaWrap .ArtgrpText{display:flex;flex-direction:column;min-height:0}
  .ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap[data-maxheight="250"]:not(.open){flex:1 1 0;min-height:4.5em;max-height:none!important}
  .ArtgrpTextWrap.ArtgrpMediaWrap .readmoreWrap.fadeOut:not(.open)::after{height:2.4em!important}
  .ArtgrpTextWrap.ArtgrpMediaWrap .ArtgrpText h1{font-size:clamp(20px,calc(4px + 2vw),32px)!important;line-height:1.2!important}
}
@media(min-width:46.91rem) and (max-width:64rem){.ArtgrpTextWrap.ArtgrpMediaWrap .readmoreBtn{margin-top:4px!important;margin-bottom:4px!important}}