/* Price tier selector: scoped to the tier list so the original storefront design stays intact. */
.classic-pricing {
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #E9D5FF;
  border-radius: 18px;
  background: #FCFAFF;
}

.classic-pricing[hidden],
.row-qty[hidden] {
  display: none !important;
}

.pricing-heading {
  margin: 0 0 8px;
  color: #64748B;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tier-list {
  display: grid;
  gap: 5px;
}

.price-tier {
  display: flex !important;
  width: 100%;
  min-height: 35px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 11px;
  border: 1px solid #EDE0FB;
  border-radius: 10px;
  background: #fff;
  color: #0F172A;
  text-align: left;
  transition: border-color .2s, background .2s, box-shadow .2s;
}

.price-tier:hover,
.price-tier.active {
  border-color: #C4B5FD;
  background: #F8F5FF;
}

.price-tier.active {
  box-shadow: inset 3px 0 #7C3AED;
}

.price-tier:focus-visible {
  outline: 3px solid #DDD6FE;
  outline-offset: 2px;
}

.price-tier b {
  flex: 1 1 auto;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .015em;
}

.price-tier span {
  flex: 0 0 auto;
  color: #6D28D9;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.price-tier small {
  color: #64748B;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .classic-pricing {
    margin-top: 12px;
    padding: 10px;
  }

  .tier-list { gap: 4px; }
  .price-tier { min-height: 33px; padding: 5px 9px; }
}