/*bizco-head:bizco-alert-css*/

/* THE BELL, EVERY SELECTOR THAT CAN DRAW IT. Blocksy renders it from the 'woo'
   icon font, glyph \e901, out of exactly two rules:
     legacy-notice.scss  ::before on .woocommerce-info / -error / -message /
                         .woocommerce-thankyou-order-received
     store-notice.scss   ::before on .demo_store, the WooCommerce store notice
                         banner. That one is switched off today, but it is a
                         checkbox in WooCommerce > Settings > General, so it is
                         killed here rather than left to be rediscovered.
   The first three of those classes get the mark strip further down instead of
   a plain kill; the glyph is unset for all of them here first, with no
   :not() guard, so no combination of classes can bring it back. */
.woocommerce-thankyou-order-received::before,.demo_store::before{
	content:none !important;display:none !important}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message)::before{
	font-family:inherit !important;content:"" !important}

/* JS-BUILT NOTICES NEVER REACH THE TEMPLATE, so the legacy classes are dressed
   as the component rather than merely stripped of their bell.
   Five places assemble notice markup in the browser and put it straight into
   the DOM, never touching wc_get_template, so the override above cannot see
   them:
     - checkout.js twice, for an unparseable checkout response and for an
       outright network failure ("There was an error processing your order...")
     - add-to-cart-variation.js, when the chosen attributes match no variation
     - Stripe's classic and UPE bundles, which wrap every gateway refusal
       (card declined, incorrect CVC, SCA give-up) in their own
       <ul class="woocommerce-error">. That is the live MAX checkout path.
   Chasing five scripts would leave the sixth. Instead the bell's own ::before
   is reused as the coloured mark strip: any element carrying a legacy notice
   class, from any plugin present or future, lands in the component's skin with
   no markup of its own. */
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert){
	position:relative;display:block;overflow:hidden;list-style:none !important;
	background:#fff !important;border:1px solid #E4EAE6 !important;
	border-radius:12px !important;box-shadow:0 1px 2px rgba(22,33,27,.05);
	font-family:'Outfit',system-ui,sans-serif;
	font-size:15px;font-weight:700;line-height:1.35;
	margin:0 0 18px !important;min-height:0 !important;
	padding:14px 18px 14px 66px !important;text-align:left}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert)::before{
	content:"" !important;display:block !important;position:absolute;
	left:0;top:0;bottom:0;width:48px;height:auto;margin:0;padding:0;
	font-size:0;line-height:0;border:0;border-radius:0;
	background-repeat:no-repeat;background-position:center;background-size:22px 22px}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert) li{
	list-style:none !important;margin:0 0 5px !important;padding:0 !important}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert) li:last-child{
	margin-bottom:0 !important}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert) p{
	margin:0 !important}
:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert) a{
	color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.woocommerce-error:not(.bizco-alert){color:#8C1D16}
.woocommerce-error:not(.bizco-alert)::before{background-color:#C6382C;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Ccircle cx='12' cy='17.4' r='1.35' fill='%23fff' stroke='none'/%3E%3C/svg%3E")}
.woocommerce-info:not(.bizco-alert){color:#3A4F66}
.woocommerce-info:not(.bizco-alert)::before{background-color:#5B7794;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Ccircle cx='12' cy='6.9' r='1.35' fill='%23fff' stroke='none'/%3E%3C/svg%3E")}
.woocommerce-message:not(.bizco-alert){color:#0F5230}
.woocommerce-message:not(.bizco-alert)::before{background-color:#0F9558;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8.5-9'/%3E%3C/svg%3E")}

.bizco-alert{display:flex;align-items:stretch;background:#fff;border:1px solid #E4EAE6;
	border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(22,33,27,.05);
	font-family:'Outfit',system-ui,sans-serif;margin:0 0 18px;text-align:left}
/* The hook class every block borrows so the cart, checkout and add-to-cart
   scripts can find it also drags in the whole WooCommerce Blocks notice component (white card,
   4px radius, 16px padding, .875em type, 12px gap) plus two Blocksy overrides
   of it (border:none + background repaint on .woocommerce-page, 2rem margin).
   Every box property those set is restored to this component's own values
   here. !important is unavoidable: the blocks sheet marks its padding
   !important, and Blocksy's override is a three-class selector. Scoped to the
   pair so the plain .bizco-alert rule above stays overridable. */
.bizco-alert.wc-block-components-notice-banner{
	align-content:stretch !important;align-items:stretch !important;
	background:#fff !important;border:1px solid #E4EAE6 !important;
	border-radius:12px !important;box-sizing:border-box !important;
	color:inherit !important;display:flex !important;
	font-size:inherit !important;font-weight:inherit !important;
	gap:0 !important;line-height:inherit !important;
	margin:0 0 18px !important;padding:0 !important}
.bizco-alert__mark{flex:none;width:48px;display:flex;align-items:center;justify-content:center}
.bizco-alert__in{flex:1;min-width:0;padding:15px 18px;display:flex;gap:14px;
	align-items:center;flex-wrap:wrap}
.bizco-alert__tx{flex:1;min-width:200px}
.bizco-alert__t{display:block;font-size:15px;font-weight:700;line-height:1.35;margin:0 0 2px}
.bizco-alert__b{margin:0 !important;font-size:14.5px;line-height:1.5;color:#6B7280}
.bizco-alert.is-one .bizco-alert__in{padding:14px 18px}
.bizco-alert.is-one .bizco-alert__t{margin:0}
.bizco-alert__list{margin:4px 0 0 !important;padding:0 !important;list-style:none !important}
.bizco-alert__list li{position:relative;margin:0 0 5px !important;padding:0 0 0 15px !important;
	list-style:none !important;font-size:14.5px;line-height:1.5;color:#6B7280;overflow-wrap:anywhere}
.bizco-alert__list li:last-child{margin-bottom:0 !important}
.bizco-alert__list li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;
	border-radius:50%;background:currentColor;opacity:.5}
.bizco-alert__act{flex:none}
.bizco-alert a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bizco-alert__b a,.bizco-alert__list a{color:#0C7A47;text-decoration:none;font-weight:700}
.bizco-alert__b a:hover,.bizco-alert__list a:hover{color:#0F5230;text-decoration:underline}
/* The shipped tonal neutral, 40px / radius 8 / 15px 600. */
.bizco-alert__btn{display:inline-flex !important;align-items:center;justify-content:center;
	height:40px;padding:0 18px !important;border-radius:8px !important;background:#EEF2F5 !important;
	color:#3A4F66 !important;font-size:15px !important;font-weight:600 !important;
	text-decoration:none !important;border:0 !important;white-space:nowrap;line-height:1 !important;
	box-shadow:none !important;margin:0 !important;min-height:0 !important}
.bizco-alert__btn:hover{background:#E1E8EE !important;color:#192A3D !important}

/* The glyph, as a background image. See the note by bizco_alert_icon. */
.bizco-alert__mark::after{content:"";width:22px;height:22px;background-repeat:no-repeat;
	background-position:center;background-size:contain}
.bizco-alert--e .bizco-alert__mark{background:#C6382C}
.bizco-alert--e .bizco-alert__mark::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v7'/%3E%3Ccircle cx='12' cy='17.4' r='1.35' fill='%23fff' stroke='none'/%3E%3C/svg%3E")}
.bizco-alert--n .bizco-alert__mark::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 11v7'/%3E%3Ccircle cx='12' cy='6.9' r='1.35' fill='%23fff' stroke='none'/%3E%3C/svg%3E")}
.bizco-alert--s .bizco-alert__mark::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8.5-9'/%3E%3C/svg%3E")}
.bizco-alert--e .bizco-alert__t{color:#8C1D16}
.bizco-alert--n .bizco-alert__mark{background:#5B7794}
.bizco-alert--n .bizco-alert__t{color:#3A4F66}
.bizco-alert--s .bizco-alert__mark{background:#0F9558}
.bizco-alert--s .bizco-alert__t{color:#0F5230}

/* Woo gives its own wrapper a bottom margin; the block owns its spacing now. */
.woocommerce-notices-wrapper:has(.bizco-alert){margin-bottom:0}
/* bizco-test-chk01b1n3 v1: centre (fix group TEST-CHK-01-B1-N3, test case CHK-01-B1-N3, owner
   report 2026-09-22: "the alert that comes up on the home page is not centered vertically in the
   whitespace that it sits in, but rather is glued to the top"; owner decision the same day,
   option B of two previewed side by side: keep the band exactly as tall as it is now).
   The block owns its spacing, and that spacing is 18px BELOW and nothing above - right wherever
   something already sits above the box (the shop and category title bands, the search category
   strip, the cart), wrong on a plain page, where the notices wrapper is the FIRST child of
   <article> and the card ends up touching the bottom of the green menu bar with all of its clear
   space underneath. Splitting the 18px into 9 above and 9 below leaves the band the same height
   (94px at 1440, 132px at 390) with the card in the middle of it. Padding, not a margin, so the
   gap cannot collapse out of the band; only the LAST card gives up its bottom margin, so two
   alerts printed at once still stand 18px apart. Scoped to the first-child case so no other
   surface moves, and an empty wrapper holds no .bizco-alert, so a page raising no notice keeps
   every pixel it has. !important because the block-notice hook class two rules up marks the
   same property. */
article > .woocommerce-notices-wrapper:first-child:has(.bizco-alert){padding:9px 0}
/* bizco-test-chk01b1n3 v1a: has-pair. Both halves of the centring carry :has(), so a browser
   that does not know :has() (Firefox before 121) drops BOTH and sees the page exactly as it was
   before this group - rather than dropping only the padding, keeping this line, and squeezing the
   card against the menu bar above and the section below. */
article > .woocommerce-notices-wrapper:first-child:has(.bizco-alert) .bizco-alert:last-child{margin-bottom:0 !important}
@media (max-width:600px){
	:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert){
		padding-left:57px !important}
	:is(.woocommerce-error,.woocommerce-info,.woocommerce-message):not(.bizco-alert)::before{width:42px}
	.bizco-alert__mark{width:42px}
	.bizco-alert__in{padding:13px 15px;gap:10px}
	.bizco-alert__tx{min-width:0}
	.bizco-alert__act{width:100%}
	.bizco-alert__btn{width:100%}
}