/** Shopify CDN: Minification failed

Line 2230:0 Unexpected "}"

**/
/* ==================== Timed Fade-out (Autoplay end) ==================== */
/* Provide smooth opacity transitions for key text elements */
.swiper-slide .banner__heading,
.swiper-slide .banner__text,
.swiper-slide .banner__buttons {
  transition: opacity 1200ms ease-out, transform 1200ms ease-out;
  will-change: opacity, transform;
}

/* ==================== Mobile: Fade-in Animation (down to up) ==================== */
/* On mobile, text fades IN when arriving at new slide instead of fading out before leaving */
@media only screen and (max-width: 749px) {
  /* Define fade-in keyframe animation: start from below with 0 opacity, end at position with full opacity */
  @-webkit-keyframes mobileFadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  @keyframes mobileFadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  /* Base state: hide ALL text and buttons until animation triggers */
  .swiper-slide .slideshow__text.banner__box,
  .swiper-slide .banner__buttons {
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  
  /* Only show content after animation has completed (slide--animated class) */
  .swiper-slide.slide--animated .slideshow__text.banner__box,
  .swiper-slide.slide--animated .banner__buttons {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  
  /* Animate when slide is active AND has the animating class */
  .swiper-slide.swiper-slide-active.slide--animating .slideshow__text.banner__box {
    -webkit-animation: mobileFadeInUp 0.3s ease-out 0s both !important;
    animation: mobileFadeInUp 0.3s ease-out 0s both !important;
  }
  
  .swiper-slide.swiper-slide-active.slide--animating .banner__buttons {
    -webkit-animation: mobileFadeInUp 0.3s ease-out 0.15s both !important;
    animation: mobileFadeInUp 0.3s ease-out 0.15s both !important;
  }
  
  /* Disable desktop fade-out behavior on mobile */
  .slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .slideshow__text.banner__box,
  .slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__buttons,
  .swiper-slide.slide--fade-out .slideshow__text.banner__box,
  .swiper-slide.slide--fade-out .banner__buttons {
    opacity: unset !important;
    -webkit-transform: unset !important;
    transform: unset !important;
    -webkit-animation: none !important;
    animation: none !important;
  }
}

/* When slideshow wrapper is flagged to fade-out, rely on per-slide flag to avoid race with active slide switch */
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__heading,
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__text,
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__buttons {
  opacity: 0 !important;
}

/* Header: slide out downward during fade-out (target the flagged slide, not active) */
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__heading {
  animation: none !important; /* cancel any in-progress keyframe entry */
  transition: opacity 1200ms ease-out, transform 1200ms ease-out;
  transform: translateY(60px) !important;
}

/* Paragraph and buttons: slide out + fade during fade-out */
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__text,
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__buttons {
  transition: opacity 1200ms ease-out, transform 1200ms ease-out;
  transform: translateY(60px) !important;
}

/* Cancel any in-progress button animations during wrapper fade-out */
.slideshow__wrapper.slideshow--fade-out .swiper-slide.slide--fade-out .banner__buttons {
  animation: none !important;
}

/* Targeted fallback: when a specific slide is marked fading out (e.g., on manual nav) */
.swiper-slide.slide--fade-out .banner__heading,
.swiper-slide.slide--fade-out .banner__text,
.swiper-slide.slide--fade-out .banner__buttons {
  opacity: 0 !important;
}
.swiper-slide.slide--fade-out .banner__heading {
  animation: none !important;
  transition: opacity 1200ms ease-out, transform 1200ms ease-out;
  transform: translateY(60px) !important;
}

/* Fallback: paragraph and buttons slide + fade on slide-level fade-out */
.swiper-slide.slide--fade-out .banner__text,
.swiper-slide.slide--fade-out .banner__buttons {
  transition: opacity 1200ms ease-out, transform 1200ms ease-out;
  transform: translateY(60px) !important;
}

/* Prevent button re-animate on exiting slide */
.swiper-slide.slide--fade-out .banner__buttons {
  animation: none !important;
}
@media screen and (max-width: 599px) {
  .slideshow__banner--media--large {
    min-height: 39rem;
  }
  .slideshow__banner--media--medium {
    min-height: 34rem;
  }
  .slideshow__banner--media--small {
    min-height: 28rem;
  }
  .slideshow__banner--media--adapt_image.placeholder {
    height: 38rem;
  }
}
@media screen and (min-width: 599px) and (max-width: 749px) {
  .slideshow__banner--media--large {
    min-height: 55rem;
  }
  .slideshow__banner--media--medium {
    min-height: 45rem;
  }
  .slideshow__banner--media--small {
    min-height: 35rem;
  }
  .slideshow__banner--media--adapt_image.placeholder {
    height: 38rem;
  }
}
@media screen and (min-width: 750px) and (max-width: 991px) {
  .slideshow__banner--media--large {
    min-height: 65rem;
  }
  .slideshow__banner--media--medium {
    min-height: 55rem;
  }
  .slideshow__banner--media--small {
    min-height: 45rem;
  }
  .slideshow__banner--media--adapt_image.placeholder {
    height: 100vh;
  }
  
  /* iPad fix: Ensure swiper slide fills properly */
  .swiper-slide {
    height: 100%;
  }
  
  /* iPad fix: Ensure slideshow media container fills the min-height */
  .slideshow__media {
    height: 100%;
    min-height: inherit;
  }
  
  /* iPad fix: Ensure images fill the container */
  .slideshow__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: inherit;
  }
}
@media screen and (min-width: 992px) {
  .slideshow__banner--media--large {
    min-height: 89rem;
  }
  .slideshow__banner--media--medium {
    min-height: 65rem;
  }
  .slideshow__banner--media--small {
    min-height: 50rem;
  }
  .slideshow__banner--media--adapt_image.placeholder {
    height: 100vh;
  }
}
.slideshow__media {
  line-height: 0; /* Remove white space below images */
  font-size: 0; /* Extra precaution */
}
.slideshow__media img {
  display: block; /* Remove inline spacing */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slideshow__media:after {
  content: "";
  position: absolute;
  top: 0;
  background: #000000;
  opacity: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.slideshow--nav-button::after {
  font-size: 1.4rem;
}
.slideshow--bullet-button.pagination--numbers .swiper-pagination-bullet {
  background: none;
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
  line-height: 2rem;
  font-size: 2rem;
  border: none;
}
.slideshow--bullet-button.pagination--numbers
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
  text-decoration: underline;
  text-underline-offset: 0.35rem;
  opacity: 1;
}
.swiper-pagination-bullet {
  transition: var(--transition);
}
.slideshow--bullet-button.pagination--counter {
  font-size: 2rem;
}
@media only screen and (min-width: 750px) {
  .slideshow--slider.slider--controls--bullet {
    position: absolute;
    bottom: 3rem;
    z-index: 10;
    left: 0;
    right: 0;
  }
}
/* Slider content css */
.slideshow__text > * + * {
  margin-top: 1.5rem;
}

@media only screen and (min-width: 750px) {
  .slideshow__text .banner__heading + .banner__text {
    margin-top: 2rem;
  }
  .slideshow__text-wrapper {
    margin: 0 auto;
    display: flex;
    height: 100%;
    flex-direction: column;
    flex-grow: 1;
    right: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }
  .slideshow__text {
    position: relative;
    z-index: 9;
  }
  .top--position .slideshow__text {
    top: 5rem;
  }
  .bottom--position .slideshow__text {
    bottom: 5rem;
  }
  .slideshow--bullet-button.pagination--dots {
    bottom: 0;
  }
  .slider--alignment__desktop--center {
    text-align: center;
  }
  .slider--alignment__desktop--left {
    text-align: left;
  }
  .slider--alignment__desktop--right {
    text-align: right;
  }
}
.slideshow__text-wrapper {
  max-width: calc(var(--container-lg-width) - 3rem);
  width: 100%;
}
@media only screen and (max-width: 749px) {
  .slideshow__text.banner__box {
    padding: 3.5rem 1.5rem 2rem;
  }
  .slideshow--nav-button {
    top: unset;
    bottom: 1.2rem;
    z-index: 99;
  }
  .slideshow--nav-button:after {
    font-size: 1.4rem;
  }
  .slideshow--bullet-button.pagination--dots {
    bottom: 0;
  }
  
  /* ==================== FORCE ALL MOBILE CONTENT TO MIDDLE-CENTER ==================== */
  /* Override all desktop positioning on mobile - force everything to middle-center */
  .slideshow__text-wrapper {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Remove position-specific classes on mobile */
  .slideshow__text-wrapper.top--position,
  .slideshow__text-wrapper.bottom--position,
  .slideshow__text-wrapper.left--position,
  .slideshow__text-wrapper.right--position {
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }
  
  /* Force center alignment for all text elements */
  .slideshow__text-wrapper * {
    text-align: center !important;
  }
  
  /* Force center alignment for buttons */
  .slideshow__text-wrapper .button-wrapper,
  .slideshow__text-wrapper .slideshow__link {
    justify-content: center !important;
    display: flex !important;
  }
  
  .slider--alignment__mobile--center {
    text-align: center !important;
  }
  .slider--alignment__mobile--left {
    text-align: left !important;
  }
  .slider--alignment__mobile--right {
    text-align: right !important;
  }
  
  /* Ensure mobile text alignment applies to all text elements */
  .slider--alignment__mobile--center * {
    text-align: center !important;
  }
  .slider--alignment__mobile--left * {
    text-align: left !important;
  }
  .slider--alignment__mobile--right * {
    text-align: right !important;
  }
  
  /* Ensure buttons are aligned with text */
  .slider--alignment__mobile--center .button-wrapper {
    justify-content: center !important;
  }
  .slider--alignment__mobile--left .button-wrapper {
    justify-content: flex-start !important;
  }
  .slider--alignment__mobile--right .button-wrapper {
    justify-content: flex-end !important;
  }
  /* New consolidated mobile nav placement API: data-mobile-nav-placement on .slideshow--slider */
  .slideshow--slider[data-mobile-nav-placement^="overlay-"] {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    z-index: 999 !important;
    pointer-events: none !important;
  }

  /* Overlay vertical anchors */
  .slideshow--slider[data-mobile-nav-placement="overlay-top"] {
    top: 0 !important;
    bottom: auto !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  .slideshow--slider[data-mobile-nav-placement="overlay-center"] {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .slideshow--slider[data-mobile-nav-placement="overlay-bottom"] {
    top: auto !important;
    bottom: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  /* Overlay horizontal nudges */
  .slideshow--slider[data-mobile-nav-placement="overlay-left"] .slideshow--controls--inner { justify-content: flex-start !important; }
  .slideshow--slider[data-mobile-nav-placement="overlay-right"] .slideshow--controls--inner { justify-content: flex-end !important; }

  /* Below variants */
  .slideshow--slider[data-mobile-nav-placement^="below-"] {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 1.5rem !important;
  }
  .slideshow--slider[data-mobile-nav-placement="below-text"] {
    margin-top: 0 !important; /* assume rendered after text wrapper */
  }
  .slideshow--slider[data-mobile-nav-placement="below-image"] {
    margin-top: 1.5rem !important; /* classic below image gap */
  }
  
  /* Below mode: respect horizontal position */
  .slideshow--slider[data-mobile-nav-placement^="below-"][data-mobile-position-horizontal="left"] {
    justify-content: flex-start !important;
  }
  .slideshow--slider[data-mobile-nav-placement^="below-"][data-mobile-position-horizontal="center"] {
    justify-content: center !important;
  }
  .slideshow--slider[data-mobile-nav-placement^="below-"][data-mobile-position-horizontal="right"] {
    justify-content: flex-end !important;
  }

  /* Ensure inner is clickable in overlay modes */
  .slideshow--slider[data-mobile-nav-placement^="overlay-"] .slideshow--controls--inner {
    pointer-events: auto !important;
  }
  
  /* Mobile navigation shadow toggle */
  .slideshow--slider[data-mobile-shadow="true"] .slideshow--controls--inner {
    /* Remove box shadow from container */
    box-shadow: none !important;
  }
  
  /* Add drop shadow below navigation elements when toggle is on */
  .slideshow--slider[data-mobile-shadow="true"] .slideshow--nav-button,
  .slideshow--slider[data-mobile-shadow="true"] .swiper-button-prev,
  .slideshow--slider[data-mobile-shadow="true"] .swiper-button-next {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
    -webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)) !important;
  }
  
  .slideshow--slider[data-mobile-shadow="true"] .swiper-pagination-bullet {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
    -webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)) !important;
  }
  
  .slideshow--slider[data-mobile-shadow="false"] .slideshow--controls--inner {
    box-shadow: none !important;
  }
  
  /* Remove all shadows from navigation buttons and pagination when toggle is off */
  .slideshow--slider[data-mobile-shadow="false"] .slideshow--nav-button,
  .slideshow--slider[data-mobile-shadow="false"] .swiper-button-prev,
  .slideshow--slider[data-mobile-shadow="false"] .swiper-button-next,
  .slideshow--slider[data-mobile-shadow="false"] .swiper-pagination,
  .slideshow--slider[data-mobile-shadow="false"] .swiper-pagination-bullet {
    box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
  }
}
.slideshow--slider.slider--controls--button > .slideshow--nav-button {
  color: rgba(var(--color-foreground), 0.9);
  background: transparent;
  margin: 0;
}
.slideshow--slider.slider--controls--button > .slideshow--nav-button:hover {
  color: var(--slider-button-color);
  background: var(--slider-button-background);
}
.slideshow--slider .slideshow--bullet-button {
  position: unset;
  width: unset;
  left: auto;
  line-height: 0;
}
.slide__placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%);
  width: 100%;
  fill: currentColor;
}
.banner__heading > span {
  display: block;
}
.banner__heading.line--normal > span {
  line-height: 1.2;
}
.banner__heading.line--high > span {
  line-height: 1.3;
}
@media only screen and (min-width: 1200px) {
  .slideshow__text .h0 {
    font-size: 9.6rem;
  }
  .slideshow__text .h1 {
    font-size: 7rem;
  }
  .slideshow__text .h2 {
    font-size: 5rem;
  }
  .slide__placeholder {
    transform: translate(-30%, -50%);
  }
  .banner__heading.line--normal > span {
    line-height: 1;
  }
  .banner__heading.line--high > span {
    line-height: 1.5;
  }
}
@media only screen and (max-width: 749px) {
  .slide__placeholder {
    transform: translate(-50%, -50%);
  }
  .slider-mobile--media.placeholder {
    height: auto;
    background: transparent;
  }

  .slider-mobile--media {
    position: relative;
    overflow: hidden;
    display: block;
  }
  .slider-mobile--media > * {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center center;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .slideshow__mobile--media--large {
    min-height: 39rem;
  }
  .slideshow__mobile--media--medium {
    min-height: 34rem;
  }
  .slideshow__mobile--media--small {
    min-height: 28rem;
  }
  .slideshow__text-wrapper.show_content--on-image {
    display: flex;
    height: 100%;
    flex-direction: column;
    flex-grow: 1;
    right: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }
  .slideshow--slider.slider--controls--button.slideshow--mobile-navs-hide,
  .slideshow--mobile-dots-hide {
    display: none;
  }
  .slideshow--slider.slider--controls--bullet {
    margin-top: 15px;
  }
}
.banner__text {
  color: rgba(var(--color-foreground));
}
.slideshow--banner-button {
  margin-top: 2.5rem;
}
.slideshow--slider.slider--controls--button {
  margin: 0;
}
.banner__text > span {
  display: block;
}
.slideshow__text .banner__text {
  font-size: 1.7rem;
}

/* Slider navigate controls  */
.slideshow--controls--inner {
  display: flex;
  align-items: center; /* Default vertical alignment for arrows/dots */
  gap: 0; /* Remove any default gap */
  pointer-events: auto; /* Re-enable clicks on controls */
}
.slideshow--slider .slideshow--nav-button {
  /* Use absolute positioning and transform centering so buttons align regardless of container flow */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 0.8rem;
  height: 2.2rem; /* Fixed height to match dots for proper alignment */
  color: rgba(var(--color-foreground));
  width: auto;
  display: inline-flex; /* Enable flex for proper alignment */
  align-items: center; /* Center SVG vertically inside button */
  justify-content: center; /* Center SVG horizontally inside button */
  line-height: 1; /* Ensure consistent line height */
  pointer-events: auto; /* Allow clicks */
}
.slideshow--nav-button:after {
  display: none;
}
.slideshow--slider .slideshow--bullet-button {
  position: unset;
  width: unset;
  line-height: 1; /* Changed from 0 to allow proper vertical alignment */
  height: 2.2rem; /* Fixed height to match nav buttons */
  padding: 0 0.6rem;
  display: inline-flex; /* Enable flex for proper alignment */
  align-items: center; /* Center dots vertically */
  gap: 0.6rem; /* Consistent spacing between all dots */
}
.slideshow--bullet-button.pagination--dots .swiper-pagination-bullet {
  background: transparent;
  width: 1.8rem;
  height: 1.8rem;
  opacity: 1;
  text-indent: -9999px;
}
@media only screen and (min-width: 750px) {
  .slideshow--bullet-button.pagination--dots .swiper-pagination-bullet {
    width: 2.2rem;
    height: 2.2rem;
  }
}
.slideshow--bullet-button.pagination--dots .swiper-pagination-bullet {
  border: 0.2rem solid rgba(var(--color-foreground));
}
.slideshow--bullet-button .swiper-pagination-bullet {
  margin: 0; /* Reset margins - using gap on parent instead */
}
.slideshow--bullet-button
  .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  background-color: rgba(var(--color-foreground));
}
.slideshow--bullet-button .swiper-pagination-bullet {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.slideshow--bullet-button .swiper-pagination-bullet:before {
  position: absolute;
  background-color: transparent;
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  left: 50%;
  border-radius: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.slideshow--slider .slideshow--nav-button > svg {
  width: 0.8rem;
  height: auto;
  display: block; /* Ensure SVG doesn't add extra spacing */
  flex-shrink: 0; /* Prevent SVG from shrinking */
}
.slideshow--bullet-button.pagination--dots
  .swiper-pagination-bullet:focus-visible {
  outline-color: red;
}
@media only screen and (min-width: 750px) {
  .slideshow--slider.slider--controls--button {
    position: absolute;
    bottom: 3.5rem;
    z-index: 1;
    inset-inline: 3rem;
  }
  .slideshow__text .banner__text {
    font-size: 2rem;
  }
  .slideshow--bullet-button .swiper-pagination-bullet::before {
    width: 1rem;
    height: 1rem;
  }
}
@media only screen and (max-width: 749px) {
  .slideshow--controls--inner:not(.slideshow--controls-false) {
    padding: 0;
    justify-content: center !important;
  }
  
  /* Adjust navigation button and dot heights for mobile */
  .slideshow--slider .slideshow--nav-button {
    height: 1.8rem;
  }
  
  .slideshow--slider .slideshow--bullet-button {
    height: 1.8rem;
  }
  
  /* Hide numbers from ALL pagination bullets on mobile - show dots only */
  /* The renderBullet JS function adds numbers inside all bullets */
  .slideshow--bullet-button .swiper-pagination-bullet {
    font-size: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }
  
  /* Specific styles for dots pagination on mobile */
  .slideshow--bullet-button.pagination--dots .swiper-pagination-bullet {
    width: 1.4rem !important;
    height: 1.4rem !important;
    background: transparent !important;
    border: 0.2rem solid rgba(var(--color-foreground)) !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
    position: relative !important;
  }
  
  .slideshow--bullet-button.pagination--dots .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1 !important;
  }
  
  .slideshow--bullet-button.pagination--dots .swiper-pagination-bullet::before {
    content: "" !important;
    position: absolute !important;
    width: 0.6rem !important;
    height: 0.6rem !important;
    background: transparent !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .slideshow--bullet-button.pagination--dots .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    background: rgba(var(--color-foreground)) !important;
  }
  
  /* Hide numbers from pagination--numbers on mobile - convert to dots */
  .slideshow--bullet-button.pagination--numbers .swiper-pagination-bullet {
    font-size: 0 !important;
    text-indent: -9999px;
    width: 1.4rem !important;
    height: 1.4rem !important;
    background: transparent !important;
    border: 0.2rem solid rgba(var(--color-foreground)) !important;
    border-radius: 50% !important;
    opacity: 0.6 !important;
    position: relative !important;
  }
  
  .slideshow--bullet-button.pagination--numbers .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1 !important;
  }
  
  .slideshow--bullet-button.pagination--numbers .swiper-pagination-bullet::before {
    content: "" !important;
    position: absolute !important;
    width: 0.6rem !important;
    height: 0.6rem !important;
    background: transparent !important;
    border-radius: 50% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  
  .slideshow--bullet-button.pagination--numbers .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
    background: rgba(var(--color-foreground)) !important;
  }
  
  /* Hide counter pagination text on mobile - show dots only */
  .slideshow--bullet-button.pagination--counter {
    font-size: 0 !important;
  }
  
  .slideshow--bullet-button.pagination--counter .swiper-pagination-current,
  .slideshow--bullet-button.pagination--counter .swiper-pagination-total {
    display: none !important;
  }

  /* Fix horizontal overflow - prevent seeing all slides when zooming out on mobile (iOS Safari fix) */
  [data-section-type="slideShow"] {
    overflow: hidden !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    position: relative !important;
    max-width: 100vw !important;
    width: 100% !important;
    clip-path: inset(0) !important;
    -webkit-clip-path: inset(0) !important;
  }
  
  .slideshow__wrapper.swiper {
    overflow: hidden !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    clip-path: inset(0) !important;
    -webkit-clip-path: inset(0) !important;
  }
  
  .swiper-wrapper {
    overflow: visible !important;
    width: 100% !important;
  }
  
  .swiper-slide {
    overflow: hidden !important;
    flex-shrink: 0 !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  
  /* Prevent any transforms from extending beyond viewport */
  .slideshow__media,
  .slideshow__banner {
    overflow: hidden !important;
    max-width: 100% !important;
  }
}

/* Global iOS overflow fix - applies to html/body on mobile */
@media only screen and (max-width: 749px) {
  html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
    width: 100% !important;
  }
  
  /* Ensure main page wrapper doesn't allow horizontal scroll */
  .shopify-section,
  #MainContent,
  main {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  /* Shopify section containing slideshow */
  .shopify-section:has([data-section-type="slideShow"]) {
    overflow: hidden !important;
    max-width: 100vw !important;
    clip-path: inset(0) !important;
    -webkit-clip-path: inset(0) !important;
  }
}
/* New css */
.slideshow--navigation {
  display: inline-flex;
}

.navigation--button-style-split {
  .slideshow--controls--inner {
    justify-content: space-between;
  }

  .slideshow--navigation {
    background: rgba(var(--color-background));
    z-index: 1;
    height: auto;
    color: rgba(var(--color-foreground));
    border-radius: 2rem;
    gap: 1.2rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    @media only screen and (min-width: 750px) {
      box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
    }

    .slideshow--nav-button {
      padding: 0;
      transition: all 0.2s ease;
      
      &:hover {
        opacity: 0.8;
      }
    }

    .swiper-button-prev.slideshow--nav-button {
      padding-inline-start: 1.2rem;
      padding-block: 0.7rem;
    }

    .swiper-button-next.slideshow--nav-button {
      padding-inline-end: 1.2rem;
      padding-block: 0.7rem;
    }
  }

  .swiper-pagination.slideshow--bullet-button {
    padding: 0;
  }
}

.banner__buttons.slideshow--banner-button {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;

  @media only screen and (max-width: 749px) {
    gap: 1rem;
    justify-content: center;
  }
}

/* Outer slideshow container - positioning context */
[data-section-type="slideShow"] {
  position: relative; /* Contains absolutely positioned controls */
}

/* Desktop: Position controls absolutely over slideshow */
@media only screen and (min-width: 750px) {
  .slideshow--slider {
    position: absolute; /* Position over the slideshow */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* Enable flexbox for vertical positioning */
    pointer-events: none; /* Allow clicks through to slides */
    z-index: 10; /* Above slides */
  }
}

.slideshow--slider {
  .navigation--icon-long_arrow {
    .slideshow--nav-button {
      > svg {
        width: 3.5rem;
        height: auto;
        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.2s ease;
        opacity: 0.5;
      }

      &:hover > svg {
        transform: scaleX(1.1);
        opacity: 1;
      }
    }
  }
}

/* Enhanced blend modes for navigation controls */
.slideshow--navigation {
  transition: all 0.3s ease;
}

/* Inline button style enhancements */
.navigation--button-style-inline {
  .slideshow--nav-button {
    transition: opacity 0.2s ease; /* Only transition opacity */
    
    &:hover {
      opacity: 0.7; /* Just fade effect, no transform */
    }
  }

  /* Horizontal inline navigation - ensure proper alignment using flexbox */
  &.navigation--direction-horizontal {
    .slideshow--controls--inner {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important; /* Vertically center all items */
      justify-content: center !important;
      gap: 1.5rem !important;
      height: auto !important;
      
      /* Background styling now controlled by Liquid settings */
      @media only screen and (min-width: 750px) {
        /* Styles are set via inline styles in Liquid */
      }
    }

    /* Previous arrow - properly centered with dots */
    .swiper-button-prev.slideshow--nav-button {
      position: relative !important;
      top: auto !important;
      transform: none !important;
      align-self: center !important;
      margin: 0 !important;
      padding: 0 0.5rem !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 2.2rem !important; /* Match dots height */
      line-height: 1 !important;
    }

    /* Pagination - center aligned with arrows */
    .swiper-pagination.slideshow--bullet-button {
      position: relative !important;
      align-self: center !important;
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 0.5rem !important;
      margin: 0 !important;
      padding: 0 !important;
      height: 2.2rem !important; /* Match arrow height */
      line-height: 1 !important;
    }

    /* Next arrow - properly centered with dots */
    .swiper-button-next.slideshow--nav-button {
      position: relative !important;
      top: auto !important;
      transform: none !important;
      align-self: center !important;
      margin: 0 !important;
      padding: 0 0.5rem !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      height: 2.2rem !important; /* Match dots height */
      line-height: 1 !important;
    }

    /* All navigation buttons - ensure vertical centering */
    .slideshow--nav-button {
      position: relative !important;
      z-index: 2 !important;
      vertical-align: middle !important;
    }

    /* Ensure SVG icons are centered within buttons */
    .slideshow--nav-button svg {
      display: block !important;
      margin: 0 auto !important;
      vertical-align: middle !important;
    }

    /* Pagination dots container */
    .slideshow--bullet-button {
      position: relative !important;
      z-index: 1 !important;
      vertical-align: middle !important;
    }

    /* Individual pagination bullets - ensure centered alignment */
    .swiper-pagination-bullet {
      margin: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      vertical-align: middle !important;
    }
    
    /* Ensure bullets spacing is horizontal only */
    .swiper-pagination-bullet + .swiper-pagination-bullet {
      margin-left: 0.8rem !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
    }
  }
}

.navigation--button-style-split {
  .slideshow--bullet-button {
    & .swiper-pagination-bullet {
      @media only screen and (min-width: 750px) {
        width: 2rem;
        height: 2rem;
        &:before {
          width: 1.2rem;
          height: 1.2rem;
        }
      }
    }
  }

  .slideshow--navigation.navigation--icon-chevron {
    .swiper-button-prev.slideshow--nav-button {
      padding-inline-start: 1.5rem;
      padding-inline-end: 0.5rem;
    }

    .swiper-button-next.slideshow--nav-button {
      padding-inline-end: 1.5rem;
      padding-inline-start: 0.5rem;
    }

    .slideshow--nav-button {
      > svg {
        opacity: 0.5;
        transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
      }

      &:hover > svg {
        opacity: 1;
      }
    }
  }
}
.navigation--button-style-split .slideshow--controls--inner {
  gap: 1rem;
  padding-block-end: 1rem;
}

/* Split style - Horizontal navigation alignment */
.navigation--button-style-split.navigation--direction-horizontal {
  .slideshow--controls--inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem !important;
    height: auto !important;
  }

  .slideshow--nav-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .slideshow--bullet-button {
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .slideshow--navigation {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .swiper-pagination.slideshow--bullet-button {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: auto !important;
    line-height: 1 !important;
  }

  .swiper-pagination-bullet {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

.slideshow--navigation.navigation--icon-small_arrow
  .slideshow--nav-button
  > svg,
.slideshow--controls--inner.navigation--icon-small_arrow
  .slideshow--nav-button
  > svg {
  width: 2rem;
}

.navigation--button-style-split
  .slideshow--navigation.navigation--icon-small_arrow {
  max-height: 3rem;
}

/* ==================== NAVIGATION DIRECTION STYLES ==================== */
/* Navigation direction is now independent from slide transition effects */
/* Merchants can choose horizontal or vertical navigation layout regardless of slide direction */

/* Vertical Navigation Direction (↑ dots ↓) */
.slideshow--slider.navigation--direction-vertical {
  .slideshow--controls--inner {
    flex-direction: column;
    align-items: center; /* Center all children horizontally in vertical mode */
    gap: 2rem !important; /* Increased gap to prevent overlap */
    width: auto !important; /* Auto width to fit content */
    display: inline-flex !important; /* Inline-flex to shrink-wrap content */
  }

  .slideshow--navigation {
    flex-direction: column;
    gap: 1.8rem; /* Increased gap between arrows */
    align-items: center;
    width: auto !important; /* Auto width to align with dots */
    display: flex !important; /* Ensure it's flex */
  }

  /* Fix pagination dots alignment for vertical */
  .swiper-pagination.slideshow--bullet-button {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important; /* Center within parent flex container */
    width: auto !important;
    height: auto !important;
    position: static !important; /* Use static to stay in flex flow */
    margin: 0 !important; /* Remove margin - gap handles spacing */
    padding: 0 !important; /* Remove any padding */
    gap: 1rem !important; /* Increased space between dots */
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important; /* Remove any transforms */
  }

  .swiper-pagination-bullet {
    margin: 0 !important; /* Remove all margins - gap handles spacing */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important; /* Center each bullet */
    position: relative !important;
    flex-shrink: 0 !important; /* Prevent bullets from shrinking */
  }

  /* Override horizontal bullet spacing for vertical layout */
  .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left: 0 !important; /* Remove horizontal spacing */
    margin-top: 0 !important; /* Remove vertical spacing - gap handles it */
    margin-right: 0 !important; /* Remove any right margin */
    margin-bottom: 0 !important; /* Remove any bottom margin */
  }
  
  /* Navigation buttons alignment */
  .swiper-button-prev.slideshow--nav-button,
  .swiper-button-next.slideshow--nav-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important; /* Center within parent flex container */
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important; /* Prevent buttons from shrinking */
    width: auto !important; /* Let button size itself based on content */
    position: relative !important; /* Override absolute positioning */
    left: auto !important;
    right: auto !important;
    top: 1rem !important; /* Offset to align with dots */
    bottom: auto !important;
  }

  /* Ensure SVG icons are centered */
  .swiper-button-prev.slideshow--nav-button svg,
  .swiper-button-next.slideshow--nav-button svg {
    display: block !important;
    margin: 0 auto !important;
  }

  /* Inline style vertical adjustments */
  &.navigation--button-style-inline {
    .slideshow--controls--inner {
      display: inline-flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: auto !important;
      /* Padding controlled by Liquid settings now - removed inline override */
    }

    .swiper-button-prev.slideshow--nav-button {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      margin: 0; /* Remove margin - gap handles spacing */
    }

    .swiper-button-next.slideshow--nav-button {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      margin: 0; /* Remove margin - gap handles spacing */
    }
  }

  /* Split style vertical adjustments */
  &.navigation--button-style-split {
    .slideshow--navigation {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 1.8rem; /* Increased gap to match main navigation gap */
      padding: 0 !important; /* Remove padding to align with dots */
      width: auto !important; /* Auto width to align with dots */
    }

    .swiper-button-prev.slideshow--nav-button,
    .swiper-button-next.slideshow--nav-button {
      padding: 0 !important; /* Remove all padding for clean alignment */
    }

    .slideshow--navigation.navigation--icon-chevron {
      .swiper-button-prev.slideshow--nav-button,
      .swiper-button-next.slideshow--nav-button {
        padding: 0 !important; /* Remove all padding for chevron style too */
      }
    }
  }

  /* Rotate arrows for vertical direction - prev becomes up, next becomes down */
  .swiper-button-prev.slideshow--nav-button svg {
    transform: rotate(90deg);
  }

  .swiper-button-next.slideshow--nav-button svg {
    transform: rotate(90deg);
  }

  /* Hover states for vertical */
  .navigation--icon-long_arrow .slideshow--nav-button:hover > svg {
    transform: rotate(90deg) scaleX(1.1);
  }

  .navigation--icon-small_arrow .slideshow--nav-button:hover > svg {
    transform: rotate(90deg) scale(1.1);
  }

  .navigation--icon-chevron .slideshow--nav-button:hover > svg {
    transform: rotate(90deg) scale(1.1);
  }
}

/* Horizontal Navigation Direction (← dots →) - Default */
.slideshow--slider.navigation--direction-horizontal {
  /* Default horizontal layout for navigation controls */
  .slideshow--controls--inner {
    flex-direction: row !important;
    align-items: center !important; /* Keep arrows and dots aligned vertically */
    gap: 0; /* Ensure no gap - spacing handled by padding */
  }

  .slideshow--navigation {
    flex-direction: row;
    display: inline-flex;
    align-items: center;
  }

  /* Navigation buttons - ensure proper vertical centering and remove all vertical padding */
  .slideshow--nav-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
  }

  /* Override any specific icon padding in horizontal mode */
  .swiper-button-prev.slideshow--nav-button,
  .swiper-button-next.slideshow--nav-button {
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
  }

  .navigation--icon-chevron .swiper-button-prev.slideshow--nav-button,
  .navigation--icon-chevron .swiper-button-next.slideshow--nav-button {
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
  }

  /* Ensure pagination dots display horizontally and vertically centered */
  .swiper-pagination.slideshow--bullet-button {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    line-height: 1 !important; /* Override line-height: 0 */
    margin: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
    gap: 0.6rem !important; /* Consistent spacing between all dots */
  }

  /* Ensure bullets are inline and centered */
  .swiper-pagination-bullet {
    display: inline-block !important;
    margin: 0 !important;
  }

  /* Remove margins - using gap on parent for consistent spacing */
  .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Universal Positioning System - Works for both horizontal and vertical navigation */
/* Applied to .slideshow--slider parent based on classes on .slideshow--controls--inner child */
/* Horizontal positioning (justify-content: left/center/right) */
.slideshow--slider:has(.slideshow--controls--inner.justify-content-start) {
  justify-content: flex-start !important;
}

.slideshow--slider:has(.slideshow--controls--inner.justify-content-center) {
  justify-content: center !important;
}

.slideshow--slider:has(.slideshow--controls--inner.justify-content-end) {
  justify-content: flex-end !important;
}

/* Vertical positioning (align-items: top/center/bottom) */
.slideshow--slider:has(.slideshow--controls--inner.align-items-start) {
  align-items: flex-start !important;
}

.slideshow--slider:has(.slideshow--controls--inner.align-items-center) {
  align-items: center !important;
}

.slideshow--slider:has(.slideshow--controls--inner.align-items-end) {
  align-items: flex-end !important;
}

/* Mobile adjustments for vertical navigation */
@media only screen and (max-width: 749px) {
  .slideshow--slider.navigation--direction-vertical {
    /* align-items removed - controlled by universal positioning classes */

    .slideshow--navigation {
      gap: 0.8rem;
    }
  }

  /* Mobile-specific navigation direction override */
  /* If mobile transition is horizontal, force horizontal navigation on mobile */
  /* Increased specificity to override desktop classes */
  /* MOBILE NAVIGATION - OVERLAY MODE (default) */
  /* When parent has data-mobile-navigation-placement="overlay" OR doesn't have "below" */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"] {
    /* Override desktop vertical navigation for mobile horizontal */
    /* OVERLAY: Keep absolute positioning over the slideshow */
    position: absolute !important;
    width: 100% !important;
    display: flex !important;
    z-index: 999 !important; /* Very high z-index to ensure it's on top */
    pointer-events: none !important; /* Let clicks through container */
    
    /* Position will be controlled by data attributes and inline styles */
    /* Don't override padding - let inline styles from Liquid control it */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    justify-content: center !important;
    align-items: flex-end !important;
    
    .slideshow--controls--inner {
      display: flex !important; /* Ensure flex display */
      flex-direction: row !important; /* Horizontal layout */
      gap: 1rem !important; /* Space between arrows and dots */
      align-items: center !important; /* Vertically center items */
      justify-content: center !important; /* Horizontally center by default */
      pointer-events: auto !important; /* Enable clicks on controls */
      width: auto !important; /* Don't stretch */
      line-height: 1 !important; /* Consistent line height */
      
      /* Ensure all direct children are vertically centered */
      > * {
        align-self: center !important;
      }
    }

    .slideshow--navigation {
      display: flex !important;
      flex-direction: row !important;
      gap: 1rem !important; /* Gap between prev/next arrows */
      align-items: center !important;
      pointer-events: auto !important; /* Enable clicks on navigation */
    }
    
    /* Ensure pagination dots are horizontal */
    .swiper-pagination.slideshow--bullet-button {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0.8rem !important;
    }
    
    /* Ensure all interactive elements can be clicked and vertically aligned */
    .swiper-button-prev,
    .swiper-button-next,
    .swiper-pagination,
    .swiper-pagination-bullet {
      pointer-events: auto !important;
    }
    
    /* Fix vertical alignment of arrow buttons */
    .swiper-button-prev.slideshow--nav-button,
    .swiper-button-next.slideshow--nav-button {
      position: static !important; /* Remove absolute positioning */
      margin: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      align-self: center !important; /* Center within parent flex container */
      top: auto !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      line-height: 1 !important; /* Consistent line height */
      height: auto !important;
    }
    
    /* Fix SVG alignment within buttons */
    .swiper-button-prev.slideshow--nav-button svg,
    .swiper-button-next.slideshow--nav-button svg {
      display: block !important;
    }
    
    /* Ensure pagination container is vertically centered */
    .swiper-pagination.slideshow--bullet-button {
      align-self: center !important; /* Center within parent flex container */
      line-height: 1 !important; /* Override line-height: 0 */
    }
    
    /* Ensure pagination bullets are vertically centered */
    .swiper-pagination-bullet {
      margin: 0 !important;
      align-self: center !important;
    }

    /* Reset arrow rotation - make them point left/right instead of up/down */
    .swiper-button-prev.slideshow--nav-button svg {
      transform: rotate(0deg) !important; /* Left arrow */
    }

    .swiper-button-next.slideshow--nav-button svg {
      transform: rotate(0deg) !important; /* Right arrow */
    }

    /* Reset hover states for horizontal arrows */
    &.navigation--icon-long_arrow .slideshow--nav-button:hover > svg {
      transform: scaleX(1.1) !important; /* No rotation on hover */
    }

    &.navigation--icon-small_arrow .slideshow--nav-button:hover > svg {
      transform: scale(1.1) !important; /* No rotation on hover */
    }

    &.navigation--icon-chevron .slideshow--nav-button:hover > svg {
      transform: scale(1.1) !important; /* No rotation on hover */
    }

    .swiper-pagination.slideshow--bullet-button {
      display: flex !important;
      flex-direction: row !important; /* Horizontal dots */
      align-items: center !important; /* Vertically center bullets */
      justify-content: center !important;
      width: auto !important;
      height: auto !important;
      position: static !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0.8rem !important; /* Space between dots horizontally */
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      transform: none !important;
    }

    .swiper-pagination-bullet {
      margin: 0 !important;
      display: inline-flex !important; /* Use inline-flex for better alignment */
      position: relative !important;
      align-self: center !important; /* Center within flex container */
    }

    .swiper-pagination-bullet + .swiper-pagination-bullet {
      margin-left: 0 !important;
      margin-top: 0 !important;
    }

    /* Reset inline style adjustments for horizontal mode */
    &.navigation--button-style-inline {
      .slideshow--controls--inner {
        flex-direction: row !important;
      }
    }
  }
  
  /* ==================== MOBILE NAVIGATION POSITIONING ==================== */
  /* Override default positioning based on mobile position settings */
  
  /* HORIZONTAL POSITION - LEFT */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="left"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="left"] {
    justify-content: flex-start !important;
    /* Padding controlled by inline styles */
  }
  
  /* HORIZONTAL POSITION - CENTER */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="center"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="center"] {
    justify-content: center !important;
    /* Padding controlled by inline styles */
  }
  
  /* HORIZONTAL POSITION - RIGHT */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="right"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="right"] {
    justify-content: flex-end !important;
    /* Padding controlled by inline styles */
  }
  
  /* VERTICAL POSITION - TOP */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-vertical="top"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-vertical="top"] {
    top: 0 !important;
    bottom: auto !important;
    align-items: flex-start !important;
    /* Padding controlled by inline styles */
  }
  
  /* VERTICAL POSITION - CENTER */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-vertical="center"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-vertical="center"] {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    align-items: center !important;
    /* Padding controlled by inline styles */
  }
  
  /* VERTICAL POSITION - BOTTOM (default) */
  [data-mobile-navigation-placement="overlay"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-vertical="bottom"],
  [data-section-type="slideShow"]:not([data-mobile-navigation-placement="below"]) .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-vertical="bottom"] {
    top: auto !important;
    bottom: 0 !important;
    align-items: flex-end !important;
    /* Padding controlled by inline styles */
  }

  /* MOBILE NAVIGATION - BELOW IMAGE MODE */
  [data-mobile-navigation-placement="below"] .slideshow--slider.navigation--direction-vertical[data-navigation-direction-mobile="horizontal"],
  [data-mobile-navigation-placement="below"] .slideshow--slider.navigation--direction-horizontal[data-navigation-direction-mobile="horizontal"],
  [data-mobile-navigation-placement="below"] .slideshow--slider[data-navigation-direction-mobile="horizontal"] {
    /* BELOW: Position navigation outside/below the slideshow */
    position: relative !important; /* Change from absolute to relative */
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    margin-top: 2rem !important; /* Space above navigation when below image */
    display: flex !important;
    justify-content: center !important; /* Default center, can be overridden */
    align-items: center !important;
    padding-bottom: 0 !important; /* No bottom padding needed */
    z-index: 10 !important;
    pointer-events: auto !important;
    
    .slideshow--controls--inner {
      flex-direction: row !important;
      gap: 1rem !important;
      align-items: center !important;
      pointer-events: auto !important;
    }

    .slideshow--navigation {
      flex-direction: row !important;
      gap: 1rem !important;
    }

    /* Arrows point left/right */
    .swiper-button-prev.slideshow--nav-button svg {
      transform: rotate(0deg) !important;
    }

    .swiper-button-next.slideshow--nav-button svg {
      transform: rotate(0deg) !important;
    }

    &.navigation--icon-long_arrow .slideshow--nav-button:hover > svg {
      transform: scaleX(1.1) !important;
    }

    &.navigation--icon-small_arrow .slideshow--nav-button:hover > svg {
      transform: scale(1.1) !important;
    }

    &.navigation--icon-chevron .slideshow--nav-button:hover > svg {
      transform: scale(1.1) !important;
    }

    .swiper-pagination.slideshow--bullet-button {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      width: auto !important;
      height: auto !important;
      position: static !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0.8rem !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      transform: none !important;
    }

    .swiper-pagination-bullet {
      margin: 0 !important;
      display: inline-block !important;
      position: relative !important;
    }

    .swiper-pagination-bullet + .swiper-pagination-bullet {
      margin-left: 0 !important;
      margin-top: 0 !important;
    }

    &.navigation--button-style-inline {
      .slideshow--controls--inner {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
      }

      .swiper-button-prev.slideshow--nav-button,
      .swiper-button-next.slideshow--nav-button {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
      }
    }
  }
  
  /* BELOW MODE - HORIZONTAL POSITIONING */
  /* These rules apply when navigation is below the image */
  
  /* HORIZONTAL POSITION - LEFT (below mode) */
  [data-mobile-navigation-placement="below"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="left"] {
    justify-content: flex-start !important;
    /* Padding controlled by inline styles */
  }
  
  /* HORIZONTAL POSITION - CENTER (below mode) */
  [data-mobile-navigation-placement="below"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="center"] {
    justify-content: center !important;
    /* Padding controlled by inline styles */
  }
  
  /* HORIZONTAL POSITION - RIGHT (below mode) */
  [data-mobile-navigation-placement="below"] .slideshow--slider[data-navigation-direction-mobile="horizontal"][data-mobile-position-horizontal="right"] {
    justify-content: flex-end !important;
    /* Padding controlled by inline styles */
  }

  /* If mobile transition is vertical, force vertical navigation on mobile */
  /* Increased specificity to override desktop classes */
  .slideshow--slider.navigation--direction-horizontal[data-navigation-direction-mobile="vertical"],
  .slideshow--slider.navigation--direction-vertical[data-navigation-direction-mobile="vertical"],
  .slideshow--slider[data-navigation-direction-mobile="vertical"] {
    /* Apply vertical styles even if desktop is horizontal */
    .slideshow--controls--inner {
      flex-direction: column !important;
      align-items: center !important;
      gap: 3rem !important; /* Gap between arrows and dots */
    }

    .slideshow--navigation {
      flex-direction: column !important;
      gap: 1.2rem !important;
    }

    .swiper-pagination.slideshow--bullet-button {
      display: flex !important;
      flex-direction: column !important; /* Vertical dots */
      align-items: center !important;
      width: auto !important;
      height: auto !important;
      position: static !important;
      margin: 0 !important;
      padding: 0 !important;
      gap: 0.8rem !important; /* Space between dots vertically */
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      top: auto !important;
      transform: none !important;
    }

    .swiper-pagination-bullet {
      margin: 0 !important;
      display: block !important;
      position: relative !important;
    }

    .swiper-pagination-bullet + .swiper-pagination-bullet {
      margin-left: 0 !important;
      margin-top: 0 !important;
    }

    /* Inline style vertical adjustments */
    &.navigation--button-style-inline {
      .slideshow--controls--inner {
        flex-direction: column !important;
        align-items: center !important;
      }

      .swiper-button-prev.slideshow--nav-button,
      .swiper-button-next.slideshow--nav-button {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
      }
    }
  }
}


/* Slide Vertical Effect - Fix container height to prevent page stretching */
.swiper.slideshow__wrapper[data-vertical-slides="true"] {
  height: 600px; /* Default height for vertical slides */
  max-height: 90vh; /* Respect viewport height */
}

/* Ensure slideshow wrapper handles height transitions smoothly for all slide changes */
.swiper.slideshow__wrapper {
  /* Preserve transform transitions (used by Swiper) and also transition height */
  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Ensure swiper-wrapper has proper height & transform handling - include transform to avoid abrupt jumps */
.swiper.slideshow__wrapper .swiper-wrapper {
  transition: transform 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Smooth transitions for vertical slides */
.swiper.slideshow__wrapper[data-vertical-slides="true"] .swiper-wrapper {
  transition-timing-function: ease-in-out !important;
}

.swiper.slideshow__wrapper[data-vertical-slides="true"] .swiper-slide {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

@media only screen and (max-width: 749px) {
  /* Vertical slides: Fixed height */
  .swiper.slideshow__wrapper[data-vertical-slides="true"] {
    height: 500px;
    max-height: 80vh;
  }
  
  /* ==================== MOBILE NON-VERTICAL SLIDES - AUTO HEIGHT ==================== */
  /* Let Swiper's autoHeight handle the height recalculation dynamically */
  /* Remove height overrides to allow Swiper.js updateAutoHeight() to work */
  
  /* Ensure slides layout properly for autoHeight */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .swiper-slide {
    width: 100% !important;
    flex-shrink: 0 !important;
    padding-bottom: 5rem !important; /* Space for navigation controls below button */
  }
  
  /* Slide inner container - flex column layout */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .swiper-slide > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  
  /* Media container - position relative for absolute children */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__media {
    position: relative !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  
  /* Images and videos - maintain aspect ratio */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__media img,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__media video {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }
  
  /* 7. Text wrapper - ensure it contributes to height calculation */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text-wrapper {
    position: relative !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    width: 100% !important;
  }
  
  /* 8. Text content box - full visibility with proper padding */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 2rem 1.5rem !important;
  }
  
  /* 9. Headings, paragraphs - no height restrictions */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text h1,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text h2,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text p {
    max-height: none !important;
    overflow: visible !important;
  }
  
  /* 10. Buttons - proper spacing */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text .button-wrapper,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text .button,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text a {
    margin-top: 1.5rem !important;
    display: inline-block !important;
  }
  
  /* ==================== NAVIGATION PLACEMENT PADDING (REMOVED to avoid double-spacing) ==================== */
  /* We now calculate section height in JS, including overlay nav height when necessary. */
  /* Remove large bottom padding that used to reserve space for controls and caused huge gaps. */
  
  /* BOX SIZING: Ensure padding is included in height calculations */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .swiper-slide,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .swiper-slide > div,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__media,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text-wrapper,
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) .slideshow__text {
    box-sizing: border-box !important;
  }
}

/* For slide-vertical with specific slide heights */
.slideshow__wrapper--vertical-small {
  height: 400px !important;
}

.slideshow__wrapper--vertical-medium {
  height: 600px !important;
}

.slideshow__wrapper--vertical-large {
  height: 800px !important;
}

@media only screen and (max-width: 749px) {
  .slideshow__wrapper--vertical-small,
  .slideshow__wrapper--vertical-medium,
  .slideshow__wrapper--vertical-large {
    height: 500px !important;
  }
}

/* Additional mobile overrides to prevent clipping of text/buttons */
@media only screen and (max-width: 749px) {
  /* Nav buttons should sit at the bottom on mobile (remove translate centering) */
  .slideshow--nav-button {
    top: auto !important;
    bottom: 1.2rem !important;
    transform: none !important;
  }

  /* Allow the text wrapper to flow and expand on mobile so content isn't clipped */
  .slideshow__text-wrapper.show_content--on-image {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    padding: 1.5rem !important;
    z-index: 9;
  }

  /* Don't absolutely position the media children on mobile so the slide can grow with content */
  .slider-mobile--media > * {
    position: relative !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Allow wrapper to grow and not hide overflowing text/buttons */
  .swiper.slideshow__wrapper:not([data-vertical-slides="true"]) {
    overflow: visible !important;
  }
}

/* Text Animations - Desktop Only */
@media screen and (min-width: 750px) {
  /* Keyframes for slide-in animation (from bottom) */
  @keyframes slideInFromBottom {
    0% {
      opacity: 0;
      transform: translateY(60px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Keyframes for typewriter animation */
  @keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }

  /* Keyframes for cursor blinking */
  @keyframes blinkCursor {
    from,
    to {
      border-color: transparent;
    }
    50% {
      border-color: currentColor;
    }
  }

  /* Keyframes for button fade in */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Active-slide CSS removed; class-based approach used below to avoid race conditions */

  /* Class-driven header animation (JS toggled) */
  /* Hide headings by default when header slide animation is enabled to avoid initial flash */
  .text-animations-enabled[data-enable-header-slide="true"] .swiper-slide .banner__heading {
    opacity: 0;
    transform: translateY(60px);
  }

  .banner__heading.header-slide-ready {
    opacity: 0 !important;
    transform: translateY(60px) !important;
  }
  .banner__heading.header-slide-in {
    animation: slideInFromBottom 0.8s ease-out forwards !important;
  }

  /* Typewriter effect - container setup */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text {
    display: block;
    overflow: visible;
    position: relative;
  }

  /* Hide paragraph by default to avoid flash; JS will mark active paragraph when ready */
  .text-animations-enabled[data-enable-typewriter="true"] .swiper-slide .banner__text {
    opacity: 0;
  }
  .text-animations-enabled[data-enable-typewriter="true"] .swiper-slide-active .banner__text.typewriter-active {
    opacity: 1;
    transition: opacity 160ms ease;
  }

  /* Per-character typing: baseline hidden */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text .typewriter-char {
    opacity: 0;
    display: inline;
  }

  .text-animations-enabled[data-enable-typewriter="true"] .banner__text .typewriter-char.visible {
    opacity: 1;
    transition: opacity 0.03s linear;
  }
  
  /* ==================== ARABIC TYPEWRITER FOR iPad/TABLET ==================== */
  /* Uses clip-path animation to reveal text progressively without breaking letter connections */
  
  /* Container styling for Arabic tablet */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text.typewriter-arabic-tablet {
    direction: rtl !important;
    unicode-bidi: embed !important;
    text-align: right !important;
  }
  
  /* Hide individual lines initially */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text.typewriter-arabic-tablet .typewriter-arabic-line {
    display: block;
    clip-path: inset(0 0 0 100%);
    -webkit-clip-path: inset(0 0 0 100%);
  }
  
  /* Animate each line when animate class is added - override the hidden state */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text.typewriter-arabic-tablet .typewriter-arabic-line.typewriter-arabic-line-animate {
    animation: arabicTypewriter 2s ease-out forwards !important;
    -webkit-animation: arabicTypewriter 2s ease-out forwards !important;
  }
  
  /* Container without child lines: hide initially, show with animation */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text.typewriter-arabic-tablet.typewriter-arabic-no-children {
    clip-path: inset(0 0 0 100%);
    -webkit-clip-path: inset(0 0 0 100%);
  }
  
  /* When animate class added to container, run the animation */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text.typewriter-arabic-tablet.typewriter-arabic-tablet-animate {
    animation: arabicTypewriter 3s ease-out forwards !important;
    -webkit-animation: arabicTypewriter 3s ease-out forwards !important;
  }
  
  /* Keyframes for Arabic typewriter - reveals from right to left */
  @keyframes arabicTypewriter {
    0% {
      clip-path: inset(0 0 0 100%);
      -webkit-clip-path: inset(0 0 0 100%);
    }
    100% {
      clip-path: inset(0 0 0 0);
      -webkit-clip-path: inset(0 0 0 0);
    }
  }
  
  @-webkit-keyframes arabicTypewriter {
    0% {
      -webkit-clip-path: inset(0 0 0 100%);
      clip-path: inset(0 0 0 100%);
    }
    100% {
      -webkit-clip-path: inset(0 0 0 0);
      clip-path: inset(0 0 0 0);
    }
  }
  
  /* Hide Arabic tablet animation on inactive slides */
  .text-animations-enabled[data-enable-typewriter="true"] .swiper-slide:not(.swiper-slide-active) .banner__text.typewriter-arabic-tablet {
    clip-path: inset(0 0 0 100%) !important;
    -webkit-clip-path: inset(0 0 0 100%) !important;
    animation: none !important;
    -webkit-animation: none !important;
  }
  
  .text-animations-enabled[data-enable-typewriter="true"] .swiper-slide:not(.swiper-slide-active) .banner__text.typewriter-arabic-tablet .typewriter-arabic-line {
    clip-path: inset(0 0 0 100%) !important;
    -webkit-clip-path: inset(0 0 0 100%) !important;
    animation: none !important;
    -webkit-animation: none !important;
  }
    animation: none !important;
    -webkit-animation: none !important;
  }

  /* Cursor element appended/moved via JS */
  .text-animations-enabled[data-enable-typewriter="true"] .banner__text .typewriter-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    vertical-align: -0.1em; /* nudge to better align with text baseline */
    background: currentColor;
    margin-left: 1px;
    animation: blinkCursor 0.75s step-end infinite;
  }

  /* Hide all typewriter content on inactive slides */
  .text-animations-enabled[data-enable-typewriter="true"] .swiper-slide:not(.swiper-slide-active) .banner__text .typewriter-char,
  .text-animations-enabled[data-enable-typewriter="true"] .swiper-slide:not(.swiper-slide-active) .banner__text .typewriter-cursor {
    opacity: 0 !important;
  }

  /* Buttons fade in after all text animations (kept as-is; JS may finish earlier/later) */
  .text-animations-enabled .swiper-slide-active .banner__buttons {
    animation: fadeIn 0.5s ease-in 5s forwards;
    opacity: 0;
  }

  .text-animations-enabled .swiper-slide:not(.swiper-slide-active) .banner__buttons {
    opacity: 0;
  }
}