/* Storefront flash / HTMX toast stack — fixed at viewport top (not below header). */

:root {
  /* Above theme chrome (e.g. Nova/Classic header z-999, filter overlays z-80). */
  --store-messages-z-index: 10000;
}

.store-messages-root {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--store-messages-z-index);
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  max-height: min(50vh, calc(100dvh - max(0.5rem, env(safe-area-inset-top, 0px)) - 0.5rem));
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: none;
}

.store-messages-root.is-empty {
  display: none;
  margin: 0;
  padding: 0;
  max-height: none;
  overflow: visible;
}

.store-messages-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

.store-message {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 0.75rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  padding: 1rem 3rem 1rem 1rem;
  font-size: 0.875rem;
  line-height: 1.375;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
}

.store-message__body {
  min-width: 0;
  flex: 1 1 0%;
  overflow-wrap: anywhere;
}

.store-message--enter {
  animation: store-message-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.store-message--leave {
  animation: store-message-leave 200ms ease-in forwards;
}

@keyframes store-message-enter {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes store-message-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-message--enter,
  .store-message--leave {
    animation: none;
  }
}