/* Photo placeholder: a slot only the business's own photo could fill, shown as intentional, not broken.
   Restyle through the tokens only (kit/README.md, "Photo placeholder"). */
.photo-placeholder {
  --ph-bg: #ece7df;
  --ph-fg: #4f463d;
  --ph-font: inherit;
  --ph-radius: 12px;
  --ph-ratio: 4 / 3;
  aspect-ratio: var(--ph-ratio);
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--ph-radius);
  background: repeating-linear-gradient(135deg, var(--ph-bg) 0 14px,
              color-mix(in srgb, var(--ph-bg) 90%, var(--ph-fg)) 14px 28px);
  color: var(--ph-fg);
  font-family: var(--ph-font);
  text-align: center;
}

.photo-placeholder figcaption {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: 24ch;
  font-size: 15px;
  line-height: 1.35;
}

.photo-placeholder figcaption::before {
  content: "";
  width: 32px;
  height: 32px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 7.2 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3.2L15 4H9Zm3 4.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4 7.2 6H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-3.2L15 4H9Zm3 4.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9Zm0 2a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}