/* =============================================================
   Add-to-cart toast, the one confirmation the whole shop uses.

   Extracted from the catalog so the single product page speaks the
   same language: deep-petrol pill, product name, EMO HARMONY action into
   the cart. Loaded by the catalog (style dependency) and by the
   product page subsystem (inc/cart-toast.php).
   ============================================================= */

.catalog-toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-6);
	transform: translateX(-50%);
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	background: var(--color-brand-deep);
	color: var(--color-text-inverse);
	border-radius: var(--radius-control);
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	max-width: 92vw;
	text-align: center;
}

.catalog-toast[hidden] { display: none; }

/* The CTA tint is light enough to read on dark, so the action reads as a control
   instead of hanging off the sentence with an underline. Hover answers with
   a tiny scale (owner call, 2026-08-27) on the house micro-feedback clock. */
.catalog-toast__action {
	display: inline-block;
	color: var(--color-brand-accent);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.catalog-toast__action:hover { transform: scale(1.05); }
.catalog-toast__action:active { opacity: 0.55; transition-duration: var(--motion-duration-press); }
.catalog-toast__action:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	.catalog-toast__action,
	.catalog-toast__action:hover { transform: none; transition: none; }
}