/* =========================================================
   NIK & RISH ON THE GO
   Complete Colorful Website + Admin Styles
   ========================================================= */

:root {
    --ink: #29233a;
    --ink-soft: #514a63;
    --cream: #fffaf5;
    --paper: #f8f2eb;
    --white: #ffffff;
    --rose: #f4c4cc;
    --rose-soft: #fff0f3;
    --rose-dark: #b55f73;
    --coral: #f4a58f;
    --coral-soft: #fff0ea;
    --sage: #b7d3bd;
    --sage-soft: #edf7ef;
    --sage-dark: #4f7f5d;
    --lavender: #cdbfec;
    --lavender-soft: #f2edff;
    --lavender-dark: #745ba6;
    --sky: #b9d9f5;
    --sky-soft: #edf7ff;
    --sky-dark: #487da8;
    --gold: #e2bd6f;
    --gold-soft: #fff7df;
    --gold-dark: #9b7428;
    --peach: #f7c6a3;
    --peach-soft: #fff1e6;
    --mint: #bfe4d7;
    --mint-soft: #ebfaf5;
    --danger: #b74855;
    --danger-soft: #fff0f1;
    --success: #37794b;
    --success-soft: #e9f8ed;
    --shadow-sm: 0 8px 26px rgba(41, 35, 58, 0.06);
    --shadow-md: 0 16px 42px rgba(41, 35, 58, 0.09);
    --shadow-lg: 0 26px 70px rgba(41, 35, 58, 0.13);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 34px;
    --border: rgba(41, 35, 58, 0.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 0%, rgba(244, 196, 204, .18), transparent 24%),
        radial-gradient(circle at 90% 10%, rgba(185, 217, 245, .18), transparent 22%),
        var(--cream);
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
h1, h2, h3, h4 { color: var(--ink); }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.eyebrow, .section-label {
    color: var(--rose-dark);
    font-size: .73rem;
    letter-spacing: .21em;
    font-weight: 800;
    text-transform: uppercase;
}

/* Buttons */
.btn, .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    padding: 13px 22px;
    min-height: 46px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover, .button:hover { transform: translateY(-2px); }
.btn-primary, .button-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--rose-dark), #ca6f85);
    box-shadow: 0 12px 28px rgba(181, 95, 115, .22);
}
.btn-primary:hover, .button-primary:hover { box-shadow: 0 16px 34px rgba(181, 95, 115, .28); }
.btn-ghost, .button-secondary {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(41, 35, 58, .14);
    color: var(--ink);
}
.btn-light { background: #fff; color: var(--ink); }
.button-danger { background: var(--danger-soft); color: var(--danger); border-color: #f1cfd4; }
.button-danger:hover { background: #ffe4e7; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.button-row.centered { justify-content: center; }

/* Main navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 250, 245, .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(41, 35, 58, .07);
}
.site-nav {
    max-width: 1180px;
    height: 78px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}
.brand, .site-logo { font-family: 'Playfair Display', serif; color: var(--ink); text-decoration: none; }
.brand { font-size: 1.55rem; font-weight: 600; }
.brand span, .site-logo span { color: var(--rose-dark); }
.site-logo { display: flex; flex-direction: column; font-size: 1.48rem; font-weight: 700; line-height: 1; }
.site-logo small {
    margin-top: 5px;
    font-family: 'DM Sans', sans-serif;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .23em;
    color: var(--lavender-dark);
}
.main-navigation { display: flex; align-items: center; gap: 30px; }
.main-navigation > a, .nav-dropdown-button {
    position: relative;
    background: transparent;
    border: 0;
    padding: 28px 0;
    font: inherit;
    font-size: .92rem;
    font-weight: 650;
    color: var(--ink);
    cursor: pointer;
    opacity: .74;
}
.main-navigation > a:hover, .nav-dropdown-button:hover,
.main-navigation > a.active, .nav-dropdown-button.active { opacity: 1; }
.main-navigation > a.active::after, .nav-dropdown-button.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 17px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--rose-dark), var(--lavender-dark));
}
.nav-cta {
    padding: 10px 18px !important;
    border-radius: 999px;
    border: 1px solid rgba(181, 95, 115, .25);
    background: var(--rose-soft);
    color: var(--rose-dark) !important;
}
.nav-dropdown { position: relative; }
.dropdown-arrow { margin-left: 5px; }
.nav-dropdown-menu {
    position: absolute;
    top: 65px;
    right: 0;
    width: 325px;
    padding: 10px;
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-7px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    transition: background .15s ease, transform .15s ease;
}
.nav-dropdown-menu a:nth-child(1):hover { background: var(--rose-soft); }
.nav-dropdown-menu a:nth-child(2):hover { background: var(--gold-soft); }
.nav-dropdown-menu a:nth-child(3):hover { background: var(--sage-soft); }
.nav-dropdown-menu a:nth-child(4):hover { background: var(--lavender-soft); }
.nav-dropdown-menu a:hover { transform: translateX(3px); }
.menu-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--rose-soft), var(--lavender-soft));
}
.nav-dropdown-menu strong { display: block; margin-bottom: 2px; font-size: .92rem; }
.nav-dropdown-menu small { display: block; font-size: .74rem; color: var(--ink-soft); }
.mobile-menu-button, .nav-toggle {
    display: none;
    border: 0;
    background: none;
    color: var(--ink);
    font-size: 1.55rem;
    cursor: pointer;
}
.mobile-navigation {
    display: none;
    padding: 10px 22px 22px;
    background: rgba(255, 250, 245, .98);
    border-top: 1px solid var(--border);
}
.mobile-navigation-open, .mobile-navigation.is-open { display: grid; }
.mobile-navigation a { padding: 13px 5px; border-bottom: 1px solid rgba(41, 35, 58, .06); font-weight: 600; }
.mobile-menu-heading {
    margin-top: 15px;
    padding: 12px 5px 5px;
    font-size: .68rem;
    letter-spacing: .16em;
    font-weight: 800;
    color: var(--rose-dark);
}

/* Home */
.hero {
    min-height: 82vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 7vw;
    align-items: center;
    padding: 80px 7vw;
    overflow: hidden;
}
.hero-copy h1, .baby-hero h1, .gallery-header h1, .form-intro h1, .thank-you-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(3.4rem, 7.5vw, 7rem);
    line-height: .96;
    margin: 18px 0 28px;
    letter-spacing: -.04em;
}
.hero-copy h1 em, .intro-grid h2 em, .baby-teaser h2 em, .baby-hero h1 em, .gallery-header h1 em {
    color: var(--rose-dark);
    font-weight: 500;
}
.hero-copy > p, .baby-hero > p, .gallery-header > p, .form-intro > p {
    max-width: 610px;
    font-size: 1.12rem;
    color: var(--ink-soft);
}
.hero-art { position: relative; min-height: 560px; }
.photo-frame {
    height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    text-align: center;
    color: rgba(41, 35, 58, .58);
    border-radius: 46% 46% 24px 24px;
    background:
        radial-gradient(circle at 25% 15%, rgba(255,255,255,.74), transparent 30%),
        linear-gradient(135deg, #f2b7c4 0%, #f6c9a8 30%, #c7d7f0 60%, #c7dfc9 100%);
    box-shadow: var(--shadow-lg);
}
.scribble {
    position: absolute;
    right: -16px;
    bottom: 25px;
    transform: rotate(-7deg);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--lavender-dark);
}
.intro-section { padding: 90px 7vw 30px; border-top: 1px solid var(--border); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.intro-grid h2, .baby-teaser h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1;
    margin: 0;
}
.intro-grid p { font-size: 1.08rem; color: var(--ink-soft); }
.timeline-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 60px 7vw 100px; }
.timeline-card {
    min-height: 250px;
    padding: 32px;
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease;
}
.timeline-card:nth-child(1) { background: var(--rose-soft); }
.timeline-card:nth-child(2) { background: var(--sky-soft); }
.timeline-card:nth-child(3) { background: var(--sage-soft); }
.timeline-card:nth-child(4) { background: var(--lavender-soft); }
.timeline-card:nth-child(5) { background: var(--gold-soft); }
.timeline-card:hover { transform: translateY(-5px); }
.timeline-card span { color: var(--rose-dark); font-weight: 800; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.timeline-card h3 { font-family: 'Playfair Display', serif; font-size: 1.7rem; margin: 48px 0 12px; }
.timeline-card p { color: var(--ink-soft); }

/* Baby teaser */
.baby-teaser {
    margin: 0 4vw 80px;
    padding: 75px 8vw;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.32), transparent 24%),
        linear-gradient(135deg, #efb5c0, #f4c6a7 52%, #d9c9f3);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 40px;
    box-shadow: var(--shadow-md);
}
.baby-teaser-copy { max-width: 680px; }
.baby-teaser p { max-width: 560px; }
.baby-symbol { font-family: 'Playfair Display', serif; font-size: 11rem; line-height: 1; color: var(--rose-dark); opacity: .28; }

/* Baby / Gallery / RSVP common */
.baby-hero, .gallery-header, .form-intro, .thank-you-page { text-align: center; padding: 90px 7vw 55px; }
.baby-hero h1, .gallery-header h1, .form-intro h1 { font-size: clamp(3rem, 6vw, 6rem); }
.baby-hero > p, .gallery-header > p, .form-intro > p { margin: 0 auto; }

/* Event card */
.event-card-wrap { padding: 20px 7vw 80px; }
.event-card {
    max-width: 1020px;
    margin: auto;
    padding: 54px;
    text-align: center;
    border-radius: 30px;
    background:
        radial-gradient(circle at 0% 0%, rgba(244, 196, 204, .38), transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(185, 217, 245, .35), transparent 25%),
        #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.event-kicker { color: var(--rose-dark); font-size: .75rem; font-weight: 800; letter-spacing: .22em; }
.event-card h2 { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 4vw, 4rem); margin: 10px 0 35px; }
.event-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.event-details div { padding: 22px; border-radius: 18px; border: 1px solid var(--border); }
.event-details div:nth-child(1) { background: var(--rose-soft); }
.event-details div:nth-child(2) { background: var(--sky-soft); }
.event-details div:nth-child(3) { background: var(--sage-soft); }
.event-details small { display: block; letter-spacing: .14em; margin-bottom: 6px; color: var(--ink-soft); }
.event-note { margin: 35px auto 0; max-width: 600px; color: var(--ink-soft); }

/* Original baby grid */
.baby-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 7vw 100px; }
.feature-card {
    padding: 38px;
    min-height: 280px;
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow-sm);
}
.feature-card:nth-child(4n+1) { background: var(--rose-soft); }
.feature-card:nth-child(4n+2) { background: var(--sage-soft); }
.feature-card:nth-child(4n+3) { background: var(--lavender-soft); }
.feature-card:nth-child(4n+4) { background: var(--gold-soft); }
.feature-card span { font-size: .76rem; letter-spacing: .18em; color: var(--rose-dark); font-weight: 800; }
.feature-card h3 { font-family: 'Playfair Display', serif; font-size: 2rem; margin: 44px 0 8px; }
.feature-card p { color: var(--ink-soft); max-width: 430px; }
.feature-card a { font-weight: 800; color: var(--rose-dark); }

/* Forms */
.form-page { padding: 0 7vw 100px; }
.rsvp-form {
    max-width: 900px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    padding: 42px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(244,196,204,.23), rgba(205,191,236,.18)), #fff;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.field, .form-group { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label, .form-group label { font-weight: 700; font-size: .92rem; }
input, textarea, select {
    width: 100%;
    border: 1px solid rgba(41, 35, 58, .16);
    background: #fff;
    border-radius: 14px;
    padding: 14px 15px;
    color: var(--ink);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--rose-dark);
    box-shadow: 0 0 0 4px rgba(181, 95, 115, .11);
    background: #fff;
}
textarea { resize: vertical; }
.choice-row { display: flex; gap: 12px; flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; background: #fff; border-radius: 999px; border: 1px solid var(--border); }
.choice input { width: auto; }
.full-submit { grid-column: 1 / -1; border: 0; }

/* Alerts */
.alert { padding: 15px 17px; border-radius: 14px; margin-bottom: 20px; border: 1px solid transparent; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: #cbe9d3; }
.alert-error { background: var(--danger-soft); color: var(--danger); border-color: #f1cfd4; }
.alert ul { margin-bottom: 0; }

/* Thank you */
.thank-you-page { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.thank-you-heart { font-size: 3rem; color: var(--rose-dark); }
.thank-you-page p { max-width: 600px; color: var(--ink-soft); margin-bottom: 25px; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 15px 7vw 80px; }
.gallery-card {
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    box-shadow: var(--shadow-md);
    transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery-card--one { background: linear-gradient(145deg, #e8b6c0, #f3c7a8 50%, #b7d3bd); }
.gallery-card--two { background: linear-gradient(145deg, #a9c9ea, #d7c4ee 48%, #f4b39c); }
.gallery-card--three { background: linear-gradient(145deg, #f3d3bd, #d4c3ef 48%, #bcdac7); }
.gallery-card-overlay { padding: 32px; width: 100%; background: linear-gradient(transparent, rgba(41, 35, 58, .78)); color: #fff; }
.gallery-card-overlay span { font-size: .72rem; letter-spacing: .2em; }
.gallery-card-overlay h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: 2.1rem; margin: 8px 0 0; }
.gallery-card-overlay p { margin-bottom: 0; opacity: .86; }
.gallery-note {
    margin: 0 7vw 90px;
    padding: 22px;
    border: 1px dashed rgba(116, 91, 166, .35);
    border-radius: 18px;
    text-align: center;
    background: var(--lavender-soft);
}

/* Phase 3 public */
.baby-feature-page { padding: 85px 20px; }
.baby-feature-page .container { max-width: 1100px; margin: 0 auto; }
.feature-hero { text-align: center; max-width: 760px; margin: 0 auto 50px; }
.feature-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.7rem, 6vw, 5rem); margin: 8px 0 20px; }
.feature-hero p { font-size: 1.1rem; line-height: 1.8; color: var(--ink-soft); }
.feature-form-card {
    max-width: 700px;
    margin: 0 auto 70px;
    background: linear-gradient(135deg, rgba(244,196,204,.18), rgba(185,217,245,.18)), #fff;
    border-radius: 26px;
    padding: 36px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}
.feature-form { display: grid; gap: 20px; }
.feature-form .form-group { display: grid; gap: 8px; }
.feature-form label span { opacity: .5; font-weight: 400; }
.wishes-section { margin-top: 80px; }
.wishes-section > h2 { margin-bottom: 30px; }
.wishes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wish-card { position: relative; border-radius: 24px; padding: 30px; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.wish-card:nth-child(3n+1) { background: var(--rose-soft); }
.wish-card:nth-child(3n+2) { background: var(--sky-soft); }
.wish-card:nth-child(3n+3) { background: var(--gold-soft); }
.wish-card p { line-height: 1.7; }
.wish-quote { font-size: 4rem; line-height: .7; color: var(--rose-dark); opacity: .28; }
.registry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.registry-card { display: block; padding: 35px; border-radius: 24px; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.registry-card:nth-child(3n+1) { background: var(--rose-soft); }
.registry-card:nth-child(3n+2) { background: var(--sage-soft); }
.registry-card:nth-child(3n+3) { background: var(--lavender-soft); }
.registry-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.registry-label { font-size: .75rem; letter-spacing: .12em; font-weight: 800; color: var(--rose-dark); }
.registry-card h2 { margin: 12px 0 10px; }
.registry-card p { line-height: 1.6; color: var(--ink-soft); }
.registry-link { display: inline-block; margin-top: 18px; font-weight: 800; color: var(--lavender-dark); }

/* Baby hub */
.baby-hub-hero {
    position: relative;
    overflow: hidden;
    padding: 115px 20px 95px;
    text-align: center;
    background:
        radial-gradient(circle at 15% 15%, rgba(244,196,204,.65), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(185,217,245,.65), transparent 24%),
        radial-gradient(circle at 75% 90%, rgba(205,191,236,.50), transparent 28%),
        linear-gradient(180deg, #fff9f4, #ffffff);
}
.baby-hub-hero .container { max-width: 850px; margin: auto; }
.baby-hub-hero h1 { font-family: 'Playfair Display', serif; margin: 10px 0 25px; font-size: clamp(3rem, 8vw, 6.5rem); line-height: .98; }
.baby-hub-intro { max-width: 680px; margin: 0 auto 35px; font-size: 1.1rem; line-height: 1.8; color: var(--ink-soft); }
.baby-explore-section { padding: 90px 20px; }
.baby-explore-section .container { max-width: 1100px; margin: auto; }
.baby-explore-heading { max-width: 670px; margin-bottom: 45px; }
.baby-explore-heading h2 { font-family: 'Playfair Display', serif; margin: 5px 0 15px; font-size: clamp(2.2rem, 5vw, 4rem); }
.baby-explore-heading p { line-height: 1.7; color: var(--ink-soft); }
.baby-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.baby-feature-card {
    display: flex;
    gap: 22px;
    min-height: 220px;
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: 26px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}
.baby-feature-card:nth-child(1) { background: linear-gradient(135deg, var(--rose-soft), #fff); }
.baby-feature-card:nth-child(2) { background: linear-gradient(135deg, var(--gold-soft), #fff); }
.baby-feature-card:nth-child(3) { background: linear-gradient(135deg, var(--sage-soft), #fff); }
.baby-feature-card:nth-child(4) { background: linear-gradient(135deg, var(--lavender-soft), #fff); }
.baby-feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.baby-feature-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.65rem;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(41,35,58,.07);
}
.baby-feature-label { font-size: .69rem; letter-spacing: .14em; font-weight: 800; color: var(--rose-dark); }
.baby-feature-card h3 { margin: 8px 0 10px; font-size: 1.6rem; }
.baby-feature-card p { margin: 0 0 20px; line-height: 1.65; color: var(--ink-soft); }
.baby-card-link { font-size: .9rem; font-weight: 800; color: var(--lavender-dark); }
.baby-gallery-teaser { padding: 80px 20px; background: linear-gradient(135deg, var(--sky-soft), var(--lavender-soft)); }
.baby-gallery-teaser .container { max-width: 1100px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.baby-gallery-teaser h2 { font-family: 'Playfair Display', serif; margin: 5px 0 10px; font-size: clamp(2rem, 5vw, 3.5rem); }

/* Admin base */
.admin-dashboard-section, .admin-login-section { padding: 70px 20px; min-height: 80vh; }
.admin-dashboard-section {
    background:
        radial-gradient(circle at 0% 0%, rgba(244,196,204,.17), transparent 25%),
        radial-gradient(circle at 100% 0%, rgba(185,217,245,.16), transparent 24%),
        #fbfafc;
}
.admin-dashboard-section .container { max-width: 1180px; margin: 0 auto; }
.admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-bottom: 40px; }
.admin-header h1 { font-family: 'Playfair Display', serif; margin: 5px 0 10px; font-size: clamp(2.2rem, 5vw, 4rem); }
.admin-header p { max-width: 650px; color: var(--ink-soft); }
.admin-stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 35px; }
.admin-stat-card { border: 1px solid var(--border); border-radius: 20px; padding: 24px 18px; box-shadow: var(--shadow-sm); }
.admin-stat-card:nth-child(6n+1) { background: var(--rose-soft); }
.admin-stat-card:nth-child(6n+2) { background: var(--sage-soft); }
.admin-stat-card:nth-child(6n+3) { background: var(--coral-soft); }
.admin-stat-card:nth-child(6n+4) { background: var(--sky-soft); }
.admin-stat-card:nth-child(6n+5) { background: var(--lavender-soft); }
.admin-stat-card:nth-child(6n+6) { background: var(--gold-soft); }
.admin-stat-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-bottom: 8px; }
.admin-stat-number { display: block; font-size: 2rem; line-height: 1; }
.admin-section-card { background: rgba(255,255,255,.92); border-radius: 24px; padding: 30px; box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.admin-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 25px; }
.admin-section-heading h2 { margin: 4px 0 0; }
.admin-table-wrapper { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 15px 14px; text-align: left; border-bottom: 1px solid rgba(41,35,58,.08); }
.admin-table th { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.admin-table tbody tr { transition: background .15s ease; }
.admin-table tbody tr:hover { background: #fffafd; }
.admin-table-muted { margin-top: 4px; font-size: .84rem; color: var(--ink-soft); }
.status-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.status-yes { background: var(--success-soft); color: var(--success); }
.status-no { background: var(--danger-soft); color: var(--danger); }
.admin-view-link { font-weight: 800; color: var(--lavender-dark); }
.admin-view-link:hover { text-decoration: underline; }
.admin-empty-state { text-align: center; padding: 50px 20px; }
.admin-empty-state h3 { margin-bottom: 8px; }

/* Admin login */
.admin-login-section {
    background:
        radial-gradient(circle at 10% 10%, rgba(244,196,204,.33), transparent 28%),
        radial-gradient(circle at 90% 20%, rgba(185,217,245,.30), transparent 30%),
        linear-gradient(180deg, #fffaf5, #f7f4ff);
}
.admin-login-card {
    max-width: 520px;
    margin: 0 auto;
    background: rgba(255,255,255,.93);
    padding: 40px;
    border-radius: 26px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}
.admin-login-heading { margin-bottom: 30px; }
.admin-login-heading h1 { font-family: 'Playfair Display', serif; margin: 5px 0 10px; }
.admin-login-form { display: grid; gap: 20px; }
.admin-login-form .form-group { display: grid; gap: 8px; }
.admin-login-form label { font-weight: 700; }
.admin-login-button { width: 100%; margin-top: 5px; }

/* Admin moderation */
.admin-message-card { border-bottom: 1px solid rgba(41,35,58,.08); padding: 25px 0; }
.admin-message-card:first-child { padding-top: 0; }
.admin-message-card:last-child { border-bottom: 0; }
.admin-message-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.admin-message-top h3 { margin: 0 0 4px; }
.admin-message-text { margin: 20px 0; line-height: 1.75; max-width: 850px; color: var(--ink-soft); }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.timecapsule-letter { max-width: 760px; font-size: 1.05rem; }
.timecapsule-message {
    margin: 35px 0;
    padding: 35px;
    background: linear-gradient(135deg, var(--lavender-soft), var(--rose-soft));
    border: 1px solid rgba(116,91,166,.12);
    border-radius: 22px;
    line-height: 1.9;
    font-size: 1.1rem;
}
.timecapsule-signature { margin-top: 25px; line-height: 1.6; }

/* Admin nav */
.admin-navigation {
    background: linear-gradient(90deg, #2d2440 0%, #4a315d 45%, #5a394f 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 26px rgba(41,35,58,.13);
}
.admin-navigation-inner { max-width: 1180px; margin: auto; min-height: 68px; padding: 0 22px; display: flex; align-items: center; gap: 30px; }
.admin-brand { display: flex; flex-direction: column; min-width: 120px; color: #fff; font-weight: 800; }
.admin-brand span { margin-top: 3px; font-size: .55rem; font-weight: 500; letter-spacing: .18em; color: #f4c4cc; }
.admin-nav-links { display: flex; align-items: center; gap: 25px; flex-grow: 1; }
.admin-nav-links a { position: relative; padding: 24px 0; color: rgba(255,255,255,.72); font-size: .87rem; transition: color .15s ease; }
.admin-nav-links a:hover, .admin-nav-links a.active { color: #fff; }
.admin-nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f4c4cc, #f5d78f);
}
.admin-logout-button {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    border-radius: 11px;
    padding: 9px 14px;
    font: inherit;
    font-size: .82rem;
    cursor: pointer;
}
.admin-logout-button:hover { background: rgba(255,255,255,.15); }

/* Old admin quick actions */
.admin-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 35px; }
.admin-quick-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}
.admin-quick-card:nth-child(4n+1) { background: var(--rose-soft); }
.admin-quick-card:nth-child(4n+2) { background: var(--gold-soft); }
.admin-quick-card:nth-child(4n+3) { background: var(--lavender-soft); }
.admin-quick-card:nth-child(4n+4) { background: var(--sage-soft); }
.admin-quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.admin-quick-icon { width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 6px 16px rgba(41,35,58,.07); }
.admin-quick-card strong { display: block; margin-bottom: 3px; }
.admin-quick-card small { display: block; color: var(--ink-soft); }

/* Premium dashboard */
.premium-admin-dashboard {
    min-height: 100vh;
    padding: 55px 22px 90px;
    background:
        radial-gradient(circle at 5% 0%, rgba(244,196,204,.30), transparent 22%),
        radial-gradient(circle at 98% 4%, rgba(185,217,245,.28), transparent 24%),
        radial-gradient(circle at 70% 65%, rgba(205,191,236,.18), transparent 24%),
        linear-gradient(180deg, #fffaf7 0%, #f9f7ff 48%, #ffffff 100%);
}
.premium-admin-dashboard > .container { max-width: 1180px; margin: 0 auto; }
.premium-dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.premium-dashboard-header h1 { font-family: 'Playfair Display', serif; margin: 5px 0 8px; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1; }
.premium-dashboard-header > div:first-child > p:last-child { margin: 0; color: var(--ink-soft); }

/* Countdown */
.shower-countdown-card {
    min-width: 230px;
    padding: 21px 25px;
    color: #fff;
    border-radius: 22px;
    background:
        radial-gradient(circle at 85% 15%, rgba(255,255,255,.20), transparent 25%),
        linear-gradient(135deg, #6a4d89, #b85f78 58%, #d7886e);
    box-shadow: 0 18px 44px rgba(116,91,166,.25);
}
.countdown-label { display: block; margin-bottom: 6px; font-size: .65rem; letter-spacing: .15em; font-weight: 800; color: #ffe7ed; }
.countdown-number { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.countdown-number small { font-size: .9rem; font-weight: 500; opacity: .78; }
.countdown-date { display: block; margin-top: 8px; font-size: .78rem; opacity: .78; }

/* Premium stat cards */
.premium-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; }
.premium-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 122px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.premium-stat-card:nth-child(4n+1) { background: linear-gradient(135deg, var(--rose-soft), #fff); }
.premium-stat-card:nth-child(4n+2) { background: linear-gradient(135deg, var(--sky-soft), #fff); }
.premium-stat-card:nth-child(4n+3) { background: linear-gradient(135deg, var(--gold-soft), #fff); }
.premium-stat-card:nth-child(4n+4) { background: linear-gradient(135deg, var(--lavender-soft), #fff); }
a.premium-stat-card:hover { transform: translateY(-5px); border-color: rgba(116,91,166,.16); box-shadow: var(--shadow-md); }
.premium-stat-icon {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 16px;
    font-size: 1.4rem;
    background: rgba(255,255,255,.82);
    box-shadow: 0 7px 18px rgba(41,35,58,.07);
}
.premium-stat-content > span { display: block; margin-bottom: 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--ink-soft); }
.premium-stat-content strong { display: block; margin-bottom: 4px; font-size: 2rem; line-height: 1; }
.premium-stat-content small { display: block; font-size: .76rem; color: var(--ink-soft); }
.dashboard-notification {
    position: absolute;
    top: 12px;
    right: 12px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #c94d65, #e1746d);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(201,77,101,.28);
}

/* Premium panels */
.dashboard-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.dashboard-panel { padding: 28px; background: rgba(255,255,255,.94); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-md); }
.attendance-panel { background: radial-gradient(circle at 100% 0%, rgba(183,211,189,.28), transparent 25%), rgba(255,255,255,.96); }
.dashboard-large-panel { margin-bottom: 20px; }
.dashboard-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.dashboard-panel-header h2 { margin: 4px 0 0; font-size: 1.55rem; }

/* Attendance */
.attendance-percentage { font-size: 2.35rem; line-height: 1; color: var(--sage-dark); }
.attendance-progress { height: 11px; margin-bottom: 28px; overflow: hidden; background: #eef1ef; border-radius: 100px; }
.attendance-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f7f5d, #73b985, #9acfa5); box-shadow: 0 0 16px rgba(79,127,93,.18); transition: width .5s ease; }
.attendance-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px; }
.attendance-breakdown > div { display: flex; align-items: center; gap: 10px; }
.attendance-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.attendance-dot-yes { background: var(--sage-dark); }
.attendance-dot-no { background: #d06a75; }
.attendance-dot-guests { background: var(--gold-dark); }
.attendance-breakdown strong { display: block; font-size: 1.15rem; }
.attendance-breakdown small { display: block; font-size: .72rem; color: var(--ink-soft); }
.dashboard-text-link { color: var(--lavender-dark); font-size: .85rem; font-weight: 800; }
.dashboard-text-link:hover { text-decoration: underline; }

/* Premium quick actions */
.premium-quick-actions { display: grid; gap: 8px; }
.premium-quick-actions > a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 14px;
    transition: background .15s ease, transform .15s ease;
}
.premium-quick-actions > a:nth-child(6n+1):hover { background: var(--rose-soft); }
.premium-quick-actions > a:nth-child(6n+2):hover { background: var(--gold-soft); }
.premium-quick-actions > a:nth-child(6n+3):hover { background: var(--lavender-soft); }
.premium-quick-actions > a:nth-child(6n+4):hover { background: var(--sage-soft); }
.premium-quick-actions > a:nth-child(6n+5):hover { background: var(--sky-soft); }
.premium-quick-actions > a:nth-child(6n+6):hover { background: var(--peach-soft); }
.premium-quick-actions > a:hover { transform: translateX(3px); }
.premium-quick-actions > a > span:first-child {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--rose-soft), var(--lavender-soft));
}
.premium-quick-actions strong { display: block; font-size: .88rem; }
.premium-quick-actions small { display: block; margin-top: 2px; font-size: .71rem; color: var(--ink-soft); }
.premium-quick-actions b { font-weight: 700; color: var(--lavender-dark); }

/* Activity */
.activity-feed { display: grid; }
.activity-item { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; padding: 17px 0; border-bottom: 1px solid rgba(41,35,58,.07); }
.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { padding-bottom: 0; border-bottom: 0; }
.activity-icon { width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 13px; background: linear-gradient(135deg, var(--rose-soft), var(--sky-soft)); box-shadow: 0 6px 14px rgba(41,35,58,.05); }
.activity-content strong { display: block; margin-bottom: 3px; font-size: .9rem; }
.activity-content p { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.activity-item time { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.admin-empty-icon { margin-bottom: 10px; font-size: 2rem; }

/* Footer */
.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 48px 7vw;
    background: linear-gradient(135deg, #2c2538, #4f3150 55%, #66404b);
    color: rgba(255,255,255,.75);
    font-size: .9rem;
}
.footer-brand { color: #fff; font-family: 'Playfair Display', serif; font-size: 1.3rem; margin: 0 0 6px; }

/* Responsive */
@media (max-width: 1000px) {
    .premium-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-stats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 850px) {
    .site-nav { height: 68px; padding-inline: 20px; }
    .main-navigation { display: none; }
    .mobile-menu-button, .nav-toggle { display: block; }
    .hero { grid-template-columns: 1fr; padding: 60px 24px; }
    .hero-art { min-height: auto; }
    .photo-frame { height: 430px; }
    .intro-grid, .baby-teaser { grid-template-columns: 1fr; }
    .timeline-section { grid-template-columns: 1fr; }
    .baby-symbol { display: none; }
    .event-details { grid-template-columns: 1fr; }
    .baby-grid, .gallery-grid { grid-template-columns: 1fr; }
    .rsvp-form { grid-template-columns: 1fr; padding: 26px; }
    .field.full, .full-submit { grid-column: auto; }
    .site-footer { flex-direction: column; }
    .admin-navigation-inner { align-items: flex-start; flex-wrap: wrap; padding-top: 18px; padding-bottom: 18px; }
    .admin-nav-links { order: 3; width: 100%; overflow-x: auto; gap: 20px; }
    .admin-nav-links a { white-space: nowrap; padding: 10px 0; }
    .admin-nav-links a.active::after { bottom: 3px; }
    .admin-navigation-inner form { margin-left: auto; }
}
@media (max-width: 800px) {
    .wishes-grid, .registry-grid { grid-template-columns: 1fr; }
    .feature-form-card { padding: 24px; }
    .premium-dashboard-header { align-items: flex-start; flex-direction: column; }
    .shower-countdown-card { width: 100%; box-sizing: border-box; }
    .dashboard-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 750px) {
    .baby-feature-grid { grid-template-columns: 1fr; }
    .baby-feature-card { padding: 25px; }
    .baby-gallery-teaser .container { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 650px) {
    .admin-header, .admin-section-heading { flex-direction: column; align-items: stretch; }
    .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-section-card, .admin-login-card { padding: 22px; }
    .admin-quick-actions { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .premium-admin-dashboard { padding: 35px 15px 70px; }
    .premium-stat-grid { grid-template-columns: 1fr; }
    .premium-stat-card { min-height: auto; }
    .dashboard-panel { padding: 21px; }
    .attendance-breakdown { grid-template-columns: 1fr; }
    .dashboard-panel-header { align-items: flex-start; }
    .activity-item { grid-template-columns: auto 1fr; }
    .activity-item time { grid-column: 2; margin-top: -7px; }
    .baby-hub-hero { padding-top: 85px; }
    .feature-form-card { border-radius: 20px; }
}
/* =========================================================
   ADMIN REGISTRY MANAGER
   ========================================================= */

.registry-admin-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid rgba(41,35,58,.08);
}

.registry-admin-item:first-child {
    padding-top: 0;
}

.registry-admin-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.registry-admin-icon {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--rose-soft), var(--gold-soft));
    font-size: 1.5rem;
}

.registry-admin-info h3 {
    margin: 0;
}

.registry-admin-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.registry-admin-info p {
    margin: 7px 0;
    color: var(--ink-soft);
}

.registry-admin-url {
    display: block;
    max-width: 700px;
    margin-bottom: 6px;
    color: var(--lavender-dark);
    word-break: break-all;
    font-size: .86rem;
}

.registry-admin-info small {
    color: var(--ink-soft);
}

.registry-admin-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-content-form {
    max-width: 780px;
    display: grid;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.admin-checkbox input {
    width: auto;
    accent-color: var(--rose-dark);
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
}

@media (max-width: 700px) {

    .registry-admin-item {
        grid-template-columns: auto 1fr;
    }

    .registry-admin-actions {
        grid-column: 1 / -1;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   REGISTRY V2
   ========================================================= */

.registry-card {
    position: relative;
}

.registry-card-purchased {
    opacity: .78;
}

.registry-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

.registry-public-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,.8);
    font-size: 1.5rem;
    box-shadow: 0 7px 18px rgba(41,35,58,.07);
}

.registry-status {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
}

.registry-status.available {
    background: var(--success-soft);
    color: var(--success);
}

.registry-status.purchased {
    background: var(--lavender-soft);
    color: var(--lavender-dark);
}

.registry-price {
    margin: 16px 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--rose-dark);
}

.registry-delivery-box {
    margin: 20px 0;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(41,35,58,.08);
    font-size: .88rem;
}

.registry-delivery-box strong {
    display: block;
    margin-bottom: 7px;
    color: var(--lavender-dark);
}

.registry-public-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.registry-purchased-message {
    margin-top: 22px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.66);
}

.registry-purchased-message p {
    margin: 5px 0 0;
}

.registry-admin-price {
    margin: 8px 0;
    font-weight: 800;
    color: var(--rose-dark);
}

.registry-purchase-details {
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    background: var(--lavender-soft);
    font-size: .84rem;
    line-height: 1.7;
}

.registry-purchase-details strong {
    color: var(--lavender-dark);
}

.site-logo-image {
    display: block;
    max-width: 180px;
    max-height: 52px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 600px) {

    .site-logo-image {
        max-width: 145px;
        max-height: 44px;
    }

}

/* =========================================================
   BABY SHOWER INVITATION
========================================================= */

.baby-invitation-hero {
    position: relative;
    overflow: hidden;
    padding: 105px 20px 85px;
    text-align: center;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(244, 196, 204, .65),
            transparent 26%
        ),
        radial-gradient(
            circle at 95% 12%,
            rgba(185, 217, 245, .58),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 95%,
            rgba(205, 191, 236, .46),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fff8f4 0%,
            #ffffff 100%
        );
}


.baby-invitation-hero .container {
    position: relative;
    z-index: 2;

    max-width: 940px;
    margin: auto;
}


.baby-invitation-hero h1 {
    max-width: 850px;

    margin: 12px auto 25px;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height: .98;
}


.invitation-heart {
    margin: 10px 0;

    font-family:
        'Playfair Display',
        serif;

    font-size: 3.5rem;

    color: var(--rose-dark);
}


.invitation-small-title {
    margin: 0;

    font-size: .76rem;

    font-weight: 800;

    letter-spacing: .25em;

    color: var(--lavender-dark);
}


.baby-invitation-decor {
    position: absolute;

    opacity: .24;

    pointer-events: none;
}


.baby-decor-one {
    left: 7%;
    top: 20%;

    font-size: 3rem;

    transform: rotate(-15deg);
}


.baby-decor-two {
    right: 8%;
    top: 34%;

    font-size: 5rem;

    transform: rotate(12deg);
}


.baby-decor-three {
    left: 14%;
    bottom: 12%;

    font-size: 2.3rem;

    transform: rotate(15deg);
}


/* Invitation Details */

.baby-invitation-details {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

    margin: 45px auto 25px;
}


.invitation-detail-card {
    padding: 24px 18px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid
        rgba(41,35,58,.08);

    border-radius: 20px;

    box-shadow:
        0 12px 35px
        rgba(41,35,58,.06);
}


.invitation-detail-card:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            #fff
        );
}


.invitation-detail-card:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            var(--sky-soft),
            #fff
        );
}


.invitation-detail-card:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            var(--sage-soft),
            #fff
        );
}


.invitation-detail-icon {
    display: block;

    margin-bottom: 10px;

    font-size: 1.5rem;
}


.invitation-detail-card small {
    display: block;

    margin-bottom: 4px;

    font-size: .68rem;

    font-weight: 800;

    letter-spacing: .15em;

    color: var(--ink-soft);
}


.invitation-detail-card strong {
    display: block;

    font-size: .98rem;
}


/* Address */

.invitation-address {
    max-width: 700px;

    margin: 22px auto;

    padding: 18px 22px;

    display: flex;

    justify-content: center;

    gap: 14px;

    text-align: left;

    border-radius: 18px;

    background:
        var(--lavender-soft);

    border:
        1px solid
        rgba(116,91,166,.10);
}


.invitation-address > span {
    font-size: 1.5rem;
}


.invitation-address small {
    display: block;

    margin-bottom: 4px;

    font-size: .66rem;

    font-weight: 800;

    letter-spacing: .14em;

    color: var(--lavender-dark);
}


.invitation-address p {
    margin: 0;

    color: var(--ink-soft);
}


/* Dress Code / RSVP */

.invitation-extra-details {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin: 25px auto;
}


.invitation-extra-details > div {
    min-width: 210px;

    padding: 16px 20px;

    border-radius: 16px;

    background:
        rgba(255,255,255,.70);

    border:
        1px solid
        rgba(41,35,58,.08);
}


.invitation-extra-details span {
    display: block;

    margin-bottom: 5px;

    font-size: 1.25rem;
}


.invitation-extra-details small {
    display: block;

    font-size: .65rem;

    font-weight: 800;

    letter-spacing: .14em;

    color: var(--ink-soft);
}


.invitation-extra-details strong {
    display: block;

    margin-top: 3px;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.baby-countdown-section {
    padding: 75px 20px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #30243f,
            #583653 55%,
            #764a57
        );

    color: #fff;
}


.baby-countdown-section h2 {
    margin: 5px 0 35px;

    color: #fff;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            2rem,
            5vw,
            3.5rem
        );
}


.baby-countdown-section .eyebrow {
    color: #f7cbd4;
}


.baby-countdown {
    max-width: 760px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.countdown-box {
    padding: 24px 12px;

    background:
        rgba(255,255,255,.09);

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 18px;

    backdrop-filter: blur(10px);
}


.countdown-box strong {
    display: block;

    font-size:
        clamp(
            2rem,
            5vw,
            3.2rem
        );

    line-height: 1;

    color: #fff;
}


.countdown-box span {
    display: block;

    margin-top: 7px;

    font-size: .72rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.65);
}


.countdown-complete {
    grid-column: 1 / -1;

    padding: 30px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 2rem;
}


/* =========================================================
   BABY COMING SOON
========================================================= */

.baby-coming-soon-section {
    padding: 80px 20px;
}


.baby-coming-soon-section .container {
    max-width: 1000px;
}


.baby-coming-soon-card {
    display: flex;

    align-items: center;

    gap: 28px;

    padding: 40px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--sky-soft),
            var(--lavender-soft)
        );

    border:
        1px solid
        rgba(41,35,58,.06);

    box-shadow:
        var(--shadow-md);
}


.baby-coming-icon {
    width: 75px;
    height: 75px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 22px;

    background:
        rgba(255,255,255,.75);

    font-size: 2rem;

    box-shadow:
        0 10px 25px
        rgba(41,35,58,.08);
}


.baby-coming-soon-card h2 {
    margin: 4px 0 8px;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            2rem,
            5vw,
            3.4rem
        );
}


.baby-coming-soon-card p:last-child {
    margin-bottom: 0;

    color: var(--ink-soft);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 750px) {

    .baby-invitation-details {
        grid-template-columns: 1fr;
    }


    .baby-countdown {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .baby-coming-soon-card {
        align-items: flex-start;
        flex-direction: column;

        padding: 28px;
    }


    .baby-invitation-hero {
        padding-top: 85px;
    }

}

/* =========================================================
   ADMIN WEBSITE SETTINGS
   ========================================================= */

.settings-form {
    display: grid;
    gap: 28px;
}

.settings-card {
    position: relative;
    overflow: hidden;
    padding: 34px;
    border: 1px solid var(--border);
    border-radius: 26px;
    background: rgba(255, 255, 255, .94);
    box-shadow: var(--shadow-md);
}

.settings-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--rose),
        var(--coral),
        var(--gold),
        var(--sage),
        var(--sky),
        var(--lavender)
    );
}

.settings-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    margin-bottom: 30px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(41, 35, 58, .07);
}

.settings-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--lavender-soft)
        );

    box-shadow:
        0 8px 20px
        rgba(41, 35, 58, .07);

    font-size: 1.45rem;
}

.settings-card-heading h2 {
    margin: 1px 0 5px;
    font-family: 'Playfair Display', serif;
    font-size: 1.65rem;
}

.settings-card-heading p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .9rem;
}

.settings-fields {
    display: grid;
    gap: 22px;
}

.settings-fields .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.settings-fields textarea {
    min-height: 110px;
}

.form-help {
    display: block;
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: .76rem;
    line-height: 1.5;
}


/* =========================================================
   SETTINGS CURRENT LOGO / FAVICON
   ========================================================= */

.settings-image-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 190px;
    min-height: 90px;

    margin-bottom: 12px;
    padding: 15px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--sky-soft)
        );

    border: 1px solid var(--border);
}

.settings-image-preview img {
    max-width: 190px;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.settings-favicon-preview {
    width: 80px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    border-radius: 18px;

    background: var(--lavender-soft);

    border: 1px solid var(--border);
}

.settings-favicon-preview img {
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
}


/* =========================================================
   SETTINGS FILE INPUT
   ========================================================= */

.settings-form input[type="file"] {
    padding: 9px;
    background: #fff;
    cursor: pointer;
}

.settings-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 16px;

    border: 0;
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--lavender-soft)
        );

    color: var(--ink);

    font-weight: 700;
    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease;
}

.settings-form input[type="file"]::file-selector-button:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            135deg,
            #ffe2e8,
            #e8ddff
        );
}


/* =========================================================
   INVITATION SETTINGS CARD
   ========================================================= */

.invitation-settings-card {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(205, 191, 236, .17),
            transparent 27%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(244, 196, 204, .15),
            transparent 28%
        ),
        rgba(255, 255, 255, .96);
}

.invitation-settings-card::before {
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--rose-dark),
            var(--coral),
            var(--gold),
            var(--lavender-dark)
        );
}


/* =========================================================
   INVITATION INTRO
   ========================================================= */

.invitation-settings-intro {
    display: flex;
    align-items: center;
    gap: 18px;

    padding: 22px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--lavender-soft)
        );

    border:
        1px solid
        rgba(181, 95, 115, .10);
}

.invitation-settings-intro-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: rgba(255, 255, 255, .82);

    font-size: 1.5rem;

    box-shadow:
        0 8px 20px
        rgba(41, 35, 58, .06);
}

.invitation-settings-intro strong {
    display: block;
    margin-bottom: 4px;
    font-size: 1rem;
}

.invitation-settings-intro p {
    max-width: 700px;
    margin: 0;

    color: var(--ink-soft);

    font-size: .86rem;
    line-height: 1.6;
}


/* =========================================================
   INVITATION UPLOAD BLOCK
   ========================================================= */

.invitation-upload-block {
    position: relative;

    padding: 28px;

    border-radius: 22px;

    background:
        rgba(255, 255, 255, .82);

    border:
        1px solid
        rgba(41, 35, 58, .08);

    box-shadow:
        0 10px 28px
        rgba(41, 35, 58, .045);
}

.invitation-upload-block:nth-of-type(2) {
    background:
        linear-gradient(
            135deg,
            rgba(255, 240, 243, .70),
            rgba(255, 255, 255, .95)
        );
}

.invitation-upload-block:nth-of-type(3) {
    background:
        linear-gradient(
            135deg,
            rgba(237, 247, 255, .70),
            rgba(255, 255, 255, .95)
        );
}

.invitation-upload-block:nth-of-type(4) {
    background:
        linear-gradient(
            135deg,
            rgba(242, 237, 255, .70),
            rgba(255, 255, 255, .95)
        );
}

.invitation-upload-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.invitation-upload-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 36px;
    height: 27px;

    margin-bottom: 9px;
    padding: 0 9px;

    border-radius: 999px;

    background: var(--ink);

    color: #fff;

    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .10em;
}

.invitation-upload-heading h3 {
    margin: 0 0 6px;

    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
}

.invitation-upload-heading p {
    max-width: 650px;

    margin: 0;

    color: var(--ink-soft);

    font-size: .84rem;
    line-height: 1.55;
}


/* =========================================================
   CURRENT INVITATION IMAGE
   ========================================================= */

.invitation-current-image {
    position: relative;
    overflow: hidden;

    margin-bottom: 20px;

    border-radius: 20px;

    background: #f1edf2;

    border:
        1px solid
        rgba(41, 35, 58, .08);

    box-shadow:
        0 12px 30px
        rgba(41, 35, 58, .08);
}

.invitation-current-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.invitation-current-image-large {
    max-width: 640px;
    height: 350px;
}

.invitation-image-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;

    padding: 7px 11px;

    border-radius: 999px;

    background:
        rgba(41, 35, 58, .82);

    color: #fff;

    font-size: .67rem;
    font-weight: 800;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow:
        0 6px 18px
        rgba(41, 35, 58, .18);
}


/* =========================================================
   EMPTY IMAGE PREVIEW
   ========================================================= */

.invitation-empty-preview {
    min-height: 230px;
    max-width: 640px;

    margin-bottom: 20px;
    padding: 30px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    border-radius: 20px;

    border:
        2px dashed
        rgba(181, 95, 115, .23);

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(255, 255, 255, .80),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--lavender-soft)
        );
}

.invitation-empty-preview > span {
    display: block;

    margin-bottom: 10px;

    font-size: 2.3rem;
}

.invitation-empty-preview strong {
    display: block;

    margin-bottom: 4px;

    font-size: .95rem;
}

.invitation-empty-preview small {
    color: var(--ink-soft);
    font-size: .76rem;
}


/* =========================================================
   ULTRASOUND ADMIN GRID
   ========================================================= */

.invitation-ultrasound-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-bottom: 10px;
}

.invitation-ultrasound-item {
    padding: 20px;

    border-radius: 20px;

    background:
        rgba(255, 255, 255, .74);

    border:
        1px solid
        rgba(41, 35, 58, .07);
}

.invitation-ultrasound-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;
}

.invitation-ultrasound-title span {
    font-size: 1.15rem;
}

.invitation-ultrasound-title strong {
    font-size: .9rem;
}

.invitation-ultrasound-preview {
    width: 100%;
    aspect-ratio: 16 / 10;

    margin-bottom: 16px;

    background: #111;
}

.invitation-ultrasound-preview img {
    object-fit: contain;
    background: #000;
}

.invitation-empty-ultrasound {
    min-height: 200px;
    width: 100%;

    margin-bottom: 16px;

    border-color:
        rgba(116, 91, 166, .20);

    background:
        linear-gradient(
            135deg,
            #f6f3fa,
            var(--lavender-soft)
        );
}


/* =========================================================
   SETTINGS SAVE BAR
   ========================================================= */

.settings-save-bar {
    position: sticky;
    bottom: 18px;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 18px 22px;

    border-radius: 20px;

    background:
        rgba(45, 36, 64, .96);

    color: #fff;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    box-shadow:
        0 20px 50px
        rgba(41, 35, 58, .24);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.settings-save-bar strong {
    display: block;

    margin-bottom: 2px;

    color: #fff;

    font-size: .93rem;
}

.settings-save-bar small {
    display: block;

    color:
        rgba(255, 255, 255, .66);

    font-size: .74rem;
}

.settings-save-bar .button-primary {
    flex-shrink: 0;

    background:
        linear-gradient(
            135deg,
            #d46f86,
            #bb5e77
        );

    box-shadow:
        0 10px 25px
        rgba(181, 95, 115, .30);
}


/* =========================================================
   SETTINGS RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

    .settings-card {
        padding: 26px;
    }

    .settings-fields .form-row {
        grid-template-columns: 1fr;
    }

    .invitation-ultrasound-grid {
        grid-template-columns: 1fr;
    }

    .invitation-current-image-large {
        height: 310px;
    }

}


@media (max-width: 600px) {

    .settings-card {
        padding: 21px;
        border-radius: 21px;
    }

    .settings-card-heading {
        gap: 13px;
    }

    .settings-icon {
        width: 45px;
        height: 45px;
        border-radius: 14px;
        font-size: 1.25rem;
    }

    .settings-card-heading h2 {
        font-size: 1.4rem;
    }

    .invitation-settings-intro {
        align-items: flex-start;
        padding: 18px;
    }

    .invitation-settings-intro-icon {
        width: 44px;
        height: 44px;
    }

    .invitation-upload-block {
        padding: 20px;
    }

    .invitation-current-image-large {
        height: 240px;
    }

    .invitation-empty-preview {
        min-height: 190px;
    }

    .invitation-empty-ultrasound {
        min-height: 180px;
    }

    .settings-save-bar {
        bottom: 10px;

        align-items: stretch;
        flex-direction: column;

        padding: 17px;

        border-radius: 18px;
    }

    .settings-save-bar .button-primary {
        width: 100%;
    }

}

/* =========================================================
   INVITATION PAGE V2
   Romantic Editorial / Polaroid Baby Shower Design
   ========================================================= */

.invitation-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(244, 196, 204, .28), transparent 25%),
        radial-gradient(circle at 92% 16%, rgba(185, 217, 245, .24), transparent 24%),
        radial-gradient(circle at 12% 70%, rgba(183, 211, 189, .18), transparent 26%),
        radial-gradient(circle at 88% 78%, rgba(205, 191, 236, .22), transparent 27%),
        linear-gradient(180deg, #fffaf6 0%, #fff 45%, #fff9f7 100%);
}


/* =========================================================
   MAIN INVITATION SHELL
   ========================================================= */

.invitation-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   TOP / INTRO
   ========================================================= */

.invitation-top {
    position: relative;
    padding: 105px 20px 70px;
    text-align: center;
}

.invitation-top::before {
    content: "♡";
    position: absolute;
    top: 40px;
    left: 7%;
    font-family: 'Playfair Display', serif;
    font-size: 7rem;
    line-height: 1;
    color: rgba(181, 95, 115, .07);
    transform: rotate(-12deg);
}

.invitation-top::after {
    content: "✦";
    position: absolute;
    right: 9%;
    top: 100px;
    font-size: 3rem;
    color: rgba(116, 91, 166, .11);
    transform: rotate(15deg);
}

.invitation-top .eyebrow {
    margin-bottom: 15px;
}

.invitation-top h1 {
    max-width: 900px;
    margin: 0 auto 25px;

    font-family: 'Playfair Display', serif;
    font-size: clamp(3.6rem, 8vw, 7.2rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: .94;
}

.invitation-top h1 em {
    color: var(--rose-dark);
    font-weight: 500;
}

.invitation-top > p,
.invitation-top .invitation-intro {
    max-width: 680px;
    margin: 0 auto;
    color: var(--ink-soft);
    font-size: 1.08rem;
    line-height: 1.85;
}


/* =========================================================
   MEMORY / PHOTO COLLAGE
   ========================================================= */

.invitation-memory-collage {
    position: relative;
    width: min(1020px, calc(100% - 30px));
    min-height: 720px;
    margin: 20px auto 110px;
}


/* Main couple photo */

.invitation-photo-card {
    position: absolute;
    overflow: hidden;

    background: #fff;

    border: 10px solid #fff;
    border-bottom-width: 48px;

    box-shadow:
        0 25px 70px rgba(41, 35, 58, .16);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.invitation-photo-card:hover {
    z-index: 10;
    box-shadow:
        0 32px 80px rgba(41, 35, 58, .21);
}

.invitation-photo-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* Main photo */

.invitation-photo-main {
    z-index: 2;

    left: 50%;
    top: 25px;

    width: min(590px, 65vw);
    height: 650px;

    transform:
        translateX(-50%)
        rotate(-1deg);

    border-radius: 4px;
}

.invitation-photo-main:hover {
    transform:
        translateX(-50%)
        rotate(0deg)
        scale(1.015);
}


/* Ultrasound left */

.invitation-photo-ultrasound-one {
    z-index: 4;

    left: 1%;
    top: 120px;

    width: 270px;
    height: 310px;

    transform: rotate(-9deg);

    border-bottom-width: 58px;
}

.invitation-photo-ultrasound-one:hover {
    transform:
        rotate(-5deg)
        scale(1.035);
}


/* Ultrasound right */

.invitation-photo-ultrasound-two {
    z-index: 5;

    right: 1%;
    bottom: 45px;

    width: 270px;
    height: 310px;

    transform: rotate(8deg);

    border-bottom-width: 58px;
}

.invitation-photo-ultrasound-two:hover {
    transform:
        rotate(4deg)
        scale(1.035);
}


/* Polaroid caption */

.invitation-photo-card::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;

    text-align: center;

    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    font-style: italic;

    color: #7d7180;
}

.invitation-photo-main::after {
    content: "our greatest adventure ♡";
}

.invitation-photo-ultrasound-one::after {
    content: "hello, little love";
}

.invitation-photo-ultrasound-two::after {
    content: "already so loved";
}


/* Decorative tape */

.invitation-photo-ultrasound-one::before,
.invitation-photo-ultrasound-two::before {
    content: "";

    position: absolute;
    z-index: 8;

    width: 80px;
    height: 24px;

    top: -7px;
    left: 50%;

    transform:
        translateX(-50%)
        rotate(-3deg);

    background: rgba(244, 196, 204, .65);

    box-shadow:
        0 2px 5px
        rgba(41,35,58,.05);
}

.invitation-photo-ultrasound-two::before {
    background: rgba(205, 191, 236, .65);

    transform:
        translateX(-50%)
        rotate(4deg);
}


/* =========================================================
   EVENT DETAILS
   ========================================================= */

.invitation-event-section {
    position: relative;

    padding: 100px 20px;

    background:
        radial-gradient(circle at 0% 50%, rgba(244,196,204,.22), transparent 25%),
        radial-gradient(circle at 100% 40%, rgba(185,217,245,.23), transparent 25%),
        #fff;
}

.invitation-event-section .invitation-shell {
    max-width: 1040px;
}

.invitation-section-heading {
    max-width: 700px;
    margin: 0 auto 50px;
    text-align: center;
}

.invitation-section-heading h2 {
    margin: 8px 0 15px;

    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
}

.invitation-section-heading p {
    color: var(--ink-soft);
    line-height: 1.8;
}


/* Event cards */

.invitation-event-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 18px;
}

.invitation-event-card {
    position: relative;
    overflow: hidden;

    min-height: 220px;

    padding: 32px 25px;

    text-align: center;

    border: 1px solid var(--border);
    border-radius: 26px;

    box-shadow: var(--shadow-sm);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.invitation-event-card:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            var(--rose-soft),
            #fff
        );
}

.invitation-event-card:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            var(--sky-soft),
            #fff
        );
}

.invitation-event-card:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            var(--sage-soft),
            #fff
        );
}

.invitation-event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.invitation-event-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 20px;

    border-radius: 18px;

    background: rgba(255,255,255,.85);

    box-shadow:
        0 8px 22px
        rgba(41,35,58,.07);

    font-size: 1.55rem;
}

.invitation-event-card small {
    display: block;

    margin-bottom: 8px;

    color: var(--rose-dark);

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;

    text-transform: uppercase;
}

.invitation-event-card strong {
    display: block;

    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    line-height: 1.35;
}

.invitation-event-card p {
    margin: 8px 0 0;

    color: var(--ink-soft);

    font-size: .86rem;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.invitation-address-card {
    max-width: 760px;

    margin: 28px auto 0;
    padding: 25px 28px;

    display: flex;
    align-items: center;

    gap: 18px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            var(--lavender-soft),
            #fff
        );

    border:
        1px solid
        rgba(116,91,166,.12);

    box-shadow: var(--shadow-sm);
}

.invitation-address-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    background: #fff;

    font-size: 1.4rem;
}

.invitation-address-card small {
    display: block;

    margin-bottom: 4px;

    color: var(--lavender-dark);

    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.invitation-address-card p {
    margin: 0;
    color: var(--ink-soft);
}


/* =========================================================
   EVENT EXTRAS
   ========================================================= */

.invitation-extra-grid {
    max-width: 760px;

    margin: 18px auto 0;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.invitation-extra-card {
    padding: 20px;

    text-align: center;

    border-radius: 18px;

    border: 1px solid var(--border);

    background: rgba(255,255,255,.8);
}

.invitation-extra-card span {
    display: block;
    margin-bottom: 5px;
    font-size: 1.3rem;
}

.invitation-extra-card small {
    display: block;

    color: var(--ink-soft);

    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .13em;

    text-transform: uppercase;
}

.invitation-extra-card strong {
    display: block;
    margin-top: 4px;
}


/* Buttons */

.invitation-event-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;
}


/* =========================================================
   COUNTDOWN V2
   ========================================================= */

.invitation-countdown-section {
    position: relative;
    overflow: hidden;

    padding: 95px 20px;

    text-align: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(244,196,204,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(205,191,236,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #2c2338,
            #53344e 50%,
            #704755
        );
}

.invitation-countdown-section::before {
    content: "♡";

    position: absolute;

    left: 4%;
    bottom: -35px;

    font-family: 'Playfair Display', serif;

    font-size: 13rem;

    color:
        rgba(255,255,255,.035);
}

.invitation-countdown-section .eyebrow {
    color: #f8cdd5;
}

.invitation-countdown-section h2 {
    margin: 7px 0 15px;

    color: #fff;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            2.6rem,
            6vw,
            4.7rem
        );
}

.invitation-countdown-intro {
    max-width: 590px;

    margin: 0 auto 38px;

    color:
        rgba(255,255,255,.70);
}


/* Countdown boxes */

.invitation-countdown {
    max-width: 780px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 13px;
}

.invitation-countdown-box {
    padding: 28px 12px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid
        rgba(255,255,255,.11);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.invitation-countdown-box strong {
    display: block;

    color: #fff;

    font-size:
        clamp(
            2rem,
            5vw,
            3.4rem
        );

    line-height: 1;
}

.invitation-countdown-box span {
    display: block;

    margin-top: 9px;

    color:
        rgba(255,255,255,.62);

    font-size: .67rem;
    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;
}


/* Also support old countdown class inside V2 */

.invitation-countdown-section .baby-countdown {
    max-width: 780px;
}

.invitation-countdown-section .countdown-box {
    background:
        rgba(255,255,255,.08);
}


/* =========================================================
   LITTLE MIRACLE / ULTRASOUND SECTION
   ========================================================= */

.invitation-little-miracle {
    position: relative;

    padding: 110px 20px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(185,217,245,.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(244,196,204,.24),
            transparent 28%
        ),
        #fffaf7;
}

.invitation-little-miracle .invitation-shell {
    max-width: 1050px;
}

.invitation-keepsake-card {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    align-items: center;

    gap: 65px;
}

.invitation-keepsake-copy .eyebrow {
    margin-bottom: 8px;
}

.invitation-keepsake-copy h2 {
    margin: 0 0 20px;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            2.8rem,
            6vw,
            5rem
        );

    line-height: 1;
}

.invitation-keepsake-copy > p {
    color: var(--ink-soft);
    line-height: 1.85;
}


/* Ultrasound stack */

.invitation-ultrasound-stack {
    position: relative;

    min-height: 500px;
}

.invitation-ultrasound-photo {
    position: absolute;

    overflow: hidden;

    width: 330px;
    height: 380px;

    padding: 10px 10px 52px;

    background: #fff;

    box-shadow:
        0 25px 60px
        rgba(41,35,58,.16);
}

.invitation-ultrasound-photo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #111;
}

.invitation-ultrasound-photo:first-child {
    left: 2%;
    top: 25px;

    transform: rotate(-8deg);
}

.invitation-ultrasound-photo:last-child {
    right: 0;
    bottom: 15px;

    transform: rotate(8deg);
}

.invitation-ultrasound-photo::after {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 15px;

    text-align: center;

    font-family:
        'Playfair Display',
        serif;

    font-style: italic;

    color: #766a79;
}

.invitation-ultrasound-photo:first-child::after {
    content: "tiny beginnings ♡";
}

.invitation-ultrasound-photo:last-child::after {
    content: "our little miracle";
}


/* =========================================================
   BABY NOTE / DUE DATE
   ========================================================= */

.invitation-baby-note {
    max-width: 780px;

    margin: 65px auto 0;
    padding: 35px;

    text-align: center;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--sky-soft),
            var(--lavender-soft)
        );

    border:
        1px solid
        rgba(41,35,58,.06);

    box-shadow: var(--shadow-md);
}

.invitation-baby-note-icon {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 18px;

    border-radius: 22px;

    background:
        rgba(255,255,255,.80);

    font-size: 1.8rem;

    box-shadow:
        0 9px 22px
        rgba(41,35,58,.07);
}

.invitation-baby-note h3 {
    margin: 0 0 10px;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            2rem,
            5vw,
            3rem
        );
}

.invitation-baby-note p {
    max-width: 600px;

    margin: 0 auto;

    color: var(--ink-soft);

    line-height: 1.75;
}


/* =========================================================
   CLOSING PHOTO
   ========================================================= */

.invitation-closing {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #33283a;
}

.invitation-closing-image {
    position: absolute;
    inset: 0;
}

.invitation-closing-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.invitation-closing-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(28,22,34,.05) 20%,
            rgba(28,22,34,.32) 60%,
            rgba(28,22,34,.83) 100%
        );
}

.invitation-closing-content {
    position: relative;
    z-index: 2;

    width: min(900px, calc(100% - 40px));

    margin: 0 auto;

    padding: 80px 0;

    text-align: center;

    color: #fff;
}

.invitation-closing-content .eyebrow {
    color: #f5c8d2;
}

.invitation-closing-content h2 {
    margin: 10px 0 18px;

    color: #fff;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            3rem,
            7vw,
            6rem
        );

    line-height: .98;
}

.invitation-closing-content p {
    max-width: 620px;

    margin: 0 auto 28px;

    color:
        rgba(255,255,255,.78);

    font-size: 1.05rem;

    line-height: 1.75;
}


/* =========================================================
   SIMPLE CLOSING WITHOUT BACKGROUND IMAGE
   ========================================================= */

.invitation-closing-simple {
    min-height: auto;

    padding: 100px 20px;

    align-items: center;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(244,196,204,.17),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #2c2338,
            #55374f
        );
}

.invitation-closing-simple .invitation-closing-content {
    padding: 0;
}


/* =========================================================
   HANDWRITTEN ACCENT
   ========================================================= */

.invitation-handwritten {
    margin: 18px 0;

    font-family:
        'Playfair Display',
        serif;

    font-style: italic;

    font-size:
        clamp(
            1.4rem,
            3vw,
            2rem
        );

    color: var(--rose-dark);
}


/* =========================================================
   INVITATION MOBILE
   ========================================================= */

@media (max-width: 950px) {

    .invitation-memory-collage {
        min-height: 650px;
    }

    .invitation-photo-main {
        width: 58vw;
        height: 590px;
    }

    .invitation-photo-ultrasound-one,
    .invitation-photo-ultrasound-two {
        width: 230px;
        height: 270px;
    }

    .invitation-keepsake-card {
        gap: 35px;
    }

    .invitation-ultrasound-photo {
        width: 270px;
        height: 330px;
    }

}


@media (max-width: 800px) {

    .invitation-top {
        padding-top: 80px;
    }

    .invitation-memory-collage {
        min-height: 780px;
        margin-bottom: 70px;
    }

    .invitation-photo-main {
        width: min(520px, 78vw);
        height: 570px;
    }

    .invitation-photo-ultrasound-one {
        left: 2%;
        top: 430px;
    }

    .invitation-photo-ultrasound-two {
        right: 2%;
        bottom: 0;
    }

    .invitation-event-grid {
        grid-template-columns: 1fr;
    }

    .invitation-event-card {
        min-height: auto;
    }

    .invitation-keepsake-card {
        grid-template-columns: 1fr;
    }

    .invitation-keepsake-copy {
        text-align: center;
    }

    .invitation-ultrasound-stack {
        width: min(620px, 100%);
        margin: 0 auto;
    }

}


@media (max-width: 650px) {

    .invitation-shell {
        width: min(100% - 30px, 1180px);
    }

    .invitation-top {
        padding:
            70px 15px
            45px;
    }

    .invitation-top h1 {
        font-size:
            clamp(
                3rem,
                16vw,
                4.7rem
            );
    }

    .invitation-top > p,
    .invitation-top .invitation-intro {
        font-size: .98rem;
    }


    /* Mobile collage becomes cleaner */

    .invitation-memory-collage {
        width: calc(100% - 30px);

        min-height: 660px;

        margin-top: 10px;
        margin-bottom: 65px;
    }

    .invitation-photo-main {
        top: 0;

        width: 88%;
        height: 480px;

        border-width: 8px;
        border-bottom-width: 43px;
    }

    .invitation-photo-ultrasound-one,
    .invitation-photo-ultrasound-two {
        width: 180px;
        height: 215px;

        border-width: 7px;
        border-bottom-width: 45px;
    }

    .invitation-photo-ultrasound-one {
        top: 420px;
        left: 0;
    }

    .invitation-photo-ultrasound-two {
        top: 425px;
        right: 0;
        bottom: auto;
    }

    .invitation-photo-card::after {
        bottom: 10px;
        font-size: .78rem;
    }


    /* Details */

    .invitation-event-section {
        padding:
            75px 15px;
    }

    .invitation-address-card {
        align-items: flex-start;
        padding: 20px;
    }

    .invitation-extra-grid {
        grid-template-columns: 1fr;
    }


    /* Countdown */

    .invitation-countdown-section {
        padding:
            75px 15px;
    }

    .invitation-countdown {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* Ultrasounds */

    .invitation-little-miracle {
        padding:
            80px 15px;
    }

    .invitation-ultrasound-stack {
        min-height: 430px;
    }

    .invitation-ultrasound-photo {
        width: 62%;
        height: 300px;
    }

    .invitation-ultrasound-photo:first-child {
        left: 0;
    }

    .invitation-ultrasound-photo:last-child {
        right: 0;
    }


    /* Baby note */

    .invitation-baby-note {
        padding: 28px 20px;
    }


    /* Closing */

    .invitation-closing {
        min-height: 570px;
    }

    .invitation-closing-content {
        padding:
            65px 0;
    }

}


@media (max-width: 430px) {

    .invitation-memory-collage {
        min-height: 600px;
    }

    .invitation-photo-main {
        width: 94%;
        height: 430px;
    }

    .invitation-photo-ultrasound-one,
    .invitation-photo-ultrasound-two {
        top: 385px;

        width: 158px;
        height: 190px;
    }

    .invitation-ultrasound-stack {
        min-height: 390px;
    }

    .invitation-ultrasound-photo {
        width: 66%;
        height: 275px;
    }

    .invitation-countdown-box {
        padding: 22px 8px;
    }

}
/* =========================================================
   INVITATION V3
   Romantic Editorial Baby Shower Invitation
   ========================================================= */

.invite-v3 {
    --invite-ink: #302638;
    --invite-muted: #766b78;
    --invite-rose: #b85f78;
    --invite-rose-light: #f8dce2;
    --invite-blush: #fff3f4;
    --invite-lilac: #e6ddf4;
    --invite-blue: #eaf5fb;
    --invite-sage: #eaf4ec;
    --invite-gold: #c99b52;
    --invite-paper: #fffaf7;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffaf7 0%,
            #ffffff 42%,
            #fff9f7 100%
        );

    color: var(--invite-ink);
}


.invite-v3-container {
    position: relative;
    z-index: 2;

    width: min(
        1160px,
        calc(100% - 40px)
    );

    margin-inline: auto;
}


.invite-v3-container-narrow {
    max-width: 960px;
}


/* =========================================================
   COMMON TYPOGRAPHY
   ========================================================= */

.invite-v3 h1,
.invite-v3 h2,
.invite-v3 h3 {
    font-family:
        'Playfair Display',
        serif;

    color: var(--invite-ink);
}


.invite-v3-section-kicker {
    display: block;

    margin-bottom: 10px;

    color: var(--invite-rose);

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.invite-v3-section-heading {
    max-width: 690px;

    margin: 0 auto 45px;

    text-align: center;
}


.invite-v3-section-heading h2 {
    margin: 0 0 15px;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.5rem
        );

    font-weight: 500;

    line-height: 1;
}


.invite-v3-section-heading p {
    max-width: 620px;

    margin: 0 auto;

    color: var(--invite-muted);

    font-size: 1rem;

    line-height: 1.8;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.invite-v3-button {
    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 13px 23px;

    border: 1px solid transparent;

    border-radius: 999px;

    font-size: .88rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.invite-v3-button:hover {
    transform: translateY(-2px);
}


.invite-v3-button-primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #b75e76,
            #d47b8d
        );

    box-shadow:
        0 13px 30px
        rgba(181, 95, 115, .24);
}


.invite-v3-button-primary:hover {
    box-shadow:
        0 17px 36px
        rgba(181, 95, 115, .31);
}


.invite-v3-button-light {
    color: var(--invite-ink);

    background:
        rgba(255,255,255,.78);

    border-color:
        rgba(48,38,56,.10);

    box-shadow:
        0 10px 28px
        rgba(48,38,56,.07);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.invite-v3-button-outline {
    color: var(--invite-rose);

    background: #fff;

    border-color:
        rgba(184,95,120,.28);
}


.invite-v3-button-glass {
    color: #fff;

    background:
        rgba(255,255,255,.10);

    border-color:
        rgba(255,255,255,.28);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   HERO
   ========================================================= */

.invite-v3-hero {
    position: relative;

    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        95px 20px
        100px;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(244,196,204,.45),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(185,217,245,.36),
            transparent 26%
        ),
        radial-gradient(
            circle at 80% 90%,
            rgba(205,191,236,.27),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #fff9f5,
            #fff
        );
}


.invite-v3-hero::before {
    content: "♡";

    position: absolute;

    left: -25px;
    bottom: -75px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 18rem;

    line-height: 1;

    color:
        rgba(184,95,120,.045);

    transform: rotate(-12deg);
}


.invite-v3-hero::after {
    content: "✦";

    position: absolute;

    right: 6%;
    top: 55px;

    color:
        rgba(116,91,166,.12);

    font-size: 4rem;

    transform: rotate(14deg);
}


.invite-v3-hero .invite-v3-container {
    display: grid;

    grid-template-columns:
        minmax(0, .95fr)
        minmax(380px, .85fr);

    align-items: center;

    gap:
        clamp(
            50px,
            7vw,
            100px
        );
}


/* Decorative floating shapes */

.invite-v3-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;
}


.invite-v3-orb-one {
    width: 260px;
    height: 260px;

    left: -100px;
    top: 80px;

    background:
        rgba(247,198,163,.16);
}


.invite-v3-orb-two {
    width: 310px;
    height: 310px;

    right: -130px;
    bottom: -70px;

    background:
        rgba(205,191,236,.18);
}


/* Hero copy */

.invite-v3-hero-copy {
    position: relative;
    z-index: 3;
}


.invite-v3-kicker {
    margin-bottom: 20px;

    color: var(--invite-rose);

    font-size: .69rem;
    font-weight: 800;

    letter-spacing: .22em;
}


.invite-v3-names {
    margin: 0 0 8px;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            1.6rem,
            3vw,
            2.25rem
        );

    font-style: italic;

    color: var(--invite-rose);
}


.invite-v3-names span {
    display: inline-block;

    margin-inline: 8px;

    color: var(--invite-gold);
}


.invite-v3-invite-line {
    margin: 0 0 13px;

    color: var(--invite-muted);

    font-size: .9rem;
}


.invite-v3-hero h1 {
    max-width: 650px;

    margin: 0;

    font-size:
        clamp(
            3.7rem,
            6.8vw,
            6.8rem
        );

    font-weight: 500;

    letter-spacing: -.05em;

    line-height: .92;
}


.invite-v3-heart-divider {
    width: min(310px, 100%);

    display: flex;

    align-items: center;

    gap: 13px;

    margin:
        27px 0
        22px;
}


.invite-v3-heart-divider span {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(184,95,120,.38)
        );
}


.invite-v3-heart-divider span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(184,95,120,.38),
            transparent
        );
}


.invite-v3-heart-divider b {
    color: var(--invite-rose);

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.5rem;

    font-weight: 400;
}


.invite-v3-hero-note {
    max-width: 570px;

    margin: 0;

    color: var(--invite-muted);

    font-size: 1rem;

    line-height: 1.85;
}


.invite-v3-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


/* =========================================================
   HERO PHOTO
   ========================================================= */

.invite-v3-hero-photo-wrap {
    position: relative;

    min-height: 610px;
}


.invite-v3-main-photo {
    position: absolute;

    z-index: 3;

    inset:
        0
        25px
        0
        25px;

    margin: 0;

    overflow: hidden;

    padding:
        11px
        11px
        55px;

    background: #fff;

    border-radius: 4px;

    box-shadow:
        0 28px 75px
        rgba(48,38,56,.18);

    transform: rotate(2.5deg);
}


.invite-v3-main-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 2px;
}


.invite-v3-main-photo figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 15px;

    text-align: center;

    font-family:
        'Playfair Display',
        serif;

    font-size: .95rem;
    font-style: italic;

    color: #776b78;
}


.invite-v3-photo-accent {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.invite-v3-photo-accent-one {
    width: 170px;
    height: 170px;

    top: -30px;
    right: -20px;

    background:
        rgba(244,196,204,.50);
}


.invite-v3-photo-accent-two {
    width: 145px;
    height: 145px;

    bottom: -25px;
    left: -25px;

    background:
        rgba(185,217,245,.48);
}


/* Hero without photo */

.invite-v3-hero-symbol {
    min-height: 500px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 48% 48% 25px 25px;

    background:
        linear-gradient(
            145deg,
            var(--invite-blush),
            var(--invite-blue),
            #f1ebfa
        );

    box-shadow:
        0 25px 65px
        rgba(48,38,56,.11);
}


.invite-v3-hero-symbol span {
    font-family:
        'Playfair Display',
        serif;

    font-size: 10rem;

    line-height: 1;

    color:
        rgba(184,95,120,.32);
}


.invite-v3-hero-symbol small {
    margin-top: 25px;

    color: var(--invite-rose);

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .18em;
}


/* =========================================================
   EVENT SECTION
   ========================================================= */

.invite-v3-event {
    position: relative;

    padding:
        110px 20px;

    background: #fff;
}


.invite-v3-event-card {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1px;

    overflow: hidden;

    border:
        1px solid
        rgba(48,38,56,.08);

    border-radius: 28px;

    background:
        rgba(48,38,56,.07);

    box-shadow:
        0 20px 55px
        rgba(48,38,56,.08);
}


.invite-v3-event-detail {
    min-height: 205px;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding:
        31px
        25px;

    background: #fff;
}


.invite-v3-event-detail:nth-child(1) {
    background:
        linear-gradient(
            145deg,
            var(--invite-blush),
            #fff
        );
}


.invite-v3-event-detail:nth-child(2) {
    background:
        linear-gradient(
            145deg,
            var(--invite-blue),
            #fff
        );
}


.invite-v3-event-detail:nth-child(3) {
    background:
        linear-gradient(
            145deg,
            var(--invite-sage),
            #fff
        );
}


.invite-v3-event-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background:
        rgba(255,255,255,.85);

    box-shadow:
        0 7px 18px
        rgba(48,38,56,.06);

    font-size: 1.3rem;
}


.invite-v3-event-detail small {
    display: block;

    margin-bottom: 7px;

    color: var(--invite-rose);

    font-size: .63rem;
    font-weight: 800;

    letter-spacing: .16em;
}


.invite-v3-event-detail strong {
    display: block;

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.35rem;

    line-height: 1.25;
}


.invite-v3-event-detail p {
    margin: 7px 0 0;

    color: var(--invite-muted);

    font-size: .82rem;

    line-height: 1.55;
}


/* =========================================================
   EVENT EXTRAS
   ========================================================= */

.invite-v3-extra-row {
    max-width: 760px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 13px;

    margin:
        20px auto
        0;
}


.invite-v3-extra-pill {
    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        16px
        19px;

    border:
        1px solid
        rgba(48,38,56,.08);

    border-radius: 18px;

    background: #fffafc;
}


.invite-v3-extra-pill > span {
    font-size: 1.35rem;
}


.invite-v3-extra-pill small {
    display: block;

    margin-bottom: 2px;

    color: var(--invite-muted);

    font-size: .61rem;
    font-weight: 800;

    letter-spacing: .13em;
}


.invite-v3-extra-pill strong {
    font-size: .87rem;
}


.invite-v3-event-actions {
    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


/* =========================================================
   LITTLE MIRACLE STORY
   ========================================================= */

.invite-v3-story {
    position: relative;

    overflow: hidden;

    padding:
        115px 20px
        125px;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(185,217,245,.30),
            transparent 27%
        ),
        radial-gradient(
            circle at 92% 80%,
            rgba(244,196,204,.30),
            transparent 28%
        ),
        #fffaf7;
}


.invite-v3-story .invite-v3-container {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(450px, 1fr);

    align-items: center;

    gap:
        clamp(
            50px,
            7vw,
            90px
        );
}


.invite-v3-story-copy h2 {
    max-width: 570px;

    margin: 0 0 22px;

    font-size:
        clamp(
            3rem,
            5.7vw,
            5.1rem
        );

    font-weight: 500;

    letter-spacing: -.035em;

    line-height: .98;
}


.invite-v3-story-copy > p {
    max-width: 570px;

    color: var(--invite-muted);

    line-height: 1.85;
}


.invite-v3-script {
    margin-top: 25px !important;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            1.8rem
        );

    font-style: italic;

    color:
        var(--invite-rose) !important;
}


/* =========================================================
   ULTRASOUND POLAROIDS
   ========================================================= */

.invite-v3-ultrasound-stage {
    position: relative;

    min-height: 520px;
}


.invite-v3-ultrasound-card {
    position: absolute;

    width: 340px;
    height: 400px;

    margin: 0;

    padding:
        10px
        10px
        55px;

    background: #fff;

    box-shadow:
        0 24px 60px
        rgba(48,38,56,.17);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.invite-v3-ultrasound-card:hover {
    z-index: 10;

    box-shadow:
        0 30px 70px
        rgba(48,38,56,.22);
}


.invite-v3-ultrasound-one {
    z-index: 2;

    left: 0;
    top: 20px;

    transform: rotate(-7deg);
}


.invite-v3-ultrasound-one:hover {
    transform:
        rotate(-3deg)
        scale(1.02);
}


.invite-v3-ultrasound-two {
    z-index: 3;

    right: 0;
    bottom: 10px;

    transform: rotate(7deg);
}


.invite-v3-ultrasound-two:hover {
    transform:
        rotate(3deg)
        scale(1.02);
}


.invite-v3-ultrasound-image {
    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #121212;
}


.invite-v3-ultrasound-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    background: #111;
}


.invite-v3-ultrasound-card figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 16px;

    text-align: center;

    font-family:
        'Playfair Display',
        serif;

    font-size: .95rem;
    font-style: italic;

    color: #756977;
}


.invite-v3-tape {
    position: absolute;

    z-index: 6;

    width: 88px;
    height: 25px;

    left: 50%;
    top: -9px;

    transform:
        translateX(-50%)
        rotate(-3deg);

    background:
        rgba(244,196,204,.70);

    box-shadow:
        0 3px 8px
        rgba(48,38,56,.05);
}


.invite-v3-ultrasound-two
.invite-v3-tape {
    background:
        rgba(205,191,236,.72);

    transform:
        translateX(-50%)
        rotate(4deg);
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.invite-v3-countdown-section {
    position: relative;

    overflow: hidden;

    padding:
        90px 20px;

    text-align: center;

    color: #fff;

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(244,196,204,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(205,191,236,.17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #30263b,
            #56384f 55%,
            #714858
        );
}


.invite-v3-countdown-section::before {
    content: "♡";

    position: absolute;

    left: -20px;
    bottom: -70px;

    color:
        rgba(255,255,255,.035);

    font-family:
        'Playfair Display',
        serif;

    font-size: 15rem;
}


.invite-v3-countdown-kicker {
    display: block;

    margin-bottom: 8px;

    color: #f5c7d0;

    font-size: .65rem;
    font-weight: 800;

    letter-spacing: .2em;
}


.invite-v3-countdown-heading h2 {
    max-width: 690px;

    margin:
        0 auto
        13px;

    color: #fff;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.5rem
        );

    font-weight: 500;

    line-height: 1;
}


.invite-v3-countdown-heading p {
    max-width: 570px;

    margin:
        0 auto
        35px;

    color:
        rgba(255,255,255,.68);
}


.invite-v3-countdown {
    max-width: 720px;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 11px;

    margin: auto;
}


.invite-v3-countdown-unit {
    padding:
        24px
        10px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius: 18px;

    background:
        rgba(255,255,255,.075);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.invite-v3-countdown-unit strong {
    display: block;

    color: #fff;

    font-size:
        clamp(
            2rem,
            4vw,
            3.1rem
        );

    line-height: 1;
}


.invite-v3-countdown-unit span {
    display: block;

    margin-top: 8px;

    color:
        rgba(255,255,255,.58);

    font-size: .62rem;
    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.invite-v3-countdown-complete {
    grid-column: 1 / -1;

    padding: 30px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 2rem;

    color: #fff;
}


/* =========================================================
   BABY / DUE DATE
   ========================================================= */

.invite-v3-baby-section {
    padding:
        95px 20px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fffaf7
        );
}


.invite-v3-baby-card {
    position: relative;

    overflow: hidden;

    padding:
        60px
        45px;

    text-align: center;

    border:
        1px solid
        rgba(48,38,56,.07);

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(255,255,255,.75),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fff0f3,
            #edf7ff 50%,
            #f2edff
        );

    box-shadow:
        0 22px 55px
        rgba(48,38,56,.09);
}


.invite-v3-baby-card::before {
    content: "♡";

    position: absolute;

    right: 5%;
    top: -45px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 10rem;

    color:
        rgba(184,95,120,.07);
}


.invite-v3-baby-icon {
    width: 68px;
    height: 68px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0 auto
        18px;

    border-radius: 22px;

    background:
        rgba(255,255,255,.78);

    box-shadow:
        0 9px 22px
        rgba(48,38,56,.07);

    font-size: 1.8rem;
}


.invite-v3-baby-card h2 {
    margin:
        0 0
        12px;

    font-size:
        clamp(
            2.7rem,
            5vw,
            4.5rem
        );

    font-weight: 500;

    line-height: 1;
}


.invite-v3-baby-card p {
    max-width: 580px;

    margin: 0 auto;

    color: var(--invite-muted);

    line-height: 1.75;
}


.invite-v3-baby-card p strong {
    color: var(--invite-rose);
}


.invite-v3-tiny-hearts {
    margin-top: 23px;

    color: var(--invite-rose);

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.25rem;
}


/* =========================================================
   CLOSING
   ========================================================= */

.invite-v3-closing {
    position: relative;

    min-height: 590px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(244,196,204,.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #30263b,
            #56384f 58%,
            #704858
        );
}


.invite-v3-closing-background {
    position: absolute;

    inset: 0;
}


.invite-v3-closing-background img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.invite-v3-closing-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(31,24,37,.88) 0%,
            rgba(31,24,37,.72) 45%,
            rgba(31,24,37,.42) 100%
        );
}


.invite-v3-closing:not(
    .invite-v3-closing-has-image
)
.invite-v3-closing-overlay {
    background:
        radial-gradient(
            circle at 70% 20%,
            rgba(244,196,204,.10),
            transparent 30%
        );
}


.invite-v3-closing-content {
    position: relative;

    z-index: 3;

    max-width: 680px;

    padding:
        90px
        0;

    color: #fff;
}


.invite-v3-closing-kicker {
    display: block;

    margin-bottom: 10px;

    color: #f4c7d0;

    font-size: .67rem;
    font-weight: 800;

    letter-spacing: .22em;
}


.invite-v3-closing-content h2 {
    margin: 0 0 20px;

    color: #fff;

    font-size:
        clamp(
            3.2rem,
            6vw,
            5.8rem
        );

    font-weight: 500;

    letter-spacing: -.04em;

    line-height: .96;
}


.invite-v3-closing-content > p {
    max-width: 580px;

    color:
        rgba(255,255,255,.76);

    font-size: 1rem;

    line-height: 1.8;
}


.invite-v3-signature {
    margin-top: 27px;
}


.invite-v3-signature span {
    display: block;

    color:
        rgba(255,255,255,.62);

    font-size: .83rem;
}


.invite-v3-signature strong {
    display: block;

    margin-top: 2px;

    color: #fff;

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.7rem;

    font-style: italic;

    font-weight: 500;
}


.invite-v3-closing-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 31px;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 980px) {

    .invite-v3-hero {
        min-height: auto;
    }


    .invite-v3-hero
    .invite-v3-container {
        grid-template-columns:
            1fr 1fr;

        gap: 45px;
    }


    .invite-v3-hero h1 {
        font-size:
            clamp(
                3.4rem,
                7vw,
                5.5rem
            );
    }


    .invite-v3-hero-photo-wrap {
        min-height: 530px;
    }


    .invite-v3-story
    .invite-v3-container {
        grid-template-columns:
            .85fr 1fr;

        gap: 35px;
    }


    .invite-v3-ultrasound-card {
        width: 285px;
        height: 345px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

    .invite-v3-hero {
        padding:
            75px 20px
            80px;
    }


    .invite-v3-hero
    .invite-v3-container {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .invite-v3-hero-copy {
        max-width: 690px;

        margin: auto;

        text-align: center;
    }


    .invite-v3-heart-divider {
        margin-inline: auto;
    }


    .invite-v3-hero-note {
        margin-inline: auto;
    }


    .invite-v3-hero-actions {
        justify-content: center;
    }


    .invite-v3-hero-photo-wrap {
        width: min(520px, 100%);

        min-height: 610px;

        margin: auto;
    }


    .invite-v3-event-card {
        grid-template-columns: 1fr;
    }


    .invite-v3-event-detail {
        min-height: auto;
    }


    .invite-v3-story
    .invite-v3-container {
        grid-template-columns: 1fr;
    }


    .invite-v3-story-copy {
        max-width: 700px;

        margin: auto;

        text-align: center;
    }


    .invite-v3-story-copy h2,
    .invite-v3-story-copy > p {
        margin-left: auto;
        margin-right: auto;
    }


    .invite-v3-ultrasound-stage {
        width: min(650px, 100%);

        margin: auto;
    }


    .invite-v3-ultrasound-card {
        width: 340px;
        height: 400px;
    }


    .invite-v3-closing-content {
        max-width: 610px;

        margin: auto;

        text-align: center;
    }


    .invite-v3-closing-actions {
        justify-content: center;
    }


    .invite-v3-closing-overlay {
        background:
            rgba(31,24,37,.68);
    }

}


/* =========================================================
   RESPONSIVE — PHONE
   ========================================================= */

@media (max-width: 600px) {

    .invite-v3-container {
        width:
            min(
                100% - 30px,
                1160px
            );
    }


    .invite-v3-hero {
        padding:
            62px 10px
            68px;
    }


    .invite-v3-kicker {
        font-size: .61rem;

        letter-spacing: .17em;
    }


    .invite-v3-names {
        font-size: 1.45rem;
    }


    .invite-v3-hero h1 {
        font-size:
            clamp(
                3.2rem,
                15vw,
                4.6rem
            );
    }


    .invite-v3-hero-note {
        font-size: .94rem;
    }


    .invite-v3-hero-actions,
    .invite-v3-event-actions,
    .invite-v3-closing-actions {
        align-items: stretch;

        flex-direction: column;
    }


    .invite-v3-button {
        width: 100%;
    }


    /* Hero photo */

    .invite-v3-hero-photo-wrap {
        min-height: 500px;
    }


    .invite-v3-main-photo {
        inset:
            0
            7px
            0
            7px;

        padding:
            8px
            8px
            48px;

        transform: rotate(1.5deg);
    }


    .invite-v3-main-photo figcaption {
        bottom: 13px;

        font-size: .83rem;
    }


    /* Event */

    .invite-v3-event {
        padding:
            80px 10px;
    }


    .invite-v3-section-heading {
        margin-bottom: 32px;
    }


    .invite-v3-section-heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.7rem
            );
    }


    .invite-v3-event-card {
        border-radius: 22px;
    }


    .invite-v3-event-detail {
        padding: 24px 20px;
    }


    .invite-v3-extra-row {
        grid-template-columns: 1fr;
    }


    /* Story */

    .invite-v3-story {
        padding:
            80px 10px
            90px;
    }


    .invite-v3-story-copy h2 {
        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );
    }


    .invite-v3-ultrasound-stage {
        min-height: 440px;

        margin-top: 15px;
    }


    .invite-v3-ultrasound-card {
        width: 67%;
        height: 315px;

        padding:
            8px
            8px
            48px;
    }


    .invite-v3-ultrasound-one {
        left: 0;
    }


    .invite-v3-ultrasound-two {
        right: 0;
    }


    .invite-v3-ultrasound-card figcaption {
        bottom: 13px;

        font-size: .78rem;
    }


    /* Countdown */

    .invite-v3-countdown-section {
        padding:
            72px 10px;
    }


    .invite-v3-countdown {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .invite-v3-countdown-heading h2 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.8rem
            );
    }


    /* Baby */

    .invite-v3-baby-section {
        padding:
            75px 10px;
    }


    .invite-v3-baby-card {
        padding:
            45px
            22px;

        border-radius: 25px;
    }


    /* Closing */

    .invite-v3-closing {
        min-height: 620px;
    }


    .invite-v3-closing-content {
        padding:
            75px 0;
    }


    .invite-v3-closing-content h2 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.5rem
            );
    }

}


/* =========================================================
   RESPONSIVE — VERY SMALL PHONE
   ========================================================= */

@media (max-width: 400px) {

    .invite-v3-hero-photo-wrap {
        min-height: 445px;
    }


    .invite-v3-ultrasound-stage {
        min-height: 400px;
    }


    .invite-v3-ultrasound-card {
        width: 69%;
        height: 285px;
    }


    .invite-v3-event-detail {
        flex-direction: column;
    }

}

/* =========================================================
   THEME SYSTEM V1 — 10 selectable public themes
   ========================================================= */

body {
    --theme-primary:#b55f73;
    --theme-primary-2:#ca6f85;
    --theme-secondary:#745ba6;
    --theme-accent:#e2bd6f;
    --theme-bg:#fffaf5;
    --theme-bg-soft:#fff0f3;
    --theme-text:#29233a;
    --theme-muted:#514a63;
    --theme-rgb:181,95,115;
    --theme-secondary-rgb:116,91,166;
    --theme-dark-1:#30243f;
    --theme-dark-2:#583653;
    --theme-dark-3:#764a57;
    --theme-soft-1:#fff0f3;
    --theme-soft-2:#edf7ff;
    --theme-soft-3:#edf7ef;
    --theme-soft-4:#f2edff;
    --theme-hero-1:rgba(244,196,204,.58);
    --theme-hero-2:rgba(185,217,245,.46);
    --theme-hero-3:rgba(205,191,236,.38);
}

body[data-theme="blush-rose"] {
    --theme-primary:#b55f73; --theme-primary-2:#d47b8d; --theme-secondary:#745ba6;
    --theme-accent:#d39a67; --theme-bg:#fff9f6; --theme-bg-soft:#fff0f3;
    --theme-text:#302638; --theme-muted:#766b78; --theme-rgb:181,95,115;
    --theme-secondary-rgb:116,91,166; --theme-dark-1:#30263b; --theme-dark-2:#56384f;
    --theme-dark-3:#714858; --theme-soft-1:#fff0f3; --theme-soft-2:#edf7ff;
    --theme-soft-3:#edf7ef; --theme-soft-4:#f2edff;
    --theme-hero-1:rgba(244,196,204,.50); --theme-hero-2:rgba(185,217,245,.36);
    --theme-hero-3:rgba(205,191,236,.30);
}

body[data-theme="baby-blue"] {
    --theme-primary:#5e91bc; --theme-primary-2:#78acd3; --theme-secondary:#5575a8;
    --theme-accent:#d5ab62; --theme-bg:#f6fbff; --theme-bg-soft:#e9f5ff;
    --theme-text:#27394b; --theme-muted:#617486; --theme-rgb:94,145,188;
    --theme-secondary-rgb:85,117,168; --theme-dark-1:#26394b; --theme-dark-2:#345a78;
    --theme-dark-3:#527c9d; --theme-soft-1:#e9f5ff; --theme-soft-2:#f2f8ff;
    --theme-soft-3:#edf8f6; --theme-soft-4:#eef0ff;
    --theme-hero-1:rgba(185,217,245,.64); --theme-hero-2:rgba(205,228,248,.48);
    --theme-hero-3:rgba(201,216,243,.36);
}

body[data-theme="sage-garden"] {
    --theme-primary:#587d61; --theme-primary-2:#72987a; --theme-secondary:#7d705e;
    --theme-accent:#c8a15d; --theme-bg:#f7faf5; --theme-bg-soft:#edf7ef;
    --theme-text:#2f3b31; --theme-muted:#667169; --theme-rgb:88,125,97;
    --theme-secondary-rgb:125,112,94; --theme-dark-1:#29372d; --theme-dark-2:#465e4b;
    --theme-dark-3:#6b7d69; --theme-soft-1:#edf7ef; --theme-soft-2:#f3f8ed;
    --theme-soft-3:#f5f0e6; --theme-soft-4:#eef3ec;
    --theme-hero-1:rgba(183,211,189,.60); --theme-hero-2:rgba(219,229,203,.42);
    --theme-hero-3:rgba(215,198,163,.32);
}

body[data-theme="lavender-dream"] {
    --theme-primary:#745ba6; --theme-primary-2:#9279bf; --theme-secondary:#a56f98;
    --theme-accent:#d0a85c; --theme-bg:#faf7ff; --theme-bg-soft:#f2edff;
    --theme-text:#342d43; --theme-muted:#746b82; --theme-rgb:116,91,166;
    --theme-secondary-rgb:165,111,152; --theme-dark-1:#342a48; --theme-dark-2:#5c4778;
    --theme-dark-3:#7d5f91; --theme-soft-1:#f2edff; --theme-soft-2:#f8efff;
    --theme-soft-3:#fff0f5; --theme-soft-4:#eee8fb;
    --theme-hero-1:rgba(205,191,236,.60); --theme-hero-2:rgba(224,206,245,.44);
    --theme-hero-3:rgba(239,197,220,.32);
}

body[data-theme="peach-sunset"] {
    --theme-primary:#cf755f; --theme-primary-2:#e69578; --theme-secondary:#b77a68;
    --theme-accent:#d9aa55; --theme-bg:#fff8f3; --theme-bg-soft:#fff1e6;
    --theme-text:#49332d; --theme-muted:#806c65; --theme-rgb:207,117,95;
    --theme-secondary-rgb:183,122,104; --theme-dark-1:#49312c; --theme-dark-2:#77483d;
    --theme-dark-3:#9b6858; --theme-soft-1:#fff1e6; --theme-soft-2:#fff6ed;
    --theme-soft-3:#f6eee3; --theme-soft-4:#f8e7e1;
    --theme-hero-1:rgba(247,198,163,.62); --theme-hero-2:rgba(244,165,143,.40);
    --theme-hero-3:rgba(231,201,172,.35);
}

body[data-theme="mint-breeze"] {
    --theme-primary:#4f8c7a; --theme-primary-2:#67aa96; --theme-secondary:#4e8390;
    --theme-accent:#c3a25e; --theme-bg:#f5fcf9; --theme-bg-soft:#ebfaf5;
    --theme-text:#29413b; --theme-muted:#647a73; --theme-rgb:79,140,122;
    --theme-secondary-rgb:78,131,144; --theme-dark-1:#253d37; --theme-dark-2:#386a60;
    --theme-dark-3:#54897c; --theme-soft-1:#ebfaf5; --theme-soft-2:#edfafa;
    --theme-soft-3:#f0f8f4; --theme-soft-4:#e9f6f6;
    --theme-hero-1:rgba(191,228,215,.64); --theme-hero-2:rgba(185,224,225,.42);
    --theme-hero-3:rgba(212,235,224,.34);
}

body[data-theme="golden-glow"] {
    --theme-primary:#9b7428; --theme-primary-2:#c99c45; --theme-secondary:#7c684a;
    --theme-accent:#e2bd6f; --theme-bg:#fffaf0; --theme-bg-soft:#fff7df;
    --theme-text:#40372b; --theme-muted:#766b5a; --theme-rgb:155,116,40;
    --theme-secondary-rgb:124,104,74; --theme-dark-1:#3f3424; --theme-dark-2:#695733;
    --theme-dark-3:#8f7546; --theme-soft-1:#fff7df; --theme-soft-2:#fffaf0;
    --theme-soft-3:#f6f0df; --theme-soft-4:#f4ead2;
    --theme-hero-1:rgba(226,189,111,.52); --theme-hero-2:rgba(241,215,160,.40);
    --theme-hero-3:rgba(220,197,153,.32);
}

body[data-theme="boho-neutral"] {
    --theme-primary:#8c6653; --theme-primary-2:#aa7b63; --theme-secondary:#786b5f;
    --theme-accent:#bd8d5e; --theme-bg:#faf5ef; --theme-bg-soft:#f6ede4;
    --theme-text:#453831; --theme-muted:#776a63; --theme-rgb:140,102,83;
    --theme-secondary-rgb:120,107,95; --theme-dark-1:#44352f; --theme-dark-2:#6d5145;
    --theme-dark-3:#8c6b5b; --theme-soft-1:#f6ede4; --theme-soft-2:#f9f2e9;
    --theme-soft-3:#efe9df; --theme-soft-4:#f3e4dc;
    --theme-hero-1:rgba(217,185,155,.56); --theme-hero-2:rgba(229,205,180,.40);
    --theme-hero-3:rgba(186,128,103,.25);
}

body[data-theme="berry-luxe"] {
    --theme-primary:#883f64; --theme-primary-2:#a95779; --theme-secondary:#584067;
    --theme-accent:#c69b58; --theme-bg:#fcf6f9; --theme-bg-soft:#f9edf3;
    --theme-text:#392b3a; --theme-muted:#746674; --theme-rgb:136,63,100;
    --theme-secondary-rgb:88,64,103; --theme-dark-1:#342538; --theme-dark-2:#593047;
    --theme-dark-3:#763e58; --theme-soft-1:#f9edf3; --theme-soft-2:#f8f0f7;
    --theme-soft-3:#f5edf1; --theme-soft-4:#eee7f3;
    --theme-hero-1:rgba(195,119,151,.48); --theme-hero-2:rgba(169,123,175,.34);
    --theme-hero-3:rgba(136,63,100,.20);
}

body[data-theme="classic-ivory"] {
    --theme-primary:#76644a; --theme-primary-2:#9a825d; --theme-secondary:#4f4a46;
    --theme-accent:#c9ae78; --theme-bg:#fffaf0; --theme-bg-soft:#f7f1e5;
    --theme-text:#343235; --theme-muted:#74706d; --theme-rgb:118,100,74;
    --theme-secondary-rgb:79,74,70; --theme-dark-1:#302e2d; --theme-dark-2:#4d4740;
    --theme-dark-3:#6c6256; --theme-soft-1:#f7f1e5; --theme-soft-2:#fffaf0;
    --theme-soft-3:#f4f0e8; --theme-soft-4:#ece7df;
    --theme-hero-1:rgba(201,174,120,.42); --theme-hero-2:rgba(224,210,183,.38);
    --theme-hero-3:rgba(150,138,123,.18);
}

/* Public site application. Admin components keep their existing palette. */
body[data-theme] {
    background:
        radial-gradient(circle at 10% 0%, rgba(var(--theme-rgb),.14), transparent 25%),
        radial-gradient(circle at 90% 8%, rgba(var(--theme-secondary-rgb),.12), transparent 24%),
        var(--theme-bg);
    color:var(--theme-text);
}

body[data-theme] main .eyebrow,
body[data-theme] main .section-label,
body[data-theme] main .registry-label,
body[data-theme] main .baby-feature-label,
body[data-theme] main .event-kicker,
body[data-theme] main .feature-card span { color:var(--theme-primary); }

body[data-theme] main h1,
body[data-theme] main h2,
body[data-theme] main h3,
body[data-theme] main h4 { color:var(--theme-text); }

body[data-theme] main .hero-copy h1 em,
body[data-theme] main .intro-grid h2 em,
body[data-theme] main .baby-teaser h2 em,
body[data-theme] main .baby-hero h1 em,
body[data-theme] main .gallery-header h1 em { color:var(--theme-primary); }

body[data-theme] main .btn-primary,
body[data-theme] main .button-primary {
    background:linear-gradient(135deg,var(--theme-primary),var(--theme-primary-2));
    box-shadow:0 12px 28px rgba(var(--theme-rgb),.22);
}
body[data-theme] main .btn-primary:hover,
body[data-theme] main .button-primary:hover {
    box-shadow:0 16px 34px rgba(var(--theme-rgb),.30);
}

body[data-theme] > .site-header {
    background:rgba(255,255,255,.90);
    border-bottom:1px solid rgba(var(--theme-rgb),.10);
}
body[data-theme] > .site-header .site-logo,
body[data-theme] > .site-header .main-navigation > a,
body[data-theme] > .site-header .nav-dropdown-button,
body[data-theme] > .site-header .mobile-menu-button { color:var(--theme-text); }
body[data-theme] > .site-header .site-logo span,
body[data-theme] > .site-header .mobile-menu-heading { color:var(--theme-primary); }
body[data-theme] > .site-header .site-logo small { color:var(--theme-secondary); }
body[data-theme] > .site-header .main-navigation > a.active::after,
body[data-theme] > .site-header .nav-dropdown-button.active::after {
    background:linear-gradient(90deg,var(--theme-primary),var(--theme-secondary));
}
body[data-theme] > .site-header .menu-icon {
    background:linear-gradient(135deg,var(--theme-soft-1),var(--theme-soft-4));
}
body[data-theme] > .site-header .mobile-navigation { background:var(--theme-bg); }

body[data-theme] main .photo-frame {
    background:
        radial-gradient(circle at 25% 15%,rgba(255,255,255,.72),transparent 30%),
        linear-gradient(135deg,var(--theme-soft-1),var(--theme-soft-2) 34%,var(--theme-soft-4) 68%,var(--theme-soft-3));
}
body[data-theme] main .scribble { color:var(--theme-secondary); }

body[data-theme] main .baby-teaser {
    background:
        radial-gradient(circle at 85% 15%,rgba(255,255,255,.32),transparent 24%),
        linear-gradient(135deg,var(--theme-soft-1),var(--theme-soft-2) 52%,var(--theme-soft-4));
}
body[data-theme] main .baby-symbol { color:var(--theme-primary); }

body[data-theme] main .timeline-card:nth-child(4n+1),
body[data-theme] main .feature-card:nth-child(4n+1),
body[data-theme] main .wish-card:nth-child(3n+1),
body[data-theme] main .registry-card:nth-child(3n+1) { background:var(--theme-soft-1); }

body[data-theme] main .timeline-card:nth-child(4n+2),
body[data-theme] main .feature-card:nth-child(4n+2),
body[data-theme] main .wish-card:nth-child(3n+2),
body[data-theme] main .registry-card:nth-child(3n+2) { background:var(--theme-soft-2); }

body[data-theme] main .timeline-card:nth-child(4n+3),
body[data-theme] main .feature-card:nth-child(4n+3),
body[data-theme] main .wish-card:nth-child(3n+3),
body[data-theme] main .registry-card:nth-child(3n+3) { background:var(--theme-soft-3); }

body[data-theme] main .timeline-card:nth-child(4n+4),
body[data-theme] main .feature-card:nth-child(4n+4) { background:var(--theme-soft-4); }

body[data-theme] main .feature-card a,
body[data-theme] main .registry-link,
body[data-theme] main .baby-card-link { color:var(--theme-secondary); }

body[data-theme] main .rsvp-form,
body[data-theme] main .feature-form-card {
    background:linear-gradient(135deg,rgba(var(--theme-rgb),.15),rgba(var(--theme-secondary-rgb),.12)),#fff;
}
body[data-theme] main input:focus,
body[data-theme] main textarea:focus,
body[data-theme] main select:focus {
    border-color:var(--theme-primary);
    box-shadow:0 0 0 4px rgba(var(--theme-rgb),.11);
}

body[data-theme] main .baby-hub-hero {
    background:
        radial-gradient(circle at 15% 15%,var(--theme-hero-1),transparent 24%),
        radial-gradient(circle at 85% 12%,var(--theme-hero-2),transparent 24%),
        radial-gradient(circle at 75% 90%,var(--theme-hero-3),transparent 28%),
        linear-gradient(180deg,var(--theme-bg),#fff);
}
body[data-theme] main .baby-feature-card:nth-child(1) { background:linear-gradient(135deg,var(--theme-soft-1),#fff); }
body[data-theme] main .baby-feature-card:nth-child(2) { background:linear-gradient(135deg,var(--theme-soft-2),#fff); }
body[data-theme] main .baby-feature-card:nth-child(3) { background:linear-gradient(135deg,var(--theme-soft-3),#fff); }
body[data-theme] main .baby-feature-card:nth-child(4) { background:linear-gradient(135deg,var(--theme-soft-4),#fff); }
body[data-theme] main .baby-gallery-teaser {
    background:linear-gradient(135deg,var(--theme-soft-2),var(--theme-soft-4));
}
body[data-theme] main .registry-price { color:var(--theme-primary); }

/* Invitation V3 inherits selected public theme */
body[data-theme] .invite-v3 {
    --invite-ink:var(--theme-text);
    --invite-muted:var(--theme-muted);
    --invite-rose:var(--theme-primary);
    --invite-gold:var(--theme-accent);
    --invite-blush:var(--theme-soft-1);
    --invite-blue:var(--theme-soft-2);
    --invite-sage:var(--theme-soft-3);
    --invite-lilac:var(--theme-soft-4);
    --invite-paper:var(--theme-bg);
    background:linear-gradient(180deg,var(--theme-bg) 0%,#fff 42%,var(--theme-bg) 100%);
}

body[data-theme] .invite-v3-button-primary {
    background:linear-gradient(135deg,var(--theme-primary),var(--theme-primary-2));
    box-shadow:0 13px 30px rgba(var(--theme-rgb),.24);
}
body[data-theme] .invite-v3-button-outline {
    color:var(--theme-primary);
    border-color:rgba(var(--theme-rgb),.28);
}
body[data-theme] .invite-v3-hero {
    background:
        radial-gradient(circle at 8% 10%,var(--theme-hero-1),transparent 27%),
        radial-gradient(circle at 92% 12%,var(--theme-hero-2),transparent 26%),
        radial-gradient(circle at 80% 90%,var(--theme-hero-3),transparent 29%),
        linear-gradient(135deg,var(--theme-bg),#fff);
}
body[data-theme] .invite-v3-photo-accent-one,
body[data-theme] .invite-v3-tape { background:rgba(var(--theme-rgb),.34); }
body[data-theme] .invite-v3-photo-accent-two,
body[data-theme] .invite-v3-ultrasound-two .invite-v3-tape { background:rgba(var(--theme-secondary-rgb),.34); }
body[data-theme] .invite-v3-event-detail:nth-child(1) { background:linear-gradient(145deg,var(--theme-soft-1),#fff); }
body[data-theme] .invite-v3-event-detail:nth-child(2) { background:linear-gradient(145deg,var(--theme-soft-2),#fff); }
body[data-theme] .invite-v3-event-detail:nth-child(3) { background:linear-gradient(145deg,var(--theme-soft-3),#fff); }
body[data-theme] .invite-v3-story {
    background:
        radial-gradient(circle at 8% 20%,var(--theme-hero-2),transparent 27%),
        radial-gradient(circle at 92% 80%,var(--theme-hero-1),transparent 28%),
        var(--theme-bg);
}
body[data-theme] .invite-v3-countdown-section,
body[data-theme] .invite-v3-closing {
    background:
        radial-gradient(circle at 10% 10%,rgba(var(--theme-rgb),.17),transparent 28%),
        radial-gradient(circle at 90% 90%,rgba(var(--theme-secondary-rgb),.14),transparent 30%),
        linear-gradient(135deg,var(--theme-dark-1),var(--theme-dark-2) 55%,var(--theme-dark-3));
}
body[data-theme] .invite-v3-baby-card {
    background:
        radial-gradient(circle at 5% 10%,rgba(255,255,255,.75),transparent 28%),
        linear-gradient(135deg,var(--theme-soft-1),var(--theme-soft-2) 50%,var(--theme-soft-4));
}
body[data-theme] > .site-footer {
    background:linear-gradient(135deg,var(--theme-dark-1),var(--theme-dark-2) 55%,var(--theme-dark-3));
}

/* =========================================================
   ADMIN THEME PICKER
   ========================================================= */

.theme-settings-card { overflow:visible; }
.theme-settings-card::before {
    height:5px;
    background:linear-gradient(90deg,#b55f73,#5e91bc,#587d61,#745ba6,#cf755f,#4f8c7a,#c99c45,#8c6653,#883f64,#76644a);
}
.theme-settings-intro {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    margin-bottom:24px; padding:20px 22px; border-radius:20px;
    background:linear-gradient(135deg,#fff8fa,#f7f3ff); border:1px solid var(--border);
}
.theme-settings-intro strong { display:block; margin-bottom:4px; }
.theme-settings-intro p { margin:0; color:var(--ink-soft); font-size:.84rem; }
.theme-current-badge {
    flex-shrink:0; padding:10px 14px; border-radius:999px; background:#fff;
    border:1px solid var(--border); font-size:.76rem; color:var(--ink-soft);
}
.theme-current-badge strong { display:inline; margin-left:3px; color:var(--ink); }

.theme-picker-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}
.theme-picker-card {
    position:relative; display:block; min-height:220px; padding:22px; border-radius:22px;
    background:#fff; border:2px solid rgba(41,35,58,.07);
    box-shadow:0 10px 28px rgba(41,35,58,.045); cursor:pointer;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.theme-picker-card:hover {
    transform:translateY(-3px);
    border-color:rgba(116,91,166,.20);
    box-shadow:0 15px 34px rgba(41,35,58,.08);
}
.theme-picker-card.selected {
    border-color:#745ba6;
    box-shadow:0 0 0 4px rgba(116,91,166,.08),0 16px 36px rgba(41,35,58,.09);
}
.theme-picker-card > input[type="radio"] {
    position:absolute; opacity:0; pointer-events:none;
}
.theme-picker-top {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:17px;
}
.theme-picker-icon {
    width:48px; height:48px; display:flex; align-items:center; justify-content:center;
    border-radius:15px; background:linear-gradient(135deg,var(--rose-soft),var(--lavender-soft));
    font-size:1.35rem;
}
.theme-picker-check {
    width:30px; height:30px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:#eeeaf3; color:transparent; font-size:.82rem; font-weight:900;
}
.theme-picker-card.selected .theme-picker-check {
    background:linear-gradient(135deg,#745ba6,#b55f73); color:#fff;
}
.theme-picker-card h3 {
    margin:0 0 6px; font-family:'Playfair Display',serif; font-size:1.35rem;
}
.theme-picker-card p {
    min-height:42px; margin:0 0 17px; color:var(--ink-soft); font-size:.81rem; line-height:1.55;
}
.theme-color-swatches { display:flex; gap:7px; margin-bottom:17px; }
.theme-color-swatches span {
    width:31px; height:31px; display:block; border-radius:50%;
    border:3px solid #fff; box-shadow:0 0 0 1px rgba(41,35,58,.10);
}
.theme-picker-action {
    padding-top:14px; border-top:1px solid rgba(41,35,58,.07);
}
.theme-picker-select-text { color:#745ba6; font-size:.76rem; font-weight:800; }
.theme-picker-card.selected .theme-picker-select-text { color:#b55f73; }
.theme-settings-note {
    display:flex; align-items:flex-start; gap:11px; margin-top:19px; padding:15px 17px;
    border-radius:16px; background:#fff9e9; border:1px solid rgba(226,189,111,.24);
}
.theme-settings-note p { margin:0; color:var(--ink-soft); font-size:.8rem; line-height:1.55; }

@media (max-width:850px) {
    .theme-settings-intro { align-items:flex-start; flex-direction:column; }
    .theme-picker-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) {
    .theme-picker-card { min-height:auto; padding:19px; }
    .theme-color-swatches span { width:28px; height:28px; }
}

/* =========================================================
   TOP NAVIGATION FIX — prevents uploaded logo overlap
   ========================================================= */

.site-header { position:sticky; top:0; z-index:1000; }
.site-nav {
    width:min(1180px,calc(100% - 40px));
    max-width:none;
    min-height:92px;
    height:auto;
    margin:0 auto;
    padding:9px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
}
.site-logo {
    flex-shrink:0;
    min-width:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    line-height:1;
}
.site-logo-image {
    display:block;
    width:auto;
    height:70px;
    max-width:150px;
    max-height:70px;
    object-fit:contain;
}
.main-navigation { min-height:70px; }
.main-navigation > a,
.nav-dropdown-button { padding:25px 0; }
.main-navigation > a.active::after,
.nav-dropdown-button.active::after { bottom:13px; }
.nav-dropdown-menu { top:63px; }

@media (max-width:850px) {
    .site-nav {
        width:calc(100% - 30px);
        min-height:76px;
        padding:8px 0;
    }
    .site-logo { min-width:auto; }
    .site-logo-image { height:58px; max-height:58px; max-width:125px; }
    .mobile-menu-button { flex-shrink:0; }
}
@media (max-width:480px) {
    .site-nav { width:calc(100% - 24px); min-height:70px; }
    .site-logo-image { height:52px; max-height:52px; max-width:110px; }
}

/* =========================================================
   ADMIN RSVP DETAIL
   ========================================================= */

.admin-detail-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 22px;
}

.admin-detail-list {
    display: grid;
}

.admin-detail-row {
    display: grid;
    grid-template-columns:
        170px minmax(0, 1fr);
    gap: 20px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(41, 35, 58, .07);
}

.admin-detail-row:first-child {
    padding-top: 0;
}

.admin-detail-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.admin-detail-label {
    color: var(--ink-soft);

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .10em;

    text-transform: uppercase;
}

.admin-detail-value {
    min-width: 0;

    color: var(--ink);
    word-break: break-word;
}

.admin-detail-value small {
    display: block;

    margin-top: 4px;

    color: var(--ink-soft);
}

.admin-detail-value a {
    color: var(--lavender-dark);
    font-weight: 700;
}

.admin-message-box {
    padding: 22px 24px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--sky-soft),
            #fff
        );

    border:
        1px solid rgba(41, 35, 58, .07);

    line-height: 1.8;
}

.admin-message-box-highlight {
    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--lavender-soft)
        );
}

.admin-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 850px) {

    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .admin-detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .admin-detail-actions {
        flex-direction: column;
    }

    .admin-detail-actions .button {
        width: 100%;
    }

}

/* =========================================================
   ADMIN RSVP EDIT
   ========================================================= */

.admin-danger-card {
    margin-top: 24px;

    border:
        1px solid
        rgba(183, 56, 56, .14);

    background:
        linear-gradient(
            135deg,
            #fff7f7,
            #fff
        );
}

.admin-danger-card .eyebrow {
    color: #a84444;
}

.admin-fields-disabled {
    opacity: .55;
}


/* =========================================================
   ADMIN NAVIGATION V2 + RSVP MANAGER UI
   Final UI fixes for admin navigation and RSVP pages
   ========================================================= */

/* ---------------------------------------------------------
   Admin page spacing
   --------------------------------------------------------- */

.admin-navigation + .container {
    padding-top: 48px;
    padding-bottom: 80px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.admin-section-card + .admin-section-card {
    margin-top: 22px;
}

.admin-section-heading p {
    margin-top: 0;
}

.admin-section-heading > div > p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Admin Navigation V2
   --------------------------------------------------------- */

.admin-navigation {
    position: sticky;
    top: 0;
    z-index: 1100;

    background:
        radial-gradient(
            circle at 5% 0%,
            rgba(244, 196, 204, .08),
            transparent 24%
        ),
        linear-gradient(
            90deg,
            #2d2440 0%,
            #443054 48%,
            #593747 100%
        );

    color: #fff;

    border-bottom:
        1px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 8px 28px rgba(41, 35, 58, .16);
}

.admin-navigation-inner {
    width: min(
        1440px,
        calc(100% - 32px)
    );

    max-width: none;

    min-height: 72px;

    margin: 0 auto;
    padding: 8px 0;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 20px;
}

.admin-brand {
    min-width: 110px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    color: #fff;

    line-height: 1.05;

    white-space: nowrap;
}

.admin-brand strong {
    display: block;

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.06rem;
    font-weight: 700;
}

.admin-brand span {
    margin-top: 5px;

    color: #f4c4cc;

    font-size: .53rem;
    font-weight: 700;

    letter-spacing: .19em;
}

.admin-nav-links {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 5px;

    flex-grow: 0;
}

.admin-nav-links a {
    position: relative;

    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 9px 10px;

    border-radius: 12px;

    color: rgba(255, 255, 255, .72);

    font-size: .79rem;
    font-weight: 700;

    white-space: nowrap;

    transition:
        color .15s ease,
        background .15s ease,
        transform .15s ease;
}

.admin-nav-links a:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, .075);

    transform: translateY(-1px);
}

.admin-nav-links a.active {
    color: #fff;

    background:
        rgba(255, 255, 255, .10);
}

.admin-nav-links a.active::after {
    left: 12px;
    right: 12px;
    bottom: 4px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            #f4c4cc,
            #f5d78f
        );
}

.admin-nav-icon {
    flex-shrink: 0;

    font-size: .9rem;
    line-height: 1;
}

.admin-nav-label {
    display: block;
}

.admin-navigation-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;
}

.admin-navigation-external,
.admin-logout-button {
    min-height: 39px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px 10px;

    border-radius: 11px;

    color: #fff;

    background:
        rgba(255, 255, 255, .075);

    border:
        1px solid rgba(255, 255, 255, .13);

    font-size: .75rem;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.admin-navigation-external:hover,
.admin-logout-button:hover {
    background:
        rgba(255, 255, 255, .14);

    border-color:
        rgba(255, 255, 255, .22);

    transform: translateY(-1px);
}

.admin-navigation-external small {
    font-size: .67rem;
    opacity: .68;
}

.admin-logout-form {
    margin: 0;
}

.admin-logout-button {
    cursor: pointer;
}

.admin-logout-label,
.admin-navigation-external-label {
    display: inline;
}


/* ---------------------------------------------------------
   RSVP Header
   --------------------------------------------------------- */

.admin-rsvp-header {
    padding-top: 8px;
}

.admin-rsvp-header h1 {
    margin-bottom: 8px;
}

.admin-rsvp-header > div:first-child > p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   RSVP Summary Cards
   --------------------------------------------------------- */

.admin-rsvp-summary {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;

    margin-bottom: 22px;
}

.admin-rsvp-summary-card {
    min-height: 116px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 20px;

    border:
        1px solid var(--border);

    border-radius: 20px;

    background: #fff;

    box-shadow:
        var(--shadow-sm);
}

.admin-rsvp-summary-card:nth-child(1) {
    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            #fff
        );
}

.admin-rsvp-summary-card:nth-child(2) {
    background:
        linear-gradient(
            135deg,
            var(--sage-soft),
            #fff
        );
}

.admin-rsvp-summary-card:nth-child(3) {
    background:
        linear-gradient(
            135deg,
            var(--sky-soft),
            #fff
        );
}

.admin-rsvp-summary-card:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            var(--lavender-soft),
            #fff
        );
}

.admin-rsvp-summary-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background:
        rgba(255, 255, 255, .82);

    box-shadow:
        0 7px 18px rgba(41, 35, 58, .06);

    font-size: 1.25rem;
}

.admin-rsvp-summary-card small {
    display: block;

    margin-bottom: 4px;

    color: var(--ink-soft);

    font-size: .64rem;
    font-weight: 800;

    letter-spacing: .09em;
}

.admin-rsvp-summary-card strong {
    display: block;

    font-size: 1.85rem;

    line-height: 1;
}


/* ---------------------------------------------------------
   RSVP List Card
   --------------------------------------------------------- */

.admin-rsvp-list-card {
    overflow: hidden;
}

.admin-rsvp-section-heading {
    margin-bottom: 12px;
}

.admin-table-count {
    padding: 8px 11px;

    border-radius: 999px;

    background:
        var(--lavender-soft);

    color:
        var(--lavender-dark);

    font-size: .73rem;
    font-weight: 800;
}


/* ---------------------------------------------------------
   RSVP Table
   --------------------------------------------------------- */

.admin-rsvp-table {
    min-width: 1040px;
}

.admin-rsvp-table th {
    padding-top: 13px;
    padding-bottom: 13px;

    background:
        rgba(248, 246, 250, .88);

    border-top:
        1px solid rgba(41, 35, 58, .06);

    border-bottom:
        1px solid rgba(41, 35, 58, .09);
}

.admin-rsvp-table th:first-child {
    border-top-left-radius: 12px;
}

.admin-rsvp-table th:last-child {
    border-top-right-radius: 12px;
}

.admin-rsvp-table td {
    vertical-align: middle;

    padding-top: 18px;
    padding-bottom: 18px;
}

.admin-rsvp-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-rsvp-guest {
    min-width: 215px;

    display: flex;
    align-items: center;

    gap: 12px;
}

.admin-rsvp-avatar,
.admin-rsvp-profile-avatar {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        var(--lavender-dark);

    background:
        linear-gradient(
            135deg,
            var(--rose-soft),
            var(--lavender-soft)
        );

    border:
        1px solid rgba(116, 91, 166, .10);

    font-weight: 900;
}

.admin-rsvp-avatar {
    width: 42px;
    height: 42px;

    border-radius: 13px;

    font-size: .95rem;
}

.admin-rsvp-name {
    display: block;

    line-height: 1.25;
}

.admin-rsvp-message-preview {
    max-width: 225px;
}

.admin-rsvp-guest-count strong,
.admin-rsvp-date strong {
    display: block;
}

.admin-rsvp-guest-count small,
.admin-rsvp-date small {
    display: block;

    margin-top: 3px;

    color:
        var(--ink-soft);

    font-size: .75rem;
}

.admin-rsvp-contact {
    min-width: 205px;

    display: grid;

    gap: 4px;
}

.admin-rsvp-contact a {
    width: fit-content;

    color:
        var(--lavender-dark);

    font-size: .82rem;
    font-weight: 700;
}

.admin-rsvp-contact a:hover {
    text-decoration: underline;
}

.admin-table-actions-heading {
    min-width: 220px;
}

.admin-rsvp-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    white-space: nowrap;
}

.admin-rsvp-delete-form {
    margin: 0;
}

.admin-rsvp-action {
    min-height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding: 7px 9px;

    border-radius: 10px;

    border:
        1px solid rgba(41, 35, 58, .10);

    background: #fff;

    color: var(--ink);

    font: inherit;
    font-size: .73rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.admin-rsvp-action:hover {
    transform: translateY(-1px);

    box-shadow:
        0 7px 16px rgba(41, 35, 58, .06);
}

.admin-rsvp-action-view {
    color:
        var(--lavender-dark);

    background:
        var(--lavender-soft);

    border-color:
        rgba(116, 91, 166, .12);
}

.admin-rsvp-action-edit {
    color:
        var(--gold-dark);

    background:
        var(--gold-soft);

    border-color:
        rgba(155, 116, 40, .13);
}

.admin-rsvp-action-delete {
    color:
        var(--danger);

    background:
        var(--danger-soft);

    border-color:
        rgba(183, 72, 85, .13);
}


/* ---------------------------------------------------------
   RSVP Detail Profile
   --------------------------------------------------------- */

.admin-rsvp-profile-card {
    min-height: 130px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;

    margin-bottom: 22px;
    padding: 24px 28px;

    border:
        1px solid rgba(116, 91, 166, .10);

    border-radius: 24px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(185, 217, 245, .24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--rose-soft),
            #fff 54%,
            var(--lavender-soft)
        );

    box-shadow:
        var(--shadow-md);
}

.admin-rsvp-profile-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 18px;
}

.admin-rsvp-profile-avatar {
    width: 68px;
    height: 68px;

    border-radius: 20px;

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.7rem;
}

.admin-rsvp-profile-label {
    display: block;

    margin-bottom: 3px;

    color:
        var(--rose-dark);

    font-size: .63rem;
    font-weight: 800;

    letter-spacing: .15em;
}

.admin-rsvp-profile-card h2 {
    margin: 0;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            1.7rem,
            3vw,
            2.35rem
        );
}

.admin-rsvp-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px 12px;

    margin-top: 8px;

    color:
        var(--ink-soft);

    font-size: .77rem;
}

.admin-rsvp-profile-count {
    min-width: 110px;

    padding: 15px 18px;

    text-align: center;

    border-radius: 17px;

    background:
        rgba(255, 255, 255, .76);

    border:
        1px solid rgba(41, 35, 58, .07);
}

.admin-rsvp-profile-count small {
    display: block;

    margin-bottom: 5px;

    color:
        var(--ink-soft);

    font-size: .6rem;
    font-weight: 800;

    letter-spacing: .11em;
}

.admin-rsvp-profile-count strong {
    display: block;

    font-size: 2rem;

    line-height: 1;
}


/* ---------------------------------------------------------
   RSVP Timeline
   --------------------------------------------------------- */

.admin-rsvp-timeline-card {
    margin-bottom: 22px;
}

.admin-rsvp-timeline {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;
}

.admin-rsvp-timeline-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

    border-radius: 17px;

    background:
        #fbfafc;

    border:
        1px solid rgba(41, 35, 58, .07);
}

.admin-rsvp-timeline-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            var(--sky-soft),
            var(--lavender-soft)
        );
}

.admin-rsvp-timeline-item small {
    display: block;

    margin-bottom: 2px;

    color:
        var(--ink-soft);

    font-size: .61rem;
    font-weight: 800;

    letter-spacing: .10em;
}

.admin-rsvp-timeline-item strong {
    display: block;

    font-size: .9rem;
}

.admin-rsvp-timeline-item div > span {
    display: block;

    margin-top: 1px;

    color:
        var(--ink-soft);

    font-size: .73rem;
}


/* ---------------------------------------------------------
   RSVP Edit Form
   --------------------------------------------------------- */

.admin-rsvp-edit-profile {
    min-height: 112px;
}

.admin-rsvp-edit-card {
    margin-bottom: 22px;
}

.admin-rsvp-edit-form {
    max-width: none;

    gap: 0;
}

.admin-form-section {
    padding: 2px 0 30px;
}

.admin-form-section + .admin-form-section {
    padding-top: 30px;

    border-top:
        1px solid rgba(41, 35, 58, .07);
}

.admin-form-section .admin-section-heading {
    align-items: flex-start;

    margin-bottom: 22px;
}

.admin-form-section .admin-section-heading h2 {
    margin-bottom: 5px;
}

.admin-form-section .admin-section-heading p:last-child {
    max-width: 620px;

    color:
        var(--ink-soft);

    font-size: .84rem;
}

.admin-rsvp-edit-form .form-group {
    gap: 7px;
}

.admin-rsvp-edit-form .form-row {
    margin-top: 18px;
}

.admin-rsvp-edit-form input,
.admin-rsvp-edit-form textarea,
.admin-rsvp-edit-form select {
    background:
        #fff;

    border-color:
        rgba(41, 35, 58, .13);
}

.admin-rsvp-edit-form textarea {
    min-height: 120px;
}

.admin-rsvp-form-actions {
    margin-top: 0;
    padding-top: 24px;

    border-top:
        1px solid rgba(41, 35, 58, .07);
}

.admin-fields-disabled {
    opacity: .48;
}

.admin-fields-disabled input {
    cursor: not-allowed;

    background:
        #f7f5f7;
}


/* ---------------------------------------------------------
   Danger card
   --------------------------------------------------------- */

.admin-danger-card {
    margin-top: 22px;

    border-color:
        rgba(183, 56, 56, .14);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(255, 230, 234, .65),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fff7f7,
            #fff
        );
}

.admin-danger-card .admin-section-heading {
    margin-bottom: 18px;
}


/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.admin-pagination {
    padding-top: 22px;

    border-top:
        1px solid rgba(41, 35, 58, .06);
}

.admin-pagination nav {
    display: flex;
    justify-content: center;
}


/* ---------------------------------------------------------
   Admin navigation responsive
   --------------------------------------------------------- */

@media (max-width: 1260px) {

    .admin-navigation-inner {
        width:
            calc(100% - 24px);

        gap: 12px;
    }

    .admin-nav-links {
        gap: 3px;
    }

    .admin-nav-links a {
        padding-inline: 8px;

        font-size: .74rem;
    }

    .admin-navigation-external,
    .admin-logout-button {
        padding-inline: 8px;

        font-size: .7rem;
    }

}


@media (max-width: 1080px) {

    .admin-navigation-inner {
        grid-template-columns:
            auto
            minmax(0, 1fr);

        padding-top: 9px;
        padding-bottom: 9px;
    }

    .admin-navigation-actions {
        grid-column: 2;

        justify-self: end;
    }

    .admin-nav-links {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        padding-bottom: 2px;

        scrollbar-width: thin;
    }

    .admin-nav-links a {
        flex: 0 0 auto;

        min-height: 41px;
    }

}


@media (max-width: 850px) {

    .admin-navigation-inner {
        align-items: center;

        flex-wrap: nowrap;

        padding:
            10px 0;
    }

    .admin-navigation-inner form {
        margin-left: 0;
    }

    .admin-nav-links {
        order: initial;

        gap: 4px;
    }

    .admin-nav-links a {
        padding:
            8px 10px;
    }

    .admin-nav-links a.active::after {
        bottom: 3px;
    }

    .admin-navigation-actions {
        gap: 5px;
    }

}


@media (max-width: 680px) {

    .admin-navigation-inner {
        grid-template-columns:
            minmax(0, 1fr)
            auto;

        width:
            calc(100% - 20px);
    }

    .admin-brand {
        min-width: 0;
    }

    .admin-navigation-actions {
        gap: 4px;
    }

    .admin-navigation-external-label,
    .admin-logout-label {
        display: none;
    }

    .admin-navigation-external,
    .admin-logout-button {
        width: 38px;
        min-width: 38px;

        padding:
            8px;
    }

    .admin-navigation-external small {
        display: none;
    }

    .admin-nav-links {
        padding-top: 2px;
    }

    .admin-nav-links a {
        min-height: 39px;

        font-size: .72rem;
    }

}


@media (max-width: 460px) {

    .admin-brand strong {
        font-size: .96rem;
    }

    .admin-brand span {
        font-size: .48rem;
    }

    .admin-nav-icon {
        font-size: .85rem;
    }

}


/* ---------------------------------------------------------
   RSVP responsive
   --------------------------------------------------------- */

@media (max-width: 1000px) {

    .admin-rsvp-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .admin-navigation + .container {
        padding-top: 34px;
    }

    .admin-rsvp-profile-card {
        align-items: flex-start;

        flex-direction: column;
    }

    .admin-rsvp-profile-count {
        width: 100%;
    }

    .admin-rsvp-timeline {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .admin-rsvp-summary {
        grid-template-columns: 1fr;
    }

    .admin-rsvp-summary-card {
        min-height: auto;
    }

    .admin-rsvp-section-heading {
        gap: 12px;
    }

    .admin-table-count {
        width: fit-content;
    }

    .admin-rsvp-profile-card {
        padding: 21px;
    }

    .admin-rsvp-profile-main {
        align-items: flex-start;
    }

    .admin-rsvp-profile-avatar {
        width: 56px;
        height: 56px;

        border-radius: 17px;

        font-size: 1.4rem;
    }

    .admin-rsvp-form-actions {
        align-items: stretch;

        flex-direction: column;
    }

    .admin-rsvp-form-actions .button {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .admin-navigation + .container {
        width:
            calc(100% - 24px);
    }

    .admin-rsvp-profile-main {
        width: 100%;
    }

    .admin-rsvp-profile-meta {
        align-items: flex-start;

        flex-direction: column;
    }

    .admin-rsvp-summary-card {
        padding: 17px;
    }

    .admin-section-card {
        border-radius: 20px;
    }

}


/* =========================================================
   GALLERY — BABY CHAPTER GUEST PHOTO SHARING
   ========================================================= */

.gallery-baby-share {
    position: relative;
    overflow: hidden;
    padding: 10px 20px 95px;
}

.gallery-baby-share::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 20%, rgba(var(--theme-rgb), .12), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(var(--theme-secondary-rgb), .10), transparent 30%);
}

.gallery-baby-share > .container {
    position: relative;
    z-index: 1;
}

.gallery-baby-share-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: stretch;
    border: 1px solid rgba(41, 35, 58, .08);
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(255,255,255,.97), rgba(255,255,255,.88));
    box-shadow: 0 24px 65px rgba(41, 35, 58, .10);
}

.gallery-baby-share-card::before {
    content: "♡";
    position: absolute;
    right: 34%;
    top: -78px;
    font-family: 'Playfair Display', serif;
    font-size: 15rem;
    line-height: 1;
    color: rgba(var(--theme-rgb), .045);
    pointer-events: none;
}

.gallery-baby-share-copy {
    position: relative;
    z-index: 2;
    padding: 58px 55px;
}

.gallery-baby-share-copy h2 {
    max-width: 620px;
    margin: 8px 0 22px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.8rem, 5vw, 4.7rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.035em;
}

.gallery-baby-share-copy h2 em {
    color: var(--theme-primary);
    font-weight: 500;
}

.gallery-baby-share-copy > p {
    max-width: 650px;
    margin: 0 0 14px;
    color: var(--theme-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.gallery-baby-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.gallery-baby-share-note {
    max-width: 630px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 24px;
    padding: 15px 17px;
    border-radius: 16px;
    background: var(--theme-soft-3);
    border: 1px solid rgba(41, 35, 58, .06);
}

.gallery-baby-share-note > span {
    flex-shrink: 0;
    font-size: 1.05rem;
}

.gallery-baby-share-note p {
    margin: 0;
    color: var(--theme-muted);
    font-size: .82rem;
    line-height: 1.6;
}

.gallery-baby-share-visual {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 35px;
    text-align: center;
    background:
        radial-gradient(circle at 20% 10%, rgba(255,255,255,.65), transparent 28%),
        linear-gradient(145deg, var(--theme-soft-1), var(--theme-soft-2) 48%, var(--theme-soft-4));
}

.gallery-baby-share-visual::after {
    content: "✦";
    position: absolute;
    right: 24px;
    top: 18px;
    color: rgba(var(--theme-secondary-rgb), .18);
    font-size: 3rem;
    transform: rotate(12deg);
}

.gallery-baby-share-icon {
    width: 105px;
    height: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: 30px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 18px 42px rgba(41, 35, 58, .10);
    font-size: 3rem;
}

.gallery-baby-share-visual > span {
    display: block;
    margin-bottom: 9px;
    color: var(--theme-primary);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.gallery-baby-share-visual > strong {
    display: block;
    max-width: 340px;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    line-height: 1.1;
}

.gallery-baby-share-visual > p {
    max-width: 340px;
    margin: 14px 0 0;
    color: var(--theme-muted);
    font-size: .9rem;
    line-height: 1.65;
}

@media (max-width: 900px) {
    .gallery-baby-share-card { grid-template-columns: 1fr; }
    .gallery-baby-share-visual { min-height: 360px; }
}

@media (max-width: 650px) {
    .gallery-baby-share { padding: 0 15px 75px; }
    .gallery-baby-share-card { border-radius: 24px; }
    .gallery-baby-share-copy { padding: 38px 24px; }
    .gallery-baby-share-copy h2 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
    .gallery-baby-share-actions { flex-direction: column; align-items: stretch; }
    .gallery-baby-share-actions .button { width: 100%; }
    .gallery-baby-share-visual { min-height: 300px; padding: 40px 24px; }
    .gallery-baby-share-icon { width: 88px; height: 88px; border-radius: 25px; font-size: 2.5rem; }
}

/* =========================================================
   HOMEPAGE HERO PHOTO — POLAROID V3
   Editorial invitation-style photo treatment
   ========================================================= */

.hero-home .hero-art {
    position: relative;

    min-height: 590px;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
}


/* Decorative soft circles behind the photo */

.hero-home .hero-art::before,
.hero-home .hero-art::after {
    content: "";

    position: absolute;

    z-index: 0;

    border-radius: 50%;

    pointer-events: none;
}

.hero-home .hero-art::before {
    width: 185px;
    height: 185px;

    top: 30px;
    right: 5px;

    background:
        rgba(
            var(--theme-rgb),
            .18
        );
}

.hero-home .hero-art::after {
    width: 150px;
    height: 150px;

    left: 10px;
    bottom: 10px;

    background:
        rgba(
            var(--theme-secondary-rgb),
            .15
        );
}


/* Polaroid frame */

.hero-home .photo-frame-main {
    position: relative;

    z-index: 2;

    width:
        min(
            100%,
            560px
        );

    height: 560px;

    display: block;

    padding:
        13px
        13px
        64px;

    overflow: visible;

    border: 0;

    border-radius: 5px;

    background: #fff;

    box-shadow:
        0 28px 70px
        rgba(41, 35, 58, .17);

    transform:
        rotate(2.2deg);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.hero-home .photo-frame-main::before,
.hero-home .photo-frame-main::after {
    display: none;
}


@media (hover: hover) and (pointer: fine) {

    .hero-home .photo-frame-main:hover {
        transform:
            rotate(.8deg)
            translateY(-4px);

        box-shadow:
            0 34px 82px
            rgba(41, 35, 58, .20);
    }

}


/* Uploaded photo */

.hero-home .photo-frame-main img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        50% 38% !important;

    border-radius: 2px;

    transform: none;

    transition: none;
}


/* Placeholder */

.hero-home .photo-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    border-radius: 2px;

    text-align: center;

    color:
        var(--theme-muted);

    background:
        linear-gradient(
            145deg,
            var(--theme-soft-1),
            var(--theme-soft-2),
            var(--theme-soft-4)
        );
}


/* Polaroid caption */

.hero-home .scribble {
    position: absolute;

    z-index: 4;

    left: 50%;
    right: auto;
    bottom: 12px;

    width: max-content;
    max-width:
        calc(100% - 30px);

    margin: 0;

    padding: 0;

    color:
        var(--theme-secondary);

    background: transparent;

    border: 0;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    font-family:
        'Playfair Display',
        serif;

    font-size: 1.2rem;
    font-style: italic;

    line-height: 1.2;

    white-space: nowrap;

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* Small sparkle near the photo */

.hero-home .photo-frame-main + .scribble::after {
    content: " ♡";

    color:
        var(--theme-primary);

    font-size: .95em;
}


/* Tablet */

@media (max-width: 1000px) {

    .hero-home .photo-frame-main {
        width:
            min(
                100%,
                500px
            );

        height: 520px;
    }

}


@media (max-width: 850px) {

    .hero-home .hero-art {
        width:
            min(
                570px,
                100%
            );

        min-height: 560px;

        margin-inline: auto;
    }

    .hero-home .photo-frame-main {
        width:
            min(
                100%,
                520px
            );

        height: 520px;

        transform:
            rotate(1.6deg);
    }

    .hero-home .hero-art::before {
        width: 150px;
        height: 150px;
    }

    .hero-home .hero-art::after {
        width: 120px;
        height: 120px;
    }

}


/* Mobile */

@media (max-width: 600px) {

    .hero-home .hero-art {
        min-height: 500px;
    }

    .hero-home .photo-frame-main {
        width:
            calc(100% - 18px);

        height: 470px;

        padding:
            10px
            10px
            55px;

        transform:
            rotate(1deg);
    }

    .hero-home .photo-frame-main img {
        object-position:
            50% 36% !important;
    }

    .hero-home .scribble {
        bottom: 11px;

        font-size:
            1rem;
    }

    .hero-home .hero-art::before {
        width: 120px;
        height: 120px;

        top: 18px;
        right: -8px;
    }

    .hero-home .hero-art::after {
        width: 95px;
        height: 95px;

        left: -4px;
        bottom: 18px;
    }

}


/* Very small phones */

@media (max-width: 400px) {

    .hero-home .hero-art {
        min-height: 450px;
    }

    .hero-home .photo-frame-main {
        height: 420px;
    }

    .hero-home .scribble {
        font-size: .92rem;
    }

}