/* Storefront moments. Neutral colors on purpose: this sits on top of all three brand stylesheets. */
.hsm-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 100000; }

.hsm-toast, .hsm-card {
    position: fixed; left: 50%; z-index: 100001; pointer-events: none; box-sizing: border-box;
    background: #fff; color: #1d2733; border-radius: 12px; text-align: center; font-family: inherit;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
    animation: hsmIn .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.hsm-toast { top: 18px; padding: 14px 40px 10px 22px; max-width: calc(100vw - 32px); }
.hsm-card  { top: 30vh; padding: 26px 44px 16px; width: 440px; max-width: calc(100vw - 32px); }
.hsm-toast.is-leaving, .hsm-card.is-leaving { animation: hsmOut .3s ease forwards; }

.hsm-title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.hsm-card .hsm-title { font-size: 24px; }
.hsm-body { font-size: 14px; color: #52606d; margin-top: 4px; }
.hsm-close, .hsm-off { pointer-events: auto; background: none; border: 0; cursor: pointer; color: #7b8794; font: inherit; }
.hsm-close { position: absolute; top: 6px; right: 10px; font-size: 20px; line-height: 1; padding: 4px; }
.hsm-off { display: block; margin: 8px auto 0; font-size: 11px; text-decoration: underline; }

@keyframes hsmIn  { from { opacity: 0; transform: translate(-50%, -12px) scale(.92); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes hsmOut { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -8px); } }

.hsm-bounce { display: inline-block; animation: hsmBounce .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hsmBounce { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 55% { transform: scale(.92) rotate(5deg); } 100% { transform: scale(1); } }

.hsm-plus {
    position: fixed; z-index: 100001; pointer-events: none; font-weight: 900; font-size: 38px; line-height: 1;
    color: #16a34a; animation: hsmPlus 1.8s ease-out forwards;
    /* white outline so it reads on any brand's header */
    text-shadow: -2px 0 #fff, 2px 0 #fff, 0 -2px #fff, 0 2px #fff, 0 3px 8px rgba(0, 0, 0, .25);
}
@keyframes hsmPlus { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -8px) scale(1.15); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -48px) scale(1); } }

/* Seasonal accents: a thin strip across the top of the page, and a colored top edge on toasts/cards. */
.hsm-bar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100002; pointer-events: none; }
.hsm-toast, .hsm-card { border-top: 4px solid transparent; }

@media (prefers-reduced-motion: reduce) {
    .hsm-toast, .hsm-card, .hsm-toast.is-leaving, .hsm-card.is-leaving, .hsm-plus { animation: none; transform: translateX(-50%); }
    .hsm-bounce { animation: none; }
}