.ddrpg-gallery {
  --ddrpg-thumb: 72px;
  --ddrpg-gap: 16px;
  --ddrpg-radius: 0px;
  --ddrpg-icon-color: #1c1c1c;
  --ddrpg-control-bg: #fff;
  --ddrpg-border: #e5e5e5;
  --ddrpg-active-line: #1f1f1f;
  --ddrpg-active-line-height: 2px;
  --ddrpg-active-line-gap: 6px;

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--ddrpg-thumb)) minmax(0, 1fr);
  align-items: start;
  gap: var(--ddrpg-gap);

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

.ddrpg-gallery *,
.ddrpg-gallery *::before,
.ddrpg-gallery *::after {
  box-sizing: border-box;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.ddrpg-thumbs-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.ddrpg-thumbs {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  max-width: 100%;
  max-height: min(72vh, 760px);

  gap: 12px;

  padding:
    0
    0
    calc(var(--ddrpg-active-line-gap) + var(--ddrpg-active-line-height));

  margin: 0;

  overflow-y: auto;
  overflow-x: hidden;

  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.ddrpg-thumb {
  position: relative;

  display: block;
  flex: 0 0 auto;

  width: 100%;
  max-width: var(--ddrpg-thumb);

  /*
   * Reserve a real area BELOW the thumbnail for the active underline.
   * This means the underline never sits over/cuts into the image.
   */
  aspect-ratio: auto;
  margin: 0;
  padding: 0 0 10px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  cursor: pointer;
  overflow: visible;

  outline: 0;
  box-shadow: none;
}

.ddrpg-thumb,
.ddrpg-thumb:hover,
.ddrpg-thumb:focus,
.ddrpg-thumb:focus-visible,
.ddrpg-thumb:active,
.ddrpg-thumb.is-active,
.ddrpg-thumb.is-active:hover,
.ddrpg-thumb.is-active:focus,
.ddrpg-thumb.is-active:active {
  border: 0;
  background: transparent;
  color: inherit;
  outline: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
  transform: none;
}

.ddrpg-thumb img {
  display: block;

  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;

  margin: 0;

  border-radius: inherit;

  object-fit: cover;
  object-position: center center;
}


/* Active/current image underline — matches the supplied reference. */
.ddrpg-thumb::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  /*
   * The line sits in the button's reserved bottom padding,
   * completely BELOW the actual image.
   */
  bottom: 1px;

  width: 100%;
  height: var(--ddrpg-active-line-height);

  margin: auto;

  border-radius: 999px;

  background: var(--ddrpg-active-line);

  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;

  transition:
    opacity .18s ease,
    transform .18s ease;

  pointer-events: none;
}

.ddrpg-thumb.is-active::after,
.ddrpg-thumb[aria-current="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}



/* =========================================================
   THUMBNAIL RAIL NAVIGATION
   Hidden on desktop; mobile shows these only if scrolling is needed.
========================================================= */

.ddrpg-thumb-nav {
  display: none;

  appearance: none;
  -webkit-appearance: none;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  padding: 0;
  margin: 0;

  border: 1px solid #dedede;
  border-radius: 50%;

  background: rgba(255,255,255,.96);
  color: #222;

  box-shadow: 0 2px 8px rgba(0,0,0,.08);

  cursor: pointer;

  z-index: 5;
}

.ddrpg-thumb-nav svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddrpg-thumb-nav:disabled {
  opacity: .35;
  cursor: default;
}

/* =========================================================
   MAIN IMAGE
========================================================= */

.ddrpg-stage {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background: #fff;

  border-radius: var(--ddrpg-radius);

  touch-action: pan-y;
  outline: 0;
}

.ddrpg-main-image-wrap {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}

.ddrpg-main-image {
  display: block;

  width: 100%;
  max-width: 100%;

  height: auto;
  max-height: min(78vh, 820px);

  margin: 0 auto;

  object-fit: contain;
  object-position: center center;

  user-select: none;
  -webkit-user-drag: none;

  border-radius: var(--ddrpg-radius);
}


/* =========================================================
   DESKTOP CURSOR NAVIGATION
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .ddrpg-stage.ddrpg-cursor-prev {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22.5' fill='%23ffffff' stroke='%23dedede'/%3E%3Cpath d='M27.5 17.5L21 24l6.5 6.5' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 24 24, pointer;
  }

  .ddrpg-stage.ddrpg-cursor-next {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22.5' fill='%23ffffff' stroke='%23dedede'/%3E%3Cpath d='M20.5 17.5L27 24l-6.5 6.5' fill='none' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 24 24, pointer;
  }
}


/* =========================================================
   CONTROLS
========================================================= */

.ddrpg-zoom-button,
.ddrpg-lightbox-close,
.ddrpg-lightbox-prev,
.ddrpg-lightbox-next {
  appearance: none;
  -webkit-appearance: none;

  border: 1px solid var(--ddrpg-border);

  background: var(--ddrpg-control-bg);
  color: var(--ddrpg-icon-color);

  padding: 0;
  margin: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  line-height: 1;

  box-shadow: none;
  filter: none;
  transform: none;
  transition: none;
}

.ddrpg-zoom-button svg,
.ddrpg-lightbox-close svg,
.ddrpg-lightbox-prev svg,
.ddrpg-lightbox-next svg {
  width: 22px;
  height: 22px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ddrpg-zoom-button {
  position: absolute;

  right: clamp(10px, 2vw, 18px);
  bottom: clamp(10px, 2vw, 18px);

  width: clamp(42px, 4vw, 48px);
  height: clamp(42px, 4vw, 48px);

  border-radius: 50%;

  z-index: 3;
}

.ddrpg-zoom-button,
.ddrpg-zoom-button:hover,
.ddrpg-zoom-button:focus,
.ddrpg-zoom-button:focus-visible,
.ddrpg-zoom-button:active,
.ddrpg-lightbox-close,
.ddrpg-lightbox-close:hover,
.ddrpg-lightbox-close:focus,
.ddrpg-lightbox-close:focus-visible,
.ddrpg-lightbox-close:active,
.ddrpg-lightbox-prev,
.ddrpg-lightbox-prev:hover,
.ddrpg-lightbox-prev:focus,
.ddrpg-lightbox-prev:focus-visible,
.ddrpg-lightbox-prev:active,
.ddrpg-lightbox-next,
.ddrpg-lightbox-next:hover,
.ddrpg-lightbox-next:focus,
.ddrpg-lightbox-next:focus-visible,
.ddrpg-lightbox-next:active {
  background: var(--ddrpg-control-bg);
  color: var(--ddrpg-icon-color);

  box-shadow: none;
  filter: none;
  transform: none;
  outline: 0;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.ddrpg-lightbox[hidden] {
  display: none !important;
}

.ddrpg-lightbox {
  position: fixed;
  inset: 0;

  z-index: 999999;

  width: 100vw;
  width: 100dvw;

  height: 100vh;
  height: 100dvh;

  background: #fff;

  display: flex;
  align-items: stretch;
  justify-content: center;

  overflow: hidden;
}

body.ddrpg-lightbox-open {
  overflow: hidden !important;
}

.ddrpg-lightbox-stage {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding:
    max(28px, env(safe-area-inset-top))
    max(48px, env(safe-area-inset-right))
    max(78px, env(safe-area-inset-bottom))
    max(48px, env(safe-area-inset-left));

  cursor: default;

  touch-action: pan-x pan-y;
}

.ddrpg-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  transform-origin: 50% 50%;
  transition: transform .18s ease;

  user-select: none;
  -webkit-user-drag: none;

  cursor: zoom-in !important;
}

.ddrpg-lightbox.is-zoomed .ddrpg-lightbox-stage {
  cursor: default;

  overflow: auto;

  justify-content: flex-start;
  align-items: flex-start;
}

.ddrpg-lightbox.is-zoomed .ddrpg-lightbox-image {
  transform: scale(1.55);
  margin: auto;

  cursor: zoom-out !important;
}

.ddrpg-lightbox-close {
  position: absolute;

  top: max(24px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));

  width: 58px;
  height: 58px;

  border-radius: 50%;

  z-index: 5;
}

.ddrpg-lightbox-close svg {
  width: 24px;
  height: 24px;
}

.ddrpg-lightbox-bottom {
  position: absolute;

  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));

  transform: translateX(-50%);

  display: grid;
  grid-template-columns: 42px auto 42px;
  align-items: center;

  min-height: 46px;

  padding: 0 4px;

  background: #fff;

  border: 1px solid #e4e4e4;
  border-radius: 28px;

  box-shadow: 0 2px 10px rgba(0,0,0,.04);

  z-index: 5;
}

.ddrpg-lightbox-prev,
.ddrpg-lightbox-next {
  width: 38px;
  height: 38px;

  border: 0;

  background: transparent;

  border-radius: 50%;
}

.ddrpg-lightbox-prev,
.ddrpg-lightbox-prev:hover,
.ddrpg-lightbox-prev:focus,
.ddrpg-lightbox-prev:focus-visible,
.ddrpg-lightbox-prev:active,
.ddrpg-lightbox-next,
.ddrpg-lightbox-next:hover,
.ddrpg-lightbox-next:focus,
.ddrpg-lightbox-next:focus-visible,
.ddrpg-lightbox-next:active {
  background: transparent;
}

.ddrpg-lightbox-prev:disabled,
.ddrpg-lightbox-next:disabled {
  opacity: .35;
  cursor: default;
}

.ddrpg-lightbox-counter {
  min-width: 60px;

  text-align: center;

  color: #777;

  font-size: 14px;

  white-space: nowrap;
}

.ddrpg-lightbox-counter strong {
  color: #222;
  font-weight: 500;
}

.ddrpg-empty {
  padding: 24px;

  background: #f7f7f7;

  border: 1px dashed #ddd;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .ddrpg-gallery {
    --ddrpg-thumb: 64px;
    --ddrpg-gap: 12px;
  }

  .ddrpg-main-image {
    max-height: min(70vh, 760px);
  }

  .ddrpg-lightbox-close {
    top: max(20px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));

    width: 52px;
    height: 52px;
  }

  .ddrpg-lightbox-stage {
    padding:
      max(24px, env(safe-area-inset-top))
      max(30px, env(safe-area-inset-right))
      max(74px, env(safe-area-inset-bottom))
      max(30px, env(safe-area-inset-left));
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .ddrpg-gallery {
    /*
     * Main image first, thumbnail slider second.
     * Everything is centered in the Elementor column.
     */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    width: 100%;
    max-width: 100%;

    gap: var(--ddrpg-gap);

    margin: 0 auto;
    padding: 0;

    overflow: visible;
  }

  .ddrpg-stage,
  .ddrpg-main-image-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;

    margin-left: auto;
    margin-right: auto;
  }

  .ddrpg-main-image {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    max-height: min(68svh, 680px);

    margin: 0 auto;

    object-fit: contain;
    object-position: center center;
  }

  .ddrpg-thumbs-wrap {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;

    min-width: 0;

    margin: 0 auto;
    padding: 0;
  }

  .ddrpg-thumbs {
    /*
     * If all thumbnails fit: visually center them.
     * JS adds .has-overflow only when horizontal sliding is needed.
     */
    width: auto;
    max-width: 100%;

    max-height: none;

    flex-direction: row;
    align-items: flex-start;
    justify-content: center;

    gap: 10px;

    padding: 2px 4px 2px;
    margin: 0 auto;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    touch-action: pan-x;
  }

  .ddrpg-thumbs::-webkit-scrollbar {
    display: none;
  }

  .ddrpg-thumbs-wrap.has-overflow {
    padding-left: 38px;
    padding-right: 38px;
  }

  .ddrpg-thumbs-wrap.has-overflow .ddrpg-thumbs {
    width: 100%;
    justify-content: flex-start;
    margin: 0;

    /*
     * Side padding gives the first/last thumbnails breathing room
     * when the rail is controlled by arrows or touch swipe.
     */
    padding-left: 4px;
    padding-right: 4px;
  }

  .ddrpg-thumb {
    flex: 0 0 auto;

    width: clamp(54px, 17vw, var(--ddrpg-thumb));
    max-width: none;

    /*
     * Real reserved area for the underline.
     */
    padding-bottom: 10px;

    scroll-snap-align: center;

    border-radius: 7px;
  }

  .ddrpg-thumb::after {
    bottom: 1px;
    height: 2px;
  }

  /*
   * Easy thumbnail slider controls:
   * shown ONLY if JS detects horizontal overflow.
   */
  .ddrpg-thumbs-wrap.has-overflow .ddrpg-thumb-nav {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .ddrpg-thumb-prev {
    left: 2px;
  }

  .ddrpg-thumb-next {
    right: 2px;
  }

  .ddrpg-zoom-button {
    right: 10px;
    bottom: 10px;

    width: 44px;
    height: 44px;
  }

  .ddrpg-lightbox-stage {
    padding:
      max(58px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(76px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }

  .ddrpg-lightbox-close {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));

    width: 46px;
    height: 46px;
  }

  .ddrpg-lightbox-image {
    max-width: 100%;
    max-height: 100%;
  }

  .ddrpg-lightbox.is-zoomed .ddrpg-lightbox-image {
    transform: scale(1.35);
  }

  .ddrpg-lightbox-bottom {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .ddrpg-gallery {
    --ddrpg-gap: 9px;
  }

  .ddrpg-main-image {
    max-height: min(62svh, 560px);
  }

  .ddrpg-thumbs {
    gap: 8px;
  }

  .ddrpg-thumb {
    width: clamp(50px, 16vw, 58px);
    padding-bottom: 9px;
  }

  .ddrpg-zoom-button svg {
    width: 19px;
    height: 19px;
  }

  .ddrpg-zoom-button {
    width: 42px;
    height: 42px;
  }

  .ddrpg-lightbox-close {
    width: 42px;
    height: 42px;
  }

  .ddrpg-lightbox-bottom {
    grid-template-columns: 38px auto 38px;
    min-height: 42px;
  }

  .ddrpg-lightbox-prev,
  .ddrpg-lightbox-next {
    width: 34px;
    height: 34px;
  }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {
  .ddrpg-thumb {
    width: 48px;
  }

  .ddrpg-main-image {
    max-height: 58svh;
  }
}


/* =========================================================
   WIDESCREEN
========================================================= */

@media (min-width: 1600px) {
  .ddrpg-gallery {
    --ddrpg-thumb: 78px;
    --ddrpg-gap: 18px;
  }

  .ddrpg-main-image {
    max-height: 860px;
  }
}