/* Magento status cards share the storefront palette in both appearance modes. */
body .message,
body .message:is(.success, .error, .warning, .notice, .info) {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 4);
    margin-block: 0 calc(var(--spacing) * 3);
    border: 1px solid var(--color-line);
    border-inline-start: var(--spacing) solid var(--msg, var(--color-primary));
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    color: var(--color-fg);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--text-sm--line-height);
    text-align: start;
    overflow-wrap: anywhere;
}

body .message::before {
    content: "";
    flex: 0 0 calc(var(--spacing) * 6);
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
    border-radius: 0;
    box-shadow: none;
    background: var(--msg, var(--color-primary));
    mask: var(--hh-message-icon) center / contain no-repeat;
    --hh-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6m0-10v.01'/%3E%3C/svg%3E");
}

body .message > :not(button) { min-width: 0; flex: 1; }
body .message > button {
    flex: 0 0 calc(var(--spacing) * 8);
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
    margin-block: calc(var(--spacing) * -1);
    color: var(--color-fg-secondary);
    border-radius: var(--radius-md);
}
body .message > button:hover { background: var(--color-bg); color: var(--color-fg); }

body .message.success { --msg: var(--color-green-500); }
body .message.error { --msg: var(--color-red-500); }
body .message.warning { --msg: var(--color-yellow-500); }
body .message:is(.notice, .info) { --msg: var(--color-blue-500); }
body .message.success::before {
    --hh-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
}
body .message.error::before {
    --hh-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6m0-6-6 6'/%3E%3C/svg%3E");
}
body .message.warning::before {
    --hh-message-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 10 18H2L12 3Zm0 6v5m0 3v.01'/%3E%3C/svg%3E");
}

/* Global flash messages float above the page without occupying content space.
 * Category pages deliberately keep their global messages in the document flow.
 */
body:not(.catalog-category-view) .page.messages {
    position: fixed;
    inset-block-start: max(calc(var(--spacing) * 4), env(safe-area-inset-top));
    inset-inline-end: max(calc(var(--spacing) * 4), env(safe-area-inset-right));
    width: min(var(--container-sm), calc(100% - var(--spacing) * 8));
    max-width: none;
    margin: 0;
    padding: 0;
    z-index: 60;
    pointer-events: none;
}
body:not(.catalog-category-view) .page.messages .messages {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}
body:not(.catalog-category-view) .page.messages #messages {
    max-height: calc(100dvh - var(--spacing) * 8);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
}
body:not(.catalog-category-view) .page.messages .message { pointer-events: auto; }
body.catalog-category-view .page.messages { position: static; z-index: auto; }

/* Drawer notices remain contextual and use the same status-card design. */
#cart-drawer .message.error {
    color: var(--color-fg);
    background: var(--color-surface);
    border-color: var(--color-line);
    border-inline-start-color: var(--msg);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
}

/* Only floating global toasts fade; category and contextual notices stay unchanged. */
body:not(.catalog-category-view) .page.messages .message {
    opacity: 1;
    transition-property: opacity;
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--ease-out);
}
@starting-style {
    body:not(.catalog-category-view) .page.messages .message { opacity: 0; }
}
body:not(.catalog-category-view) .page.messages .message.hh-toast-leaving {
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    body:not(.catalog-category-view) .page.messages .message { transition: none; }
}