.product-not-found {
  display: grid;
  min-height: 82svh;
  place-items: center;
  align-content: center;
  padding-top: clamp(11rem, 18vw, 15rem);
  padding-bottom: clamp(6rem, 10vw, 10rem);
  text-align: center;
}

.product-not-found__cube {
  position: relative;
  width: 5rem;
  aspect-ratio: 1;
  margin-bottom: 3rem;
  border: 1px solid #9c7230;
  transform: rotate(45deg);
}

.product-not-found__cube span {
  position: absolute;
  inset: 18%;
  border: 1px solid rgb(7 58 55 / 56%);
}

.product-not-found__cube span:nth-child(2) {
  inset: 34%;
  border-color: rgb(156 114 48 / 62%);
}

.product-not-found__cube span:nth-child(3) {
  inset: -28%;
  border-color: rgb(8 11 11 / 8%);
  border-radius: 50%;
}

.product-not-found .eyebrow {
  color: #765721;
}

.product-not-found h1 {
  max-width: 12ch;
  margin-top: 0.9rem;
  color: #0a1110;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.9;
}

.product-not-found > p:not(.eyebrow) {
  max-width: 38rem;
  margin-top: 1.5rem;
  color: rgb(8 11 11 / 62%);
  font-size: var(--text-lead);
}

.product-not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.3rem;
}

.product-not-found__actions .button--secondary {
  color: #0a1110;
  border-color: rgb(8 11 11 / 28%);
}

.product-not-found.is-motion-ready > * {
  opacity: 0;
  transform: translateY(2rem);
}

.product-not-found.is-product-detail-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 780ms var(--ease-luxury),
    transform 950ms var(--ease-luxury);
}

.product-not-found.is-product-detail-visible h1 {
  transition-delay: 80ms;
}

.product-not-found.is-product-detail-visible > p,
.product-not-found.is-product-detail-visible
  .product-not-found__actions {
  transition-delay: 150ms;
}

@media (max-width: 599px) {
  .product-not-found {
    min-height: 86svh;
    padding-top: calc(9rem + var(--safe-top));
  }

  .product-not-found__actions {
    display: grid;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-not-found > *,
  .product-not-found.is-motion-ready > * {
    opacity: 1;
    transform: none;
  }
}