/* ========================================
   MEGA MENU - COMPLETE THEME OVERRIDE
   This file completely overrides theme conflicts
   ======================================== */

/* ========================================
   RESET ALL THEME ARROW STYLES
   ======================================== */

/* AGGRESSIVE THEME ARROW REMOVAL - TARGET ALL THEME SELECTORS */

/* Remove theme arrows from header.scss lines 36-47 - PRESERVE BACKGROUNDS */
.primary ul li.menu-item-has-children ul:has(li ul) li.menu-item-has-children > a:after,
.primary ul li.menu-item-has-children ul:has(li ul) li a::after,
.primary ul li.menu-item-has-children ul:has(li ul) li a::before,
.primary ul li.menu-item-has-children ul:has(li ul) li::after,
.primary ul li.menu-item-has-children ul:has(li ul) li::before {
	display: none !important;
	content: none !important;
	transform: none !important;
	width: auto !important;
	height: auto !important;
	position: static !important;
	right: auto !important;
	top: auto !important;
}

/* Remove theme hover arrows - PRESERVE BACKGROUNDS */
.primary ul li.menu-item-has-children ul:has(li ul) li a:hover::after,
.primary ul li.menu-item-has-children ul:has(li ul) li:hover a::after {
	display: none !important;
	content: none !important;
	right: auto !important;
}

/* Force remove theme arrows with mega menu container - EXCLUDE VIDEO ELEMENTS */
.mega-menu-container * a::after,
.mega-menu-container * a::before,
.mega-menu-container *::after,
.mega-menu-container *::before {
	display: none !important;
	content: none !important;
}

/* ========================================
   MEGA MENU STYLES
   ======================================== */

/* Mega menu specific styles only */

/* Target specific theme mobile menu arrows - PRESERVE BACKGROUNDS */
.primary ul li.menu-item-has-children ul:has(li ul) li.menu-item a:after,
.primary ul li.menu-item-has-children ul:has(li ul) li.menu-item-has-children > a:after {
	display: none !important;
	content: none !important;
}

/* ========================================
   MAIN MENU STYLING - NO TOP SPACE
   ======================================== */

/* Remove all header spacing and borders */
header.header {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

header.header .header-navs {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

header.header .nav-container {
	margin-top: 0 !important;
	padding-top: 0 !important;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* ========================================
   DESKTOP ONLY - MAIN MENU STYLING
   ======================================== */
@media (min-width: 1025px) {

/* Target main menu specifically - bottom corners only */
.primary.hide-mobile > ul {
	border-radius: 0 0 12px 12px !important;
	padding: 16px 16px !important;
	position: relative;
	margin-bottom: 20px;
}

} /* End Desktop Main Menu Media Query */

.header .header-navs .nav-container .primary.hide-desktop {
	margin-top: 85px;
}

/* ========================================
   DESKTOP ONLY - MEGA MENU & CUSTOM DROPDOWNS
   ======================================== */
@media (min-width: 1025px) {

/* ========================================
   DEFAULT MENU STYLING (2-LEVEL MENUS)
   ======================================== */

.primary ul li.menu-item-has-children ul {
	background: #edf1f5 !important;
	box-shadow: 0px 3px 24px 10px rgba(0, 0, 0, 0.04) !important;
	position: absolute !important;
	top: 100% !important;
	opacity: 0 !important;
	visibility: hidden !important;
	flex-direction: column !important;
	/* padding: 20px !important; */
	width: max-content !important;
	left: -30px !important;
	height: fit-content !important;
	transition: opacity 300ms !important;
	transform: translateY(-20px) !important;
	overflow: hidden !important;
	border-radius: 30px !important;
	border: 1px solid #e5e5e5 !important;
}
.primary ul li:nth-child(2) ul{
	background-color: var(--color-light) !important;
}

.primary ul li.menu-item-has-children:hover ul {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

/* ========================================
   MEGA MENU - 3-LEVEL MENUS ONLY
   ======================================== */

/* MEGA MENU - Clean and stable without gap */
.primary ul li.menu-item-has-children ul:has(li ul) {
	background: #ffffff !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
	border-radius: 24px !important;
	padding: 40px !important;
	width: 1000px !important;
	left: 0 !important;
	display: block !important;
	min-height: 450px !important;
	border: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	position: absolute !important;
	top: 100% !important;
	transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Simple hover activation - no bridge needed */
.primary ul li.menu-item-has-children:hover ul:has(li ul) {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Clean mega menu with CSS + JavaScript hybrid approach */

/* Main menu item positioning for mega menu */
.primary ul li.menu-item-has-children:has(ul ul) {
	position: relative !important;
}

/* ========================================
   MEGA MENU CONTAINER (JAVASCRIPT CREATED)
   ======================================== */

.mega-menu-container {
	display: flex !important;
	flex-direction: row !important;
	gap: 30px !important;
	min-height: 400px !important;
}

/* ========================================
   COLUMN 1: MAIN CATEGORIES
   ======================================== */

.mega-column-1 {
	flex: 0 0 270px !important;
	width: 270px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	padding: 20px !important;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0.80) 100%) !important;
}

.mega-category {
	margin-bottom: 12px !important;
}

.mega-category a {
	display: block !important;
	padding: 18px 50px 18px 24px !important;
	background: #FFFFFF1A !important;
	border: 1px solid #FFFFFF1A !important;
	border-radius: 16px !important;
	color: var(--color-dark) !important;
	text-decoration: none !important;
	font-weight: 400 !important;
	font-size: 20px !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
}

/* FORCE SINGLE ARROW - Override ALL theme conflicts */
.mega-menu-container .mega-category a::after {
	content: "" !important;
	position: absolute !important;
	right: 18px !important;
	top: 48% !important;
	transform: translateY(-50%) !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	background-image: url("assets/img/expand_circle_right.svg") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 33px 33px !important;
	z-index: 99999 !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* REMOVE ALL OTHER PSEUDO ELEMENTS */
.mega-menu-container .mega-category a::before,
.mega-menu-container .mega-category::before,
.mega-menu-container .mega-category::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
}

.mega-category.active a,
.mega-category a:hover {
	background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.3) 80%, transparent 100%), url('assets/img/mega_menu_bg.png') no-repeat right center !important;
	background-size: auto, cover !important;
	background-position: right center !important;
	background-attachment: scroll !important;
	color: #ffffff !important;
	border-color: var(--color-light) !important;
	position: relative !important;
	min-height: 60px !important;
	display: block !important;
	width: 100% !important;
}

.header .mega-menu-container .mega-category.active a::after,
.header .mega-menu-container .mega-category a:hover::after {
	/* background: #ffffff !important; */
	background-image: url("assets/img/expand_circle_right_active.svg") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}

/* ========================================
   COLUMN 2: SUB-CATEGORIES
   ======================================== */

.mega-column-2 {
	flex: 0 0 480px !important;
	width: 480px !important;
	background: #edf1f5 !important;
	/* border-radius: 20px !important; */
	padding: 20px 0 !important;
	position: relative !important;
}

.mega-subcategories {
	display: none !important;
}

.mega-subcategories.active {
	display: block !important;
}

.mega-subcategory {
	margin-bottom: 16px !important;
}

.mega-subcategory a {
	display: block !important;
	padding: 24px !important;
	background: #ffffff !important;
	border: 1px solid #e5e5e5 !important;
	border-radius: 16px !important;
	color: #333333 !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
	min-height: 85px !important;
}

/* Product Title - Main text */
.mega-subcategory .product-title {
	font-weight: 400 !important;
	font-size: 20px !important;
	color: var(--color-dark) !important;
	margin-bottom: 6px !important;
	line-height: 1.2 !important;
}

/* Product Subtitle - Description text */
.mega-subcategory .product-subtitle {
	font-weight: 300 !important;
	font-size: 16px !important;
	color: var(--color-dark) !important;
	line-height: 1.3 !important;
	margin-bottom: 0 !important;
}

/* SELECTIVE THEME ARROW REMOVAL - Target subcategories only */
.mega-menu-container .mega-subcategory a::after:not(.mega-subcategory-link::after),
.mega-menu-container .mega-subcategory a::before,
.mega-menu-container .mega-subcategory::after,
.mega-menu-container .mega-subcategory::before {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	position: static !important;
	transform: none !important;
}

/* Remove theme arrows from subcategory links specifically */
.mega-menu-container .mega-subcategory li a::after,
.mega-menu-container .mega-subcategory li a::before,
.mega-menu-container .mega-column-2 a::after:not(.mega-subcategory-link::after),
.mega-menu-container .mega-column-2 a::before,
.mega-menu-container .mega-column-2 *::after:not(.mega-subcategory-link::after),
.mega-menu-container .mega-column-2 *::before {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	position: static !important;
	transform: none !important;
}

/* ULTIMATE SUBCATEGORY ARROW REMOVAL - every possible theme selector */
.mega-menu-container .mega-subcategory div a::after:not(.mega-subcategory-link::after),
.mega-menu-container .mega-subcategory div a::before,
.mega-menu-container .mega-subcategories a::after:not(.mega-subcategory-link::after),
.mega-menu-container .mega-subcategories a::before,
.mega-menu-container .mega-subcategories li::after,
.mega-menu-container .mega-subcategories li::before,
.mega-menu-container .mega-subcategories *::after:not(.mega-subcategory-link::after),
.mega-menu-container .mega-subcategories *::before {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

/* FORCE SINGLE ARROW WITH ULTIMATE SPECIFICITY */
.mega-menu-container .mega-subcategory a.mega-subcategory-link::after {
	content: "" !important;
	position: absolute !important;
	right: 20px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 28px !important;
	height: 28px !important;
	/* background: #f8f9fa !important; */
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	background-image: url("assets/img/expand_circle_right.svg") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 33px 33px !important;
	z-index: 99999 !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
}

/* REMOVE ALL OTHER PSEUDO ELEMENTS FOR SUBCATEGORIES */
.mega-menu-container .mega-subcategory a::before,
.mega-menu-container .mega-subcategory::before,
.mega-menu-container .mega-subcategory::after {
	display: none !important;
	content: none !important;
	background: none !important;
	background-image: none !important;
}

.mega-subcategory a:hover {
	background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.3) 80%, transparent 100%), url('assets/img/mega_menu_bg.png') no-repeat right center !important;
	background-size: auto, cover !important;
	background-position: right center !important;
	transform: translateY(-2px) !important;
	position: relative !important;
	overflow: hidden !important;
	min-height: 50px !important;
}

.mega-subcategory a:hover .product-title {
	color: #ffffff !important;
}

.mega-subcategory a:hover .product-subtitle {
	color: #cccccc !important;
}

.header .mega-menu-container .mega-subcategory a.mega-subcategory-link:hover::after {
	/* background: #ffffff !important; */
	background-image: url("assets/img/expand_circle_right_active.svg") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	opacity: 1 !important;
	visibility: visible !important;
	z-index: 99999 !important;
}

/* ========================================
   COLUMN 3: PRODUCT IMAGE
   ======================================== */

.mega-column-3 {
	flex: 1 !important;
	min-width: 380px !important;
	background: #ffffff !important;
	border: 4px solid #ffffff !important;
	border-radius: 20px !important;
	/* padding: 24px !important; */
	margin: 20px 20px 20px 0px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.mega-product-image {
	width: 100% !important;
	height: 470px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><rect width="120" height="120" fill="%23f8f9fa" rx="12"/><text x="60" y="60" text-anchor="middle" dy=".3em" fill="%236c757d" font-family="Arial, sans-serif" font-size="14" font-weight="500">Product Image</text></svg>') !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 120px 120px !important;
	color: #6c757d !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	transition: all 0.3s ease !important;
}

.mega-product-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	aspect-ratio: 1/2 !important;
	border-radius: 20px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
	transition: all 0.3s ease !important;
}

.mega-product-image:has(img) {
	background-image: none !important;
}

} /* End Desktop Only Media Query */

/* ========================================
   MOBILE MENU - THIRD LEVEL SUPPORT
   ======================================== */
@media (max-width: 1024px) {
	
	/* Ensure 3-level menus work on mobile */
	header.header .header-navs .nav-container nav.primary ul li ul {
		background-color: var(--color-light) !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		position: relative !important;
		opacity: 1 !important;
		padding: 0 5% !important;
		transform: none !important;
		top: auto !important;
		left: 0 !important;
		overflow: hidden !important;
		transition: .3s !important;
		visibility: visible !important;
		width: 100% !important;
		border: none !important;
	}

	/* Third level menu support */
	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children {
		position: relative !important;
	}

	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children > a:after {
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 6 10' style='enable-background:new 0 0 6 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23231F20;%7D%0A%3C/style%3E%3Cpath class='st0' d='M6,5c0,0.3-0.1,0.5-0.3,0.7l-4,4c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L3.6,5L0.4,1.7C0,1.4,0,0.7,0.3,0.3 c0.4-0.4,1-0.4,1.4-0.1c0,0,0.1,0.1,0.1,0.1l3.9,4C5.9,4.5,6,4.8,6,5z'/%3E%3C/svg%3E%0A") !important;
		background-repeat: no-repeat !important;
		transform: translateY(-50%) !important;
		content: "" !important;
		width: 7px !important;
		height: 12px !important;
		display: block !important;
		transition: .3s ease !important;
		background-size: 7px !important;
		position: absolute !important;
		right: 20px !important;
		top: 50% !important;
	}

	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children.active > a:after {
		transform: translateY(-50%) rotate(90deg) !important;
	}

	/* Third level menu styling - Match main menu design */
	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children ul {
		background-color: var(--color-secondary) !important; /* Same as main mobile menu */
		margin: 0 !important;
		padding: 0 5% !important; /* Same padding as second level */
		max-height: 0 !important;
		overflow: hidden !important;
		transition: max-height 0.3s ease !important;
		border-radius: 0 !important;
		position: relative !important;
		opacity: 1 !important;
		visibility: visible !important;
		width: 100% !important;
		border: none !important;
	}

	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children.active ul {
		max-height: var(--third-level-height, 1200px) !important; /* Much larger fallback */
	}

	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children ul li {
		border-bottom: 1px solid var(--color-line) !important; /* Consistent border */
		display: block !important;
		width: 100% !important;
		font-weight: 600 !important;
		text-align: center !important; /* Center align like main menu */
	}

	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children ul li a {
		display: block !important;
		/* padding: 16px 5% !important; */
		line-height: 50px !important; /* Match main menu line height */
		width: 100% !important;
		font-size: 18px !important; /* Match main menu font size */
		font-weight: 600 !important; /* Match main menu font weight */
		letter-spacing: 0.05em !important; /* Match main menu letter spacing */
		text-transform: uppercase !important; /* Match main menu text transform */
		text-align: center !important; /* Center align text */
		color: var(--color-primary) !important; /* Use theme color */
		min-height: 50px !important;
		border-bottom: 1px solid #e7edec !important; /* Remove individual borders */
		position: relative !important;
	}

	header.header .header-navs .nav-container nav.primary ul li ul li.menu-item-has-children ul li a:hover {
		background-color: var(--color-secondary) !important; /* Match hover behavior */
		color: var(--color-primary) !important;
	}


	header.header .header-navs .nav-container nav.primary ul li.menu-item.menu-item-has-children>a:after {
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 27.8.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 6 10' style='enable-background:new 0 0 6 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23231F20;%7D%0A%3C/style%3E%3Cpath class='st0' d='M6,5c0,0.3-0.1,0.5-0.3,0.7l-4,4c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L3.6,5L0.4,1.7C0,1.4,0,0.7,0.3,0.3 c0.4-0.4,1-0.4,1.4-0.1c0,0,0.1,0.1,0.1,0.1l3.9,4C5.9,4.5,6,4.8,6,5z'/%3E%3C/svg%3E%0A") !important;
		background-repeat: no-repeat !important;
		transform: translateY(-50%) !important;
		content: "" !important;
		width: 7px !important;
		height: 12px !important;
		display: block !important;
		transition: .3s ease !important;
		background-size: 7px !important;
		position: absolute !important;
		right: 20px !important;
		top: 50% !important;
	}
	header.header .header-navs .nav-container nav.primary ul li.menu-item.menu-item-has-children.active>a:after {
		transform: translateY(-50%) rotate(90deg) !important;
	}
	
}

@media (max-width: 768px) {
	.primary ul li.menu-item-has-children ul:has(li ul) {
		width: 100vw !important;
		left: 0 !important;
		transform: translateY(-20px) !important;
		padding: 20px !important;
	}
	
	.primary ul li.menu-item-has-children:hover ul:has(li ul) {
		transform: translateY(0) !important;
	}
	
	.mega-menu-container {
		flex-direction: column !important;
		gap: 20px !important;
	}
	
	.mega-column-1,
	.mega-column-2 {
		flex: none !important;
		width: 100% !important;
	}
	
	.mega-product-image {
		height: 200px !important;
	}
}