/** Shopify CDN: Minification failed

Line 100:56 Unexpected "*"

**/
/* ============================================================
   navbar-ecoleap
   1:1 replica of ecoleapbike header navigation.
   Desktop breakpoint >= 1200px (matches vendor d-desktop-* utils).
   ============================================================ */

/* ---------- Wrapper (custom element) ----------
   The <navbar-wrapper> custom element defaults to display:inline, which
   collapses the dark background / borders. Force it to block so the
   section bg_color/border/shadow paint across the full width. */
#navbar-ecoleap-wrapper {
  display: block;
  border-top-style: solid;
  border-bottom-style: solid;
  transition: background-color .2s ease-out;
}
#navbar-ecoleap-wrapper.shadow {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
#navbar-ecoleap-wrapper .navbar-logo {
  display: flex;
  font-size: 1.5rem;
  text-decoration: none;
  color: currentColor;
  transition: all .2s ease;
  justify-content: center;
}
#navbar-ecoleap-wrapper .navbar-logo:hover,
#navbar-ecoleap-wrapper .navbar-logo:focus {
  opacity: .75;
}

/* Theme tokens (text inherits currentColor from section text-white) */
.navbar-ecoleap-desktop,
.navbar-ecoleap-mobile,
#offcanvas-menu-ecoleap {
  --ecoleap-pill-bg: rgba(255, 255, 255, 0.12);
  --ecoleap-pill-bg-strong: #ffffff;
  --ecoleap-pill-fg: #080a12;
  --ecoleap-card-bg: #0e0d0d;
  --ecoleap-card-text: #ffffff;
  --ecoleap-card-text-hover: #ffffff;
  --ecoleap-card-muted-bg: rgba(255, 255, 255, 0.1);
  --ecoleap-accent: #fbbf24;
  --ecoleap-anim-nav: .5s cubic-bezier(.6, 0, .4, 1);
  --ecoleap-anim-primary: .5s cubic-bezier(.3, 1, .3, 1);
  --ecoleap-anim-dropdown: .6s cubic-bezier(.7, 0, .2, 1);
  --ecoleap-anim-list: 1s cubic-bezier(.075, .82, .165, 1);
  --ecoleap-anim-fade-list: 1s cubic-bezier(.19, 1, .22, 1);
  --ecoleap-header-height: 76px;
  --ecoleap-dropdown-offset-x: -32px;
  --ecoleap-dropdown-radius: 20px;
}

/* ---------- Shared row layout ----------
   3-column grid keeps the middle truly centered even when
   left (logo / hamburger) and right (icons) have different widths.

   IMPORTANT: Bootstrap sets `.navbar > .container { display:flex;
   justify-content:space-between }`. Our rows ARE that container, so
   we must beat that rule (ID + class) or the grid never applies and
   the right icons hug the edge under space-between. */
#navbar-ecoleap-wrapper .navbar-ecoleap-row,
#navbar-ecoleap-wrapper .navbar-ecoleap-row-mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-content: normal;
  flex-wrap: nowrap;
  gap: 16px;
}
#navbar-ecoleap-wrapper .navbar-ecoleap-row > .ecoleap-logo,
#navbar-ecoleap-wrapper .navbar-ecoleap-row-mobile > .ecoleap-mobile-left {
  justify-self: start;
}
#navbar-ecoleap-wrapper .navbar-ecoleap-row > .ecoleap-menu,
#navbar-ecoleap-wrapper .navbar-ecoleap-row-mobile > .ecoleap-mobile-logo {
  justify-self: center;
  display: flex;
  justify-content: center;
}
#navbar-ecoleap-wrapper .navbar-ecoleap-row > .ecoleap-icons,
#navbar-ecoleap-wrapper .navbar-ecoleap-row-mobile > .ecoleap-mobile-right {
  justify-self: end;
}
.navbar-ecoleap-desktop {
  position: relative;
}

/* ============================================================
   HEADER SHRINK (scroll — always visible)
   Toggled by sections.js via #header-group.header-is-scrolled.
   Base height comes from the inline --logo-h var set in
   navbar-logo.liquid, so the logo transition animates smoothly.
   !important is required to beat the Bootstrap pt-*/pb-* utilities.
   ============================================================ */
#header-group .navbar-ecoleap-row,
#header-group .navbar-ecoleap-row-mobile {
  transition: padding-top var(--ecoleap-anim-nav, .5s cubic-bezier(.6, 0, .4, 1)),
    padding-bottom var(--ecoleap-anim-nav, .5s cubic-bezier(.6, 0, .4, 1));
}
#header-group .navbar-logo img {
  height: var(--logo-h, auto);
  transition: height var(--ecoleap-anim-nav, .5s cubic-bezier(.6, 0, .4, 1));
}
#header-group.header-is-scrolled .navbar-ecoleap-row {
  padding-top: .125rem !important;
  padding-bottom: .125rem !important;
}
#header-group.header-is-scrolled .navbar-logo img {
  height: 30px;
}

/* ============================================================
   DESKTOP MENU (>= 1200px)
   Uses a details/summary structure (matching ecoleapbike) so the
   dark dropdown card slides down from behind the pill.
   ============================================================ */
.nav-ecoleap-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
}

/* Reference behavior: details stays static while the absolute dropdown
   keeps its static inline position inside the header. */
.nav-ecoleap-menu details {
  display: inline-block;
}

.nav-ecoleap-menu .menu-pill,
.nav-ecoleap-menu .menu__item-summary {
  position: relative;
  z-index: 2;
}

/* Remove the native disclosure triangle from summary. */
.nav-ecoleap-menu .menu__item-summary {
  list-style: none;
  display: inline-flex;
  padding: 0;
  cursor: pointer;
}

.nav-ecoleap-menu .menu__item-summary::-webkit-details-marker {
  display: none;
}

/* The pill itself: used on plain links and as the inner text wrapper
   inside summary dropdowns. */
.nav-ecoleap-menu .menu__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 60px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

/* Active state uses the normal menu text color, not accent yellow */
.nav-ecoleap-menu .menu__item.active .btn-text,
.nav-ecoleap-menu .menu__item-summary.active .btn-text {
  color: inherit;
}

/* Original label */
.nav-ecoleap-menu .menu__item .btn-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: transform var(--ecoleap-anim-primary),
    opacity var(--ecoleap-anim-primary);
}

/* Inverted duplicate: white pill that scales up from below on hover. */
.nav-ecoleap-menu .menu__item .btn-duplicate {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  border-radius: 60px;
  color: var(--ecoleap-pill-fg);
  background-color: var(--ecoleap-pill-bg-strong);
  transform: translateY(100%) scale(.6);
  transition: transform var(--ecoleap-anim-primary);
  pointer-events: none;
}

/* Hover / open / focus: original shrinks & fades, duplicate scales up into place */
.nav-ecoleap-menu .menu__item:hover .btn-text,
.nav-ecoleap-menu .menu__item-summary:hover .btn-text,
.nav-ecoleap-menu details > summary[open] .menu__item .btn-text,
.nav-ecoleap-menu details:focus-within .menu__item .btn-text {
  opacity: 0;
  transform: translateY(-10%) scale(.6);
}
.nav-ecoleap-menu .menu__item:hover .btn-duplicate,
.nav-ecoleap-menu .menu__item-summary:hover .btn-duplicate,
.nav-ecoleap-menu details > summary[open] .menu__item .btn-duplicate,
.nav-ecoleap-menu details:focus-within .menu__item .btn-duplicate {
  transform: translateY(0) scale(1);
}

/* ---------- Dark rounded dropdown card ----------
   Mirrors the reference: the dropdown is absolute from the header top,
   offset by the measured header height, and the card slides down from
   translateY(-105%). */
.nav-ecoleap-menu .dropdown {
  position: absolute;
  top: 0;
  inset-inline-start: auto;
  margin-inline-start: var(--ecoleap-dropdown-offset-x);
  min-width: 250px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding-block-start: var(--ecoleap-header-height);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  text-align: left;
  transition: opacity .3s cubic-bezier(.7, 0, .2, 1),
    visibility 0s linear .3s,
    padding var(--ecoleap-anim-nav);
}

.nav-ecoleap-menu .dropdown__container {
  position: relative;
  background: var(--ecoleap-card-bg);
  color: var(--ecoleap-card-text);
  border-radius: 0 0 var(--ecoleap-dropdown-radius) var(--ecoleap-dropdown-radius);
  padding: 24px 0 40px;
  transform: translateY(-105%);
  transition: transform var(--ecoleap-anim-dropdown);
  will-change: transform;
}

/* Rounded corner decorations at the top shoulders of the dropdown card */
.nav-ecoleap-menu .dropdown__corner {
  position: absolute;
  top: 0;
  display: block;
  width: var(--ecoleap-dropdown-radius);
  height: var(--ecoleap-dropdown-radius);
  overflow: hidden;
  color: var(--ecoleap-card-bg);
  line-height: 0;
  pointer-events: none;
}
.nav-ecoleap-menu .dropdown__corner svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nav-ecoleap-menu .dropdown__corner svg path:first-child {
  fill: currentColor;
}
.nav-ecoleap-menu .dropdown__corner svg path:last-child {
  fill: none;
  stroke: none;
}
.nav-ecoleap-menu .dropdown__corner.left {
  left: calc(var(--ecoleap-dropdown-radius) * -1);
  transform: scaleX(-1);
}
.nav-ecoleap-menu .dropdown__corner.right {
  right: calc(var(--ecoleap-dropdown-radius) * -1);
  transform: none;
}

/* Open states: card fades in, container slides down, items delay-fade. */
.nav-ecoleap-menu .dropdown[open],
.nav-ecoleap-menu .dropdown.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  transition: opacity var(--ecoleap-anim-dropdown) .2s,
    visibility 0s linear 0s,
    padding var(--ecoleap-anim-nav);
}

.nav-ecoleap-menu .dropdown[open] .dropdown__container,
.nav-ecoleap-menu .dropdown.is-open .dropdown__container {
  transform: translateY(0) !important;
}

.nav-ecoleap-menu .dropdown__nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

/* Dropdown items: slide in from the side, slow easing, nth-child stagger. */
.nav-ecoleap-menu .dropdown__nav li {
  opacity: 0;
  transform: translateX(20%);
  transition: transform var(--ecoleap-anim-list),
    opacity var(--ecoleap-anim-fade-list);
  transition-delay: .2s;
}

.nav-ecoleap-menu .dropdown__nav li > p {
  margin: 0;
  padding-inline: 32px;
}

.nav-ecoleap-menu .dropdown__nav li a {
  display: inline-block;
  position: relative;
  padding: 0;
  border-radius: 0;
  color: var(--ecoleap-card-text);
  text-decoration: none;
  font-weight: 400;
  font-size: clamp(.875rem, .8115rem + .1587vw, 1rem);
  line-height: 1.5;
  background-color: transparent;
  transition: color .15s ease;
}

/* Left-to-right underline animation on hover/focus */
.nav-ecoleap-menu .dropdown__nav li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.3, 1, .3, 1);
  pointer-events: none;
}

.nav-ecoleap-menu .dropdown__nav li a:hover::after,
.nav-ecoleap-menu .dropdown__nav li a:focus-visible::after {
  transform: scaleX(1);
}

.nav-ecoleap-menu .dropdown__nav li a:hover {
  color: rgba(255, 255, 255, 0.75);
}

.nav-ecoleap-menu .dropdown__nav li a.active {
  color: var(--ecoleap-card-text);
}

/* Some cached rendered versions may still keep the reference's opacity-0
   utility class on the <li>; ensure it is overridden when the dropdown opens. */
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li,
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li.opacity-0,
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li,
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li.opacity-0 {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition-delay: 1.2s;
}

.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(1),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(1) { transition-delay: .3s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(2),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(2) { transition-delay: .4s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(3),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(3) { transition-delay: .5s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(4),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(4) { transition-delay: .6s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(5),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(5) { transition-delay: .7s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(6),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(6) { transition-delay: .8s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(7),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(7) { transition-delay: .9s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(8),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(8) { transition-delay: 1s; }
.nav-ecoleap-menu .dropdown[open] .dropdown__nav > li:nth-child(9),
.nav-ecoleap-menu .dropdown.is-open .dropdown__nav > li:nth-child(9) { transition-delay: 1.1s; }

/* Level 3 groups within the desktop dropdown */
.nav-ecoleap-menu .dropdown__group {
  padding: 6px 0;
}

.nav-ecoleap-menu .dropdown__group + .dropdown__group {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-ecoleap-menu .dropdown__heading {
  margin: 0;
  padding-inline: 32px;
}

.nav-ecoleap-menu .dropdown__heading a {
  font-weight: 600;
}

.nav-ecoleap-menu .dropdown__children {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0 32px;
}

.nav-ecoleap-menu .dropdown__children li {
  margin: 0;
  padding: 0;
  opacity: 1;
  transform: none;
}

.nav-ecoleap-menu .dropdown[open] .dropdown__children li,
.nav-ecoleap-menu .dropdown.is-open .dropdown__children li,
.nav-ecoleap-menu .dropdown[open] .dropdown__children li.opacity-0,
.nav-ecoleap-menu .dropdown.is-open .dropdown__children li.opacity-0 {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.nav-ecoleap-menu .dropdown__children li a {
  display: block;
  padding: 4px 0 4px 16px;
  font-size: clamp(.8125rem, .75rem + .1302vw, .9375rem);
  opacity: 0.85;
}

.nav-ecoleap-menu .dropdown__children li a:hover,
.nav-ecoleap-menu .dropdown__children li a:focus-visible {
  opacity: 1;
}

/* ============================================================
   MOBILE OFFCANVAS DRAWER (< 1200px)
   ============================================================ */
#offcanvas-menu-ecoleap.offcanvas-bottom {
  height: 100% !important;
  width: 100% !important;
  max-height: calc(100% - 60px) !important;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  /* Override Bootstrap offcanvas transition for the slide-up sheet.
     Transform start/end (translateY(100%) / none) are still owned by
     Bootstrap's .offcanvas-bottom / .show:not(.hiding) rules. */
  transition: transform .28s cubic-bezier(.2, 0, .2, 1);
}

#offcanvas-menu-ecoleap .offcanvas-body {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: #ffffff;
  color: #1a1a1a;
  opacity: 0;
  transition: opacity .14s ease-out;
}

/* Bootstrap keeps .show during the hiding phase, so this also covers
   the close transition (body stays visible while the sheet slides down). */
#offcanvas-menu-ecoleap.show .offcanvas-body {
  opacity: 1;
}

#offcanvas-menu-ecoleap .m-head,
#offcanvas-menu-ecoleap .m-list > li,
#offcanvas-menu-ecoleap .m-footer {
  opacity: 0;
  transform: translateX(-8px);
  transition: transform .22s cubic-bezier(.2, 0, .2, 1),
    opacity .18s ease-out;
  will-change: opacity, transform;
}

#offcanvas-menu-ecoleap.show .m-head,
#offcanvas-menu-ecoleap.show .m-list > li,
#offcanvas-menu-ecoleap.show .m-footer {
  opacity: 1;
  transform: translateX(0);
}

#offcanvas-menu-ecoleap.show .m-head { transition-delay: .02s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(1) { transition-delay: .03s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(2) { transition-delay: .05s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(3) { transition-delay: .07s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(4) { transition-delay: .09s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(5) { transition-delay: .11s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(6) { transition-delay: .13s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(7) { transition-delay: .15s; }
#offcanvas-menu-ecoleap.show .m-list > li:nth-child(8) { transition-delay: .17s; }
#offcanvas-menu-ecoleap.show .m-footer { transition-delay: .1s; }

/* Root level list (scrollable) */
#offcanvas-menu-ecoleap .m-level-root {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .24s cubic-bezier(.2, 0, .2, 1),
    opacity .2s ease-out;
  will-change: transform;
}

#offcanvas-menu-ecoleap .m-handle {
  display: block;
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #d4d4d4;
}

#offcanvas-menu-ecoleap .m-level-root.is-pushed {
  transform: translateX(-30%);
  opacity: 1;
}

#offcanvas-menu-ecoleap .m-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
}

#offcanvas-menu-ecoleap .m-head .m-head-close {
  background: transparent;
  border: 0;
  padding: 6px;
  line-height: 0;
  color: #1a1a1a;
  cursor: pointer;
}

#offcanvas-menu-ecoleap .m-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}

#offcanvas-menu-ecoleap .m-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 4px;
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  text-align: left;
}

#offcanvas-menu-ecoleap .m-link.active {
  color: #1a1a1a;
}

#offcanvas-menu-ecoleap .m-link-toggle .svg-icon-chevron-right {
  color: #9ca3af;
  transition: transform var(--ecoleap-anim-primary);
}

#offcanvas-menu-ecoleap .m-link-toggle[aria-expanded="true"] .svg-icon-chevron-right {
  transform: translateX(4px);
}

/* Footer (login + socials) */
#offcanvas-menu-ecoleap .m-footer {
  padding-top: 22px;
  margin-top: 10px;
  border-top: 1px solid #f0f0f0;
}

#offcanvas-menu-ecoleap .m-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
#offcanvas-menu-ecoleap .m-login:hover {
  opacity: 0.85;
  color: #ffffff;
}

#offcanvas-menu-ecoleap .m-social {
  margin-top: 16px;
}

/* ---------- Submenu overlay panel ---------- */
#offcanvas-menu-ecoleap .m-panel {
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.2, 0, .2, 1);
  display: flex;
  flex-direction: column;
  z-index: 2;
  will-change: transform;
}

#offcanvas-menu-ecoleap .m-panel.is-active {
  transform: translateX(0);
}

#offcanvas-menu-ecoleap .m-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #f0f0f0;
}

#offcanvas-menu-ecoleap .m-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
}

#offcanvas-menu-ecoleap .m-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 6px;
  line-height: 0;
  color: #1a1a1a;
  cursor: pointer;
}

#offcanvas-menu-ecoleap .m-sublist {
  list-style: none;
  margin: 0;
  padding: 8px 18px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}

#offcanvas-menu-ecoleap .m-sublist li {
  opacity: 0;
  transform: translateX(8px);
  transition: transform .22s cubic-bezier(.2, 0, .2, 1),
    opacity .18s ease-out;
}

#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li {
  opacity: 1;
  transform: translateX(0);
}

#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(1) { transition-delay: .02s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(2) { transition-delay: .04s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(3) { transition-delay: .06s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(4) { transition-delay: .08s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(5) { transition-delay: .1s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(6) { transition-delay: .12s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(7) { transition-delay: .14s; }
#offcanvas-menu-ecoleap .m-panel.is-active .m-sublist li:nth-child(8) { transition-delay: .16s; }

#offcanvas-menu-ecoleap .m-sublist a {
  display: block;
  padding: 14px 6px;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f3f3f3;
}

#offcanvas-menu-ecoleap .m-sublist a:hover {
  color: rgba(26, 26, 26, 0.7);
}

#offcanvas-menu-ecoleap .m-sublist a.active {
  color: #1a1a1a;
}

/* Level 3 accordion within mobile submenu panels */
#offcanvas-menu-ecoleap .m-subgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 6px;
  font-size: 20px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}

#offcanvas-menu-ecoleap .m-subgroup-toggle.active {
  color: #1a1a1a;
}

#offcanvas-menu-ecoleap .m-subgroup-toggle .svg-icon-chevron-right {
  color: #9ca3af;
  transition: transform var(--ecoleap-anim-primary);
}

#offcanvas-menu-ecoleap .m-subgroup-toggle[aria-expanded="true"] .svg-icon-chevron-right {
  transform: rotate(90deg);
}

#offcanvas-menu-ecoleap .m-sublist .m-sublist-nested {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s cubic-bezier(.3, 1, .3, 1),
    opacity .35s ease;
  will-change: max-height, opacity;
}

#offcanvas-menu-ecoleap .m-sublist .m-sublist-nested.is-open {
  max-height: 1000px;
  opacity: 1;
}

#offcanvas-menu-ecoleap .m-sublist .m-sublist-nested li {
  opacity: 1;
  transform: none;
  transition: none;
}

#offcanvas-menu-ecoleap .m-sublist-nested li a {
  display: block;
  padding: 12px 6px 12px 18px;
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #f3f3f3;
}

#offcanvas-menu-ecoleap .m-sublist-nested li:last-child a {
  border-bottom: 0;
}

#offcanvas-menu-ecoleap .m-sublist-nested a:hover {
  color: rgba(26, 26, 26, 0.7);
}

#offcanvas-menu-ecoleap .m-sublist-nested a.active {
  color: #1a1a1a;
}

/* Hide offcanvas-menu-ecoleap interactions below the mobile breakpoint is not needed;
   the drawer markup itself only lives inside the mobile block. */
@media (min-width: 1200px) {
  #offcanvas-menu-ecoleap {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header-group .navbar-ecoleap-row,
  #header-group .navbar-ecoleap-row-mobile,
  #header-group .navbar-logo img,
  .nav-ecoleap-menu .menu__item .btn-text,
  .nav-ecoleap-menu .menu__item .btn-duplicate,
  .nav-ecoleap-menu .dropdown,
  .nav-ecoleap-menu .dropdown__container,
  .nav-ecoleap-menu .dropdown__nav li,
  .nav-ecoleap-menu .dropdown__nav li a,
  #offcanvas-menu-ecoleap.offcanvas-bottom,
  #offcanvas-menu-ecoleap .offcanvas-body,
  #offcanvas-menu-ecoleap .m-level-root,
  #offcanvas-menu-ecoleap .m-head,
  #offcanvas-menu-ecoleap .m-list > li,
  #offcanvas-menu-ecoleap .m-footer,
  #offcanvas-menu-ecoleap .m-panel,
  #offcanvas-menu-ecoleap .m-sublist li {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  .nav-ecoleap-menu .dropdown,
  .nav-ecoleap-menu .dropdown__container {
    transform: translateY(0);
  }

  .nav-ecoleap-menu .dropdown__nav li,
  .nav-ecoleap-menu .dropdown__nav li a,
  #offcanvas-menu-ecoleap .m-head,
  #offcanvas-menu-ecoleap .m-list > li,
  #offcanvas-menu-ecoleap .m-footer,
  #offcanvas-menu-ecoleap .m-sublist li {
    transform: none;
  }
}