@supports selector(&) {
	.no-js {
		.acs:not(.mz-cms-row[data-widget*="acs"] .acs),
		.mz-cms-row[data-widget*="acs"],
		
		.mz-cms-content:has(#DisruptorBanner),
		#multicategory-product-recs-container,
		.fadeIn {
			opacity: 0;
			transform: translateY(20px);

			&:before {
				opacity: 0;
			}
		}
	}

	@media (min-width: 768px) {
		.js {
			body:not(.mz-cms-editing) {
				.acs:not(.mz-cms-row[data-widget*="acs"] .acs):not(:has(.fadeIn)),
				.mz-cms-row[data-widget*="acs"],
				.mz-cms-content:has(#DisruptorBanner),
				#multicategory-product-recs-container,
				.fadeIn {
					opacity: 1;
					--hoverY: 0px;
					--revealY: 0px;
					transform: translateY(calc(var(--revealY) + var(--hoverY)));

					&.entering {
						transition: opacity 700ms ease-out, transform 700ms ease-out;
					}
					
					&.startPosition {
						opacity: 0;
						--revealY: 20px;
					}

					&.hovItem:hover {
						--hoverY: -2px;
					}

				}
			}
		}
	}

	@media(max-width: 767px) {
		.js {
			body:not(.mz-cms-editing) {
				.acs:not(.mz-cms-row[data-widget*="acs"] .acs):not(:has(.fadeIn)),
				.mz-cms-row[data-widget*="acs"],
				.mz-cms-content:has(#DisruptorBanner),
				#multicategory-product-recs-container,
				.fadeIn {
					opacity: 1;

					&.entering {
						transition: opacity 500ms ease-out;
					}
					
					&.startPosition {
						opacity: 0;
					}
				}
			}
		}
	}
	
	@media(hover: hover) {
		body {
			--hov-shadow: 0px 2px 3px rgba(0,0,0,0.25);
			--hov-offset: -2px;
			--hov-in: filter 200ms ease-in-out, box-shadow 200ms ease-in-out, transform 200ms ease-in-out;
			--hov-out: filter 100ms ease-out, box-shadow 100ms ease-in-out, transform 100ms ease-out;
		}
		/* .acs .swiper:not(.noHover), */
		.products-slider-wrapper .swiper {
			/* room for shadow since overflow hidden */
			padding-top: 3px;
			margin-top: -3px;
		}
		.acs:hover {
			--hoverY: var(--hov-offset);
		}
		a.acs:not(.btn, .noHover),
		.acs:not(.noHover) a:not(.btn, .noHover),
		.acs:not(.noHover):has(> a:only-child),
		.acs.hovItem,
		.acs .hovItem,
		.acs.hovGroup > *,
		.acs .hovGroup > *,
		.recs-pdp-monetate .carousel-item,
		.product-card-loadable,
		.rmn-banner-container {
			transition: var(--hov-out);

			&:hover {
				--hoverY: var(--hov-offset);
				filter: drop-shadow(var(--hov-shadow));
				transform: translateY(calc(var(--revealY) + var(--hoverY)));
				transition: var(--hov-in);			
			}

			a:only-child {
				display: block;
			}
		}

		.recs-pdp-monetate .carousel-item,
		.product-card-loadable,
		.rmn-banner-container {
			/* personalized elements use box-shadow instead of drop-shadow */
			&:hover {
				filter: none;
				box-shadow: var(--hov-shadow);
			}
		}
		
	}

}