/* ============================================================
   NESPL 3-Column Mega Menu (PRODUCTS)
   Col 1: categories (blue) | Col 2: subcategories (red) | Col 3: children (white)
   Scoped entirely under .nespl-mega so it cannot affect other UI.
   Brand blue #17539e, brand red #d0021b
   ============================================================ */
.nespl-mega{
  /* Palette (sequence): col1 dark blue, col2 medium blue, col3 very light blue */
  --nm-blue:#0B3D91; --nm-blue-dark:#082f70; --nm-red:#d0021b; --nm-red-dark:#b00016;
  --nm-ink:#243352; --nm-muted:#6b7686; --nm-line:#e5e8ee;
  /* Middle (subcategory) column — medium blue #6F9ED6 with dark-navy text for readability */
  --nm-subs-bg:#6F9ED6; --nm-subs-bg-hover:#5f93cf; --nm-subs-ink:#0B3D91; --nm-subs-arrow:#0B3D91;
  /* Children column — very light blue #E4F0FF */
  --nm-children-bg:#E4F0FF;
  display:flex; width:100%; max-width:1024px; box-sizing:border-box;
  background:#fff; border-radius:6px; overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  font-family:inherit;
}
.nespl-mega *{ box-sizing:border-box; }

/* Columns */
.nespl-mega .nm-col{
  height:min(70vh,520px);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.nespl-mega .nm-cats{ flex:0 0 34%; background:var(--nm-blue); padding:8px 0; }
.nespl-mega .nm-subs{ flex:0 0 30%; background:var(--nm-subs-bg); padding:8px 0; }
.nespl-mega .nm-children{ flex:1 1 36%; background:var(--nm-children-bg); padding:20px 0; }

/* Column 1 — categories (blue) */
.nespl-mega .nm-cat{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:14px 20px; border:0; background:transparent; cursor:pointer;
  color:#fff; font-size:13px; font-weight:600; letter-spacing:.2px;
  text-align:left; line-height:1.3; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .18s ease,color .18s ease;
}
.nespl-mega .nm-cat .nm-ic{ width:20px; flex:0 0 20px; text-align:center; opacity:.95; }
.nespl-mega .nm-cat .nm-ic img{ max-width:20px; height:auto; vertical-align:middle; }
.nespl-mega .nm-cat .nm-label{ flex:1 1 auto; }
.nespl-mega .nm-cat .nm-arrow{ flex:0 0 auto; opacity:.7; transition:transform .18s ease; }
.nespl-mega .nm-cat:hover{ background:var(--nm-blue-dark); }
.nespl-mega .nm-cat.is-active{ background:#fff; color:var(--nm-blue); border-radius:0 8px 8px 0; }
.nespl-mega .nm-cat.is-active .nm-arrow{ transform:translateX(2px); }

/* Column 2 — subcategories (red) */
.nespl-mega .nm-sub-group{ display:none; }
.nespl-mega .nm-sub-group.is-active{ display:block; }
.nespl-mega .nm-sub{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:14px 20px; border:0; background:transparent; cursor:pointer;
  color:var(--nm-subs-ink); font-size:13px; font-weight:600; letter-spacing:.2px;
  text-align:left; line-height:1.3; text-transform:uppercase;
  border-bottom:1px solid rgba(23,83,158,.10);
  transition:background .18s ease,color .18s ease;
}
.nespl-mega .nm-sub .nm-ic{ width:20px; flex:0 0 20px; text-align:center; }
.nespl-mega .nm-sub .nm-ic img{ max-width:20px; height:auto; vertical-align:middle; }
.nespl-mega .nm-sub .nm-label{ flex:1 1 auto; }
.nespl-mega .nm-sub .nm-arrow{ flex:0 0 auto; color:var(--nm-subs-arrow); opacity:1; }
.nespl-mega .nm-sub:hover{ background:var(--nm-subs-bg-hover); }
.nespl-mega .nm-sub.is-active{ background:#fff; box-shadow:inset 3px 0 0 var(--nm-blue); }

/* Column 3 — children (white) */
.nespl-mega .nm-child-group{ display:none; padding:0 26px; }
.nespl-mega .nm-child-group.is-active{ display:block; }
.nespl-mega .nm-child-head{
  display:flex; align-items:center; gap:8px;
  color:var(--nm-blue); font-size:13px; font-weight:700; text-transform:uppercase;
  padding:6px 0 14px; letter-spacing:.3px;
}
.nespl-mega .nm-child-head img{ max-width:20px; height:auto; }
.nespl-mega .nm-child{
  display:block; color:var(--nm-ink); text-decoration:none;
  font-size:14px; line-height:1.35; padding:11px 0;
  border-bottom:1px solid rgba(11,61,145,.12);
  transition:color .15s ease,padding-left .15s ease;
}
.nespl-mega .nm-child:last-child{ border-bottom:0; }
.nespl-mega .nm-child:hover{ color:var(--nm-blue); padding-left:5px; }
.nespl-mega .nm-empty{ color:var(--nm-muted); font-size:13px; padding:8px 0; }

/* ---- Modern custom scrollbars (WebKit + Firefox), themed to blue / red / white ---- */
.nespl-mega .nm-col::-webkit-scrollbar{ width:9px; height:9px; }
.nespl-mega .nm-col::-webkit-scrollbar-track{ background:rgba(0,0,0,.06); border-radius:10px; }
.nespl-mega .nm-col::-webkit-scrollbar-thumb{ border-radius:10px; transition:background .2s ease; }
/* Col 3 — very light blue children: soft light track + MEDIUM-blue thumb, hover dark blue */
.nespl-mega .nm-children::-webkit-scrollbar-track{ background:#cfe0f7; }
.nespl-mega .nm-children::-webkit-scrollbar-thumb{ background:#6F9ED6; }
.nespl-mega .nm-children::-webkit-scrollbar-thumb:hover{ background:var(--nm-blue); }
/* Col 2 — medium blue subcategories: translucent-white track + DARK-navy thumb (strong
   contrast on the medium bg), hover deeper navy. Distinct from the children scrollbar. */
.nespl-mega .nm-subs::-webkit-scrollbar-track{ background:rgba(255,255,255,.28); }
.nespl-mega .nm-subs::-webkit-scrollbar-thumb{ background:var(--nm-blue); }
.nespl-mega .nm-subs::-webkit-scrollbar-thumb:hover{ background:var(--nm-blue-dark); }
/* Col 1 — dark blue categories: translucent white thumb stays visible on the dark bg */
.nespl-mega .nm-cats::-webkit-scrollbar-track{ background:rgba(255,255,255,.15); }
.nespl-mega .nm-cats::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.55); }
.nespl-mega .nm-cats::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.9); }
/* Firefox */
.nespl-mega .nm-col{ scrollbar-width:thin; }
.nespl-mega .nm-children{ scrollbar-color:#6F9ED6 #cfe0f7; }
.nespl-mega .nm-subs{ scrollbar-color:var(--nm-blue) rgba(255,255,255,.28); }
.nespl-mega .nm-cats{ scrollbar-color:rgba(255,255,255,.6) rgba(255,255,255,.15); }

/* ---- Tablet ---- */
@media (max-width:991px){
  .nespl-mega{ max-width:100%; }
  .nespl-mega .nm-col{ height:min(64vh,460px); }
  .nespl-mega .nm-cat,.nespl-mega .nm-sub{ font-size:12px; padding:12px 13px; }
  .nespl-mega .nm-child{ font-size:13px; }
}

/* ---- Mobile: stack into a single-column drilldown ---- */
@media (max-width:767px){
  .nespl-mega{ flex-direction:column; box-shadow:none; height:auto; }
  .nespl-mega .nm-col{ flex:1 1 auto; width:100%; height:auto; max-height:none; }
  .nespl-mega.is-lvl-cats .nm-subs,
  .nespl-mega.is-lvl-cats .nm-children,
  .nespl-mega.is-lvl-subs .nm-cats,
  .nespl-mega.is-lvl-subs .nm-children,
  .nespl-mega.is-lvl-children .nm-cats,
  .nespl-mega.is-lvl-children .nm-subs{ display:none; }
  .nespl-mega .nm-back{
    display:flex; align-items:center; gap:8px; width:100%;
    padding:12px 16px; border:0; background:#eef2f8; color:var(--nm-blue);
    font-weight:700; font-size:12px; text-transform:uppercase; cursor:pointer;
    border-bottom:1px solid var(--nm-line);
  }
  .nespl-mega .nm-children{ padding:0; }
  .nespl-mega .nm-child-group{ padding:0 16px; }
  .nespl-mega .nm-children .nm-child-group{ max-height:60vh; overflow-y:auto; }
}
/* Desktop: hide the mobile back buttons */
.nespl-mega .nm-back{ display:none; }

/* ============================================================
   Always-stacked drilldown for the mobile off-canvas menu
   (class .nm-stacked) — independent of viewport width, since the
   off-canvas panel is narrow at all widths up to 991.98px.
   ============================================================ */
.nespl-mega.nm-stacked{ flex-direction:column; height:auto; max-width:100%; box-shadow:none; border-radius:0; }
.nespl-mega.nm-stacked .nm-col{ flex:1 1 auto; width:100%; height:auto; max-height:none; }
.nespl-mega.nm-stacked.is-lvl-cats .nm-subs,
.nespl-mega.nm-stacked.is-lvl-cats .nm-children,
.nespl-mega.nm-stacked.is-lvl-subs .nm-cats,
.nespl-mega.nm-stacked.is-lvl-subs .nm-children,
.nespl-mega.nm-stacked.is-lvl-children .nm-cats,
.nespl-mega.nm-stacked.is-lvl-children .nm-subs{ display:none; }
.nespl-mega.nm-stacked .nm-back{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:12px 18px; border:0; background:#eef2f8; color:var(--nm-blue);
  font-weight:700; font-size:12px; text-transform:uppercase; cursor:pointer;
  border-bottom:1px solid var(--nm-line);
}
.nespl-mega.nm-stacked .nm-children{ padding:0; }
.nespl-mega.nm-stacked .nm-child-group{ padding:14px 18px; }
.nespl-mega.nm-stacked .nm-children .nm-child-group{ max-height:60vh; overflow-y:auto; }

/* Off-canvas: reveal the stacked panel only when its PRODUCTS/BRANDS link is tapped.
   (webslidemenu sets .wsmenu-list .wsshoptabing{display:none} on <=991.98px.) */
@media only screen and (max-width:991.98px){
  .wsmenu-list .wsshoptabing.nespl-mega-wrap{ display:none; }
  .wsmenu-list .wsshoptabing.nespl-mega-wrap.nm-open{ display:block !important; }
}

/* Neutralize the webslidemenu dropdown container padding/background so the
   3-column panel controls its own appearance (scoped to the PRODUCTS menu). */
.nespl-mega-wrap.wsshoptabing{ padding:0 !important; background:transparent !important; border:0 !important; }
.nespl-mega-wrap .wsshopwp{ padding:0 !important; margin:0 !important; }

/* Off-canvas drawer: keep the first item (PRODUCTS) clear of the phone status bar/notch,
   so it isn't clipped at the top of the screen. */
@media only screen and (max-width:991.98px){
  .mobile-wsmenucontainer .wsmenu-list{ padding-top:34px; padding-top:calc(env(safe-area-inset-top, 0px) + 30px); }
}

/* Mobile off-canvas: make the whole nav independently scrollable so every category is
   reachable when a mega panel is expanded. The page behind stays fixed (scroll contained),
   with smooth touch scrolling and no clipping. */
@media only screen and (max-width:991.98px){
  .mobile-wsmenucontainer .wsmenu-list{
    max-height:100vh; max-height:100dvh;
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  /* Let the stacked panel + its columns grow naturally; the outer list handles scrolling. */
  .nespl-mega.nm-stacked,
  .nespl-mega.nm-stacked .nm-col{ height:auto !important; max-height:none !important; overflow:visible !important; }
  .nespl-mega.nm-stacked .nm-children .nm-child-group{ max-height:none; overflow:visible; }
}

/* Lock in hover/active text + icon colors (override webslidemenu's global a:hover{color:#000}). */
.nespl-mega .nm-cat, .nespl-mega .nm-cat *{ color:#fff; }
.nespl-mega .nm-cat:hover, .nespl-mega .nm-cat:hover *{ color:#fff !important; }
.nespl-mega .nm-cat.is-active, .nespl-mega .nm-cat.is-active *{ color:var(--nm-blue) !important; }

.nespl-mega .nm-sub, .nespl-mega .nm-sub *{ color:var(--nm-subs-ink); }
.nespl-mega .nm-sub:hover, .nespl-mega .nm-sub:hover *{ color:var(--nm-blue) !important; }
.nespl-mega .nm-sub.is-active, .nespl-mega .nm-sub.is-active *{ color:var(--nm-blue) !important; }
/* keep the chevron in its muted-blue tone even on hover/active */
.nespl-mega .nm-sub .nm-arrow{ color:var(--nm-subs-arrow) !important; }
.nespl-mega .nm-sub.is-active .nm-arrow, .nespl-mega .nm-sub:hover .nm-arrow{ color:var(--nm-blue) !important; }

.nespl-mega .nm-child{ color:var(--nm-ink); }
.nespl-mega .nm-child:hover, .nespl-mega .nm-child:hover *{ color:var(--nm-blue) !important; }

/* Icon consistency (blue category column): simple industry PNG icons can't be recolored via
   `color`, so render them as solid white to match the font/SVG ones. */
.nespl-mega .nm-cat .nm-ic img{ filter:brightness(0) invert(1); }
/* Active category is on a white background -> show its icon in original colors so it stays visible. */
.nespl-mega .nm-cat.is-active .nm-ic img{ filter:none; }

/* BRANDS menu — the blue left column shows manufacturer LOGOS (uploads/manufacturer/),
   not simple glyph icons. Inverting opaque logos to white turns them into white squares,
   so instead show each real logo inside a small white rounded badge (like the red column),
   which stays legible on the blue background and never appears as a blank box. */
/* Wider logo container: full logo always visible (object-fit:contain), aspect ratio kept,
   centred, padded, white bg with subtle border + shadow. Consistent row height & spacing. */
#nesplBrandsMega .nm-cat,
#nesplBrandsMegaM .nm-cat{ gap:16px; min-height:66px; padding-top:12px; padding-bottom:12px; }
#nesplBrandsMega .nm-cat .nm-ic,
#nesplBrandsMegaM .nm-cat .nm-ic{
  width:66px; height:46px; flex:0 0 66px; padding:6px 8px;
  background:#fff; border-radius:8px; overflow:hidden;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 4px rgba(0,0,0,.14);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow .18s ease, transform .18s ease;
}
#nesplBrandsMega .nm-cat .nm-ic img,
#nesplBrandsMegaM .nm-cat .nm-ic img{
  filter:none !important; max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; margin:0;
}
#nesplBrandsMega .nm-cat .nm-label,
#nesplBrandsMegaM .nm-cat .nm-label{ line-height:1.35; letter-spacing:.3px; }
/* Polished hover / active states for the logo container. */
#nesplBrandsMega .nm-cat:hover .nm-ic,
#nesplBrandsMegaM .nm-cat:hover .nm-ic{ box-shadow:0 3px 10px rgba(0,0,0,.24); transform:translateY(-1px); }
#nesplBrandsMega .nm-cat.is-active .nm-ic,
#nesplBrandsMegaM .nm-cat.is-active .nm-ic{ background:#fff; border-color:rgba(23,83,158,.30); box-shadow:0 2px 8px rgba(23,83,158,.20); }

/* Subcategory (red) column: source icons are full-colour brand logos. Show each in a small
   white "chip" so the logo displays in its real colours and reads cleanly on the red bg —
   no inversion, so no white-box artefacts. Works for image logos and font/SVG icons alike. */
/* The subcategory icons are real product/brand images (not glyphs), so show them in a small
   white circular badge -> every icon is visible and legible on the red background. */
.nespl-mega .nm-sub .nm-ic{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 34px; padding:5px;
  background:#fff; border-radius:50%; overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.nespl-mega .nm-sub .nm-ic img{ filter:none !important; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; margin:0; }
.nespl-mega .nm-sub .nm-ic i,
.nespl-mega .nm-sub .nm-ic svg{ color:var(--nm-blue) !important; }