.demo-bar.demo-with-audit{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;padding:7px 10px;min-height:94px}
.demo-with-audit .demo-template-name{font-size:11px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.demo-audit-nav{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:18px}
.demo-bar .demo-audit-nav a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px 8px;border:0;background:transparent;border-radius:6px;font-size:11px;line-height:1.3;text-decoration:none}
.demo-audit-nav a:hover{background:color-mix(in srgb,var(--paper) 60%,var(--color) 10%)}
.demo-audit-nav [data-icon]{width:14px;height:14px}
.demo-previous [data-icon]{rotate:180deg}
.demo-position{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:48px;text-align:center;color:inherit}
@media(max-width:360px){.demo-bar.demo-with-audit{gap:4px;padding-inline:6px}.demo-with-audit .demo-template-name{font-size:10px}.demo-audit-nav{gap:8px}.demo-bar .demo-audit-nav a{min-height:32px;font-size:10px}}


/* App chrome: demo/preview bar follows the PINK site identity, not the template theme. Invitation content below keeps its own theme. */
.demo-bar{background:#fff9fb;color:#4b3340;border-bottom:1px solid #f0dce5}
.demo-bar>a{border-color:#f0dce5;color:#4b3340;min-height:44px}
.demo-bar .demo-back{background:transparent;color:#94516e}
.demo-bar .demo-choose{background:#f0bfd3;border-color:#f0bfd3;color:#582a3d}
.demo-bar .demo-choose:hover{background:#eab0ca}
.demo-bar .demo-template-name{color:#4b3340}
.demo-bar .demo-audit-nav a{color:#7b6570;min-height:40px}
.demo-bar .demo-audit-nav a:hover{background:#fbedf3;color:#94516e}
.demo-bar .demo-position{color:#7b6570}
.demo-bar>a:focus-visible,.demo-bar .demo-audit-nav a:focus-visible{outline:2px solid #94516e;outline-offset:2px}

/* Floating preview controls leave the artwork at the full viewport height. */
.demo-bar.demo-with-audit{position:fixed;top:max(8px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);width:calc(100% - 16px);max-width:624px;z-index:40;border:1px solid #f0dce5;border-radius:16px;background:#fff9fbe8;backdrop-filter:blur(12px);box-shadow:0 5px 22px #56334514}
body[data-demo="true"][data-landing-preview="false"] .cover{padding-top:0!important}
body[data-demo="true"][data-landing-preview="false"] .cover{height:100svh;min-height:100svh;max-height:none}
@media(max-height:680px){body[data-demo="true"][data-landing-preview="false"] .cover-content{max-height:calc(100svh - 132px);overflow-y:auto;overscroll-behavior:auto;scrollbar-width:thin;margin-top:110px}}

/* Keep the edge ornaments visible while auditing an opened invitation. */
body.invitation-open .demo-bar.demo-with-audit{width:calc(100% - 80px);max-width:480px;min-height:52px;grid-template-columns:44px minmax(0,1fr) 44px;gap:4px;padding:4px;align-items:center;background:#fff9fbe3}
body.invitation-open .demo-template-name{display:none}
body.invitation-open .demo-back{grid-column:1;grid-row:1;justify-content:center;padding:0}
body.invitation-open .demo-choose{grid-column:3;grid-row:1;justify-content:center;padding:0}
body.invitation-open .demo-audit-nav{grid-column:2;grid-row:1;gap:0;min-width:0}
body.invitation-open .demo-back>span:not([data-icon]),body.invitation-open .demo-choose>span:not([data-icon]),body.invitation-open .demo-audit-nav a>span:not([data-icon]){display:none}
body.invitation-open .demo-audit-nav a{width:44px;min-height:44px;flex:0 0 44px;padding:0}
body.invitation-open .demo-position{min-width:32px;font-size:10px}
@media(min-width:1200px){body.invitation-open .demo-bar.demo-with-audit{left:auto;right:40px;transform:none;width:440px;max-width:440px}}

.demo-cart-icon{display:block;flex:0 0 20px;width:20px;height:20px}