/* ============================================================================
   STORE / BnB SHELL — top bar. The STANDARD for every shop + Business-in-a-Box.
   TWO ROWS:
     row 1 (.snav__shop)  = shop-only actions (search, wishlist, cart, account,
                            back office, theme) as icons, right-aligned.
     row 2 (.snav__main)  = the appzoola-new HOME PAGE menu (the golden standard):
                            logo left, then Home | Solutions | Custom Software |
                            Pricing | Contact | Dashboard (signed in) pushed right,
                            then Sign in/Sign out, then the Start free trial pill.
   Bottom-row values are copied from the home nav so it is visually identical.
   SINGLE SOURCE OF TRUTH: this row lives in design.platform_stylesheet
   (name='store-shell'); there is NO .css file anywhere.
   ============================================================================ */
.snav{position:sticky;top:0;z-index:100;background:rgba(11,14,20,.86);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.snav__inner{max-width:none;margin:0;padding:0 clamp(24px,3.5vw,56px)}

/* ---- ROW 1 : shop actions ---- */
.snav__shop{display:flex;align-items:center;justify-content:flex-end;gap:1.25rem;height:38px;
  border-bottom:1px solid rgba(255,255,255,.06)}
.snav__shop a{position:relative;display:inline-flex;align-items:center;color:rgba(255,255,255,.66);
  font-size:.98rem;line-height:1;cursor:pointer;transition:color .2s}
.snav__shop a:hover{color:#fff}
.snav__badge{position:absolute;top:-7px;right:-10px;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:var(--blue,#2b8fff);color:#fff;font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1}
.snav__toggle{color:rgba(255,255,255,.66)}

/* ---- ROW 2 : the golden-standard home menu ---- */
.snav__main{display:flex;align-items:center;gap:2rem;height:58px}
.snav__logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.snav__logo img{height:34px;width:auto;display:block}
/* Brand renders BOTH a light and a dark logo image; show only the one for the active theme
   (mirrors the old axnav swap) so the mark never doubles up. */
.snav__logo .logo-dark{display:none}
.snav__logo .logo-light{display:block}
[data-theme="dark"] .snav__logo .logo-light{display:none}
[data-theme="dark"] .snav__logo .logo-dark{display:block}
.snav__links{display:flex;align-items:center;gap:1.7rem;margin-left:auto;
  font-size:.86rem;color:rgba(255,255,255,.72)}
.snav__links a{color:inherit;cursor:pointer;white-space:nowrap;transition:color .2s;text-decoration:none}
.snav__links a:hover{color:#fff}
.snav__links a.is-current{color:#fff;text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:8px;text-decoration-color:var(--blue,#2b8fff)}
.snav__signin{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.82);cursor:pointer;
  white-space:nowrap;text-decoration:none;transition:color .2s}
.snav__signin:hover{color:#fff}
.snav__cta{background:var(--blue,#2b8fff);color:#fff;padding:.45rem 1.1rem;border-radius:980px;
  font-size:.84rem;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background .2s;flex:0 0 auto}
.snav__cta:hover{background:var(--blue-hover,#1a6fd0)}

@media(max-width:820px){
  .snav__links{display:none}
  .snav__main{height:52px}
}