/* AJAW Trade — "All categories" hover mega-menu.
   Every selector is prefixed .mega- so nothing leaks into style.css.
   Tokens, radii, border and shadow are taken from style.css (:root). */

.mega-panel{
 position:fixed;
 top:var(--mega-top,140px);
 left:0;right:0;
 z-index:70;
 display:block;
 background:#fff;
 border-top:1px solid var(--line);
 border-bottom:1px solid var(--line);
 box-shadow:0 18px 44px rgba(16,14,48,.16);
 font-family:var(--body);
 color:var(--ink);
}
.mega-panel[hidden]{display:none}

/* Invisible bridge across the gap between the trigger link and the panel,
   sized to the trigger only so it never swallows clicks on other nav items. */
.mega-panel::before{
 content:"";
 position:absolute;
 top:calc(-1 * var(--mega-bridge-h,12px));
 left:var(--mega-bridge-x,0);
 width:var(--mega-bridge-w,160px);
 height:var(--mega-bridge-h,12px);
}

.mega-inner{
 max-width:1512px;
 width:calc(100% - 80px);
 margin:auto;
 display:grid;
 grid-template-columns:252px minmax(0,1fr);
 padding:16px 0 18px;
}

/* ------------------------------------------------------------ left pane */

.mega-nav{
 display:flex;
 flex-direction:column;
 gap:1px;
 max-height:var(--mega-max-h,62vh);
 overflow:auto;
 padding-right:14px;
 scrollbar-width:thin;
}
.mega-row{
 display:flex;
 align-items:center;
 gap:11px;
 padding:8px 12px;
 border-radius:8px;
 font-size:12px;
 line-height:1.3;
 color:var(--ink);
 text-decoration:none;
}
.mega-row>.icon{width:17px;height:17px;flex:none;color:var(--gray)}
.mega-row>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-row>.icon:last-child{width:12px;height:12px;opacity:0;margin-left:auto}
.mega-row:hover,.mega-row.is-active{background:var(--tint);color:var(--violet)}
.mega-row:hover>.icon,.mega-row.is-active>.icon{color:var(--violet)}
.mega-row:hover>.icon:last-child,.mega-row.is-active>.icon:last-child{opacity:1}

.mega-all{
 display:flex;
 align-items:center;
 gap:7px;
 margin-top:8px;
 padding:10px 12px 2px;
 border-top:1px solid var(--line);
 font-size:11px;
 font-weight:500;
 color:var(--gray);
 text-decoration:none;
}
.mega-all .icon{width:13px;height:13px}
.mega-all:hover{color:var(--violet)}

/* ------------------------------------------------------------ right pane */

.mega-grid{
 position:relative;
 max-height:var(--mega-max-h,62vh);
 overflow:auto;
 padding:0 4px 0 24px;
 margin-left:20px;
 border-left:1px solid var(--line);
 scroll-behavior:smooth;
 scrollbar-width:thin;
}
.mega-sec{padding-bottom:20px}
.mega-sec:last-child{padding-bottom:2px}
.mega-sec-head{
 display:flex;
 align-items:baseline;
 justify-content:space-between;
 gap:14px;
 margin-bottom:14px;
 padding-bottom:8px;
 border-bottom:1px solid var(--line);
}
.mega-sec-head h4{
 margin:0;
 font-family:var(--display);
 font-size:14px;
 font-weight:600;
 letter-spacing:-.01em;
 color:var(--ink);
}
.mega-sec-head a{
 display:inline-flex;
 align-items:center;
 gap:5px;
 flex:none;
 font-size:11px;
 color:var(--gray);
 text-decoration:none;
}
.mega-sec-head a .icon{width:12px;height:12px}
.mega-sec-head a:hover{color:var(--violet)}

.mega-thumbs{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(106px,1fr));
 gap:18px 12px;
}
.mega-thumb{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:9px;
 text-align:center;
 text-decoration:none;
 color:var(--ink);
 min-width:0;
}
.mega-disc{
 width:78px;height:78px;
 border-radius:50%;
 overflow:hidden;
 flex:none;
 display:flex;
 align-items:center;
 justify-content:center;
 background:var(--canvas);
 border:1px solid var(--line);
 color:var(--muted);
 transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.mega-disc img{width:100%;height:100%;object-fit:cover;display:block}
.mega-disc>.icon{width:26px;height:26px}
.mega-thumb b{
 width:100%;
 min-width:0;
 word-break:break-word;
 font-size:11px;
 font-weight:500;
 line-height:1.35;
 color:var(--gray);
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
}
.mega-thumb:hover .mega-disc{
 border-color:var(--soft);
 box-shadow:0 6px 18px rgba(62,52,249,.18);
 transform:translateY(-2px);
}
.mega-thumb:hover b{color:var(--violet)}

.mega-none{margin:0;font-size:11px;color:var(--muted)}

/* ------------------------------------------------------------ loading skeleton */

.mega-loading{
 display:grid;
 grid-template-columns:repeat(auto-fill,minmax(106px,1fr));
 gap:18px 12px;
 padding-top:4px;
}
.mega-loading span{display:flex;flex-direction:column;align-items:center;gap:9px}
.mega-loading i{width:78px;height:78px;border-radius:50%;background:var(--canvas);border:1px solid var(--line)}
.mega-loading em{width:74%;height:9px;border-radius:5px;background:var(--canvas)}
.mega-loading i,.mega-loading em{animation:mega-pulse 1.4s ease-in-out infinite}
@keyframes mega-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* ------------------------------------------------------------ responsive / motion */

@media(max-width:1250px){
 .mega-inner{width:calc(100% - 48px);grid-template-columns:224px minmax(0,1fr)}
 .mega-grid{padding-left:20px;margin-left:16px}
}

@media(max-width:980px){
 .mega-panel{display:none !important}
}

@media(prefers-reduced-motion:reduce){
 .mega-grid{scroll-behavior:auto}
 .mega-disc{transition:none}
 .mega-thumb:hover .mega-disc{transform:none}
 .mega-loading i,.mega-loading em{animation:none}
}