/* 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;
  }
}