.cart-alert { position: fixed; top: calc(72px - 2px); right: 43px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2000; }

@media (max-width: 992px) { .cart-alert { top: calc(58px + 8px); right: 22px; } }

.cart-in-popup { position: relative; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 16px 24px; background: #fff0e5; color: #212121; border: none; border-radius: 10px; text-align: center; -webkit-box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px; opacity: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); transition: -webkit-transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27), -webkit-transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27); }

.cart-in-popup:before { content: ''; position: absolute; right: 20px; top: -10px; width: 20px; height: 12px; background-color: #fff0e5; -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%); clip-path: polygon(0 100%, 50% 0, 100% 100%); }

@media (max-width: 992px) { .cart-in-popup { padding: 8px 16px 8px 8px; font-size: 1.4rem; } }

.cart-in-popup + .cart-in-popup { margin-top: 20px; }

.cart-in-popup span { font-size: 1.6rem; font-weight: 600; }

@media (max-width: 992px) { .cart-in-popup span { font-size: 1.4rem; } }

.cart-in-popup .left-circle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; margin-right: 16px; background-color: #fff; border-radius: 50px; }

@media (max-width: 992px) { .cart-in-popup .left-circle { width: 42px; height: 42px; margin-right: 8px; } }

.cart-in-popup .cart-icon { position: absolute; left: 43px; top: 50%; height: 27px; width: 27px; margin: -13px 0 0 -5px; background: url("../images/icon-shopping-cart.svg") 0 0 no-repeat; -webkit-transform-origin: 12px 23px; transform-origin: 12px 23px; -webkit-transform: translateX(-100px) rotate(-18deg); transform: translateX(-100px) rotate(-18deg); -webkit-animation: cart 3s linear forwards 0s; animation: cart 3s linear forwards 0s; opacity: 0; }

@media (max-width: 992px) { .cart-in-popup .cart-icon { left: 19px; } }

.cart-in-popup .cart-icon:after { content: ''; position: absolute; left: 8px; bottom: 8px; width: 15px; height: 9px; background: #ff6b00; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: perspective(4px) rotateX(-6deg) scaleY(0); transform: perspective(4px) rotateX(-6deg) scaleY(0); -webkit-animation: square 0.8s ease 0.8s forwards; animation: square 0.8s ease 0.8s forwards; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; opacity: 0; }

.cart-in-popup .cart-icon svg { position: relative; display: block; left: 2px; top: -1px; width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; z-index: 1; }

.cart-in-popup .cart-icon svg polyline:last-child { stroke: #fff0e5; stroke-dasharray: 11px; stroke-dashoffset: 11px; -webkit-animation: tick 0.3s ease 1.5s forwards; animation: tick 0.3s ease 1.5s forwards; -webkit-animation-delay: 1.3s; animation-delay: 1.3s; opacity: 0; }

@-webkit-keyframes cart { 0% { opacity: 1; }
  12.5% { opacity: 0.5;
    -webkit-transform: translateX(-50px) rotate(-18deg);
            transform: translateX(-50px) rotate(-18deg); }
  25%, 45%, 55%, 75% { opacity: 1;
    -webkit-transform: none;
            transform: none; }
  48% { opacity: 1;
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  44%, 56% { opacity: 1;
    -webkit-transform-origin: 12px 23px;
            transform-origin: 12px 23px; }
  45%, 55% { opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%; }
  100%, 100% { opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@keyframes cart { 0% { opacity: 1; }
  12.5% { opacity: 0.5;
    -webkit-transform: translateX(-50px) rotate(-18deg);
            transform: translateX(-50px) rotate(-18deg); }
  25%, 45%, 55%, 75% { opacity: 1;
    -webkit-transform: none;
            transform: none; }
  48% { opacity: 1;
    -webkit-transform: scale(0.9);
            transform: scale(0.9); }
  44%, 56% { opacity: 1;
    -webkit-transform-origin: 12px 23px;
            transform-origin: 12px 23px; }
  45%, 55% { opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%; }
  100%, 100% { opacity: 1;
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-transform: translateX(0);
            transform: translateX(0); } }

@-webkit-keyframes square { 0% { height: 0;
    -webkit-transform: perspective(4px) rotateX(-6deg) scaleY(0);
            transform: perspective(4px) rotateX(-6deg) scaleY(0);
    opacity: 100%; }
  100% { height: 9px;
    -webkit-transform: perspective(4px) rotateX(-6deg) scaleY(1);
            transform: perspective(4px) rotateX(-6deg) scaleY(1);
    opacity: 100%; } }

@keyframes square { 0% { height: 0;
    -webkit-transform: perspective(4px) rotateX(-6deg) scaleY(0);
            transform: perspective(4px) rotateX(-6deg) scaleY(0);
    opacity: 100%; }
  100% { height: 9px;
    -webkit-transform: perspective(4px) rotateX(-6deg) scaleY(1);
            transform: perspective(4px) rotateX(-6deg) scaleY(1);
    opacity: 100%; } }

@-webkit-keyframes tick { 0% { stroke-dashoffset: 11px;
    opacity: 100%; }
  100% { opacity: 100%;
    stroke-dashoffset: 0; } }

@keyframes tick { 0% { stroke-dashoffset: 11px;
    opacity: 100%; }
  100% { opacity: 100%;
    stroke-dashoffset: 0; } }

.cart-alert--webview { top: 16px; }

.cart-alert--webview .cart-in-popup:before { right: 84px; }