/* One frontend notice treatment; WooCommerce owns messages, roles and actions. */
body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner) {
	--mrwax-notice-accent: var(--wp--preset--color--mrwax-bronze);
	--mrwax-notice-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%2011v6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%22.65%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
	box-sizing: border-box;
	position: relative;
	min-inline-size: 0;
	max-inline-size: 100%;
	min-block-size: 4rem;
	margin: 0 0 1.25rem;
	padding: 1rem 1.125rem 1rem 3.75rem;
	border: 1px solid color-mix(in srgb, var(--mrwax-notice-accent) 28%, var(--wp--preset--color--mrwax-surface));
	border-radius: 0.5rem;
	background: linear-gradient(110deg, color-mix(in srgb, var(--wp--preset--color--mrwax-canvas) 65%, var(--wp--preset--color--mrwax-surface)), var(--wp--preset--color--mrwax-surface));
	box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--wp--preset--color--mrwax-dark) 4%, transparent);
	color: var(--wp--preset--color--mrwax-muted);
	font-family: var(--wp--preset--font-family--mrwax-body);
	font-size: 0.9375rem;
	font-weight: var(--wp--custom--mrwax--font-weight--regular);
	line-height: 1.65;
	list-style: none;
	overflow-wrap: anywhere;
}

body:not(.wp-admin) :is(.woocommerce-error, .wc-block-components-notice-banner.is-error) {
	--mrwax-notice-accent: var(--wp--preset--color--mrwax-danger);
	--mrwax-notice-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v6%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2217%22%20r%3D%22.65%22%20fill%3D%22black%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

body:not(.wp-admin) :is(.woocommerce-message, .wc-block-components-notice-banner.is-success) {
	--mrwax-notice-accent: var(--wp--preset--color--mrwax-success);
	--mrwax-notice-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%2012%202.5%202.5L16%209%22%2F%3E%3C%2Fsvg%3E");
}

body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before {
	content: '';
	position: absolute;
	inset-block-start: 1.125rem;
	inset-inline-start: 1.125rem;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	background: var(--mrwax-notice-accent);
	mask: var(--mrwax-notice-icon) center / contain no-repeat;
}

body:not(.wp-admin) .woocommerce-error > li + li {
	margin-block-start: 0.5rem;
}

body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner) a:not(.button) {
	color: var(--wp--preset--color--mrwax-muted);
	font-weight: var(--wp--custom--mrwax--font-weight--medium);
	text-decoration: underline;
	text-decoration-color: var(--mrwax-notice-accent);
	text-underline-offset: 0.2em;
}

body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	max-inline-size: 100%;
	margin-inline-start: 1rem;
	padding: 0.65rem 1rem;
	border: 1px solid var(--wp--preset--color--mrwax-border);
	border-radius: 0.25rem;
	background: var(--wp--preset--color--mrwax-surface);
	color: var(--wp--preset--color--mrwax-muted);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: var(--wp--custom--mrwax--font-weight--semibold);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button:hover {
	border-color: var(--mrwax-notice-accent);
	background: var(--wp--preset--color--mrwax-canvas);
}

body:not(.wp-admin) .wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	/* Native Blocks fixes banner padding with !important. */
	padding: 1rem 1.125rem !important;
}

body:not(.wp-admin) .wc-block-components-notice-banner > svg {
	flex: 0 0 1.5rem;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-block-start: 0.1rem;
	padding: 0;
	border-radius: 0;
	background: transparent;
	fill: var(--mrwax-notice-accent);
	color: var(--mrwax-notice-accent);
}

body:not(.wp-admin) .wc-block-components-notice-banner__content {
	flex: 1 1 auto;
	min-inline-size: 0;
	max-inline-size: 100%;
}

body:not(.wp-admin) .wc-block-components-notice-banner__content :is(p, ul, ol) {
	margin-block: 0;
}

body:not(.wp-admin) .wc-block-components-notice-banner__content > * + * {
	margin-block-start: 0.5rem;
}

body:not(.wp-admin) .wc-block-components-notice-banner > .wc-block-components-button {
	flex: 0 0 44px;
	align-self: flex-start;
	/* Native dismiss sizing and colors are important; keep its actual handler. */
	inline-size: 44px !important;
	block-size: 44px !important;
	min-inline-size: 44px !important;
	min-block-size: 44px !important;
	margin: -0.625rem -0.625rem 0 0 !important;
	padding: 0.625rem !important;
	border: 0;
	border-radius: 50%;
	background: transparent !important;
	color: var(--wp--preset--color--mrwax-muted) !important;
	cursor: pointer;
}

body:not(.wp-admin) .wc-block-components-notice-banner > .wc-block-components-button:hover {
	background: var(--wp--preset--color--mrwax-canvas) !important;
}

body:not(.wp-admin) .wc-block-components-notice-banner > .wc-block-components-button[hidden] {
	display: none !important;
}

body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner) :is(a, button):focus-visible {
	outline: 2px solid var(--wp--preset--color--mrwax-ink) !important;
	outline-offset: 3px;
	box-shadow: none !important;
}

@media (max-width: 30rem) {
	body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button {
		float: none;
		display: flex;
		inline-size: fit-content;
		margin: 0 0 0.75rem;
	}
}

@media (forced-colors: active) {
	body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner) {
		--mrwax-notice-accent: CanvasText;
		border-color: CanvasText;
		background: Canvas;
		color: CanvasText;
		box-shadow: none;
	}

	body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error)::before {
		background: CanvasText;
		forced-color-adjust: none;
	}

	body:not(.wp-admin) .wc-block-components-notice-banner > svg {
		fill: CanvasText;
		color: CanvasText;
	}

	body:not(.wp-admin) :is(.woocommerce-info, .woocommerce-message, .woocommerce-error, .wc-block-components-notice-banner) :is(a, button):focus-visible {
		outline-color: Highlight !important;
	}
}