.ecms-family-selector {
  --ecms-selector-red: #e31825;
  --ecms-selector-red-dark: #b70f19;
  --ecms-selector-ink: #111317;
  margin: 1.35rem 0 1.5rem;
  padding: 1.15rem;
  border: 1px solid rgba(17, 19, 23, .11);
  border-radius: 18px;
  background: #fff;
}

.ecms-family-selector *,
.ecms-family-selector *::before,
.ecms-family-selector *::after {
  box-sizing: border-box;
}

.ecms-family-selector__heading {
  margin-bottom: 1rem;
}

.ecms-family-selector__eyebrow {
  margin: 0 0 .2rem;
  color: var(--ecms-selector-red);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ecms-family-selector__heading h2 {
  margin: 0;
  color: var(--ecms-selector-ink);
  font-size: 1.2rem;
  line-height: 1.2;
}

.ecms-family-selector__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ecms-family-selector__group + .ecms-family-selector__group {
  margin-top: 1rem;
}

.ecms-family-selector__group legend {
  margin: 0 0 .55rem;
  padding: 0;
  color: #303640;
  font-size: .82rem;
  font-weight: 850;
}

.ecms-family-selector__pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ecms-family-selector__pill {
  min-width: 58px;
  min-height: 40px;
  margin: 0;
  padding: .52rem .78rem;
  border: 1.5px solid var(--ecms-selector-red);
  border-radius: 999px;
  background: #fff;
  color: var(--ecms-selector-ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, opacity .16s ease;
}

.ecms-family-selector__pill:hover:not(:disabled),
.ecms-family-selector__pill:focus-visible:not(:disabled) {
  border-color: var(--ecms-selector-red-dark);
  background: rgba(227, 24, 37, .06);
  transform: translateY(-1px);
}

.ecms-family-selector .ecms-family-selector__pill.is-selected,
.ecms-family-selector .ecms-family-selector__pill.is-selected:hover,
.ecms-family-selector .ecms-family-selector__pill.is-selected:focus,
.ecms-family-selector .ecms-family-selector__pill.is-selected:focus-visible,
.ecms-family-selector .ecms-family-selector__pill.is-selected:active {
  border-color: var(--ecms-selector-red) !important;
  background: var(--ecms-selector-red) !important;
  color: #fff !important;
  transform: none !important;
}

.ecms-family-selector__pill:disabled,
.ecms-family-selector__pill.is-unavailable {
  border-color: #d7d9dd !important;
  background: #f3f4f6 !important;
  color: #9298a1 !important;
  cursor: not-allowed;
  opacity: .68;
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
  transform: none !important;
  box-shadow: none !important;
}

.ecms-family-selector__status {
  min-height: 1.1em;
  margin: .75rem 0 0;
  color: #656d78;
  font-size: .76rem;
  line-height: 1.35;
}

@media (max-width: 767px) {
  .ecms-family-selector {
    margin: 1rem 0 1.2rem;
    padding: 1rem;
    border-radius: 16px;
  }

  .ecms-family-selector__heading h2 {
    font-size: 1.08rem;
  }

  .ecms-family-selector__pills {
    gap: .46rem;
  }

  .ecms-family-selector__pill {
    min-width: 54px;
    min-height: 38px;
    padding: .48rem .7rem;
    font-size: .75rem;
  }
}