.lunoria-family-selector {
  margin: 18px 0 20px;
}

.lunoria-family-selector__heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.lunoria-family-selector__label {
  color: #333;
  font-size: 14px;
  font-weight: 700;
}

.lunoria-family-selector__current {
  color: #777;
  font-size: 13px;
}

.lunoria-family-selector__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lunoria-family-size {
  display: inline-flex;
  min-width: 48px;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid #c9c9c9;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.lunoria-family-size:hover,
.lunoria-family-size:focus {
  border-color: #7e1f29;
  color: #7e1f29;
  text-decoration: none;
}

.lunoria-family-size.is-current {
  border-color: #7e1f29;
  background: #7e1f29;
  color: #fff;
  cursor: default;
}

.lunoria-family-size.is-unavailable:not(.is-current) {
  opacity: .55;
  text-decoration: line-through;
}

@media (max-width: 480px) {
  .lunoria-family-size {
    min-height: 42px;
    padding: 8px 12px;
  }
}