/* /design: the customizer in focused mode (lib/design-page.js). The
   customizer's header holds the store's top bar (storefront builder
   customizerChrome) and, in its actions slot, the customizer's own buttons,
   which keep their .topbar styles. The bar is as tall as the header the
   customizer lays its workspace out under (--topbar-height). */
html.cz-focused .cz-topbar{display:block;height:var(--topbar-height);padding:0;border:0;background:transparent;gap:0}
html.cz-focused .cz-topbar>.sf-cz{height:100%}
html.cz-focused .cz-topbar .sf-cz-bar{height:100%;min-height:0;padding-block:0;border-bottom:1px solid var(--sf-border)}
html.cz-focused .cz-topbar .sf-cz-actions>.header-right{margin-left:0}
html.cz-store{--font-sans:var(--sf-font-body)}
@media(max-width:520px){
  html.cz-focused .cz-topbar .sf-cz-bar{flex-wrap:wrap;align-content:center;row-gap:6px;padding:8px 14px}
  html.cz-focused .cz-topbar .sf-cz-actions{flex-basis:100%}
  html.cz-focused .cz-topbar .sf-cz-actions>.header-right{flex-basis:100%;justify-content:space-between}
}