/* Next Big Domain 0.63.0 — hero blend + persistent software navigation.
   Loaded after the full 0.62 visual system so these are narrow, intentional corrections. */

/* --------------------------------------------------------------------------
   HOMEPAGE HERO
   The approved reference does not show the dashboard as a rectangular picture
   sitting on top of the hero. On large screens the visual is now treated as
   part of the hero scene: edge-to-edge on the right and softly blended into
   the white copy area on the left.
   -------------------------------------------------------------------------- */
@media (min-width:1121px){
  .nbd-ref-hero{isolation:isolate!important}
  .nbd-ref-hero-grid{
    position:relative!important;
    display:block!important;
    min-height:660px!important;
    padding:54px 0 38px!important;
  }
  .nbd-ref-hero-copy{
    position:relative!important;
    z-index:3!important;
    width:min(46%,680px)!important;
    max-width:680px!important;
    padding-top:24px!important;
  }
  .nbd-ref-dashboard-shot--reference{
    position:absolute!important;
    z-index:1!important;
    top:0!important;
    bottom:0!important;
    right:clamp(-190px,calc((1540px - 100vw)/2),-36px)!important;
    width:min(58vw,1080px)!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    overflow:hidden!important;
    align-self:stretch!important;
    pointer-events:none!important;
  }
  .nbd-ref-hero-product-image{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:right center!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:none!important;
    transform:scale(1.018)!important;
    transform-origin:right center!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 5%,rgba(0,0,0,.78) 14%,#000 23%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.18) 5%,rgba(0,0,0,.78) 14%,#000 23%,#000 100%)!important;
  }
  /* A final white veil makes the transition read like one designed scene,
     rather than an image edge, on browsers with weaker mask rendering. */
  .nbd-ref-dashboard-shot--reference::before{
    content:""!important;
    position:absolute!important;
    z-index:2!important;
    inset:0 auto 0 0!important;
    width:22%!important;
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 100%)!important;
    pointer-events:none!important;
  }
}

/* Keep the image naturally contained once the layout stacks. */
@media (max-width:1120px){
  .nbd-ref-dashboard-shot--reference{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:auto!important;
    max-width:940px!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }
  .nbd-ref-dashboard-shot--reference::before{display:none!important}
  .nbd-ref-hero-product-image{
    width:100%!important;
    max-width:940px!important;
    height:auto!important;
    object-fit:contain!important;
    transform:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}

/* --------------------------------------------------------------------------
   DESKTOP APP SHELL NAVIGATION
   Keep the navigation available while a seller works down a long page.
   The sidebar itself remains fixed in view, and becomes its own subtle scroll
   region only when the viewport is too short to show every destination.
   -------------------------------------------------------------------------- */
@media (min-width:1121px){
  body .nbdm-workspace .nbdm-workspace-layout{
    overflow:visible!important;
    align-items:start!important;
    border:0!important;
    border-radius:22px!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body .nbdm-workspace .nbdm-workspace-sidebar{
    position:sticky!important;
    top:calc(var(--wp-admin--admin-bar--height,0px) + 18px)!important;
    align-self:start!important;
    max-height:calc(100dvh - var(--wp-admin--admin-bar--height,0px) - 36px)!important;
    min-height:min(790px,calc(100dvh - var(--wp-admin--admin-bar--height,0px) - 36px))!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    padding:20px 14px 18px!important;
    border:1px solid #d8e3ef!important;
    border-right:0!important;
    border-radius:22px 0 0 22px!important;
    box-shadow:0 24px 64px rgba(24,63,105,.095)!important;
    scrollbar-width:thin!important;
    scrollbar-color:#365672 transparent!important;
  }
  body .nbdm-workspace .nbdm-workspace-sidebar::-webkit-scrollbar{width:6px!important}
  body .nbdm-workspace .nbdm-workspace-sidebar::-webkit-scrollbar-track{background:transparent!important}
  body .nbdm-workspace .nbdm-workspace-sidebar::-webkit-scrollbar-thumb{background:#365672!important;border-radius:999px!important}
  body .nbdm-workspace .nbdm-app-brand{
    height:44px!important;
    margin:0 9px 17px!important;
  }
  body .nbdm-workspace .nbdm-app-brand img{width:184px!important;max-height:35px!important}
  body .nbdm-workspace .nbdm-workspace-nav{gap:14px!important}
  body .nbdm-workspace .nbdm-nav-group{gap:2px!important}
  body .nbdm-workspace .nbdm-nav-group h2{margin:0 10px 6px!important;font-size:9px!important}
  body .nbdm-workspace .nbdm-workspace-nav a{
    min-height:44px!important;
    padding:8px 12px!important;
    border-radius:10px!important;
  }
  body .nbdm-workspace .nbdm-workspace-content{
    overflow:visible!important;
    min-height:790px!important;
    border:1px solid #d8e3ef!important;
    border-left:0!important;
    border-radius:0 22px 22px 0!important;
    background:#f7f9fc!important;
    box-shadow:14px 24px 64px rgba(24,63,105,.075)!important;
  }
  /* Keep the app toolbar accessible during long Sales Desk / buyer research pages. */
  body .nbdm-workspace .nbdm-app-toolbar{
    position:sticky!important;
    top:calc(var(--wp-admin--admin-bar--height,0px) + 18px)!important;
    z-index:35!important;
    border-radius:0 22px 0 0!important;
    box-shadow:0 8px 20px rgba(31,65,102,.055)!important;
  }
}

/* At laptop heights, prioritise navigation density before a scrollbar is needed. */
@media (min-width:1121px) and (max-height:820px){
  body .nbdm-workspace .nbdm-workspace-sidebar{padding-top:15px!important;padding-bottom:14px!important}
  body .nbdm-workspace .nbdm-app-brand{height:38px!important;margin-bottom:10px!important}
  body .nbdm-workspace .nbdm-app-brand img{width:170px!important;max-height:31px!important}
  body .nbdm-workspace .nbdm-workspace-nav{gap:9px!important}
  body .nbdm-workspace .nbdm-nav-group h2{margin-bottom:3px!important}
  body .nbdm-workspace .nbdm-workspace-nav a{min-height:39px!important;padding-top:6px!important;padding-bottom:6px!important;font-size:13px!important}
  body .nbdm-workspace .nbdm-workspace-nav a svg{width:18px!important;height:18px!important;flex-basis:18px!important}
}

/* Tablet/mobile already switch to the compact horizontal / stacked navigation.
   Explicitly cancel desktop stickiness there. */
@media (max-width:1120px){
  body .nbdm-workspace .nbdm-workspace-sidebar{
    position:static!important;
    top:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
  }
  body .nbdm-workspace .nbdm-app-toolbar{position:relative!important;top:auto!important}
}