/* Rack shelf: each loop card is a bay. The unit (img) stands on a perspective shelf and is pulled
   forward on hover, focus or tap. Only the img carries a transform, so GSAP's reveal on li is untouched.
   Everything is gated on html.js; without it the plain grid in main.css stays. Remove the enqueue to roll back. */
.js .woocommerce ul.products li.product { --stage: 232px; }
.js .woocommerce ul.products li.product:hover, .js .woocommerce ul.products li.product:focus-within { transform: none; box-shadow: none; }

/* bay: back wall with rack-ear holes, shelf plane, front lip */
.js .woocommerce ul.products li.product::before {
	content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: var(--stage); pointer-events: none;
	background:
		radial-gradient(circle, var(--ledc, #4A525A) 2px, transparent 2.6px) calc(100% - 12px) 100% / 6px 7px no-repeat,
		linear-gradient(#5A636B, #2A3138 1px, var(--ink) 2px) 0 100% / 100% 7px no-repeat,
		linear-gradient(#D3D7D0, #EEF0EB) 0 calc(100% - 7px) / 100% 40px no-repeat,
		radial-gradient(circle, #B4BAB2 1.6px, transparent 2.2px) 0 4px / 16px 14px repeat-y,
		radial-gradient(circle, #B4BAB2 1.6px, transparent 2.2px) 100% 4px / 16px 14px repeat-y,
		linear-gradient(#F4F5F2, #E6E9E3);
	border-bottom: 1px solid var(--line);
}
/* contact shadow on the shelf, wider and softer when the unit is pulled out */
.js .woocommerce ul.products li.product::after {
	content: ""; position: absolute; z-index: 0; left: 20%; right: 20%; top: calc(var(--stage) - 46px); height: 22px; pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(15, 20, 25, .42), transparent 68%); filter: blur(2px);
	transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.js .woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; z-index: 1; }
.js .woocommerce ul.products li.product a img {
	display: block; box-sizing: border-box; height: var(--stage); padding: 18px 26px 26px; margin: 0 0 14px; border: 0; background: none;
	object-fit: contain; object-position: 50% 100%;
	transform-origin: 50% 88%;
	transform: perspective(720px) translate3d(0, var(--ty, 0), var(--tz, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform .55s var(--ease), filter .55s var(--ease);
}
.js .woocommerce ul.products li.product a img.tier-photo { mix-blend-mode: multiply; padding: 18px 40px 30px; }
.js .woocommerce ul.products li.product.is-tracking a img { transition-duration: .12s, .55s; }
.js .woocommerce ul.products li.product .tier-cat { margin-top: 0; }

/* pulled forward: toward the viewer and slightly down */
.js .woocommerce ul.products li.product:focus-within, .js .woocommerce ul.products li.product.is-pulled { z-index: 3; border-color: var(--ink); --ty: 8px; --tz: 64px; --ledc: var(--led); }
.js .woocommerce ul.products li.product:focus-within::after, .js .woocommerce ul.products li.product.is-pulled::after { transform: translateY(10px) scale(1.18, 1.15); opacity: .75; }
.js .woocommerce ul.products li.product.is-pulled a img, .js .woocommerce ul.products li.product:focus-within a img { filter: drop-shadow(0 14px 12px rgba(15, 20, 25, .22)); }
@media (hover: hover) {
	.js .woocommerce ul.products li.product:hover { z-index: 3; border-color: var(--ink); --ty: 8px; --tz: 64px; --ledc: var(--led); }
	.js .woocommerce ul.products li.product:hover::after { transform: translateY(10px) scale(1.18, 1.15); opacity: .75; }
	.js .woocommerce ul.products li.product:hover a img { filter: drop-shadow(0 14px 12px rgba(15, 20, 25, .22)); }
}
/* touch: a pulled card says what the next tap does */
@media (hover: none) {
	.js .woocommerce ul.products li.product.is-pulled a.woocommerce-LoopProduct-link::after {
		content: "Open unit \2192"; position: absolute; z-index: 2; top: 10px; right: 10px; padding: 6px 9px; background: var(--ink); color: #fff; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
	}
}
@media (max-width: 380px) { .js .woocommerce ul.products li.product a img { padding-left: 18px; padding-right: 18px; } }

/* reduced motion: a clean lift, no depth, no tilt, no easing */
@media (prefers-reduced-motion: reduce) {
	.js .woocommerce ul.products li.product a img, .js .woocommerce ul.products li.product::after { transition: none; }
	.js .woocommerce ul.products li.product { --tz: 0px !important; --rx: 0deg !important; --ry: 0deg !important; }
	.js .woocommerce ul.products li.product:focus-within, .js .woocommerce ul.products li.product.is-pulled { --ty: -8px; }
	@media (hover: hover) { .js .woocommerce ul.products li.product:hover { --ty: -8px; } }
	.js .woocommerce ul.products li.product:focus-within::after, .js .woocommerce ul.products li.product.is-pulled::after { transform: none; }
}