/* SMART_DEMO_ALL27_MOBILE_NAV_20260927_V1
   Responsive shared demo navigation for 9 Starter, 9 Professional and 9 Store routes.
   The separate live PublicWeb storefront and commerce runtime are unchanged.
   Desktop navigation, canonical content, store commerce and AI remain unchanged. */
.demo-mobile-menu-toggle{display:none;}
@media(max-width:580px){
  .demo-site .demo-header{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;gap:9px 10px!important;
    min-height:65px!important;padding:12px 5%!important;
  }
  .demo-site .demo-brand{
    display:flex!important;min-width:0!important;max-width:100%!important;
    gap:9px!important;align-items:center!important;
  }
  .demo-site .demo-brand .demo-logo-mark{flex:0 0 36px!important;height:36px!important;}
  .demo-site .demo-brand strong{
    display:block!important;min-width:0!important;max-width:100%!important;
    font-size:clamp(.88rem,3.5vw,1.04rem)!important;
    line-height:1.22!important;overflow:hidden!important;
    text-overflow:ellipsis!important;white-space:nowrap!important;
  }
  .demo-site .demo-mobile-menu-toggle{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    gap:8px!important;grid-column:2!important;
    width:auto!important;min-width:73px!important;min-height:44px!important;
    padding:9px 11px!important;border:1px solid #c7d6d3!important;
    border-radius:10px!important;background:#fff!important;color:#173b35!important;
    font:800 12px/1.1 system-ui,-apple-system,"Segoe UI",sans-serif!important;
    letter-spacing:.01em!important;cursor:pointer!important;
  }
  .demo-site .demo-mobile-menu-icon{display:grid!important;gap:3px!important;width:18px!important;flex:0 0 18px!important;}
  .demo-site .demo-mobile-menu-icon i{display:block!important;height:2px!important;width:18px!important;border-radius:99px!important;background:currentColor!important;}
  .demo-site .demo-mobile-menu-toggle[aria-expanded="true"]{
    border-color:var(--demo-primary,#527c72)!important;
    box-shadow:0 0 0 2px color-mix(in srgb,var(--demo-primary,#527c72) 18%,transparent)!important;
  }
  .demo-site .demo-mobile-menu-toggle:focus-visible{
    outline:3px solid var(--demo-primary,#527c72)!important;outline-offset:2px!important;
  }
  .demo-site .demo-header .demo-site-nav{
    grid-column:1/-1!important;grid-row:2!important;display:none!important;
    width:100%!important;min-width:0!important;margin:1px 0 0!important;
    padding:7px 0 2px!important;gap:2px!important;overflow:visible!important;
    flex-direction:column!important;flex-wrap:nowrap!important;
    border-top:1px solid #dce6e3!important;
    scrollbar-width:none!important;
  }
  .demo-site .demo-header .demo-site-nav.is-open{
    display:flex!important;align-items:stretch!important;justify-content:flex-start!important;
  }
  .demo-site .demo-header .demo-site-nav a{
    display:flex!important;width:100%!important;min-height:44px!important;
    align-items:center!important;padding:11px 13px!important;
    border-radius:9px!important;line-height:1.3!important;
    color:#234d47!important;font-weight:750!important;font-size:14px!important;
    white-space:normal!important;overflow-wrap:anywhere!important;
    text-decoration:none!important;
  }
  .demo-site .demo-header .demo-site-nav a.active{
    background:color-mix(in srgb,var(--demo-primary,#527c72) 12%,white)!important;
    color:#123a33!important;font-weight:850!important;
  }
  .demo-site .demo-header .demo-site-nav a:hover,
  .demo-site .demo-header .demo-site-nav a:focus-visible{
    background:#eef4f2!important;outline:2px solid var(--demo-primary,#527c72)!important;
    outline-offset:-2px!important;
  }
  .demo-site .demo-header .demo-header-cta{display:none!important;}
  /* Dark-header design families retain their own brand direction. */
  .demo-site.preview-starter.preview-v8 .demo-mobile-menu-toggle,
  .demo-site.preview-pro.preview-v8 .demo-mobile-menu-toggle,
  .demo-site.preview-pro.preview-v9 .demo-mobile-menu-toggle{
    background:rgba(255,255,255,.10)!important;
    border-color:rgba(255,255,255,.55)!important;color:#fff!important;
  }
  .demo-site.preview-starter.preview-v8 .demo-header .demo-site-nav,
  .demo-site.preview-pro.preview-v8 .demo-header .demo-site-nav,
  .demo-site.preview-pro.preview-v9 .demo-header .demo-site-nav{
    border-top-color:rgba(255,255,255,.22)!important;
  }
  .demo-site.preview-starter.preview-v8 .demo-header .demo-site-nav a,
  .demo-site.preview-pro.preview-v8 .demo-header .demo-site-nav a,
  .demo-site.preview-pro.preview-v9 .demo-header .demo-site-nav a{
    color:#fff!important;
  }
  .demo-site.preview-starter.preview-v8 .demo-header .demo-site-nav a.active,
  .demo-site.preview-pro.preview-v8 .demo-header .demo-site-nav a.active,
  .demo-site.preview-pro.preview-v9 .demo-header .demo-site-nav a.active{
    color:#fff!important;background:rgba(255,255,255,.16)!important;
  }
  .demo-site.preview-starter.preview-v8 .demo-header .demo-site-nav a:hover,
  .demo-site.preview-pro.preview-v8 .demo-header .demo-site-nav a:hover,
  .demo-site.preview-pro.preview-v9 .demo-header .demo-site-nav a:hover{
    background:rgba(255,255,255,.16)!important;outline-color:#fff!important;
  }
  /* All three categories include dark-header v8/v9 families. */
  .demo-site.preview-v8 .demo-mobile-menu-toggle,
  .demo-site.preview-v9 .demo-mobile-menu-toggle{
    background:rgba(255,255,255,.10)!important;
    border-color:rgba(255,255,255,.55)!important;color:#fff!important;
  }
  .demo-site.preview-v8 .demo-header .demo-site-nav,
  .demo-site.preview-v9 .demo-header .demo-site-nav{border-top-color:rgba(255,255,255,.22)!important;}
  .demo-site.preview-v8 .demo-header .demo-site-nav a,
  .demo-site.preview-v9 .demo-header .demo-site-nav a{color:#fff!important;}
  .demo-site.preview-v8 .demo-header .demo-site-nav a.active,
  .demo-site.preview-v9 .demo-header .demo-site-nav a.active{
    color:#fff!important;background:rgba(255,255,255,.16)!important;
  }
  .demo-site.preview-v8 .demo-header .demo-site-nav a:hover,
  .demo-site.preview-v9 .demo-header .demo-site-nav a:hover{
    background:rgba(255,255,255,.16)!important;outline-color:#fff!important;
  }
}
/* Desktop retains existing full multi-page navigation, including custom theme color. */
@media(min-width:581px){.demo-site .demo-mobile-menu-toggle{display:none!important;}}