/* Site header (loaded after joinerysoft.css). Overrides the old nav rules. */
.nav-wrapper.sh{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid #eee}
.nav-wrapper.sh .navbar{display:block;padding:0;background:#fff!important;font-size:15px}
.sh-in{display:flex;align-items:center;gap:1.6rem;min-height:60px;padding-top:0;padding-bottom:0}
.sh-logo{display:flex;align-items:center;margin:0;padding:0;width:auto!important}
.sh-logo .nav-logo-img{height:34px;width:auto}
.sh-links{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0 0 0 .4rem;padding:0}
.nav-wrapper.sh .nav-link{font-size:15px!important;font-weight:500;color:#1d1d1f!important;padding:8px 12px!important;border:0;background:none;letter-spacing:-.005em;line-height:1;transition:color .15s;display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;text-decoration:none}
.nav-wrapper.sh .nav-link:hover,.nav-wrapper.sh .nav-link.active,.nav-wrapper.sh .sh-products-btn[aria-expanded="true"]{color:#77216c!important}
.sh-products-btn svg{width:12px;height:12px;opacity:.55;transition:transform .2s}
.sh-products-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sh-right{margin-left:auto;display:flex;align-items:center;gap:.2rem}
.nav-wrapper.sh .sh-util{font-weight:400;color:#6e6e73!important;padding:8px 10px!important}
.nav-wrapper.sh .sh-util:hover{color:#77216c!important}
.sh-search svg{width:17px;height:17px}
.sh-pill{display:inline-block;margin-left:.5rem;background:#77216c;color:#fff!important;border-radius:999px;padding:.5rem 1rem;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;transition:filter .15s}
.sh-pill:hover{filter:brightness(1.12);text-decoration:none;color:#fff}
.sh-tel,.sh-burger{display:none}
.nav-wrapper.sh .navbar-toggler{padding:10px;line-height:0;border:0;background:none}

/* products panel */
.sh-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #eee;box-shadow:0 30px 60px rgba(0,0,0,.12);padding:22px 0 18px;animation:sh-drop .18s ease}
@keyframes sh-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sh-panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sh-prod{display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding:12px;border-radius:14px;color:#1d1d1f;text-decoration:none;transition:background .15s}
.sh-prod:hover{background:#f5f5f7;text-decoration:none;color:#1d1d1f}
.sh-prod-fig{height:72px;display:flex;align-items:center;justify-content:center;background:#f5f5f7;border-radius:12px}
.sh-prod:hover .sh-prod-fig{background:#fff}
.sh-prod-fig img{max-width:56px;max-height:56px;width:auto;height:auto}
.sh-prod-fig-cloud img{max-width:52px}
.sh-prod-t{font-size:.85rem;line-height:1.35;color:#6e6e73}
.sh-prod-t b{display:block;color:#1d1d1f;font-size:1rem;font-weight:600;margin-bottom:.15rem}
.sh-prod:hover .sh-prod-t b{color:#77216c}
.sh-panel-foot{display:flex;gap:1.6rem;justify-content:center;margin-top:14px;padding-top:14px;border-top:1px solid #eee;font-size:.9rem;font-weight:500}
.sh-panel-foot a{color:#6e1f64;text-decoration:none}.sh-panel-foot a:hover{text-decoration:underline}
.sh-panel-foot a::after{content:" \203A"}
@media (max-width:1199px){.sh-panel-grid{grid-template-columns:1fr 1fr}}

/* only the section bar sticks on the redesigned pages */
.j2-body:not(.template-homepage) .nav-wrapper.sh{position:relative;z-index:1030}
.j2-body .nav-wrapper.sh.scrolled{box-shadow:none}

/* phone and tablet */
@media (max-width:991.98px){
  .sh-links,.nav-wrapper.sh .sh-util,.sh-right .sh-pill{display:none}
  .sh-tel{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;color:#77216c}
  .sh-tel svg{width:20px;height:20px}
  .nav-wrapper.sh .sh-burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0}
  .sh-in{min-height:64px;gap:.6rem}
  .sh-logo .nav-logo-img{height:32px}
  .sh-panel{display:none}
  .sh-sheet{position:fixed;left:0;right:0;top:64px;bottom:0;background:#fff;overflow-y:auto;padding:18px 0 40px;z-index:1029;animation:sh-drop .18s ease}
  .sh-sheet-open,.sh-sheet-open body{overflow:hidden}
  .sh-sheet-h{margin:14px 0 6px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73}
  .sh-sheet-prod{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #eee;color:#1d1d1f;text-decoration:none}
  .sh-sheet-prod img{max-width:44px;max-height:44px;width:auto;height:auto;margin:0 auto}
  .sh-sheet-prod span{font-size:.9rem;color:#6e6e73}
  .sh-sheet-prod b{display:block;color:#1d1d1f;font-size:1.05rem;font-weight:600}
  .sh-sheet-link{display:block;padding:12px 0;border-top:1px solid #eee;color:#1d1d1f;font-size:1.05rem;font-weight:500;text-decoration:none}
  .sh-sheet-pill{display:block;text-align:center;margin:18px 0 0;padding:.9rem 1rem;font-size:1rem}
  .j2-body .nav-wrapper.sh{position:sticky}
  body.template-homepage .nav-wrapper.sh{position:sticky}
}

/* the section bar's demo pill only shows once the site header has scrolled out of view,
   so there is never a pill stacked directly under a pill */
@media (min-width:992px){
  .j2-body .j2-lnav .j2-pill{opacity:0;transform:translateY(-4px);pointer-events:none;max-width:0;padding-left:0;padding-right:0;margin-left:-1.6rem;overflow:hidden;white-space:nowrap;transition:opacity .2s,transform .2s,max-width .25s,padding .25s,margin .25s}
  .j2-body.sh-header-gone .j2-lnav .j2-pill{opacity:1;transform:none;pointer-events:auto;max-width:200px;padding-left:.9rem;padding-right:.9rem;margin-left:0}
}

/* homepage: the bar overlays the hero and is transparent until scrolled */
@media (min-width:992px){
  body.template-homepage .nav-wrapper.sh{position:fixed;top:0;left:0;right:0;background:transparent;border-bottom-color:transparent;transition:background .3s,border-color .3s,box-shadow .3s}
  body.template-homepage .nav-wrapper.sh .navbar{background:transparent!important;transition:background .3s}
  body.template-homepage .nav-wrapper.sh:not(.scrolled) .nav-link,body.template-homepage .nav-wrapper.sh:not(.scrolled) .sh-util{color:#fff!important}
  body.template-homepage .nav-wrapper.sh:not(.scrolled) .nav-link:hover,body.template-homepage .nav-wrapper.sh:not(.scrolled) .sh-util:hover{color:#fff!important;opacity:.7}
  body.template-homepage .nav-wrapper.sh:not(.scrolled) .sh-pill{background:#fff;color:#77216c!important}
  body.template-homepage .nav-wrapper.sh:not(.scrolled) .nav-logo-dark{display:none}
  body.template-homepage .nav-wrapper.sh:not(.scrolled) .nav-logo-light{display:inline-block}
  body.template-homepage .nav-wrapper.sh.scrolled,body.template-homepage .nav-wrapper.sh.scrolled .navbar{background:#fff!important}
  body.template-homepage .nav-wrapper.sh.scrolled{border-bottom-color:#eee;box-shadow:0 2px 16px rgba(0,0,0,.08)}
  body.template-homepage .nav-wrapper.sh.sh-panel-open,body.template-homepage .nav-wrapper.sh.sh-panel-open .navbar{background:#fff!important}
  body.template-homepage .nav-wrapper.sh.sh-panel-open .nav-link,body.template-homepage .nav-wrapper.sh.sh-panel-open .sh-util,body.template-homepage .nav-wrapper.sh.sh-panel-open .nav-link:hover,body.template-homepage .nav-wrapper.sh.sh-panel-open .sh-products-btn[aria-expanded="true"]{color:#1d1d1f!important;opacity:1}
  body.template-homepage .nav-wrapper.sh.sh-panel-open .sh-products-btn[aria-expanded="true"],body.template-homepage .nav-wrapper.sh.sh-panel-open .nav-link:hover{color:#77216c!important}
  body.template-homepage .nav-wrapper.sh.sh-panel-open .sh-pill{background:#77216c;color:#fff!important}
  body.template-homepage .nav-wrapper.sh.sh-panel-open .nav-logo-dark{display:inline-block}
  body.template-homepage .nav-wrapper.sh.sh-panel-open .nav-logo-light{display:none}
}