/* Optional catalog effects: the implementation belongs to Native Woo. */
@layer components {
	/* The zoom below composes with whatever offset the image already carries, and
	   the two card paths carry different ones. The hook-driven card's image is an
	   in-flow grid item centred by `margin-inline: auto` — no offset. The builder
	   image sits inside `__media` and is absolutely centred by the rule above, so
	   its scale has to keep that translate or it jumps half its own size. Naming
	   the offset lets one set of hover rules serve both; it lives here rather
	   than in the builder sheet, which is archive-gated, so the offset can never
	   be separated from the rules that consume it. */
	.st-product-card__media .st-product-card__media-img--primary {
		--st-card-image-offset: translate(-50%, -50%);
	}

	/* Hover effects — image zoom on hover; desktop-only, gated by the toolbar
	   attrs. The default 'dawn' preset falls through to the base 1.03 scale. */
	.st-shop-loop[data-st-effect-zoom="1"] .st-product-card__media-img--primary {
		transition: transform var(--st-duration-slower) var(--st-ease-enter);
		transform-origin: center;
	}

	@media (width >= 52.5em) {
		.st-shop-loop[data-st-effect-zoom="1"] .st-product-card:hover .st-product-card__media-img--primary {
			transform: var(--st-card-image-offset, translate(0, 0)) scale(1.03);
		}

		.st-shop-loop[data-st-fx-preset="subtle"][data-st-effect-zoom="1"] .st-product-card:hover .st-product-card__media-img--primary {
			transform: var(--st-card-image-offset, translate(0, 0)) scale(1.02);
		}

		.st-shop-loop[data-st-fx-preset="pronounced"][data-st-effect-zoom="1"] .st-product-card:hover .st-product-card__media-img--primary {
			transform: var(--st-card-image-offset, translate(0, 0)) scale(1.06);
		}

		/* Not `none`: stripping the transform here would take the builder image's
		   centring with it, so turning the zoom off would make it jump. */
		.st-shop-loop[data-st-fx-preset="off"][data-st-effect-zoom="1"] .st-product-card:hover .st-product-card__media-img--primary {
			transform: var(--st-card-image-offset, translate(0, 0));
		}
	}

	/* Hover effects — hover-lift presets (subtle is the base above). "None"
	   holds the card at its resting level. */
	.st-shop-loop[data-st-effect-lift="none"] .st-product-card {
		--st-product-card-hover-translate: 0;
	}

	.st-shop-loop[data-st-effect-lift="medium"] .st-product-card {
		--st-product-card-hover-translate: -4px;
	}

	.st-shop-loop[data-st-effect-lift="strong"] .st-product-card {
		--st-product-card-hover-translate: -8px;
	}
}