/* Hover border-trace for product cards (shop loop, related, PP Products widget).
   A light arc runs once around the card outline, glows, then fades out. */

/* Shop / product archive band — same green as the homepage "Featured Peptides"
   Elementor section (#1B4332). Full-bleed, so the wrapper takes it. */
.woocommerce-shop #woocommerce-wrapper,
.post-type-archive-product #woocommerce-wrapper,
.tax-product_cat #woocommerce-wrapper,
.tax-product_tag #woocommerce-wrapper {
	background: #0F2919;
	padding: 60px 0;
}

.woocommerce-shop #woocommerce-wrapper .woocommerce-products-header__title,
.post-type-archive-product #woocommerce-wrapper .woocommerce-products-header__title,
.tax-product_cat #woocommerce-wrapper .woocommerce-products-header__title,
.woocommerce-shop #woocommerce-wrapper .woocommerce-result-count,
.post-type-archive-product #woocommerce-wrapper .woocommerce-result-count,
.tax-product_cat #woocommerce-wrapper .woocommerce-result-count,
.woocommerce-shop #woocommerce-wrapper .term-description,
.tax-product_cat #woocommerce-wrapper .term-description {
	color: #fff;
}

@property --pn-a {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.pn-product-card,
.woocommerce ul.products li.product,
.pp-related ul.products li.product {
	position: relative;
}

.pn-product-card::before,
.pn-product-card::after,
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 3px;
	opacity: 0;
	pointer-events: none;
	z-index: 2;
	background: conic-gradient(
		from var(--pn-a),
		rgba(211, 165, 87, 0) 0%,
		rgba(211, 165, 87, .35) 40%,
		#d3a557 62%,
		#ffe9b8 82%,
		#fff6e0 90%,
		#d3a557 96%,
		rgba(211, 165, 87, 0) 100%
	);
	/* punch out the middle so only a 2px ring remains */
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
}

/* second copy, blurred and oversized = the glow */
.pn-product-card::after,
.woocommerce ul.products li.product::after {
	inset: -3px;
	padding: 5px;
	filter: blur(9px) saturate(1.4);
	z-index: 1;
}

.pn-product-card:hover::before,
.woocommerce ul.products li.product:hover::before {
	animation: pn-trace 1.5s linear;
}

.pn-product-card:hover::after,
.woocommerce ul.products li.product:hover::after {
	animation: pn-trace-glow 1.5s linear;
}

@keyframes pn-trace {
	0%   { --pn-a: 0deg;   opacity: 0; }
	8%   { opacity: 1; }
	88%  { opacity: 1; }
	100% { --pn-a: 360deg; opacity: 0; }
}

@keyframes pn-trace-glow {
	0%   { --pn-a: 0deg;   opacity: 0; }
	8%   { opacity: .9; }
	88%  { opacity: .9; }
	100% { --pn-a: 360deg; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pn-product-card:hover::before,
	.pn-product-card:hover::after,
	.woocommerce ul.products li.product:hover::before,
	.woocommerce ul.products li.product:hover::after {
		animation: none;
	}
}

/* ------------------------------------------------------------------
   AJAX add-to-cart: keep the price/button row intact.
   WooCommerce injects a "View cart" link right after the button and adds
   a ✓ to it — as extra flex children they wrapped the foot onto a second
   line. The header cart count already reflects the add.
   ponytail: hide the injected link instead of re-templating the row.
   ------------------------------------------------------------------ */
.pn-product-foot .added_to_cart {
	display: none !important;
}

/* No ✓ glyph on the button — it widens the button and wraps the price/button
   row. The header cart count is the "added" feedback. */
.pn-product-foot .pn-product-btn::after,
.pn-product-foot .add_to_cart_button::after {
	content: none !important;
}

/* Row geometry stays put while the button is in its loading/added states. */
.pn-product-foot .pn-product-btn,
.pn-product-foot .add_to_cart_button {
	white-space: nowrap;
}

/* "Added to cart" flash — absolute, so it sits in the card's bottom padding
   and takes no space in the flex row. Fades itself out after ~2s. */
.pn-product-foot {
	position: relative;
}
.pn-added-flash {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 5px;
	font-family: "Jost", sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: #14331f;
	text-align: center;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.pn-added-flash.is-in {
	opacity: 1;
	transform: none;
}
.pn-added-flash::before {
	content: "\2713";
	margin-right: 5px;
}

/* Loop cards clip nothing, but the flash must stay visible over the card edge. */
.pn-product-card,
.woocommerce ul.products li.product {
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.pn-added-flash {
		transition: none;
	}
}