.usi-hover-zoom {
  position: fixed;
  z-index: 9995;
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-color: #fff;
  box-shadow: none;
}
.usi-lightbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  z-index: 10050;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  background: #070707;
  color: #fff;
  touch-action: none;
  isolation: isolate;
}
@supports (height: 100dvh) {
  .usi-lightbox { width: 100dvw; height: 100dvh; max-width: 100dvw; max-height: 100dvh; }
}
.usi-lightbox.is-open { display: flex; }
.usi-lightbox__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #070707;
}
.usi-lightbox__background-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /* v0.2.17: Magic-like colour background. The already-loaded small thumbnail is
     first fitted to the viewport, then enlarged around its centre. This makes
     large white technical margins contribute very little to the visible
     background while preserving the dominant colour near the product. */
  filter: blur(20px) brightness(.60);
  transform: scale(10);
  transform-origin: center center;
  transition: opacity 350ms ease;
  will-change: opacity, transform;
}
.usi-lightbox__background-image.is-active { opacity: 1; }
.usi-lightbox--bg-color .usi-lightbox__background { background: #070707; }
.usi-lightbox--bg-white { background: #fff; color: #222; }
.usi-lightbox--bg-white .usi-lightbox__background { background: #fff; }
.usi-lightbox--bg-white .usi-lightbox__background-image { opacity: 0 !important; }
.usi-lightbox--bg-white .usi-lightbox__caption { color: #222; }
.usi-lightbox--bg-white .usi-lightbox__thumbs { background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.08); }
.usi-lightbox--bg-white .usi-lightbox__close,
.usi-lightbox--bg-white .usi-lightbox__prev,
.usi-lightbox--bg-white .usi-lightbox__next { background: rgba(255,255,255,.78); color: #555; border: 1px solid rgba(0,0,0,.08); }
.usi-lightbox--bg-white .usi-lightbox__zoom-hint { background: rgba(255,255,255,.72); color: #333; border-color: rgba(0,0,0,.18); text-shadow: none; }
.usi-lightbox--bg-solid { background: var(--usi-gallery-solid-bg, #fff); color: #fff; }
.usi-lightbox--bg-solid .usi-lightbox__background { background: var(--usi-gallery-solid-bg, #fff); }
.usi-lightbox--bg-solid .usi-lightbox__background-image { opacity: 0 !important; }
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext { color: #222; }
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext .usi-lightbox__caption { color: #222; }
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext .usi-lightbox__thumbs { background: rgba(255,255,255,.96); border-top: 1px solid rgba(0,0,0,.08); }
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext .usi-lightbox__close,
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext .usi-lightbox__prev,
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext .usi-lightbox__next { background: rgba(255,255,255,.78); color: #555; border: 1px solid rgba(0,0,0,.08); }
.usi-lightbox--bg-solid.usi-lightbox--bg-solid-darktext .usi-lightbox__zoom-hint { background: rgba(255,255,255,.72); color: #333; border-color: rgba(0,0,0,.18); text-shadow: none; }
.usi-lightbox__stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.usi-lightbox__image-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.usi-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: opacity 220ms ease;
}
.usi-lightbox__image.is-zoom-animating {
  transition: transform 320ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
}
.usi-lightbox__zoom-hint {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: rgba(25,25,25,.62);
  border: 1px solid rgba(255,255,255,.36);
  color: #fff;
  font: 300 25px/1 Arial, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  pointer-events: none;
  opacity: .86;
  transition: opacity 180ms ease, transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .usi-lightbox__image { cursor: zoom-in; }
  .usi-lightbox.is-zoomed .usi-lightbox__image { cursor: zoom-out; }
  .usi-lightbox:not(.is-zoomed) .usi-lightbox__zoom-hint { display: flex; }
  .usi-lightbox.is-zoomed .usi-lightbox__zoom-hint {
    display: flex;
    opacity: 0;
    transform: scale(.72);
  }
}
.usi-lightbox__close,
.usi-lightbox__prev,
.usi-lightbox__next {
  position: absolute;
  z-index: 3;
  border: 0;
  background: rgba(0,0,0,.42);
  color: #fff;
  cursor: pointer;
  font: inherit;
}
.usi-lightbox__close {
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 40px;
}
.usi-lightbox__prev,
.usi-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  font-size: 34px;
}
.usi-lightbox__prev { left: max(8px, env(safe-area-inset-left)); }
.usi-lightbox__next { right: max(8px, env(safe-area-inset-right)); }
.usi-lightbox__caption {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 70px 10px;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: #fff;
  text-shadow: none;
  background: transparent;
  overflow: hidden;
  transition: opacity 180ms ease, max-height 260ms ease, padding-top 260ms ease, padding-bottom 260ms ease;
  max-height: 90px;
}
.usi-lightbox__thumbs {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  justify-content: center;
  overflow-x: auto;
  padding: 10px 58px 14px;
  background: rgba(0,0,0,.34);
  -webkit-overflow-scrolling: touch;
}
.usi-lightbox__thumb {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.usi-lightbox__thumb.is-active { border-color: #ff7900; }
.usi-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
html.usi-lightbox-open,
body.usi-lightbox-open { overflow: hidden !important; overscroll-behavior: none; }
/* v0.2.10: desktop gallery composition inspired by the approved uyut34/Magic layout.
   In the normal view a small top rim frames the image. Zoom temporarily uses
   that space plus the caption area, then both return when zoom is reset. */
@media (min-width: 768px) {
  .usi-lightbox__image-wrap {
    top: var(--usi-gallery-top-gap, 24px);
    right: 0;
    bottom: 0;
    left: 0;
    transition: top 320ms cubic-bezier(.22,.61,.36,1);
  }
  .usi-lightbox.is-zoomed .usi-lightbox__image-wrap { top: 0; }
  .usi-lightbox.is-zoomed .usi-lightbox__caption {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .usi-lightbox__background-image {
    inset: 0;
    filter: blur(20px) brightness(.60);
    transform: scale(10);
  }
  .usi-lightbox__prev,
  .usi-lightbox__next { width: 40px; height: 54px; font-size: 28px; }
  .usi-lightbox__caption { display: none !important; }
  .usi-lightbox__thumbs { justify-content: flex-start; padding-left: 10px; padding-right: 10px; }
  .usi-lightbox__thumb { width: 56px; height: 56px; }
}