.estage-selector {
  margin-top: .68rem;
}
.estage-selector__heading {
  display: none;
}
.estage-selector__grid {
  display: flex;
  gap: .58rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  padding: .12rem .05rem .55rem;
  scrollbar-width: thin;
}
.estage-selector__item {
  position: relative;
  flex: 0 0 8.9rem;
  min-height: 5.65rem;
  display: grid;
  align-content: end;
  gap: .32rem;
  text-align: left;
  border-radius: 1.1rem;
  border: 1px solid rgba(18,17,15,.12);
  background: #fffdf4;
  color: #12110F;
  padding: .78rem;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 8px 20px rgba(18,17,15,.05);
  touch-action: manipulation;
}
.estage-selector__item span {
  display: block;
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.02em;
}
.estage-selector__item small {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: .24rem .46rem;
  background: rgba(31,90,59,.10);
  color: rgba(18,17,15,.72);
  font-size: .74rem;
  font-weight: 850;
}
.estage-selector__item[aria-pressed="true"] {
  flex-basis: min(14.2rem, 72vw);
  min-height: 6.9rem;
  border-color: #005EFF;
  background:
    radial-gradient(circle at 78% 18%, rgba(0,94,255,.20), transparent 3.9rem),
    linear-gradient(145deg, #fffdf4, #f6faff);
  box-shadow: 0 0 0 3px rgba(0,94,255,.16), 0 14px 34px rgba(18,17,15,.10);
}
.estage-selector__item[aria-pressed="true"]::before {
  content: 'Now viewing';
  position: absolute;
  top: .55rem;
  left: .62rem;
  display: inline-flex;
  border-radius: 999px;
  padding: .22rem .46rem;
  background: #005EFF;
  color: #fffdf4;
  font-size: .68rem;
  font-weight: 900;
}
.estage-selector__item.is-coming-soon {
  flex-basis: 8rem;
  opacity: .58;
  background: rgba(255,253,244,.84);
}
.estage-selector__item.is-coming-soon span {
  color: rgba(18,17,15,.64);
}
.estage-selector__item.is-coming-soon small {
  background: rgba(18,17,15,.07);
  color: rgba(18,17,15,.56);
}
.estage-selector__item:focus-visible,
.estage-selector__item:hover {
  outline: 3px solid rgba(0,94,255,.30);
  outline-offset: 2px;
}
@media (min-width: 760px) {
  .estage-selector__item { flex-basis: 10rem; }
  .estage-selector__item[aria-pressed="true"] { flex-basis: 15rem; }
  .estage-selector__item.is-coming-soon { flex-basis: 9rem; }
}
