/* Standalone Journal3 product gallery video: does not alter product.twig. */
.product-image .main-image .sbz-video-slide { overflow: hidden; }
.product-image .main-image .sbz-video-frame { position: relative; width: 100%; aspect-ratio: var(--sbz-gallery-ratio, 1 / 1); overflow: hidden; background: #111; }
.product-image .main-image .sbz-video-frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.product-image .additional-images .sbz-video-thumb { position: relative; cursor: pointer; overflow: hidden; box-sizing: border-box; }
.product-image .additional-images .sbz-video-thumb-surface { display: block; aspect-ratio: var(--sbz-thumb-ratio, 1 / 1); width: 100%; background: #242424; }
.product-image .additional-images .sbz-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 30px; height: 30px; color: #fff; background: rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; pointer-events:none; font-size: 12px; }

.product-image .main-image .sbz-video-frame .sbz-video-error { position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:4px;padding:12px 16px;background:rgba(0,0,0,.76);color:#fff;font:inherit;cursor:pointer;max-width:90%; }

/* Desktop non-carousel grid video; the Journal3 popup remains untouched. */
.product-image .additional-images .sbz-video-thumb-surface { position:relative; overflow:hidden; }
.product-image .additional-images .sbz-grid-video { display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover; }
.product-image .additional-images .sbz-video-thumb { isolation:isolate; }
.product-image .additional-images .sbz-video-thumb .sbz-video-play { pointer-events:none; }

/* v2.7: Size ONLY our added popup video as a normal centered LightGallery item.
   Keep Journal3's backdrop, slide dimensions, arrows, toolbars and image markup. */
.lg-outer .lg-item:has(video.sbz-popup-video) .lg-video-cont,
.lg-outer .lg-item.sbz-popup-video-item .lg-video-cont {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  inset: auto;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  /* Product photos are 2:3. Fit within the available viewport, not the popup. */
  width: min(90vw, 640px, calc((100vh - 170px) * 2 / 3));
  width: min(90vw, 640px, calc((100dvh - 170px) * 2 / 3));
  height: auto;
  aspect-ratio: 2 / 3;
  max-width: 100%;
  max-height: calc(100% - 120px);
  overflow: hidden;
}
.lg-outer .lg-item:has(video.sbz-popup-video) .lg-video,
.lg-outer .lg-item.sbz-popup-video-item .lg-video {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.lg-outer .lg-item video.sbz-popup-video {
  position: absolute;
  display: block;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

/* v2.8: video is a gallery image-like click target, not a transport control. */
.product-image .main-image .sbz-video-slide { cursor: zoom-in; }
.product-image .main-image .sbz-product-video,
.product-image .additional-images .sbz-grid-video { pointer-events: none; }
.product-image .additional-images .sbz-video-thumb:has(.sbz-grid-video) .sbz-video-play { display:none !important; }


/* Vimeo: crop iframe INSIDE the identical image/video frame. Never restyle LightGallery shell. */
.product-image .sbz-vimeo-frame,
.product-image .sbz-vimeo-thumb .sbz-video-thumb-surface {position:relative;overflow:hidden;background:#111;}
.product-image .sbz-vimeo-frame .sbz-vimeo-iframe,
.product-image .sbz-vimeo-thumb .sbz-vimeo-iframe {
  position:absolute;top:50%;left:50%;border:0;max-width:none;max-height:none;
  transform:translate(-50%,-50%);pointer-events:none;
}
.product-image .sbz-vimeo-slide {cursor:zoom-in;}
.product-image .sbz-vimeo-thumb .sbz-video-play {pointer-events:none;}

/* Only the Vimeo item is constrained. Journal3 controls backdrop, arrows, layout, and thumbnails. */
.lg-outer .lg-item:has(iframe.lg-vimeo) .lg-video-cont,
.lg-outer .lg-item.sbz-vimeo-popup-item .lg-video-cont {
  position:relative;display:inline-block;vertical-align:middle;inset:auto;
  box-sizing:border-box;padding:0;margin:0;
  width:min(90vw,640px,calc((100dvh - 170px)*2/3));
  height:auto;aspect-ratio:2/3;max-width:100%;max-height:calc(100% - 120px);
  overflow:hidden;background:#111;
}
.lg-outer .lg-item:has(iframe.lg-vimeo) .lg-video,
.lg-outer .lg-item.sbz-vimeo-popup-item .lg-video {
  position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;
}
.lg-outer .lg-item iframe.lg-vimeo {
  position:absolute;top:50%;left:50%;border:0;
  max-width:none!important;max-height:none!important;
  transform:translate(-50%,-50%);pointer-events:none;
}

/* Vimeo popup is now initialized by the native LightGallery Vimeo plugin.
   Restrict only its own slide, retaining existing gallery backdrop/navigation. */
.lg-outer .lg-item.sbz-vimeo-popup-item .lg-video-cont {
  max-width: min(90vw, 640px, calc((100dvh - 170px) * 2 / 3)) !important;
}
.lg-outer .lg-item.sbz-vimeo-popup-item .lg-video { padding-bottom: 0 !important; }
.lg-outer .lg-item.sbz-vimeo-popup-item iframe.lg-vimeo { pointer-events: none; }

/* YouTube/Shorts: same image-like frame as Vimeo, without changing LightGallery UI. */
.lg-outer .lg-item:has(iframe.lg-youtube) .lg-video-cont {
  position:relative;display:inline-block;vertical-align:middle;inset:auto;
  box-sizing:border-box;padding:0;margin:0;
  width:min(90vw,640px,calc((100dvh - 170px)*2/3));
  height:auto;aspect-ratio:2/3;max-width:100%;max-height:calc(100% - 120px);
  overflow:hidden;background:#111;
}
.lg-outer .lg-item:has(iframe.lg-youtube) .lg-video {
  position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;
}
.lg-outer .lg-item iframe.lg-youtube {
  position:absolute;top:50%;left:50%;border:0;
  max-width:none!important;max-height:none!important;
  transform:translate(-50%,-50%);pointer-events:none;
}