/* Header badges: appear just after the header has rendered. */
@keyframes shoply-header-badge-appear {
    from {
        opacity: 0;
        transform: scale(.75);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.header-top .header-favourites__count,
.header-top .header-checkout__count {
    width: 20px;
    height: 20px;
    min-width: 20px;
    padding: 0 2px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: scale(.75);
    animation: shoply-header-badge-appear .25s ease-out 1s both;
}

.header-top .header-favourites__count {
    background-color: #ff4577;
}

.header-top .header-checkout__count {
    background-color: #76b82a;
}

@media (prefers-reduced-motion: reduce) {
    .header-top .header-favourites__count,
    .header-top .header-checkout__count {
        animation: none;
        opacity: 1;
        transform: none;
    }
}