/*
 * WooCommerce's notices outside the checkout ("… has been added to your cart. View cart", errors):
 * the checkout notice's look (templates/checkout.css) — a Line hairline at the radius on Canvas, meta
 * size, the link as a text link, errors with a --danger border. On the product page they sit in the
 * Mist top block, below the header laid over it (parts/product/top.php).
 */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-notices-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-block-end: var(--space-3);
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-1) var(--space-2);
	margin: 0;
	padding: 1rem 1.25rem;
	border: var(--hairline) solid var(--line);
	border-radius: var(--radius);
	background: var(--canvas);
	color: var(--ink);
	font-size: var(--fs-meta);
	line-height: normal;
	list-style: none;
}

.woocommerce-notices-wrapper .woocommerce-error {
	border-color: var(--danger);
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	content: none;
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info) .button {
	order: 2;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: var(--fs-meta);
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: underline;
	text-decoration-thickness: var(--hairline);
	text-transform: none;
	text-underline-offset: 4px;
}

/* Below 768 the product top has no side padding (the gallery runs edge to edge): the notice keeps
   the container's. */
@media (max-width: 767px) {
	.product-top > .woocommerce-notices-wrapper {
		padding-inline: var(--container-pad);
		padding-block-start: var(--space-2);
	}
}