:root {
	--ekos-motion-duration: 280ms;
	--ekos-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.product-card {
	transition: background-color var(--ekos-motion-duration) var(--ekos-motion-ease), color 220ms ease, padding var(--ekos-motion-duration) var(--ekos-motion-ease);
}

.shop-page .woocommerce ul.products li.product {
	transition: background-color var(--ekos-motion-duration) var(--ekos-motion-ease), color 220ms ease;
}

/* Keep the cart CTA anchored while the card's hover padding changes. */
.product-card { position: relative; }

.product-card .cart-square {
	position: absolute;
	right: 24px;
	bottom: 24px;
}

.product-card__image {
	transition: width var(--ekos-motion-duration) var(--ekos-motion-ease), height var(--ekos-motion-duration) var(--ekos-motion-ease), margin var(--ekos-motion-duration) var(--ekos-motion-ease), border-radius var(--ekos-motion-duration) var(--ekos-motion-ease), transform var(--ekos-motion-duration) var(--ekos-motion-ease);
}

.shop-page .woocommerce ul.products li.product a img {
	transition: filter 220ms ease;
}

.product-card__info { transition: padding var(--ekos-motion-duration) var(--ekos-motion-ease); }

.product-card h3,
.product-card__excerpt,
.product-tags {
	transition: color 220ms ease, opacity 180ms ease, margin var(--ekos-motion-duration) var(--ekos-motion-ease), transform var(--ekos-motion-duration) var(--ekos-motion-ease), left var(--ekos-motion-duration) var(--ekos-motion-ease), bottom var(--ekos-motion-duration) var(--ekos-motion-ease);
}

.shop-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
.catalog-product-excerpt,
.catalog-product-tags,
.shop-page .woocommerce ul.products li.product .price {
	transition: color 220ms ease, opacity 180ms ease;
}

.product-card:is(:hover, :focus-within) .product-card__image { transform: scale(1.012); }

/* Catalog hover keeps every geometric anchor fixed to prevent layout jumps. */
.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) {
	padding: 24px !important;
}

.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) a img {
	height: 510px !important;
	margin: 0 !important;
	border-radius: 12px !important;
	transform: none !important;
}

.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .woocommerce-loop-product__title,
.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .catalog-product-excerpt,
.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .catalog-product-tags {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .price {
	left: 24px !important;
	bottom: 34px !important;
}

.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .button {
	right: 24px !important;
	bottom: 24px !important;
}

@media (max-width: 1100px) {
	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) a img {
		height: 450px !important;
	}
}

@media (max-width: 700px) {
	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) {
		padding: 16px !important;
	}

	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) a img {
		height: 410px !important;
		margin: 0 !important;
	}

	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .woocommerce-loop-product__title,
	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .catalog-product-excerpt,
	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .catalog-product-tags {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .price {
		left: 16px !important;
		bottom: 28px !important;
	}

	.shop-page .woocommerce ul.products li.product:is(:hover, :focus-within) .button {
		right: 16px !important;
		bottom: 16px !important;
	}
}

.cart-square,
.shop-page .woocommerce ul.products li.product .button {
	overflow: hidden;
	transform-origin: center;
	transition: transform 180ms var(--ekos-motion-ease), filter 180ms ease;
	touch-action: manipulation;
}

.cart-square { position: relative; }

.cart-square img { transition: opacity 140ms ease, transform 180ms var(--ekos-motion-ease); }

.cart-square:active,
.shop-page .woocommerce ul.products li.product .button:active,
.cart-square.loading,
.shop-page .woocommerce ul.products li.product .button.loading { transform: scale(.94); }

.cart-square.loading,
.shop-page .woocommerce ul.products li.product .button.loading {
	pointer-events: none;
	background-image: none !important;
}

.cart-square.loading img { opacity: 0; }

.cart-square::after,
.shop-page .woocommerce ul.products li.product .button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid rgba(23, 31, 23, .28);
	border-top-color: var(--ink);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.cart-square.loading::after,
.shop-page .woocommerce ul.products li.product .button.loading::after {
	opacity: 1;
	animation: ekos-cart-spin .7s linear infinite;
}

.cart-square.is-added,
.shop-page .woocommerce ul.products li.product .button.is-added { animation: ekos-cart-confirm 360ms var(--ekos-motion-ease); }

@keyframes ekos-cart-spin { to { transform: rotate(360deg); } }

@keyframes ekos-cart-confirm {
	0% { transform: scale(.94); }
	55% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.product-card,
	.product-card__image,
	.product-card__info,
	.product-card h3,
	.product-card__excerpt,
	.product-tags,
	.shop-page .woocommerce ul.products li.product,
	.shop-page .woocommerce ul.products li.product a img,
	.shop-page .woocommerce ul.products li.product .woocommerce-loop-product__title,
	.catalog-product-excerpt,
	.catalog-product-tags,
	.shop-page .woocommerce ul.products li.product .price,
	.cart-square,
	.cart-square img,
	.shop-page .woocommerce ul.products li.product .button {
		transition: none !important;
		animation: none !important;
	}

	.cart-square.loading::after,
	.shop-page .woocommerce ul.products li.product .button.loading::after { animation: none; }
}