:root{
--em-primary:#0b1f4d;   /* EnvMart navy */
--em-accent:#10b981;    /* EnvMart green */
--em-border:#e6ebf2;
--em-soft:#f6f8fc;
--em-text:#0f172a;
--em-sub:#475569;
}
/* ===== Trigger ===== */
.em-mm{ position:relative; display:inline-block; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
.em-mm .em-mm__trigger{
display:flex; gap:10px; align-items:center;
padding:10px 14px; border:1px solid var(--em-border); border-radius:999px;
background:#fff; color:var(--em-text);
cursor:pointer; user-select:none;
}
.em-mm .em-mm__burger{ font-size:16px; line-height:1; color:var(--em-primary); }
.em-mm .em-mm__trigger:hover{ box-shadow:0 10px 24px rgba(11,31,77,.10); border-color:#d7deea; }
/* ===== Panel ===== */
.em-mm .em-mm__panel{
position:absolute; left:0; top:calc(100% + 10px);
width:min(1240px,94vw); height:620px;
background:#fff; border:1px solid var(--em-border);
border-radius:16px; box-shadow:0 26px 70px rgba(2,8,23,.18);
display:none; overflow:hidden; z-index:99999;
}
.em-mm.is-open .em-mm__panel{ display:flex; }
/* ===== Left (L1) ===== */
.em-mm .em-mm__left{
width:340px; border-right:1px solid var(--em-border);
padding:14px; overflow:auto; background:#fff;
}
.em-mm .em-mm__l1Item{
display:flex; align-items:center; gap:12px;
padding:10px 10px; border-radius:12px; cursor:pointer;
}
.em-mm .em-mm__l1Item:hover{ background:var(--em-soft); }
.em-mm .em-mm__l1Item.is-active{ background:#eaf3ff; }
.em-mm .em-mm__l1Name{
font-size:14px; font-weight:500; color:var(--em-text);
text-decoration:none; flex:1; min-width:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.em-mm .em-mm__chev{ opacity:.55; font-size:18px; }
/* Circle icon with center crop (fixes rectangle images) */
.em-mm .em-mm__icon{
width:34px;height:34px;border-radius:999px;overflow:hidden;
flex:0 0 34px;
}
.em-mm .em-mm__columns{
overflow:auto;
overflow-x:hidden !important;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap:14px;
}
.em-mm .em-mm__group{ min-width:0 !important; }

.em-mm .em-mm__icon img{
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:cover !important;
object-position:center !important;
display:block !important;
}
/* ===== Right ===== */
.em-mm .em-mm__right{ flex:1; display:flex; flex-direction:column; min-width:0; }
.em-mm .em-mm__rightHead{
padding:12px 16px;
border-bottom:1px solid var(--em-border);
display:flex; justify-content:space-between; align-items:center;
}
.em-mm .em-mm__browse{
font-size:13px; font-weight:400;
color:var(--em-text); text-decoration:none;
}
.em-mm .em-mm__browse:hover{ color:var(--em-primary); text-decoration:underline; }
.em-mm .em-mm__viewAll{
font-size:13px; font-weight:400;
color:var(--em-primary); text-decoration:none;
}
.em-mm .em-mm__viewAll:hover{ text-decoration:underline; }
/* Featured pills */
.em-mm .em-mm__featured{
padding:12px 16px; border-bottom:1px solid #f0f3f8;
display:flex; flex-wrap:wrap; gap:10px;
}
.em-mm .em-mm__pill{
display:flex; align-items:center; gap:8px;
border:1px solid #eef2f7; border-radius:999px;
padding:7px 10px; font-size:13px;
text-decoration:none; color:var(--em-text);
background:#fff;
}
.em-mm .em-mm__pill:hover{ box-shadow:0 10px 22px rgba(11,31,77,.08); border-color:#dbe3f0; }
.em-mm .em-mm__pill img{ width:18px; height:18px; border-radius:50%; object-fit:cover; }
/* ===== Content area (columns + side) ===== */
.em-mm .em-mm__content{
display:flex; min-width:0; flex:1;
overflow:hidden;
}
/* Alibaba-style multi-columns */
.em-mm .em-mm__columns{
flex:1; min-width:0;
padding:14px 16px;
overflow:auto;
display:grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
gap:14px 18px;
align-content:start;
}
/* L2 group (like Alibaba group) */
.em-mm .em-mm__group{
border:1px solid #eef2f7;
border-radius:14px;
padding:12px;
background:#fff;
}
.em-mm .em-mm__groupHead{
display:flex; align-items:center; justify-content:space-between; gap:10px;
margin-bottom:8px;
}
.em-mm .em-mm__l2Link{
display:flex; align-items:center; gap:10px;
font-size:14px; font-weight:600; color:var(--em-text);
text-decoration:none; min-width:0;
}
.em-mm .em-mm__l2Link:hover{ text-decoration:underline; }
.em-mm .em-mm__l2Icon{
width:40px; height:40px; border-radius:10px; overflow:hidden;
background:#f3f4f6; border:1px solid #eef2f7;
flex:0 0 auto;
}
.em-mm .em-mm__l2Icon img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.em-mm .em-mm__l3List{ margin-top:6px; }
.em-mm .em-mm__l3Link{
display:block;
padding:3px 0;
font-size:13px; line-height:1.35;
color:var(--em-sub); text-decoration:none;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.em-mm .em-mm__l3Link:hover{ color:var(--em-text); text-decoration:underline; }
/* “More” / “View all in …” */
.em-mm .em-mm__more{
display:inline-block; margin-top:6px;
font-size:13px; font-weight:600;
color:var(--em-primary); text-decoration:underline;
}
.em-mm .em-mm__more:hover{ text-decoration:underline; }
/* Right side brands/trending */
.em-mm .em-mm__side{
width:240px; border-left:1px solid var(--em-border);
padding:14px; overflow:auto; background:#fbfcff;
}
.em-mm .em-mm__sideTitle{
font-size:13px; font-weight:900; letter-spacing:.2px;
color:var(--em-text); margin-bottom:10px;
}
.em-mm .em-mm__brand{
display:flex; align-items:center; justify-content:space-between;
padding:10px 10px; border-radius:12px;
border:1px solid #eef2f7; background:#fff;
margin-bottom:10px;
text-decoration:none; color:var(--em-text);
font-size:14px; font-weight:750;
}
.em-mm .em-mm__brand:hover{ box-shadow:0 10px 20px rgba(11,31,77,.08); border-color:#dbe3f0; }
.em-mm .em-mm__dot{
width:8px; height:8px; border-radius:50%;
background:var(--em-accent);
}
.em-mm .em-mm__left,
.em-mm .em-mm__columns,
.em-mm .em-mm__side{
scrollbar-width: thin;
scrollbar-color: rgba(11,31,77,.25) transparent;
}
.em-mm .em-mm__left::-webkit-scrollbar,
.em-mm .em-mm__columns::-webkit-scrollbar,
.em-mm .em-mm__side::-webkit-scrollbar{ width:10px; }
.em-mm .em-mm__left::-webkit-scrollbar-thumb,
.em-mm .em-mm__columns::-webkit-scrollbar-thumb,
.em-mm .em-mm__side::-webkit-scrollbar-thumb{
background: rgba(11,31,77,.22);
border-radius:999px;
border:2px solid transparent;
background-clip: padding-box;
}
/* ===== Mobile Drawer ===== */
.em-mm .em-mm__mHeader{ display:none; }
@media (max-width: 768px){
.em-mm .em-mm__panel{
position:fixed; inset:0; width:100vw; height:100vh;
border-radius:0;
}
.em-mm .em-mm__left{ width:100%; border-right:none; }
.em-mm .em-mm__right{ display:none; }
/* mobile state */
.em-mm.is-mobile .em-mm__left{ display:none; }
.em-mm.is-mobile .em-mm__right{ display:flex; }
.em-mm .em-mm__content{ flex-direction:column; }
.em-mm .em-mm__columns{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.em-mm .em-mm__side{ width:auto; border-left:none; border-top:1px solid var(--em-border); }
.em-mm .em-mm__mHeader{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:10px 12px; border-bottom:1px solid var(--em-border);
background:#fff;
}
.em-mm .em-mm__mTitle{
font-weight:900; color:var(--em-text); font-size:14px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
max-width:45vw;
}
.em-mm .em-mm__mBack, .em-mm .em-mm__mClose{
border:1px solid var(--em-border);
background:#fff; border-radius:10px;
padding:8px 10px; font-weight:800;
cursor:pointer;
}
.em-mm .em-mm__mClose{ color:var(--em-primary); }
}