:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
) > .splide__track {
  height: auto !important;
  overflow: visible;
}

:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
) > .splide__track > .splide__list {
  display: grid !important;
  grid-template-columns: repeat(var(--ndn-slider-columns, 1), minmax(0, 1fr)) !important;
  gap: var(--ndn-slider-gap, 16px) !important;
  height: auto !important;
  transform: none !important;
}

:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
) > .splide__track > .splide__list > .splide__slide {
  width: auto !important;
  margin: 0 !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
) > :is(.splide__arrows, .splide__pagination) {
  display: none !important;
}

/* Static alignment: Center. Grid cannot center an incomplete last row, so
 * switch to wrapping flex items that keep the same column width. */
:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
).ndn-slider-static-center > .splide__track > .splide__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
}

:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
).ndn-slider-static-center > .splide__track > .splide__list > .splide__slide {
  --ndn-slider-static-item-width: calc(
    (100% - (var(--ndn-slider-columns, 1) - 1) * var(--ndn-slider-gap, 16px)) / var(--ndn-slider-columns, 1)
  );
  flex: 0 0 var(--ndn-slider-static-item-width) !important;
  max-width: var(--ndn-slider-static-item-width) !important;
}

/* Static columns + Auto width: Items to show is hidden while Auto width is
 * active, so wrap items at their own width (Default item width or intrinsic)
 * instead of fixed columns. Declared after the Center rules, which keep their
 * justify-content while these slide widths win. */
:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
).ndn-slider-auto-width > .splide__track > .splide__list {
  display: flex !important;
  flex-wrap: wrap !important;
}

:is(
  .ndn-slider-enhanced.ndn-slider-inactive,
  body:not(.bricks-is-frontend) .ndn-slider-enhanced.ndn-slider-builder-preview
).ndn-slider-auto-width > .splide__track > .splide__list > .splide__slide {
  flex: 0 0 auto !important;
  width: var(--ndn-slider-item-width, auto) !important;
  max-width: 100% !important;
}

body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-1 > .splide__track > .splide__list { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-2 > .splide__track > .splide__list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-3 > .splide__track > .splide__list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-4 > .splide__track > .splide__list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-5 > .splide__track > .splide__list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-6 > .splide__track > .splide__list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-7 > .splide__track > .splide__list { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-8 > .splide__track > .splide__list { grid-template-columns: repeat(8, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-9 > .splide__track > .splide__list { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-10 > .splide__track > .splide__list { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-11 > .splide__track > .splide__list { grid-template-columns: repeat(11, minmax(0, 1fr)) !important; }
body:not(.bricks-is-frontend) .ndn-slider-builder-preview.ndn-slider-builder-columns-12 > .splide__track > .splide__list { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }

/* Bricks makes nested slider items flex containers. Once Grid groups those
 * items, the generated page must be block-level so its rows stack vertically. */
.ndn-slider-grid.splide--grid > .splide__track > .splide__list > .splide__slide {
  display: block !important;
}

.ndn-slider-grid.splide--grid > .splide__track > .splide__list > .splide__slide > .splide__slide__row {
  width: 100%;
}

/* Bricks' auto-height rule makes mixed Grid pages follow their own content
 * height. Keep every generated page as tall as the track, then let Splide's
 * row percentages divide that height. A 1 × 1 page therefore becomes a full
 * portrait card while 2 × 2 and other multi-row pages remain proportional. */
.ndn-slider-grid.splide--grid > .splide__track > .splide__list {
  align-items: stretch !important;
}

.ndn-slider-grid.splide--grid > .splide__track > .splide__list > .splide__slide {
  height: auto !important;
}

.ndn-slider-grid.splide--grid > .splide__track > .splide__list > .splide__slide > .splide__slide__row > .splide__slide--col {
  height: 100% !important;
}

.ndn-slider-progress-enabled > .ndn-slider-progress {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background-color: rgba(127, 127, 127, .24);
}

.ndn-slider-progress-enabled > .ndn-slider-progress[data-position="top"] {
  margin-bottom: 12px;
}

.ndn-slider-progress-enabled > .ndn-slider-progress[data-position="bottom"] {
  margin-top: 12px;
}

.ndn-slider-progress-enabled > .ndn-slider-progress > .ndn-slider-progress__bar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: #137ee7;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

[dir="rtl"] .ndn-slider-progress-enabled > .ndn-slider-progress > .ndn-slider-progress__bar {
  transform-origin: right center;
}

.ndn-slider-progress-enabled.ndn-slider-inactive > .ndn-slider-progress {
  display: none;
}

/* Bricks gives nested slide blocks width: 100% (in its layer and again in the
 * unlayered inline CSS), which defeats Splide's autoWidth. Use the Default
 * item width, or the intrinsic width when empty. The selector must outrank
 * .brxe-block; no !important, so a width set on a slide's element ID wins. */
.ndn-slider-auto-width:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) > .splide__track > .splide__list > .splide__slide {
  flex: 0 0 auto;
  width: var(--ndn-slider-item-width, auto);
  max-width: none;
}

/* Slide-state transition presets. The static fallback deliberately bypasses
   these styles so its columns remain visually consistent. */
.ndn-slider-transition[class*="ndn-slider-transition--"]:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) > .splide__track {
  margin-block: calc(var(--ndn-slider-effect-space, 24px) * -1);
  padding-block: var(--ndn-slider-effect-space, 24px);
}

.ndn-slider-transition:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col) {
  transform-origin: center center;
  transition:
    transform var(--ndn-slider-transition-duration, .55s) cubic-bezier(.22, .61, .36, 1),
    opacity var(--ndn-slider-transition-duration, .55s) ease,
    filter var(--ndn-slider-transition-duration, .55s) ease;
  will-change: transform, opacity, filter;
}

.ndn-slider-transition--center-focus:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col) {
  opacity: .48;
  transform: scale(.82);
}
.ndn-slider-transition--center-focus:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col):is(.is-prev, .is-next) {
  opacity: .76;
  transform: scale(.9);
}
.ndn-slider-transition--center-focus:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-active {
  opacity: 1;
  transform: scale(1);
}

.ndn-slider-transition--soft-depth:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col) {
  filter: blur(4px);
  opacity: .35;
  transform: scale(.88);
}
.ndn-slider-transition--soft-depth:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col):is(.is-prev, .is-next) {
  filter: blur(1.5px);
  opacity: .7;
  transform: scale(.96);
}
.ndn-slider-transition--soft-depth:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-active {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

.ndn-slider-transition--side-lift:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col) {
  opacity: .5;
  transform: translateY(24px) scale(.92);
}
.ndn-slider-transition--side-lift:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col):is(.is-prev, .is-next) {
  opacity: .78;
  transform: translateY(10px) scale(.97);
}
.ndn-slider-transition--side-lift:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-active {
  opacity: 1;
  transform: translateY(-8px) scale(1);
}

.ndn-slider-transition--fade-scale:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col) {
  opacity: .12;
  transform: scale(.82);
}
.ndn-slider-transition--fade-scale:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col):is(.is-prev, .is-next) {
  opacity: .58;
  transform: scale(.94);
}
.ndn-slider-transition--fade-scale:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-active {
  opacity: 1;
  transform: scale(1);
}

.ndn-slider-transition--card-tilt:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col) {
  opacity: .45;
  transform: scale(.9);
}
.ndn-slider-transition--card-tilt:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-prev {
  opacity: .75;
  transform: rotate(-3deg) translateY(8px) scale(.92);
}
.ndn-slider-transition--card-tilt:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-next {
  opacity: .75;
  transform: rotate(3deg) translateY(8px) scale(.92);
}
.ndn-slider-transition--card-tilt:not(.ndn-slider-inactive):not(.ndn-slider-builder-preview) .splide__slide:not(.splide__slide--col).is-active {
  opacity: 1;
  transform: rotate(0) translateY(-4px) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ndn-slider-transition .splide__slide {
    transition: none !important;
  }

  .ndn-slider-progress__bar {
    will-change: auto !important;
  }
}