.rockit-volume-discount {
    line-height: 1.4;
}

.rockit-volume-discount__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.rockit-volume-discount .rockit-volume-discount__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  text-align: center;
  color: var(--title-color);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  font-style: var(--title-font-style);
}

.rockit-volume-discount .rockit-volume-discount__title::before,
.rockit-volume-discount .rockit-volume-discount__title::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background-color: var(--tier-border-color);
}

.rockit-volume-discount .rockit-volume-discount__tiers {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
}

.rockit-volume-discount .rockit-volume-discount__tier {
  display: flex;
  flex: 1;
  position: relative;
  margin: calc(5px * (var(--tiers-spacing, 10) / 10)) 0;
}

.rockit-volume-discount .rockit-volume-discount__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rockit-volume-discount .rockit-volume-discount__card {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--tier-border-radius);
  background-color: var(--tier-bg-color);
  box-shadow: inset 0 0 0 var(--tier-border-width) var(--tier-border-color);
  box-sizing: border-box;
  cursor: pointer;
}

.rockit-volume-discount .rockit-volume-discount__tier--selected .rockit-volume-discount__card {
  cursor: default;
  background-color: var(--tier-selected-bg-color);
  box-shadow: inset 0 0 0 calc(var(--tier-border-width) + 1px) var(--tier-border-color-selected);
}


.rockit-volume-discount .rockit-volume-discount__badge {
  position: absolute;
  top: -8px;
  right: var(--tier-border-radius);
  z-index: 1;
}

.rockit-volume-discount .rockit-volume-discount__badge-text {
  margin: 0 8px;
  padding: 6px 8px;
  border-bottom-left-radius: var(--tier-border-radius);
  border-bottom-right-radius: var(--tier-border-radius);
  line-height: 1;
  color: var(--tier-badge-color);
  font-size: var(--tier-badge-font-size);
  font-weight: var(--tier-badge-font-weight);
  font-style: var(--tier-badge-font-style);
  background-color: var(--tier-badge-bg-color);
}

.rockit-volume-discount .rockit-volume-discount__badge-text::before,
.rockit-volume-discount .rockit-volume-discount__badge-text::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-bottom: 8px solid var(--tier-badge-bg-color);
  filter: brightness(0.7);
}

.rockit-volume-discount .rockit-volume-discount__badge-text::before {
  left: 0;
  border-left: 8px solid transparent;
}

.rockit-volume-discount .rockit-volume-discount__badge-text::after {
  right: 0;
  border-right: 8px solid transparent;
}

.rockit-volume-discount .rockit-volume-discount__body {
  padding:
    calc(10px * (var(--tiers-spacing, 1) / 10))
    calc(15px * (var(--tiers-spacing, 10) / 10) + 5px);
}

.rockit-volume-discount .rockit-volume-discount__summary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 55px;
}

.rockit-volume-discount .rockit-volume-discount__tier--has-badge .rockit-volume-discount__summary {
  margin-top: calc((12px + var(--tier-badge-font-size) - 18px) + 1px);
  margin-bottom: 7px;
}

.rockit-volume-discount .rockit-volume-discount__selector {
  display: flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--tier-border-color);
}

.rockit-volume-discount .rockit-volume-discount__tier--selected .rockit-volume-discount__selector {
  background: var(--tier-border-color-selected);
  box-shadow: 0 0 0 2px var(--tier-border-color-selected);
}

.rockit-volume-discount .rockit-volume-discount__main {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rockit-volume-discount .rockit-volume-discount__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
}

.rockit-volume-discount .rockit-volume-discount__tier-title {
  display: inline-block;
  overflow-wrap: break-word;
  color: var(--tier-title-color);
  font-size: var(--tier-title-font-size);
  font-weight: var(--tier-title-font-weight);
  font-style: var(--tier-title-font-style);
}

.rockit-volume-discount .rockit-volume-discount__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 8px;
  vertical-align: top;
  overflow-wrap: break-word;
  border-radius: var(--tier-border-radius);
  background-color: var(--tier-label-bg-color);
  color: var(--tier-label-color);
  font-size: var(--tier-label-font-size);
  font-weight: var(--tier-label-font-weight);
  font-style: var(--tier-label-font-style);
}

.rockit-volume-discount .rockit-volume-discount__subtitle {
  overflow-wrap: break-word;
  color: var(--tier-subtitle-color);
  font-size: var(--tier-subtitle-font-size);
  font-weight: var(--tier-subtitle-font-weight);
  font-style: var(--tier-subtitle-font-style);
}

.rockit-volume-discount .rockit-volume-discount__pricing {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.rockit-volume-discount .rockit-volume-discount__price {
  color: var(--price-color);
  font-size: var(--price-font-size);
  font-weight: var(--price-font-weight);
  font-style: var(--price-font-style);
}

.rockit-volume-discount .rockit-volume-discount__unit-label {
  color: var(--tier-unit-label-color);
  font-size: var(--tier-unit-label-font-size);
  font-weight: var(--tier-unit-label-font-weight);
  font-style: var(--tier-unit-label-font-style);
}

.rockit-volume-discount .rockit-volume-discount__compare {
  text-decoration: line-through;
  color: var(--compare-color);
  font-size: var(--compare-font-size);
  font-weight: var(--compare-font-weight);
  font-style: var(--compare-font-style);
}

.rockit-volume-discount .rockit-volume-discount__items {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 10px;
  max-width: 100%;
}

.rockit-volume-discount .rockit-volume-discount__item {
  flex: 1;
  max-width: 100%;
  margin-top: 5px;
}

.rockit-volume-discount .rockit-volume-discount__item-content {
  display: flex;
  align-items: center;
}

.rockit-volume-discount .rockit-volume-discount__item-index {
  display: inline-flex;
  min-width: 20px;
  margin-right: 2px;
  color: var(--tier-title-color);
  font-size: 12px;
}

.rockit-volume-discount .rockit-volume-discount__item-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin-right: 2px;
  margin-bottom: 2px;
}

.rockit-volume-discount .rockit-volume-discount__select-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.rockit-volume-discount .rockit-volume-discount__select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 5px;
  height: 5px;
  transform: translateY(-65%) rotate(45deg);
  border-right: 1px solid var(--tier-title-color);
  border-bottom: 1px solid var(--tier-title-color);
  pointer-events: none;
}

.rockit-volume-discount .rockit-volume-discount__select {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 7px 30px 7px 10px;
  box-sizing: border-box;
  border: none;
  border-radius: var(--tier-border-radius);
  box-shadow: inset 0 0 0 1px var(--tier-border-color);
  appearance: none;
  background-color: transparent;
  color: var(--tier-title-color);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
}