/* ==========================================================================
   mega-menu.css — `overlay-mega-menu — WRC` 17013:18867
   1550x640 r12 · top-sellers 174 · body 466 (list 330 | subs 1220)
   ========================================================================== */

.mm {
  position: fixed; z-index: 50; max-width: 1550px;
  background: var(--white); border: 1px solid var(--black-7);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
  animation: mm-in .12s ease-out;
}
@keyframes mm-in { from { opacity: 0; transform: translateY(-6px) } }

/* ---------- top sellers -------------------------------------------------- */
.mm__top {
  padding: 20px 24px; background: var(--grey-light);
  border-bottom: 1px solid var(--black-7);
  display: flex; flex-direction: column; gap: 12px;
}
.mm__lab { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--text-light); }
.mm__chips { display: flex; gap: 12px; }
.mm__chip {
  flex: 1 1 0; min-width: 0; height: 110px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--radius-lg); background: var(--white);
  border: 1px solid var(--grey-medium-blue); font: inherit; cursor: pointer;
}
.mm__chip:hover { border-color: var(--wrc-green); }
.mm__chipimg {
  width: 56px; height: 42px; border-radius: var(--radius-sm); flex: none;
  background: var(--grey-light) center/cover no-repeat;
}
.mm__chipl {
  font-size: 14px; font-weight: 500; color: var(--text-dark); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---------- body --------------------------------------------------------- */
.mm__body { display: flex; height: 466px; }

.mm__list {
  flex: 0 0 330px; padding: 14px; display: flex; flex-direction: column; gap: 1px;
  border-right: 1px solid var(--black-7); overflow-y: auto;
}
.mm__list::-webkit-scrollbar { width: 4px; }
.mm__list::-webkit-scrollbar-thumb { background: var(--black-35); border-radius: 2px; }
.mm__row {
  display: flex; align-items: center; gap: 10px; height: 35px; flex: none;
  padding: 0 12px 0 14px; border-radius: var(--radius-sm);
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
.mm__row span { flex: 1 1 auto; font-size: 14px; font-weight: 500; color: var(--text-dark); }
.mm__row svg { color: var(--text-light); flex: none; }
.mm__row.is-on { background: var(--wrc-green-7); }
.mm__row.is-on span { color: var(--wrc-green); }
.mm__row.is-on svg { color: var(--wrc-green); }

.mm__subs { flex: 1 1 auto; min-width: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.mm__head { display: flex; align-items: baseline; gap: 10px; }
.mm__head h4 { font-size: 18px; font-weight: 600; color: var(--text-dark); }
.mm__all {
  background: none; border: 0; font: inherit; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--wrc-green);
}
.mm__all:hover { text-decoration: underline; }
.mm__cols { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.mm__col { flex: 0 0 272px; display: flex; flex-direction: column; gap: 9px; }
.mm__sub {
  background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--text-medium);
}
.mm__sub:hover { color: var(--wrc-green); text-decoration: underline; }
.mm__none { font-size: 14px; color: var(--text-light); }

.wnav__all.is-open { background: rgba(255, 255, 255, .18); }

@media (max-width: 1280px) {
  .mm__chips { flex-wrap: wrap; }
  .mm__chip { flex: 0 0 calc(20% - 10px); }
  .mm__list { flex-basis: 260px; }
}

/* ---------- Web/Nav Dropdown 17870:281 ----------------------------------- */
.navdd {
  position: fixed; z-index: 50; width: 300px; padding: 6px 0;
  background: var(--white); border: 1px solid var(--black-15);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column;
  animation: mm-in .1s ease-out;
}
.navdd__row {
  display: flex; align-items: center; height: 37px; padding: 0 16px;
  background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
  font-size: 14px; font-weight: 400; color: var(--text-dark);
}
.navdd__row:hover { background: var(--wrc-green-7); color: var(--wrc-green); }
.wnav__l.is-open { background: rgba(255, 255, 255, .14); }