/* Nested subcategory flyout for the Products nav dropdown */

/* Off-canvas panel header (Menu / close X) and backdrop are mobile-only — hidden on desktop */
.nav-menu-header,
.nav-overlay{display:none;}

.dropdown-menu li.has-submenu{position:relative;}

.nav-cat-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.nav-cat-link{flex:1;padding:9px 8px 9px 18px !important;font-size:.88rem;color:#444;display:block;white-space:nowrap;}
.dropdown-menu a:hover{background:var(--light,#f4f7fc);color:var(--blue,#1a3cdc);}

.submenu-toggle{
  background:none;border:none;padding:9px 16px;color:#8b93b8;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .2s ease,color .2s ease;
}
.submenu-toggle:hover{color:var(--blue,#1a3cdc);}
.submenu-toggle i{transition:transform .2s ease;}
li.has-submenu.open .submenu-toggle i{transform:rotate(180deg);}
li.has-submenu.open .submenu-toggle{color:var(--blue,#1a3cdc);}

.dropdown-submenu{
  display:none;position:absolute;top:-8px;left:100%;background:#fff;
  border:1px solid var(--border,#dee2e6);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.1);min-width:200px;z-index:101;
  padding:8px 0;margin:0;list-style:none;
}
.dropdown-menu li.has-submenu:hover .dropdown-submenu{display:block;}
.dropdown-submenu a{padding:9px 18px;font-size:.86rem;}

@keyframes navSubmenuOpen{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}

@keyframes navPanelOpen{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

@media(max-width:991px){

  .nav-toggler{
    padding:6px 10px;border-radius:8px;transition:background .2s ease,color .2s ease;
    position:relative;z-index:1;
  }
  .nav-toggler:hover{background:var(--light,#f4f7fc);}

  /* dark backdrop behind the sliding panel */
  .nav-overlay{
    display:block;
    position:fixed;inset:0;
    background:rgba(10,14,30,.55);
    opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
    z-index:1040;
  }
  .nav-overlay.open{opacity:1;visibility:visible;}

  /* the panel itself: fixed, full height, slides in from the right */
  .nav-menu{
    position:fixed;
    top:0;right:0;
    width:min(300px,82vw);
    height:100vh;
    height:100dvh;
    margin:0;
    flex-direction:column !important;
    flex-wrap:nowrap;
    background:#fff;
    border-radius:0;
    padding:0 0 24px;
    box-shadow:-6px 0 30px rgba(0,0,0,.18);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:1050;
    max-height:none;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-menu.open{
    display:flex !important;
    transform:translateX(0);
    animation:none;
  }

  /* panel header: "Menu" title + close button */
  .nav-menu-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid var(--light,#f4f7fc);
    background:var(--navy,#0d1b3e);
    position:sticky;top:0;z-index:2;
  }
  .nav-menu-header span{color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.5px;}
  .nav-menu-close{
    background:rgba(255,255,255,.12);border:none;color:#fff;
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;cursor:pointer;transition:background .2s ease;
  }
  .nav-menu-close:hover{background:rgba(255,255,255,.25);}

  .nav-menu > li{border-bottom:1px solid var(--light,#f4f7fc);width:100%;}
  .nav-menu > li:last-child{border-bottom:none;}
  .nav-menu > li > a{
    padding:15px 20px !important;font-size:.95rem;border-radius:0 !important;
    position:relative;display:block;width:100%;
  }
  .nav-menu > li > a.active,
  .nav-menu > li > a:hover{
    background:var(--light,#f4f7fc);color:var(--blue,#1a3cdc);
  }
  .nav-menu > li > a.active::before{
    content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue,#1a3cdc);
  }
  .nav-menu .nav-login{margin:16px 20px 0;width:calc(100% - 40px);justify-content:center;}

  .nav-menu .dropdown > a{display:flex !important;align-items:center;justify-content:space-between;}
  .nav-menu .dropdown.open > a{color:var(--blue,#1a3cdc);background:var(--light,#f4f7fc);}
  .nav-menu .dropdown.open > a i{transform:rotate(180deg);}
  .nav-menu .dropdown > a i{transition:transform .2s ease;}

  .nav-menu .dropdown-menu{
    display:none;
    position:static;left:auto;right:auto;
    background:var(--light,#f8f9fc);
    border:none;box-shadow:none;
    padding:6px 0;margin:2px 12px 8px;border-radius:8px;
    max-height:none;overflow-y:visible;
    animation:navSubmenuOpen .18s ease;
  }
  .nav-menu .dropdown.open .dropdown-menu{display:block;}
  .nav-menu .dropdown-menu li{padding:0 4px;}
  .nav-cat-link{
    padding:11px 8px 11px 16px !important;font-weight:600;font-size:.87rem;border-radius:6px;
    white-space:normal;
  }
  .nav-menu .dropdown-menu a:hover{background:#fff;}
  .submenu-toggle{
    margin-right:4px;border-radius:6px;
  }
  .submenu-toggle:hover{background:#fff;}

  .dropdown-submenu{
    position:static;box-shadow:none;border:none;
    border-left:3px solid var(--accent,#00b4d8);margin:2px 8px 6px 20px;
    display:none;overflow:hidden;
    animation:navSubmenuOpen .18s ease;
  }
  .dropdown-submenu a{
    padding:8px 8px 8px 14px;font-size:.83rem;font-weight:500;color:#555;
  }
  li.has-submenu.open .dropdown-submenu{display:block;}
}

/* lock background scroll while the off-canvas menu is open */
body.nav-open{overflow:hidden;}