/* ---------- My account messages (saved, wrong password ...): same as the login card ---------- */
html body .kl-acc .kl-acc-content .woocommerce-notices-wrapper{margin:0;}
html body .kl-acc .kl-acc-content :is(.woocommerce-error,.woocommerce-message,.woocommerce-info),
html body .kl-acc .kl-acc-content .wc-block-components-notice-banner{
	display:block!important;list-style:none!important;margin:0 0 24px!important;padding:14px 16px!important;
	background:var(--kl-tint)!important;color:var(--kl-ink)!important;
	border:1px solid var(--kl-divider)!important;border-left:4px solid var(--kl-ink)!important;border-radius:var(--kl-radius-control)!important;
	font-size:14px!important;line-height:1.5;text-align:left!important;text-indent:0!important;gap:0!important;
}
html body .kl-acc .kl-acc-content :is(.woocommerce-error,.wc-block-components-notice-banner.is-error){background:var(--kl-error-bg)!important;border-color:#fecdca!important;border-left-color:var(--kl-error)!important;}
html body .kl-acc .kl-acc-content :is(.woocommerce-message,.wc-block-components-notice-banner.is-success){background:var(--kl-success-bg)!important;border-color:#abefc6!important;border-left-color:var(--kl-success)!important;}
html body .kl-acc .kl-acc-content :is(.woocommerce-error,.woocommerce-message,.woocommerce-info)::before,
html body .kl-acc .kl-acc-content :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li::before{content:none!important;display:none!important;}
html body .kl-acc .kl-acc-content :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li{display:block!important;margin:0!important;padding:0!important;list-style:none!important;text-align:left!important;}
html body .kl-acc .kl-acc-content :is(.woocommerce-error,.woocommerce-message,.woocommerce-info) li + li{margin-top:6px!important;}
/* a button inside a message ("Browse products") stays small and on the right */
/* a message with a button ("Confirm email address", "Browse products"):
   text on the left, a small button on the right, both centred; on phones the button goes under the text, full width.
   WooCommerce 10 printed the button first and 11 prints it last: the button gets order 2, so it is on the right with either markup. */
/* newer WooCommerce prints "block" style notices: the text and button sit in __content */
html body .kl-acc .kl-acc-content .wc-block-components-notice-banner__content:has(> .button){display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:12px 20px;}
html body .kl-acc .kl-acc-content .wc-block-components-notice-banner:has(> .wc-block-components-notice-banner__content > .button){padding:14px 14px 14px 18px!important;}
html body .kl-acc .kl-acc-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error):has(> .button){display:flex!important;flex-direction:row;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 14px 14px 18px!important;}
html body .kl-acc .kl-acc-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner__content) > a.button{flex:none;float:none!important;order:2;margin:0!important;min-height:38px!important;padding:8px 16px!important;font-size:11px!important;letter-spacing:.12em!important;white-space:nowrap;opacity:1!important;text-decoration:none!important;line-height:1.4!important;height:auto!important;background:var(--kl-surface)!important;color:var(--kl-ink)!important;border:1px solid var(--kl-ink)!important;}
@media (hover:hover){ html body .kl-acc .kl-acc-content :is(.woocommerce-message,.woocommerce-info,.woocommerce-error,.wc-block-components-notice-banner__content) > a.button:hover{background:var(--kl-surface)!important;color:var(--kl-ink)!important;box-shadow:var(--kl-shadow-lift-soft)!important;} }
html body .kl-acc .kl-acc-content .wc-block-components-notice-banner > svg{display:none!important;}
html body .kl-acc .kl-acc-content .wc-block-components-notice-banner__content{margin:0!important;padding:0!important;}