/** Shopify CDN: Minification failed

Line 161:0 Unexpected "("

**/
.cart-notification-wrapper {
  position: relative;
}

.cart-notification-wrapper .cart-notification {
  display: block;
}

.cart-notification {
  border-bottom-right-radius: var(--popup-corner-radius);
  border-bottom-left-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: 0 0 var(--popup-border-width);
  padding: 2.5rem 3.5rem;
  position: absolute;
  right: 0;

  /* Animation: starts from add-to-cart button */
  transform: translate(0, 100px) scale(0.3);
  transform-origin: bottom left;
  visibility: hidden;
  width: 75%;
  backdrop-filter: blur(20px);
  background: rgba(var(--color-background), 0.75);
  box-shadow:
    0 1rem 2rem rgba(0, 0, 0, 0.1),
    var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
  opacity: 0;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease,
    visibility 0s 0.6s;
}

.cart-notification.active {
  /* Flies toward top-right smoothly */
  transform: translate(0, 0) scale(1);
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease,
    visibility 0s;
}

.cart-notification.focused,
.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));
}

@media screen and (min-width: 750px) {
  .header-wrapper:not(.header-wrapper--border-bottom) + cart-notification .cart-notification {
    border-top-width: var(--popup-border-width);
  }

  .cart-notification {
    border-width: 0 var(--popup-border-width) var(--popup-border-width);
    max-width: 36.8rem;
    right: 2.2rem;
  }
}

@media screen and (min-width: 990px) {
  .cart-notification-wrapper:is(.page-width) > .cart-notification {
    right: 4rem;
  }
}

.cart-notification__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cart-notification__heading {
  display: flex;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  opacity: 0;
  animation: fade-in-heading 0.5s ease 0.3s forwards;
}

.cart-notification__heading .icon-checkmark {
  color: rgb(var(--color-foreground));
  margin-right: 1rem;
  width: 1.3rem;
}

.cart-notification__close {
  background: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0.5rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.cart-notification__close:hover {
  transform: scale(1.1);
}

.cart-notification__links {
  text-align: center;
}

.cart-notification__links > * {
  margin-top: 1rem;
}

.cart-notification-product {
  display: flex;
  align-items: flex-start;
  padding: 2rem 0 3rem;
  opacity: 0;
  animation: fade-in-product 0.6s ease 0.4s forwards;
}

.cart-notification-product__image {
  display: inline-flex;
  margin-right: 1.5rem;
  margin-top: 0.5rem;
}

.cart-notification-product__image:after {
  content: none;
}

.cart-notification-product__name {
  margin: 0 0 0.5rem;
}

@keyframes fade-in-heading {
  to {
    opacity: 1;
  }
}

@keyframes fade-in-product {
  to {
    opacity: 1;
  }
}



Add This JS For Auto-Dismiss
(Place in your theme.js or inside <script> tag)


document.addEventListener('DOMContentLoaded', function () {
  const cartNotification = document.querySelector('.cart-notification');

  if (cartNotification) {
    const observer = new MutationObserver(() => {
      if (cartNotification.classList.contains('active')) {
        setTimeout(() => {
          cartNotification.classList.remove('active');
        }, 5000);
      }
    });

    observer.observe(cartNotification, { attributes: true, attributeFilter: ['class'] });
  }
});