/*
 * WooCommerce notices — one component, everywhere they can appear.
 *
 * WHY THIS IS ITS OWN FILE. These three classes are printed by
 * wc_print_notices() on the cart, the checkout, my-account AND on the product
 * page and the shop archive: "toegevoegd aan je winkelwagen" is by far the most
 * frequently seen notice in the whole shop and it appears where checkout.css is
 * not enqueued. It lived in checkout.css until 16 aug 2026, which meant the
 * component was skinned on three screens and raw WooCommerce on the two the
 * customer actually meets first — a green ::before check, a grey pill that reads
 * as a disabled button, and (because WooCommerce calls .focus() on the notice)
 * base.css's teal focus ring around all of it. Two accent colours, neither
 * intentional.
 *
 * SCOPING. Unlike checkout.css this file is not tied to a body class, because
 * the component is not tied to a page. It is safe because every selector starts
 * at one of the three WooCommerce notice classes, which the theme's own chrome
 * never uses. Nothing here may be widened to a bare element selector.
 *
 * Colours, spacing and radii come from variables.css only.
 */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--border-1);
	border-left: 4px solid var(--fg-3);
	border-radius: var(--r-md);
	background: var(--bg-2);
	list-style: none;
	font-size: var(--fs-14);
	line-height: var(--lh-base);
	color: var(--fg-1);
}

/* WooCommerce draws its own icon in a ::before using its icon font, positioned
   absolutely against a 3.5em left padding. We lay the parts out with flex and
   supply our own glyph where there is one, so both pseudo-elements go. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
	content: none;
}

/* One accent per type — the left rail. The type is never signalled by colour
   alone: a message carries the basket glyph, an error is announced through
   role="alert", and each one leads with a sentence that says what happened. */
.woocommerce-message {
	/* green-700, not --hs-green: the plain brand green is 2.7:1 on green-50 and
	   the rail should clear 3:1 as a graphical element. */
	border-left-color: var(--hs-green-700);
	background: var(--hs-green-50);
}

.woocommerce-info {
	border-left-color: var(--accent-text);
	background: var(--hs-teal-50);
}

.woocommerce-error {
	border-left-color: var(--hs-danger);
	background: var(--hs-danger-bg);
}

.woocommerce-error li {
	margin: 0;
	width: 100%;
}

/*
 * WooCommerce gives the notice tabindex="-1" and calls .focus() on it so that
 * keyboard and screen-reader users are moved to it. Chrome matches
 * :focus-visible on that programmatic focus, so base.css painted a 2px teal ring
 * around a green success bar — the clash Job flagged. Suppressing the ring on a
 * container that is not an interactive control loses nothing: focus still moves,
 * role="alert" still announces. This is the same treatment base.css already
 * gives .site-main, the other programmatic focus target in the theme.
 */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible {
	outline: none;
}

/* ---- The parts of our own add-to-cart message ---- */

.woocommerce-message .hs-notice__icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--hs-green-700);
}

/*
 * Only a size override. The glyph keeps its `class` and `fill` because
 * hs_allow_icon_attributes_in_notices() (inc/woocommerce-checkout.php) widens
 * WooCommerce's notice sanitiser — without that filter `wc_kses_notice()` strips
 * both and `.hs-icon` never matches, leaving the icon at 0×0 in black. A notice
 * icon sits beside 14px text, so it is a size down from the 24px default.
 */
.woocommerce-message .hs-notice__icon .hs-icon {
	width: 20px;
	height: 20px;
}

.woocommerce-message .hs-notice__text {
	flex: 1 1 12rem;
	min-width: 0;
	font-weight: var(--fw-semibold);
}

/*
 * The action inside a notice is the theme button component, not WooCommerce's
 * `.button`. components.css is loaded on every page, so this works on the
 * product page too, where checkout.css is not. margin-left:auto pushes it to the
 * end of the row without needing a wrapper.
 */
.woocommerce-message .hs-notice__action,
.woocommerce-info .hs-notice__action {
	margin-left: auto;
	flex: 0 0 auto;
}

/*
 * Fallback for notices whose markup we do not own — WooCommerce's own
 * "Bekijk winkelwagen", "Update winkelwagen" and gateway links still arrive as
 * `.button`. Give them the primary look rather than woocommerce.css's grey pill,
 * which reads as disabled. woocommerce.css paints those through
 * `.woocommerce-message .button` — same (0,2,0) as here, and this file loads
 * later, so it wins without !important.
 *
 * On the three funnel screens checkout.css §1.6 (`.woocommerce-cart .woocommerce
 * .button`, (0,3,1)) takes these over instead. That is fine: it is the same
 * theme button, and the message the theme itself emits carries .hs-btn and no
 * .button class, so it is never in that fight.
 */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-3) var(--sp-5);
	border: 0;
	border-radius: var(--r-md);
	background: var(--accent-fill);
	color: var(--fg-on-brand);
	font-family: inherit;
	font-size: var(--fs-14);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	text-decoration: none;
	box-shadow: var(--shadow-1);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: var(--accent-fill-hover);
	color: var(--fg-on-brand);
	box-shadow: var(--shadow-2);
}

/*
 * Below 30em the action drops to its own full-width line instead of being
 * squeezed next to the sentence. margin-left:auto is undone, or the button ends
 * up flush right on a line of its own.
 */
@media ( max-width: 30em ) {
	.woocommerce-message .hs-notice__action,
	.woocommerce-info .hs-notice__action,
	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		margin-left: 0;
		width: 100%;
	}
}