/**
 * WooCommerce success-notice toast (Visual Polish 2.6, PDP scoping fixed in
 * 2.6.1). Presentation only — assets/js/notices.js relocates the real,
 * unmodified .woocommerce-message node WooCommerce already rendered on the
 * PDP into this fixed-position host and adds a close button. Nothing here
 * (or in that script) generates, duplicates, or rewrites notice content —
 * these rules only ever apply to a node that script has already marked
 * with .k-toast__notice, and notices.js only ever does that on
 * body.single-product (see its own docblock for why: the WooCommerce hook
 * behind this notice always wraps it, on every WC page, so that couldn't be
 * the PDP/other-pages signal). The existing body.woocommerce-account/
 * -checkout .woocommerce-message card treatment (account.css/checkout.css)
 * is untouched by construction — this file's selectors never match there.
 *
 * .woocommerce-error stays the real core <ul class="woocommerce-error">
 * everywhere, completely untouched by this file — a different tag and
 * class, never matched by the .woocommerce-message selector below.
 */

.k-toast-host {
	position: fixed;
	bottom: 16px;
	right: var(--k-gutter);
	z-index: var(--k-z-drawer);
	display: flex;
	flex-direction: column-reverse;
	gap: 10px;
	max-width: 380px;
	pointer-events: none;
}

.woocommerce-message.k-toast__notice {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 16px 40px 16px 20px;
	background: var(--k-color-bg-raised);
	border: 1px solid var(--k-border-hairline-strong);
	border-left: 2px solid var(--k-color-accent);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	font-size: 13px;
	line-height: 1.5;
	color: var(--k-color-text);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--k-duration-base) var(--k-ease), transform var(--k-duration-base) var(--k-ease);
}

.woocommerce-message.k-toast__notice.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Real core "View cart" <a class="button wc-forward">, restyled as a
   restrained text link (same accent/underline idiom as
   .k-geo-suggest__switch in region-selector.css) instead of a boxed
   button — a compact toast reads better with one text weight of
   emphasis, not a second filled control competing with the close (x). */
.woocommerce-message.k-toast__notice .button.wc-forward {
	flex: none;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--k-tracking-nav);
	text-transform: uppercase;
	color: var(--k-color-accent);
	border-bottom: 1px solid transparent;
	transition: border-color var(--k-duration-base), color var(--k-duration-base);
}

.woocommerce-message.k-toast__notice .button.wc-forward:hover,
.woocommerce-message.k-toast__notice .button.wc-forward:focus-visible {
	border-bottom-color: currentColor;
}

.k-toast__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	line-height: 1;
	font-size: 16px;
	color: var(--k-color-muted-2);
	cursor: pointer;
}

.k-toast__close:hover,
.k-toast__close:focus-visible {
	color: var(--k-color-text);
}

.k-toast__close:focus-visible {
	outline: 1px solid var(--k-color-accent);
	outline-offset: 2px;
}

/* Near-full-width with the page's own gutters. Both host and mobile sticky
   Add to Cart bar are bottom-anchored below this width now, so this one
   does need to clear that bar explicitly: bottom offset matches its real
   backdrop height (74px + safe-area inset, product.css's
   .k-pdp-panel__buy::before/--k-pdp-safe-bottom) plus a clear gap, same
   "own reserved space, not touching" reasoning as everything else stacked
   above that bar in product.css. */
@media (max-width: 899px) {
	.k-toast-host {
		left: var(--k-gutter);
		right: var(--k-gutter);
		bottom: calc(74px + var(--k-pdp-safe-bottom) + 16px);
		max-width: none;
	}
}