/* ─── Product card (Product Collection loop) ─────────────────────────────── */

li.wc-block-product {
	position: relative;
	padding: 0.5rem;
	background: white;
	border-radius: var(--border-radius);
	border: 1px solid transparent;
	&::before{
		content: "";
		inset: 0;
		display: block;
		position: absolute;
		transform: scale(1.02);
		border: 1px solid var(--wp--preset--color--primary-500);
		opacity: 0;
		pointer-events: none;
		transition: all 0.6s var(--ease);
		border-radius: inherit;
	}
	&:hover::before{
		opacity: 1;
		transform: scale(1);
	}
}

/* Image is the positioning context for the hover image + action bar. */
li.wc-block-product .wp-block-woocommerce-product-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius);
}

li.wc-block-product .wp-block-woocommerce-product-image > a {
	display: block;
	position: relative;
}

/* ─── Whole card is one link ──────────────────────────────────────────────
   Stretch the product title's link across the entire card so every part of
   it — image, price, empty space — is clickable. Buttons sit above it. */
li.wc-block-product .wp-block-post-title a {
	position: static;
}

li.wc-block-product .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* ─── Second (hover) image: zoom-out fade-in ─────────────────────────────── */

.pc-second-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.03);
	pointer-events: none;
	transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}

@media (hover: hover) {
	li.wc-block-product:hover .pc-second-img {
		opacity: 1;
		transform: scale(1);
	}
}

/* ─── Hover action bar ───────────────────────────────────────────────────── */

.pc-actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	gap: 0.25rem;
	padding: 0.5rem;
	pointer-events: none;
}

/* Each button animates on its own so they can be staggered. */
.pc-actions__details,
.pc-actions__add {
	position: relative;
	z-index: 3;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--stone-950) 70%, transparent);
	color: var(--wp--preset--color--stone-50);
	text-decoration: none;
	border-radius: var(--border-radius) !important;
	line-height: 1;
	transform: translateY(150%);
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease-out, opacity 0.2s ease, background 0.2s ease-out, letter-spacing 0.3s var(--ease);
	backdrop-filter: blur(0.5rem);
}

.pc-actions__details {
	flex: 1 1 auto;
	padding: 0.75em 1em;
	font-weight: var(--font-weight-heading);
	font-size: 1rem;
	&:hover{
		letter-spacing: 0.02em;
	}
}

.pc-actions__add {
	flex: 0 0 auto;
	padding: 0.75em;
	svg{
		transition: transform 0.6s var(--ease);
		transform-origin: 50% 50%;
	}
	&:hover svg{
		transform: rotate(90deg);
	}
}

.pc-actions__add .pc-plus {
	width: 1.25rem;
	height: 1.25rem;
}

@media (hover: hover) {
	li.wc-block-product:hover .pc-actions__details,
	li.wc-block-product:hover .pc-actions__add {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}

	/* Add-to-cart slides in slightly after "Детальніше". */
	li.wc-block-product:hover .pc-actions__add {
		transition-delay: 0.05s;
	}

	.pc-actions__details:hover,
	.pc-actions__add:hover {
		background: var(--wp--preset--color--stone-950);
	}
}

/* ─── Mobile / touch: no hover bar, tapping the card opens the product ────── */

@media (hover: none) {
	.pc-actions {
		display: none;
	}
}

/* ─── Hide the "Переглянути кошик" link WooCommerce appends after AJAX add ── */
li.wc-block-product .added_to_cart {
	display: none !important;
}