.layout-floating-cart {
  --size-fallback: 48px;
  --size-normal: max(5.68vh, 36px);
  --size: var(--size-normal, --size-fallback);
  --size-with-progress: calc(var(--size) + 7px);
  --horizontal-offset: 16px;
  --horizontal-offset-with-progress: calc(var(--horizontal-offset) - 7px / 2);
  position: fixed;
  z-index: 1001;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.1s ease;
  bottom: var(--vertical-offset);
  transform: translateY(var(--vertical-offset));
}

.layout-floating-cart__free-shipping-progress {
  --radius: 48;
  --progress: 0;
  --circumference: calc(2 * 3.14159 * var(--radius));

  width: var(--size-with-progress);
  height: var(--size-with-progress);
  position: relative;
}

.layout-floating-cart__free-shipping-progress > svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.layout-floating-cart__free-shipping-progress .track {
  fill: none;
  stroke: #d9d9d9;
  stroke-width: 3;
}

.layout-floating-cart__free-shipping-progress .bar {
  fill: none;
  stroke: var(--color-primary-button-background);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--circumference);
  stroke-dashoffset: calc(var(--circumference) * (1 - var(--progress) / 100));
  transition: stroke-dashoffset 0.6s ease;
}

.layout-floating-cart__free-shipping--done {
  display: flex;
  color: var(--color-primary-button-text);
  background: var(--color-primary-button-background);
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.layout-floating-cart__free-shipping--rest {
  min-width: 270%;
  color: var(--color-primary-button-text);
  background: var(--color-primary-button-background);
  border-radius: calc(var(--size-with-progress) / 2);
}

.layout-floating-cart__free-shipping-progress--shim {
  width: var(--size-with-progress);
}

.floating-cart:hover {
  background: var(--color-variant-hover-background);
}

.floating-cart__badge {
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: var(--color-primary-button-text);
  background: var(--color-primary-button-background);
  border-radius: 50%;
  position: absolute;
  top: 0px;
  inset-inline-start: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-cart__badge--triple {
  width: 29px;
  inset-inline-start: 50%;
}

.floating-cart__icon {
  color: var(--color-variant-icon);
}

.floating-cart {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--color-variant-background);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (min-width: 960px) {
  .layout-floating-cart {
    --size-normal: max(5.33vh, 36px);
    --horizontal-offset: calc(5.33vh * 1.04);
  }
}

.layout-floating-cart--right {
  inset-inline-end: var(--horizontal-offset-with-progress);
}

.layout-floating-cart--left {
  inset-inline-start: var(--horizontal-offset-with-progress);
}
.layout-floating-cart--right .layout-floating-cart__free-shipping--rest-text {
  text-align: end;
  padding-inline: calc(var(--size-with-progress) / 4.5) calc(var(--size-with-progress) / 6.9);
}
.layout-floating-cart--left .layout-floating-cart__free-shipping--rest-text {
  text-align: start;
  padding-inline: calc(var(--size-with-progress) / 6.9) calc(var(--size-with-progress) / 4.5);
}