.notices {
	position: fixed;
	top: calc(var(--header-top) + 1rem);
	right: max(1rem, env(safe-area-inset-right));
	z-index: calc(var(--z-panel) + 20);
	display: grid;
	gap: 0.625rem;
	width: min(24rem, calc(100vw - 2rem));
	pointer-events: none;
}

.notice-toast {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.75rem;
	padding: 0.875rem 0.5rem 0.875rem 0.875rem;
	overflow: hidden;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-l);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: 0.9375rem;
	line-height: 1.45;
	box-shadow: 0 22px 44px -22px color-mix(in oklch, var(--color-deep) 55%, transparent), 0 3px 10px color-mix(in oklch, var(--color-deep) 7%, transparent);
	pointer-events: auto;
	animation: notice-in 0.45s var(--ease-out);
}

.notice-toast.is-leaving {
	animation: notice-out 0.3s var(--ease-out) forwards;
}

.notice-toast__icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-neon-soft);
	color: var(--color-brand-strong);
}

.notice-toast--error .notice-toast__icon {
	background: color-mix(in oklch, #d92d20 12%, #fff);
	color: #b42318;
}

.notice-toast--info .notice-toast__icon {
	background: var(--color-soft);
	color: var(--color-deep);
}

.notice-toast__body {
	align-self: center;
	min-width: 0;
	color: var(--color-deep);
	overflow-wrap: anywhere;
}

.notice-toast__body ul {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.notice-toast__body strong {
	font-weight: 700;
}

.notice-toast__body a {
	color: var(--color-brand);
	font-weight: 600;
}

.notice-toast__body .notice-toast__link {
	display: inline-flex;
	float: none;
	margin: 0.375rem 0.5rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-brand);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.notice-toast__close {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin: -0.25rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--color-muted);
	transition: background-color 0.2s, color 0.2s, transform 0.25s var(--ease-out);
}

.notice-toast__close:hover {
	background: var(--color-soft);
	color: var(--color-deep);
	transform: rotate(90deg);
}

.notice-toast__close .icon {
	width: 1.125rem;
	height: 1.125rem;
}

.notice-toast.is-timed::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 3px;
	background: var(--color-brand);
	content: "";
	opacity: 0.55;
	transform-origin: left;
	animation: notice-life var(--notice-life, 6s) linear forwards;
}

.notice-toast--info.is-timed::after {
	background: var(--color-deep);
}

.notice-toast.is-paused::after {
	animation-play-state: paused;
}

.woocommerce-notices-wrapper > :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) {
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-m);
	background: var(--color-soft);
	color: var(--color-deep);
	list-style: none;
}

.woocommerce-notices-wrapper > .woocommerce-error {
	border-color: color-mix(in oklch, #d92d20 30%, #fff);
	background: color-mix(in oklch, #d92d20 6%, #fff);
}

@keyframes notice-in {
	from {
		opacity: 0;
		transform: translateY(-0.75rem) scale(0.97);
	}
}

@keyframes notice-out {
	to {
		opacity: 0;
		transform: translateX(1.5rem);
	}
}

@keyframes notice-life {
	to {
		transform: scaleX(0);
	}
}

@media (max-width: 1023px) {
	.notices {
		top: calc(var(--header-top) + 0.75rem);
		right: 0.75rem;
		left: 0.75rem;
		width: auto;
	}

	@keyframes notice-out {
		to {
			opacity: 0;
			transform: translateY(-1rem);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.notice-toast,
	.notice-toast.is-leaving {
		animation-name: avisos-fade;
	}

	.notice-toast.is-timed::after {
		display: none;
	}
}

@keyframes avisos-fade {
	from {
		opacity: 0;
	}
}