.photo-switch {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex-direction: row !important;
  width: auto !important;
  border-radius: 24px !important;
  padding: 4px !important;
  gap: 4px !important;
}

.photo-switch button {
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 20px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.photo-switch svg {
  display: none;
}

.preview-stage {
  flex-direction: column;
  gap: 18px;
}

.demo-rsvp-note {
  padding: 24px;
  text-align: center;
}

.demo-laras .photo-switch {
  display: flex;
  justify-content: center;
  background: #faf6ef;
  color: #313d35;
  z-index: 30;
}

.demo-laras .photo-switch button {
  border: 0;
  background: transparent;
}

.demo-laras .photo-switch [aria-pressed='true'] {
  background: #697c6b;
  color: white;
}

body.demo-no-photo img[src*='/gallery/'],
body.demo-no-photo img[src*='/portraits/'],
body.demo-no-photo img[src$='/cover.webp'] {
  visibility: hidden;
}

body.demo-no-photo::before {
  background: #e7e2d8;
}

@media (min-width: 1100px) {
  .photo-switch {
    display: none !important;
  }

  body .preview-stage {
    gap: 0;
  }
}

body.demo-no-photo :is(
  .desktop-photo,
  .cover-photo,
  .hero-slides,
  .person-photo,
  .photo-interlude,
  .gallery,
  .closing-photo,
  a[href='#gallery']
),
.invitation.no-photo .gallery {
  display: none;
}

body.demo-no-photo .hero,
.invitation.no-photo .splash {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  min-height: var(--screen-height, var(--phone-height));
  padding-block: 100px;
}

body.demo-no-photo .hero-copy {
  margin-top: 0;
}

body.demo-no-photo .countdown {
  width: 100%;
  margin: 0 auto;
}

body.demo-no-photo .bottom-nav {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.invitation.no-photo .couple {
  min-height: 0;
}

.invitation.no-photo .groom {
  margin-top: 48px;
}

.invitation.no-photo .cover-content > .eyebrow {
  margin-bottom: 24px;
}