/* Wayland Armenia — Mega Menu */

@media (max-width: 991px) { .wm-wrap { display: none !important; } }
@media (min-width: 992px) { #wm-trigger > ul.dropdown { display: none !important; } }

.pixel-main-menu { position: relative !important; }

/* Обёртка — левый край выравнивается по «Каталог» через JS.
   padding-top создаёт ~5мм зазор: меню появляется чуть ниже,
   но hover-зона непрерывна — курсор не теряет фокус в зазоре. */
.wm-wrap {
  position: absolute;
  top:      56px;
  left:     0;       /* JS перезапишет */
  right:    auto;
  z-index:  9999;
  padding-top: 10px; /* зазор между шапкой и меню */
}

/* Вертикальный список */
.wm-tabs {
  position: relative;
  background: #232323;
  border-top: 3px solid #FFC72C;
  width: 215px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}
.wm-tabs.wm-show {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.wm-tabs > div {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.wm-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  font-family: Roboto, sans-serif;
  font-size: 13px;
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: color .12s, background .12s, border-color .12s;
}
.wm-tab::after {
  content: '‹';
  color: #555;
  font-size: 16px;
  margin-left: 14px;
  transition: color .12s;
}
.wm-tab:hover,
.wm-tab.wm-act {
  color: #FFC72C;
  background: #1a1a1a;
  border-left-color: #FFC72C;
  text-decoration: none;
}
.wm-tab:hover::after,
.wm-tab.wm-act::after { color: #FFC72C; }

/* Подменю — вылетает влево от вертикального списка */
.wm-content {
  position: absolute;
  top: 0;
  right: 100%;          /* вплотную слева от .wm-tabs */
  width: 380px;
  background: #fff;
  border-top: 3px solid #FFC72C;
  box-shadow: -6px 6px 24px rgba(0,0,0,.13);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.wm-content.wm-show { opacity: 1; pointer-events: all; }
.wm-content > div { padding: 20px 22px 16px; }

.wm-panel { display: none; }
.wm-panel.wm-act { display: block; animation: wmIn .13s ease; }
@keyframes wmIn { from { opacity:0; } to { opacity:1; } }

.wm-cols { display: flex; gap: 28px; flex-wrap: wrap; }
.wm-col  { min-width: 140px; }
.wm-col-head {
  font-family: Roboto, sans-serif;
  font-size: 9px; font-weight: 700; color: #425563;
  text-transform: uppercase; letter-spacing: 1.2px;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 2px solid #FFC72C; display: block;
}
.wm-cat {
  display: flex; align-items: center; gap: 6px;
  font-family: Roboto, sans-serif; font-size: 13px; color: #545454;
  padding: 7px 0; text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: color .12s, padding-left .1s; line-height: 1.3;
}
.wm-cat:last-child { border-bottom: none; }
.wm-cat::before { content: '›'; color: #ff7902; font-size: 16px; line-height: 1; flex-shrink: 0; }
.wm-cat:hover { color: #232323; padding-left: 4px; text-decoration: none; }

.wm-footer {
  background: #f5f5f5; border-top: 1px solid #e5e5e5;
  padding: 9px 22px; display: flex;
  justify-content: space-between; align-items: center;
}
.wm-footer a { font-family: Roboto,sans-serif; font-size: 12px; color: #545454; text-decoration: none; }
.wm-footer a:hover { color: #ff7902; }
.wm-footer-cta { background: #ff7902; color: #fff !important; font-weight: 700; padding: 6px 14px; }
.wm-footer-cta:hover { background: #e06800 !important; }