/* Mega dropdown menu: catalogs and brands from the database, opens on hover. */
.nav{align-items:center}
.mega-wrap{position:static}
.mega-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:0;background:var(--glass-hi);color:var(--ink);font:600 14px var(--f-body)}
.mega-btn svg{transition:transform .25s}
.mega-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mega{position:absolute;inset-inline:16px;top:calc(100% + 10px);z-index:60;padding:22px;opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:top center;transition:opacity .25s,transform .25s,visibility .25s;max-height:min(78vh,640px);overflow:auto}
.mega.on{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr;gap:26px}
.mega h4{font:700 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.mega ul{list-style:none;margin:0;padding:0}
.mega-cats>ul{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mega-cats>ul>li{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;transition-delay:calc(var(--i) * 22ms)}
.mega.on .mega-cats>ul>li{opacity:1;transform:none}
.mega-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;text-decoration:none;color:var(--ink);border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s}
.mega-item:hover,.mega-item:focus-visible{background:var(--glass-hi);border-color:var(--accent);transform:translateX(4px)}
html[dir="rtl"] .mega-item:hover,html[dir="rtl"] .mega-item:focus-visible{transform:translateX(-4px)}
.mi-art{width:46px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%);--c:var(--accent)}
.mi-art .art{width:80%;transform:none;filter:none}
.mi-txt{display:grid;line-height:1.25}.mi-txt b{font-size:14px}.mi-txt small{font:500 11px var(--f-mono);color:var(--ink2)}
.mega-sub{padding-inline-start:56px;display:grid;gap:2px}.mega-sub a{font-size:13px;color:var(--ink2);text-decoration:none}.mega-sub a:hover{color:var(--ink)}
.mega-brands li a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:500}
.mega-brands li a:hover{background:var(--glass-hi)}
.mega-brands i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor}
.mega-feat{display:grid;gap:8px;align-content:start;text-decoration:none;color:var(--ink);padding:14px;border-radius:18px;background:linear-gradient(160deg,var(--glass-hi),transparent);border:1px solid var(--edge);transition:transform .25s,border-color .25s}
.mega-feat:hover{transform:translateY(-4px);border-color:var(--accent)}
.mf-img{aspect-ratio:1/.8;border-radius:14px;display:grid;place-items:center;overflow:hidden;--c:var(--accent);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%)}
.mf-img img{width:100%;height:100%;object-fit:contain}.mf-img .art{width:70%;transform:none}
.menu .m-acc{padding:4px 14px}.menu .m-acc summary{padding:10px 0;font-weight:600;cursor:pointer}.menu .m-acc a{display:block;padding:8px 10px}
@media (max-width:1000px){.mega-wrap{display:none}}
/* The panel floats over the 3D showcase: a denser glass keeps the labels readable. */
.mega{background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2)}