@media (max-width: 719px) {
 body.maquette-app .topbar { transition: padding-block .24s ease; }
 body.maquette-app .topbar-inner { transition: min-height .24s ease, padding-block .24s ease; }
 body.maquette-app header.topbar .logo img { transition: width .24s ease, height .24s ease; }
 body.maquette-app.has-compact-header .topbar { padding-top: 8px; padding-bottom: 8px; }
 body.maquette-app.has-compact-header .topbar-inner { min-height: 40px; padding-top: 4px; padding-bottom: 4px; }
 body.maquette-app.has-compact-header header.topbar .logo img { width: 56px; height: 24px; }
 body.maquette-app .account-sidebar.tabs.mobile-account-nav { transition: top .24s ease; }
 body.maquette-app.has-compact-header .account-sidebar.tabs.mobile-account-nav { top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
 body.maquette-app .topbar,
 body.maquette-app .topbar-inner,
 body.maquette-app header.topbar .logo img,
 body.maquette-app .account-sidebar.tabs.mobile-account-nav { transition: none; }
}

@media(min-width:720px) {
 body.maquette-app .topbar { transition:padding .22s ease; }
 body.maquette-app .topbar-inner { transition:min-height .22s ease,padding .22s ease; }
 body.maquette-app header.topbar .logo img { transition:width .22s ease,height .22s ease; }
 body.maquette-app.has-compact-header .topbar { padding:6px 14px; }
 body.maquette-app.has-compact-header .topbar-inner { min-height:52px; padding:5px 14px; }
 body.maquette-app.has-compact-header header.topbar .logo img { width:84px; height:36px; }
}
body.maquette-app .topbar { background:var(--soft,#f4fbfb); }
@media(prefers-reduced-motion:reduce) {
 body.maquette-app .topbar, body.maquette-app .topbar-inner, body.maquette-app header.topbar .logo img { transition:none; }
}
/* A continuous surface under the compact header, without a tinted strip. */
body.maquette-app.has-compact-header .topbar {
 background:var(--white); border-bottom:0; box-shadow:none; backdrop-filter:none;
}
body.maquette-app.has-compact-header .topbar-inner {
 box-shadow:none; border-color:transparent;
}
/* The outer header is transparent: only the rounded navigation floats. */
body.maquette-app header.topbar,
body.maquette-app.has-compact-header header.topbar,
body.maquette-app.theme-dark header.topbar {
 background:transparent; border:0; box-shadow:none;
 backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:none;
}
body.maquette-app header.topbar .topbar-inner,
body.maquette-app.has-compact-header header.topbar .topbar-inner,
body.maquette-app.theme-dark header.topbar .topbar-inner {
 border-color:transparent; box-shadow:0 5px 16px rgba(0,40,40,.09); pointer-events:auto;
}
/* Compact floating mobile navigation, inspired by Apple's glass tab bars. */
@media(max-width:719px) {
 body.maquette-app .mobile-nav {
  left:16px; right:16px; width:calc(100% - 32px); max-width:350px; margin-inline:auto;
  bottom:max(10px,env(safe-area-inset-bottom)); gap:3px; padding:4px;
  border:1px solid var(--line); border-radius:30px;
  background:var(--white); background:color-mix(in srgb,var(--white) 88%,transparent);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 5px 20px rgba(0,40,40,.12),inset 0 1px 0 rgba(255,255,255,.3);
 }
 body.maquette-app .mobile-nav > a {
  min-height:44px; padding:4px 8px; flex-direction:column; gap:2px;
  font-size:10px; line-height:1.15; font-weight:500; color:var(--muted);
  transition:background .2s ease,color .2s ease;
 }
 body.maquette-app .mobile-nav > a > i { font-size:17px; line-height:18px; }
 body.maquette-app .mobile-nav > a.active {
  background:color-mix(in srgb,var(--bb9-green) 14%,transparent); color:var(--bb9-green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2); font-weight:600;
 }
 body.maquette-app .mobile-nav.has-mobile-cart { max-width:390px; }
 body.maquette-app .mobile-nav .mobile-cart .cart-trigger { min-height:44px; }
 body.maquette-app .back-to-top { bottom:calc(max(10px,env(safe-area-inset-bottom)) + 62px); }
}
@media(prefers-reduced-transparency:reduce) { body.maquette-app .mobile-nav { background:var(--white); backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media(prefers-reduced-motion:reduce) { body.maquette-app .mobile-nav > a { transition:none; } }
body.maquette-app .theme-switcher-panel { max-height:min(70dvh,540px); overflow-y:auto; }
body.maquette-app .dev-theme-library { display:grid; grid-template-columns:1fr; }
body.maquette-app .dev-theme-library button { text-align:left; }