.wpl-mmi{ background:var(--wpl-bg); width:100%; }
.wpl-mmi__inner{ width:var(--wpl-container-width); max-width:100%; margin:0 auto; }

.wpl-mmi__top{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0;
  height:var(--wpl-height);
  justify-content: space-around;
}
.wpl-mmi__top-item{ position:relative; }
.wpl-mmi__top-link{
  display:flex; align-items:center; gap:8px;
  height:var(--wpl-height);
  padding:0 28px;
  text-decoration:none;
  background:var(--wpl-item-bg);
  color:var(--wpl-text);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
  white-space:nowrap;
}
.wpl-mmi__top-item:hover > .wpl-mmi__top-link{ color:var(--wpl-text-hover); }
.wpl-mmi__top-item.has-children:hover > .wpl-mmi__top-link{
  background:var(--wpl-item-bg-active);
  color:var(--wpl-text-active);
}
.wpl-mmi__caret{ font-size:12px; opacity:.9; }

.wpl-mmi__dropdown{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  background:#ffffffd6;
  box-shadow:0 10px 30px var(--wpl-dd-shadow);
  z-index:9999;
  min-width:560px;
  border-radius: 0px 10px 10px 10px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.wpl-mmi__top-item.has-children:hover > .wpl-mmi__dropdown{ display:flex; }

.wpl-mmi__top-item.wpl-mmi__top-item--reverse > .wpl-mmi__dropdown{
  left:auto;
  right:0;
  flex-direction:row-reverse;
  border-radius: 10px 0 10px 10px;
}

.wpl-mmi__dd-col{ padding:22px; }
.wpl-mmi__dd-left{ min-width:320px; border-right:1px solid rgba(0,0,0,.08); }
.wpl-mmi__dd-right{ width:var(--wpl-preview-width); }

.wpl-mmi__top-item.wpl-mmi__top-item--reverse > .wpl-mmi__dropdown .wpl-mmi__dd-left{
  border-right:0;
  border-left:1px solid rgba(0,0,0,.08);
}

.wpl-mmi__sub{ list-style:none; margin:0; padding:0; }
.wpl-mmi__sub-link{
  display:block;
  padding:10px 14px;
  text-decoration:none;
  color:var(--wpl-sub-text);
  font-weight:800;
  font-size:20px;
  line-height:1.2;
}
.wpl-mmi__sub-item.is-active > .wpl-mmi__sub-link,
.wpl-mmi__sub-item:hover > .wpl-mmi__sub-link{
  background:var(--wpl-sub-hover-bg);
  color:var(--wpl-sub-hover-text);
}

/* Preview has fixed aspect ratio so dropdown height never jumps */
.wpl-mmi__preview{
  width:100%;
  aspect-ratio: 16 / 10;
  background: rgba(0,0,0,.03);
  border-radius: 2px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wpl-mmi__preview img{
  width:100%;
  height:100%;
  object-fit: cover; /* можно заменить на contain, если хочешь без обрезки */
  display:block;
}
.wpl-mmi__preview-empty{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  font-weight:600;
}

@media (max-width: 980px){
  .wpl-mmi__top{ overflow:auto; }
  .wpl-mmi__dropdown{ display:none !important; }
  .wpl-mmi__top-link{ padding:0 18px; font-size:14px; }
}

/* Hover для пунктов без dropdown (просто осветляем фон) */
.wpl-mmi__top-item:not(.has-children):hover > .wpl-mmi__top-link{
  background: var(--wpl-item-bg-hover);
  color: var(--wpl-text-hover);
}
/* Active (текущая страница/раздел) */
.wpl-mmi__top-item.is-active > .wpl-mmi__top-link{
  background: var(--wpl-item-bg-hover);
  color: var(--wpl-text-hover);
}
html.wpl-mmi-lock, html.wpl-mmi-lock body{ overflow:hidden; }
/* ========= Mobile menu (burger + fullscreen overlay with slide-in panel) ========= */

html.wpl-mmi-lock, html.wpl-mmi-lock body{ overflow:hidden; }

.wpl-mmi__mobile .wpl-mmi__m-link {
    font-size: 18px;
    font-weight: 500;
}
.wpl-mmi__mobile .wpl-mmi__m-sublink {
    font-size: 16px;
    font-weight: 400;
}


/* burger */
.wpl-mmi__burger{
  display:none;
  width:44px; height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:10px;
}
.wpl-mmi__burger span{
  display:block;
  height:3px;
  margin:5px 0;
  background: var(--wpl-text);
  border-radius:2px;
}

/* overlay backdrop */
.wpl-mmi__overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background: rgba(0,0,0,.25);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
/* visible state (backdrop fades) */
.wpl-mmi__overlay.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity .22s ease, visibility 0s linear 0s;
}



/* sliding panel */
.wpl-mmi__mobile{
  position:absolute;
  inset:0;
  background:#fff;
  transform: translateX(-100%);
  transition: transform .28s ease;
  will-change: transform;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding:72px 18px 24px;
}

/* when anim flag is set -> slide in */
.wpl-mmi__overlay.is-open.is-anim .wpl-mmi__mobile{
  transform: translateX(0);
}
.wpl-mmi__mobile{
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* close button */
.wpl-mmi__close{
  position:absolute;
  top:14px; left:14px;
  width:44px; height:44px;
  border:0;
  background:transparent;
  font-size:36px;
  line-height:44px;
  cursor:pointer;
  color:#111;
  z-index:100000;
}

/* list */
.wpl-mmi__m-list{
  list-style:none;
  margin:0;
  padding:0;
}
.wpl-mmi__m-item{
  border-bottom:1px solid rgba(0,0,0,.08);
}
.wpl-mmi__m-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 6px;
}
.wpl-mmi__m-link{
  text-decoration:none;
  color:#111;
  font-size:22px;
  font-weight:700;
}

/* toggle area (arrow) */
.wpl-mmi__m-toggle{
  width:44px; 
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* arrow icon (svg via background-image) */
.wpl-mmi__m-arrow{
  width:18px; height:18px;
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  transition: transform .15s ease;
  transform: rotate(0deg); /* right icon itself points right */
}
/* closed: right */
.wpl-mmi__m-item .wpl-mmi__m-arrow{
  background-image: var(--wpl-mmi-arrow-right);
}
/* open: down */
.wpl-mmi__m-item.is-open .wpl-mmi__m-arrow{
  background-image: var(--wpl-mmi-arrow-down);
}

/* animated submenu (height transition) */
.wpl-mmi__m-sub{
  list-style:none;
  margin:0;
  padding:0 0 0 18px;
  overflow:hidden;
  height:0;
  transition: height .2s ease;
}
.wpl-mmi__m-subitem{
  border-top:1px solid rgba(0,0,0,.06);
}
.wpl-mmi__m-sublink{
  display:block;
  padding:14px 6px;
  text-decoration:none;
  color:#111;
  font-size:20px;
  font-weight:500;
}

/* Breakpoint */
@media (max-width: 980px){
  .wpl-mmi__burger{ display:inline-block; }
  .wpl-mmi__top{ display:none !important; }

  .wpl-mmi__inner{
    width:var(--wpl-container-width);
    margin:0 auto;
    display:flex;
    align-items:center;
    height:var(--wpl-height);
    padding-left:12px;
  }
}