/* Product lightbox: click a product shot and it opens large on a 90% black screen that fades in over .3s; with
   several shots in a group you get arrows, a thumbnail strip, keyboard arrows and swipe, and the next shot slides
   in 80px while it fades. Measured from the Webflow lightbox on the Lord Burger product pages (webflow.js
   lightbox module + its CSS); rewritten, no jQuery.

   Knobs: set them on :root or any ancestor of <body> (the viewer is appended to <body>). */
.plb {
  position: fixed; inset: 0; z-index: var(--plb-z, 2000);
  background: var(--plb-scrim, rgba(0, 0, 0, .9));
  color: #fff;
  font: 300 17px/1.2 var(--plb-font, "Helvetica Neue", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif);
  text-align: center;
  opacity: 0;
  transition: opacity var(--plb-fade, .3s) var(--plb-ease, ease);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  outline: 0;
}
.plb[hidden] { display: none; }
.plb.is-shown { opacity: 1; }
html.plb-open { overflow: hidden; }                      /* page scroll locked while open (Webflow: html.w-lightbox-noscroll) */

/* the stage: full screen on phones; 96vh with a 2vh top margin from 768px; 86 / 84vh when a strip sits under it */
.plb__content { position: relative; height: 100vh; height: 100dvh; overflow: hidden; touch-action: pan-y pinch-zoom; }
.plb--group .plb__content { height: 86vh; height: 86dvh; }
.plb__view { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.plb__figure { position: relative; margin: 0; cursor: var(--plb-img-cursor, zoom-out); }
.plb--group .plb__figure { cursor: pointer; }            /* in a group a click on the shot goes to the next one */
.plb__img { display: block; max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: auto; height: auto; -webkit-user-drag: none; }
.plb--group .plb__img { max-height: 86vh; max-height: 86dvh; }
.plb__caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .5em 1em;
  background: rgba(0, 0, 0, .4); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plb__caption:empty { display: none; }

/* controls: close top right (4em x 2.6em), arrows the full stage height (4em wide), all fading on .3s */
.plb__ctrl {
  position: absolute; top: 0; width: 4em; padding: 0; border: 0; background: none; color: #fff; font: inherit;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity .3s;
}
.plb__ctrl svg { display: block; overflow: visible; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)); }
.plb__ctrl:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.plb__close { right: 0; height: 2.6em; }
.plb__close svg { width: 18px; height: 18px; }
.plb__prev, .plb__next { bottom: 0; display: none; opacity: var(--plb-arrow-opacity, .5); }   /* arrows from 768px only; phones swipe */
.plb__prev { left: 0; } .plb__next { right: 0; }
.plb__prev svg, .plb__next svg { width: 24px; height: 40px; }
.plb__close { top: 0; }
.plb__ctrl:hover { opacity: 1; }
.plb__ctrl.is-inactive, .plb__ctrl.is-inactive:hover { opacity: 0; pointer-events: none; }

/* thumbnail strip (groups only): 10vh squares, 2vh above and below, the current one dimmed to .3 */
.plb__strip {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 1vh;
  white-space: nowrap; line-height: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.plb__strip::-webkit-scrollbar { display: none; }
.plb:not(.plb--group) .plb__strip { display: none; }
.plb__item {
  display: inline-block; box-sizing: content-box; width: var(--plb-thumb, 10vh); padding: 2vh 1vh;
  border: 0; margin: 0; background: none; cursor: pointer; vertical-align: top;
}
.plb__item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.plb__item.is-active { opacity: var(--plb-thumb-active, .3); }
.plb__thumb { display: block; width: 100%; height: var(--plb-thumb, 10vh); object-fit: cover; background: #222; }

/* the spinner only shows when a shot takes longer than 200ms to load */
.plb__spinner {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; box-sizing: border-box;
  border: 5px solid rgba(0, 0, 0, .4); border-radius: 50%; animation: plb-spin .8s linear infinite;
}
.plb__spinner::after {
  content: ""; position: absolute; inset: -4px; border: 3px solid transparent; border-bottom-color: #fff; border-radius: 50%;
}
.plb__spinner[hidden] { display: none; }
@keyframes plb-spin { to { transform: rotate(360deg); } }

@media (min-width: 768px) {
  .plb__content { height: 96vh; margin-top: 2vh; }
  .plb--group .plb__content { height: 84vh; }
  .plb__img { max-width: 96vw; max-height: 96vh; }
  .plb--group .plb__img { max-width: 82.3vw; max-height: 84vh; }
  .plb__close { opacity: var(--plb-close-opacity, .8); }
  .plb--group .plb__prev, .plb--group .plb__next { display: flex; }
}

/* the trigger: any element with data-plb (a link to the big image, or anything wrapping an <img>) */
[data-plb] { cursor: var(--plb-trigger-cursor, zoom-in); }

@media (prefers-reduced-motion: reduce) {
  .plb, .plb__ctrl { transition: none; }
  .plb__spinner { animation-duration: 2.4s; }
}