/* MBS V37 — Unified Premium UI
   Goal: one coherent MBS shell on every page, especially in iOS/PWA.
*/
:root{
  --mbs-paper:#f2f0e9;
  --mbs-surface:#faf9f5;
  --mbs-ink:#151816;
  --mbs-muted:#687069;
  --mbs-line:#d5dad4;
  --mbs-sage:#95a797;
  --mbs-sage-soft:#e5ece6;
  --mbs-sage-deep:#55705f;
}
html{background:var(--mbs-paper)}
body.mbs-v37-unified{
  padding-top:env(safe-area-inset-top,0px)!important;
  padding-bottom:env(safe-area-inset-bottom,0px)!important;
  /* Unlike overflow:hidden, clip does not create a scroll container that
     prevents the shared sticky header from sticking on mobile Safari. */
  overflow-x:clip!important;
  background:var(--mbs-paper)!important;
  color:var(--mbs-ink)!important;
  -webkit-font-smoothing:antialiased;
}
/* Links keep the color set by their own page or button style. A blanket
   anchor color here made dark filled links unreadable across the app. */

/* One container rhythm across legacy, public and application pages. */
body.mbs-v37-unified .site-shell,
body.mbs-v37-unified .shell,
body.mbs-v37-unified .wrap,
body.mbs-v37-unified .mbs-v37-top-shell{
  width:min(100% - 40px,1240px);
  max-width:1240px;
  margin-inline:auto;
}
body.mbs-v37-unified .shell,
body.mbs-v37-unified .wrap{
  padding-left:0!important;
  padding-right:0!important;
}

/* Unified header: matches the clean public product pages. */
body.mbs-v37-unified .mbs-v37-header{
  min-height:78px!important;
  height:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:38px!important;
  padding:0!important;
  border-bottom:1px solid var(--mbs-line)!important;
  background:var(--mbs-paper)!important;
  position:sticky!important;
  top:env(safe-area-inset-top,0px)!important;
  z-index:500!important;
}
/* Mask content behind the iPhone status bar while the page scrolls. */
body.mbs-v37-unified .mbs-v37-header::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:env(safe-area-inset-top,0px);
  background:var(--mbs-paper);
  z-index:1;
  pointer-events:none;
}
body.mbs-v37-unified .mbs-v37-logo{
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  color:var(--mbs-ink)!important;
  font-size:18px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.15em!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
}
body.mbs-v37-unified .mbs-v37-logo span{display:none!important}
body.mbs-v37-unified .mbs-v37-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:24px;
  flex:1;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
}
body.mbs-v37-unified .mbs-v37-nav::-webkit-scrollbar{display:none}
body.mbs-v37-unified .mbs-v37-nav a{
  color:var(--mbs-ink)!important;
  text-decoration:none!important;
}
body.mbs-v37-unified .mbs-v37-nav a[aria-current="page"]{
  color:var(--mbs-sage-deep)!important;
}
body.mbs-v37-unified .mbs-v37-menu-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  min-height:44px!important;
  border:1px solid var(--mbs-ink)!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--mbs-ink)!important;
  padding:9px 15px!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  cursor:pointer;
  box-shadow:none!important;
}
/* Link colors inherit from the page in V37; restore contrast on filled CTAs. */
body.mbs-v37-unified .customer-home a.btn:not(.secondary),
body.mbs-v37-unified .customer-home button.btn:not(.secondary),
body.mbs-v37-unified a.btn.dark,
body.mbs-v37-unified button.btn.dark{
  background:var(--mbs-ink)!important;
  border-color:var(--mbs-ink)!important;
  color:#fff!important;
}
body.mbs-v37-unified .customer-home a.btn.secondary,
body.mbs-v37-unified .customer-home button.btn.secondary{
  background:#fff!important;
  color:var(--mbs-ink)!important;
}
body.mbs-v37-unified a.mbs-admin-shortcut-global,
body.mbs-v37-unified a.admin-shortcut{
  color:#fff!important;
}

/* A calmer, more editorial customer landing page. */
body.mbs-v37-unified .customer-home{
  max-width:980px;
}
body.mbs-v37-unified .customer-home > .kicker,
body.mbs-v37-unified .customer-home > .small{
  color:var(--mbs-sage-deep)!important;
  letter-spacing:.18em!important;
}
body.mbs-v37-unified .customer-home > h1{
  font-weight:920!important;
  letter-spacing:-.055em!important;
}

/* Fixed admin utility must never collide with the iOS safe area. */
body.mbs-v37-unified .mbs-admin-shortcut-global,
body.mbs-v37-unified .admin-shortcut{
  bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;
}

@media(max-width:960px){
  body.mbs-v37-unified .site-shell,
  body.mbs-v37-unified .shell,
  body.mbs-v37-unified .wrap,
  body.mbs-v37-unified .mbs-v37-top-shell{
    width:min(100% - 30px,1240px)!important;
    max-width:1240px!important;
    margin-inline:auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  body.mbs-v37-unified .mbs-v37-header{
    min-height:76px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:16px!important;
    padding:16px 0 14px!important;
  }
  body.mbs-v37-unified .mbs-v37-menu-toggle{display:inline-flex!important}
  body.mbs-v37-unified .mbs-v37-nav{
    display:none!important;
    grid-column:1/-1!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:0!important;
    width:100%!important;
    margin:14px 0 0!important;
    padding:8px 0 0!important;
    border-top:1px solid var(--mbs-line)!important;
    overflow:visible!important;
    white-space:normal!important;
  }
  body.mbs-v37-unified .mbs-v37-nav.open{display:flex!important}
  body.mbs-v37-unified .mbs-v37-nav a,
  body.mbs-v37-unified .mbs-v37-nav a:last-child{
    display:flex!important;
    align-items:center!important;
    min-height:47px!important;
    border:0!important;
    border-bottom:1px solid var(--mbs-line)!important;
    border-radius:0!important;
    padding:11px 2px!important;
    background:transparent!important;
    font-size:11px!important;
  }
  body.mbs-v37-unified .mbs-v37-nav a:last-child{border-bottom:0!important}

  /* Keep the first content block visually separated from navigation. */
  body.mbs-v37-unified main > .section:first-child,
  body.mbs-v37-unified main > .hero:first-child,
  body.mbs-v37-unified main > .page-intro:first-child,
  body.mbs-v37-unified main > .shop-hero:first-child,
  body.mbs-v37-unified main > .contact-intro:first-child{
    padding-top:64px!important;
  }

  /* Dashboard landing: remove the generic app-card stack and use editorial sections. */
  body.mbs-v37-unified .customer-home .customer-grid{
    display:block!important;
    margin-top:28px!important;
  }
  body.mbs-v37-unified .customer-home .journey-card,
  body.mbs-v37-unified .customer-home .journey-card.sage{
    min-height:0!important;
    padding:30px 0!important;
    border:0!important;
    border-top:1px solid var(--mbs-line)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.mbs-v37-unified .customer-home .journey-card:first-child{
    border-top:0!important;
    padding-top:8px!important;
  }
  body.mbs-v37-unified .customer-home .journey-card h3{
    margin:10px 0 14px!important;
    font-size:clamp(30px,8.5vw,42px)!important;
    line-height:1.02!important;
    letter-spacing:-.045em!important;
  }
  body.mbs-v37-unified .customer-home .journey-card .meta{
    max-width:650px!important;
    font-size:17px!important;
    line-height:1.55!important;
  }
  body.mbs-v37-unified .customer-home .journey-card .actions{
    margin-top:22px!important;
  }

  /* Buttons share the product-page proportions. */
  body.mbs-v37-unified .btn{
    min-height:48px;
    border-radius:999px!important;
    padding:12px 18px!important;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:.045em!important;
  }
}

@media(max-width:680px){
  body.mbs-v37-unified .customer-home > h1{
    font-size:clamp(48px,14vw,70px)!important;
    line-height:.92!important;
    margin:14px 0 20px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.mbs-v37-unified *,body.mbs-v37-unified *::before,body.mbs-v37-unified *::after{
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}

/* Standalone operational pages receive the shared bar on mobile without disturbing desktop tools. */
body.mbs-v37-unified .mbs-v37-top-shell{display:none}
/* Standalone tools create a shell that contains only their header. In that
   case the shell itself must stick, or the header loses its scroll range. */
body.mbs-v37-unified .mbs-v37-top-shell{
  position:sticky;
  top:env(safe-area-inset-top,0px);
  z-index:500;
}
body.mbs-v37-unified .mbs-v37-top-shell .mbs-v37-header{position:relative!important;top:auto!important}
body.mbs-v37-unified .screen{padding-top:24px!important;padding-bottom:34px!important}
@media(max-width:960px){
  body.mbs-v37-unified .mbs-v37-top-shell{display:block!important}
  /* Super Admin already has its own persistent MBS/menu bar. */
  body.mbs-v37-unified:has(.mbs-admin-mobilebar) .mbs-v37-top-shell{display:none!important}
  body.mbs-v37-unified .site-head.mbs-v37-header{min-height:76px!important;height:auto!important;padding:16px 0 14px!important;background:transparent!important}
}
@media(max-width:820px){
  body.mbs-v37-unified .chat-page{padding-top:0!important}
  body.mbs-v37-unified .chat-card{height:calc(100dvh - 76px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
}
