/**
 * DJ Refresh — single product "Images & Videos" gallery.
 *
 * Restores the one-up carousel after the legacy rslides slider stopped initialising (slides were
 * stacking full-width). Rebuilt on UIkit's uk-slider — the same component the campaign gallery uses,
 * so it's known-good in this theme. Handles mixed image + YouTube slides in a locked 16:9 frame,
 * with circular arrows and dot navigation.
 */
.djr-pgallery { position: relative; }

.djr-pgallery__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--djr-radius-lg, 14px);
  background: #0d0d0d;
}

.djr-pgallery__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 0;
}
.djr-pgallery__items.uk-grid { margin-left: 0; }
.djr-pgallery__items.uk-grid > .djr-pgallery__slide { padding-left: 0; }

.djr-pgallery__slide {
  list-style: none;
  display: block;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  min-width: 0;
}

.djr-pgallery__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0d0d;
}
.djr-pgallery__frame > img,
.djr-pgallery__frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}

/* Circular prev/next arrows — matches the catalog scroller affordance. */
.djr-pgallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--djr-ink, #1a1a1a);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.djr-pgallery__nav svg { display: block; width: 22px; height: 22px; }
.djr-pgallery__nav--prev { left: 14px; }
.djr-pgallery__nav--next { right: 14px; }
.djr-pgallery__nav:hover,
.djr-pgallery__nav:focus-visible { background: var(--djr-red, #a91d22); color: #fff; }
.djr-pgallery__nav.uk-invisible,
.djr-pgallery__nav.uk-disabled,
.djr-pgallery__nav[aria-disabled="true"] { opacity: 0; pointer-events: none; }

/* Dots. Scoped + reset because a legacy `.section.gallery` rule otherwise floats/absolutely
   positions stray <ul>s, which parked the dotnav over the top-left of the image. */
.djr-pgallery .djr-pgallery__dots {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  float: none;
  width: 100%;
  margin: 16px 0 0;
  padding: 0;
}
.djr-pgallery__dots > * > * {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--djr-muted, #bebebe);
  background: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.djr-pgallery__dots > .uk-active > * {
  background: var(--djr-red, #a91d22);
  border-color: var(--djr-red, #a91d22);
}

/* Single item — no slider, just the framed media. */
.djr-pgallery--single .djr-pgallery__frame { border-radius: var(--djr-radius-lg, 14px); }

@media (max-width: 640px) {
  .djr-pgallery__nav { width: 40px; height: 40px; }
  .djr-pgallery__nav--prev { left: 8px; }
  .djr-pgallery__nav--next { right: 8px; }
}