.cart-notification-wrapper, .cart-popup-wrapper {
  position: relative;
}

.cart-notification, .cart-popup {
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  visibility: hidden;
  z-index: -1;

  @media screen and (max-width: 767px) {
    inset: 0;
  }
}

.cart-notification.focused {
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
      rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.cart-notification:focus-visible {
  box-shadow: 0 0 0.2rem 0 rgba(var(--color-foreground), 0.3),
    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
      rgba(var(--color-shadow), var(--popup-shadow-opacity));
}

.cart-notification.active, .cart-popup.active {
  transform: translateY(0);
  visibility: visible;
  display: block;
}