/* MyStudio Demo Bar: fixed to the top above every theme's header. Fixed, not sticky: a theme with overflow on <body>
   would let a sticky bar scroll away. The page and the theme's own sticky parts move down by its height, which
   the bar's script measures into --ms-demobar-h. */
:root { --ms-demobar-h: 2.75rem; }
.ms-demobar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1090;
    min-height: var(--ms-demobar-h);
    display: flex;
    align-items: center;
    background: var(--ms-heading-bg, var(--ms-accent));
    color: var(--ms-text-inv, #fff);
    font-size: .875rem;
    line-height: 1.3;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.ms-demobar-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: .375rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .375rem 1rem;
}
.ms-demobar-msg { flex: 1 1 18rem; min-width: 0; }
.ms-demobar-form { display: flex; align-items: center; gap: .5rem; margin: 0; flex: 0 0 auto; }
.ms-demobar-label { margin: 0; font-weight: 600; white-space: nowrap; color: inherit; }
.ms-demobar select {
    max-width: 14rem;
    padding: .25rem .5rem;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: .375rem;
    background-color: rgba(0, 0, 0, .25);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.ms-demobar select option { color: #111; background: #fff; }
.ms-demobar button { font: inherit; }

body:has(> .ms-demobar) { padding-top: var(--ms-demobar-h) !important; }
html:has(body > .ms-demobar) { scroll-padding-top: var(--ms-demobar-h); }

/* The theme's own sticky / fixed parts sit below the bar instead of under it */
body:has(> .ms-demobar) .sticky-top,
body:has(> .ms-demobar) .fixed-top,
body:has(> .ms-demobar) .ms-sticky .ms-header,
body:has(> .ms-demobar) .ms-page-sidebar { top: var(--ms-demobar-h); }

@media (max-width: 575.98px) {
    :root { --ms-demobar-h: 4.75rem; }
    .ms-demobar { font-size: .8125rem; }
    .ms-demobar select { max-width: 60vw; }
}