:root{
  --mb-slides-green:var(--mb-emerald, #173B33);
  --mb-slides-green-dark:var(--mb-emerald-deep, #0F3028);
  --mb-slides-green-soft:var(--mb-emerald, #173B33);
  --mb-slides-ink:var(--mb-black, #000000);
  --mb-slides-panel:var(--mb-emerald-deep, #0F3028);
  --mb-slides-paper:var(--mb-background, #FFFFFF);
  --mb-slides-muted:var(--mb-muted, #687771);
}

/* Base carousel */
.mb-slides-carousel{
  --visible:3;
  position:relative;
  width:min(100%,1600px);
  max-width:1600px;
  margin:0 auto;
  padding:0 78px 54px;
  box-sizing:border-box;
  color:var(--mb-slides-ink);
  font-family:inherit;
  overflow:visible;
}

/* The viewport is the positioning reference for the arrows.
   This prevents dots/content below the cards from pulling the arrows off centre. */
.mb-slides-viewport{
  position:relative;
  overflow:hidden;
  padding:18px 0 28px;
  margin:-18px 0 -28px;
  box-sizing:border-box;
}

.mb-slides-track{
  display:flex;
  align-items:flex-start !important;
  gap:28px;
  height:auto !important;
  min-height:0 !important;
  will-change:transform;
  transition:transform .62s cubic-bezier(.22,.61,.36,1);
  touch-action:pan-y;
}

/* Critical repair: never allow Elementor/theme flex rules to stretch a card. */
.mb-slides-slide{
  position:relative;
  flex:0 0 calc((100% - (var(--visible) - 1)*28px)/var(--visible));
  align-self:flex-start !important;
  min-width:0;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:block !important;
  border:1px solid var(--mb-border,#D9E5DF);
  border-radius:22px;
  overflow:hidden;
  background:var(--mb-slides-ink);
  box-shadow:0 14px 38px rgba(0,0,0,.10);
  isolation:isolate;
  transition:transform .42s ease,opacity .42s ease,box-shadow .42s ease,border-color .42s ease;
}

.mb-slides-card-link{position:absolute;inset:0;z-index:5}

/* The media area owns the image height. The black background can never stretch
   below the image because the media element itself is explicitly sized. */
.mb-slides-media{
  position:relative;
  width:100%;
  aspect-ratio:var(--mb-slides-ratio,4/3);
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  background:var(--mb-black, #000000);
  display:block !important;
  overflow:hidden;
}

.mb-slides-media img{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  display:block !important;
  object-position:center center;
}
.mb-slides-fit-contain img{object-fit:contain !important}
.mb-slides-fit-cover img{object-fit:cover !important}

.mb-slides-content{
  position:relative;
  width:100%;
  height:auto !important;
  min-height:112px;
  box-sizing:border-box;
  padding:18px 22px 20px;
  background:linear-gradient(135deg,var(--mb-emerald-deep, #0F3028) 0%,var(--mb-emerald-deep, #0F3028) 100%);
  color:var(--mb-white, #FFFFFF) !important;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center !important;
}
.mb-slides-content:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--mb-slides-green-soft);
  opacity:.9;
}
.mb-slides-content h3{
  margin:0;
  width:100%;
  color:var(--mb-white, #FFFFFF) !important;
  text-align:center !important;
  font-size:clamp(1rem,1.45vw,1.32rem);
  line-height:1.25;
  letter-spacing:.01em;
  font-weight:700;
}
.mb-slides-content p{
  margin:8px 0 0;
  width:100%;
  color:var(--mb-white, #FFFFFF) !important;
  text-align:center !important;
  line-height:1.5;
  font-size:.92rem;
}
.mb-slides-cta{
  display:inline-flex;
  margin-top:12px;
  color:var(--mb-white, #FFFFFF) !important;
  text-align:center !important;
  font-size:.84rem;
  font-weight:700;
  gap:8px;
  align-items:center;
}

/* Navigation centred against the actual slide viewport, not the whole section. */
.mb-slides-arrow{
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.72);
  background:var(--mb-slides-green);
  color:#fff;
  font-size:38px;
  line-height:1;
  display:grid;
  place-items:center;
  z-index:20;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .2s ease,background .2s ease,box-shadow .2s ease;
}
.mb-slides-arrow:hover{background:var(--mb-slides-green-dark);transform:translateY(-50%) scale(1.06);box-shadow:0 14px 28px rgba(0,0,0,.30)}
.mb-slides-arrow:focus-visible,.mb-slides-dot:focus-visible{outline:3px solid var(--mb-border, #D9E5DF);outline-offset:3px}
.mb-slides-prev{left:14px}.mb-slides-next{right:14px}

.mb-slides-dots{display:flex;justify-content:center;gap:8px;padding-top:30px}
.mb-slides-dot{width:8px;height:8px;border:0;border-radius:99px;background:var(--mb-border, #D9E5DF);padding:0;cursor:pointer;transition:width .25s ease,background .25s ease}
.mb-slides-dot.is-active{width:28px;background:var(--mb-slides-green)}

/* Wider home/product card presentation */
.mb-slides-cards{
  width:min(96vw,1680px);
  max-width:1680px;
}
.mb-slides-cards .mb-slides-slide.is-active{
  border-color:var(--mb-emerald,#173B33);
  box-shadow:0 20px 48px rgba(0,0,0,.14);
}

/* Coverflow */
.mb-slides-coverflow .mb-slides-viewport{overflow:visible}
.mb-slides-coverflow .mb-slides-slide{transform:perspective(900px) rotateY(0deg) scale(.90);opacity:.62}
.mb-slides-coverflow .mb-slides-slide.is-active{transform:perspective(900px) rotateY(0deg) scale(1);opacity:1;box-shadow:0 22px 48px rgba(0,0,0,.17)}
.mb-slides-coverflow .mb-slides-slide.is-before{transform:perspective(900px) rotateY(18deg) scale(.88);transform-origin:right center}
.mb-slides-coverflow .mb-slides-slide.is-after{transform:perspective(900px) rotateY(-18deg) scale(.88);transform-origin:left center}

/* Single feature slideshow */
.mb-slides-single{width:min(100%,1240px);max-width:1240px;padding-left:74px;padding-right:74px}
.mb-slides-single .mb-slides-slide{flex-basis:100%}
.mb-slides-single .mb-slides-content{text-align:center;padding:22px 28px;align-items:center;justify-content:center}
.mb-slides-single .mb-slides-content:before{height:3px;width:100%;top:0;bottom:auto}

@media(max-width:1199px){
  .mb-slides-carousel{--visible:2;width:min(100%,1320px);padding-left:58px;padding-right:58px}
  .mb-slides-cards{width:min(96vw,1320px)}
  .mb-slides-track{gap:20px}
  .mb-slides-slide{flex-basis:calc((100% - (var(--visible) - 1)*20px)/var(--visible))}
  .mb-slides-arrow{width:46px;height:46px;font-size:34px}
  .mb-slides-prev{left:8px}.mb-slides-next{right:8px}
}

@media(max-width:767px){
  .mb-slides-carousel,.mb-slides-cards,.mb-slides-single{--visible:1;width:100%;max-width:none;padding:0 48px 52px}
  .mb-slides-viewport{margin:0;padding:12px 0 26px}
  .mb-slides-track{gap:14px}
  .mb-slides-slide{flex-basis:100%;border-radius:18px}
  .mb-slides-arrow{width:40px;height:40px;font-size:31px;top:50% !important}
  .mb-slides-prev{left:0}.mb-slides-next{right:0}
  .mb-slides-content{padding:16px 18px 18px;min-height:96px}
  .mb-slides-content h3{font-size:1.05rem}
  .mb-slides-content p{font-size:.86rem}
  .mb-slides-dots{padding-top:34px}
  .mb-slides-coverflow .mb-slides-slide.is-before,.mb-slides-coverflow .mb-slides-slide.is-after{transform:perspective(700px) scale(.94);opacity:.75}
}


/* Equal-height product cards + centered white typography.
   JS measures the tallest content panel in each carousel and applies that height
   to every slide, so different titles/descriptions never make cards uneven. */
.mb-slides-carousel .mb-slides-slide{
  display:flex !important;
  flex-direction:column;
}
.mb-slides-carousel .mb-slides-media{
  flex:0 0 auto;
}
.mb-slides-carousel .mb-slides-content{
  flex:0 0 auto;
  width:100%;
}
.mb-slides-carousel .mb-slides-content h3,
.mb-slides-carousel .mb-slides-content p,
.mb-slides-carousel .mb-slides-content .mb-slides-cta{
  color:var(--mb-white, #FFFFFF) !important;
  text-align:center !important;
}

@media(prefers-reduced-motion:reduce){.mb-slides-track,.mb-slides-slide,.mb-slides-dot{transition:none!important}}

/* Maverick Slides 2.2: group-controlled fixed slide height.
   Cards no longer grow to the tallest description; every slide uses the height
   configured on its Slideshow Group. */
.mb-slides-carousel{
  --mb-slides-group-height:var(--mb-slides-height-desktop,34vh);
}
.mb-slides-carousel .mb-slides-viewport{
  padding:0 !important;
  margin:0 !important;
}
.mb-slides-carousel .mb-slides-track{
  align-items:stretch !important;
}
.mb-slides-carousel .mb-slides-slide{
  height:var(--mb-slides-group-height) !important;
  min-height:var(--mb-slides-group-height) !important;
  max-height:var(--mb-slides-group-height) !important;
  align-self:stretch !important;
  display:flex !important;
  flex-direction:column;
}
.mb-slides-carousel .mb-slides-media{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  flex:1 1 auto;
  overflow:hidden;
}
.mb-slides-carousel .mb-slides-media img{
  width:100% !important;
  height:100% !important;
}
.mb-slides-carousel .mb-slides-content{
  height:auto !important;
  min-height:96px;
  max-height:46%;
  flex:0 0 auto;
  padding:18px 22px 20px;
  overflow:auto;
  scrollbar-width:thin;
}
.mb-slides-carousel .mb-slides-content:before{
  width:100%;
  height:2px;
  inset:0 0 auto 0;
}
.mb-slides-carousel .mb-slides-arrow{
  top:50% !important;
}

/* Keep single-feature slides visually generous while still respecting the
   group height selected in the editor. */
.mb-slides-single .mb-slides-slide{
  height:var(--mb-slides-group-height) !important;
  min-height:var(--mb-slides-group-height) !important;
  max-height:var(--mb-slides-group-height) !important;
}

@media(max-width:1199px){
  .mb-slides-carousel{--mb-slides-group-height:var(--mb-slides-height-tablet,48vh)}
  .mb-slides-carousel .mb-slides-content{min-height:92px;padding:16px 18px 18px}
}

@media(max-width:767px){
  .mb-slides-carousel{--mb-slides-group-height:var(--mb-slides-height-mobile,100svh)}
  .mb-slides-carousel .mb-slides-slide{
    height:var(--mb-slides-group-height) !important;
    min-height:var(--mb-slides-group-height) !important;
    max-height:var(--mb-slides-group-height) !important;
  }
  .mb-slides-carousel .mb-slides-content{
    min-height:104px;
    max-height:42%;
    padding:20px 20px 22px;
  }
  .mb-slides-carousel .mb-slides-dots{padding-top:22px}
}

@supports(height:100dvh){
  @media(max-width:767px){
    .mb-slides-carousel{--mb-slides-group-height:var(--mb-slides-height-mobile,100dvh)}
  }
}

/* Maverick Slides 2.4 – navigation buttons.
   The chevron is absolutely positioned from the true centre of the button.
   This avoids font baseline/flex alignment differences from themes and Elementor. */
.mb-slides-carousel .mb-slides-viewport{
  position:relative !important;
}
.mb-slides-carousel .mb-slides-arrow{
  position:absolute !important;
  top:50% !important;
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:10px !important;
  font-size:0 !important;
  line-height:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  transform:translateY(-50%) !important;
  -webkit-appearance:none;
  appearance:none;
}
.mb-slides-carousel .mb-slides-arrow::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:12px !important;
  height:12px !important;
  margin:0 !important;
  padding:0 !important;
  border-top:2.5px solid currentColor !important;
  border-right:2.5px solid currentColor !important;
  box-sizing:border-box !important;
  transform-origin:center center !important;
}
.mb-slides-carousel .mb-slides-prev::before{
  transform:translate(-50%,-50%) rotate(-135deg) !important;
}
.mb-slides-carousel .mb-slides-next::before{
  transform:translate(-50%,-50%) rotate(45deg) !important;
}
.mb-slides-carousel .mb-slides-arrow:hover{
  transform:translateY(-50%) scale(1.04) !important;
}
.mb-slides-carousel .mb-slides-prev:hover::before{
  transform:translate(-50%,-50%) rotate(-135deg) !important;
}
.mb-slides-carousel .mb-slides-next:hover::before{
  transform:translate(-50%,-50%) rotate(45deg) !important;
}

@media(max-width:1199px){
  .mb-slides-carousel .mb-slides-arrow{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    border-radius:9px !important;
  }
}

@media(max-width:767px){
  .mb-slides-carousel .mb-slides-arrow{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:8px !important;
  }
  .mb-slides-carousel .mb-slides-arrow::before{
    width:11px !important;
    height:11px !important;
    border-top-width:2.25px !important;
    border-right-width:2.25px !important;
  }
}


/* Maverick Slides 2.6 – Mobile edge-to-edge presentation.
   On phones the carousel deliberately escapes Elementor/container padding,
   while retaining a clean 5px breathing space on each side. */
@media (max-width:767px){
  .mb-slides-carousel{
    width:calc(100vw - 10px) !important;
    max-width:none !important;
    margin-left:calc(50% - 50vw + 5px) !important;
    margin-right:5px !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:54px !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .mb-slides-carousel .mb-slides-viewport{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .mb-slides-carousel .mb-slides-track{
    width:auto !important;
    max-width:none !important;
    gap:0 !important;
  }

  /* One mobile slide always occupies the complete available carousel width. */
  .mb-slides-carousel .mb-slides-slide{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
    box-sizing:border-box !important;
  }

  .mb-slides-carousel .mb-slides-card-link{
    inset:0 !important;
  }

  /* Keep controls safely inside the 5px mobile frame. */
  .mb-slides-carousel .mb-slides-prev{
    left:8px !important;
  }

  .mb-slides-carousel .mb-slides-next{
    right:8px !important;
  }

  .mb-slides-carousel .mb-slides-dots{
    width:100% !important;
    box-sizing:border-box !important;
    padding-top:18px !important;
  }
}

.mb-slides-carousel .mb-slides-arrow:disabled{opacity:.45;cursor:default;pointer-events:none}.mb-slides-carousel:focus-visible{outline:2px solid var(--mb-emerald,#173B33);outline-offset:6px}
