/** Shopify CDN: Minification failed

Line 76:0 Unexpected "}"

**/
	/* Mega-menu container: full viewport height */
.mega-menu {
  display: flex;
  height: 75vh;
  overflow: auto;
}

/* Left side: 20% width with full-height vertical divider and animated background */
.mega-menu .left {
  width: 20%;
  height: 100vh; /* force full height */
  border-right: 1px solid rgba(0, 0, 0, 0.75);
  background: linear-gradient(to bottom, #fff, #f9f9f9);
}

/* Left menu items: subtle background change and slight scale on hover */
.mega-menu-left-item {
  transition: background 0.3s ease, transform 0.3s ease;
  margin-top: 1rem;
}
.mega-menu-left-item:hover {
  color: #550000; /* change color for the left links */
  transform: scale(1.02);
}

/* Right side: 80% width, relative for absolutely positioned submenus */
.mega-menu .right {
  width: 90%;
  height: 100%; /* fill parent's height (75vh) */
  position: relative; /* So that absolute children are positioned within this container */
  padding: 20px;
  box-sizing: border-box;
  overflow: auto; /* scroll if content exceeds container height */
  /* background-color: #FCF9F2 !important; your desired BG color */
}

/* Right submenu: use grid layout with a sliding & fading transition */
/* IMPORTANT: Set position to absolute so submenus overlap in the same spot */
.mega-menu-right-item {
  position: absolute; /* This ensures that only one submenu shows at a time */
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* When active, slide into place and fade in */
.mega-menu-right-item.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Desktop: 5 columns in the grid (each cell ≈20% of .right width) */
@media screen and (min-width: 769px) {
  .mega-menu-right-item {
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-content: start;
  }
  }
  .mega-menu-right-item .mobile-see-all {
    display: none;
  }
}

/* Mobile: 2 columns with adjusted threshold */
@media screen and (max-width: 768px) {
  .mega-menu-right-item {
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    align-content: start;
  }
 
}

/* See All link styling remains unchanged */
.mega-menu-right-item li.see-all {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mega-menu-right-item li.see-all a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  text-decoration: none;
  color: inherit;
}

/* Circle wrapper for images: fills grid cell with 1:1 aspect ratio */
.circle {
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
/* Zoom-in effect on hover over the circle (image container) */
.circle:hover img {
  transform: scale(1.10);
}

/* Title styling: centered below image with a slight top margin */
.mega-menu-right-item li a span {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 0.9rem;
}

/* Adjust .left height to match your design */
.mega-menu .left {
  width: 20%;
  height: 70vh;
  position: relative;
  border-right: 0.5px solid black;
}

/* Additional setup for circular elements if needed */
.circle-setup {
  width: 25%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

}

/* See All link: stack icon above text */
.see-all-link {
  display: flex;
  flex-direction: column;  /* Stacks icon on top, text below */
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Circle container for the arrow in See All */
.see-all-icon {
 width: 50px;
  height: 50px !important;
  aspect-ratio: 1 / 1;  /* Forces the element to be square */
  border: 0.5px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;           /* Flex container */
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center vertically */
  margin-bottom: 8px;      /* Space below circle */
  box-sizing: border-box;
  font-weight: 300 !important;
}
/* Styling for arrow text or icon inside See All */
.see-all-icon .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  margin: 0;
}
/* For inline SVG arrows */
.see-all-icon svg {
  display: block;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.see-all-link span {
  text-align: center;
}

.custom-span{
  font-weight: 300 !important;
}

.custom-span, 
.see-all-link, 
.see-all-icon {
  font-weight: 400 !important;  /* Ensure normal text */
  font-style: normal !important; /* Prevent italic or variations */
}