/*! Blauw Gallery v1.2.1 | Blauw Films | MIT */

/* Smootify's own slider stays as the fallback until the gallery is ready */
html.bg-js [data-blauw-gallery-hide] { display: none !important; }

/* ---------- Product showcase ---------- */
.bg-gallery {
  --bg-page: #f7f7f7;          /* page background, used for the rail fades */
  --bg-ink: #1a1a1a;
  --bg-line: #dadada;          /* outline of the selected thumbnail */
  --bg-rail-w: 84px;           /* thumbnail column width */
  --bg-gap: .625rem;           /* space between thumbnails */
  --bg-visible: 5;             /* thumbnails visible before scrolling */
  --bg-stage-max: 82vh;        /* tallest the main image may be */
  --bg-min-w: clamp(480px, 46vw, 760px);
  position: relative; width: 100%;
}
.bg-gallery.bg-loading { aspect-ratio: 1 / 1; }

/* Shield against site-wide image rules (Webflow sets max-width / inline-block) */
.bg-gallery img, .bg-gallery video { max-width: none; vertical-align: top; border: 0; }

/* desktop: rail + stage, both aligned to the top */
@media (min-width: 992px) {
  .bg-gallery { min-width: var(--bg-min-w); }
}
.bg-desk {
  display: grid; grid-template-columns: var(--bg-rail-w) minmax(0, 1fr);
  gap: 1.25rem; align-items: start;
}
.bg-gallery.is-single .bg-desk { grid-template-columns: minmax(0, 1fr); }
.bg-gallery.is-single .bg-rail { display: none; }

.bg-rail { position: relative; }
.bg-rail-scroll {
  --bg-cell: calc(var(--bg-rail-w) - 8px);
  max-height: calc(var(--bg-visible) * var(--bg-cell) + (var(--bg-visible) - 1) * var(--bg-gap) + 8px);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: var(--bg-gap); padding: 4px;
  scrollbar-width: none; overscroll-behavior: contain;
}
.bg-rail-scroll::-webkit-scrollbar { display: none; }
.bg-thumb {
  position: relative; flex: none; display: block;
  width: 100%; aspect-ratio: 1 / 1; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  opacity: .55; transition: opacity 150ms ease, outline-color 150ms ease;
  outline: 1px solid transparent; outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
.bg-thumb:hover { opacity: .9; }
.bg-thumb.is-active { opacity: 1; outline-color: var(--bg-line); }
.bg-thumb:focus-visible { opacity: 1; outline: 2px solid #1451eb; }
.bg-thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  user-select: none; -webkit-user-drag: none;
}
.bg-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.bg-thumb-play svg { width: 22px; height: 22px; fill: rgba(249,249,249,.95); stroke: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }

.bg-rail-arrow {
  position: absolute; left: 0; right: 0; z-index: 2; height: 44px; padding: 0; border: 0;
  display: flex; justify-content: center; cursor: pointer; background: transparent;
  opacity: 0; pointer-events: none; transition: opacity 150ms ease;
}
.bg-rail-arrow span {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f9f9f9; border: 1px solid #dadada; color: #dadada;
  transition: background-color 200ms ease;
}
.bg-rail-arrow:hover span, .bg-rail-arrow:focus-visible span { background: #f1f1f1; }
.bg-rail-arrow:focus-visible { outline: none; }
.bg-rail-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bg-rail-arrow.is-up { top: 0; align-items: flex-start; padding-top: 2px; background: linear-gradient(var(--bg-page) 30%, transparent); }
.bg-rail-arrow.is-down { bottom: 0; align-items: flex-end; padding-bottom: 2px; background: linear-gradient(transparent, var(--bg-page) 70%); }
.bg-rail.can-up .bg-rail-arrow.is-up, .bg-rail.can-down .bg-rail-arrow.is-down { opacity: 1; pointer-events: auto; }

.bg-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: var(--bg-stage-max); }
.bg-stage-frame { position: absolute; inset: 0; cursor: zoom-in; outline: none; }
.bg-stage-frame.is-video { cursor: default; }
.bg-stage-frame:focus-visible { box-shadow: 0 0 0 2px #1451eb; }
.bg-stage-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center top;
  transition: opacity 200ms ease; user-select: none; -webkit-user-drag: none;
}

/* mobile: swipe row */
.bg-track, .bg-counter { display: none; }

@media (max-width: 991px) {
  .bg-desk { display: none; }
  .bg-track {
    display: flex; flex-direction: row; gap: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    aspect-ratio: var(--bg-ratio, 1);
  }
  .bg-track::-webkit-scrollbar { display: none; }
  .bg-slide {
    margin: 0; position: relative; cursor: zoom-in; outline: none; -webkit-tap-highlight-color: transparent;
    flex: 0 0 100%; height: 100%;
    scroll-snap-align: center; scroll-snap-stop: always;
    display: flex; align-items: center; justify-content: center;
  }
  .bg-slide.is-video { cursor: default; }
  .bg-slide:focus-visible { box-shadow: inset 0 0 0 2px #1451eb; }
  .bg-slide img, .bg-slide video { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
  .bg-counter {
    display: block; position: absolute; right: .75rem; bottom: .75rem;
    font: 400 .75rem/1 "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: .04em; color: var(--bg-ink);
    background: rgba(249, 249, 249, .85); padding: .4rem .6rem; border-radius: 999px;
    pointer-events: none; font-variant-numeric: tabular-nums;
  }
  .bg-gallery.is-single .bg-counter { display: none; }
}

/* ---------- Lightbox ---------- */
.bg-lb {
  position: fixed; inset: 0; z-index: 10000;
  background: #f9f9f9; opacity: 0; visibility: hidden;
  transition: opacity .28s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .28s, background-color .24s ease;
  touch-action: none; overscroll-behavior: contain;
}
.bg-lb.is-open { opacity: 1; visibility: visible; transition: opacity .28s cubic-bezier(.4, 0, .2, 1), visibility 0s, background-color .24s ease; }
.bg-lb.is-dark { background: #101010; }
.bg-lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.bg-lb-img {
  display: block; flex: none; max-width: none; max-height: none;
  transform-origin: center center; will-change: transform;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  cursor: zoom-in;
}
.bg-lb.is-zoomed .bg-lb-img { cursor: grab; }
.bg-lb.is-dragging .bg-lb-img { cursor: grabbing; }

.bg-lb-btn {
  position: absolute; z-index: 2; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: #888;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .55; transition: opacity .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.bg-lb-btn:hover, .bg-lb-btn:focus-visible { opacity: .95; outline: none; }
.bg-lb-btn:focus-visible { box-shadow: 0 0 0 2px #1451eb; }
.bg-lb-btn[disabled] { opacity: 0; pointer-events: none; }
.bg-lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bg-lb.is-dark .bg-lb-btn { color: #aaa; }
.bg-lb-close { top: 20px; left: 20px; }
.bg-lb-toggle { top: 20px; right: 20px; }
.bg-lb-prev { left: 16px; top: 50%; margin-top: -20px; }
.bg-lb-next { right: 16px; top: 50%; margin-top: -20px; }
.bg-lb-count {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  font: 400 11px/1 "Roboto", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: .08em; color: rgba(128, 128, 128, .75);
  pointer-events: none; font-variant-numeric: tabular-nums;
}
@media (hover: none), (max-width: 991px) {
  .bg-lb-prev, .bg-lb-next { display: none; }
  .bg-lb-count { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .bg-lb, .bg-lb.is-open, .bg-lb-btn, .bg-thumb, .bg-stage-media, .bg-rail-arrow { transition: none; }
}