@charset "UTF-8";
.eael-advanced-slider {
  /* Transition easing — applies to BOTH the wrapper AND individual
     slides. Verified live in Chrome that for fade/cards/flip/coverflow
     Swiper transitions per-SLIDE (slide0.transitionProperty was "opacity"
     and timing was "ease, ease, ease, ease, ease" — five eases, not our
     cubic-bezier). v18 and v19 only set timing-function on .swiper-wrapper,
     which is what Swiper uses for the SLIDE effect translate animation but
     NOT for fade/cards/flip/coverflow. Net result: easing presets felt
     identical for everything except slide effect. v20 covers all five
     effects by applying the variable to both. */
  /* Transition easing is now applied via JS in view + edit advanced-slider.js:
     JS reads the data-easing attribute, looks up the cubic-bezier curve in
     ADVANCED_SLIDER_EASING_CURVES, and writes transition-timing-function
     inline-WITH-important on the wrapper and every slide on each Swiper
     setTransition event. Inline-with-important is what reliably beats both
     Swiper's inline `style.transition` shorthand and Elementor's per-page
     CSS rules.

     The old CSS-variable approach (--eael-as-easing on the wrapper +
     `transition-timing-function: var(--eael-as-easing) !important` on
     descendants) was unreliable — different browsers / Swiper versions
     handled the inline-vs-CSS cascade differently, and users reported all
     four presets felt the same. */
  /* Force flex-direction:column on every slider so any pagination
     host appended to $scope (progress_bar, thumbnails, numbered_index,
     swiper bullets) stacks BELOW the .swiper-wrapper
     instead of being squeezed into a tall narrow strip beside it.
     Background: on the frontend, $scope IS the .swiper element (the
     view JS adds .swiper to $scope when $inner falls back to it on
     e-con-full containers). Elementor decorates that same element with
     `e-flex e-con-row` → `display: flex; flex-direction: row` →
     children laid out side-by-side. Editor doesn't have this issue
     because the .swiper is a CHILD of .eael-advanced-slider with our own
     layout. The user reported "Progress Bar doesn't show on Fade
     frontend" — actual cause: the host was rendering at 125×537 next
     to the swiper-wrapper, hidden by overflow:hidden of the .swiper
     container. Forcing column layout makes the host flow below the
     wrapper, which is what the demo HTML's V3 ("Travel magazine ·
     Fade hero with timing") does.

     !important required: Elementor's `.e-flex.e-con-row` selector
     (specificity 0,2,0) sets `flex-direction: row` and beats our
     single-class rule (specificity 0,1,0) without !important. v20
     initial commit forgot the !important — verified live that
     sliderFlexDirection was still "row" on marquee/progress_bar
     sliders post-install. */
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical !important;
  -webkit-box-direction: normal !important;
      -ms-flex-direction: column !important;
          flex-direction: column !important;
  position: relative;
  /* CRITICAL: when this element is a child of a flex container (Elementor's
     `.e-con-inner` in editor mode is `display: flex; flex-direction: row`),
     `min-width: auto` allows the slider to grow to fit its content, AND
     a default `flex: 0 1 auto` lets the slider shrink to its content width
     (e.g. 640px for cards) instead of filling the parent. Both behaviors
     break centering and recursive layout. Pin to 100% width and grow/shrink
     to that, so the slider is always the full width of the Elementor
     container regardless of parent flex-direction.
     overflow: visible is critical so progress bar / numbered index / thumbnails
     siblings rendered BELOW the .swiper aren't clipped. The width-recursion
     loop is broken by max-width: 100% alone — overflow:hidden on the outer
     was a belt-and-suspenders we no longer need. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
  overflow: visible;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* The Swiper child still needs overflow:hidden so it clips its translated
     slide-wrapper internally. (3D effects override this back to visible.) */
}
.eael-advanced-slider > .swiper {
  /* Editor/frontend parity fix.
     In the editor, the view JS builds a brand-new `<div class="swiper">`
     (a clean block element) and inits Swiper on it. On the frontend the
     view JS instead REUSES Elementor's existing `.e-con-inner` /
     `.elementor-container` as the `.swiper` — and that element keeps
     Elementor's `display:flex; flex-wrap:wrap; gap` decoration. Swiper
     expects its container to be a plain block: running it on a flex-wrap
     container leaves the translated `.swiper-wrapper` track/height
     mis-resolved, so slides pile up at the same offset (reads as an
     accidental fade/overlap) and advance jerkily.
     Forcing the container back to `display:block` makes the frontend
     container behave exactly like the editor's clean one. Scoped to the
     DIRECT `> .swiper` child only, so the per-slide nested `.e-con-inner`
     (which must stay flex for the user's own layout) is untouched.
     `!important` is required to beat Elementor's `.e-con > .e-con-inner`
     / `.elementor-container` flex rules (equal specificity). */
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.eael-advanced-slider .e-con-inner {
  position: relative;
  overflow: hidden;
}
.eael-advanced-slider .swiper-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  width: 100%;
}
.eael-advanced-slider .swiper-slide {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.eael-advanced-slider {
  /* ────────────────────────────────────────────────────────────────
     CSS-driven slide sizing (replaces forceSwiperSlideWidths runtime
     DOM-writes from earlier builds).

     Why:
       Elementor injects per-widget `width: var(--container-widget-width, 30%);
       max-width: 30%` on every column-sized widget. Swiper computes a
       slide width and writes it to `style.width` (no !important).
       Elementor's `max-width: 30%` clamps Swiper's rendered width →
       Items Per Slide has no visible effect.

     Old fix (forceSwiperSlideWidths):
       On every resize / slidesUpdated / breakpoint event, loop every
       slide and write 4-5 inline styles with !important. ~90 DOM ops
       per event on an 18-slide looped slider; multiple sliders + a
       window drag = layout thrashing.

     New fix (this rule):
       JS writes ONE CSS custom property on the .eael-advanced-slider
       wrapper per Swiper resize/breakpoint event (--eael-as-slide-w
       for horizontal, --eael-as-slide-h for vertical). This rule
       applies the variable to every slide via !important + high
       specificity (4 classes + 2 :not() = 0,6,3 — beats Elementor's
       `.e-flex.e-con-row` at 0,2,0).

     Cards and Flip effects bypass this entirely — their slides are
     sized by the dedicated `.eael-advanced-slider-cards .swiper {...}`
     max-width rules below. The :not() chain excludes them.
     ──────────────────────────────────────────────────────────────── */
}
.eael-advanced-slider:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip):not(.eael-advanced-slider-vertical) > .swiper > .swiper-wrapper > .swiper-slide, .eael-advanced-slider:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip):not(.eael-advanced-slider-vertical).swiper > .swiper-wrapper > .swiper-slide {
  width: var(--eael-as-slide-w, 100%) !important;
  max-width: none !important;
  -ms-flex-preferred-size: var(--eael-as-slide-w, 100%) !important;
      flex-basis: var(--eael-as-slide-w, 100%) !important;
  -ms-flex-negative: 0 !important;
      flex-shrink: 0 !important;
}
.eael-advanced-slider.eael-advanced-slider-vertical:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip) > .swiper > .swiper-wrapper > .swiper-slide, .eael-advanced-slider.eael-advanced-slider-vertical:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip).swiper > .swiper-wrapper > .swiper-slide {
  width: 100% !important;
  max-width: none !important;
  height: var(--eael-as-slide-h, auto) !important;
  max-height: none !important;
  -ms-flex-preferred-size: var(--eael-as-slide-h, auto) !important;
      flex-basis: var(--eael-as-slide-h, auto) !important;
  -ms-flex-negative: 0 !important;
      flex-shrink: 0 !important;
  /* Clip slide content to the computed per-view slide height.
     In a vertical N-per-view slider each .swiper-slide is sized to
     (container-height − gaps) / items (e.g. 244px for 2-per-view on a
     70vh slider). But the slide's content keeps its natural size — an
     Elementor Image widget renders the <img> at its intrinsic height
     (e.g. 533px), which with the default `overflow: visible` bleeds
     out of the 244px slide box and visually overlaps the adjacent
     slide. The editor preview doesn't show this because its rebuilt
     structure clips; the frontend reuses Elementor's DOM and never
     did. overflow:hidden makes each slide a clean fixed-height window. */
  overflow: hidden !important;
}
.eael-advanced-slider.eael-advanced-slider-vertical:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip) {
  /* Make image slides fill their fixed-height window instead of being
     top-cropped at native width. object-fit:cover keeps aspect ratio and
     covers the slide — the intended look for an image-per-slide vertical
     slider. Scoped to vertical slides so it never touches horizontal/3D. */
}
.eael-advanced-slider.eael-advanced-slider-vertical:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip) > .swiper > .swiper-wrapper > .swiper-slide img, .eael-advanced-slider.eael-advanced-slider-vertical:not(.eael-advanced-slider-cards):not(.eael-advanced-slider-flip).swiper > .swiper-wrapper > .swiper-slide img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.eael-advanced-slider .swiper-button-next,
.eael-advanced-slider .swiper-button-prev {
  z-index: 2;
}
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide-shadow-top,
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide-shadow-bottom {
  z-index: -1;
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide-shadow {
  z-index: -1;
}
.eael-advanced-slider {
  /* ============================================================
     Cards / Flip / Coverflow — visual treatment matching the
     reference demo (V5 stacked-cards testimonial).

     Key requirements:
     1. The outer slider lets 3D-rotated cards bleed beyond its
        edges (override the dimension-fix overflow:hidden).
     2. Slides have a solid background by default so stacked cards
        don't show through each other.
     3. Slides have padding + rounded corners + shadow for the
        "card" look out of the box.
     4. Cards have a moderate max-width (640px) and breathing room
        on top/bottom so the 3D rotation has space to render.
     ============================================================ */
}
.eael-advanced-slider.eael-advanced-slider-cards, .eael-advanced-slider.eael-advanced-slider-flip, .eael-advanced-slider.eael-advanced-slider-coverflow {
  overflow: visible; /* let 3D rotation bleed past the wrapper */
  padding-top: 40px;
  padding-bottom: 40px;
  /* Use flex centering to guarantee horizontal centering regardless of the
     parent container's flex-direction. Without this, when Elementor's
     parent .e-con-inner is `flex-direction: row`, the .swiper child sticks
     to the left edge instead of centering even with margin: 0 auto. */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* same-element-OR-descendant — frontend has .swiper on the same
     element as .eael-advanced-slider-cards, editor has it as a child.
     &.swiper covers the frontend case. */
}
.eael-advanced-slider.eael-advanced-slider-cards > .swiper,
.eael-advanced-slider.eael-advanced-slider-cards .swiper, .eael-advanced-slider.eael-advanced-slider-cards.swiper, .eael-advanced-slider.eael-advanced-slider-flip > .swiper,
.eael-advanced-slider.eael-advanced-slider-flip .swiper, .eael-advanced-slider.eael-advanced-slider-flip.swiper, .eael-advanced-slider.eael-advanced-slider-coverflow > .swiper,
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper, .eael-advanced-slider.eael-advanced-slider-coverflow.swiper {
  width: 100%; /* take available width up to max-width */
  margin-left: auto;
  margin-right: auto;
  overflow: visible; /* allow rotated edges to show */
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-wrapper, .eael-advanced-slider.eael-advanced-slider-flip .swiper-wrapper, .eael-advanced-slider.eael-advanced-slider-coverflow .swiper-wrapper {
  overflow: visible;
}
.eael-advanced-slider.eael-advanced-slider-cards, .eael-advanced-slider.eael-advanced-slider-flip, .eael-advanced-slider.eael-advanced-slider-coverflow {
  /* slide tuned to match demo V5's card chrome — radius 14px (was
     16, 14 reads more refined), shadow softened to demo's single
     layer `0 30px 60px -20px rgba(15,15,50,0.18)`. min-height: 360px
     is the demo's V5 fixed height — sliders with sparse content stay
     card-sized; with rich content (Call-to-Action with image + text)
     the auto-fit pass in eaelAutoFitHeight measures slide.scrollHeight
     and grows the .swiper container to fit so nothing clips.

     :not(.eael-as-thumb) — the Thumbnails pagination rail mounts its
     tiles as .swiper-slide.eael-as-thumb INSIDE this 3D wrapper, so a
     bare `.swiper-slide` here forced min-height:360px (and the card
     chrome) onto every thumbnail, overriding the Thumbnail Size control's
     height (min-height beats height) and ballooning the strip. */
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide:not(.eael-as-thumb), .eael-advanced-slider.eael-advanced-slider-flip .swiper-slide:not(.eael-as-thumb), .eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide:not(.eael-as-thumb) {
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  min-height: 360px;
  border-radius: 14px;
  background: #fff;
  /* Box shadow is owned by the "Box Shadow" group control in
     Advanced_Slider.php (register_background_controls). Its default
     reproduces the original `0 30px 60px -20px rgba(15,15,50,0.18)`,
     so existing sliders look identical while staying tunable. */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* GPU layer promotion for the 3D transform animation. Chrome
     auto-promotes the transformed slide to its own compositor
     layer, so the card's image/content is rasterized once and the
     transform animates on the GPU. Firefox does NOT auto-promote
     here — without these hints it repaints the full card (image +
     content) on every animation frame, which is the "slides not
     smooth in Firefox" report. translateZ(0) + backface-visibility
     force the layer; will-change tells the engine to keep it. */
  will-change: transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.eael-advanced-slider.eael-advanced-slider-cards, .eael-advanced-slider.eael-advanced-slider-flip, .eael-advanced-slider.eael-advanced-slider-coverflow {
  /* Active-slide overlay hook. Swiper's slide shadows only paint the
     non-active side/back slides, so the front (active) slide could not
     be tinted. The slide's `transform: translateZ(0)` (above) makes it a
     stacking context, so this z-index:-1 pseudo paints ABOVE the card's
     own #fff background but BELOW the in-flow content — the tint shows on
     the card while the text/content stays fully visible on top.
     pointer-events:none so clicks pass through; default transparent —
     the "Active Slide Overlay" color control in Advanced_Slider.php
     paints it. inset:0 fills the card (containing block = the slide). */
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide-active:not(.eael-as-thumb)::after, .eael-advanced-slider.eael-advanced-slider-flip .swiper-slide-active:not(.eael-as-thumb)::after, .eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide-active:not(.eael-as-thumb)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: transparent;
}
.eael-advanced-slider.eael-advanced-slider-cards, .eael-advanced-slider.eael-advanced-slider-flip, .eael-advanced-slider.eael-advanced-slider-coverflow {
  /* Image-only cards: make the slide image cover the whole card so
     shorter images don't leave a blank area below them. Auto-fit sets
     every card to the tallest slide's height (uniform deck); without
     this, a slide whose image is shorter than that height shows empty
     white space. Scoped to image widgets so rich multi-widget cards
     (text + button + image) are left untouched. */
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide.elementor-widget-image,
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide .elementor-widget-image, .eael-advanced-slider.eael-advanced-slider-flip .swiper-slide.elementor-widget-image,
.eael-advanced-slider.eael-advanced-slider-flip .swiper-slide .elementor-widget-image, .eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide.elementor-widget-image,
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide .elementor-widget-image {
  height: 100%;
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide.elementor-widget-image img,
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide .elementor-widget-image img, .eael-advanced-slider.eael-advanced-slider-flip .swiper-slide.elementor-widget-image img,
.eael-advanced-slider.eael-advanced-slider-flip .swiper-slide .elementor-widget-image img, .eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide.elementor-widget-image img,
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide .elementor-widget-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.eael-advanced-slider.eael-advanced-slider-cards, .eael-advanced-slider.eael-advanced-slider-flip, .eael-advanced-slider.eael-advanced-slider-coverflow {
  /* Inner Elementor container inside each slide gets a sensible
     default padding so user widgets aren't flush against the rounded edges */
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper-slide > .e-con-inner, .eael-advanced-slider.eael-advanced-slider-flip .swiper-slide > .e-con-inner, .eael-advanced-slider.eael-advanced-slider-coverflow .swiper-slide > .e-con-inner {
  padding: clamp(20px, 4vw, 40px);
}
.eael-advanced-slider.eael-advanced-slider-cards, .eael-advanced-slider.eael-advanced-slider-flip, .eael-advanced-slider.eael-advanced-slider-coverflow {
  /* Pagination underneath the centered swiper should also center */
}
.eael-advanced-slider.eael-advanced-slider-cards .eael-as-pagination,
.eael-advanced-slider.eael-advanced-slider-cards .eael-as-thumbnails, .eael-advanced-slider.eael-advanced-slider-flip .eael-as-pagination,
.eael-advanced-slider.eael-advanced-slider-flip .eael-as-thumbnails, .eael-advanced-slider.eael-advanced-slider-coverflow .eael-as-pagination,
.eael-advanced-slider.eael-advanced-slider-coverflow .eael-as-thumbnails {
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.eael-advanced-slider {
  /* dimensions tuned to match demo HTML's V5 (Customer love · Stacked
     cards testimonial) and V7 (Fashion lookbook · 3D flip). Cards now use
     min(520px, 92%) width like the demo — narrower than v19's 640px so the
     perSlideOffset:9 / perSlideRotate:2.4 stacking actually reads visually.
     Flip stays at 720px; coverflow stays full-width for hero banners. */
  /* Auto-fit height: drop the 360px card-presence floor so the slider hugs
     its content instead of forcing every 3D slide to ≥360px (the "slider too
     tall / empty space below content" report). The floor still applies when
     Auto-fit Slide Height is OFF — there the Manual Slider Height control
     owns the dimension. Higher specificity (5 classes) + later source order
     than the `.swiper-slide:not(.eael-as-thumb)` floor above, so it wins. */
}
.eael-advanced-slider.eael-as-auto-height.eael-advanced-slider-cards .swiper-slide:not(.eael-as-thumb), .eael-advanced-slider.eael-as-auto-height.eael-advanced-slider-flip .swiper-slide:not(.eael-as-thumb), .eael-advanced-slider.eael-as-auto-height.eael-advanced-slider-coverflow .swiper-slide:not(.eael-as-thumb) {
  min-height: 0;
}
.eael-advanced-slider.eael-advanced-slider-cards .swiper, .eael-advanced-slider.eael-advanced-slider-cards.swiper {
  max-width: min(520px, 92%);
}
.eael-advanced-slider.eael-advanced-slider-flip .swiper, .eael-advanced-slider.eael-advanced-slider-flip.swiper {
  max-width: 720px;
}
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper, .eael-advanced-slider.eael-advanced-slider-coverflow.swiper {
  max-width: 100%;
}
.eael-advanced-slider {
  /* Coverflow horizontal-overflow clip.
     Coverflow lays its full slide track side-by-side (slidesPerView ≥ 1, not
     centered) and the generic 3D block above sets the .swiper to
     `overflow: visible` so rotated edges/shadows bleed. For cards/flip that
     track is one slide wide so nothing spills; for coverflow the off-screen
     slides (everything past the visible 3) extend the track well past the
     viewport — measured scrollWidth ≈ 3× the container — and on the frontend
     (where the slider IS the full-width container) that paints a document-
     level HORIZONTAL SCROLLBAR.

     Fix: clip the horizontal axis only. `overflow-x: clip` (not `hidden`)
     leaves `overflow-y: visible` intact — unlike `hidden`, `clip` does not
     force the cross-axis to compute as `auto` — so the 40px top/bottom
     padding and the 3D depth shadows still show while the horizontal spill
     that caused the scrollbar is cut at the slider edge. The visible side
     slides recede toward center and stay inside the container width, so
     clipping at the edge is exactly the intended coverflow framing. */
}
.eael-advanced-slider.eael-advanced-slider-coverflow {
  overflow-x: clip;
  overflow-y: visible;
}
.eael-advanced-slider.eael-advanced-slider-coverflow > .swiper,
.eael-advanced-slider.eael-advanced-slider-coverflow .swiper, .eael-advanced-slider.eael-advanced-slider-coverflow.swiper {
  overflow-x: clip;
  overflow-y: visible;
}
.eael-advanced-slider {
  /* Vertical mode hardening.
     1. `overflow: hidden` on the slider AND its .swiper container is what
        stops Swiper's vertical-translated wrapper (which is taller than the
        container by N×slide-height) from spilling out and inflating the
        page's scrollHeight — that was the "infinite scroll after the
        slider" the user reported. The `&.swiper` covers the frontend's
        flat DOM; descendant `.swiper` covers the editor's nested DOM.
     2. `flex-direction: column` keeps any pagination/thumbnails siblings
        stacked under the swiper instead of being placed by the parent
        container's flex-row default.
     3. Force Swiper's vertical pagination back to the bottom so the
        built-in tick-bars / dots / fraction don't render as a vertical
        rail at the top-right of the slider when direction='vertical'.
        Swiper's pagination module auto-applies `swiper-pagination-vertical`
        which absolutely positions the bullets to the right edge — that's
        the "Dots Classic Horizontal Bullet shown at the Top Right Side"
        report. We override with !important and switch to a horizontal
        row layout. */
}
.eael-advanced-slider.eael-advanced-slider-vertical {
  overflow: hidden;
  /* Baseline fixed height — feedback-loop guard.

     In vertical mode the user's Slider Height control writes
     `height: <value> !important` to the per-page CSS via PHP
     `selectors`. But for sliders saved before Elementor regenerated
     the per-page CSS file (fresh sliders, after a plugin upgrade,
     cached uploads dir, etc.) that rule is missing → .swiper
     collapses to `height: auto` → measures content height (sum of
     slides) → Swiper computes slidesSizesGrid from the inflated
     container → JS writes the value back via `--eael-as-slide-h`
     → slides become huge → wrapper grows further → exponential
     runaway. Real-world result was `--eael-as-slide-h: 8947663px`
     reported by QA.

     Baseline `70vh` (no `!important`) gives the container a
     guaranteed height so the loop never starts. The user's
     Height control still wins because PHP writes `!important`
     via per-page CSS. */
  height: 70vh;
}
.eael-advanced-slider.eael-advanced-slider-vertical > .swiper, .eael-advanced-slider.eael-advanced-slider-vertical.swiper {
  overflow: hidden;
  height: 70vh;
}
.eael-advanced-slider.eael-advanced-slider-vertical {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.eael-advanced-slider.eael-advanced-slider-vertical .swiper-pagination.swiper-pagination-vertical {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: 0 !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  width: 100% !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 14px auto 0;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-pagination--type-dots-vertical {
  /* the user-chosen "vertical dots" pagination should still pin
     to the right rail — that's its whole point, distinct from the
     accidental Swiper-default vertical layout we just fixed above. */
  position: absolute !important;
}
.eael-advanced-slider.eael-advanced-slider-vertical {
  position: relative;
  scrollbar-width: none;
}
.eael-advanced-slider.eael-advanced-slider-vertical::-webkit-scrollbar {
  display: none;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-advanced-slider-inner::-webkit-scrollbar {
  display: none;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-advanced-slider-inner {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE & old Edge */
  height: 70vh;
  overflow-y: scroll;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.eael-advanced-slider.eael-advanced-slider-vertical .swiper-wrapper {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.eael-advanced-slider.eael-advanced-slider-vertical:not(.eael-advanced-slider-coverflow) .swiper-wrapper .swiper-slide {
  width: var(--width);
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-advanced-slider-slide {
  scroll-snap-align: center;
  /* Each scroll-snap point must fill the snap container, otherwise
     slides whose primary content is absolutely-positioned (Elementor
     Video widget wraps its iframe in a `padding-bottom: 56.25%;
     position: relative; height: 0;` aspect-ratio shell with the
     iframe `position: absolute`) collapse to 0 height. The iframe
     then bleeds past the slide's logical end and renders on top of
     the next slide's slot. min-height: 100% pins each slide to the
     container's height (set via the user's Slider Height control or
     the 70vh baseline) so absolute-positioned children stay scoped. */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 100%;
  min-height: 100%;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator {
  position: absolute;
  right: 10%;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index {
  position: relative;
  font: 0.65rem helvetica, sans-serif;
  color: white;
  margin: 0.5rem 0;
  -webkit-transition: margin 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transition: margin 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, margin 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, margin 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index:first-of-type::before, .eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index:last-of-type::after {
  content: none;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index::before, .eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index::after {
  content: "";
  position: absolute;
  left: calc(50% - 0.03rem);
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0.015rem;
  height: 1.25rem;
  background-color: white;
  -webkit-transform: scaleY(0);
      -ms-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index::before {
  top: -1.3rem;
  -webkit-transform-origin: bottom;
      -ms-transform-origin: bottom;
          transform-origin: bottom;
}
.eael-advanced-slider.eael-advanced-slider-vertical .eael-as-indicator-index::after {
  bottom: -1.3rem;
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
}
.eael-advanced-slider.eael-advanced-slider-vertical .expand {
  -webkit-transform: scale(3);
      -ms-transform: scale(3);
          transform: scale(3);
  margin: 5rem 0;
}
.eael-advanced-slider.eael-advanced-slider-vertical .expand:first-of-type {
  margin-top: 0;
}
.eael-advanced-slider.eael-advanced-slider-vertical .expand:last-of-type {
  margin-bottom: 0;
}
.eael-advanced-slider.eael-advanced-slider-vertical .expand::before, .eael-advanced-slider.eael-advanced-slider-vertical .expand::after {
  -webkit-transform: scaleY(1) translateX(-50%);
      -ms-transform: scaleY(1) translateX(-50%);
          transform: scaleY(1) translateX(-50%);
}
.eael-advanced-slider.eael-advanced-slider-marquee {
  --duration: 60s;
  overflow: hidden;
  position: relative;
}
.eael-advanced-slider.eael-advanced-slider-marquee .eael-as-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: scroll var(--duration) linear infinite;
          animation: scroll var(--duration) linear infinite;
  will-change: transform;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
@-webkit-keyframes scroll {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@keyframes scroll {
  from {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
.eael-advanced-slider .eael-as-nav-icon.swiper-button-next::after, .eael-advanced-slider .eael-as-nav-icon.swiper-button-prev::after {
  display: none;
}
.eael-advanced-slider {
  /* ============================================================
     Pagination — six types × five positions
     Tokens (override via Elementor color/size controls):
       --eael-as-pag-color       : inactive bullet/bar color
       --eael-as-pag-active-color: active bullet/bar/progress color
       --eael-as-pag-text-color  : fraction text color
     ============================================================ */
}
.eael-advanced-slider .eael-as-pagination {
  --eael-as-pag-color: rgba(0,0,0,0.25);
  --eael-as-pag-active-color: #111;
  --eael-as-pag-text-color: #111;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  z-index: 5;
  pointer-events: auto;
}
.eael-advanced-slider {
  /* Bullets are <button> elements (Swiper bulletElement: 'button').
     Reset native button styling so the dots/bars look clean. */
}
.eael-advanced-slider .eael-as-bullet,
.eael-advanced-slider .eael-as-tick-bar {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.eael-advanced-slider {
  /* ─── Type: Dots (horizontal bullets) ─── */
}
.eael-advanced-slider .eael-as-pagination--type-dots .eael-as-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--eael-as-pag-color);
  cursor: pointer;
  -webkit-transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s;
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s;
  opacity: 1;
}
.eael-advanced-slider .eael-as-pagination--type-dots .eael-as-bullet-active {
  width: 28px;
  background: var(--eael-as-pag-active-color);
}
.eael-advanced-slider {
  /* ─── Type: Vertical Dots (right rail) ─── */
}
.eael-advanced-slider .eael-as-pagination--type-dots-vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.eael-advanced-slider .eael-as-pagination--type-dots-vertical .eael-as-bullet {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--eael-as-pag-color);
  cursor: pointer;
  -webkit-transition: height 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s;
  transition: height 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s;
}
.eael-advanced-slider .eael-as-pagination--type-dots-vertical .eael-as-bullet-active {
  height: 22px;
  background: var(--eael-as-pag-active-color);
}
.eael-advanced-slider {
  /* ─── Type: Fraction (01 / 05) ─── */
}
.eael-advanced-slider .eael-as-pagination--type-fraction {
  font-family: inherit;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--eael-as-pag-text-color);
  gap: 4px;
}
.eael-advanced-slider .eael-as-pagination--type-fraction .eael-as-fraction-current {
  color: var(--eael-as-pag-active-color);
}
.eael-advanced-slider .eael-as-pagination--type-fraction .eael-as-fraction-total {
  opacity: 0.5;
}
.eael-advanced-slider .eael-as-pagination--type-fraction .eael-as-fraction-sep {
  opacity: 0.4;
  padding: 0 2px;
}
.eael-advanced-slider .eael-as-pagination--type-fraction {
  /* Pad current/total to 2 digits via CSS counter */
}
.eael-advanced-slider .eael-as-pagination--type-fraction .swiper-pagination-current::before,
.eael-advanced-slider .eael-as-pagination--type-fraction .eael-as-fraction-current::before {
  content: "0";
  opacity: 0.6;
}
.eael-advanced-slider .eael-as-pagination--type-fraction .swiper-pagination-total::before,
.eael-advanced-slider .eael-as-pagination--type-fraction .eael-as-fraction-total::before {
  content: "0";
  opacity: 0.6;
}
.eael-advanced-slider {
  /* ─── Type: Tick Bars (vertical bar fraction) ─── */
}
.eael-advanced-slider .eael-as-pagination--type-tick-bars {
  gap: 4px;
}
.eael-advanced-slider .eael-as-pagination--type-tick-bars .eael-as-tick-bar {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--eael-as-pag-color);
  border-radius: 1px;
  -webkit-transition: background-color 0.25s, height 0.25s, width 0.25s;
  transition: background-color 0.25s, height 0.25s, width 0.25s;
}
.eael-advanced-slider .eael-as-pagination--type-tick-bars .eael-as-tick-bar.is-active {
  background: var(--eael-as-pag-active-color);
  height: 18px;
  width: 3px;
}
.eael-advanced-slider {
  /* ─── Type: Progress Bar (matches demo V3 — Travel "Fade hero with timing")
     Composite: play/pause toggle | linear progress bar | "01 / 04" counter
     The bar fills based on autoplay-time-elapsed and resets each slide. ─── */
  /* Progress bar — wider out of the box (matches demo V3 "Travel magazine"
     layout where the bar reads as the full width of the lower control rail).
     Default max-width raised from 480px to 80% via the PHP control's new
     default; this CSS no longer caps it at 480px so the user's chosen %
     value drives the rendered width. The control container is now 100% wide
     with `gap: clamp(...)` so the play/pause + bar + counter stay aligned
     across viewport sizes. */
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(14px, 2vw, 24px);
  width: 80%;
  max-width: 80%;
  padding: 0;
  background: transparent; /* override the dimension-fix bg */
  /* keep the row tall enough for the toggle button no matter
     what stale per-element CSS rules a previous plugin version wrote.
     The pre-v20.1 'Track Height' control mistakenly targeted this
     container; if a saved page still carries `height: 2px` from that
     era, min-height: 38px (= toggle size) lets the button render.
     !important to win over Elementor's per-element CSS file. */
  min-height: 38px !important;
  height: auto;
  border-radius: 0;
  margin-left: auto;
  margin-right: auto;
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-toggle {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: var(--eael-as-pag-active-color);
  color: #fff;
  /* pause button alignment fix — `display: flex` with
     align-items/justify-content centers the SVG more reliably than
     `display: grid; place-items: center`, which combined with the
     default `inline` SVG display (and the inline-style `display:none`
     toggle on the play icon) produced a sub-pixel offset depending
     on whether the browser snapped the inline box to baseline.
     Forcing line-height: 0 and `display: block` on the SVG removes
     the inline whitespace gap entirely. */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 0;
  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: -webkit-transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-toggle svg {
  display: block;
  width: 13px;
  height: 13px;
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-toggle:hover {
  -webkit-transform: scale(1.06);
      -ms-transform: scale(1.06);
          transform: scale(1.06);
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-track {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  height: 2px;
  background: var(--eael-as-pag-color);
  overflow: hidden;
  border-radius: 99px;
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--eael-as-pag-active-color);
  /* No width transition: the JS rAF tick already writes a fresh
     width every frame, so a CSS ease just makes the rendered fill
     trail the true progress by ~100ms — at the slide-change moment
     the bar reads <100% and then snaps to 0 before the ease lands,
     so it never looks full. Let width track the rAF value 1:1. */
  -webkit-transition: none;
  transition: none;
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-counter {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  font-family: inherit;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  color: var(--eael-as-pag-color);
  letter-spacing: 0.04em;
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-counter strong {
  color: var(--eael-as-pag-active-color);
  font-weight: 600;
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar .eael-as-pb-sep {
  margin: 0 4px;
  opacity: 0.6;
}
.eael-advanced-slider {
  /* On dark slider backgrounds, force light tones */
}
.eael-advanced-slider.eael-advanced-slider-cards .eael-as-pagination--type-progress-bar, .eael-advanced-slider.eael-advanced-slider-flip .eael-as-pagination--type-progress-bar {
  --eael-as-pag-color: rgba(0,0,0,0.15);
}
.eael-advanced-slider {
  /* ─── Position modifiers ─── */
  /* For the Swiper-module pagination types (dots / tick_bars / fraction)
     Swiper's own stylesheet stamps the host with `.swiper-pagination-horizontal`
     → `position:absolute; left:0; width:100%; bottom:8px`. Those win over our
     top/right/transform alone, so the host stays a full-width bottom row and
     every position looked identical. We override left/right/top/bottom/width
     with !important so OUR position class is the single source of truth. */
}
.eael-advanced-slider .eael-as-pagination--position-bottom {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin: 18px auto 0 !important;
}
.eael-advanced-slider .eael-as-pagination--position-inside-top-center {
  position: absolute !important;
  top: 18px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  width: auto !important;
  margin: 0 !important;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.eael-advanced-slider .eael-as-pagination--position-inside-bottom-center {
  position: absolute !important;
  bottom: 18px !important;
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  width: auto !important;
  margin: 0 !important;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.eael-advanced-slider .eael-as-pagination--position-inline-with-arrows {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  margin: 18px auto 0 !important;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}
.eael-advanced-slider .eael-as-pagination--position-right-center {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 16px !important;
  left: auto !important;
  width: auto !important;
  margin: 0 !important;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.eael-advanced-slider {
  /* Progress bar is a horizontal rail, NOT a shrink-to-fit pill like the
     swiper pagination types. The position modifiers above set
     `width: auto !important` (correct for dots/tick/fraction), but on the
     progress-bar host that collapses the flex container to its content
     width, so the `flex:1` track gets 0 width and the bar disappears while
     the toggle + counter (intrinsic width) still show. Re-assert a real
     width for the horizontal positions so the track can grow.
     Uses a 2-class selector + !important so it beats the position
     modifier's single-class !important; the PHP "Max Width" control (also
     !important, loaded later in Elementor's per-element CSS) can still
     override it. */
}
.eael-advanced-slider .eael-as-pagination--type-progress-bar.eael-as-pagination--position-bottom,
.eael-advanced-slider .eael-as-pagination--type-progress-bar.eael-as-pagination--position-inside-top-center,
.eael-advanced-slider .eael-as-pagination--type-progress-bar.eael-as-pagination--position-inside-bottom-center,
.eael-advanced-slider .eael-as-pagination--type-progress-bar.eael-as-pagination--position-inline-with-arrows {
  width: 80% !important;
  max-width: 80%;
}
.eael-advanced-slider {
  /* When pagination is "inline with arrows", the JS reparents prev-arrow +
     pagination host + next-arrow into a single `.eael-as-inline-row` so they
     sit on one centered row. The arrows must shed Swiper's absolute edge
     positioning and flow inline inside the row. */
}
.eael-advanced-slider .eael-as-inline-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  margin: 18px auto 0;
}
.eael-advanced-slider .eael-as-inline-row > .swiper-button-next, .eael-advanced-slider .eael-as-inline-row > .swiper-button-prev {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  margin: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.eael-advanced-slider .eael-as-inline-row .eael-as-pagination--position-inline-with-arrows {
  position: static !important;
  margin: 0 !important;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}
.eael-advanced-slider .eael-as-inline-row {
  /* Progress bar is a wide rail, not a shrink-to-fit pill. Inside the
     inline row the row otherwise shrink-wraps to its content, so the
     bar's `width: 80%` resolves to 80% of nothing and the flex:1 track
     collapses to ~10px (toggle + counter eat the row). Give the row a
     definite width for this variant so the bar — and its track — have
     real space to grow. The JS tags the row `--progress-bar`. */
}
.eael-advanced-slider .eael-as-inline-row.eael-as-inline-row--progress-bar {
  width: 80%;
  max-width: 720px;
}
.eael-advanced-slider .eael-as-inline-row.eael-as-inline-row--progress-bar .eael-as-pagination--type-progress-bar {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.eael-advanced-slider {
  /* ─── Type: Numbered Index Rail (number / alphabet / roman) ─── */
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index {
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index .eael-as-index-item {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  font-family: inherit;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--eael-as-pag-color);
  -webkit-transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index .eael-as-index-bar {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  -webkit-transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index .eael-as-index-item.is-active {
  color: var(--eael-as-pag-active-color);
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index .eael-as-index-item.is-active .eael-as-index-bar {
  width: 42px;
  background: var(--eael-as-pag-active-color);
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index .eael-as-index-item:hover {
  color: var(--eael-as-pag-active-color);
}
.eael-advanced-slider {
  /* Vertical orientation when used on the right rail */
}
.eael-advanced-slider .eael-as-pagination--type-numbered-index.eael-as-pagination--position-right-center {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 12px;
}
.eael-advanced-slider {
  /* ─── Type: Thumbnails strip ─── */
}
.eael-advanced-slider .eael-as-thumbnails {
  margin: 16px auto 0;
  max-width: 720px;
  padding: 0 12px;
  position: relative;
  z-index: 5;
}
.eael-advanced-slider {
  /* Position modifiers — mirror the .eael-as-pagination--position-* set so
     the Navigation Position control applies to the thumbnails strip too.
     `bottom` / `inline-with-arrows` keep the default in-flow margin. The
     overlay variants anchor to the position:relative .eael-advanced-slider. */
}
.eael-advanced-slider .eael-as-thumbnails--position-inside-top-center {
  position: absolute;
  top: 18px;
  left: 50%;
  margin: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.eael-advanced-slider .eael-as-thumbnails--position-inside-bottom-center {
  position: absolute;
  bottom: 18px;
  left: 50%;
  margin: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.eael-advanced-slider .eael-as-thumbnails--position-right-center {
  position: absolute;
  top: 50%;
  right: 16px;
  margin: 0;
  max-width: 120px;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.eael-advanced-slider .eael-as-thumbnails-swiper {
  width: 100%;
}
.eael-advanced-slider .eael-as-thumbnails .swiper-slide {
  width: 86px !important; /* override base .swiper-slide{width:100%} from this file */
  height: 86px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  -webkit-transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}
.eael-advanced-slider .eael-as-thumbnails .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  -webkit-transition: background-color 0.25s, opacity 0.25s;
  transition: background-color 0.25s, opacity 0.25s;
  pointer-events: none;
}
.eael-advanced-slider .eael-as-thumbnails .swiper-slide.swiper-slide-thumb-active {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}
.eael-advanced-slider .eael-as-thumbnails .swiper-slide.swiper-slide-thumb-active::after {
  background: transparent;
}
.eael-advanced-slider .eael-as-thumbnails .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.eael-advanced-slider .eael-as-thumb-num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--eael-as-pag-color, rgba(0, 0, 0, 0.08));
  color: var(--eael-as-pag-active-color, #111);
  font-weight: 700;
  -webkit-font-feature-settings: "tnum";
          font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.eael-advanced-slider {
  /* ─── Centered slides emphasis (Carousel pattern from screenshot 5) ─── */
}
.eael-advanced-slider .swiper-slide-active.eael-as-centered-active,
.eael-advanced-slider .swiper-slide.swiper-slide-active {
  /* Hook for users to style the active centered slide via Elementor */
}