/* PromProd catalog mega-menu — tight 3-col, aligned like Parad */
/* Hover: bridge gap between trigger and panel (slow mouse must not close) */
#ppnav,
#ppnav .w,
#ppnav ul{overflow:visible!important}
#ppnav ul{align-items:stretch!important}
#ppnav li.has-mega{
  position:static!important;
  align-self:stretch!important;
  display:flex!important;
  align-items:center!important;
}
#ppnav li.has-mega > a{
  align-self:stretch!important;
  display:inline-flex!important;
  align-items:center!important;
}

#ppnav .sub.sub--mega{
  display:none!important;
  position:absolute!important;
  left:0!important;right:0!important;
  /* Overlap into #ppnav so pointer never crosses a dead zone */
  top:calc(100% - 12px)!important;
  transform:none!important;
  width:auto!important;max-width:1040px!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
  /* Extra top padding offsets the 12px overlap so content stays clear */
  padding:24px 14px 12px!important;
  background:#fff!important;
  border:1px solid #E8E4DC!important;
  border-top-width:0!important; /* kill #ppnav .sub {border-top:8px transparent} gap math */
  border-radius:8px!important;
  box-shadow:0 12px 32px rgba(11,31,58,.12)!important;
  z-index:10003!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px 16px!important;
  align-items:start!important;
  color:#0B1F3A!important;
  font-family:Ubuntu,Arial,Helvetica,sans-serif!important;
  pointer-events:auto!important;
  visibility:visible!important;opacity:1!important;
}
#ppnav li.has-mega:hover > .sub.sub--mega,
#ppnav li.has-mega:focus-within > .sub.sub--mega,
#ppnav li.has-mega.is-open > .sub.sub--mega{
  display:grid!important;
}
/* Tall invisible hit-area above panel (covers nav padding + border) */
#ppnav .sub.sub--mega::before{
  content:""!important;display:block!important;
  position:absolute!important;left:0!important;right:0!important;
  top:-12px!important;height:12px!important;
  background:transparent!important;pointer-events:auto!important;
  z-index:0!important;
}

#ppnav .sub.sub--mega .mega-col{
  min-width:0!important;
  padding:0!important;
  border-top:none!important;
  background:transparent!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  align-self:start!important;
}
#ppnav .sub.sub--mega .mega-block{
  padding:8px 4px 4px!important;
  border-top:2px solid #B08D4F!important;
  background:#fff!important;
  box-sizing:border-box!important;
}

/* icon + parent title */
#ppnav .sub.sub--mega a.mega-h,
#ppnav .sub.sub--mega .mega-h{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:2px 2px 4px!important;
  margin:0!important;
  font-weight:600!important;
  font-size:13.5px!important;
  line-height:1.3!important;
  color:#B08D4F!important;
  letter-spacing:.01em!important;
  background:transparent!important;
  text-decoration:none!important;
  min-height:0!important;height:auto!important;
}
#ppnav .sub.sub--mega .mega-h:hover,
#ppnav .sub.sub--mega a.mega-h:hover{
  color:#9A783F!important;
  background:transparent!important;
}
#ppnav .sub.sub--mega .mega-h span{
  color:#B08D4F!important;
  font-weight:600!important;
  font-size:13.5px!important;
  line-height:1.3!important;
  white-space:normal!important;
  opacity:1!important;
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
}
#ppnav .sub.sub--mega .mega-h:hover span{color:#9A783F!important}
#ppnav .sub.sub--mega .mega-h small{
  color:#8A8F99!important;
  font-weight:400!important;
  font-size:11.5px!important;
  line-height:1.25!important;
}
#ppnav .sub.sub--mega .mega-h img{
  width:34px!important;height:34px!important;max-height:34px!important;
  object-fit:contain!important;flex:0 0 34px!important;
  margin-top:1px!important;
}

/* children — indent aligns under title text (34 icon + 10 gap) */
#ppnav .sub.sub--mega a{
  font-family:Ubuntu,Arial,Helvetica,sans-serif!important;
  font-weight:400!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  color:#5B6575!important;
  background:transparent!important;
  opacity:1!important;visibility:visible!important;
  white-space:normal!important;height:auto!important;min-height:0!important;
  text-decoration:none!important;
  pointer-events:auto!important;cursor:pointer!important;
  box-sizing:border-box!important;
}
#ppnav .sub.sub--mega a.mega-h{font-weight:600!important;color:#B08D4F!important;font-size:13.5px!important}
#ppnav .sub.sub--mega .mega-block > a:not(.mega-h),
#ppnav .sub.sub--mega .mega-col > a:not(.mega-h){
  display:block!important;
  padding:2px 2px 2px 44px!important;
  margin:0!important;
  font-weight:400!important;
  font-size:12.5px!important;
  line-height:1.35!important;
  color:#5B6575!important;
  border-radius:4px!important;
}
#ppnav .sub.sub--mega .mega-block > a:not(.mega-h):hover,
#ppnav .sub.sub--mega .mega-col > a:not(.mega-h):hover{
  background:#F7F5F1!important;
  color:#2F6FED!important;
}
#ppnav .sub.sub--mega a:focus-visible{outline:2px solid #2F6FED!important;outline-offset:2px!important}

@media(max-width:1060px){
  #ppnav .sub.sub--mega{
    position:static!important;width:100%!important;max-width:none!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    box-shadow:none!important;padding:10px!important;gap:8px 12px!important;
    top:auto!important;border-top-width:1px!important;
  }
  #ppnav .sub.sub--mega::before{display:none!important}
  #ppnav .sub.sub--mega .mega-block > a:not(.mega-h),
  #ppnav .sub.sub--mega .mega-col > a:not(.mega-h){padding-left:12px!important}
}
@media(max-width:600px){
  #ppnav .sub.sub--mega{grid-template-columns:minmax(0,1fr)!important}
}