:root {
--hl-wc-notice-radius: 14px;
--hl-wc-notice-shadow: 0 10px 40px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(15, 23, 42, 0.04);
--hl-wc-notice-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.woocommerce-notices-wrapper {
margin: 0 0 1.25rem;
padding: 0;
max-width: 100%;
}
.woocommerce-notices-wrapper:empty {
display: none;
margin: 0;
}
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error {
margin: 0 0 0.75rem;
padding: 1rem 1.15rem 1rem 3.35rem;
border-radius: var(--hl-wc-notice-radius);
font-family: var(--hl-wc-notice-font);
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.55;
color: #0f172a;
position: relative;
border: 1px solid transparent;
box-shadow: var(--hl-wc-notice-shadow);
background-clip: padding-box;
}
.woocommerce-notices-wrapper .woocommerce-message:last-child,
.woocommerce-notices-wrapper .woocommerce-info:last-child,
.woocommerce-notices-wrapper .woocommerce-error:last-child {
margin-bottom: 0;
} .woocommerce-notices-wrapper .woocommerce-message::before {
content: "";
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: linear-gradient(145deg, #10b981 0%, #059669 100%);
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
}
.woocommerce-notices-wrapper .woocommerce-message::after {
content: "";
position: absolute;
left: 1.42rem;
top: 50%;
width: 0.32rem;
height: 0.55rem;
margin-top: -0.08rem;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: translateY(-50%) rotate(45deg);
}
.woocommerce-notices-wrapper .woocommerce-message {
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 45%, #ffffff 100%);
border-color: rgba(16, 185, 129, 0.28);
} .woocommerce-notices-wrapper .woocommerce-info::before {
content: "";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: linear-gradient(145deg, #3b82f6 0%, #1e4fad 100%);
box-shadow: 0 2px 8px rgba(30, 79, 173, 0.28);
}
.woocommerce-notices-wrapper .woocommerce-info::after {
content: "i";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.65rem;
height: 1.65rem;
line-height: 1.65rem;
text-align: center;
font-size: 0.82rem;
font-weight: 700;
font-style: normal;
color: #fff;
pointer-events: none;
}
.woocommerce-notices-wrapper .woocommerce-info {
background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 55%, #ffffff 100%);
border-color: rgba(59, 130, 246, 0.28);
} .woocommerce-notices-wrapper .woocommerce-error::before {
content: "";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.65rem;
height: 1.65rem;
border-radius: 50%;
background: linear-gradient(145deg, #f87171 0%, #dc2626 100%);
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.28);
}
.woocommerce-notices-wrapper .woocommerce-error::after {
content: "!";
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 1.65rem;
height: 1.65rem;
line-height: 1.65rem;
text-align: center;
font-size: 0.88rem;
font-weight: 700;
color: #fff;
pointer-events: none;
}
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-error {
background: linear-gradient(135deg, #fef2f2 0%, #fffbeb 30%, #ffffff 100%);
border-color: rgba(248, 113, 113, 0.35);
list-style: none;
}
.woocommerce-notices-wrapper ul.woocommerce-error {
padding: 1rem 1.15rem 1rem 3.35rem;
}
.woocommerce-notices-wrapper ul.woocommerce-error li {
margin: 0.35rem 0;
}
.woocommerce-notices-wrapper ul.woocommerce-error li:first-child {
margin-top: 0;
}
.woocommerce-notices-wrapper ul.woocommerce-error li:last-child {
margin-bottom: 0;
} .woocommerce-notices-wrapper a.button,
.woocommerce-notices-wrapper .button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin: 0.35rem 0 0 0.5rem;
padding: 0.45rem 1.1rem;
min-height: 2.25rem;
border-radius: 999px;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none !important;
text-transform: none;
line-height: 1.2;
border: none;
cursor: pointer;
vertical-align: middle;
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
background: linear-gradient(135deg, #1e4fad 0%, #2563eb 52%, #1d4ed8 100%);
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(30, 79, 173, 0.35);
}
.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:hover {
filter: brightness(1.06);
box-shadow: 0 6px 20px rgba(30, 79, 173, 0.42);
transform: translateY(-1px);
}
.woocommerce-notices-wrapper .woocommerce-message a.button:active,
.woocommerce-notices-wrapper .woocommerce-message .button.wc-forward:active {
transform: translateY(0);
}
.woocommerce-notices-wrapper .woocommerce-info a.button {
background: linear-gradient(135deg, #2563eb 0%, #1e4fad 100%);
color: #fff !important;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.woocommerce-notices-wrapper .woocommerce-error a.button {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
color: #fff !important;
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}
@media (max-width: 520px) {
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper ul.woocommerce-error {
padding: 1rem 1rem 1rem 3rem;
font-size: 0.875rem;
}
.woocommerce-notices-wrapper a.button,
.woocommerce-notices-wrapper .button {
margin-left: 0;
margin-top: 0.65rem;
width: 100%;
}
} body.woocommerce-cart .woocommerce-notices-wrapper {
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
margin-bottom: 1.15rem;
}
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.85rem;
padding: 0.85rem 1rem 0.85rem 3.15rem;
font-size: 0.9rem;
line-height: 1.5;
word-break: break-word;
border-radius: 12px;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
}
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::before {
left: 12px;
width: 1.5rem;
height: 1.5rem;
}
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message::after {
left: 1.31rem;
width: 0.28rem;
height: 0.48rem;
border-width: 0 2px 2px 0;
}
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a.button,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
margin: 0;
flex-shrink: 0;
}
@media (min-width: 560px) {
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message a.button,
body.woocommerce-cart .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
margin-left: auto;
}
} body.woocommerce-checkout .hl-checkout-page .woocommerce-notices-wrapper {
padding: 0;
margin-bottom: 1rem;
}
body.woocommerce-checkout .hl-checkout-page .woocommerce-info,
body.woocommerce-checkout .hl-checkout-page .woocommerce-message,
body.woocommerce-checkout .hl-checkout-page .woocommerce-error {
border-radius: 12px;
font-size: 0.9rem;
} body.woocommerce-order-received .hl-thankyou-page .woocommerce-notices-wrapper {
padding: 0;
margin-bottom: 1rem;
} body.woocommerce-account .hl-account-page .woocommerce-notices-wrapper {
padding: 0;
margin-bottom: 1rem;
}
body.woocommerce-account .hl-account-guest .woocommerce-notices-wrapper {
max-width: 920px;
margin-left: auto;
margin-right: auto;
} .site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message {
padding: 1rem 1.15rem 1rem 3.35rem !important;
border-radius: var(--hl-wc-notice-radius) !important;
font-family: var(--hl-wc-notice-font) !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
line-height: 1.55 !important;
color: #0f172a !important;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 45%, #ffffff 100%) !important;
border: 1px solid rgba(16, 185, 129, 0.28) !important;
box-shadow: var(--hl-wc-notice-shadow) !important;
position: relative !important;
}
.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message::before {
content: "" !important;
position: absolute !important;
left: 11px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 1.65rem !important;
height: 1.65rem !important;
border-radius: 50% !important;
background: linear-gradient(145deg, #10b981 0%, #059669 100%) !important;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35) !important;
}
.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message::after {
content: "" !important;
position: absolute !important;
left: 1.42rem !important;
top: 50% !important;
width: 0.32rem !important;
height: 0.55rem !important;
margin-top: -0.08rem !important;
border: solid #fff !important;
border-width: 0 2.5px 2.5px 0 !important;
transform: translateY(-50%) rotate(45deg) !important;
}
.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message a.button,
.site#page .mainContent .woocommerce-notices-wrapper .woocommerce-message .button.wc-forward {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0.35rem 0 0 0.5rem !important;
padding: 0.45rem 1.1rem !important;
min-height: 2.25rem !important;
border-radius: 999px !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
text-decoration: none !important;
background: linear-gradient(135deg, #1e4fad 0%, #2563eb 52%, #1d4ed8 100%) !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(30, 79, 173, 0.35) !important;
border: none !important;
}