<style>
	/* To fix nav dropdowns, stickynav and modals causing issues on the VDP the main thing to do is:
	
	ensure these settings aren't applied to the header/navbar 
	(or at least not on the VDP/.page-inventory-details):
	---> No header/navbar z-indexes
		Make sure the header/navbar and any other parents for the navbar do NOT have a z-index set.
		This lets the dropdowns, sticky nav, and modal popups on the VDP work as intended and not overlap oddly. 
		If the navbar has a z-index set, everything inside of it (like the dropdown) are constrained to where the parent elements are, meaning the really high z-index for the dropdown does nothing.
	
	---> No header/navbar Filter properties
		Also make sure the header/navbar does not have a "filter" css property set (on the VDP at least) because that will also lock all the navbar parts together and constrain the childrens' indexes to the parent's.
		So make sure any dropshadow, blur or other filter on the navbar are disabled on the VDP at least.

	---> There might be other unique issues as well. If you need help, ask for help!

	Some snippets and old versions of the templates set some z-indexes that aren't even needed to keep the site looking the way it is so they can be removed safely. 
	But make sure to check other pages to make sure that your change didn't cause some other issue!
	On sites with a big homepage hero that the navbar is supposed to sit overtop of, the navbar can get covered up by the hero after removing that css.
	If it did mess with something else we can probably figure out a way to get it to work.
	
	There are a few examples of solution options below.
	*/

	/*  If you DO need/want to set a custom z-index or add a filter to the header or navbar for things like: a transparent background navbar on the homepage to go over the hero for example.
	You can do one of 2 things:
	---> set that setting ONLY on the page you need it done (like only the homepage)
	---> or unset/remove/don't apply that on the VDP/.page-inventory-details page.
	*/

	/* Here are some EXAMPLES */
	/* NOT UNIVERSAL FIXES */
	/* You'll probably want to work with the code you already have and just modify it with some additional selectors */

	/* potential example if you just need to set these settings on the homepage */
	.page-home .header .navbar {
		/* example styles */
		position: relative;
		z-index: 10;
		filter: blur(2px);
	}

	/* potential example if you need the navbar z-indexed on every other page */
	/* Change existing target by adding section:not(.page-inventory-details)*/
	section:not(.page-inventory-details) .header .navbar {
		/* example styles */
		position: relative;
		z-index: 10;
		filter: drop-shadow(2px 2px 2px #000);
	}

	/* OR change the values to unset on the VDP. Probably the closest to a global fix, but you'd still need to update the target to whatever these settings are being set on. Like ".header .navbar" might need to be "".header .header-container" instead. Or maybe multiple settings need to be turned off. Usually the above methods of refining the targeting of the offending settings is going to be better than just resetting them afterwards..*/
	.page-inventory-details .header .navbar {
		z-index: unset;
		filter: unset;
	}
	/* END OF EXAMPLES */

