adding important css

jquery.important.js

$("#pantry_boxes-products").on("mouseover",".box-product",function(event) {
	$(this).children(".box-product-expanded").stop(true,false).animate({
			opacity: 1,
			"z-index": "50 !important"
		},
		{ "duration": 150 }
	);
});

$("#pantry_boxes-products").on("mouseout",".box-product",function(event) {
	$(this).children(".box-product-expanded").stop(true,false).animate({
		opacity: 0,
		"z-index": -10
		},
		{ "duration": 150 }
	);
});

line 4 is the one to note. you simply set your z-index to a string rather than a number to include the "!important" qualifier. Note that these styles will be applied inline as part of the jquery animation, so they are all implicitly "!important".