/* Multishop BD Product Gallery Video 4.9.4
 * Persistent Swiper, native/fallback WooCommerce thumbnails and instant lazy players.
 */

.rivrun-gv-ready,
.rivrun-gv-media-host {
  position: relative !important;
}

/* The gallery container itself must never receive the media/thumbnail frame. */
body.single-product :is(
  .wp-block-woocommerce-product-gallery,
  .wc-block-product-gallery,
  .woocommerce-product-gallery
).rivrun-gv-ready {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Keep WooCommerce's native gallery mounted for variation/lightbox support, but
   let the single Rivrun Swiper be the only visible and interactive main stage. */
.rivrun-gv-media-host > :not(.rivrun-gv-shell) {
  visibility: hidden !important;
  pointer-events: none !important;
}

.rivrun-gv-shell {
  position: absolute;
  inset: 0;
  z-index: 30;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior-x: contain;
}

/* The injected stage follows the same corner treatment as the native product
   image, including video posters and provider players. */
.rivrun-gv-shell,
.rivrun-gv-swiper,
.rivrun-gv-slide,
.rivrun-gv-image-frame,
.rivrun-gv-video-surface,
.rivrun-gv-video-player,
.rivrun-gv-video-poster,
.rivrun-gv-media,
.rivrun-gv-image,
.rivrun-gv-video-poster__image {
  border-radius:
    var(--rivrun-gallery-media-radius-tl, var(--rivrun-gallery-media-radius, inherit))
    var(--rivrun-gallery-media-radius-tr, var(--rivrun-gallery-media-radius, inherit))
    var(--rivrun-gallery-media-radius-br, var(--rivrun-gallery-media-radius, inherit))
    var(--rivrun-gallery-media-radius-bl, var(--rivrun-gallery-media-radius, inherit)) !important;
}

.rivrun-gv-swiper,
.rivrun-gv-swiper .swiper-wrapper,
.rivrun-gv-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  min-width: 0;
}

.rivrun-gv-swiper {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y pinch-zoom;
}

.rivrun-gv-swiper .swiper-wrapper {
  align-items: stretch;
  will-change: transform;
}

.rivrun-gv-slide {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.rivrun-gv-image-frame,
.rivrun-gv-video-surface {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
}

.rivrun-gv-image,
.rivrun-gv-video-poster__image,
.rivrun-gv-media,
.rivrun-gv-video-player iframe,
.rivrun-gv-video-player video {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
  object-fit: contain;
  background: transparent;
}

/* Portrait/Reels media occupies the complete square gallery stage just like a
   product image. Provider iframes already fill this box; native MP4 and poster
   media use cover so a tall source cannot collapse into a smaller-looking tile. */
.rivrun-gv-video-poster__image,
.rivrun-gv-media--mp4 {
  object-fit: cover;
}

/* YouTube Shorts commonly returns a landscape poster with large black bands
   baked into the bitmap. Crop only that landscape Reels poster; portrait and
   square custom posters, normal videos, images and the live player are untouched. */
.rivrun-gv-slide--reel .rivrun-gv-video-poster__image.rivrun-gv-reel-poster--landscape {
  transform: scale(1.82);
  transform-origin: 50% 50%;
}

.rivrun-gv-image-frame {
  cursor: zoom-in;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}

.rivrun-gv-image {
  -webkit-user-drag: none;
  user-select: none;
  transition: transform .2s ease;
  transform-origin: 50% 50%;
}

.rivrun-gv-image-frame:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
  .rivrun-gv-image-frame { overflow: hidden; }
  .rivrun-gv-image-frame.is-hover-zooming .rivrun-gv-image {
    transform-origin: var(--rivrun-gv-hover-x, 50%) var(--rivrun-gv-hover-y, 50%);
    transform: scale(var(--rivrun-gv-hover-scale, 1.5));
    transition: transform .08s linear, transform-origin .08s linear;
    will-change: transform;
  }
}

.rivrun-gv-video-surface {
  background: #000;
}

.rivrun-gv-video-player,
.rivrun-gv-video-poster,
.rivrun-gv-video-status {
  position: absolute;
  inset: 0;
}

.rivrun-gv-video-player {
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
  transition: opacity .18s ease, visibility .18s ease;
}

.rivrun-gv-video-player > div,
.rivrun-gv-video-player iframe,
.rivrun-gv-video-player video {
  width: 100% !important;
  height: 100% !important;
}

.rivrun-gv-video-poster {
  z-index: 10;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity .18s ease, visibility .18s ease;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rivrun-gv-video-poster__image {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}

.rivrun-gv-video-play {
  position: relative;
  z-index: 3;
  width: clamp(64px, 10vw, 96px);
  height: clamp(64px, 10vw, 96px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease;
}

.rivrun-gv-video-play:hover,
.rivrun-gv-video-play:focus-visible {
  transform: scale(1.06);
}

.rivrun-gv-video-play svg {
  width: 100%;
  height: 100%;
  display: block;
}

.rivrun-gv-video-status {
  z-index: 2;
  display: grid;
  place-items: end center;
  padding: 16px;
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

/* Keep the cross-origin iframe below the chosen poster until the provider
   confirms actual playback. iOS/WebKit can promote iframes to a compositor
   layer, so equal z-index/opacity is not enough to guarantee poster coverage. */
.rivrun-gv-video-surface.is-ready.is-start-requested .rivrun-gv-video-player {
  z-index: 1;
  opacity: .001;
  visibility: visible;
  pointer-events: none;
}

.rivrun-gv-video-surface.is-ready.has-started .rivrun-gv-video-player {
  z-index: 12;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rivrun-gv-video-surface.has-started .rivrun-gv-video-poster {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rivrun-gv-video-surface.has-error .rivrun-gv-video-poster {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rivrun-gv-video-surface.is-loading .rivrun-gv-video-play::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 999px;
  animation: rivrun-gv-spin .8s linear infinite;
}

@keyframes rivrun-gv-spin { to { transform: rotate(360deg); } }

/* Cross-origin players swallow touches. Narrow edge zones preserve smooth
   previous/next swipes while leaving the central native controls usable. */
.rivrun-gv-video-edge {
  position: absolute;
  top: 76px;
  bottom: 96px;
  z-index: 6;
  width: 18%;
  min-width: 34px;
  display: none;
  pointer-events: none;
  touch-action: pan-y pinch-zoom;
}
.rivrun-gv-video-edge--prev { left: 0; }
.rivrun-gv-video-edge--next { right: 0; }

/* Native YouTube/Vimeo controls must remain fully clickable on desktop.
   Touch-only edge zones preserve swipe over cross-origin iframes, but avoid
   the player's top settings/CC row and bottom timeline/fullscreen controls. */
@media (hover: none), (pointer: coarse) {
  .rivrun-gv-video-surface.is-ready .rivrun-gv-video-edge {
    display: block;
    pointer-events: auto;
  }
}

.rivrun-gv-nav {
  position: absolute;
  top: 50%;
  z-index: 40;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  background: rgba(0,0,0,.46);
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .18s ease, visibility .18s ease, background-color .18s ease, border-color .18s ease;
}
.rivrun-gv-nav--prev { left: 16px; }
.rivrun-gv-nav--next { right: 16px; }
.rivrun-gv-nav svg { width: 24px; height: 24px; }
.rivrun-gv-nav:hover,
.rivrun-gv-nav:focus-visible { background: rgba(0,0,0,.74); border-color: rgba(255,255,255,.78); }
.rivrun-gv-nav.is-disabled,
.rivrun-gv-nav.is-locked { opacity: 0; visibility: hidden; pointer-events: none; }

/* Keep WooCommerce's proven image thumbnails and insert only the video
   thumbnail into that same rail. The controller owns the visible active border. */
.rivrun-gv-video-thumb-wrap {
  display: block;
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

button.rivrun-gv-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 100%;
  flex: 0 0 72px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent !important;
  border-radius: 12px;
  outline: 0 !important;
  box-shadow: none !important;
  background: #111;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.rivrun-gv-video-thumb-wrap > button.rivrun-gv-thumb {
  width: 100%;
  height: 100%;
  min-width: 0;
}

button.rivrun-gv-thumb:hover { transform: translateY(-2px); }

.rivrun-gv-thumb__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.rivrun-gv-thumb__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.28);
  pointer-events: none;
}
.rivrun-gv-thumb__play svg { width: 25px; height: 25px; }

/* Legacy/FlexSlider fallbacks may need their own active frame. WooCommerce's
   block gallery is intentionally excluded: its IMG active class remains owned
   by WooCommerce so image-only and image+video galleries use identical CSS. */
.rivrun-gv-ready .flex-control-thumbs > li,
.rivrun-gv-ready .flex-control-thumbs > li img,
.rivrun-gv-ready .rivrun-gv-managed-thumbs .rivrun-gv-thumb,
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap {
  outline: 0 !important;
  box-shadow: none !important;
}

.rivrun-gv-ready .flex-control-thumbs > li:not(.rivrun-gv-item-active),
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap:not(.rivrun-gv-item-active),
.rivrun-gv-ready .rivrun-gv-managed-thumbs .rivrun-gv-thumb:not(.is-active) {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.rivrun-gv-ready .flex-control-thumbs > li.rivrun-gv-item-active,
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap.rivrun-gv-item-active,
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap.rivrun-gv-item-active > .rivrun-gv-thumb,
.rivrun-gv-ready .rivrun-gv-managed-thumbs button.rivrun-gv-thumb.is-active {
  border: var(--rivrun-gallery-thumb-border-width, var(--rivrun-gallery-native-border-width, 1px)) solid var(--rivrun-gallery-thumb-border-color, var(--rivrun-buy-border-soft, #f0d9b8)) !important;
  border-radius: var(--rivrun-gallery-thumb-radius, var(--rivrun-gallery-native-thumb-radius, 12px)) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 1px rgba(240,217,184,.38) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rivrun-buy-border-soft, #f0d9b8) 38%, transparent) !important;
}

.rivrun-gv-ready .wc-block-product-gallery-thumbnails__scrollable,
.rivrun-gv-ready .flex-control-thumbs {
  box-sizing: border-box !important;
  scrollbar-width: thin;
  scroll-behavior: auto !important;
}

/* Hide WooCommerce's own previous/next UI; the Swiper navigation above owns the
   complete image/video sequence in both directions. */
.rivrun-gv-ready [class*="product-gallery-large-image-next-previous"],
.rivrun-gv-ready .wc-block-product-gallery-large-image__next-previous,
.rivrun-gv-ready .flex-direction-nav {
  display: none !important;
}

@media (max-width: 782px), (hover: none) {
  .rivrun-gv-shell { touch-action: pan-y pinch-zoom; }
  .rivrun-gv-nav { width: 40px; height: 40px; }
  .rivrun-gv-nav--prev { left: 10px; }
  .rivrun-gv-nav--next { right: 10px; }

  .rivrun-gv-ready .wc-block-product-gallery-thumbnails,
  .rivrun-gv-ready .wp-block-woocommerce-product-gallery-thumbnails,
  .rivrun-gv-ready .flex-control-thumbs {
    visibility: visible !important;
  }
  .rivrun-gv-ready .wc-block-product-gallery-thumbnails__scrollable,
  .rivrun-gv-ready .flex-control-thumbs {
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  .rivrun-gv-ready .wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar,
  .rivrun-gv-ready .flex-control-thumbs::-webkit-scrollbar { display: none !important; }

  /* Do not force compact thumbnails here. Default mode deliberately leaves
     WooCommerce/Gutenberg sizing untouched; the explicit size classes below
     apply 44px only when the user selects a Small option. */
  .rivrun-gv-ready .flex-control-thumbs > li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .rivrun-gv-video-edge { width: 22%; top: 72px; bottom: 94px; }

  body.rivrun-hide-gallery-thumbs .wc-block-product-gallery-thumbnails,
  body.rivrun-hide-gallery-thumbs .wc-block-product-gallery__thumbnails,
  body.rivrun-hide-gallery-thumbs .wp-block-woocommerce-product-gallery-thumbnails,
  body.rivrun-hide-gallery-thumbs .flex-control-thumbs {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rivrun-gv-video-player,
  .rivrun-gv-video-poster,
  .rivrun-gv-video-play,
  .rivrun-gv-nav,
  button.rivrun-gv-thumb {
    transition: none !important;
  }
  .rivrun-gv-video-surface.is-loading .rivrun-gv-video-play::after { animation: none; }
}


/* ==========================================================
   Rivrun 4.2.0: desktop-safe thumbnails and managed fallback
   ========================================================== */

/* WooCommerce may delay or omit its React thumbnail rail. The managed rail is
   created only as a fallback and is replaced automatically when native
   thumbnails become available. */
.rivrun-gv-managed-thumbs {
  position: relative;
  z-index: 35;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-behavior: auto !important;
  visibility: visible !important;
}

.rivrun-gv-managed-thumbs::-webkit-scrollbar { height: 5px; }

/* Always restore the standard thumbnail gallery on desktop unless the user
   explicitly selected a hide-on-PC option. */
@media (min-width: 783px) {
  .rivrun-gv-ready .wc-block-product-gallery-thumbnails,
  .rivrun-gv-ready .wp-block-woocommerce-product-gallery-thumbnails,
  .rivrun-gv-ready .wc-block-product-gallery-thumbnails__scrollable,
  .rivrun-gv-ready .flex-control-thumbs,
  .rivrun-gv-managed-thumbs {
    visibility: visible !important;
  }

  .rivrun-gv-ready .wc-block-product-gallery-thumbnails__scrollable,
  .rivrun-gv-ready .flex-control-thumbs {
    box-sizing: border-box !important;
  }
}

/* Touch hardening: horizontal gestures belong to Swiper; vertical page scroll
   remains native on iOS Safari/Chrome and Android browsers. */
.rivrun-gv-swiper,
.rivrun-gv-swiper .swiper-wrapper {
  touch-action: pan-y pinch-zoom;
}

/* Gallery thumbnail visibility options. */
@media (max-width: 782px) {
  body.rivrun-gthumbs-hide-phone :is(.flex-control-thumbs, .wc-block-product-gallery-thumbnails, .wp-block-woocommerce-product-gallery-thumbnails, .rivrun-gv-managed-thumbs),
  body.rivrun-gthumbs-hide-both :is(.flex-control-thumbs, .wc-block-product-gallery-thumbnails, .wp-block-woocommerce-product-gallery-thumbnails, .rivrun-gv-managed-thumbs),
  body.rivrun-hide-gallery-thumbs .rivrun-gv-managed-thumbs {
    display: none !important;
  }
}
@media (min-width: 783px) {
  body.rivrun-gthumbs-hide-pc :is(.flex-control-thumbs, .wc-block-product-gallery-thumbnails, .wp-block-woocommerce-product-gallery-thumbnails, .rivrun-gv-managed-thumbs),
  body.rivrun-gthumbs-hide-both :is(.flex-control-thumbs, .wc-block-product-gallery-thumbnails, .wp-block-woocommerce-product-gallery-thumbnails, .rivrun-gv-managed-thumbs) {
    display: none !important;
  }
}

@media (max-width: 782px) {
  .rivrun-gv-managed-thumbs {
    gap: 6px;
    margin-top: 6px;
    padding: 6px 2px 2px;
    scrollbar-width: none;
  }
  .rivrun-gv-managed-thumbs::-webkit-scrollbar { display: none; }

  body.rivrun-gthumbs-small-phone button.rivrun-gv-thumb,
  body.rivrun-gthumbs-small-both button.rivrun-gv-thumb,
  body.rivrun-gthumbs-small-phone .flex-control-thumbs img,
  body.rivrun-gthumbs-small-both .flex-control-thumbs img,
  body.rivrun-gthumbs-small-phone .wc-block-product-gallery-thumbnails__thumbnail,
  body.rivrun-gthumbs-small-both .wc-block-product-gallery-thumbnails__thumbnail {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 8px !important;
  }
  body.rivrun-gthumbs-small-phone .rivrun-gv-thumb__play svg,
  body.rivrun-gthumbs-small-both .rivrun-gv-thumb__play svg { width: 16px; height: 16px; }
}

@media (min-width: 783px) {
  body.rivrun-gthumbs-small-pc button.rivrun-gv-thumb,
  body.rivrun-gthumbs-small-both button.rivrun-gv-thumb,
  body.rivrun-gthumbs-small-pc .flex-control-thumbs img,
  body.rivrun-gthumbs-small-both .flex-control-thumbs img,
  body.rivrun-gthumbs-small-pc .wc-block-product-gallery-thumbnails__thumbnail,
  body.rivrun-gthumbs-small-both .wc-block-product-gallery-thumbnails__thumbnail {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 8px !important;
  }
  body.rivrun-gthumbs-small-pc .rivrun-gv-thumb__play svg,
  body.rivrun-gthumbs-small-both .rivrun-gv-thumb__play svg { width: 16px; height: 16px; }
}

/* Rivrun 8.6.3: compact modes size the actual thumbnail cells too.
   This prevents FlexSlider/Gutenberg wrappers from keeping their old width
   while the image inside has already been reduced to 44px. */
@media (max-width: 782px) {
  body.rivrun-gthumbs-small-phone .flex-control-thumbs > li,
  body.rivrun-gthumbs-small-both .flex-control-thumbs > li,
  body.rivrun-gthumbs-small-phone .rivrun-gv-video-thumb-wrap,
  body.rivrun-gthumbs-small-both .rivrun-gv-video-thumb-wrap,
  body.rivrun-gthumbs-small-phone .rivrun-gv-managed-thumbs > *,
  body.rivrun-gthumbs-small-both .rivrun-gv-managed-thumbs > * {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
  }
}
@media (min-width: 783px) {
  body.rivrun-gthumbs-small-pc .flex-control-thumbs > li,
  body.rivrun-gthumbs-small-both .flex-control-thumbs > li,
  body.rivrun-gthumbs-small-pc .rivrun-gv-video-thumb-wrap,
  body.rivrun-gthumbs-small-both .rivrun-gv-video-thumb-wrap,
  body.rivrun-gthumbs-small-pc .rivrun-gv-managed-thumbs > *,
  body.rivrun-gthumbs-small-both .rivrun-gv-managed-thumbs > * {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    flex: 0 0 44px !important;
  }
}


/* ==========================================================
   Rivrun 8.6.4: reliable active frame for native image thumbs
   ========================================================== */
/* WooCommerce's native thumbnail cells can be height-constrained inside a
   horizontally scrolling rail. A normal outer border may be clipped at the
   top and bottom, leaving only the two vertical edges visible. Keep the
   native cell layout untouched and draw the active frame inside the cell. */
.rivrun-gv-ready .rivrun-gv-native-thumb {
  position: relative !important;
  box-sizing: border-box !important;
  isolation: isolate;
}

.rivrun-gv-ready .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.rivrun-gv-ready .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  box-sizing: border-box;
  border: var(--rivrun-gallery-thumb-border-width, var(--rivrun-gallery-native-border-width, 1px)) solid var(--rivrun-gallery-thumb-border-color, var(--rivrun-buy-border-soft, #f0d9b8));
  border-radius: var(--rivrun-gallery-thumb-radius, var(--rivrun-gallery-native-thumb-radius, 12px));
  box-shadow: inset 0 0 0 1px rgba(240,217,184,.38);
  pointer-events: none;
}

@media (max-width: 782px) {
  body.rivrun-gthumbs-small-phone .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after,
  body.rivrun-gthumbs-small-both .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after {
    border-radius: 8px;
  }
}

@media (min-width: 783px) {
  body.rivrun-gthumbs-small-pc .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after,
  body.rivrun-gthumbs-small-both .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after {
    border-radius: 8px;
  }
}


/* ==========================================================
   Rivrun 8.6.6: native Gutenberg thumbnail geometry
   ========================================================== */
/* WooCommerce's Product Gallery block owns the thumbnail percentage and
   orientation. Do not replace its grid/flex direction with a forced horizontal
   row. We only add inner breathing room on the clipping axis and size the
   injected video thumbnail from a native thumbnail's live geometry. */
.rivrun-gv-ready.rivrun-gv-thumbs-horizontal .flex-control-thumbs {
  padding-block: 2px !important;
  min-width: 0 !important;
}

/* Never change WooCommerce block thumbnail-rail dimensions only because a
   video exists. Those dimensions participate in the parent flex calculation
   and even 2px of extra rail padding makes the mixed main image smaller. */
.rivrun-gv-ready.rivrun-gv-thumbs-vertical .flex-control-thumbs {
  box-sizing: border-box !important;
  max-height: var(--rivrun-gv-media-height, none) !important;
  height: 100% !important;
  padding-inline: 2px !important;
  min-height: 0 !important;
}
.rivrun-gv-ready.rivrun-gv-thumbs-horizontal .flex-control-thumbs {
  box-sizing: border-box !important;
  width: min(100%, var(--rivrun-gv-media-width, 100%)) !important;
  max-width: var(--rivrun-gv-media-width, 100%) !important;
}

.rivrun-gv-ready.rivrun-gv-thumbs-left .rivrun-gv-managed-thumbs,
.rivrun-gv-ready.rivrun-gv-thumbs-right .rivrun-gv-managed-thumbs {
  width: auto;
  max-height: var(--rivrun-gv-media-height, none);
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

.rivrun-gv-ready.rivrun-gv-thumbs-top .rivrun-gv-managed-thumbs,
.rivrun-gv-ready.rivrun-gv-thumbs-bottom .rivrun-gv-managed-thumbs {
  width: 100%;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
}

/* The active frame is inset by one device pixel, so native scrollports cannot
   crop the bottom/top edge even at fractional 15% Gutenberg sizes. */
.rivrun-gv-ready .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after {
  inset: 1px;
}

/* The custom video cell inherits WooCommerce classes and receives the exact
   measured native width/height from JS. Keep its internal button fully fluid. */
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap,
.rivrun-gv-ready button.rivrun-gv-thumb--video {
  box-sizing: border-box !important;
}

.rivrun-gv-ready .rivrun-gv-video-thumb-wrap > button.rivrun-gv-thumb,
.rivrun-gv-ready button.rivrun-gv-thumb--video {
  max-width: none !important;
  max-height: none !important;
}

/* Before actual playback, the selected poster is the only visible surface.
   This prevents iPhone Safari/Chrome from flashing the YouTube/Shorts UI while
   a swipe merely lands on the video slide. */
.rivrun-gv-video-surface:not(.has-started) .rivrun-gv-video-poster {
  z-index: 20;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 782px), (hover: none), (pointer: coarse) {
  .rivrun-gv-ready.rivrun-gv-thumbs-horizontal .flex-control-thumbs {
    padding-block: 2px !important;
  }
}

/* The WooCommerce sale badge is hidden with the native large-image surface.
   Its visual clone restores exact image-only parity above the mixed gallery. */
.rivrun-gv-sale-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 60 !important;
  width: fit-content !important;
  max-width: max-content !important;
  margin: 0 !important;
  pointer-events: none !important;
}



/* Multishop 11.1.1 gallery parity hardening.
   WooCommerce owns native image-thumbnail geometry. The theme sizes ONLY the
   injected video cell from a live native thumbnail, so adding media cannot
   change the dimensions of the image-only gallery. */
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap,
.rivrun-gv-ready button.rivrun-gv-thumb--video {
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap > button.rivrun-gv-thumb {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.rivrun-gv-ready .rivrun-gv-video-thumb-wrap > button.rivrun-gv-thumb > img,
.rivrun-gv-ready button.rivrun-gv-thumb--video > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
@media (max-width: 782px) {
  .rivrun-gv-ready .rivrun-gv-nav:not(.is-locked) {
    display: grid !important;
    visibility: visible !important;
  }
  .rivrun-gv-ready .rivrun-gv-nav.is-disabled:not(.is-locked) {
    opacity: .38 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
  .rivrun-gv-ready .rivrun-gv-loop-enabled .rivrun-gv-nav.is-disabled:not(.is-locked) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* ==========================================================
   Multishop 11.2.0 — true WooCommerce thumbnail-cell parity
   ========================================================== */
/* ProductGalleryThumbnails.php renders a geometry-owning DIV cell and an IMG
   that owns the active style. Mixed video thumbnails now follow the same DOM
   contract. Never give the interaction button a native cell class or fixed
   dimensions; doing so changes the rail width and shrinks the main media area. */
.rivrun-gv-ready .rivrun-gv-video-native-cell {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.rivrun-gv-ready .rivrun-gv-video-native-cell > .wc-block-product-gallery-thumbnails__thumbnail__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  box-sizing: border-box;
}
.rivrun-gv-ready .rivrun-gv-video-native-cell > .rivrun-gv-native-video-button,
.rivrun-gv-ready .rivrun-gv-video-native-cell > button.rivrun-gv-thumb--video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: hidden;
}
.rivrun-gv-ready .rivrun-gv-video-native-cell .rivrun-gv-thumb__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

/* The Woo image class owns active outline/overlay appearance. Suppress every
   legacy wrapper/button frame so active selection never changes cell geometry. */
.rivrun-gv-ready .rivrun-gv-video-native-cell.rivrun-gv-item-active,
.rivrun-gv-ready .rivrun-gv-video-native-cell.rivrun-gv-item-active > button,
.rivrun-gv-ready .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.rivrun-gv-ready .flex-control-thumbs > .rivrun-gv-native-thumb.rivrun-gv-item-active::after {
  content: none !important;
  display: none !important;
}

/* Custom theme border settings remain possible, but apply to the same IMG in
   image-only and mixed galleries. This rule is activated only when PHP adds
   rivrun-gthumb-custom-frame because a custom border color was selected. */
body.single-product.rivrun-gthumb-custom-frame
.wc-block-product-gallery-thumbnails__thumbnail__image--is-active {
  outline: var(--rivrun-gallery-thumb-border-width, 1px) solid var(--rivrun-gallery-thumb-border-color, currentColor) !important;
  outline-offset: calc(-1 * var(--rivrun-gallery-thumb-border-width, 1px));
  border-radius: var(--rivrun-gallery-thumb-radius, 12px) !important;
  box-shadow: none !important;
}


/* One2TenX 11.27 — centre custom mixed-media gallery chevrons. */
.rivrun-gv-nav{display:grid!important;place-items:center!important;padding:0!important;line-height:0!important;text-align:center!important}
.rivrun-gv-nav::before,.rivrun-gv-nav::after{display:none!important;content:none!important}
.rivrun-gv-nav svg{position:static!important;inset:auto!important;display:block!important;width:22px!important;height:22px!important;margin:auto!important;transform:none!important;flex:0 0 auto!important}
@media(max-width:782px){.rivrun-gv-nav{top:50%!important;transform:translateY(-50%)!important}}

/* One2TenX 11.27.1 — deterministic gallery navigation geometry.
 * Reset inherited button sizing/spacing and centre the SVG from its own
 * coordinate system so Safari/iOS/Android and theme button styles cannot
 * push the chevron off-centre. */
.rivrun-gv-nav {
  box-sizing: border-box !important;
  top: 50% !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  line-height: 0 !important;
  font-size: 0 !important;
  text-indent: 0 !important;
  transform: translate3d(0,-50%,0) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.rivrun-gv-nav--prev { left: 16px !important; right: auto !important; }
.rivrun-gv-nav--next { right: 16px !important; left: auto !important; }
.rivrun-gv-nav > svg {
  position: absolute !important;
  inset: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin: auto !important;
  padding: 0 !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  overflow: visible !important;
  pointer-events: none !important;
  display: block !important;
}
.rivrun-gv-nav > svg > path {
  transform: none !important;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 782px), (hover: none), (pointer: coarse) {
  .rivrun-gv-nav {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
  .rivrun-gv-nav--prev { left: 10px !important; }
  .rivrun-gv-nav--next { right: 10px !important; }
  .rivrun-gv-nav > svg { width: 20px !important; height: 20px !important; }
}



/* One2TenX 11.28 — transform-free custom gallery chevron geometry.
 * The visible chevron is a CSS square corner centred by its own 10x10 box,
 * avoiding SVG viewport/font/theme offsets on Safari, iOS and Android. */
.rivrun-gv-nav > svg{display:none!important}
.rivrun-gv-nav > .rivrun-gv-chevron{
  position:absolute!important;
  inset:0!important;
  width:10px!important;
  height:10px!important;
  margin:auto!important;
  padding:0!important;
  display:block!important;
  box-sizing:border-box!important;
  border:0!important;
  border-top:2.25px solid currentColor!important;
  border-right:2.25px solid currentColor!important;
  transform-origin:50% 50%!important;
  pointer-events:none!important;
}
.rivrun-gv-nav--prev > .rivrun-gv-chevron{transform:rotate(-135deg)!important}
.rivrun-gv-nav--next > .rivrun-gv-chevron{transform:rotate(45deg)!important}
@media(max-width:782px),(hover:none),(pointer:coarse){
  .rivrun-gv-nav > .rivrun-gv-chevron{width:9px!important;height:9px!important;border-top-width:2px!important;border-right-width:2px!important}
}