/*
 * Shop listing (archive-items.php) per Figma component "Card2" (Default / Hover, smart animate
 * 800ms ease-out; hover background = main container #f3f3f5) and the mobile "Shop" frame: price + "Add to cart" for items with a price.
 */

.product-item {
	position: relative;
	overflow: visible; /* main.css clips it; the hover panel hangs below the card */
	background: transparent;
	transition: background-color 0.8s ease-out;
}

.product-item__wrap {
	display: block;
	text-decoration: none;
}

.product-item__price {
	font-family: 'Playfair Display', serif;
	font-size: 14px;
	line-height: 16px;
	color: #000;
	text-align: center;
}

.product-item__price:before {
	content: "$";
	margin-right: 1px;
	font-size: 10px;
	vertical-align: 2px;
}

.product-item__button,
.product-item__button .button__inner {
	display: flex;
	width: 100%;
}

/* Desktop: price and button slide in on hover, on a white card */
@media (min-width: 992px) {
	.product-item__buy {
		position: absolute;
		z-index: 2;
		top: 100%;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin-top: -25px; /* sit right under the title, inside the card's bottom padding */
		padding: 0 21px 16px; /* 415px card → 373px button, as in Figma Card2 / Hover */
		background: #f3f3f5;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0s linear 0.8s;
	}

	/* Hover keeps the main container colour (#f3f3f5, same as the photo background) */
	.product-item--buyable:hover,
	.product-item--buyable:focus-within {
		z-index: 3;
		background: #f3f3f5;
	}

	.product-item--buyable:hover .product-item__buy,
	.product-item--buyable:focus-within .product-item__buy {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.8s ease-out, transform 0.8s ease-out, visibility 0s;
	}

	.product-item--buyable:focus-within .product-item__title {
		transform: translateY(0);
		opacity: 1;
	}


	.product-item__wrap,
	.product-item__title,
	.product-item__img {
		transition-duration: 0.8s;
		transition-timing-function: ease-out;
	}
}

/* Mobile: name, price and button always visible on a grey block under the photo */
@media (max-width: 991.98px) {
	.product-item {
		margin-bottom: 16px;
	}

	.product-item__wrap {
		padding: 0;
	}

	.product-item__title {
		max-width: none;
		margin: 0;
		padding: 5px 12px 12px;
		background: #f2f2f4;
		font-size: 16px;
		line-height: 20px;
	}

	.product-item--buyable .product-item__title {
		padding-bottom: 0;
	}

	.product-item__buy {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 0 12px 12px;
		background: #f2f2f4;
	}

	.product-item__button .button__inner {
		height: 42px;
	}
}