/* ==========================================================================
   Outtabounds — Mega Menu (isolated component)  v4  |  2026-07-13
   Fully isolated: ob-mm-* classes only, no reuse of the theme's .subnav markup
   or CSS, so it cannot collide with the theme. Desktop (>=992px) only. Panels
   are built by ob-mega.js from the nav data and shown via the .ob-mm-open class
   (JS-driven, not :hover, to avoid double-trigger). Backdrop is pointer-events:
   none so it never intercepts the mouse (this was the old flicker cause).
   Load after ob-header.css.
   ========================================================================== */

@media (max-width: 991.98px) {
  .ob-mm-panel, .ob-mm-backdrop { display: none !important; }
}

@media (min-width: 992px) {
  /* full-width panels need a static host */
  body.ob-mm-on #header.ob-hd .ob-hd-nav .navbar > li.item { position: static; }

  .ob-mm-panel {
    position: fixed; left: 0; width: 100vw; z-index: 995;
    background: #fff; border-top: 1px solid #e6e6e6; box-shadow: 0 18px 40px rgba(0,0,0,.16);
    padding: 28px max(24px, calc((100vw - 1240px) / 2)) 32px;
    display: none;
    /* tall menus (e.g. Snow) get capped to the viewport and scroll internally.
       JS sets the exact max-height from the bar's bottom; this is a fallback. */
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #header.ob-hd .ob-hd-nav .navbar > li.item.ob-mm-open > .ob-mm-panel {
    display: flex; align-items: flex-start; gap: 30px;
  }

  .ob-mm-cols { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 22px 30px; }
  .ob-mm-col { flex: 0 1 180px; }
  .ob-mm-col-h {
    display: block; font-family: 'Dosis','Hind',sans-serif; font-weight: 700; font-size: 13px;
    text-transform: uppercase; letter-spacing: .6px; color: #1a1a1a;
    padding: 0 0 8px; margin: 0 0 8px; border-bottom: 2px solid #e6e6e6; text-decoration: none;
  }
  a.ob-mm-col-h:hover { color: #e77817; }
  /* defensive: the theme sets nav <li> inline — force our panel items to stack */
  .ob-mm-panel li { display: block; list-style: none; float: none; width: auto; }
  .ob-mm-links { list-style: none; margin: 0; padding: 0; }
  .ob-mm-links li { display: block; margin: 0 0 6px; }
  .ob-mm-links a { display: block; }
  .ob-mm-links a { font-family: 'Hind',sans-serif; font-weight: 400; font-size: 13.5px; color: #414141; line-height: 1.35; text-decoration: none; }
  .ob-mm-links a:hover { color: #e77817; }

  .ob-mm-xlink {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
    color: #e77817; border: 1px solid #e77817; border-radius: 3px; padding: 0 4px; line-height: 14px; margin-left: 5px;
  }

  .ob-mm-rail { flex: 0 0 270px; display: flex; flex-direction: column; gap: 16px; }
  .ob-mm-feature { display: block; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; background: #fafafa; text-decoration: none; }
  .ob-mm-feature img { display: block; width: 100%; height: 170px; object-fit: cover; }
  .ob-mm-ph {
    height: 170px; display: flex; align-items: center; justify-content: center;
    color: #b7b7b7; font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
    background: repeating-linear-gradient(45deg,#f3f3f3 0 12px,#efefef 12px 24px);
  }
  .ob-mm-cap { padding: 12px 14px 14px; display: block; }
  .ob-mm-cap .k { display: block; font-family: 'Dosis','Hind',sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: 15px; color: #1a1a1a; }
  .ob-mm-cap .d { display: block; font-family: 'Hind',sans-serif; font-size: 12.5px; color: #6b6b6b; line-height: 1.4; margin-top: 2px; }
  .ob-mm-cap .cta { display: inline-block; margin-top: 8px; font-family: 'Dosis','Hind',sans-serif; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; color: #e77817; }
  .ob-mm-brands h4 { font-family: 'Dosis','Hind',sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #6b6b6b; margin: 0 0 9px; }
  .ob-mm-chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .ob-mm-chips a { font-family: 'Hind',sans-serif; font-size: 12.5px; font-weight: 600; color: #1a1a1a; border: 1px solid #e6e6e6; border-radius: 20px; padding: 5px 12px; text-decoration: none; }
  .ob-mm-chips a:hover { border-color: #e77817; color: #e77817; background: #fff7f0; }

  /* backdrop — VISUAL ONLY. pointer-events:none so it never steals the mouse. */
  .ob-mm-backdrop { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.28); opacity: 0; visibility: hidden; transition: opacity .16s; pointer-events: none; }
  .ob-mm-backdrop.is-show { opacity: 1; visibility: visible; }