/**
 * Sample button on product listing cards.
 *
 * The button is a sibling of the product link, not a child of it — nesting a
 * button inside an anchor is invalid and swallows the click. It is laid over
 * the card's backdrop by matching that box's aspect ratio, which the theme
 * exposes as --ff-card-media-ratio (falls back to 4:3 on other themes).
 */
.ffap-loop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	aspect-ratio: var(--ff-card-media-ratio, 4 / 3);
	pointer-events: none;
	z-index: 3;
}

/* A disc, centred on the backdrop's upper half — above the artwork that
   hangs over its lower edge. */
.ffap-loop__btn {
	--ffap-size: 64px;
	--ffap-ring: 0deg;

	position: absolute;
	top: 27%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: auto;

	width: var(--ffap-size);
	height: var(--ffap-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: grid;
	place-items: center;

	background: rgba(12, 9, 7, 0.62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow:
		0 0 0 1.5px rgba(255, 255, 255, 0.14),
		0 8px 26px rgba(0, 0, 0, 0.55);
	color: var(--ff-glow, #f4ead9);
	cursor: pointer;

	transition: background 0.2s ease, color 0.2s ease;
}

/* Hover is a colour change only — no motion on the cards. */
.ffap-loop__btn:hover { background: rgba(12, 9, 7, 0.82); }
.ffap-loop__btn:focus-visible {
	outline: 2px solid var(--ff-amber, #fc9e0b);
	outline-offset: 3px;
}

/* Progress ring: a conic sweep just inside the rim. */
.ffap-loop__btn::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(var(--ff-amber, #fc9e0b) var(--ffap-ring), transparent 0);
	-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;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.ffap-loop__btn.is-playing::before { opacity: 1; }

/* The icon: a speaker with two sound waves. Still while idle; the waves
   pulse outward while a sample plays. */
.ffap-loop__icon {
	width: 28px;
	height: 28px;
	display: block;
	position: relative;
	z-index: 1;
	margin-left: 2px; /* optically centre the asymmetric glyph */
}
.ffap-loop__speaker { fill: currentColor; }
.ffap-loop__wave {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
}
.ffap-loop__btn.is-playing { color: var(--ff-amber, #fc9e0b); }
.ffap-loop__btn.is-playing .ffap-loop__wave { animation: ffap-wave 1.2s ease-in-out infinite; }
.ffap-loop__btn.is-playing .ffap-loop__wave:nth-of-type(3) { animation-delay: 0.3s; }

@keyframes ffap-wave {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 1; }
}

.ffap-loop__btn.is-error {
	pointer-events: none;
	color: var(--ff-red, #fa3f20);
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	.ffap-loop__btn { transition: none; }
	.ffap-loop__btn.is-playing .ffap-loop__wave { animation: none; opacity: 1; }
}

@media (max-width: 480px) {
	.ffap-loop__btn { --ffap-size: 56px; }
	.ffap-loop__icon { width: 24px; height: 24px; }
}