.wsp-toast {
	position: fixed;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	align-items: stretch;
	max-width: 340px;
	background: #fff;
	color: #1a1a1a;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.16 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 16px );
	transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
	font-size: 14px;
	line-height: 1.25;
}

.wsp-left {
	left: 20px;
}

.wsp-right {
	right: 20px;
}

.wsp-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.wsp-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	text-decoration: none;
	color: inherit;
	border-radius: 10px;
}

.wsp-link:hover .wsp-product {
	text-decoration: underline;
}

.wsp-img {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	object-fit: cover;
	border-radius: 6px;
	background: #f2f2f2;
}

.wsp-body {
	min-width: 0;
}

.wsp-line {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.3;
	color: inherit;
	/* Workshop names run long — hard stop at two lines so the card keeps its shape. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/*
 * Word gaps come from margins, not spaces in the markup: translation plugins
 * trim whitespace at text-node edges, which ran the name into the sentence.
 */
.wsp-line strong,
.wsp-line .wsp-said {
	margin-right: 0.3em;
}

.wsp-line .wsp-said:last-child {
	margin-right: 0;
}

.wsp-meta {
	margin: 3px 0 0;
	font-size: 11.5px;
	opacity: 0.6;
}

.wsp-close {
	appearance: none;
	background: none;
	border: 0;
	padding: 0 10px 0 0;
	font-size: 18px;
	line-height: 1;
	color: inherit;
	opacity: 0.4;
	cursor: pointer;
	align-self: flex-start;
	margin-top: 8px;
}

.wsp-close:hover,
.wsp-close:focus-visible {
	opacity: 0.9;
}

@media ( max-width: 600px ) {
	.wsp-toast {
		left: 12px;
		right: 12px;
		/* Full width covers both corners, so sit above a floating chat button. */
		bottom: 84px;
		max-width: none;
	}
}

@media ( prefers-color-scheme: dark ) {
	.wsp-toast {
		background: #1f1f22;
		color: #f2f2f2;
		box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.5 );
	}

	.wsp-img {
		background: #2c2c30;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wsp-toast {
		transition: opacity 0.2s linear, visibility 0.2s;
		transform: none;
	}

	.wsp-visible {
		transform: none;
	}
}