/* ============================================================
   Floating mega-menu — overlay anchored under the sticky nav.
   position:absolute so it floats OVER content (never pushes down).
   ============================================================ */
.nav-link[data-menu]{ cursor:pointer; }
.nav-link.menu-open{ color:#fff; background:rgba(255,255,255,.08); }

.mega-overlay{
  position:absolute; top:100%; left:0; right:0;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
}
.mega-overlay.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }

.mega-panel{
  background:#fff;
  border-top:1px solid rgba(0,0,0,.06);
  box-shadow:0 36px 70px -24px rgba(0,0,0,.32);
  border-radius:0 0 18px 18px;
  padding:30px 40px 34px;
}
.mega-cols{
  display:flex; gap:44px; flex-wrap:wrap;
  max-width:var(--max-w,1280px); margin:0 auto;
}
/* wide (Product) menu: fit all columns in one row, no horizontal scrollbar */
.mega-cols-wide{ flex-wrap:nowrap; gap:24px; }
.mega-cols-wide .mega-col{ flex:1 1 0; min-width:0; }
.mega-col{ min-width:172px; flex:0 0 auto; }
.mega-col-title{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:#86868b; margin:0 0 12px;
}
.mega-link{
  display:block; padding:7px 10px; margin:0 -10px; border-radius:9px;
  font-size:14px; color:#1d1d1f; text-decoration:none; line-height:1.3;
  transition:background .12s, color .12s;
}
.mega-link:hover{ background:#f4f4f6; color:var(--brand-red,#c8102e); }
.mega-link.featured{ font-weight:650; color:#1d1d1f; }
.mega-link.featured::after{
  content:'\2192'; margin-left:6px; color:var(--brand-red,#c8102e);
  display:inline-block; transition:transform .15s;
}
.mega-link.featured:hover::after{ transform:translateX(3px); }

.mega-scrim{
  position:fixed; inset:0; z-index:9000;
  background:rgba(10,10,12,.28);
  opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s;
}
.mega-scrim.show{ opacity:1; visibility:visible; }

/* ----- Mobile accordion drawer ----- */
.m-acc{ border-bottom:1px solid rgba(255,255,255,.1); }
.m-acc summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; font-size:17px; font-weight:600; color:#fff;
}
.m-acc summary::-webkit-details-marker{ display:none; }
.m-acc summary::after{ content:'\002B'; font-size:22px; color:rgba(255,255,255,.6); font-weight:300; }
.m-acc[open] summary::after{ content:'\2212'; }
.m-acc-body{ display:flex; flex-direction:column; padding:0 4px 14px; }
.m-acc-body a{ padding:9px 12px; font-size:15px; color:rgba(255,255,255,.78); text-decoration:none; border-radius:8px; }
.m-acc-body a:hover{ background:rgba(255,255,255,.08); color:#fff; }
/* nested category sub-groups (e.g. Product → Single-brand Tools → models) */
.m-acc-body .m-sub{ border-bottom:0; margin:3px 0; background:rgba(255,255,255,.04); border-radius:10px; }
.m-acc-body .m-sub > summary{ padding:11px 12px; font-size:13.5px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.9); }
.m-acc-body .m-sub > summary::after{ content:'\002B'; font-size:17px; }
.m-acc-body .m-sub[open] > summary::after{ content:'\2212'; }
.m-acc-body .m-sub .m-acc-body{ padding:0 6px 8px; }
.m-acc-body .m-sub .m-acc-body a{ padding:8px 12px 8px 20px; font-size:14px; }

@media(max-width:1024px){ .mega-overlay{ display:none !important; } }

/* ===== Product menu: two-level layout (design taxonomy) — left category rail + right panel ===== */
.mega-prod{ display:flex; align-items:stretch; min-height:0; }
.mp-rail{ flex:0 0 360px; width:360px; border-right:1px solid #eee5db; padding-right:18px; display:flex; flex-direction:column; }
.mp-cat{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-radius:9px; margin-bottom:2px; padding:8px 10px; cursor:pointer;
  font:500 13px/1.35 inherit; color:#3c352d; font-family:inherit; transition:background .12s, color .12s; }
.mp-cat .mp-chev{ flex:0 0 auto; color:#c9beb1; font-size:17px; line-height:1; transition:transform .15s; }
.mp-cat:hover, .mp-cat.active{ color:#c8102e; font-weight:700; background:#fdf6f2; }
.mp-cat:hover .mp-chev, .mp-cat.active .mp-chev{ color:#c8102e; transform:translateX(3px); }
.mp-panel{ flex:1 1 auto; min-width:0; padding:10px 8px 10px 34px; }
.mp-all{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:#c8102e; text-decoration:none; margin-bottom:14px; padding:7px 14px;
  border:1px solid #f0cdd0; border-radius:999px; background:#fdf6f6; transition:.15s; }
.mp-all:hover{ background:#c8102e; border-color:#c8102e; color:#fff; }

/* product thumbnail tiles — image + name cards that fill the panel instead of bare text */
.mp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:11px 13px; }
.mp-tile{ display:flex; align-items:center; gap:13px; padding:9px 13px 9px 9px; border:1px solid #f0e9df;
  border-radius:13px; text-decoration:none; color:#3c352d; background:#fff; min-width:0;
  transition:border-color .15s, box-shadow .15s, transform .15s, color .15s; }
.mp-tile:hover{ border-color:#e2a37f; box-shadow:0 8px 18px rgba(200,80,26,.12); color:#c8102e; transform:translateY(-1px); }
.mp-tile-im{ flex:0 0 64px; width:64px; height:64px; border-radius:10px; background:#f7f4ef;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mp-tile-im img{ max-width:92%; max-height:92%; object-fit:contain; display:block; }
.mp-tile-t{ font-size:13.5px; font-weight:600; line-height:1.35; overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mp-links{ column-count:2; column-gap:44px; }
.mp-link{ display:block; padding:6px 0; font-size:13.5px; color:#3c352d; text-decoration:none;
  break-inside:avoid; -webkit-column-break-inside:avoid; }
.mp-link:hover{ color:#c8102e; }

/* grouped drill-down panel (single-brand: make group → products) */
.mp-groups{ column-count:3; column-gap:36px; }
.mp-group{ break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:18px; }
.mp-gt{ display:block; font-size:12px; font-weight:800; letter-spacing:.05em; color:#8a8177;
  text-transform:uppercase; text-decoration:none; margin-bottom:4px; }
.mp-gt:hover{ color:#c8102e; }
.mp-group .mp-link{ padding:5px 0; }

/* single-brand cascade: make-group rail inside the panel → hover reveals its products */
.mp-cascade{ display:flex; align-items:stretch; }
.mp-rail2{ flex:0 0 330px; width:330px; border-right:1px solid #f0e8de; padding-right:14px; display:flex; flex-direction:column; }
.mp-cat2{ padding:7px 8px !important; font-size:13px !important; }
.mp-panel2{ flex:1 1 auto; min-width:0; padding:4px 6px 4px 26px; }
.mp-panel2 .mp-links{ column-count:1 !important; }
