/* ==========================================================================
 * Notices — WooCommerce's messages in the site's language (every page)
 *
 * Owner, 2026-10-13: "מה זה ההודעת שגיאה המכוערת הזאת? תעבור על כולן ותתקן זה נראה שאריות ממערכת בשנת 1999".
 * Shoptimizer paints them as filled slabs — orange-red errors, blue info, (green → our ink) success — with a
 * thick start border, rounded corners and white text. One notice here, three kinds:
 *   - a white box on a 1px hairline, square, no shadow, 14px ink text, start-aligned
 *   - a line icon at the start, the site's 1.5 stroke: an error is the site's red (the icon and the hairline —
 *     the text stays ink), success is ink, info is the muted grey
 *   - a button inside (WooCommerce's "לקופה", "View cart"…) is an underlined text link in ink, after the text
 * The kinds: .woocommerce-error (a <ul>: one <li> per message — the checkout's validation, an add-to-cart refusal),
 * .woocommerce-message (success: "נוסף לסל", a coupon applied), .woocommerce-info (information). CommerceKit's
 * swatch notice (#cgkit-as-notice) follows. Not here: the reviews' empty state (.woocommerce-noreviews — cusrev.css)
 * and the checkout's coupon row (a .woocommerce-info the shop-kit checkout turns into a plain row, more specific).
 * Where the product page's add-to-cart error floats (a toast, above the phone's bottom bar): the shop-kit
 * product-page module; its look is this one.
 * Shoptimizer's rules reach (0,3,1) on the product page (`.single-product .woocommerce-message a:not(.button)`), so
 * the box rules are `:root body …` (0,2,1) and the few link / button properties it sets higher are !important.
 * Design checks: tests/styles/notices.json.
 * ========================================================================== */
:root {
	--lp-notice-ink: var(--plp-ink, #1A1A1A);
	--lp-notice-muted: var(--plp-muted, #6B6560);
	--lp-notice-line: var(--border, #E2E2E2);
	--lp-notice-bg: var(--white, #FFFFFF);
	--lp-notice-error: var(--red, #B12704);
	--lp-notice-size: 14px;
	--lp-notice-pad-y: 14px;
	--lp-notice-pad-x: 16px;
	--lp-notice-icon: 18px;
	--lp-notice-icon-gap: 10px;
	--lp-notice-gap: 16px;                       /* air under a notice in the flow */
	/* the icons: the site's line glyphs (24px box, 1.5 stroke), painted through a mask in the kind's colour */
	--lp-notice-icon-error: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.25v.25'/%3E%3C/svg%3E");
	--lp-notice-icon-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.25 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
	--lp-notice-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.75v.25'/%3E%3C/svg%3E");
}

/* ---------- the box */
:root body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info),
:root #cgkit-as-notice .woocommerce-error {
	position: relative;
	box-sizing: border-box;
	max-width: none;
	margin: 0 0 var(--lp-notice-gap);
	padding: var(--lp-notice-pad-y) var(--lp-notice-pad-x);
	padding-inline-start: calc(var(--lp-notice-pad-x) + var(--lp-notice-icon) + var(--lp-notice-icon-gap));
	border: 1px solid var(--lp-notice-line);
	border-radius: 0;
	background: var(--lp-notice-bg);
	box-shadow: none;
	color: var(--lp-notice-ink);
	font-size: var(--lp-notice-size);
	font-weight: 400;
	line-height: 1.5;
	text-align: start;
	list-style: none;
}
:root body .woocommerce-error,
:root #cgkit-as-notice .woocommerce-error {
	border-color: var(--lp-notice-error);
}

/* ---------- the icon */
:root body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info)::before,
:root #cgkit-as-notice .woocommerce-error::before {
	content: "";
	display: block;
	position: absolute;
	top: calc(var(--lp-notice-pad-y) + (var(--lp-notice-size) * 1.5 - var(--lp-notice-icon)) / 2);
	inset-inline-start: var(--lp-notice-pad-x);
	inset-inline-end: auto;
	width: var(--lp-notice-icon);
	height: var(--lp-notice-icon);
	margin: 0;
	background-color: var(--lp-notice-muted);
	-webkit-mask: var(--lp-notice-icon-info) center / contain no-repeat;
	mask: var(--lp-notice-icon-info) center / contain no-repeat;
	font-size: 0;
}
:root body .woocommerce-error::before,
:root #cgkit-as-notice .woocommerce-error::before {
	background-color: var(--lp-notice-error);
	-webkit-mask-image: var(--lp-notice-icon-error);
	mask-image: var(--lp-notice-icon-error);
}
:root body .woocommerce-message::before {
	background-color: var(--lp-notice-ink);
	-webkit-mask-image: var(--lp-notice-icon-success);
	mask-image: var(--lp-notice-icon-success);
}

/* ---------- the lines of an error list */
:root body .woocommerce-error li {
	margin: 0;
	padding: 0;
	list-style: none;
}
:root body .woocommerce-error li + li {
	margin-top: 4px;
}

/* ---------- links and buttons inside: underlined ink text, a button after the sentence */
:root body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a {
	color: var(--lp-notice-ink) !important;
	font-weight: 500 !important;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:root body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a.button {
	display: inline !important;
	float: none;
	height: auto;
	min-height: 0;
	margin: 0;
	margin-inline-start: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}
:root body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a:hover {
	opacity: 1;
	text-decoration-thickness: 2px;
}
:root body :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) a:focus-visible {
	outline: 2px solid var(--brand, #C4878A);
	outline-offset: 2px;
}