.bubble-menu-items {
  --pill-height: clamp(110px, 18vw, 160px);
  --pill-width: clamp(200px, 22vw, 260px);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 98;
}

.bubble-menu-items.embedded {
  position: relative;
  inset: auto;
  padding: 0;
  transform: scale(0.8);
  transform-origin: left center;
  justify-content: flex-start;
}

.bubble-menu-items .pill-list {
  --pill-gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pill-gap);
  width: 100%;
  max-width: calc((var(--pill-width) * 3) + (var(--pill-gap) * 2));
  margin-left: auto;
  margin-right: auto;
  pointer-events: auto;
  justify-content: start;
}

.bubble-menu-items.embedded .pill-list {
  margin-left: 0;
  margin-right: 0;
}

.bubble-menu-items .pill-list .pill-col {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.bubble-menu-items .pill-link {
  --pill-bg: #ffffff;
  --pill-color: #111;
  --item-rot: 0deg;
  --hover-bg: #f3f4f6;
  --hover-color: #111;
  width: var(--pill-width);
  min-height: 0;
  height: var(--pill-height);
  padding: 0;
  line-height: 0;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-color);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font: inherit;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition:
    background 0.3s ease,
    color 0.3s ease;
  will-change: transform;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.bubble-menu-items .pill-link.pill-link--circle {
  aspect-ratio: 1 / 1;
  width: var(--pill-height);
  height: var(--pill-height);
  min-height: 0;
  padding: 0;
  border-radius: 50%;
}

@media (min-width: 900px) {
  .bubble-menu-items .pill-link {
    transform: rotate(var(--item-rot));
  }

  .bubble-menu-items .pill-link:hover {
    transform: rotate(var(--item-rot)) scale(1.06);
    background: var(--hover-bg);
    color: var(--hover-color);
  }

  .bubble-menu-items .pill-link:active {
    transform: rotate(var(--item-rot)) scale(0.94);
  }
}

.bubble-menu-items .pill-link .pill-label {
  display: inline-block;
  will-change: transform, opacity;
  height: 1.2em;
  line-height: 1.2;
  margin: 0;
}

@media (max-width: 899px) {
  .bubble-menu-items {
    --pill-height: clamp(80px, 22vw, 120px);
    --pill-width: clamp(180px, 42vw, 260px);
  }
  .bubble-menu-items {
    align-items: flex-start;
    padding-top: 120px;
  }

  .bubble-menu-items .pill-list {
    max-width: calc((var(--pill-width) * 2) + var(--pill-gap));
  }

  .bubble-menu-items .pill-list .pill-col {
    margin-left: 0 !important;
    overflow: visible;
  }

  .bubble-menu-items .pill-link {
    height: var(--pill-height);
    padding: 0;
    min-height: 0;
  }

  .bubble-menu-items .pill-link:hover {
    transform: scale(1.06);
    background: var(--hover-bg);
    color: var(--hover-color);
  }

  .bubble-menu-items .pill-link:active {
    transform: scale(0.94);
  }
}

@media (max-width: 680px) {
  body.about-page.nav-locked .bubble-menu-items {
    z-index: 0;
  }
}

@media (max-width: 407px) {
  .bubble-menu-items {
    --pill-width: calc((100% - var(--pill-gap)) / 2);
  }

  .bubble-menu-items .pill-list {
    max-width: 100%;
  }

  .bubble-menu-items .pill-list .pill-col {
    flex: 0 0 calc((100% - var(--pill-gap)) / 2);
  }

  .bubble-menu-items .pill-link {
    width: 100%;
  }

  .bubble-menu-items .pill-link.pill-link--circle {
    width: var(--pill-height);
    margin-right: 0;
  }

  .bubble-menu-items .pill-list .pill-col--bagel,
  .bubble-menu-items .pill-list .pill-col--heart {
    flex: 0 0 var(--pill-height);
  }

  .bubble-menu-items .pill-col--bagel {
    order: 1;
  }

  .bubble-menu-items .pill-col--plan {
    order: 2;
  }

  .bubble-menu-items .pill-col--design {
    order: 3;
  }

  .bubble-menu-items .pill-col--make {
    order: 4;
  }

  .bubble-menu-items .pill-col--heart {
    order: 5;
  }

  .bubble-menu-items .pill-col--operate {
    order: 6;
  }
}

@media (max-width: 1199px) and (min-width: 900px) {
  .bubble-menu-items {
    --pill-height: clamp(85px, 13.5vw, 122px);
    --pill-width: clamp(170px, 19vw, 221px);
  }
}