/*
 * Desktop purchase activity notification.
 * Supplemental social proof: compact, PII-free, and absent below 960px.
 */

.purchase-activity {
	position: fixed;
	inset-inline-end: var(--space-5);
	inset-block-end: var(--space-5);
	z-index: 72;
	inline-size: min(22rem, calc(100vw - (2 * var(--space-5))));
	opacity: 0;
	pointer-events: none;
	transform: translateX(-1rem);
	transition:
		opacity var(--motion-icon-duration) var(--motion-icon-ease-out),
		transform var(--motion-icon-duration) var(--motion-icon-ease-out);
}

.purchase-activity[hidden] {
	display: none;
}

.purchase-activity.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0);
}

.purchase-activity__link {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 1.25rem;
	align-items: center;
	gap: var(--space-3);
	min-block-size: 5.5rem;
	padding: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-subtle);
	background: var(--color-surface-elevated);
	box-shadow: var(--notice-shadow);
	color: var(--color-text);
	text-decoration: none;
	transition:
		border-color var(--motion-icon-duration) var(--motion-icon-ease),
		box-shadow var(--motion-icon-duration) var(--motion-icon-ease),
		transform var(--motion-icon-duration) var(--motion-icon-ease-out);
}

.purchase-activity__media {
	overflow: hidden;
	inline-size: 4.5rem;
	block-size: 4.5rem;
	border-radius: var(--radius-subtle);
	background: var(--color-surface-muted);
}

.purchase-activity__image {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transform: scale(1.01);
	transition: transform var(--motion-icon-duration) var(--motion-icon-ease-out);
}

.purchase-activity__copy {
	display: grid;
	gap: var(--space-1);
	min-inline-size: 0;
}

.purchase-activity__eyebrow {
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	font-weight: 600;
}

.purchase-activity__name {
	display: -webkit-box;
	overflow: hidden;
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.purchase-activity__arrow {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	color: var(--color-text-muted);
	transition:
		color var(--motion-icon-duration) var(--motion-icon-ease),
		transform var(--motion-icon-duration) var(--motion-icon-ease-out);
}

.purchase-activity__link:hover,
.purchase-activity__link:focus-visible {
	border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
	box-shadow: var(--notice-shadow);
	transform: translateY(-0.125rem);
}

.purchase-activity__link:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: var(--space-1);
}

.purchase-activity__link:hover .purchase-activity__image,
.purchase-activity__link:focus-visible .purchase-activity__image {
	transform: scale(1.05);
}

.purchase-activity__link:hover .purchase-activity__arrow,
.purchase-activity__link:focus-visible .purchase-activity__arrow {
	color: var(--color-primary-hover);
	transform: translateX(-0.125rem);
}

.purchase-activity__link:active {
	transform: translateY(0) scale(0.99);
}

@media (max-width: 959px) {
	.purchase-activity {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.purchase-activity,
	.purchase-activity__link,
	.purchase-activity__image,
	.purchase-activity__arrow {
		transition: none;
	}

	.purchase-activity,
	.purchase-activity__link:hover,
	.purchase-activity__link:focus-visible,
	.purchase-activity__link:active,
	.purchase-activity__link:hover .purchase-activity__image,
	.purchase-activity__link:focus-visible .purchase-activity__image,
	.purchase-activity__link:hover .purchase-activity__arrow,
	.purchase-activity__link:focus-visible .purchase-activity__arrow {
		transform: none;
	}
}