/* One continuous paper surface across the invitation's content sections. */
.invitation-details[data-background-style="paper"] {
  --wi-paper: var(--page-paper-color, #f7f4ed);
  background: var(--wi-paper);
}

.invitation-details[data-background-style="paper"]::before {
  background-image: url('assets/page-paper-grain.svg');
  background-size: 180px 180px;
  opacity: var(--page-paper-grain, .18);
  mix-blend-mode: soft-light;
}

.invitation-details[data-background-style="paper"] .wedding-nav {
  background: var(--wi-paper);
}

.invitation-details[data-background-style="paper"] .wi-day,
.invitation-details[data-background-style="paper"] .wi-visit {
  background: transparent;
}

#page-background-settings .ds-background-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

#design-panel #page-background-settings .ds-background-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
}

.ds-background-swatch::before {
  content: '';
  width: 15px;
  height: 15px;
  border: 1px solid #0002;
  border-radius: 50%;
  background: var(--swatch);
}

#design-panel .ds-background-swatch[aria-pressed="true"] {
  border-color: #597e9b;
  box-shadow: 0 0 0 1px #597e9b;
}

#page-background-settings fieldset {
  padding: 0;
  margin: 0;
  border: 0;
  min-width: 0;
}

#page-background-settings fieldset:disabled {
  opacity: .45;
}

#design-panel #page-background-settings .ds-color-control {
  grid-template-columns: 44px minmax(0, 1fr);
}

#design-panel #page-background-settings .ds-color-control .ds-hex {
  grid-column: 2;
  grid-row: 2;
}

#page-background-settings .ds-background-reset {
  margin-bottom: 14px;
}