/** Shopify CDN: Minification failed

Line 14:20 Unexpected "{"
Line 231:47 Expected identifier but found ")"
Line 231:50 Expected identifier but found "*"

**/

.main-nav__collection-image {
    flex-basis: var(--image-size, 40px);
    width: 100%;
    height: auto;
}
.megamenus .column, {
      display: flex;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------------
   Base grid for both mega menus and child‑menu panels
------------------------------------------------------------------------ */
.megamenus,
.child-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  transition: opacity 0.5s ease;
}

.container--custom .child-menus .container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  gap:15px;
  align-items:end;
}
.container--custom .child-menus .container.sidebar_child_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
  gap:15px
}

.sidebar_child_list  .mega-nav--columns .main-nav__collection-image {
  padding-bottom: 10px;
}

.child-menu-is-side.child-menu{
      grid-template-columns: repeat(auto-fit, minmax(80%, 1fr));
  left:var(--gutter)
}
/* ------------------------------------------------------------------------
   Uniform styling for each “tile”
------------------------------------------------------------------------ */
.megamenus .column,
.child-menu .column {
 /* padding: 20px;*/
  box-sizing: border-box;
  font-family: var(--heading-font-family);
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
}

/* ------------------------------------------------------------------------
   Collection images fill their container
------------------------------------------------------------------------ */
.main-nav__collection-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------------------------------------------
   Child‑menu overlay panel
------------------------------------------------------------------------ */
.child-menu {
  display: none; /* shown via JS */
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - var(--gutter));
  height: 100%;
  background-color: var(--nav-bg-color);
  z-index: 20;
  padding: 20px;
  
  /* same grid as above */
 /* grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));*/
  grid-template-columns: 5fr
}

/* ------------------------------------------------------------------------
   Back button and menu‑title tiles
------------------------------------------------------------------------ */
.menu-title,
.back-button,
a.parent-link.parent-link--sidebar {
  cursor: pointer;
  background-color:transparent;
  border: none;
  padding: 7.5px;
  font-family: var(--heading-font-family);
  font-size: 15px;
  box-shadow: none;
  width:100%}

.menu-title {
  text-align: center;
  color:black;
}

.back-button {
  text-align: left;
  position: absolute;
  width:auto
}
a.parent-link.parent-link--sidebar {
  text-align:left;
  color:black
}
/* ------------------------------------------------------------------------
   Reset lists inside megamenu content
------------------------------------------------------------------------ */
.menu-content ul,
.menu-content ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-content li {
  margin: 5px 0;
  padding: 5px 0;
}

/* ------------------------------------------------------------------------
   Sidebar + content wrapper
------------------------------------------------------------------------ */
.container--custom {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 25vw;
}

.child-menu__sidebar {
  position: sticky;
  top: 20px;
  width: 20%;
  padding: 20px 0;
}

.child-menu-is-side .child-menu-wrapper {
  width: 80%;
}

.child-menu-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.child-menu-is-side .sidebar-div {
  display: flex;
  flex-wrap: wrap;
}
.sidebar_child_list .sidebar_column {
  display: flex;
  flex-wrap:wrap;
}
/* ------------------------------------------------------------------------
   Mobile adjustments
------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .megamenus,
  .child-menu {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .child-menu__sidebar {
    display: none; /* sidebar becomes hidden on mobile */
  }
  .child-menu-wrapper {
    width: 100%;
    overflow-y: auto;
  }
}
@media (min-width: 769px){
 .column_no-sidebar .main-nav__collection-image, .sidebar_child_list .main-nav__collection-image {
   padding-bottom:10px;
 }
}

/* make the wrapper size itself to the image */
.js-first-level.main-nav__collection-image {
  display: block;        /* become a block so it spans the full width */
  position: relative;    /* keep whatever positioning you need */
  width: 100%;           /* fill its parent horizontally */
  height: auto;          /* let height be driven by content */
  cursor: pointer;       /* show it’s clickable */
  overflow: hidden;      /* hide any overflow if you’re using object-fit */
}

/* force the img to fill its wrapper */
.js-first-level.main-nav__collection-image img {
  display: block;        /* remove any inline gaps */
  width: 100%;           /* span full width of wrapper */
  height: 100%;          /* match wrapper height */
  object-fit: cover;     /* crop/scale nicely */
}

.js-first-level {
  display: inline-block;
  cursor: pointer;
}
.js-first-level img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* make the two panels sit side by side */
.mega-nav--sidebar .sidebar-div {
  display: flex;
}

/* sidebar column stays fixed at the top */
.mega-nav--sidebar .child-menu__sidebar {
  position: sticky;
  top: 0;                 /* adjust if you have a header offset */
  align-self: flex-start; /* prevents it from stretching vertically */
  /* optional: give it a max-height if your container is tall */
  /* max-height: calc(100vh - /* your offset */); */
  overflow: auto;         /* if your sidebar list itself scrolls */
}

/* allow the content panel to scroll independently */
.mega-nav--sidebar .child-menu-wrapper {
  overflow-y: auto;
}


/* 1) Make the sidebar+content a flex container with a max‐height */
.child-menu-is-side .sidebar-div {
  display: flex;
  /* adjust 60px to whatever your header height or top offset is */
  max-height: calc(100vh - 60px);
}

/* 2) Sidebar itself becomes sticky */
.child-menu-is-side .child-menu__sidebar {
  flex: 0 0 250px;             /* optional: fix your sidebar’s width */
  position: sticky;
  top: 0;                      /* sticks at the top of that 100vh container */
  align-self: flex-start;      /* prevents stretching */
  max-height: calc(100vh - 60px);
  overflow-y: auto;            /* if the list is long, it will scroll */
  z-index: 10;                 /* keep it above the content panel */
}

/* 3) The right‐hand panel scrolls independently */
.child-menu-is-side .child-menu-wrapper {
  flex: 1 1 auto;
  overflow-y: hidden;
  max-height: calc(100vh - 60px);
}