/* Free shipping progress bar.
   2026-06-29: pure CSS — the inline `style="width: X%"` on .cart-free-shipping-bar__fill
   is written by Liquid at render time, then CSS transitions on width animate the change.
   No MutationObserver, no JS writing to style. */
.cart-free-shipping-bar {
  padding: 0 20px 10px;
  text-align: center;
  background: rgb(var(--color-background));
  border-bottom: 1px solid rgb(var(--color-border, 230 230 230));
}

.cart-free-shipping-bar__message {
  font-size: 13px;
  line-height: 1.4;
  color: rgb(var(--color-text));
  margin-bottom: 8px;
}
.cart-free-shipping-bar__message strong,
.cart-free-shipping-bar__message b {
  font-weight: 600;
}
.cart-free-shipping-bar--achieved .cart-free-shipping-bar__message {
  color: rgb(var(--color-text));
}

.cart-free-shipping-bar__track {
  position: relative;
  height: 4px;
  background: rgb(var(--color-border, 220 220 220));
  border-radius: 2px;
  overflow: hidden;
}

.cart-free-shipping-bar__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: rgb(var(--color-text, 0 0 0));
  border-radius: 2px;
  /* 2026-07-01: stronger left-to-right fill animation.
     Was `width 0.3s linear 0.3s` — too short to be noticed.
     New: 0.9s ease-out with a 0.15s delay so the bar still
     starts AFTER the popup has finished its open transition.
     The cubic-bezier eases the tail (approaches 100%
     smoothly instead of slamming into the right edge). */
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.cart-free-shipping-bar__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  color: rgb(var(--color-light-text, 130 130 130));
}