:root{
    --as-bg: #ffffff;
    --as-text: #0e1318;
    --as-muted: rgba(14,19,24,.65);
    --as-border: rgba(14,19,24,.12);
    --as-radius: 18px;

    --as-ease: cubic-bezier(.2,.8,.2,1);
    --as-dur: 240ms;

    --as-max: 100%;
    --as-pad-desktop: 0px;
    --as-pad-mobile: 0px;

    --as-overlay: rgba(0,0,0,.5);
    --as-modal-bg: #0b0b0b;
    --as-modal-fg: #ffffff;

    --as-chip-bg: rgba(255,255,255,.10);
    --as-chip-bg-active: rgba(255,255,255,.18);
    --as-chip-border: rgba(255,255,255,.18);

    --as-counter-bg: rgba(0,0,0,.55);
    --as-counter-fg: #ffffff;

    --as-thumb-size: 78px;
    --as-thumb-radius: 12px;
    --as-hero-radius: 18px;

    /* Gap between slides inside hero track */
    --as-hero-slide-gap: 12px;

    --as-focus: 0 0 0 4px rgba(113,155,255,.35);
  }

  *{ box-sizing:border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--as-bg);
    color: var(--as-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
.as-grid-item img:hover {
transform: scale(1.035)
}

.as-grid-item img {
transition: 0.15s ease-in-out;
}
  /* ---------- PAGE WRAP ---------- */
  .as-page-wrap{
    max-width: 100%;
    margin: 0;
    margin-top: 82px;
    padding: var(--as-pad-desktop);
  }

  /* ---------- WRAPPER ---------- */
  .as-wrapper{
    position: relative;
    border-radius: 0px;
    overflow: hidden;
    background: 0px;
    border: none;
  }

  /* ---------- GRID (PAGE) ---------- */
  .as-grid{
    display: grid;
    grid-template-columns: 1fr;          /* 100% */
    grid-template-rows: auto auto;       /* hero + right-stack */
    gap: 2px;
    padding: 0px;
    height: auto;                        /* let it grow on mobile */
  }

  .as-grid-hero{
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 1.37778 / 1;           /* stable height while loading */
  }

  .as-grid-right{
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;          /* stacked */
    grid-template-rows: repeat(4, auto);
    gap: 2px;
    min-height: 0;
    height: max-content;
  }

  .as-grid-right .as-grid-item{
    aspect-ratio: 1.67778 / 1;           /* consistent shape on mobile */
  }

  /* ---------- GRID ITEM (PAGE) ---------- */
  .as-grid-item{
    position: relative;                  /* canvas för absolut img */
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border: none;
    padding: 0;
    background: #111;
  }

  .as-grid-item img{
    position: absolute;                  /* fyll hela rutan */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- DESKTOP LAYOUT: 50/50, RIGHT 2x2 ---------- */
  @media (min-width: 900px){
    .as-grid{
      grid-template-columns: 1fr 1fr;    /* 50/50 */
      grid-template-rows: 1fr 1fr;       /* 2 rows */
      height: max-content;
    }

    .as-grid-hero{
      grid-column: 1;
      grid-row: 1 / span 2;              /* hero spans full height */
      aspect-ratio: 1.67778 / 1;
    }

    .as-grid-right{
      grid-column: 2;
      grid-row: 1 / span 2;
      grid-template-columns: 1fr 1fr;    /* 2 columns */
      grid-template-rows: 1fr 1fr;       /* 2 rows */
    }

    .as-grid-right .as-grid-item{
      aspect-ratio: 1.67778 / 1;
    }
  }

.as-counter {
    position: absolute;
    right: 0.5rem;
    bottom: 0.9rem;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(247, 245, 243);
    color: rgb(18, 17, 16);
    font-size: 0.85rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, .14);
    user-select: none;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    font-family: 'Inter Variablefont Opsz Wght';
    font-weight: 500;
    box-shadow: rgba(60, 64, 67, 0.2) 0px 1px 2px 0px, rgba(60, 64, 67, 0.12) 0px 2px 6px 2px;
}
  /* ---------- DIALOG ---------- */
  dialog#asprGalleryDialog_91827{
    --aspr-dialog-pad: 2rem;
    position: fixed;
    inset: 0;
    margin: 0;
    border: none;
    padding: 0rem;
    width: 100vw;
    height: 100% !important;
    max-width: none;
    background: rgb(18, 17, 16);
    color: var(--as-modal-fg);
    max-height: 100%;
    place-self: center;
    place-content: center;
  }

  dialog#asprGalleryDialog_91827::backdrop{
    background: var(--as-overlay);
  }

.as-modal-shell {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0px;
    overflow: hidden;
    box-shadow: none;
    width: 100%;
    max-height: 100%;
    margin: 0 auto;
    max-width: 1100px;
    max-width: min(1100px, 100vw);
}
  .as-modal-body{
    padding: 0px;
    overflow-x: hidden;  /* IMPORTANT: stoppa horisontell “drag/scroll” i Alla */
    max-width: 100%;
  }

  .as-modal-grid{
    align-items: center;
    gap: 1.5rem;
    flex-direction: column;
    display: flex;
    min-width: 0;        /* IMPORTANT: låt flex-barn krympa istället för att expandera layout */
    max-width: 100%;
  }

  @media (min-width: 900px){
    .as-modal-grid{
      align-items: center;
      gap: 14px;
      flex-direction: column;
      display: flex;
    }
      .as-counter {
    right: 0.9rem;
    bottom: 0.9rem;
}
      .as-hero-track {
    border-radius: 15px !important;
}
.as-filter-row {
    justify-content:center;
    margin-bottom: 1.5rem !important;

}
  }

  /* ---------- BUTTONS (DIALOG) ---------- */
  .as-close-btn{
    position: absolute;
    top: var(--aspr-dialog-pad);
    right: var(--aspr-dialog-pad);
    z-index: 50;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgb(247, 245, 243);
    color: rgb(18, 17, 16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--as-dur) var(--as-ease), background var(--as-dur) var(--as-ease);
    -webkit-tap-highlight-color: transparent;
  }

.as-close-icon{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  display: block;
  flex: 0 0 18px;           /* iOS: hindrar “flex shrink” */
}

.as-close-icon *{
  vector-effect: non-scaling-stroke; /* om du har strokes */
}
  .as-nav-btn{
    position: absolute;
    top: 50%;
    left: var(--aspr-dialog-pad);
    transform: translateY(-50%);
    z-index: 50;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgb(247, 245, 243);
    color: rgb(18, 17, 16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--as-dur) var(--as-ease), background var(--as-dur) var(--as-ease), opacity var(--as-dur) var(--as-ease);
    -webkit-tap-highlight-color: transparent;
  }

  .as-nav-btn:focus-visible{ box-shadow: var(--as-focus); outline:none; }

  @media (hover:hover){
    .as-nav-btn:hover{ background: rgba(255,255,255,.14); }
  }

  .as-nav-btn:active{ transform: translateY(-50%) scale(.98); }

  .as-nav-btn.as-nav-btn-next{
    left: auto;
    right: var(--aspr-dialog-pad);
  }

  /* ---------- HERO (DIALOG) ---------- */
  .as-hero-wrap{
    position: relative;
    border-radius: 0px;
    overflow:hidden;
    background: #101316;
    width: 100%;
  }

  /* Du använder track + slides nu, så hero-img ska alltid vara av */
  .as-hero-img{ display:none !important; }

  .as-hero-track{
    display:block;
    position: relative;
    width: 100%;
    height: min(70vh, 640px);
    border-radius: 0px;
    overflow: hidden;
    touch-action: pan-y;
  }
  .as-hero-slide{
    position: absolute;
    inset: 0; /* IMPORTANT: slide-container alltid full bredd, så kanterna "driftar" inte */
    width: 100%;
    height: 100%;
    border-radius: 0px;
    overflow: hidden; /* track klipper fortfarande */
    background: transparent; /* gap ska vara "inne i kortet", inte på containern */
    opacity: 0;
    visibility: hidden;
    transform: translateX(0px);
    transition: transform 0.75s var(--as-ease), opacity 0.75s var(--as-ease);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .as-hero-slide.is-active{
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .as-hero-slide.is-prev,
  .as-hero-slide.is-next{
    opacity: 1;
    visibility: visible;
    z-index: 1;
  }
  .as-hero-slide img{
    width: 100%; /* gap skapas här */
    height: 100%;
    margin: 0 auto; /* centrerar kortet */
    object-fit: cover;
    display:block;
    border-radius: 0px; /* valfritt, gör kort-känsla */
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  @media (max-width: 899px){
    .as-hero-track{ height: 276px; }
  }

.as-modal-counter-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}
.as-modal-hero-counter {
    position: static;
    margin: 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: #403D3B;
    border: none;
    color: rgba(255, 255, 255, .92);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
    font-family: 'Inter Variablefont Opsz Wght';
    font-weight: 400;
}
.as-thumbs{
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  max-height: min(70vh, 640px);
 padding: 2px 0px;
    justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow-x: auto;    /* IMPORTANT: Alla-filtret (många thumbs) får inte göra hela layouten bredare */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;

  /* IMPORTANT: isolate thumbs so hero repaint doesn’t “flash” the row */
  contain: layout paint;
  transform: translateZ(0);
  will-change: scroll-position;
}

.as-thumbs::-webkit-scrollbar{ display:none; }

.as-thumb-btn{
  flex: 0 0 auto;
  width: 5.25rem;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  position: relative;
  outline: none;

  /* IMPORTANT: remove opacity transition (common cause of perceived “blink”) */
  transition: transform var(--as-dur) var(--as-ease), border-color var(--as-dur) var(--as-ease);

  -webkit-tap-highlight-color: transparent;
  aspect-ratio: 1 / 1;
  opacity: 0.5;

  /* promote each thumb to its own layer */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.as-thumb-btn:focus-visible{ box-shadow: var(--as-focus); }

.as-thumb-btn[aria-current="true"] {
    opacity: 1;
    outline: 2px solid #fff;
}

.as-thumb-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

 @media (max-width: 899px){
    .as-nav-btn{ display:none !important; }
    .as-thumbs{ display:flex !important; }

.as-thumbs {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        padding: 2px 0px;
        justify-content: flex-start;
    }
.as-close-btn {
    top: 0.9em;
    right: 0.9em;;
}
    .as-thumb-btn{
      width: 70px;
      aspect-ratio: 1 / 1;
      opacity: 0.75;
    }

    .as-thumb-btn[aria-current="true"]{
      opacity: 1;
      outline: 2px solid #fff;
    }
  }

.as-filter-row {
    display: flex;
    gap: 0.5rem;
    padding-right: 0px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-bottom: 4rem;
    align-items: center;
}

  .as-filter-row::-webkit-scrollbar{ display:none; }

.as-filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border-radius: 999px;
    border: none;
    background: #403D3B;
    color: rgba(255, 255, 255, .92);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: 0.25s ease-in-out;
    transition: background var(--as-dur) var(--as-ease), transform var(--as-dur) var(--as-ease);
    white-space: nowrap;
    font-size: 0.875rem;
    font-family: 'Inter Variablefont Opsz Wght';
    font-weight: 400;
}

  .as-filter-chip[aria-pressed="true"]{
    background: rgb(247, 245, 243);
    color: rgb(18, 17, 16);
  }

  .as-filter-count{ font-variant-numeric: tabular-nums; }

  /* ---------- BODY LOCK ---------- */
  body.as-body-lock{
    overflow: hidden;
    touch-action: none;
  }
.as-thumbs {
    margin-top: 1.5rem;
}
  /* ---------- MOBILE SPECIALS (YOUR OVERRIDES) ---------- */
  @media (max-width: 767px){
    .as-page-wrap{
      padding: var(--as-pad-mobile);
      margin-top: 62px;
    }
    .as-filter-row, .as-thumbs {
        padding-left: 17px;
        position: relative;
        padding-right: 17px;
    }
        .as-thumbs {
     margin-top: 4rem;
    }
    .as-grid-right{
      grid-template-columns: repeat(4, auto) !important;
    }

    .as-modal-body{
      padding: 0px !important;
    }

    dialog#asprGalleryDialog_91827{
      padding: 0px !important;
      width: 100vw;
      height: 100% !important;
      max-width: none;
    }

    .as-grid-right .as-grid-item{
      aspect-ratio: 1 / 1 !important;
    }
  }

  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; scroll-behavior: auto !important; }
  }
</style>

<style id="asprSkeletonStyles_77441">
  @keyframes asShimmer_77441 {
    0%   { transform: translateX(-60%); }
    100% { transform: translateX(60%); }
  }

  /* Skeleton host */
  .as-skeleton{
    position: relative;
    overflow: hidden;
    padding: 0px;
  }

  .as-skeleton > img{
    position: relative;
    z-index: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  /* Base layer */
  .as-skeleton::before{
    content:"";
    position:absolute;
    inset:0;
    z-index: 2;
    background: #f0f0f0;
    opacity: 1;
    transition: opacity 180ms linear;
    pointer-events: none;
  }

  /* Shimmer layer */
  .as-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    z-index: 3;
    transform: translateX(-60%);
    background: linear-gradient(90deg,#f0f0f0 25%,#f9f9f9 37%,#f0f0f0 63%);
    opacity: 1;
    animation: asShimmer_77441 1.1s ease-in-out infinite;
    transition: opacity 180ms linear;
    pointer-events: none;
  }

  /* When loaded (or errored), fade skeleton out */
  .as-skeleton.as-loaded::before,
  .as-skeleton.as-loaded::after{
    opacity: 0;
    animation: none;
  }

  @media (prefers-reduced-motion: reduce){
    .as-skeleton::after{
      animation: none;
    }
  }