/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 18 2026 | 18:49:50 */
/* ============================================================
   HNI TRUE STACK SIDEBAR CSS
   All sidebar boxes remain stacked and visible.
   Active card moves to center stage.
   This replaces the old one-at-a-time sidebar behavior.
   ============================================================ */

@media (min-width: 861px) {

  .hn-layout,
  .hn-sidebar,
  .hn-sidebar-inner,
  .hn-sidebar-stack {
    overflow: visible !important;
  }

  .hn-sidebar.hni-true-stack-active {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  .hn-sidebar.hni-true-stack-active.is-sticky {
    position: relative !important;
    top: auto !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-inner {
    position: sticky !important;
    top: 50vh !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    padding: 0 !important;
    z-index: 10000 !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-stack {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    will-change: transform !important;
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 10001 !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel,
  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel.is-active {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 0.78 !important;
    pointer-events: auto !important;
    transform: scale(0.985) !important;
    filter: none !important;
    transition:
      opacity 420ms ease,
      transform 420ms ease,
      box-shadow 420ms ease !important;
    z-index: 1 !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel > * {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel.hni-center-stage,
  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel.hni-center-stage.is-active {
    opacity: 1 !important;
    transform: scale(1) !important;
    z-index: 5 !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel.hni-center-stage > * {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12) !important;
  }

  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel.hni-near-stage,
  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel.hni-near-stage.is-active {
    opacity: 0.92 !important;
    transform: scale(0.995) !important;
    z-index: 3 !important;
  }

}

/* Mobile: normal stack, no sticky behavior */
@media (max-width: 860px) {

  .hn-sidebar.hni-true-stack-active,
  .hn-sidebar.hni-true-stack-active .hn-sidebar-inner,
  .hn-sidebar.hni-true-stack-active .hn-sidebar-stack,
  .hn-sidebar.hni-true-stack-active .hn-sidebar-panel {
    position: static !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    pointer-events: auto !important;
  }

}