.cart-progress-wrapper {
  display: block;
  width: 100%;
}

.cart-progress-wrapper--drawer {
  flex: none;
}

.cart-progress-wrapper--drawer.is-visible {
  margin-top: 20px;
}

.cart-progress-wrapper--page {
  max-width: 562px;
}

.cart-progress-wrapper--page.is-visible {
  margin-bottom: 30px;
}

.cart-progress[hidden] {
  display: none;
}

.cart-progress {
  --cart-progress-accent: #bf192e;
  --cart-progress-text: #1d1f22;
  --cart-progress-muted: #6a6d73;
  --cart-progress-track: #d8dadd;
  --cart-progress-background: #fafaf9;
  --cart-progress-reached-text: #fff;
  --cart-progress-inset-start: 15px;
  --cart-progress-inset-end: 17px;
  --cart-progress-goal-width: 90px;
  display: block;
  position: relative;
  width: 100%;
  min-height: 124px;
  background: var(--cart-progress-background);
  border-radius: 10px;
  color: var(--cart-progress-text);
  font-family: Figtree, var(--font-body-family), sans-serif;
  letter-spacing: 0;
}

.cart-progress__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding-top: 15px;
}

.cart-progress__status {
  min-width: 0;
  padding-inline: var(--cart-progress-inset-start) var(--cart-progress-inset-end);
  text-align: start;
}

.cart-progress__status-line {
  overflow-wrap: anywhere;
  margin: 0;
  letter-spacing: 0;
}

.cart-progress__status-line--unlocked {
  color: var(--cart-progress-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
}

.cart-progress__status-line--message {
  margin-top: 12px;
  color: var(--cart-progress-text);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px;
}

.cart-progress__status-line--message:only-child,
.cart-progress__status-line--unlocked[hidden] + .cart-progress__status-line--message {
  margin-top: 0;
}

.cart-progress__meter {
  position: relative;
  flex: none;
  width: 100%;
  height: 54px;
}

.cart-progress__track {
  position: absolute;
  top: 10px;
  left: var(--cart-progress-inset-start);
  right: var(--cart-progress-track-end, calc(var(--cart-progress-inset-end) + (var(--cart-progress-goal-width) - 54px) / 2));
  height: 5.12px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--cart-progress-track);
}

.cart-progress__fill {
  display: block;
  width: var(--cart-progress-fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--cart-progress-accent);
}

.cart-progress__stages {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-progress__stage {
  position: absolute;
  top: 0;
  left: var(--cart-progress-position);
  width: 0;
  height: 100%;
}

.cart-progress__node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cart-progress-layout-node-width, 54px);
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--cart-progress-muted);
  border-radius: 44px;
  background: var(--cart-progress-background);
  color: var(--cart-progress-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
  box-sizing: border-box;
}

.cart-progress__stage.is-reached .cart-progress__node {
  border-color: var(--cart-progress-accent);
  background: var(--cart-progress-accent);
  color: var(--cart-progress-reached-text);
}

.cart-progress__node.is-compact {
  font-size: 10px;
}

.cart-progress__goal {
  display: -webkit-box;
  width: var(--cart-progress-layout-goal-width, var(--cart-progress-goal-width));
  max-height: 30px;
  margin-top: 5px;
  overflow: hidden;
  color: var(--cart-progress-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
  text-align: center;
  overflow-wrap: anywhere;
  transform: translateX(-50%);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cart-progress__stage.is-reached .cart-progress__goal {
  color: var(--cart-progress-text);
}

.cart-progress__stage.is-celebrating .cart-progress__node {
  animation: cart-progress-node-unlocked 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cart-progress-node-unlocked {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: translateX(-50%) scale(1);
  }
  45% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--cart-progress-accent) 16%, transparent);
    transform: translateX(-50%) scale(1.1);
  }
}

@media (min-width: 960px) {
  .cart-progress-wrapper--drawer {
    width: calc(100% + 10px);
    margin-left: -5px;
  }
}

@media (max-width: 959px) {
  .cart-progress {
    --cart-progress-inset-start: 4.6%;
    --cart-progress-inset-end: 4.6%;
    --cart-progress-goal-width: 94px;
    min-height: 121px;
  }

  .cart-progress__content {
    padding-top: 12px;
  }

  .cart-progress__goal {
    margin-top: 7px;
    font-size: 12px;
    line-height: 14px;
  }
}

@media (max-width: 479px) {
  .cart-progress {
    --cart-progress-goal-width: 68px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-progress__stage.is-celebrating .cart-progress__node {
    animation: none;
  }
}