/** Shopify CDN: Minification failed

Line 198:0 Unexpected "-"
Line 205:0 Unexpected "+"
Line 207:0 Unexpected "+"
Line 323:0 Expected "}" to go with "{"

**/
/* ────────────────────────────────────────────────────────────────────────────
   component-mega-menu.css
─────────────────────────────────────────────────────────────────────────────*/

/* —— DESKTOP INLINE MEGA MENU FIX —— */
@media screen and (max-width: 1024px) {
  .header__inline-menu {
    position: relative;
  }
  .mega-menu__content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 50;
  }
  .mega-menu__content ul.mega-menu__list {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 1.5rem;
    list-style: none;
    background: var(--color-background);
  }
  .header__inline-menu > li > details.mega-menu:not([open]) .mega-menu__content {
    display: none;
  }
  .header__inline-menu > li > details.mega-menu[open] .mega-menu__content {
    display: block;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   MOBILE MEGA-MENU (max-width: 749px) — full replacement
───────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  /* 1) Drawer & nav wrapper: full opaque white */
  #menu-drawer,
  .menu-drawer,
  .menu-drawer__inner-container,
  .menu-drawer__navigation-container {
    background: #fff !important;
    background-image: none !important;
  }
  /* 2) Enable native momentum scrolling + gutter for scrollbar */
  .menu-drawer__navigation-container {
    position: relative !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    padding-right: 18px !important;
  }
  .menu-drawer__navigation-container::after {
    display: none !important;
  }

  /* 3) Fat gold scrollbar on a light-gray track */
  .menu-drawer__navigation-container::-webkit-scrollbar {
    width: 18px;
  }
  .menu-drawer__navigation-container::-webkit-scrollbar-track {
    background: #eee;
  }
  .menu-drawer__navigation-container::-webkit-scrollbar-thumb {
    background: #f2ca80;
    border-radius: 12px;
  }

  /* 4) Wrap each item entirely in one <a> flex container */
  ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item {
    margin-bottom: 0;               /* gutter between rows */
  }
  ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item:last-child {
    margin-bottom: 0;
  }
  ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 110px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    text-decoration: none !important;
  }

  /* 5) Title block on the left (flex: text) */
  .mobile-mega-menu-item__link {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 110px) !important;
    padding: 0 1rem !important;
    font-size: 3rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
    color: var(--color-foreground) !important;
  }
  .mobile-mega-menu-item__link::after {
    content: none !important;
  }

  /* 6) Thumbnail block on the right */
  .mobile-mega-menu-item__image {
    flex-shrink: 0 !important;
    width: 110px !important;
    height: 110px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background: none !important;
  }
  .mobile-mega-menu-item__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 7) Swap order to keep image on the right */
  .mobile-mega-menu-item__link {
    order: 0 !important;
  }
  .mobile-mega-menu-item__image {
    order: 1 !important;
    margin-left: auto !important;
  }
  /* vertically center the image inside the 110×110 tile */
.mobile-nav--mega .mobile-mega-menu-item__link {
  /* already: display:flex; align-items:center; justify-content:space-between; */
}

.mobile-nav--mega .mobile-mega-menu-item__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 110px !important;
  height: 110px !important;
  padding: 3px 0;          /* give top & bottom “breathing room” */
  box-sizing: border-box;  /* include the padding in that 110px */
}

.mobile-nav--mega .mobile-mega-menu-item__image img {
  max-height: 100%;        /* so it never overflows */
  width: auto !important;  /* maintain aspect ratio */
  object-fit: contain;     /* ensure it scales down if need be */
}

}
/* ─── Show the “current” span just like your links ───────────────────────── */
@media screen and (max-width: 1024px) {
  /* target the span that replaces <a> for the active collection */
  ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item > span.mobile-mega-menu-item__link {
    display:           flex !important;
    visibility:        visible !important;
    opacity:           1 !important;
    align-items:       center !important;
    justify-content:   center !important;
    text-align:        center !important;
    width:             calc(100% - 110px) !important;
    height:            110px !important;
    padding:           0 1rem !important;
    font-size:         3rem !important;
    line-height:       1.2 !important;
    color:             var(--color-foreground) !important;
    text-decoration:   none !important;
    background:        none !important;
  }

  /* kill any leftover “::after” tiny arrow on that span */
  ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item > span.mobile-mega-menu-item__link::after {
    content: none !important;
  }
}
/*  ——————————————————————————————  */
/*  Make mobile mega-menu links always black  */
@media screen and (max-width: 1024px) {
  /* targets the drawer nav on mobile */
  .menu-drawer .mobile-nav--mega .mobile-mega-menu-item__link {
    color: #000 !important;
  }
}

  /* when the menu is open, Shopify adds overflow-hidden-mobile/tablet to <body> */
  body.overflow-hidden-mobile .scrolling-banner__bar,
  body.overflow-hidden-tablet .scrolling-banner__bar {
    display: none !important;
  }

- /* ────────────────────────────────────────────────────────────────────────────
-    MOBILE MEGA-MENU (max-width: 749px) — full replacement
- ───────────────────────────────────────────────────────────────────────────── */
- @media screen and (max-width: 749px) {
+ /* ────────────────────────────────────────────────────────────────────────────
+    MOBILE & TABLET MEGA-MENU (up to 1024px) — full replacement
+ ───────────────────────────────────────────────────────────────────────────── */
+ @media screen and (max-width: 1024px) {
+   /* 0) hide the desktop “inline” dropdown on tablets, force the drawer */
+   .header__inline-menu { display: none !important; }

    /* 1) Drawer & nav wrapper: full opaque white */
    #menu-drawer,
    .menu-drawer,
    .menu-drawer__inner-container,
    .menu-drawer__navigation-container {
      background: #fff !important;
      background-image: none !important;
    }
    /* 2) Enable native momentum scrolling + gutter for scrollbar */
    .menu-drawer__navigation-container {
      position: relative !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scroll-behavior: smooth !important;
      padding-right: 18px !important;
    }
    .menu-drawer__navigation-container::after {
      display: none !important;
    }

    /* 3) Fat gold scrollbar on a light-gray track */
    .menu-drawer__navigation-container::-webkit-scrollbar {
      width: 18px;
    }
    .menu-drawer__navigation-container::-webkit-scrollbar-track {
      background: #eee;
    }
    .menu-drawer__navigation-container::-webkit-scrollbar-thumb {
      background: #f2ca80;
      border-radius: 12px;
    }

    /* 4) Wrap each item entirely in one <a> flex container */
    ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item {
      margin-bottom: 0;
    }
    ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item > a {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      height: 110px !important;
      background: #fff !important;
      border-bottom: 1px solid #eee !important;
      text-decoration: none !important;
    }

    /* 5) Title block on the left (flex: text) */
    .mobile-mega-menu-item__link {
      flex: 1 1 auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: calc(100% - 110px) !important;
      padding: 0 1rem !important;
      font-size: 3rem !important;
      line-height: 1.2 !important;
      text-align: center !important;
      color: var(--color-foreground) !important;
    }
    .mobile-mega-menu-item__link::after { content: none !important; }

    /* 6) Thumbnail block on the right */
    .mobile-mega-menu-item__image {
      flex-shrink: 0 !important;
      width: 110px !important;
      height: 110px !important;
      overflow: hidden !important;
      border-radius: 4px !important;
      background: none !important;
    }
    .mobile-mega-menu-item__image img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    /* 7) Swap order to keep image on the right */
    .mobile-mega-menu-item__link { order: 0 !important; }
    .mobile-mega-menu-item__image {
      order: 1 !important;
      margin-left: auto !important;
    }

    /* 8) Active span styling exactly like a link */
    ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item > span.mobile-mega-menu-item__link {
      display:           flex !important;
      visibility:        visible !important;
      opacity:           1 !important;
      align-items:       center !important;
      justify-content:   center !important;
      text-align:        center !important;
      width:             calc(100% - 110px) !important;
      height:            110px !important;
      padding:           0 1rem !important;
      font-size:         3rem !important;
      line-height:       1.2 !important;
      color:             var(--color-foreground) !important;
      text-decoration:   none !important;
      background:        none !important;
    }
    ul.mobile-nav.mobile-nav--mega > li.mobile-mega-menu-item > span.mobile-mega-menu-item__link::after {
      content: none !important;
    }

    /* 9) Force black links (optional) */
    .menu-drawer .mobile-nav--mega .mobile-mega-menu-item__link {
      color: #000 !important;
    }
  }