/* ========== SIDE MENU HOLDER ========== */
/* Version: 1.0.20 - Fixed submenu positioning to match main menu level */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#side-menu-holder {
    position: fixed;
    top: 23%;
    transform: translateY(-10%);
    left: 0;
    width: 220px; /* or your chosen value */
    min-width: 250px;
    max-width: 90vw;
    height: 53vh; /* main menu */
    z-index: 9000 !important;
    transition: height 0.5s cubic-bezier(0.4,0,0.2,1), transform 1.4s cubic-bezier(0.4,0,0.2,1), background 0.3s, border 0.3s;
    transform: translateX(-90%); /* Start hidden by default */
    background: rgba(148, 255, 232, 0.79);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 0.625rem;
    border-right: 1.5px solid rgba(174, 227, 247, 0.18);
    overflow: hidden;
    /* Allow pointer events so the visible 10% can be clicked */
    pointer-events: auto;
}
#side-menu-holder.expanded,
#side-menu-holder.submenu-expanded {
    width: 250px; /* same as above */
    background: rgba(148, 255, 232, 0.79);
    transform: translateX(0);
    /* Re-enable pointer events when expanded */
    pointer-events: auto;
}

/* Visible state - fully on screen */
#side-menu-holder.visible {
    transform: translateX(0);
}
#side-menu-holder.glossary-active {
    background: rgba(148, 255, 232, 0.79);
    border-right: 1.5px solid rgba(174, 227, 247, 0.35);
}
#side-menu-holder.glossary-active .menu-content {
    border-top: 1px solid rgba(174, 227, 247, 0.35);
    border-bottom: 1px solid rgba(174, 227, 247, 0.35);
}

/* ========== MENU CONTAINER ========== */
.menu-container {
    width: 100%;
    height: 100%;
    overflow-y: visible;
    border-radius: 10px;
}

/* ========== MENU CONTENT ========== */
.menu-content {
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    color: white;
    width: 100%;
    font-family: 'Montserrat Alternates', sans-serif;
    position: relative;
    border-top: 1px solid rgba(174, 227, 247, 0.18);
    border-bottom: 1px solid rgba(174, 227, 247, 0.18);
}
.menu-content ul {
    margin: 0;
    list-style: none;
}
.menu-content li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 4.625rem;
    overflow: hidden;
    margin: 0.125rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
.menu-content li:last-child {
    margin-bottom: 0;
}
.menu-content li:last-child,
.submenu ul li:last-child {
    border-bottom: none;
}
.menu-content li a {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.5rem 0.5rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.menu-content img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}
/* .main-menu > li:nth-child(3) {
    min-height: 7rem;
} 
.main-menu > li:nth-child(3) > a {
    align-items: flex-end;
    text-align: right;
    padding-right: 2rem;
    font-weight: 600;
    font-size: 1.5rem;
    box-sizing: border-box;
}*/

/* ========== MAIN MENU ========== */
.main-menu {
    position: static;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    margin: 0;
    width: 100%;
    list-style: none;
    display: flex;
    flex-direction: column;
    transition:
        opacity 0.5s cubic-bezier(0.4,0,0.2,1),
        filter 0.5s cubic-bezier(0.4,0,0.2,1),
        transform 0.7s cubic-bezier(0.4,0,0.2,1);
    position: relative;
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
}
.main-menu li a {
    font-weight: 400;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    color: rgba(43, 0, 102, 1);
    text-decoration: none;
    font-family: inherit;
    transition: color 0.7s ease;
    width: 100%;
    text-align: left;
    display: block;
    padding: 0 0.625rem;
    position: relative;
    z-index: 2;
}
.main-menu.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden; 
}
.main-menu li a:hover {
    font-weight: 600;
    color: #7e3b8a;
}

/* ========== SUBMENU ========== */
.has-submenu {
    position: relative;
}
.submenu {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 80vh;
    overflow: hidden;
    transition:
        opacity 0.5s cubic-bezier(0.4,0,0.2,1),
        filter 0.5s cubic-bezier(0.4,0,0.2,1),
        transform 0.7s cubic-bezier(0.4,0,0.2,1);
    opacity: 0;
    pointer-events: none;
    filter: blur(12px);
}
.submenu.active {
    opacity: 1;
    pointer-events: auto;
    /*background: rgba(148, 255, 232, 0.15);*/
}
.submenu ul {
    padding: 0;
    margin: 0;
    /*min-height: 100%;*/
}
.submenu ul li {
    min-height: 4.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: translateX(35px);
    transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.submenu ul li a {
    text-decoration: none;
    opacity: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    align-items: flex-start;
}

/* ========== PRODUCT DISPLAY ========== */
.submenu-product {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 0.5rem;
    text-decoration: none;
}
.submenu-product .product-header {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    width: 100%;
}
.submenu-product .product-number,
.submenu-product .product-name {
    display: inline-block;
    margin-right: 0.5em;
}
.submenu-product .product-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #3a1174;
}
.submenu-product .product-name {
    font-size: 1.3rem;
    font-weight: 400;
    color: #7e3b8a;
    letter-spacing: 0.01em;
}
.submenu-product .product-description {
    font-size: 0.8rem;
    color: #7e3b8a;
    margin-top: 0.2em;
    letter-spacing: 0.01em;
}
.submenu ul li a .product-number,
.submenu ul li a .product-name {
    display: inline-block;
    font-family: 'Montserrat Alternates', sans-serif;
    margin: 0;
    padding: 0;
}
.submenu ul li a .product-number {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3a1174;
    margin-right: 0.3em;
    letter-spacing: 0.01em;
}
.submenu ul li a .product-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: #7e3b8a;
    letter-spacing: 0.01em;
}
.submenu ul li a .product-description {
    display: block;
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 0.8rem;
    font-weight: 300;
    color: #7e3b8a;
    margin-top: 0.2em;
    letter-spacing: 0.01em;
}
.submenu > *:first-child {
    border: none;
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 0;
}
.main-menu, .submenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0;
}
.submenu ul li {
    opacity: 0;
}
.main-menu, .submenu, .menu-content {
    background: transparent !important;
    z-index: auto !important;
}

/* ========== BACK BUTTON ========== */
.back-button {
    position: sticky;
    top: -0.2vh;
    z-index: 2;
    background: #14041b93; /* or your submenu bg */
    /* Add padding, border, etc. as needed */
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(43, 0, 102, 0.7);
    width: 100%;
    outline: none;
    display: flex;
    justify-content: flex-start;
    position: relative;
    z-index: 15;
}
.back-button::before,
.back-button::after {
    display: none;
}
.back-button:hover {
    color: rgba(43, 0, 102, 1);
}
.back-button svg {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
}
.back-button:hover svg {
    transform: translateX(-4px);
}

/* ========== HOVER EFFECTS ========== */
.submenu ul li a:hover .product-number {
    color: #fff;
}
.submenu ul li a:hover .product-name,
.submenu ul li a:hover .product-description {
    color: rgba(43, 0, 102, 1);
}

/* ========== MOBILE STYLES ========== */
@media (max-width: 768px), (max-height: 600px) {
    #side-menu-holder.expanded {
        overflow-y: auto;
        max-height: 80vh;
    }
    .main-menu {
        overflow-y: auto;
        max-height: 80vh;
    }
    
/* WebKit Scrollbar */
    #side-menu-holder.expanded::-webkit-scrollbar {
        width: 8px;
    }
    #side-menu-holder.expanded::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    #side-menu-holder.expanded::-webkit-scrollbar-thumb {
        background: rgba(58, 17, 116, 0.7);
        border-radius: 4px;
    }
    
/* Firefox Scrollbar */
    #side-menu-holder.expanded {
        scrollbar-width: thin;
        scrollbar-color: rgba(58, 17, 116, 0.7) rgba(255, 255, 255, 0.1);
    }
}

/* ========== TABLET STYLES ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Ensure touch-friendly interactions on tablets */
    .menu-content li a {
        min-height: 3rem;
        padding: 0.75rem 1rem;
    }
    
    .submenu ul li a {
        min-height: 2.5rem;
        padding: 0.5rem 0.75rem;
    }
    
    /* Make back button more touch-friendly on tablets */
    .back-button {
        min-width: 3rem;
        min-height: 3rem;
        padding: 0.5rem;
    }
    
    /* Ensure submenu works properly on tablets */
    .submenu {
        touch-action: manipulation;
    }
    
    .submenu ul li {
        touch-action: manipulation;
    }
}

@media (max-width: 480px) {
    #side-menu-holder {
		background: rgba(255, 255, 240, 0.3);
        width: 65vw;
        left: 0.5rem;
        transform: translateX(-90%);
    }
    #side-menu-holder.expanded {
		background: rgba(255, 255, 240, 0.3);
        width: 65vw;
        left: 0.5rem;
        transform: translateX(0);
    }
	    #side-menu-holder.submenu-expanded {
        width: 75vw;
    }
    .main-menu {
        overflow-y: auto;
        max-height: 70vh; /* or whatever fits your design */
    }
    .main-menu li a {
        font-size: clamp(1.0rem, 2.0vw, 1.2rem);
    }
	/*.main-menu > li:nth-child(3) {
        min-height: 5rem; 
    }*/
	.menu-content li {
        min-height: 4rem; 	
	}
	.menu-content li a {
        padding: 0.5rem 1rem;
    }
	.submenu {
    background: rgba(255, 255, 240, 0.3); 
	}
	.submenu ul li {
        min-height: 3.5rem; /* Changed from 5rem */
    }
}
@media (max-width: 430px) {
    #side-menu-holder {
		overflow-y: auto;
		background: rgba(255, 255, 240, 0.3);
        width: 50vw;
        left: 0.5rem;
        transform: translateX(-90%);
    }
    #side-menu-holder.expanded {
		overflow-y: auto;
		background: rgba(255, 255, 240, 0.3);
        width: 50vw;
        left: 0.5rem;
        transform: translateX(0);
    }
/* WebKit Scrollbar */
    #side-menu-holder.expanded::-webkit-scrollbar {
        width: 8px;
    }
    #side-menu-holder.expanded::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    #side-menu-holder.expanded::-webkit-scrollbar-thumb {
        background: rgba(58, 17, 116, 0.7);
        border-radius: 4px;
    }
    
/* Firefox Scrollbar */
    #side-menu-holder.expanded {
        scrollbar-width: thin;
        scrollbar-color: rgba(58, 17, 116, 0.7) rgba(255, 255, 255, 0.1);
    }
	#side-menu-holder.submenu-expanded {
        width: 65vw;
    }
    .main-menu li a {
        font-size: clamp(1.0rem, 2.1vw, 1.2rem);
    }
	/*.main-menu > li:nth-child(3) {
        min-height: 5rem; 
		padding-right: 0.03rem;
    }*/
	.menu-content li {
        min-height: 6rem; 
    }
	.menu-content li a {
    padding: 0.5rem 1rem;
    }
	.submenu {
    background: rgba(255, 255, 240, 0.3); 
	}
	.submenu ul li {
        min-height: 3.5rem; 
    }
	.submenu ul li a .product-name {
		font-weight: 500;
	}
	.submenu ul li a .product-description {
		font-size: 0.85rem;
	}
	.back-button svg {
    width: 1.7rem;
    height: 1.7rem;
    margin-top: 0.5rem;
	margin-left:0.1rem;
	margin-bottom:1rem;
	}
}
@media (max-width: 360px) {
    #side-menu-holder {
		background: rgba(255, 255, 240, 0.3);
        width: 70vw;
        left: 0.5rem;
        transform: translateX(-90%);
    }
    #side-menu-holder.expanded {
		background: rgba(255, 255, 240, 0.3);
        width: 70vw;
        left: 0.5rem;
        transform: translateX(0);
    }
	#side-menu-holder.submenu-expanded {
        width: 80vw;
    }
    .main-menu li a {
        font-size: clamp(1.0rem, 2.2vw, 1.3rem);
    }
   /* .menu-container {
        overflow-y: auto;  Only scroll on mobile 
    }*/
	/*.main-menu > li:nth-child(3) {
        min-height: 5rem; 
    }*/
	.menu-content li {
        min-height: 4rem; 
    }

	.menu-content li a {
        padding: 0.5rem 1rem;
    }
	.submenu {
    background: rgba(255, 255, 240, 0.3); 
	}
	.submenu ul li {
        min-height: 3.5rem; /* Changed from 5rem */
    }
}

/* Ensure submenu always fills the menu container vertically */
#side-menu-holder .submenu {
    height: 100%;
    min-height: 0;
    max-height: 100%;
    box-sizing: border-box;
    /* No other changes! */
}

/* Completely disable all interactions when hidden */
#side-menu-holder.hidden .menu-content {
    pointer-events: none;
    user-select: none;
}

#side-menu-holder.hidden .menu-content a {
    pointer-events: none !important;
    cursor: default !important;
}

#side-menu-holder.hidden .menu-content li {
    pointer-events: none !important;
}

/* Sliding animation for menu transitions */
.main-menu,
.submenu {
    transition:
        opacity 0.5s cubic-bezier(0.4,0,0.2,1),
        filter 0.5s cubic-bezier(0.4,0,0.2,1),
        transform 0.7s cubic-bezier(0.4,0,0.2,1);
    will-change: transform, opacity;
}

.main-menu.menu-slide-out {
    opacity: 0;
    filter: blur(12px);
    pointer-events: none;
    transform: translateX(-100%);
}

.main-menu.menu-slide-in {
    opacity: 1;
    filter: blur(0);
    pointer-events: auto;
    transform: translateX(0);
}

.submenu.menu-slide-in {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
}
.submenu.menu-slide-out {
    opacity: 0;
    pointer-events: none;
    filter: blur(12px);
}

.submenu-list {
    overflow-y: auto;
    overflow-x: hidden;   /* Prevent horizontal scroll */
    flex: 1 1 auto;
    max-height: calc(80vh - 48px);
    padding-top: 1.2rem;    /* Top air */
    padding-bottom: 3rem; /* Bottom air */
}

/* For Webkit browsers (Chrome, Edge, Safari, Opera) */
.submenu-list::-webkit-scrollbar {
  width: 3px;
  background: transparent; /* No track background */
}
.submenu-list::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 2px;
}
.submenu-list::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
.submenu-list::-webkit-scrollbar-button,
.submenu-list::-webkit-scrollbar-corner {
  display: none;
  height: 0;
  width: 0;
}

/* For Firefox */
.submenu-list {
  scrollbar-width: thin;           /* Makes it thin */
  scrollbar-color: #fff transparent; /* White thumb, transparent track */
}

.submenu-list-inner {
  padding-top: 1.2rem;
  padding-bottom: 2.2rem;
}
.submenu-list-inner > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.submenu-list li,
.submenu-list li a {
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis; /* Optional: adds ... for long text */
  white-space: nowrap;     /* Optional: keeps text on one line */
}

.submenu-list li {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  transition:
    opacity 0.5s cubic-bezier(0.4,0,0.2,1),
    filter 0.5s cubic-bezier(0.4,0,0.2,1),
    transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.submenu.menu-slide-in .submenu-list li {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.submenu.submenu-blur-out .submenu-list li {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  transition:
    opacity 0.5s cubic-bezier(0.4,0,0.2,1),
    filter 0.5s cubic-bezier(0.4,0,0.2,1),
    transform 0.5s cubic-bezier(0.4,0,0.2,1);
}

.main-menu::-webkit-scrollbar {
  width: 3px;
  background: transparent;
}
.main-menu::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 2px;
}
.main-menu::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
.main-menu {
  scrollbar-width: thin;
  scrollbar-color: #fff transparent;
}

.menu-vertical-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.main-menu {
    position: static !important;
    height: auto !important;
    padding: 0.5rem 0 !important;
}

.main-menu.main-menu-hidden {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
  #side-menu-holder {
    top: 8px;         /* 5-10px breathing room */
    left: 0;
    right: 0;
    position: fixed;  /* Ensure it's fixed to the viewport */
    margin-top: 0;    /* Remove any default margin */
    /* Optional: add a little shadow for separation */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    z-index: 999;     /* Make sure it's above most content */
    /* Mobile: Start hidden by default */
    transform: translateX(-90%);
  }
  
  /* Mobile: Add touch-friendly interactions */
  .menu-content li a:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
  }
  
  .submenu ul li a:active {
    background-color: rgba(255, 255, 255, 0.2);
    transform: scale(0.98);
  }
}

#side-menu-holder.submenu-expanded {
    height: 60vh; /* or 70vh, 80vh, whatever you want for submenu */
}

.main-menu, .submenu {
    display: flex; /* or block, as needed */
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s cubic-bezier(0.4,0,0.2,1);
}
.main-menu.menu-hidden, .submenu.menu-hidden {
    opacity: 0;
    pointer-events: none;
    /* display: none; will be set via JS after transition */
}

/* Hamburger button - hidden by default */
.hamburger-btn {
    display: none;
}

/* Close button - hidden by default */
.close-btn {
    display: none;
}

/* Hamburger menu for mobile */
@media (max-width: 768px) {
    /* Hamburger button */
    .hamburger-btn {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 35px;
        height: 25px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        background-color: rgba(255, 255, 255, 0);
        border-radius: 4px;
        padding: 4px;
    }

    .hamburger-btn .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    .hamburger-btn.active .line:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .hamburger-btn.active .line:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.active .line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Close button */
    .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 18px;
        height: 18px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1002;
        display: none;
        border-radius: 4px;
        padding: 4px;
        box-shadow: 0 2px 8px rgba(255, 255, 255, 0);
        /* Same level as back button */
        transform: none;
    }

    .close-btn .line {
        width: 100%;
        height: 3px;
        background-color: #ffffff;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }

    .close-btn .line:nth-child(1) {
        transform: translateY(-50%) rotate(45deg);
    }

    .close-btn .line:nth-child(2) {
        transform: translateY(-50%) rotate(-45deg);
    }

    /* Mobile menu behavior - HAMBURGER SYSTEM */
    #side-menu-holder {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 65vw !important;
        height: 100vh !important;
        background: rgba(167, 243, 237, 0.9) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        z-index: 1000 !important;
        transform: translateX(-100%) !important;
        transition: none !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        /* Ensure menu starts hidden on mobile */
        visibility: hidden !important;
        margin: 0 !important;
        box-shadow: none !important;
        /* Override any old system classes */
        border-radius: 0 !important;
        /* Fix padding issues */
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    #side-menu-holder.mobile-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: flex !important;
        /* Ensure consistent height */
        height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }

    #side-menu-holder.mobile-open .close-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide hamburger when menu is open */
    #side-menu-holder.mobile-open ~ .hamburger-btn {
        display: none;
    }
    
    /* Force mobile menu to show when open - highest priority */
    body #side-menu-holder.mobile-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        /* Override any old system positioning and sizing */
        top: 0 !important;
        left: 0 !important;
        width: 65vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    
    /* Mobile menu container styling */
    body #side-menu-holder.mobile-open .menu-container {
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile menu content styling - NO SCROLLING */
    body #side-menu-holder.mobile-open .menu-content {
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        /* Fixed positioning below buttons */
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        transform: none !important;
        /* Remove any blur effects from content */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        /* NO SCROLLING - content should fit */
        overflow: visible !important;
    }
    
    /* Fix menu vertical center positioning */
    body #side-menu-holder.mobile-open .menu-vertical-center {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ensure main menu is properly positioned and visible by default */
    body #side-menu-holder.mobile-open .main-menu {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        /* Ensure main menu is visible by default */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* Remove any blur effects */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        /* No scrolling needed - content fits */
        overflow: visible !important;
    }
    
    /* Hide main menu when submenu is active */
    body #side-menu-holder.mobile-open .main-menu.hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    
    /* Fix menu items positioning */
    body #side-menu-holder.mobile-open .menu-content li {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 4rem !important;
        margin: 0 !important;
        padding: 0 !important;
        /* Remove any blur effects */
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Fix menu links positioning */
    body #side-menu-holder.mobile-open .menu-content li a {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 1rem !important;
        margin: 0 !important;
        display: block !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    
    /* When mobile-open is active, ignore all old system classes */
    body #side-menu-holder.mobile-open.hidden,
    body #side-menu-holder.mobile-open.expanded,
    body #side-menu-holder.mobile-open.visible {
        transform: translateX(0) !important;
        visibility: visible !important;
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        top: 0 !important;
        left: 0 !important;
        width: 65vw !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    /* Fix submenu positioning in mobile - only show when active */
    body #side-menu-holder.mobile-open .submenu {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        transform: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        background: rgba(167, 243, 237, 0.9) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        z-index: 10 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        /* Remove any blur filters from content */
        filter: none !important;
        /* NO SCROLLING on container - only list scrolls */
        overflow: visible !important;
    }
    
    /* Only show submenu when it's actually active */
    body #side-menu-holder.mobile-open .submenu.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        /* No padding on container - content will be positioned separately */
        padding: 0 !important;
    }
    
    /* Fix submenu list positioning - same level as main menu content */
    body #side-menu-holder.mobile-open .submenu ul {
        position: absolute !important;
        top: 10px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 18px) !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        /* Remove any blur effects */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        /* Ensure proper alignment with back button */
        padding-left: 0 !important;
        /* Add bottom padding to prevent overlap when scrolling */
        padding-bottom: 8px !important;
        /* Only the list should scroll */
        overflow-y: auto !important;
        /* Higher z-index than container to ensure visibility */
        z-index: 20 !important;
    }
    
    /* Position back button correctly in submenu - SAME LEVEL as X button */
    body #side-menu-holder.mobile-open .submenu .back-button {
        position: absolute !important;
        top: -60px !important;
        left: 0px !important;
        z-index: 15 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: rgba(43, 0, 102, 0.7) !important;
        padding: 10px !important;
        /* Same level as X button */
        transform: none !important;
    }
    
    /* Make back button bigger and thicker */
    body #side-menu-holder.mobile-open .submenu .back-button svg {
        width: 2.2rem !important;
        height: 2.2rem !important;
        stroke-width: 3px !important;
        stroke: rgba(43, 0, 102, 0.7) !important;
        fill: none !important;
    }
    
    /* Fix submenu items positioning */
    body #side-menu-holder.mobile-open .submenu ul li {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 4rem !important;
        transform: none !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
        /* Remove any blur effects */
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Fix submenu links positioning */
    body #side-menu-holder.mobile-open .submenu ul li a {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        padding: 1rem !important;
        margin: 0 !important;
        display: block !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile width adjustments for different screen sizes */
    @media (max-width: 480px) {
        #side-menu-holder,
        #side-menu-holder.mobile-open,
        body #side-menu-holder.mobile-open,
        body #side-menu-holder.mobile-open.hidden,
        body #side-menu-holder.mobile-open.expanded,
        body #side-menu-holder.mobile-open.visible {
            width: 65vw !important;
        }
    }
    
    @media (max-width: 430px) {
        #side-menu-holder,
        #side-menu-holder.mobile-open,
        body #side-menu-holder.mobile-open,
        body #side-menu-holder.mobile-open.hidden,
        body #side-menu-holder.mobile-open.expanded,
        body #side-menu-holder.mobile-open.visible {
            width: 50vw !important;
        }
    }
    
    @media (max-width: 360px) {
        #side-menu-holder,
        #side-menu-holder.mobile-open,
        body #side-menu-holder.mobile-open,
        body #side-menu-holder.mobile-open.hidden,
        body #side-menu-holder.mobile-open.expanded,
        body #side-menu-holder.mobile-open.visible {
            width: 70vw !important;
        }
    }
}