/* ========== Wrapper / Base ========== */
.nala-mm__wrap { width: 100%; }
.nala-mm { position: relative; }

/* Сброс списков только внутри нашего блока */
.nala-mm__wrap ul,
.nala-mm__wrap ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Горизонтальный верхний уровень */
.nala-mm__nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--nala-gap, 20px);
  margin: 0;
  padding: 0;
  list-style: none !important;
}
.nala-mm__nav > li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none !important;
}
.nala-mm__nav > li::marker { content: ''; }

/* Ссылки топ-уровня */
.nala-mm__nav > li > a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 10px 12px;
  color: var(--nala-color, inherit);
}
.nala-mm__nav > li > a:hover,
.nala-mm__nav > li > a:focus { color: var(--nala-color-hover, var(--nala-color, inherit)); }
.nala-mm__nav > li.current-menu-item > a,
.nala-mm__nav > li.current-menu-ancestor > a { color: var(--nala-color-active, var(--nala-color, inherit)); }

/* Фокус */
.nala-mm__nav a:focus { outline: none; }
.nala-mm__nav a:focus-visible { outline: 2px solid #0D65BE; outline-offset: 2px; }

/* ========== SIMPLE only ========== */
.nala-mm__wrap.is-mode-simple .sub-menu{
  position:absolute;
  left:0; top: calc(100% + var(--dropdown-offset, 8px));
  min-width:220px;
  border-radius: var(--nala-radius, 10px);

  /* кастомная рамка/фон/тень приходят из Elementor через selectors; тут базовые паддинги */
  padding: 8px;

  display:flex;
  flex-direction:column;
  gap: var(--nala-sub-gap, 12px);

  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
  z-index: 1000;
}
.nala-mm__wrap.is-mode-simple li:hover > .sub-menu,
.nala-mm__wrap.is-mode-simple li:focus-within > .sub-menu{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}

/* ========== MEGA (live, на сайте) ========== */
.nala-mm__wrap.is-mode-mega .sub-menu{
  position:fixed !important;
  left:0; right:0; top: var(--mega-top, 0px);
  width:100vw;
  z-index:1000;
	
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  padding-block: var(--mega-pad-top,16px) var(--mega-pad-bottom,16px);
    padding-left:  var(--mega-inset-left,  calc(var(--mega-pad-left-resolved, 20px)  + var(--mega-grid-extra-pad, 0px)));
  padding-right: var(--mega-inset-right, calc(var(--mega-pad-right-resolved, 20px) + var(--mega-grid-extra-pad, 0px)));
  isolation: isolate; 

  display:grid !important;
  grid-template-columns: repeat(var(--mega-cols, 4), minmax(0,1fr));
  column-gap: var(--mega-col-gap, 20px);
  row-gap:    var(--mega-row-gap, 16px);

  opacity:0; visibility:hidden; transform: translateY(6px);
  transition:.18s ease;
  pointer-events:none;
}
.nala-mm__wrap.is-mode-mega.mega-open li.is-open > .sub-menu{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}



/* ========== MEGA выравнивание (опционально) ========== */


.nala-mm__wrap li.has-mega.is-open > .sub-menu{
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
}


/* ========== Mega Sections / Grid items ========== */
.nala-mega__section { min-width: 0; }
.nala-mega__section-inner { display: block; }

/* Включение внутренней сетки по кастомным гапам секции */
.nala-mega__section[style*="--sect-col-gap"] .nala-mega__section-inner{
  display: grid;
  column-gap: var(--sect-col-gap);
  row-gap: var(--sect-row-gap);
}

.nala-mm__wrap.mega-align-left{
  --mega-inset-left:  var(--mega-pad-left-resolved, 20px);
  --mega-inset-right: calc(var(--mega-pad-right-resolved, 20px) + var(--mega-grid-extra-pad, 0px) * 2);
}


.nala-mm__wrap.mega-align-right{
  --mega-inset-left:  calc(var(--mega-pad-left-resolved, 20px)  + var(--mega-grid-extra-pad, 0px) * 2);
  --mega-inset-right: var(--mega-pad-right-resolved, 20px);
}



/* Спаны для разных брейкпоинтов (по умолчанию — mobile first) */
.nala-mega__section { grid-column: span var(--span-m, 8); }
@media (min-width: 768px){
  .nala-mega__section { grid-column: span var(--span-t, 6); }
}
@media (min-width: 1024px){
  .nala-mega__section { grid-column: span var(--span-d, 4); }
}

/* ========== Меню-список внутри секции ========== */
.nala-mega__menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--nala-sub-gap, 12px);
  margin: 0; padding: 0;
}
.nala-mega__menu-list li { margin: 0; padding: 0; list-style: none !important; }
.nala-mega__menu-list a {
  display: block;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--nala-color, inherit);
}
.nala-mega__menu-list a:hover,
.nala-mega__menu-list a:focus { color: var(--nala-color-hover, var(--nala-color, inherit)); }

/* ========== Product Card ========== */
.nala-card{
  position:relative;
  border-radius: var(--card-radius, 8px);
  padding: var(--card-pad-t,12px) var(--card-pad-r,12px) var(--card-pad-b,12px) var(--card-pad-l,12px);
  display:flex; flex-direction:column; align-items: flex-start;
}
.nala-card__media img{ display:block; max-width:100%; height:auto; }
.nala-card__title{ margin:8px 0 4px; font-size:1rem; }
.nala-card__price{ font-weight:600; }
.nala-card__link{ position:absolute; inset:0; }

/* ========== Icon ========== */
.nala-mm__icon {
  display:inline-flex;
  flex:0 0 auto;
  width:var(--icon-size, 16px);
  height:var(--icon-size, 16px);
}
.nala-mm__icon.pos-left  { margin-right: var(--icon-gap, 8px); }
.nala-mm__icon.pos-right { margin-left:  var(--icon-gap, 8px); }
.nala-mm__icon svg { display:block; width:100%; height:100%; }

/* ========== Service ========== */
.nala-mm__notice {
  padding: 12px;
  background:#fff3cd;
  border:1px solid #ffe69c;
  border-radius: 8px;
}


/* Simple: якорим dropdown к своему li в редакторе */
.nala-mm__wrap.is-editor .nala-mm__nav > li { position: relative; }
.nala-mm__wrap.is-editor .nala-mm__nav > li > .sub-menu {
  position: absolute;
  left: 0;
  right: auto;
  top: calc(100% + var(--dropdown-offset, 8px));
}

/* Mega: full-width по контейнеру меню (использует JS-переменные) */
.nala-mm__wrap.is-editor.is-mode-mega .sub-menu {
  position: fixed;
  top: var(--mega-top, 0px);
  left: var(--mega-left, 0px);
  width: var(--mega-width, 100vw);
  z-index: 9999;
  display: none; /* скрыто по умолчанию */
    padding-block: var(--mega-pad-top,16px) var(--mega-pad-bottom,16px);
  padding-left:  var(--mega-inset-left,  calc(var(--mega-pad-left-resolved, 20px)  + var(--mega-grid-extra-pad, 0px)));
  padding-right: var(--mega-inset-right, calc(var(--mega-pad-right-resolved, 20px) + var(--mega-grid-extra-pad, 0px)));
  isolation: isolate;
}
.nala-mm__wrap.is-editor.is-mode-mega .is-open > .sub-menu {
  display: block;
}

/* Editor: делаем панель реально видимой, а не только display:block */
.nala-mm__wrap.is-editor.is-mode-mega .is-open > .sub-menu{
  display:block;
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}

/* На всякий случай — per-item mega в редакторе тоже полностью открываем */
.nala-mm__wrap.is-editor .nala-mm__nav > li.has-mega.is-open > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
padding-left:  var(--mega-inset-left,  calc(var(--mega-pad-left-resolved, 20px)  + var(--mega-grid-extra-pad, 0px)));
  padding-right: var(--mega-inset-right, calc(var(--mega-pad-right-resolved, 20px) + var(--mega-grid-extra-pad, 0px)));
}



.nala-mm__wrap.is-mode-mega .sub-menu::before{
  content: "";
  position: absolute; 
  top: 0;
  bottom: 0;
  left:  0; 
  right: 0;  
  border-radius: var(--nala-radius, 10px);
  border-style: var(--nala-bstyle, none);
  border-color: var(--nala-bcolor, currentColor);
  border-width: var(--nala-bt, 0) var(--nala-br, 0) var(--nala-bb, 0) var(--nala-bl, 0);
  pointer-events: none;
  z-index: -1;
}



.nala-mm__toggle{
  display:none;
  appearance:none;
  background:transparent;
  border:0;
  padding:8px 12px;
  margin:0;
  line-height:1;
  cursor:pointer;
  align-items:center;
  gap:8px;
}
/* Ровный бургер/крест без «уезжающих» линий */
.nala-mm__burger{
  position: relative;
  /* синхронизируемся с var из виджета, есть дефолт */
  --brg-size: var(--tgl-ic-size, 18px);
  --brg-thick: clamp(2px, calc(var(--brg-size) / 8), 4px);
  width: var(--brg-size);
  height: var(--brg-size);
  display: inline-block;
}

.nala-mm__burger i{
  position: absolute;
  left: 0; right: 0;
  height: var(--brg-thick);
  background: currentColor;
  border-radius: calc(var(--brg-thick) / 2);
  transform-origin: 50% 50%;
  transition: transform .18s ease, opacity .12s ease;
}

/* Стартовое положение (бургер) */
.nala-mm__burger i:nth-child(1){ top: 0; }
.nala-mm__burger i:nth-child(2){ top: 50%; transform: translateY(-50%); }
.nala-mm__burger i:nth-child(3){ bottom: 0; top: auto; }

/* Превращение в идеальный крест по центру */
.nala-mm__toggle[aria-expanded="true"] .nala-mm__burger i:nth-child(1){
  top: 50%; transform: translateY(-50%) rotate(45deg);
}
.nala-mm__toggle[aria-expanded="true"] .nala-mm__burger i:nth-child(2){
  opacity: 0; transform: translateY(-50%) scaleX(0);
}
.nala-mm__toggle[aria-expanded="true"] .nala-mm__burger i:nth-child(3){
  top: 50%; bottom: auto; transform: translateY(-50%) rotate(-45deg);
}




.nala-mm__toggle{ display:none; }
.nala-mm__wrap.is-mobile .nala-mm__toggle{ display:inline-flex; }
.nala-mm__wrap.is-mobile .nala-mm__nav{ display:none !important; }
.nala-mm__wrap.is-mobile.menu-open .nala-mm__nav{
  display:flex; flex-direction:column; gap: var(--nala-sub-gap,12px);
}

/* мобильные подменю как аккордеон */
.nala-mm__wrap.is-mobile .sub-menu{
  position: static !important;
  display: none !important;
  opacity: 1 !important; visibility: visible !important; transform:none !important;
  padding: 0; margin: 0; border: 0 !important; box-shadow:none !important;
}
/* Панель drilldown для мобилки */
.nala-mm__drill{ display:none; }
.nala-mm__wrap.is-mobile.drill-open .nala-mm__drill{ display:block; }

.nala-mm__drill-header{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
}
.nala-mm__back{
  appearance:none; border:0; background:transparent;
  padding:8px; line-height:1; cursor:pointer;
}
.nala-mm__drill-title{ font-weight:600; }

.nala-mm__drill-body{
  will-change:transform,opacity;
  transform: translateX(16px); opacity:0;
  transition: transform .25s ease, opacity .25s ease;
  padding: 8px 0;
}
.nala-mm__wrap.is-mobile.drill-open .nala-mm__drill-body{
  transform: none; opacity:1;
}

/* В мобилке внутренние sub-menu всегда скрыты — источники данных для drilldown */
.nala-mm__wrap.is-mobile .sub-menu{
  display:none !important;
  position:static !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  padding:0 !important; margin:0 !important; border:0 !important; box-shadow:none !important;
}
.nala-mm__wrap.is-mobile .sub-menu::before{ display:none !important; }


/* Mobile state управляется JS-классом .is-mobile на .nala-mm__wrap */
.nala-mm__toggle{ display:none; }
.nala-mm__wrap.is-mobile .nala-mm__toggle{ display:inline-flex; }

/* Скрываем верхний UL в мобилке — важно перебить базу */
.nala-mm__wrap.is-mobile .nala-mm__nav{
  display:none !important;
  flex-direction:column;
  align-items:stretch;
  gap: var(--nala-sub-gap, 12px);
  width:100%;
  margin-top:8px;
}
.nala-mm__wrap.is-mobile.menu-open .nala-mm__nav{
  display:flex !important;
}

/* Шапки пунктов */
.nala-mm__wrap.is-mobile .nala-mm__nav > li{ width:100%; }
.nala-mm__wrap.is-mobile .nala-mm__nav > li > a{
  padding:12px 16px;
  width:100%;
  justify-content:space-between;
}

/* Подменю как аккордеон в мобилке */
.nala-mm__wrap.is-mobile .sub-menu{
  position: static !important;
  width: auto !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  opacity:1 !important; visibility:visible !important; transform:none !important;
  pointer-events:auto !important;
  display:none; /* скрыто по умолчанию */
  grid-template-columns: none !important;
  column-gap: 0 !important; row-gap: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.nala-mm__wrap.is-mobile li.is-open > .sub-menu{ display:block !important; }
.nala-mm__wrap.is-mobile .sub-menu::before{ display:none !important; }

/* --- Mobile: вертикальный паддинг пунктов меню (ТОП-уровень) --- */
.nala-mm__wrap.is-mobile .nala-mm__nav > li > a{
  padding-block: var(--mm-row-pad, 8px) !important;
  padding-inline: 16px !important; /* горизонтальный как было */
  width: 100%;
  justify-content: space-between;
}

/* --- Mobile: ссылки внутри экранов подменю (drilldown / mega-list) --- */
.nala-mm__wrap.is-mobile .nala-mm__drill-body a,
.nala-mm__wrap.is-mobile .nala-mega__menu-list a,
.nala-mm__wrap.is-mobile .sub-menu a{
  display: block;
  padding-block: var(--mm-row-pad, 8px) !important;
  padding-inline: 16px !important;
}

/* Блокируем фон при открытом меню */
html.mm-scroll-lock, body.mm-scroll-lock { overflow: hidden; }

/* Фикс-панель в <body>, JS задаёт top/height */
.nala-mm__overlay{
  position: fixed;
  left: 0; right: 0;
  top: 0;               /* реальное значение выставит JS */
  height: 0;            /* реальное значение выставит JS */
  z-index: 9999;
  background: var(--mobile-bg, #fff);
  display: none;        /* показываем, когда меню открыто */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: block;       /* JS управляет display через inline style */
}

/* Контент меню внутри оверлея — это тот же UL, который мы туда переносим */
.nala-mm__overlay .nala-mm__nav{
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nala-sub-gap, 12px);
  width: 100%;
}

/* строки верхнего уровня */
.nala-mm__overlay .nala-mm__nav > li{ width:100%; }
.nala-mm__overlay .nala-mm__nav > li > a{
  width:100%;
  display:flex;
  justify-content: space-between;
  padding-block: 12px;     /* можно менять на 8/12 — вертикальный интервал */
  padding-inline: 16px;
}

/* подменю в мобилке остаются аккордеоном, без собственных рамок/теней */
.nala-mm__overlay .sub-menu{
  position: static !important;
  display: none !important;
  opacity: 1 !important; visibility: visible !important; transform:none !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow:none !important;
  background: transparent !important;
}
.nala-mm__overlay li.is-open > .sub-menu{ display:block !important; }

/* ссылки внутри вкладок подменю */
.nala-mm__overlay .nala-mega__menu-list a,
.nala-mm__overlay .sub-menu a{
  display:block;
  padding-block: 12px;
  padding-inline: 16px;
}

/* убираем маркеры/буллиты на всякий случай во всех списках меню */
.nala-mm__wrap ul,
.nala-mm__wrap ol,
.nala-mm__overlay ul,
.nala-mm__overlay ol {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nala-mm__wrap li,
.nala-mm__wrap .sub-menu li,
.nala-mm__overlay li,
.nala-mm__overlay .sub-menu li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* на некоторых темах маркеры рисуют через ::marker или ::before — глушим */
.nala-mm__wrap li::marker,
.nala-mm__overlay li::marker { content: '' !important; }
.nala-mm__wrap li::before,
.nala-mm__overlay li::before { content: none !important; }

.nala-mm__wrap.is-editor:not([data-mm-ready]) .nala-mm__toggle{ display: none !important; }
.nala-mm__wrap.is-editor:not([data-mm-ready]) .nala-mm__nav{ display: flex !important; }