.milestone-progress{padding:0 24px;background:#fff;margin-bottom:16px}.milestone-text{text-align:center;margin-bottom:24px}.milestone-away{margin:0 0 4px;font-size:12px;line-height:1.4;font-weight:500;color:#333}.milestone-away .amount,.milestone-away .discount{color:#ff3478;font-weight:600}.milestone-unlocked{margin:0;font-size:12px;line-height:1.4;font-weight:500;color:#333}.milestone-unlocked .discount{color:#ff3478;font-weight:600}.milestone-bar{position:relative;padding:0;margin:0 0 60px;height:8px}.milestone-track{position:absolute;left:0;right:0;top:0;height:8px;background:#e0e0e0;border-radius:99px;z-index:0}.milestone-progress-bar{position:absolute;left:0;top:0;height:8px;background:#ff3478!important;border-radius:99px;transition:width .6s cubic-bezier(.2,.9,.2,1);z-index:1;width:0%}.milestone-points{position:absolute;left:0;right:0;top:0;height:8px;z-index:2}.milestone-point{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}.milestone-point:nth-child(1){left:27.33%}.milestone-point:nth-child(2){left:62.67%}.milestone-point:nth-child(3){left:94%}.milestone-icon{width:29px;height:30px;border:3px solid #E0E0E0;border-radius:50%;background:#fff;transition:all .22s cubic-bezier(.2,.9,.2,1);display:flex;align-items:center;justify-content:center;position:relative;z-index:3}.milestone-icon svg{display:none;width:25px;height:25px;position:relative;z-index:4}.milestone-point.active .milestone-icon{border-color:#ff3478!important;background:#ff3478!important}.milestone-point.active .milestone-icon svg{display:block!important}.milestone-point span{font-size:11px;color:#333;font-weight:600;text-transform:uppercase;white-space:nowrap;position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%);min-width:80px;text-align:center;padding:4px 8px;border-radius:4px;background:transparent;transition:all .22s ease}.milestone-point.active .milestone-icon{width:30px;height:30px}.milestone-point .milestone-icon{width:15px;height:15px}@keyframes progressFill{0%{width:0%}to{width:var(--progress-width, 0%)}}@media (max-width: 768px){.milestone-point span{font-size:10px;min-width:70px;padding:3px 4px}.milestone-icon{width:29px;height:30px}.milestone-icon svg{width:22px;height:22px}}
/*# sourceMappingURL=/cdn/shop/t/109/assets/milestone-progress.css.map */