.pxp-personalizer,
.pxp-personalizer * { box-sizing: border-box; }
.pxp-personalizer {
  --pxp-ink: #111d35;
  --pxp-paper: #fffaf0;
  --pxp-muted: #667087;
  --pxp-line: rgba(17, 29, 53, .16);
  --pxp-gold: #f6b940;
  clear: both;
  width: 100%;
  margin: 2rem 0 2.5rem;
  color: var(--pxp-ink);
  font-family: inherit;
  container-name: pxp-studio;
  container-type: inline-size;
}
.pxp-personalizer__header { max-width: 48rem; margin: 0 0 1.5rem; }
.pxp-personalizer__header h2 { margin: .15rem 0 .5rem; color: var(--pxp-ink); font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.02; letter-spacing: -.045em; }
.pxp-personalizer__header > p:last-child { max-width: 42rem; margin: 0; color: var(--pxp-muted); line-height: 1.65; }
.pxp-eyebrow { margin: 0; color: #a66500; font-size: .72rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.pxp-personalizer__layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(18rem, .88fr); gap: clamp(1.3rem, 4vw, 3.5rem); align-items: start; }
.pxp-personalizer__editor { display: grid; gap: 1rem; min-width: 0; container-name: pxp-editor; container-type: inline-size; }
.pxp-panel { min-width: 0; margin: 0; padding: 1.2rem; border: 1px solid var(--pxp-line); border-radius: 1rem; background: rgba(255, 255, 255, .94); box-shadow: 0 .8rem 2.2rem rgba(17, 29, 53, .055); }
.pxp-panel legend { display: flex; align-items: center; gap: .6rem; padding: 0 .45rem; color: var(--pxp-ink); font-weight: 750; }
.pxp-panel legend small { padding: .18rem .4rem; border: 1px solid #b57a12; color: #8a5600; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.pxp-personalizer[data-tier="basic"] .pxp-panel--premium,
.pxp-personalizer[data-client-render="no"] .pxp-render-bridge { display: none; }
.pxp-fields, .pxp-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pxp-field, .pxp-controls label { display: grid; gap: .42rem; min-width: 0; margin: 0; color: var(--pxp-ink); font-size: .82rem; font-weight: 680; }
.pxp-field--wide { grid-column: 1 / -1; }
.pxp-field > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem; }
.pxp-controls label > span { display: block; }
.pxp-field__label { min-width: 0; overflow-wrap: break-word; }
.pxp-field em { flex: none; color: #7b5207; font-size: .6rem; font-style: normal; font-weight: 700; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; white-space: nowrap; }
.pxp-personalizer input:not([type="checkbox"]):not([type="color"]):not([type="range"]):not([type="file"]),
.pxp-personalizer textarea,
.pxp-personalizer select { width: 100%; min-width: 0; max-width: 100%; min-height: 2.85rem; margin: 0; padding: .72rem .78rem; border: 1px solid #c9cfda; border-radius: .6rem; background: #fffdfa; color: var(--pxp-ink); font: inherit; font-weight: 500; box-shadow: none; }
.pxp-personalizer input::placeholder,
.pxp-personalizer textarea::placeholder { color: #697287; opacity: 1; }
.pxp-personalizer textarea { resize: vertical; }
.pxp-personalizer input:focus-visible, .pxp-personalizer textarea:focus-visible, .pxp-personalizer select:focus-visible { outline: 3px solid rgba(246, 185, 64, .38); outline-offset: 2px; border-color: #9b6500; }
.pxp-upload { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem .9rem; padding: 1rem; border: 1px dashed #9da7b8; background: #f8f9fb; cursor: pointer; }
.pxp-upload:hover { border-color: #805200; background: #fffaf0; }
.pxp-upload__mark { display: grid; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; place-items: center; border: 1px solid var(--pxp-ink); border-radius: 50%; font-size: 1.4rem; }
.pxp-upload > span:nth-child(2) { display: grid; gap: .15rem; min-width: 0; }
.pxp-upload small, .pxp-file-note { color: var(--pxp-muted); font-size: .76rem; font-weight: 450; }
.pxp-upload input { grid-column: 1 / -1; width: 100%; max-width: 100%; margin: .75rem 0 0; padding: .45rem; border: 1px solid #c9cfda; border-radius: .6rem; background: #fff; font: inherit; font-size: .76rem; }
.pxp-upload input::file-selector-button { margin-right: .7rem; border: 0; border-radius: 999px; padding: .55rem .8rem; background: var(--pxp-ink); color: var(--pxp-paper); font: inherit; font-weight: 700; cursor: pointer; }
.pxp-file-note { margin: .7rem 0 0; }
.pxp-controls input[type="color"] { width: 100%; height: 2.85rem; padding: .25rem; border: 1px solid #c9cfda; background: #fff; }
.pxp-control--range { grid-column: 1 / -1; grid-template-columns: 8rem 1fr 3rem; align-items: center; }
.pxp-control--range > span { display: block !important; }
.pxp-control--range output { text-align: right; color: var(--pxp-muted); font-weight: 600; }
.pxp-render-bridge { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-left: 3px solid var(--pxp-gold); background: #f5f7fa; }
.pxp-render-bridge__dot { flex: 0 0 .65rem; width: .65rem; height: .65rem; border-radius: 50%; background: #a3adba; }
.has-generated-output .pxp-render-bridge__dot { background: #21865d; box-shadow: 0 0 0 4px rgba(33, 134, 93, .12); }
.pxp-render-bridge p { display: grid; gap: .12rem; margin: 0; }
.pxp-render-bridge span { color: var(--pxp-muted); font-size: .76rem; }
.pxp-confirm { display: flex; align-items: flex-start; gap: .65rem; font-size: .83rem; line-height: 1.5; }
.pxp-confirm input { flex: 0 0 auto; margin-top: .22rem; }
.pxp-preview-wrap { position: sticky; top: 1.5rem; min-width: 0; }
.pxp-preview { --pxp-photo-x: 50%; --pxp-headline-scale: 1; position: relative; display: grid; width: min(100%, 25rem); aspect-ratio: 9 / 16; margin-inline: auto; overflow: hidden; background: var(--pxp-preview-bg); color: var(--pxp-paper); box-shadow: 0 1.8rem 4rem rgba(17, 29, 53, .22); isolation: isolate; }
.pxp-preview::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 72% 15%, color-mix(in srgb, var(--pxp-preview-accent) 34%, transparent), transparent 34%), linear-gradient(145deg, transparent 45%, rgba(255,255,255,.05)); }
.pxp-preview__photo { position: absolute; inset: 0; z-index: -2; background-position: var(--pxp-photo-x) center; background-size: cover; opacity: 0; transition: opacity .25s ease; }
.pxp-preview__photo.has-photo { opacity: .28; }
.pxp-preview__photo span { display: none; }
.pxp-preview__copy { align-self: center; padding: 14% 10%; text-align: center; text-shadow: 0 1px 18px rgba(0,0,0,.25); }
.pxp-preview[data-font="heritage"] .pxp-preview__copy { font-family: Georgia, 'Times New Roman', serif; }
.pxp-preview[data-font="modern"] .pxp-preview__copy { font-family: Arial, Helvetica, sans-serif; }
.pxp-preview[data-font="ceremonial"] .pxp-preview__copy { font-family: 'Palatino Linotype', Palatino, Georgia, serif; letter-spacing: .02em; }
.pxp-preview__kicker { margin: 0 0 1.3rem; color: var(--pxp-preview-accent); font-family: Arial, sans-serif; font-size: .67rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.pxp-preview h3 { margin: 0; color: inherit; font-size: calc(clamp(2rem, 7vw, 3.4rem) * var(--pxp-headline-scale)); line-height: .98; overflow-wrap: anywhere; }
.pxp-preview__date { margin: 1.3rem 0 .9rem; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.pxp-preview__rule { display: block; width: 3rem; height: 1px; margin: 1.1rem auto; background: var(--pxp-preview-accent); }
.pxp-preview__venue { margin: 0; font-size: 1rem; font-weight: 700; }
.pxp-preview__message { margin: .65rem 0 0; font-size: .82rem; opacity: .82; }
.pxp-preview__label { position: absolute; right: 7%; bottom: 5%; margin: 0; color: var(--pxp-preview-accent); font: 650 .58rem/1.2 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.pxp-preview__registration i { position: absolute; width: 1rem; height: 1rem; border-color: var(--pxp-preview-accent); opacity: .7; }
.pxp-preview__registration i:nth-child(1) { top: 5%; left: 7%; border-top: 1px solid; border-left: 1px solid; }
.pxp-preview__registration i:nth-child(2) { top: 5%; right: 7%; border-top: 1px solid; border-right: 1px solid; }
.pxp-preview__registration i:nth-child(3) { bottom: 5%; left: 7%; border-bottom: 1px solid; border-left: 1px solid; }
.pxp-preview__registration i:nth-child(4) { right: 7%; bottom: 5%; border-right: 1px solid; border-bottom: 1px solid; }
.pxp-preview[data-layout="editorial"] .pxp-preview__copy { align-self: end; padding-bottom: 24%; text-align: left; }
.pxp-preview[data-layout="editorial"] .pxp-preview__rule { margin-left: 0; }
.pxp-preview[data-layout="split"] .pxp-preview__photo { inset: 0 0 48%; opacity: .7; }
.pxp-preview[data-layout="split"] .pxp-preview__copy { align-self: end; padding-bottom: 13%; }
.pxp-preview-wrap__note { margin: 1rem auto 0; max-width: 25rem; color: var(--pxp-muted); font-size: .72rem; line-height: 1.5; text-align: center; }

/* Royal Palace keeps the order form familiar while previewing the actual
   interactive invitation language instead of the generic one-page card. */
.pxp-personalizer--royal {
  --pxp-royal-navy: #0b1830;
  --pxp-royal-wine: #6f1733;
  --pxp-royal-wine-deep: #3e0b1d;
  --pxp-royal-gold: #d6a943;
  --pxp-royal-cream: #fff8e9;
  --pxp-royal-rose: #e9c2b9;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  border: 1px solid rgba(111, 23, 51, .17);
  border-radius: clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 100% 0, rgba(214, 169, 67, .14), transparent 28rem),
    linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 248, 233, .96));
  box-shadow: 0 1.5rem 4rem rgba(11, 24, 48, .09);
}
.pxp-personalizer--royal .pxp-personalizer__header { max-width: 56rem; }
.pxp-personalizer--royal .pxp-personalizer__header h2 { color: var(--pxp-royal-navy); }
.pxp-personalizer--royal .pxp-eyebrow { color: var(--pxp-royal-wine); }
.pxp-personalizer--royal .pxp-personalizer__layout { grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .92fr); }
.pxp-personalizer--royal .pxp-panel {
  border-color: rgba(111, 23, 51, .16);
  background: rgba(255, 253, 247, .96);
  box-shadow: 0 .9rem 2.6rem rgba(62, 11, 29, .06);
}
.pxp-personalizer--royal .pxp-panel legend { color: var(--pxp-royal-navy); }
.pxp-personalizer--royal .pxp-panel legend small { border-color: rgba(111, 23, 51, .3); color: var(--pxp-royal-wine); }
.pxp-personalizer--royal .pxp-field em { color: var(--pxp-royal-wine); }
.pxp-personalizer--royal input:not([type="checkbox"]):not([type="color"]):not([type="range"]):not([type="file"]),
.pxp-personalizer--royal textarea,
.pxp-personalizer--royal select { border-color: rgba(11, 24, 48, .22); background: #fffefa; }
.pxp-personalizer--royal input:focus-visible,
.pxp-personalizer--royal textarea:focus-visible,
.pxp-personalizer--royal select:focus-visible { border-color: var(--pxp-royal-wine); outline-color: rgba(214, 169, 67, .48); }
.pxp-personalizer--royal .pxp-upload { border-color: rgba(111, 23, 51, .38); background: rgba(255, 248, 233, .72); }
.pxp-personalizer--royal .pxp-upload:hover { border-color: var(--pxp-royal-wine); background: var(--pxp-royal-cream); }
.pxp-personalizer--royal .pxp-upload__mark { border-color: var(--pxp-royal-wine); color: var(--pxp-royal-wine); background: #fff; }
.pxp-personalizer--royal .pxp-upload input::file-selector-button { background: var(--pxp-royal-navy); color: #fff; }

.pxp-royal-actions {
  display: grid;
  gap: .7rem;
  padding: 1rem;
  border: 1px solid rgba(214, 169, 67, .42);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(111, 23, 51, .055), rgba(214, 169, 67, .11));
}
.pxp-royal-preview-button {
  display: flex;
  width: 100%;
  min-height: 3.35rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .7rem .65rem 1.15rem;
  border: 1px solid var(--pxp-royal-navy);
  border-radius: 999px;
  background: var(--pxp-royal-navy);
  color: #fff !important;
  font-size: .86rem;
  font-weight: 780;
  line-height: 1.3;
  text-decoration: none !important;
  box-shadow: 0 .7rem 1.6rem rgba(11, 24, 48, .17);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pxp-royal-preview-button > span:first-child { min-width: 0; }
.pxp-royal-preview-button > span:last-child {
  display: grid;
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--pxp-royal-gold);
  color: var(--pxp-royal-navy);
  font-size: 1rem;
  font-weight: 900;
}
.pxp-royal-preview-button:hover { transform: translateY(-2px); background: #172845; box-shadow: 0 1rem 2rem rgba(11, 24, 48, .22); }
.pxp-royal-preview-button:focus-visible { outline: 3px solid var(--pxp-royal-gold); outline-offset: 3px; }
.pxp-royal-preview-button[aria-disabled="true"] { cursor: not-allowed; opacity: .68; transform: none; box-shadow: none; }
.pxp-royal-actions [data-pxp-royal-preview-status] { margin: 0 .25rem; color: #4d5669; font-size: .74rem; line-height: 1.55; }
.pxp-royal-actions [data-pxp-royal-preview-status].is-error,
.pxp-royal-actions [data-pxp-royal-preview-status][data-state="error"] { color: #8f1634; font-weight: 650; }
.pxp-royal-actions [data-pxp-royal-preview-status].is-ready,
.pxp-royal-actions [data-pxp-royal-preview-status][data-state="ready"] { color: #17613f; font-weight: 650; }

.pxp-preview-wrap--royal { top: 1rem; }
.pxp-royal-cover {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(7rem, 1fr) auto auto auto auto auto auto;
  width: min(100%, 25rem);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  padding: clamp(1.2rem, 5cqw, 2rem);
  overflow: hidden;
  border: 1px solid rgba(214, 169, 67, .58);
  border-radius: 10.5rem 10.5rem 1.5rem 1.5rem;
  background-color: var(--pxp-royal-navy);
  background-image:
    linear-gradient(180deg, rgba(11, 24, 48, .12), rgba(11, 24, 48, .3) 38%, rgba(30, 5, 16, .92) 100%),
    var(--pxp-royal-cover, linear-gradient(150deg, #7c2038, #0b1830));
  background-position: center;
  background-size: cover;
  color: var(--pxp-royal-cream);
  box-shadow: 0 2rem 4.5rem rgba(11, 24, 48, .28);
  isolation: isolate;
  text-align: center;
}
.pxp-royal-cover::before {
  content: "";
  position: absolute;
  inset: 1rem;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(214, 169, 67, .58);
  border-radius: 9rem 9rem .85rem .85rem;
  box-shadow: inset 0 0 0 1px rgba(255, 248, 233, .1);
}
.pxp-royal-cover::after {
  content: "";
  position: absolute;
  top: 1.6rem;
  left: 50%;
  z-index: 1;
  width: 4.5rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--pxp-royal-gold), transparent);
}
.pxp-royal-cover__veil { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 32%, transparent 0 18%, rgba(11, 24, 48, .22) 48%, rgba(62, 11, 29, .38) 100%); }
.pxp-royal-cover > :not(.pxp-royal-cover__veil) { position: relative; z-index: 2; }
.pxp-royal-cover__eyebrow {
  align-self: start;
  margin: 1rem 1rem 0;
  color: #fff8e9;
  font-size: clamp(.58rem, 1.8cqw, .7rem);
  font-weight: 760;
  letter-spacing: .17em;
  line-height: 1.45;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.pxp-royal-cover__portraits { align-self: end; display: flex; justify-content: center; margin-bottom: clamp(.5rem, 2cqw, 1rem); }
.pxp-royal-cover__portraits > span {
  display: grid;
  width: clamp(4.4rem, 22cqw, 6rem);
  aspect-ratio: 1;
  place-items: end center;
  overflow: hidden;
  border: 2px solid var(--pxp-royal-gold);
  border-radius: 50%;
  background-color: rgba(255, 248, 233, .15);
  background-position: center;
  background-size: cover;
  box-shadow: 0 .85rem 1.8rem rgba(0, 0, 0, .28);
}
.pxp-royal-cover__portraits > span + span { margin-left: clamp(-.8rem, -3cqw, -.45rem); }
.pxp-royal-cover__portraits small { width: 100%; padding: .28rem .4rem; background: rgba(11, 24, 48, .78); color: #fff; font-size: .55rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pxp-royal-cover__portraits > span.has-photo small,
.pxp-royal-cover__portraits > span[style*="background-image"] small { opacity: 0; }
.pxp-royal-cover h3 {
  margin: .2rem 1rem .65rem;
  color: var(--pxp-royal-cream);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 8.5cqw, 3rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .95;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .48);
}
.pxp-royal-cover h3 span { display: block; }
.pxp-royal-cover h3 i { display: block; margin: .18rem 0; color: var(--pxp-royal-gold); font-size: .62em; font-weight: 400; }
.pxp-royal-cover__date { margin: 0; color: #fff; font-size: clamp(.65rem, 2.2cqw, .78rem); font-weight: 720; letter-spacing: .1em; line-height: 1.45; text-transform: uppercase; }
.pxp-royal-cover__rule { display: block; width: 3.2rem; height: 1px; margin: .75rem auto; background: var(--pxp-royal-gold); }
.pxp-royal-cover__venue { margin: 0; color: var(--pxp-royal-cream); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(.9rem, 3.2cqw, 1.12rem); font-weight: 600; line-height: 1.3; }
.pxp-royal-cover__seal {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  margin: .8rem auto .45rem;
  border: 1px solid rgba(255, 248, 233, .62);
  border-radius: 50%;
  background: var(--pxp-royal-wine);
  color: var(--pxp-royal-gold);
  font: 600 1rem/1 Georgia, serif;
  box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .22);
}
.pxp-royal-cover__label { margin: 0 1rem .8rem; color: rgba(255, 248, 233, .88); font-size: .54rem; font-weight: 720; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }
.pxp-preview-wrap--royal .pxp-preview-wrap__note { max-width: 27rem; color: #566074; }

.pxp-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
@container pxp-studio (max-width: 48rem) {
  .pxp-personalizer__layout { grid-template-columns: minmax(0, 1fr); }
  .pxp-preview-wrap { position: static; order: -1; }
  .pxp-preview { width: min(100%, 22rem); }
  .pxp-personalizer--royal .pxp-personalizer__layout { grid-template-columns: minmax(0, 1fr); }
  .pxp-preview-wrap--royal { position: static; order: -1; }
  .pxp-royal-cover { width: min(100%, 22rem); }
}
@container pxp-editor (max-width: 28rem) {
  .pxp-fields, .pxp-controls { grid-template-columns: minmax(0, 1fr); }
  .pxp-field--wide, .pxp-control--range { grid-column: auto; }
  .pxp-control--range { grid-template-columns: minmax(0, 1fr) 3rem; }
  .pxp-control--range > span { grid-column: 1 / -1; }
}
@supports not (container-type: inline-size) {
  .pxp-personalizer__layout,
  .pxp-fields,
  .pxp-controls { grid-template-columns: minmax(0, 1fr); }
  .pxp-preview-wrap { position: static; order: -1; }
  .pxp-field--wide, .pxp-control--range { grid-column: auto; }
}
@media (max-width: 860px) {
  .pxp-personalizer__layout { grid-template-columns: 1fr; }
  .pxp-preview-wrap { position: static; order: -1; }
  .pxp-preview { width: min(100%, 21rem); }
  .pxp-personalizer--royal .pxp-personalizer__layout { grid-template-columns: 1fr; }
  .pxp-preview-wrap--royal { position: static; order: -1; }
  .pxp-royal-cover { width: min(100%, 21rem); }
}
@media (max-width: 520px) {
  .pxp-personalizer { margin-top: 1.25rem; }
  .pxp-personalizer--royal { padding: 1rem; border-radius: 1.2rem; }
  .pxp-panel { padding: 1rem; }
  .pxp-fields, .pxp-controls { grid-template-columns: 1fr; }
  .pxp-field--wide, .pxp-control--range { grid-column: auto; }
  .pxp-control--range { grid-template-columns: 1fr 3rem; }
  .pxp-control--range > span { grid-column: 1 / -1; }
  .pxp-royal-actions { padding: .8rem; }
  .pxp-royal-preview-button { min-height: 3.15rem; padding-left: .95rem; font-size: .8rem; }
  .pxp-royal-cover { width: min(100%, 19.5rem); border-radius: 8.5rem 8.5rem 1.15rem 1.15rem; }
  .pxp-royal-cover::before { inset: .75rem; border-radius: 7.8rem 7.8rem .65rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pxp-preview__photo,
  .pxp-royal-preview-button { transition: none; }
  .pxp-royal-preview-button:hover { transform: none; }
}