/* =========================================================
   OPTA Product Gallery Thumbnails
   Aktiv kun når JS legger .opta-pg-gallery på riktig wrapper.
   ========================================================= */

body.single-product .opta-pg-gallery {
  position: relative !important;
  overflow: visible !important;
  display: block !important;
}

body.single-product .opta-pg-gallery > .product-images {
  width: 100% !important;
  margin: 0 !important;
}

body.single-product .opta-pg-brightness-filter {
  filter: brightness(0.96) !important;
}

body.single-product .opta-pg-gallery > .product-thumbnails {
  display: block !important;
  box-sizing: border-box !important;
  scroll-behavior: auto;
  scrollbar-width: none;
}

body.single-product .opta-pg-gallery > .product-thumbnails::-webkit-scrollbar {
  display: none;
}


body.single-product .opta-pg-gallery > .product-thumbnails {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: auto;
}

body.single-product .opta-pg-gallery > .product-thumbnails.opta-pg-is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  user-select: none;
}

body.single-product .opta-pg-gallery > .product-thumbnails.opta-pg-is-dragging * {
  user-select: none;
}

body.single-product .opta-pg-gallery .product-thumbnails .flickity-button {
  display: none !important;
}

body.single-product .opta-pg-gallery .product-thumbnails .flickity-viewport {
  height: auto !important;
  overflow: visible !important;
}

body.single-product .opta-pg-gallery .product-thumbnails .flickity-slider {
  position: static !important;
  transform: none !important;
  height: auto !important;
  display: flex !important;
  gap: 8px !important;
}

body.single-product .opta-pg-gallery .product-thumbnails .col {
  position: static !important;
  left: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body.single-product .opta-pg-gallery .product-thumbnails .col a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* Transparent border keeps size stable. Only active thumb gets visible border. */
  border: 1px solid transparent !important;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

body.single-product .opta-pg-gallery .product-thumbnails .col.is-nav-selected a,
body.single-product .opta-pg-gallery .product-thumbnails .col.is-selected a {
  border-color: #111 !important;
  box-shadow: none !important;
}

body.single-product .opta-pg-gallery .product-thumbnails img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

body.single-product .opta-pg-gallery .product-thumbnails a {
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: inherit;
}

body.single-product .opta-pg-gallery .product-thumbnails .col a,
body.single-product .opta-pg-gallery .product-thumbnails .col a:hover,
body.single-product .opta-pg-gallery .product-thumbnails .col a:active,
body.single-product .opta-pg-gallery .product-thumbnails .col a:focus {
  box-shadow: none !important;
  outline: none !important;
}

body.single-product .opta-pg-gallery .product-thumbnails .col:not(.is-selected):not(.is-nav-selected) a:hover,
body.single-product .opta-pg-gallery .product-thumbnails .col:not(.is-selected):not(.is-nav-selected) a:active,
body.single-product .opta-pg-gallery .product-thumbnails .col:not(.is-selected):not(.is-nav-selected) a:focus {
  border-color: transparent !important;
}

body.single-product .opta-pg-gallery .product-thumbnails.opta-pg-touching .col a,
body.single-product .opta-pg-gallery .product-thumbnails.opta-pg-is-dragging .col a {
  transition: none !important;
}

@media (hover: none), (pointer: coarse) {
  body.single-product .opta-pg-gallery .product-thumbnails .col a,
  body.single-product .opta-pg-gallery .product-thumbnails .col a:hover,
  body.single-product .opta-pg-gallery .product-thumbnails .col a:active,
  body.single-product .opta-pg-gallery .product-thumbnails .col a:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .col.is-selected a,
  body.single-product .opta-pg-gallery .product-thumbnails .col.is-nav-selected a {
    border-color: #111 !important;
    box-shadow: none !important;
  }

  body.single-product .opta-pg-gallery .product-thumbnails a,
  body.single-product .opta-pg-gallery .product-thumbnails img {
    pointer-events: none;
    -webkit-touch-callout: none;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .col {
    pointer-events: auto;
  }
}

body.single-product .opta-pg-thumb-controls {
  display: none;
  z-index: 20;
  pointer-events: none;
}

body.single-product .opta-pg-thumb-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  background: #fff;
  color: #111;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  margin: 0;
  z-index: 21;
}

body.single-product .opta-pg-thumb-btn:hover {
  border-color: #111;
}

body.single-product .opta-pg-thumb-btn[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}

/* =========================================================
   Store skjermer: vertikale thumbnails til venstre
   ========================================================= */

@media (min-width: 1720px) {

  body.single-product .opta-pg-gallery {
    --opta-thumb-size: 70px;
    --opta-thumb-col: 78px;
    --opta-thumb-distance: 110px;
    --opta-thumb-window: 520px;
  }

  body.single-product .opta-pg-gallery > .product-thumbnails {
    touch-action: pan-y pinch-zoom;
    position: absolute !important;
    top: 0 !important;
    left: calc(-1 * (var(--opta-thumb-size) + var(--opta-thumb-distance))) !important;
    width: var(--opta-thumb-col) !important;
    height: min(var(--opta-thumb-window), calc(100vh - 150px)) !important;
    max-height: min(var(--opta-thumb-window), calc(100vh - 150px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 30px 0 !important;
    z-index: 2;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .flickity-slider {
    flex-direction: column !important;
    width: var(--opta-thumb-size) !important;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .col {
    width: var(--opta-thumb-size) !important;
    max-width: var(--opta-thumb-size) !important;
    flex: 0 0 var(--opta-thumb-size) !important;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .col a {
    width: var(--opta-thumb-size) !important;
    height: var(--opta-thumb-size) !important;
  }

  body.single-product .opta-pg-gallery > .opta-pg-thumb-controls {
    position: absolute !important;
    top: 0 !important;
    left: calc(-1 * (var(--opta-thumb-size) + var(--opta-thumb-distance))) !important;
    width: var(--opta-thumb-col) !important;
    height: min(var(--opta-thumb-window), calc(100vh - 150px)) !important;
    max-height: min(var(--opta-thumb-window), calc(100vh - 150px)) !important;
  }

  body.single-product .opta-pg-gallery .opta-pg-thumb-btn {
    left: 0;
    width: var(--opta-thumb-size);
    height: 24px;
    font-size: 12px;
  }

  body.single-product .opta-pg-gallery .opta-pg-thumb-btn--prev {
    top: 0;
  }

  body.single-product .opta-pg-gallery .opta-pg-thumb-btn--next {
    bottom: 0;
  }
}

/* =========================================================
   Mindre skjermer: horisontale thumbnails under bildet
   ========================================================= */

@media (max-width: 1719px) {

  body.single-product .opta-pg-gallery {
    --opta-thumb-size: 100px;
  }

  body.single-product .opta-pg-gallery > .product-thumbnails {
    touch-action: pan-x pinch-zoom;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 12px !important;
    padding: 0 36px !important;
    transform: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .flickity-viewport {
    width: max-content !important;
    min-width: 100%;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .flickity-slider {
    flex-direction: row !important;
    width: max-content !important;
    min-width: 100%;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .col {
    width: var(--opta-thumb-size) !important;
    max-width: var(--opta-thumb-size) !important;
    flex: 0 0 var(--opta-thumb-size) !important;
  }

  body.single-product .opta-pg-gallery .product-thumbnails .col a {
    width: var(--opta-thumb-size) !important;
    height: var(--opta-thumb-size) !important;
  }

  body.single-product .opta-pg-gallery > .opta-pg-thumb-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: var(--opta-thumb-size) !important;
  }

  body.single-product .opta-pg-gallery .opta-pg-thumb-btn {
    top: 50%;
    width: 28px;
    height: 38px;
    font-size: 18px;
    transform: translateY(-50%);
  }

  body.single-product .opta-pg-gallery .opta-pg-thumb-btn--prev {
    left: 0;
  }

  body.single-product .opta-pg-gallery .opta-pg-thumb-btn--next {
    right: 0;
  }
}

/* =========================================================
   Mobil: erstatt thumbnails med prikker/rundinger
   ========================================================= */

body.single-product .opta-pg-mobile-dots {
  display: none;
}

body.single-product .opta-pg-gallery > .opta-pg-mobile-dots .opta-pg-mobile-dot {
  all: unset;
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-block !important;
  box-sizing: border-box !important;
  flex: 0 0 7px !important;

  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  min-height: 7px !important;
  max-width: 7px !important;
  max-height: 7px !important;

  padding: 0 !important;
  margin: 0 !important;

  border: 1px solid #111 !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;

  cursor: pointer;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

body.single-product .opta-pg-gallery > .opta-pg-mobile-dots .opta-pg-mobile-dot::before,
body.single-product .opta-pg-gallery > .opta-pg-mobile-dots .opta-pg-mobile-dot::after {
  content: none !important;
  display: none !important;
}

body.single-product .opta-pg-gallery > .opta-pg-mobile-dots .opta-pg-mobile-dot.is-active {
  background: #111 !important;
  background-color: #111 !important;
}

body.single-product .opta-pg-gallery > .opta-pg-mobile-dots .opta-pg-mobile-dot:focus-visible {
  outline: 1px solid #111 !important;
  outline-offset: 3px;
}

@media (max-width: 849px) {

  body.single-product .opta-pg-gallery > .product-thumbnails {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.single-product .opta-pg-gallery > .opta-pg-thumb-controls {
    display: none !important;
  }

  body.single-product .opta-pg-gallery > .opta-pg-mobile-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    margin: 10px 0 0;
    padding: 0;

    line-height: 1;
    text-align: center;
  }
}

@media (min-width: 850px) {
  body.single-product .opta-pg-gallery > .opta-pg-mobile-dots {
    display: none !important;
  }
}