/* 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}
}
/* Scoped overrides: the header's generic anchor rules must not flatten this panel. */
.mega-inner{grid-template-columns:252px minmax(0,1fr);padding:16px 0;max-height:min(660px,var(--mega-max-h));}
.mega-nav{max-height:min(620px,var(--mega-max-h));padding-right:16px;gap:2px}
.main-nav .mega-row{min-height:38px;gap:10px;padding:9px 12px;font-size:13px;white-space:normal;border-radius:6px}
.mega-grid{padding:8px 0 0 28px;margin-left:12px;max-height:min(620px,var(--mega-max-h))}
.mega-sec[hidden]{display:none!important}
.mega-sec{padding:0;min-height:480px;display:flex;flex-direction:column}
.mega-sec-head{align-items:center;border:0;margin-bottom:20px;padding:0}
.mega-eyebrow{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.mega-sec-head h4{font-family:var(--body);font-size:22px;letter-spacing:-.025em;margin-top:4px}
.main-nav .mega-sec-head a{font-size:12px;white-space:normal;gap:6px}
.mega-subcategories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px;margin-bottom:24px}
.main-nav .mega-subcategory{display:flex;align-items:center;gap:12px;white-space:normal;min-width:0;padding:10px 6px;border-radius:8px;min-height:82px}
.mega-subcategory:hover{background:var(--canvas)}
.mega-category-art{width:64px;height:64px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;background:var(--canvas);color:var(--gray)}
.mega-category-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mega-category-art>.icon{width:26px;height:26px}
.mega-subcategory>span:nth-child(2){min-width:0;flex:1}
.mega-subcategory b{display:block;font-size:13px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.mega-subcategory small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.mega-subcategory>.icon{width:12px;color:var(--muted)}
.mega-sourcing{margin-top:auto;border-top:1px solid var(--line);padding:16px 0 4px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.mega-sourcing b{font-size:13px}.mega-sourcing p{font-size:12px;line-height:1.5;margin-top:4px}
.main-nav .mega-sourcing a{padding:10px 14px;border:1px solid var(--line);border-radius:6px;white-space:nowrap;font-size:12px;gap:8px}
@media(min-width:981px) and (max-width:1200px){.mega-inner{grid-template-columns:220px minmax(0,1fr)}.mega-subcategories{grid-template-columns:repeat(2,minmax(0,1fr))}.mega-sourcing{align-items:flex-start;flex-direction:column;gap:10px}}

/* ---- reference-style right pane: stacked sections, circular tiles, scrollable ---- */
.mega-inner{grid-template-columns:270px minmax(0,1fr);padding:14px 0 16px}
.mega-nav{max-height:var(--mega-max-h,62vh);overflow:auto;scrollbar-width:thin}
.mega-row{font-size:13px;padding:9px 12px}
.mega-row>.icon{width:18px;height:18px}
.mega-grid{max-height:var(--mega-max-h,62vh);overflow:auto;padding:0 12px 0 28px;margin-left:16px;scroll-behavior:smooth}
.mega-sec{display:block!important;padding:6px 0 18px}
.mega-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:12px}
.mega-sec-head h4{font-size:17px;font-weight:650;letter-spacing:-.01em;margin:0}
.mega-sec-head a{font-size:12px;color:var(--gray);text-decoration:underline;text-underline-offset:3px}
.mega-sec-head a:hover{color:var(--violet)}
.mega-tiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px 10px}
.mega-tile{display:block;text-align:center;font-size:11.5px;line-height:1.3;color:var(--ink);text-decoration:none}
.mega-tile b{display:block;font-weight:450;max-width:110px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mega-disc{position:relative;width:84px;height:84px;border-radius:50%;background:#f2f2f6;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;transition:transform .15s,box-shadow .15s}
.mega-disc .icon{width:28px;height:28px;color:#6b6f82}
.mega-disc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.mega-tile:hover .mega-disc{transform:translateY(-2px);box-shadow:0 6px 16px rgba(37,31,149,.14)}
.mega-tile:hover b{color:var(--violet)}
@media (max-width:1240px){.mega-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}

.mega-grid .mega-tile{display:flex!important;flex-direction:column;align-items:center;gap:0;padding:0;border:0;background:none;min-height:0}
.mega-grid .mega-sec{min-height:0;margin:0;padding:6px 0 14px;border:0}
.mega-grid .mega-sec+.mega-sec{border-top:1px solid var(--line);padding-top:16px}
.mega-tile b{font-size:11.5px;color:var(--ink)}