{"success":true,"html":"<script>\n\/* Section navigation \u2014 this markup renders in two hosts that scroll differently:\n   the category-listing modal, where `.website-demo-modal` is itself the scroller\n   (.modal-content-outer rule in website-products.css), and the PDP modal, where\n   BiModal loads this page into an iframe so the scroller is the iframe document.\n   Resolve the element that actually overflows instead of assuming either one. *\/\nif (!window.biDemoNav) {\n    window.biDemoNav = {\n        HEADER_OFFSET: 110,\n        scroller(el) {\n            for (let node = el.parentElement; node; node = node.parentElement) {\n                const overflowY = getComputedStyle(node).overflowY;\n                if ((overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {\n                    return node;\n                }\n            }\n            const doc = el.ownerDocument;\n            return doc.scrollingElement || doc.documentElement;\n        },\n        scrollToSection(fromEl, sectionId) {\n            const root = fromEl.closest('.website-demo-modal') || fromEl.ownerDocument;\n            const target = root.querySelector('[id=\"' + sectionId + '\"]');\n            if (!target) return;\n            const scroller = this.scroller(target);\n            const doc = target.ownerDocument;\n            const isDocument = scroller === doc.scrollingElement || scroller === doc.documentElement;\n            const base = isDocument ? 0 : scroller.getBoundingClientRect().top;\n            const top = scroller.scrollTop + target.getBoundingClientRect().top - base - this.HEADER_OFFSET;\n            scroller.scrollTo({top: Math.max(0, top), behavior: 'smooth'});\n        }\n    };\n}\n\n\/* Gallery lightbox \u2014 vanilla JS, safe for Alpine.js AJAX-injected content *\/\nif (!window.biGalleryLb) {\n    window.biGalleryLb = {\n        el: null, imgs: [], cur: 0, _keyBound: null, _scope: null,\n        open(triggerEl, idx) {\n            const grid = triggerEl.closest('.demo-gallery-grid');\n            \/\/ Use [data-gallery-container] (position:relative, below the popup header)\n            \/\/ Scroll it to top so the lightbox at inset:0 is immediately visible\n            const scope = triggerEl.closest('[data-gallery-container]') || null;\n            this.imgs = Array.from(grid.querySelectorAll('.demo-gallery-item img')).map(i => i.src);\n            this.cur = idx;\n            \/\/ Rebuild if scope changed\n            if (this.el && this._scope !== scope) { this.el.remove(); this.el = null; }\n            this._scope = scope;\n            if (!this.el) this._build(scope);\n            \/\/ Scroll container to top so lightbox (position:absolute, inset:0) is visible\n            if (scope) scope.scrollTop = 0;\n            this._update();\n            this.el.style.display = 'flex';\n            document.addEventListener('keydown', this._keyBound = this._key.bind(this));\n        },\n        close() {\n            if (this.el) this.el.style.display = 'none';\n            document.removeEventListener('keydown', this._keyBound);\n        },\n        prev() { this.cur = (this.cur - 1 + this.imgs.length) % this.imgs.length; this._update(); },\n        next() { this.cur = (this.cur + 1) % this.imgs.length; this._update(); },\n        _update() {\n            this.el.querySelector('.bi-lb-img').src = this.imgs[this.cur];\n            this.el.querySelector('.bi-lb-counter').textContent = (this.cur + 1) + ' \/ ' + this.imgs.length;\n            const multi = this.imgs.length > 1;\n            this.el.querySelector('.gallery-lightbox-prev').style.display = multi ? '' : 'none';\n            this.el.querySelector('.gallery-lightbox-next').style.display = multi ? '' : 'none';\n        },\n        _build(scope) {\n            const d = document.createElement('div');\n            d.className = 'gallery-lightbox' + (scope ? ' gallery-lightbox--in-modal' : '');\n            d.style.display = 'none';\n            d.innerHTML =\n                '<div class=\"gallery-lightbox-counter bi-lb-counter\"><\/div>' +\n                '<button class=\"gallery-lightbox-close\" type=\"button\">&times;<\/button>' +\n                '<button class=\"gallery-lightbox-arrow gallery-lightbox-prev\" type=\"button\">&#10094;<\/button>' +\n                '<img class=\"gallery-lightbox-img bi-lb-img\" src=\"\" alt=\"\" \/>' +\n                '<button class=\"gallery-lightbox-arrow gallery-lightbox-next\" type=\"button\">&#10095;<\/button>';\n            d.addEventListener('click', (e) => { if (e.target === d) this.close(); });\n            d.querySelector('.gallery-lightbox-close').addEventListener('click', () => this.close());\n            d.querySelector('.gallery-lightbox-prev').addEventListener('click', (e) => { e.stopPropagation(); this.prev(); });\n            d.querySelector('.gallery-lightbox-next').addEventListener('click', (e) => { e.stopPropagation(); this.next(); });\n            (scope || document.body).appendChild(d);\n            this.el = d;\n        },\n        _key(e) {\n            if (e.key === 'ArrowLeft') this.prev();\n            if (e.key === 'ArrowRight') this.next();\n            if (e.key === 'Escape') this.close();\n        }\n    };\n}\n<\/script>\n\n<div class=\"website-demo-modal website-demo-baby_shower\"\n     x-data=\"{ menuOpen: false }\">\n\n    <!-- MENU Toggle -->\n    <div class=\"website-demo-menu-bar\">\n        <button class=\"menu-toggle\"\n                @click=\"menuOpen = !menuOpen\"\n                aria-label=\"Toggle&#x20;Menu\"\n                :aria-expanded=\"menuOpen.toString()\">\n            <span class=\"menu-hamburger\">&#9776;<\/span>\n            MENU        <\/button>\n    <\/div>\n\n    <!-- Left-side menu backdrop -->\n    <div class=\"website-demo-nav-backdrop\"\n         x-show=\"menuOpen\"\n         x-transition:enter=\"transition ease-out duration-200\"\n         x-transition:enter-start=\"opacity-0\"\n         x-transition:enter-end=\"opacity-100\"\n         x-transition:leave=\"transition ease-in duration-200\"\n         x-transition:leave-start=\"opacity-100\"\n         x-transition:leave-end=\"opacity-0\"\n         @click=\"menuOpen = false\"\n         x-cloak><\/div>\n\n    <!-- Left-side menu panel (320px) -->\n    <nav class=\"website-demo-nav\"\n         :class=\"{ 'website-demo-nav--open': menuOpen }\"\n         :aria-hidden=\"!menuOpen\">\n        <div class=\"website-demo-nav-inner\">\n            <div class=\"website-demo-nav-header\">\n                                <a href=\"https:\/\/www.basicinvite.com\/\"\n                   class=\"website-demo-nav-logo-link\">\n                    <img class=\"website-demo-nav-logo\"\n                         src=\"https:\/\/www.basicinvite.com\/static\/version1792523958\/frontend\/Basicinvite\/default\/en_US\/BasicInvite_Website\/images\/footer\/basic-invite-logo-mobile-drk.png\"\n                         alt=\"Basic&#x20;Invite\"\n                         loading=\"eager\" \/>\n                <\/a>\n                <button type=\"button\"\n                        class=\"website-demo-nav-close\"\n                        @click=\"menuOpen = false\"\n                        aria-label=\"Close&#x20;Menu\">\n                   X\n                <\/button>\n            <\/div>\n            <ul>\n                                    <li>\n                        <a href=\"#section-introduction\"\n                           @click.prevent=\"menuOpen = false; $nextTick(() => window.biDemoNav.scrollToSection($el, 'section-introduction'))\">\n                            Time &amp; Place                        <\/a>\n                    <\/li>\n                                    <li>\n                        <a href=\"#section-info\"\n                           @click.prevent=\"menuOpen = false; $nextTick(() => window.biDemoNav.scrollToSection($el, 'section-info'))\">\n                            The Details                        <\/a>\n                    <\/li>\n                                    <li>\n                        <a href=\"#section-story\"\n                           @click.prevent=\"menuOpen = false; $nextTick(() => window.biDemoNav.scrollToSection($el, 'section-story'))\">\n                            From the Birthday Girl                        <\/a>\n                    <\/li>\n                                    <li>\n                        <a href=\"#section-location\"\n                           @click.prevent=\"menuOpen = false; $nextTick(() => window.biDemoNav.scrollToSection($el, 'section-location'))\">\n                            Directions                        <\/a>\n                    <\/li>\n                                    <li>\n                        <a href=\"#section-rsvp\"\n                           @click.prevent=\"menuOpen = false; $nextTick(() => window.biDemoNav.scrollToSection($el, 'section-rsvp'))\">\n                            Your Response                        <\/a>\n                    <\/li>\n                                    <li>\n                        <a href=\"#section-gallery\"\n                           @click.prevent=\"menuOpen = false; $nextTick(() => window.biDemoNav.scrollToSection($el, 'section-gallery'))\">\n                            Gallery                        <\/a>\n                    <\/li>\n                            <\/ul>\n        <\/div>\n    <\/nav>\n\n    <!-- HERO SECTION -->\n    <div class=\"website-demo-hero\">\n                    <div class=\"demo-hero-image\">\n                <img src=\"https:\/\/design.basicinvite.com\/api\/ProductTemplates\/designs\/basicinvite\/party_website\/Garden_Flowers_Baby_Shower_Website\/Garden_Flowers_Baby_Shower_Website?height=1100&amp;width=1600&amp;mode=design\"\n                     alt=\"Baby&#x20;Shower&#x20;for&#x20;Garden&#x20;Flowers&#x20;Baby&#x20;Shower&#x20;Website\"\n                     loading=\"eager\" \/>\n            <\/div>\n            <\/div>\n\n    <!-- Demo Content Sections -->\n    <div class=\"website-demo-body\">\n        <p class=\"demo-note\">\n            This is a preview of what your website will look like. You can customize all content, colors, and images after purchase.        <\/p>\n\n                                <div id=\"section-introduction\"\n                 class=\"demo-section-block\">\n\n                                    <h2 class=\"demo-section-title\">\n                        Time &amp; Place                    <\/h2>\n                \n                                                            <div class=\"demo-section-text\">\n                            Join us on October 3rd at:\n\nTHE GARDEN ROOM\n123 Main Street\nChicago, Illinois 60601\n\nFestivities will start at two pm and end at five pm.                        <\/div>\n                    \n                            <\/div>\n                                <div id=\"section-info\"\n                 class=\"demo-section-block\">\n\n                                    <h2 class=\"demo-section-title\">\n                        The Details                    <\/h2>\n                \n                                                            <div class=\"demo-section-text\">\n                            Please join us for an afternoon of fun, games, and celebration as we shower the mommy-to-be with love!\n\nLight refreshments and desserts will be served. There will be fun games and activities for all guests to enjoy!                        <\/div>\n                    \n                            <\/div>\n                                <div id=\"section-story\"\n                 class=\"demo-section-block\">\n\n                                    <h2 class=\"demo-section-title\">\n                        From the Birthday Girl                    <\/h2>\n                \n                                    <div class=\"demo-text-with-image\">\n                                                    <img src=\"https:\/\/www.basicinvite.com\/static\/version1792523958\/frontend\/Basicinvite\/default\/en_US\/BasicInvite_Website\/images\/birthday\/birthday_one.jpeg\"\n                                 alt=\"From&#x20;the&#x20;Birthday&#x20;Girl\"\n                                 loading=\"lazy\" \/>\n                                                                            <div class=\"demo-section-text\">\n                                Hi everyone! I hope you can come to my birthday party, I can&#039;t wait to get all my friends together! I&#039;m baking a special cake with my Grandmother from her famous secret recipe.                            <\/div>\n                                            <\/div>\n\n                            <\/div>\n                                <div id=\"section-location\"\n                 class=\"demo-section-block\">\n\n                                    <h2 class=\"demo-section-title\">\n                        Directions                    <\/h2>\n                \n                                                                                                                                                <div class=\"demo-map-row\">\n                                <div class=\"demo-address-card\">\n                                    <h3 class=\"demo-address-card-title\">\n                                        The Garden Room                                    <\/h3>\n                                    <hr class=\"location-divider custom-border\">\n                                                                        <p class=\"demo-address-card-text\">\n                                                                                    <strong>Basic Invite<\/strong><br \/>\n                                                                                St George, St George, UT 84770                                    <\/p>\n                                <\/div>\n                                <div class=\"demo-map-embed\">\n                                    <iframe\n                                        src=\"https:\/\/maps.google.com\/maps?q=St George, St George, UT 84770&t=&z=13&ie=UTF8&iwloc=&output=embed\"\n                                        width=\"100%\"\n                                        height=\"300\"\n                                        style=\"border:0;\"\n                                        allowfullscreen=\"\"\n                                        loading=\"lazy\"\n                                        referrerpolicy=\"no-referrer-when-downgrade\"\n                                        title=\"The&#x20;Garden&#x20;Room\">\n                                    <\/iframe>\n                                <\/div>\n                            <\/div>\n                                                                    \n                            <\/div>\n                                <div id=\"section-rsvp\"\n                 class=\"demo-section-block\">\n\n                                    <h2 class=\"demo-section-title\">\n                        Your Response                    <\/h2>\n                \n                                                        <div class=\"demo-form-placeholder demo-rsvp-form\">\n                                                    <div class=\"demo-form-row\">\n                                <label class=\"demo-form-label\">\n                                    First &amp; Last Name                                <\/label>\n                                                                                                    <div class=\"demo-form-row-inline\">\n                                        <input type=\"text\" placeholder=\"First&#x20;Name\" disabled \/>\n                                        <input type=\"text\" placeholder=\"Last&#x20;Name\" disabled \/>\n                                    <\/div>\n                                                            <\/div>\n                                                    <div class=\"demo-form-row\">\n                                <label class=\"demo-form-label\">\n                                    Response                                <\/label>\n                                                                                                    <div class=\"demo-radio-group\">\n                                                                                    <label class=\"demo-radio-label\">\n                                                <input type=\"radio\" disabled \/>\n                                                We&#039;ll be there!                                            <\/label>\n                                                                                    <label class=\"demo-radio-label\">\n                                                <input type=\"radio\" disabled \/>\n                                                We can&#039;t make it!                                            <\/label>\n                                                                            <\/div>\n                                                            <\/div>\n                                                    <div class=\"demo-form-row\">\n                                <label class=\"demo-form-label\">\n                                    Send a Note                                <\/label>\n                                                                                                    <textarea disabled rows=\"3\"><\/textarea>\n                                                            <\/div>\n                                                <div class=\"demo-form-submit mt-0\">\n                            <span class=\"demo-submit-btn disabled mt-4\">\n                                Submit                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                            <\/div>\n                                <div id=\"section-gallery\"\n                 class=\"demo-section-block\">\n\n                                    <h2 class=\"demo-section-title\">\n                        Gallery                    <\/h2>\n                \n                                    <div class=\"demo-gallery-grid\">\n                                                    <div class=\"demo-gallery-item\" onclick=\"biGalleryLb.open(this, 0)\">\n                                <img src=\"https:\/\/www.basicinvite.com\/static\/version1792523958\/frontend\/Basicinvite\/default\/en_US\/BasicInvite_Website\/images\/birthday\/birthday_two.jpeg\"\n                                     alt=\"Gallery&#x20;image\"\n                                     loading=\"lazy\" \/>\n                                <div class=\"demo-gallery-zoom\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                        <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n                                        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"demo-gallery-item\" onclick=\"biGalleryLb.open(this, 1)\">\n                                <img src=\"https:\/\/www.basicinvite.com\/static\/version1792523958\/frontend\/Basicinvite\/default\/en_US\/BasicInvite_Website\/images\/birthday\/birthday_three.jpeg\"\n                                     alt=\"Gallery&#x20;image\"\n                                     loading=\"lazy\" \/>\n                                <div class=\"demo-gallery-zoom\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                        <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n                                        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                                                    <div class=\"demo-gallery-item\" onclick=\"biGalleryLb.open(this, 2)\">\n                                <img src=\"https:\/\/www.basicinvite.com\/static\/version1792523958\/frontend\/Basicinvite\/default\/en_US\/BasicInvite_Website\/images\/birthday\/birthday_four.jpeg\"\n                                     alt=\"Gallery&#x20;image\"\n                                     loading=\"lazy\" \/>\n                                <div class=\"demo-gallery-zoom\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\">\n                                        <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n                                        <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n                                    <\/svg>\n                                <\/div>\n                            <\/div>\n                                            <\/div>\n\n                            <\/div>\n        \n    <\/div>\n\n    <div class=\"website-footer custom-color\">\n            <a href=\"https:\/\/www.basicinvite.com\/?utm_source=website&utm_medium=baby_shower&utm_term=demo\"\n               data-promo-id=\"website-demo-logo\"\n               data-promo-name=\"Personalized Event Website\"\n               data-promo-creative=\"logo1\"\n               data-promo-position=\"website_1\">\n                <img class=\"logo\"\n                     title=\"Basic&#x20;Invite\"\n                     src=\"https:\/\/images.basicinvite.com\/media\/logo\/stores\/2\/mobile-logo.png\"\n                     alt=\"Basic&#x20;Invite\" \/>\n            <\/a>\n            <div class=\"tagline\">\n                <a href=\"https:\/\/www.basicinvite.com\/websites\/baby_shower.html?utm_source=website&utm_medium=baby_shower&utm_term=demo\"\n                   data-promo-id=\"website-demo-url\"\n                   data-promo-name=\"Personalized Event Website\"\n                   data-promo-creative=\"url\"\n                   data-promo-position=\"website_2\">\n                    Create Your Own Free Event Website                <\/a>\n            <\/div>\n        <\/div>\n<\/div>\n"}