/**
 * Wandhaus — bottom-center toast stack.
 *
 * Sits above page content via `position: fixed`. Hidden source
 * (`.wh-toast-source`) is purely a DOM data carrier read on init;
 * inline auth callouts (`.wh-auth__callout`) get the same hide-then-
 * hoist treatment so they don't flash before JS runs.
 *
 * Spec: [[Toast Stack Convention]].
 */

/* Hidden source — JS reads + hoists on init, never visible. */
.wh-toast-source { display: none !important; }

/* Inline auth callouts — also hoisted into toasts.
 * `display: none` until JS removes them entirely. */
.wh-auth__callout { display: none !important; }

/* ── Stack container ────────────────────────────────────────────── */

.wh-toast-stack {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9999;
	width: min(420px, calc(100vw - 24px));
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	pointer-events: none; /* the stack itself doesn't catch clicks; toasts do. */
}

@media (max-width: 640px) {
	.wh-toast-stack {
		left: 12px;
		right: 12px;
		bottom: 12px;
		transform: none;
		width: auto;
		max-width: none;
		max-height: 60vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wh-toast-stack { /* no anim differences here, but keeps the file complete */ }
}

/* ── Individual toast ───────────────────────────────────────────────
 * Design system §10 "Toasts": dark ink card · white text · 22px round
 * tier-coloured icon badge (ok = accent check, warn/err = state colour)
 * · shadow-2 · no border · 13px body · inline dismiss in on-ink-faint.
 * (The earlier surface-bg + tier-left-bar look was §05's CALLOUT
 * recipe, not the toast — fixed 2026-06-09.) */

.wh-toast {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--s-3);
	background: var(--ink);
	color: var(--on-ink);
	border: 0;
	box-shadow: var(--shadow-2);
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.5;
	overflow: hidden;
	animation: wh-toast-in 220ms var(--ease) both;
}

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

/* WC's frontend JS adds tabindex="-1" + .focus() to [role="alert"] so
 * screen readers announce it — keep that, but the global
 * `[tabindex]:focus-visible` accent ring (tokens.css) shouldn't paint a
 * decorative outline around a non-interactive card. §10 toasts have no
 * ring; the dismiss × keeps its own focus style. */
.wh-toast:focus,
.wh-toast:focus-visible { outline: none; }

@keyframes wh-toast-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* Tier icon badge — §10: 22px circle, state-coloured fill, on-ink glyph.
 * §10 defines ok/warn/err; info reuses the V3 --info token. */
.wh-toast__icon {
	width: 22px;
	height: 22px;
	border-radius: var(--radius-pill);
	display: grid;
	place-items: center;
	flex-shrink: 0;
	color: var(--on-ink);
	background: var(--info);
}
.wh-toast--success .wh-toast__icon { background: var(--accent); }
.wh-toast--warn    .wh-toast__icon { background: var(--warn); }
.wh-toast--error   .wh-toast__icon { background: var(--err); }
.wh-toast--info    .wh-toast__icon { background: var(--info); }

/* Strip WC's bullet + chrome from any inherited markup. */
.wh-toast__body { margin: 0; flex: 1; min-width: 0; }
.wh-toast__body :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.wh-toast__body :where(p) { margin: 0; }
.wh-toast__body :where(strong) { font-weight: 600; }
.wh-toast__body :where(a) {
	color: var(--on-ink);
	text-decoration: underline;
	text-decoration-color: var(--on-ink-faint);
	text-underline-offset: 3px;
}
.wh-toast__body :where(a:hover) {
	text-decoration-color: var(--on-ink);
}
/* WC's own buttons inside notices (e.g. "View cart") — §10 action
 * pattern: plain underlined on-ink text button on the dark card. */
.wh-toast__body :where(.button, .wc-forward) {
	display: inline-block;
	margin-top: var(--s-1);
	padding: 0;
	background: transparent;
	color: var(--on-ink) !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: underline;
	text-underline-offset: 3px;
	border-radius: 0;
	border: 0;
}
.wh-toast__body :where(.button:hover, .wc-forward:hover) {
	background: transparent;
	color: var(--on-ink) !important;
	text-decoration-color: var(--on-ink);
}

/* Hoisted auth callouts — the `.wh-auth__callout-body` markup is authored for
 * the light §05 callout card, so wandhaus-account.css gives it `color: var(--ink)`
 * + 14px. Once js/wh-toasts.js lifts it into the dark toast that class selector
 * beats the toast's INHERITED --on-ink, painting ink on the --ink card (1.00:1,
 * copy invisible on every auth callout: verify ok/invalid, register pending,
 * lost-password sent + rate lockout). Hand the hoisted body back to the toast's
 * own colour and 13px scale; everything nested inherits it. The callout's own
 * `strong` rule (0,1,1) still beats the §10 `:where(strong)` above, so the title
 * line keeps its block layout and 500 weight. */
.wh-toast__body .wh-auth__callout-body {
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

/* The hoisted callout brings its own §05 tier icon along, but the toast already
 * renders the canonical §10 tier badge, so the copy arrived with two check
 * marks. Drop the duplicate; the badge is the one the spec draws. */
.wh-toast__body .wh-auth__callout-icon {
	display: none;
}

/* ── Dismiss × — §10: inline at right, on-ink-faint → on-ink ─────── */

.wh-toast__dismiss {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--on-ink-muted);
	cursor: pointer;
	transition: color .15s var(--ease);
	padding: 0;
}
/* background re-stated: Storefront's customizer `button:hover
 * { background:#d5d5d5 }` (0,1,1) otherwise paints a grey square
 * behind the cross on hover (same leak as the auth eye toggle). */
.wh-toast__dismiss:hover,
.wh-toast__dismiss:active {
	color: var(--on-ink);
	background: transparent;
}
.wh-toast__dismiss:focus-visible {
	outline: 2px solid var(--on-ink);
	outline-offset: 2px;
}

/* ── Stack chrome (overflow + dismiss-all) ──────────────────────── */

.wh-toast-stack__overflow {
	pointer-events: auto;
	align-self: center;
	background: var(--ink);
	color: var(--bg);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 6px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: var(--shadow-1);
}
.wh-toast-stack__overflow:hover { background: var(--accent); }

.wh-toast-stack__dismiss-all {
	pointer-events: auto;
	align-self: flex-end;
	background: transparent;
	color: var(--ink-muted);
	border: 0;
	padding: var(--s-1) var(--s-2);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color .15s var(--ease);
}
.wh-toast-stack__dismiss-all:hover,
.wh-toast-stack__dismiss-all:active {
	color: var(--ink);
	background: transparent; /* Storefront button:hover grey leak */
}

/* Cart-AJAX notice-relay (2026-08-04): het doelwit dat WC core's cart.js
 * nodig heeft voor wc-ajax-meldingen (kortingscode toepassen/verwijderen,
 * cart bijwerken). Visueel dicht; wh-toasts.js hoist de inhoud naar de
 * stack. Geen display:none — cart.js scrollt naar de wrapper en die scroll
 * moet gewoon bij de cart-top landen, zoals stock Woo. */
.wh-toast-relay {
	position: relative;
	height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
}