/* /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}
}
/* Touch screens (3.171.0, F08/F20): Back to store and the logo are 44px targets. */
@media(pointer:coarse){html.cz-focused .cz-topbar .sf-cz-back,html.cz-focused .cz-topbar .sf-cz-logo{min-width:44px;min-height:44px;justify-content:center}}
/* 3.172.0: Page Designer's Header › Logo size sizes the bar's logo as on the store's pages (lib/design-page.js
   sets the sizes); the logo shrinks, keeping its shape, when the bar leaves less room. */
html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-logo{flex:0 1 auto;min-width:0}
/* 3.173.0: on a phone the logo shares its row with the back arrow (44px and the bar's 12px gap), so a wide
   logo shrinks beside it instead of taking the row and pushing the arrow off the top. */
@media(max-width:767px){html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-logo{max-width:calc(100% - 56px)}}
/* The customizer's actions keep their natural width beside a sized logo; the logo is what shrinks. */
html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-actions{flex:1 0 auto}
html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-logo .sf-logo{max-width:100%}
html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-logo .sf-logo img{max-height:var(--cz-logo-h-m)}
@media(min-width:768px){html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-logo{max-width:var(--cz-logo-max-d)}html.cz-focused .cz-topbar.cz-logo-sized .sf-cz-logo .sf-logo img{max-height:var(--cz-logo-h-d)}}