/**
 * -----------------------
 * header nav body overlay
 * -----------------------
 */

body .page-wrapper::after {
	pointer-events: none;
	content: '';
	display: block;
	position: absolute;
	top: -1px;
	left: -1px;
	width: calc( 100vw + 2px );
	height: calc( 100% + 2px );
	background-color: transparent;
	opacity: 0.75;
	z-index: 98;
	transition: all 0.1s;
}

body:has(.wc-product-search-form > .results-wrapper.active) .page-wrapper::after,
body:has(.woocommerce-mini-cart:not([data-item-count="0"]):hover) .page-wrapper::after,
body:has(.menu li.nav-list-parent:hover) .page-wrapper::after,
body:has(#header > .mobile > .menu.active) .page-wrapper::after,
body:has(.my-account-btn[data-logged-in="1"]:hover) .page-wrapper::after {
	background-color: var( --color-panthablack );
}

/**
 * -------------------------
 * header my account actions
 * -------------------------
 */

#header .my-account-btn {
	position: relative;
}

#header .my-account-btn:hover {
	z-index: 99;
}

#header .my-account-btn .my-account-actions {
	display: none;
	position: absolute;
	top: 35px;
	right: 0;
	padding-top: 10px;
}

#header .my-account-btn[data-logged-in="1"]:hover .my-account-actions {
	display: block;
}

#header .my-account-btn .my-account-actions > div {
	padding: 10px;
	min-width: 200px;
	border: 1px solid var( --color-pearlgray-light );
	border-radius: 5px;
	background-color: var( --color-white );
	box-shadow: 0 20px 20px rgba( 0, 0, 0, 0.25 );
}

#header .my-account-btn .my-account-actions > div > p.action-welcome {
	font-size: 14px;
	line-height: 1.6em;
	margin-bottom: 10px;
	padding-bottom: 10px;
	color: var( --color-panthablack );
	font-weight: 700;
	white-space: nowrap;
	border-bottom: 1px solid var( --color-pearlgray-light );
}

#header .my-account-btn .my-account-actions > div > img {
	margin-bottom: 10px;
	border-radius: 2px;
}

#header .my-account-btn .my-account-actions > div > a {
	display: block;
	font-size: 14px;
	line-height: 1.6em;
	color: var( --color-panthablack );
	white-space: nowrap;
	transition: all 0.1s;
}

#header .my-account-btn .my-account-actions > div > a:not(:last-child) {
	margin-bottom: 10px;
}

#header .my-account-btn .my-account-actions > div > a:hover {
	color: var( --color-orange );
}

#header .my-account-btn .my-account-actions > div > .action-customer-logout {
	border-top: 1px solid var( --color-pearlgray-light );
	padding-top: 10px;
}


/**
 * ------
 * header
 * ------
 */

#header {
	z-index: 99;
	transition: box-shadow 0.25s;
	border-top: none;
	border-bottom: 1px solid var( --color-pearlgray-light );
}

#header:has(.sub) {
	border-color: var( --color-panthablack );
}

#header.is-stuck {
	box-shadow: 0 0 20px var( --color-black );
}

	/**
	 * --------------
	 * header desktop
	 * --------------
	 */

	#header > .desktop {
		position: relative;
	}

	@media( max-width: 783px ) {
		#header > .desktop {
			display: none;
		}
	}

		/**
		 * -------------------
		 * header desktop main
		 * -------------------
		 */

		#header > .desktop > .main {
			background: url( '../img/header-polygon-bg-light.svg' );
		  	background-size: cover;
		  	background-position: center;
		  	background-color: var( --color-panthagray );
		  	background-repeat: no-repeat;
		}

		#header > .desktop > .main::before {
			pointer-events: none;
			content: '';
			display: block;
			position: absolute;
			top: -1px;
			left: -1px;
			width: calc( 100vw + 2px );
			height: calc( 100% + 2px );
			background-color: transparent;
			opacity: 0.75;
			z-index: 98;
			transition: all 0.1s;
		}

		#header > .desktop > .main:has(.wc-product-search-form > .results-wrapper.active)::before,
		#header > .desktop > .main:has(.woocommerce-mini-cart:not([data-item-count="0"]):hover)::before,
		#header > .desktop > .main:has(.my-account-btn[data-logged-in="1"]:hover)::before {
			background-color: var( --color-panthablack );
		}

		#header > .desktop > .main > .container {
			position: relative;
			display: flex;
			flex-wrap: nowrap;
			column-gap: 20px;
			align-items: center;
		}

			/**
			 * --------------------------
			 * header desktop main column
			 * --------------------------
			 */

			#header > .desktop > .main > .container > .column {
				min-height: 100%;
			}

			/**
			 * -------------------------------
			 * header desktop main column logo
			 * -------------------------------
			 */

			#header > .desktop > .main > .container > .column.logo {
				flex: none;
				position: relative;
				margin-top: 15px;
				margin-bottom: 15px;
				align-content: end;
				max-width: unset;
			}

			#header > .desktop > .main > .container > .column.logo > a {
				min-width: 175px;
			}

			#header > .desktop > .main > .container > .column.logo > a > img {
				display: block;
				max-height: 55px;
			}

			#header > .desktop > .main > .container > .column.logo > .webshop-badge {
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				font-family: 'Oswald';
				font-size: 12px;
				line-height: 1em;
				font-weight: 700;
				text-transform: uppercase;
				color: var( --color-white );
				padding: 0.5em 0.6em;
				background-color: var( --color-panthagray );
				border-radius: 2px;
			}

			/**
			 * ------------------------------
			 * header desktop main column nav
			 * ------------------------------
			 */

			#header > .desktop > .main > .container > .column.content {
				flex: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				row-gap: 15px;
			}

				/**
				 * ---------------------------------------------
				 * header desktop main column navigation contact
				 * ---------------------------------------------
				 */

				#header > .desktop > .main > .container > .column.content > .contact > aside {
					font-size: 10px;
					margin-bottom: 0px;
					line-height: 1em;
					height: 1em;
				}

				/**
				 * -----------------------------------------------
				 * header desktop main container column navigation 
				 * -----------------------------------------------
				 */

				#header > .desktop > .main > .container > .column.content > .navigation {
					display: flex;
					flex-wrap: nowrap;
					align-items: flex-end;
					justify-content: end;
					column-gap: 10px;
				}

					/**
					 * -----------------------------------------------------------
					 * header desktop main container column navigation column menu
					 * -----------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu {
						flex: auto;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li.nav-list-parent::after {
						background-color: var( --color-pearlgray-light );
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li.nav-list-parent:hover::after,
					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li.nav-list-parent.acticve::after {
						background-color: var( --color-orange );
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > a {
						font-family: 'Oswald';
						font-size: 25px;
						padding-top: 0;
						padding-bottom: 15px;
						text-transform: uppercase;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul {
						box-shadow: 0 20px 20px rgba( 0, 0, 0, 0.25 );
						border-color: var( --color-pearlgray-light );
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-image {
						flex: none;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-image > img {
						width: auto;
						height: auto;
						max-width: 50px;
						max-height: 50px;
						vertical-align: middle;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-text {
						flex: auto;
						overflow: hidden;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-text > .menu-item-title {
						display: block;
						font-weight: 700;
						line-height: 1.4em;
						white-space: nowrap;
					    overflow: hidden;
					    text-overflow: ellipsis;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-text > .menu-item-title > .menu-item-icon {
						vertical-align: center;
						margin-right: 5px;
						line-height: 1.4em;
						width: 1.4em;
						height: 1.4em;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-text > .menu-item-tip {
						display: none;
						position: absolute;
						top: calc( 100% + 10px );
						left: 50%;
						border-radius: 5px;
						padding: 0 5px;
						z-index: 1;
						transform: translateX( -50% );
						text-align: center;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-text > .menu-item-tip::before {
						content: '';
						position: absolute;
						top: -4px;
						left: 50%;
						width: 10px;
						height: 10px;
						background-color: inherit;
						transform: translateX( -50% ) rotate( 45deg );
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a:hover > .menu-item-text > .menu-item-tip {
						display: block;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul > li > a > .menu-item-text > .menu-item-description {
						display: block;
					    font-size: 10px;
					    line-height: 1.6em;
					    white-space: break-spaces;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide {
						grid-auto-flow: row;
						grid-template-rows: unset;
						grid-column-gap: 0;
						padding: 0 20px;
						overflow: hidden;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide.active {
						display: grid;
						padding: 0;
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide > li {
						border-bottom: 1px solid var( --color-pearlgray-light );
						border-right: 1px solid var(--color-pearlgray-light);
						margin-bottom: -1px;
						margin-right: -1px;
						min-width: 0;
						padding: 20px;
						align-content: center;
					}

	    			#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide > li > a:after {
	    				display: none;
	    			}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide.popup-cols-col-6 {
				    	grid-template-columns: repeat( 6, auto );
					}

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide.popup-cols-col-5 {
				    	grid-template-columns: repeat( 5, auto );
					}
					
					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide.popup-cols-col-4 {
				    	grid-template-columns: repeat( 4, auto );
					}
					
					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide.popup-cols-col-3 {
				    	grid-template-columns: repeat( 3, auto );
					}
					
					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu > ul > li > ul.wide.popup-cols-col-2 {
				    	grid-template-columns: repeat( 2, auto );
					}

					/**
					 * -----------------------------------------------------------
					 * header desktop main container column navigation column shop
					 * -----------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.shop {
						flex: none;
						margin-bottom: 15px;
					}

					/**
					 * ----------------------------------------------------------------------------
					 * header desktop main container column navigation column before-header-buttons
					 * ----------------------------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.before-header-buttons {
						flex: none;
						margin-bottom: 15px;
					}

					/**
					 * -----------------------------------------------------------
					 * header desktop main container column navigation column form
					 * -----------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.form {
						flex: auto;
						width: 25%;
						margin-bottom: 15px;
					}

					/**
					 * -----------------------------------------------------------------
					 * header desktop main container column navigation column my-account
					 * -----------------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.my-account {
						flex: none;
						margin-bottom: 15px;
					}

					/**
					 * ----------------------------------------------------------------
					 * header desktop main container column navigation column mini-cart
					 * ----------------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.mini-cart {
						flex: none;
						margin-bottom: 15px;
					}

					/**
					 * ----------------------------------------------------------------
					 * header desktop main container column navigation column menu-bars
					 * ----------------------------------------------------------------
					 */

					#header > .desktop > .main > .container > .column.content > .navigation > .column.menu-bars {
						display: none;
						flex: none;
						margin-bottom: 15px;
					}

					@media( max-width: 783px ) {
						#header > .desktop > .main > .container > .column.content > .navigation > .column.menu-bars {
							display: block;
						}
					}

		/**
		 * ------------------
		 * header desktop sub
		 * ------------------
		 */

		#header > .desktop > .sub {
			border-top: 1px solid var( --color-panthablack );
			background-color: var( --color-panthagray );
			transition: all 0.1s;
		}

			/**
			 * -----------------------
			 * header desktop sub menu
			 * -----------------------
			 */

			#header > .desktop > .sub > .container {
				border-left: 1px solid var( --color-panthablack );
				border-right: 1px solid var( --color-panthablack );
			}

				/**
				 * -----------------------------------
				 * header desktop sub menu first layer
				 * -----------------------------------
				 */

				#header > .desktop > .sub > .container > .menu > ul > li > a {
					color: var( --color-white );
					font-weight: 600;
				}

				#header > .desktop > .sub > .container > .menu > ul > li.active > a,
				#header > .desktop > .sub > .container > .menu > ul > li:hover > a {
					color: var( --color-orange );
				}

					/**
					 * ------------------------------------
					 * header desktop sub menu second layer
					 * ------------------------------------
					 */

					#header > .desktop > .sub > .container > .menu > ul > li > ul {
						box-shadow: 0 20px 20px rgba( 0, 0, 0, 0.25 );
					}


	/**
	 * -------------
	 * header mobile
	 * -------------
	 */

	#header > .mobile {
		display: none;
		z-index: 99;
	}

	@media( max-width: 783px ) {
		#header > .mobile {
			display: block;
		}
	}

		/**
		 * ------------------
		 * header mobile main
		 * ------------------
		 */

		#header > .mobile > .main {
			background: url( '../img/header-polygon-bg-light.svg' );
		  	background-size: cover;
		  	background-position: center;
		  	background-color: var( --color-panthagray );
		  	background-repeat: no-repeat;
		}

		#header > .mobile > .main::after {
			pointer-events: none;
			content: '';
			display: block;
			position: absolute;
			top: -1px;
			left: -1px;
			width: calc( 100vw + 2px );
			height: calc( 100% + 2px );
			background-color: transparent;
			opacity: 0.75;
			z-index: 98;
			transition: all 0.1s;
		}

		#header > .mobile:has(.menu.active) > .main::after,
		#header > .mobile > .main:has(.wc-product-search-form > .results-wrapper.active)::after {
			background-color: var( --color-panthablack );
		}

			/**
			 * ----------------------------
			 * header mobile main container
			 * ----------------------------
			 */

			#header > .mobile > .main > .container {
				position: relative;
				display: flex;
				flex-wrap: nowrap;
				align-items: flex-end;
				column-gap: 10px;
			}

				/**
				 * ----------------------------------------
				 * header mobile main container column logo
				 * ----------------------------------------
				 */

				#header > .mobile > .main > .container > .column.logo {
					flex: auto;
					position: relative;
					margin-top: 15px;
					margin-bottom: 15px;
					align-content: end;
					max-width: unset;
				}

				#header > .mobile > .main > .container > .column.logo > a {
					min-width: 175px;
				}

				#header > .mobile > .main > .container > .column.logo > a > img {
					display: block;
					max-height: 45px;
				}

				#header > .mobile > .main > .container > .column.logo > .webshop-badge {
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					font-family: 'Oswald';
					font-size: 12px;
					line-height: 1em;
					font-weight: 700;
					text-transform: uppercase;
					color: var( --color-white );
					padding: 0.5em 0.6em;
					background-color: var( --color-panthagray );
					border-radius: 2px;
				}

				/**
				 * ----------------------------------------------------------------------------
				 * header mobile main container column navigation column before-header-buttons
				 * ----------------------------------------------------------------------------
				 */

				#header > .mobile > .main > .container > .column.before-header-buttons {
					flex: none;
					margin-bottom: 15px;
				}

				#header > .mobile > .main > .container > .column.before-header-buttons i {
					display: none;
				}

				/**
				 * ----------------------------------------------------------
				 * header mobile main container column navigation column shop
				 * ----------------------------------------------------------
				 */

				#header > .mobile > .main > .container > .column.shop {
					flex: none;
					margin-bottom: 15px;
				}

				#header > .mobile > .main > .container > .column.shop i {
					display: none;
				}

				/**
				 * ---------------------------------------------------------------
				 * header mobile main container column navigation column menu-bars
				 * ---------------------------------------------------------------
				 */

				#header > .mobile > .main > .container > .column.menu-bars {
					flex: none;
					margin-bottom: 15px;
					z-index: 99;
				}

				#header > .mobile > .main > .container > .column.menu-bars > .btn.active > i::before {
					content: '\f00d';
				}

				/**
				 * ----------------------------------------------------------
				 * header mobile main container column navigation column form
				 * ----------------------------------------------------------
				 */

				#header > .mobile > .main > .container > .column.form {
					flex: auto;
					margin-bottom: 15px;
				}

				#header > .mobile > .main > .container > .column.form input {
					width: 0;
				}

				/**
				 * ----------------------------------------------------------------
				 * header mobile main container column navigation column my-account
				 * ----------------------------------------------------------------
				 */

				#header > .mobile > .main > .container > .column.my-account {
					flex: none;
					margin-bottom: 15px;
				}

				/**
				 * ---------------------------------------------------------------
				 * header mobile main container column navigation column mini-cart
				 * ---------------------------------------------------------------
				 */

				#header > .mobile > .main > .container > .column.mini-cart {
					flex: none;
					margin-bottom: 15px;
				}

		/**
		 * -----------------
		 * header mobile sub
		 * -----------------
		 */

		#header > .mobile > .sub {
			border-top: 1px solid var( --color-panthablack );
			background-color: var( --color-panthagray );
			transition: all 0.1s;
		}

			/**
			 * ----------------------
			 * header mobile sub menu
			 * ----------------------
			 */

			#header > .mobile > .sub > .container {
				border-left: 1px solid var( --color-panthablack );
				border-right: 1px solid var( --color-panthablack );
			}

				/**
				 * ----------------------------------
				 * header mobile sub menu first layer
				 * ----------------------------------
				 */

				#header > .mobile > .sub > .container > .menu > ul > li > a {
					color: var( --color-white );
					font-weight: 600;
				}

				#header > .mobile > .sub > .container > .menu > ul > li.active > a,
				#header > .mobile > .sub > .container > .menu > ul > li:hover > a {
					color: var( --color-orange );
				}

		/**
		 * ------------------
		 * header mobile menu
		 * ------------------
		 */

		#header > .mobile > .menu {
			position: fixed;
			height: 100vh;
			width: calc( 100vw - 75px );
			top: 0;
			left: calc( -100vw + 75px );
			background-color: var( --color-white );
			border-right: 1px solid var( --color-pearlgray-light );
			z-index: 99;
			transition: left 0.25s;
		}

		#header > .mobile > .menu.active {
			left: 0;
		}

			/**
			 * ----------------------------
			 * header mobile menu container
			 * ----------------------------
			 */

			#header > .mobile > .menu > .container {
				max-height: 100%;
			}

				/**
				 * -----------------------------------
				 * header mobile menu container column
				 * -----------------------------------
				 */

				#header > .mobile > .menu > .container > .column:not(:last-child) {
					margin-bottom: 20px;
				}

				/**
				 * ----------------------------------------
				 * header mobile menu container column logo
				 * ----------------------------------------
				 */

				#header > .mobile > .menu > .container > .column.logo {
					position: relative;
					align-content: end;
					max-width: unset;
					margin-top: 15px;
				}

				#header > .mobile > .menu > .container > .column.logo > a {
					min-width: 175px;
				}

				#header > .mobile > .menu > .container > .column.logo > a > img {
					display: block;
					max-height: 55px;
				}

				#header > .mobile > .menu > .container > .column.logo > .webshop-badge {
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					font-family: 'Oswald';
					font-size: 12px;
					line-height: 1em;
					font-weight: 700;
					text-transform: uppercase;
					color: var( --color-white );
					padding: 0.5em 0.6em;
					background-color: var( --color-panthagray );
					border-radius: 2px;
				}

				/**
				 * ------------------------------------------
				 * header mobile menu container column widget
				 * ------------------------------------------
				 */

				#header > .mobile > .menu > .container > .column.widget {
					margin-top: 0;
					margin-bottom: 0;
				}

				#header > .mobile > .menu > .container > .column.widget > aside {
					margin: 0;
				}

				#header > .mobile > .menu > .container > .column.widget > aside > .textwidget {
					display: flex;
					flex-direction: column;
					font-size: 10px;
				}

				/**
				 * ----------------------------------------
				 * header mobile menu container column menu
				 * ----------------------------------------
				 */

				#header > .mobile > .menu > .container > .column.menu > ul > li > a {
					font-family: 'Oswald', sans-serif;
					font-weight: 700;
					font-size: 20px;
					text-transform: uppercase;
				}

				#header > .mobile > .menu > .container > .column.menu > ul ul > li > a {
					font-family: 'Open Sans', sans-serif;
					font-size: 14px;
					text-transform: none;
				}

				#header > .mobile > .menu > .container > .column.menu > ul ul > li .menu-item-title {
					font-weight: 400;
				}

				#header > .mobile > .menu > .container > .column.menu > ul ul > li .menu-item-image,
				#header > .mobile > .menu > .container > .column.menu > ul ul > li .menu-item-description {
					display: none;
				}