@media (max-width: 768px) {
  .rw-gallery-container.splide {
    position: relative;
    width: 100%;
    --splide-dots: 5;
    --currentDotTop: 0;
    --currentDotLeft: 0;
    --dotWidth: 11px;
    --dotHeight: 11px;
    --container-gap: 4px;
    --container-width: calc(
      (var(--dotWidth) + var(--container-gap)) * var(--splide-dots)
    );

    --splide-dot-size: var(--dotWidth);
    --splide-dot-color: #fff9;
    --splide-dot-active-color: #fff;
    --splide-dot-shadow-color: rgba(0, 0, 0, 0.3);
    --splide-dot-shadow-size: 8px;
  }

  /* Pre-initialization mobile state: stack or single item to prevent grid flash */
  .rw-gallery-container.splide:not(.is-initialized) .splide__track {
    overflow: hidden;
  }

  .rw-gallery-container.splide:not(.is-initialized) .splide__list {
    display: flex !important;
    flex-flow: row nowrap;
    overflow-x: hidden;
  }

  .rw-gallery-container.splide:not(.is-initialized) .splide__slide {
    flex: 0 0 100%;
    width: 100%;
  }

  .rw-gallery-container .splide__track {
    width: 100%;
    overflow: hidden;
  }

  .rw-gallery-container .splide__list {
    display: flex !important;
    flex-flow: row nowrap;
  }

  .rw-gallery-container .splide__slide {
    flex: 0 0 100%;
    width: 100%;
  }

  .rw-gallery-container .splide__pagination-custom {
    display: flex;
    margin-inline: auto;
    transition: transform 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    z-index: 10;
    overflow: hidden;
    width: var(--container-width);

    .container {
      display: flex;
      gap: var(--container-gap);
      transition: transform 0.3s ease;
    }

    .splide__dot {
      height: var(--splide-dot-size);
      width: var(--splide-dot-size);
      background-color: var(--splide-dot-color);
      flex: 0 0 var(--splide-dot-size);
      border-radius: 50%;
      opacity: 0;
      transform: scale(0);
      transition:
        transform 0.1s ease,
        opacity 0.5s ease;
      border: none;
      padding: 0;
      cursor: pointer;

      &.selected {
        transform: scale(1);
        background-color: var(--splide-dot-active-color);
        box-shadow: 0 0 var(--splide-dot-shadow-size) 0
          var(--splide-dot-shadow-color);
      }

      &.visible {
        transform: scale(1);
        opacity: 1;
      }

      &.right {
        transform: scale(0.7);
        transform-origin: left;
      }

      &.left {
        transform: scale(0.7);
        transform-origin: right;
      }
    }
  }

  .rw-gallery-container.splide .splide__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 10;
    overflow: hidden;
    color: #fff;
    font-size: 18px;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    line-height: 1.1;
  }

  .rw-gallery-container.splide .pagination-wrapper {
    display: flex;
    align-items: center;
  }

  .rw-gallery-container.splide .pagination-number {
    display: inline-block;
    min-width: 1ch;
    text-align: center;
    margin-right: 5px;
  }
}

/* Ensure lightbox is ALWAYS visible regardless of splide state */
.rw-gallery-lightbox-wrapper,
.rw-gallery-lightbox {
  visibility: visible !important;
}

/* Fallback for desktop or Bricks Builder (Frontend vs Editor) */
@media (min-width: 769px) {
  .rw-gallery-container.splide {
    visibility: visible !important;
  }
  .rw-gallery-container .splide__track {
    overflow: visible !important;
    display: block !important;
  }
  .rw-gallery-container .splide__list {
    display: grid !important;
    visibility: visible !important;
  }
}

/* Special Case: Bricks Editor Environment */
body.bricks-is-builder
  .rw-gallery-container.splide:not(.is-initialized)
  .splide__track {
  overflow: visible !important;
  display: block !important;
}
body.bricks-is-builder
  .rw-gallery-container.splide:not(.is-initialized)
  .splide__list {
  display: grid !important;
  visibility: visible !important;
}