.page-products .columns,
.page-products .product-image-photo,
.page-products .product-item-info,
.product-image-wrapper {
	z-index: unset !important;
}

/* --- brukermeny ---*/
.custom-user-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60vh;
	background: #fff;
	z-index: 10001;
	padding: 30px;
	transform: translateY(100%);
	transition: transform 0.3s ease-in-out;
	border-radius: 17px 17px 0 0;
}

.custom-user-panel.active {
	transform: translateY(0%);
	background: #f9f9f9;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
	border-top: 4px solid #ffc107; /* a warning/trust color */
}

.custom-user-toggle {
	position: relative;
	background: none;
	border: none;
	font-size: 14px;
	cursor: pointer;
	z-index: 10002;
}

.custom-user-panel ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.custom-user-panel ul li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.custom-user-panel ul li:last-child {
  border-bottom: none;
}

.custom-user-panel ul a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  display: block;
  padding-left: 10px;
}
/* --- brukermeny ---*/


.submenu {
	position: absolute;
	z-index: 9999;
}

#custom-mobile-menu  a {
	color: black
}
#custom-mobile-menu a:visited, #custom-mobile-menu .alink:visited, #custom-mobile-menu .amstock-button.-link:visited {
	color: black
}

#custom-mobile-menu  a:hover, #custom-mobile-menu  .alink:hover {
	text-decoration: none
}

#custom-mobile-menu ul > li, #custom-mobile-menu ol > li{
	margin-bottom: 0;
	font-weight: 400;
	font-size: 1.2rem;
}
.custom-menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

#custom-login-toggle {
	margin-top: 8px;
	float: right;
	padding: 0;
	
}


.custom-menu-toggle svg {
	transition: transform 0.3s ease-in-out;
}

/* 🔥 Rotate on active state */
.custom-menu-toggle.active svg {
	transform: rotate(90deg);
}

/* ✅ Drag Handle */
.custom-menu-drag-handle {
	width: 50px;
	height: 6px;
	background: #d3d3d3;
	border-radius: 3px;
	margin: 10px auto;
	position: relative;
}

/* ✅ Close Button */
.custom-menu-close {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 24px;
	background: #fff;
	border: none;
	cursor: pointer;
	z-index: 1002;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* ✅ Shadow */
	border-radius: 50%; /* ✅ Makes it a circular button */
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ✅ Close Button Hover Effect */
.custom-menu-close:hover {
	background: #f1f1f1;
}


/* ✅ Enable scrolling inside the menu content */
.custom-menu-content {
	margin-top: 10px;
	max-height: 100%; /* Ensures it doesn't overflow the menu */
	overflow-y: auto; /* Enables vertical scrolling */
	padding-right: 10px; /* Prevents scrollbar from overlapping content */
}

/* ✅ Ensure smooth scrolling */
.custom-mobile-menu {
	overflow: hidden; /* Prevents body scrolling while menu is open */
	display: flex;
	flex-direction: column;
	transition: bottom 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* ✅ Hide scrollbar but still allow scrolling (optional) */
.custom-menu-content::-webkit-scrollbar {
	width: 6px; /* Thin scrollbar */
}

.custom-menu-content::-webkit-scrollbar-thumb {
	background: #ccc; /* Light grey scrollbar */
	border-radius: 3px;
}

.custom-menu-content::-webkit-scrollbar-track {
	background: transparent; /* Keeps it clean */
}


/* ✅ Hide Magento’s Default Menu */
.action.nav-toggle, .nav-sections {
	display: none !important;
}

/* ✅ Hamburger Button */
.custom-menu-toggle {
	position: absolute;
	top: 13px;
	left: 13px;
	font-size: 13px;
	background: none;
	border: none;
	cursor: pointer;
	color: #333;
	z-index: 1002;
	display: block;
	padding: 5px;
	background: black;
	border:none;
	border-radius: 100px;
}
#custom-menu-toggle rect {
	fill:white 
}
.custom-menu-toggle:hover, .custom-menu-toggle:active, .custom-menu-toggle:focus{
	background: black;
	border:none;
}

/* ✅ Overlay */
.custom-menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out;
	z-index: 9;
}

/* ✅ Mobile Menu (Hidden by Default) */
.custom-mobile-menu {
	border-radius: 17px 17px 0 0;
	position: fixed;
	bottom: -100%; /* Start hidden */
	left: 0;
	width: 100%;
	height: 60vh;
	background: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
	transition: bottom 0.3s ease-in-out;
	padding: 15px 0 15px 0;
	overflow: hidden; /* ✅ Prevent overflow when sliding submenus */
	z-index:1000;
}

/* ✅ Show menu when active (Slide Up) */
.custom-mobile-menu.active {
	bottom: 0;
}

/* ✅ Close Button */
.custom-menu-close {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 24px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 1002;
}

/* ✅ Show Overlay When Menu is Active */
.custom-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

/* ✅ Dropdown Caret */
.custom-dropdown-caret {
	margin-left: 8px;
	transform: rotate(0deg);
	transition: transform 0.3s;
	float: right;
	margin-right: 15px;
}

.custom-menu-item.has-children a[aria-expanded="true"] .custom-dropdown-caret {
	transform: rotate(180deg);
}


/* ✅ Add border between menu items */
.custom-menu-item {
	border-bottom: 1px solid #ddd; /* Light grey border */
	padding: 10px 0; /* Add spacing */
}
.custom-menu-item a {
	padding-left: 15px;
}

/* ✅ Remove border for the last item to keep it clean */
.custom-menu-item:last-child {
	border-bottom: none;
}

/* ✅ Style for submenu items */
.submenu li {
	border-bottom: 1px solid #eee;
	padding: 10px 0 20px 0;
}

/* ✅ Remove border from the last submenu item */
.submenu li:last-child {
	border-bottom: none;
}

/* ✅ Hide submenus by default */
.submenu {
	position: absolute;
	top: 0;
	left: 100%; /* Start off-screen */
	width: 100%;
	height: 100%;
	background: #fff;
	transition: transform 0.3s ease-in-out; /* ✅ Smooth slide-in effect */
	z-index: 1002;
	display: block;
	opacity: 0;
	visibility: hidden;
	padding-left: 0;
}

/* ✅ Show submenu when active */
.submenu.active {
	transform: translateX(10%); /* Moves it into view */
opacity: 1;
visibility: visible;
}

/* ✅ Move main menu when submenu is active */
.custom-mobile-menu.submenu-active .custom-menu-list {
	transform: translateX(-110%);
	transition: transform 0.3s ease-in-out;
}

/* ✅ Prevents menu from going blank */
.custom-mobile-menu.submenu-active {
	overflow: hidden;
}

/* ✅ Prevents submenu from going out of view */
.custom-mobile-menu {
	overflow: hidden; /* Ensures no overflow issues */
}



/* ✅ Submenu Back Button */
.submenu .submenu-back {
	display: flex;
align-items: center;
gap: 8px;
padding: 9px 0 9px 0;
background: transparent;
font-weight: bold;
cursor: pointer;
border-bottom: 1px solid #ddd;
}

/* ✅ Style the Back Button */
.submenu .submenu-back a {
 display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #333;
font-size: 16px;
}

/* ✅ Back Button Transition */
.submenu.hidden {
	left: 100%;
	transition: left 0.3s ease-in-out;
}

/* ✅ Back Button Icon */
.submenu .submenu-back svg {
	width: 16px;
	height: 16px;
}



/* ✅ Mobile Adjustments */
@media (max-width: 767px) {
	.custom-menu-list {
		padding-left: 0px;
		padding-top: 15px;
	}
	.custom-menu-list .custom-menu-item {
		margin-top: 0px;
	}
	.submenu {
		position: absolute;
		top: 0;
		left: 100%; /* Start off-screen */
		width: 100%;
		height: 100%;
		background: #fff;
		transition: transform 0.3s ease-in-out;
		z-index: 1002;
		opacity: 0;
		visibility: hidden;
	}
	
	/* ✅ Show submenu when active */
	.submenu.active {
		transform: translateX(0%);
		opacity: 1;
		visibility: visible;
	}
	
	/* ✅ Move main menu when submenu is active */
	.custom-mobile-menu.submenu-active .custom-menu-list {
		transform: translateX(-100%);
	}
}

/* ✅ Desktop Navigation */
@media (min-width: 768px) {
	.submenu {
		position: absolute;
		top: 100%;
		left: 0;
		background: #fff;
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
		z-index: 10000; /* Ensure it's on top */
		display: none;
	}
	
	/* ✅ Show dropdown on hover */
	.custom-menu-item:hover .submenu {
		display: block;
	}
	.custom-menu-content {
		margin-top: 0;
		max-height: inherit;
		overflow-y: auto;
		padding-right: 10px;
		overflow: visible !important;

	}
	
	/* ✅ Ensure the main menu displays properly */
	.custom-mobile-menu {
			position: static;
			display: flex !important;
			justify-content: left;
			align-items: center;
			padding: 0;
			height: inherit;
			overflow: visible;
			z-index: 10000;
			padding-left: 0;
			bottom: unset;
			width: unset;
			background: transparent;
			left: 18px;
			padding-top: 0;
			top: -40px;
			border-radius: unset;
			box-shadow: unset;
			
			}

	/* ✅ Style for the main menu list */
	.custom-menu-list {
		display: flex;
		gap: 0;
		padding: 0;
		margin: 0;
		list-style: none;
		align-items: center;
	}

	.custom-menu-item {
		position: relative;
		font-weight: normal;
		z-index: 9998!important!
	}

	.custom-menu-item a {
		text-decoration: none;
		color: #333;
		padding: 10px 8px;
		display: block;
	}
	.custom-mobile-menu {
		position: relative;
		z-index: 10000!important;
	}

	/* ✅ Style for the submenu */
	.submenu {
		display: none;
		position: absolute;
		top: 85%;
		left: 15;
		background: #fff;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
		min-width: 220px;
		list-style: none;
		padding: 10px;
		margin: 0;
		border-radius: 5px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
		z-index: 9999!important;
	}
	.custom-menu-item {
		border-bottom: none;
		page: inherit;
		
	}

	/* ✅ Show the submenu when hovering */
	.custom-menu-item:hover > .submenu {
		display: block !important;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		height: auto;
	}

	/* ✅ Style submenu items */
	.submenu li {
		padding: 6px 10px;
		border-bottom: none;
	}
	.custom-menu-item .submenu a {
		padding: 0px 0px;
		font-weight: normal;
	}

	.submenu li:last-child {
		border-bottom: none;
	}

	/* ✅ Ensure the caret is smaller and aligned */
	.custom-dropdown-caret {
		width: 9px; /* Smaller */
		height: 9px;
		margin-left: 5px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.3s;
		vertical-align: middle;
		margin-top: 8px;
	}

	/* ✅ Rotate Caret on Hover */
	.custom-menu-item:hover > a .custom-dropdown-caret {
		transform: rotate(180deg);
	}

	/* ✅ Hide Mobile-Specific Elements on Desktop */
	.custom-menu-toggle,
	.custom-menu-close,
	.custom-menu-overlay,
	.custom-menu-drag-handle,
	.submenu .submenu-back {
		display: none !important;
	}
	

		.submenu li {
			padding: 6px 10px;
			border-bottom: none;
			transition: background 0.3s ease-in-out; /* Smooth transition */
			border-radius: 5px; /* Rounded corners */
			margin: 2px 0; /* Small spacing between items */
		}
	
		/* ✅ Background Change & Border-Radius on Hover */
		.submenu li:hover {
			background: #dddddd;
			border-radius: 5px;
		}
	
		/* ✅ Make the list item fill almost the full dropdown */
		.submenu li a {
			display: block;
			padding: 8px 12px;
			border-radius: 5px;
			width: 95%; /* Adjust width to be slightly less than full */
		}
	
}

.mobile-menu-header {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	text-align: center;
	padding-top: 20px;
	
}