.store-notification-region {
  --store-notification-gap: .75rem;
  --store-notification-gutter: 1.5rem;
  --store-notification-safe-top: env(safe-area-inset-top, 0px);
  --store-notification-safe-right: env(safe-area-inset-right, 0px);
  --store-notification-safe-bottom: env(safe-area-inset-bottom, 0px);
  --store-notification-safe-left: env(safe-area-inset-left, 0px);
  position: relative;
  inline-size: min(24rem, calc(100vw - 3rem));
  margin-block: 1rem;
  margin-inline: auto 1.5rem;
  pointer-events: none;
}

.store-notification-region:has(.store-notification-list:empty) { display: none; }

.store-notification-region[data-positioned] {
  position: fixed;
  z-index: 200;
  top: var(--store-notification-top);
  left: var(--store-notification-left);
  inline-size: var(--store-notification-width);
  margin: 0;
}

.store-notification-region[data-suspended],
html.storefront-navigation-open .store-notification-region:not([data-modal-host]) {
  visibility: hidden;
  pointer-events: none;
}

.store-notification-region[data-suspended] .store-notification,
html.storefront-navigation-open .store-notification-region:not([data-modal-host]) .store-notification {
  pointer-events: none;
}

.store-notification-list {
  display: grid;
  gap: 1rem;
}

.store-notification-region[data-positioned] .store-notification__copy {
  max-block-size: max(0px, calc(var(--store-notification-card-height) - 2rem - 2px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}