.product-detail__coming-soon {
  display: grid;
  gap: 12px;
}

.product-detail__coming-soon-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--color-text), 0.6);
}

.product-detail__coming-soon-release {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.product-detail__coming-soon-release time {
  font-weight: 600;
}

.product-detail__coming-soon-main > summary {
  list-style: none;
  cursor: default;
}

.product-detail__coming-soon-main > summary::-webkit-details-marker {
  display: none;
}

.product-detail__coming-soon-notify {
  display: grid;
  gap: 10px;
}

.product-detail__coming-soon-notify p {
  margin: 0;
  color: rgba(var(--color-text), 0.82);
}

.product-detail__coming-soon-button {
  cursor: pointer;
  width: 100%;
}

.product-detail__coming-soon-dialog {
  /* The modal layer sets inset/margin to centre the panel, but the global reset's margin: 0
     wins over layered styles, so the centring is repeated here. */
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(calc(100vw - var(--page-padding) * 2), 440px);
  max-height: calc(100vh - 80px);
  overflow: auto;
}

.product-detail__coming-soon-content {
  display: grid;
  gap: 16px;
  padding: 32px 24px 24px;
}

.product-detail__coming-soon-heading {
  margin: 0 40px 0 0;
}

.product-detail__coming-soon-copy,
.product-detail__coming-soon-privacy {
  color: rgba(var(--color-text), 0.7);
}

@media (max-width: 749px) {
  .product-detail__coming-soon-content {
    padding: 28px 18px 20px;
  }
}