/* Storefront flash / HTMX toast stack — fixed overlay below header, no layout shift. */

.store-messages-root {
  position: fixed;
  top: var(--store-messages-sticky-top, 5rem);
  right: 0;
  left: 0;
  z-index: 38;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  pointer-events: none;
}

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

.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;
  }
}