/**
 * DigiShoe — recent-purchase toast.
 * Bottom-left on desktop, bottom-centre above the mobile nav on phones.
 */

.sn-toast {
	position: fixed; left: 16px; bottom: 18px; z-index: 9500;
	width: min(330px, calc(100vw - 32px));
	background: #fff; color: #1f2937;
	border: 1px solid #e6e8eb; border-radius: 14px;
	box-shadow: 0 6px 28px rgba(16, 24, 40, .16);
	padding: 10px 12px;
	display: flex; align-items: center; gap: 11px;
	opacity: 0; transform: translateY(14px);
	transition: opacity .35s ease, transform .35s ease;
	text-decoration: none;
}

.sn-toast[hidden] { display: none; }
.sn-toast.is-in { opacity: 1; transform: translateY(0); }

.sn-thumb {
	width: 50px; height: 50px; flex: none; border-radius: 10px;
	object-fit: cover; background: #f3f4f6;
}

.sn-body { min-width: 0; flex: 1; }

.sn-line1 {
	font-size: 12.5px; color: #6b7280; line-height: 1.4;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sn-line1 b { color: #111827; font-weight: 700; }

.sn-title {
	font-size: 13.5px; font-weight: 600; color: var(--dark, #0A192F);
	line-height: 1.35; margin: 1px 0 2px;
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

.sn-ago { font-size: 11.5px; color: #9ca3af; display: flex; align-items: center; gap: 5px; }
.sn-ago::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%;
	background: #22c55e; flex: none;
}

.sn-close {
	position: absolute; top: 6px; right: 8px;
	border: 0; background: none; color: #b6bcc4;
	font-size: 17px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.sn-close:hover { color: #6b7280; }

@media (max-width: 600px) {
	/* Clear of the theme's fixed bottom nav. */
	.sn-toast { left: 12px; right: 12px; width: auto; bottom: 76px; padding: 9px 11px; }
	.sn-thumb { width: 44px; height: 44px; }
	.sn-title { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.sn-toast { transition: none; }
}