html.invitation-preview-open,
html.invitation-preview-open body {
    overflow: hidden;
}

.invitation-preview {
    width: min(900px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 24px 80px rgb(0 0 0 / 30%);
    font-family: 'Outfit', sans-serif;
    overscroll-behavior: contain;
    overflow-y: auto;
}

.invitation-preview:not([open]),
.invitation-preview [hidden] {
    display: none;
}

.invitation-preview::backdrop {
    background: rgb(17 24 39 / 72%);
}

.invitation-preview__panel {
    padding: 24px;
}

.invitation-preview__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.invitation-preview__eyebrow {
    margin: 0 0 4px;
    color: #d81b60;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.invitation-preview h2 {
    margin: 0;
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.invitation-preview__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff1f6;
    color: #262324;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.invitation-preview__description,
.invitation-preview__error {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #606570;
}

.invitation-preview__media {
    width: 100%;
    height: 500px;
    overflow: hidden;
    border-radius: 12px;
    background: #111;
    margin-inline: auto;
}

.invitation-preview--landscape .invitation-preview__media {
    height: 500px;
}

.invitation-preview__media iframe,
.invitation-preview__media video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
}

.invitation-preview--envelope .invitation-preview__media {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    background: #fff5f9;
}

.invitation-preview__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
}

.invitation-preview__footer p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.invitation-preview__continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 24px;
    border: 2px solid #e91e63;
    border-radius: 999px;
    color: #d81b60;
    background: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.invitation-preview__continue:hover,
.invitation-preview__close:hover {
    background: #fff1f6;
}

.invitation-preview__continue:focus-visible,
.invitation-preview__close:focus-visible {
    outline: 3px solid #9d174d;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .invitation-preview__panel { padding: 16px; }
    .invitation-preview__footer { flex-direction: column; gap: 12px; }
    .invitation-preview__footer p { text-align: center; }
    .invitation-preview__continue { width: 100%; }
}

/* Shared cards and saved-template controls. */
.invitation-card { position: relative; min-width: 0; padding: 6px; border: 1px solid #f3f4f6; border-radius: 18px; background: #fff; box-shadow: 0 3px 7px rgb(0 0 0 / 12%); }
.invitation-card__link { display: block; color: #1a1a1a; text-decoration: none; border-radius: 12px; }
.invitation-card__image { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 12px; background: #f3f0f2; }
.invitation-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.invitation-card__link:hover img { transform: scale(1.03); }
.invitation-card__type { position: absolute; top: 12px; left: 10px; padding: 3px 12px; border-radius: 20px; background: #fff; color: #d81b60; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.invitation-card__play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; padding-left: 4px; transform: translate(-50%, -50%); border: 1px solid #ffffff70; border-radius: 50%; background: #0005; color: #fff; font-size: 24px; }
.invitation-card__duration { position: absolute; bottom: 12px; right: 12px; padding: 4px 12px; border-radius: 16px; background: #000a; color: #fff; font-size: 12px; font-weight: 600; }
.invitation-card__caption { padding: 12px 6px; text-align: center; }
.invitation-card h3 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; }
.invitation-card__price { margin: 6px 0 0; color: #b71850; font-size: 14px; font-weight: 600; }
.invitation-card__price del { color: #6b7280; font-weight: 400; font-size: 12px; }
.invitation-save { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid #f2d4df; border-radius: 50%; background: #fff; color: #ad174a; cursor: pointer; box-shadow: 0 2px 5px #0001; }
.invitation-save svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.invitation-save[aria-pressed="true"] { background: #ffedf3; border-color: #d81b60; }
.invitation-save[aria-pressed="true"] svg { fill: #d81b60; }
.invitation-save--inline { position: static; border-radius: 24px; padding: 8px 14px; font-size: 14px; font-weight: 600; }
.invitation-save[hidden], .invitation-shortlist-launch[hidden], .invitation-browse-notice[hidden] { display: none; }
.invitation-save:focus-visible, .invitation-card__link:focus-visible, .invitation-shortlist-launch:focus-visible, .invitation-preview__secondary:focus-visible, .invitation-preview__details:focus-visible { outline: 3px solid #9d174d; outline-offset: 3px; }
.invitation-shortlist-launch { position: fixed; bottom: 20px; left: 20px; z-index: 1000; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 18px; border: 1px solid #e91e63; border-radius: 30px; background: #fff; color: #b71850; box-shadow: 0 3px 16px #0002; font-weight: 700; cursor: pointer; }
.invitation-shortlist-launch span { min-width: 24px; padding: 2px 6px; border-radius: 15px; background: #fff1f6; text-align: center; }
.invitation-browse-notice { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 1001; width: max-content; max-width: calc(100% - 40px); padding: 12px 18px; border-radius: 12px; color: #fff; background: #333; font-size: 14px; box-shadow: 0 4px 20px #0003; }
.invitation-preview > .invitation-browse-notice { position: sticky; bottom: 12px; left: auto; transform: none; margin: 0 auto 12px; }
.invitation-preview__navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 13px; }
.invitation-preview__secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid #e1d6da; border-radius: 24px; background: #fff; color: #9d174d; font-size: 14px; font-weight: 600; cursor: pointer; }
.invitation-preview__secondary:disabled { color: #767676; opacity: .55; cursor: default; }
.invitation-preview__actions { display: flex; align-items: center; gap: 18px; }
.invitation-preview__details { color: #9d174d; text-decoration: underline; font-size: 14px; }
.invitation-preview__facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 16px 0 0; }
.invitation-preview__facts dt, .invitation-card__facts dt { color: #6b7280; font-size: 12px; }
.invitation-preview__facts dd, .invitation-card__facts dd { margin: 0; color: #1a1a1a; font-size: 15px; font-weight: 600; }
.invitation-card__facts { display: none; }
.invitation-shortlist { width: min(1100px, calc(100% - 32px)); }
.invitation-shortlist__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.invitation-shortlist .invitation-card__image { height: min(380px, 45vh); height: min(380px, 45dvh); aspect-ratio: auto; }
.invitation-shortlist .invitation-card__image img { object-fit: contain; }
.invitation-shortlist .invitation-card__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 10px 12px; }
.invitation-shortlist__unavailable { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; padding: 24px; border: 1px solid #eee; border-radius: 12px; }
.invitation-preview__media,
.invitation-preview--envelope .invitation-preview__media {
    height: 500px;
}
.invitation-preview--landscape .invitation-preview__media {
    height: 500px;
}
.invitation-filter-status { display: flex; align-items: center; gap: 12px; max-width: 1280px; margin: 12px auto; color: #6b1736; font-size: 14px; }
.invitation-filter-status[hidden] { display: none; }
.invitation-filter-status [hidden], nav.pagination[hidden] { display: none !important; }
.invitation-filter-more { display: block; margin: 24px auto; }
.invitation-filter-more[hidden] { display: none; }
@media (max-width: 600px) {
    .invitation-card { padding: 4px; border-radius: 12px; }
    .invitation-card__image { border-radius: 9px; }
    .invitation-card__type { top: 8px; left: 6px; padding: 3px 8px; font-size: 10px; }
    .invitation-save { top: 8px; right: 8px; }
    .invitation-save--inline { position: static; }
    .invitation-card h3 { font-size: 13px; }
    .invitation-card__play { width: 44px; height: 44px; font-size: 20px; }
    .invitation-preview__footer { position: sticky; bottom: -16px; padding: 12px 0; background: #fff; }
    .invitation-preview__actions { width: 100%; justify-content: space-between; }
    .invitation-shortlist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .invitation-shortlist .invitation-card__image { height: auto; aspect-ratio: 9 / 16; }
    .invitation-shortlist-launch { bottom: 12px; left: 12px; }
}
@media (max-width: 767px) {
    .invitation-preview--landscape .invitation-preview__media { height: 300px; }
    .invitation-preview--portrait .invitation-preview__media { height: calc(100vh - 260px); height: calc(100dvh - 260px); }
}
@media (prefers-reduced-motion: reduce) { .invitation-card__image img { transition: none; } }