/* Navneleg Suite: mobile product gallery */
body.single-product.nls-mobile-product-gallery-active.nls-pg-hide-captions .pswp__caption,
body.single-product.nls-mobile-product-gallery-active.nls-pg-hide-captions .pswp__caption__center {
  display: none !important;
}

@media (max-width: 767px) {
  body.single-product.nls-mobile-product-gallery-active .woocommerce-product-gallery {
    position: relative;
    overflow: visible;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-hide-thumbnails .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-hide-thumbnails .woocommerce-product-gallery ol.flex-control-thumbs {
    display: none !important;
  }

  body.single-product.nls-mobile-product-gallery-active:not(.nls-pg-zoom-button) .woocommerce-product-gallery__trigger,
  body.single-product.nls-mobile-product-gallery-active:not(.nls-pg-zoom-button) .nls-product-gallery-zoom {
    display: none !important;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .nls-product-gallery-zoom {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--nls-pg-zoom-border, #E5E7EB) !important;
    border-radius: 50% !important;
    background: var(--nls-pg-zoom-bg, #FFFFFF) !important;
    box-shadow: 0 3px 12px rgba(3, 28, 38, 0.14) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger img,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger span,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .nls-product-gallery-zoom span {
    display: none !important;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger::before,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger::after,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .nls-product-gallery-zoom::before,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .nls-product-gallery-zoom::after {
    content: "" !important;
    position: absolute !important;
    inset: auto !important;
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: var(--nls-pg-zoom-icon, #111827) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger::after,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .nls-product-gallery-zoom::after {
    transform: rotate(90deg) !important;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .woocommerce-product-gallery__trigger:focus-visible,
  body.single-product.nls-mobile-product-gallery-active.nls-pg-zoom-button .nls-product-gallery-zoom:focus-visible {
    outline: 2px solid var(--nls-pg-zoom-icon, #111827) !important;
    outline-offset: 3px !important;
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-indicator {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    clear: both;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 28px;
    margin: 10px 0 4px;
    transform: none !important;
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 3px 7px;
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-dot {
    display: block !important;
    flex: 0 0 auto;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--nls-pg-inactive, #E5E7EB) !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: 0.72;
    transform: translateX(0) scaleX(1) scaleY(1);
    transform-origin: center;
    transition:
      width 380ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 240ms ease,
      opacity 240ms ease,
      transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: width, transform;
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-dot.is-active {
    width: 28px !important;
    border-radius: 999px !important;
    background: var(--nls-pg-active, #111827) !important;
    opacity: 1;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-motion .nls-product-gallery-indicator.is-moving-forward .nls-product-gallery-dot.is-active {
    animation: nls-gallery-pill-forward 440ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-motion .nls-product-gallery-indicator.is-moving-backward .nls-product-gallery-dot.is-active {
    animation: nls-gallery-pill-backward 440ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-dot:focus-visible {
    outline: 2px solid var(--nls-pg-active, #111827);
    outline-offset: 3px;
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-count {
    color: var(--nls-pg-count, #6B7280);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-motion .nls-product-gallery-indicator.is-moving-forward .nls-product-gallery-count {
    animation: nls-gallery-count-forward 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.single-product.nls-mobile-product-gallery-active.nls-pg-motion .nls-product-gallery-indicator.is-moving-backward .nls-product-gallery-count {
    animation: nls-gallery-count-backward 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes nls-gallery-pill-forward {
  0% { transform: translateX(-6px) scaleX(0.68) scaleY(0.82); }
  52% { transform: translateX(-2px) scaleX(1.2) scaleY(1.08); }
  100% { transform: translateX(0) scaleX(1) scaleY(1); }
}

@keyframes nls-gallery-pill-backward {
  0% { transform: translateX(6px) scaleX(0.68) scaleY(0.82); }
  52% { transform: translateX(2px) scaleX(1.2) scaleY(1.08); }
  100% { transform: translateX(0) scaleX(1) scaleY(1); }
}

@keyframes nls-gallery-count-forward {
  0% { opacity: 0; transform: translateX(7px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes nls-gallery-count-backward {
  0% { opacity: 0; transform: translateX(-7px); }
  100% { opacity: 1; transform: translateX(0); }
}

@media (min-width: 768px) {
  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-indicator,
  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-zoom {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-dot {
    transition: none;
  }

  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-indicator.is-moving-forward .nls-product-gallery-dot.is-active,
  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-indicator.is-moving-backward .nls-product-gallery-dot.is-active,
  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-indicator.is-moving-forward .nls-product-gallery-count,
  body.single-product.nls-mobile-product-gallery-active .nls-product-gallery-indicator.is-moving-backward .nls-product-gallery-count {
    animation: none;
  }
}