/* Оверлей */
.mm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1000;
}
.mm-overlay.active { opacity: 1; pointer-events: auto; }

/* Панель меню */
.mm {
  position: fixed; inset: 0 auto 0 0; width: 100vw; max-width: 420px;
  background: #fff; transform: translateX(-100%); transition: transform .3s ease;
  z-index: 1001; display: flex; flex-direction: column;
}
.mm.active { transform: translateX(0); }

.mm__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #eee; }
.mm__title { font-weight: 600; }
.mm__close { background: none; border: 0; font-size: 22px; cursor: pointer; }

.mm__nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mm__list, .mm-sub { list-style: none; margin: 0; padding: 0; }
.mm__list > li > a { display: block; padding: 14px 16px; color: #111; text-decoration: none; border-bottom: 1px solid #f5f5f5; }

/* Підменю-акордеон */
.has-children { position: relative; }
.mm-subtoggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
}
.mm-subtoggle::before { content: "▸"; display: block; text-align: center; font-size: 16px; transition: transform .2s ease; }
.mm-subtoggle[aria-expanded="true"]::before { transform: rotate(90deg); }

.mm-sub { max-height: 0; overflow: hidden; transition: max-height .25s ease; background: #fafafa; }
.mm-sub > li > a { display: block; padding: 12px 16px 12px 28px; color: #333; border-bottom: 1px solid #f0f0f0; }

/* Нижній блок */
.mm__meta { margin-top: auto; padding: 12px 16px; border-top: 1px solid #eee; display: grid; gap: 8px; }

/* Блокувати скрол сторінки ТІЛЬКИ для меню */
.mm-no-scroll { overflow: hidden; touch-action: none; }
/* ===== Тема Horoshop-подібна ===== */
.mm--hs { max-width: 420px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
@media only screen and (max-width:550px) {
  .mm--hs  {
    width: 85vw;}
}
.mm--hs.mm.active { transform: translateX(0); overflow: auto; } /* залишаємо анімацію з базового .mm */

.mm-hs__head {
  /* position: sticky; top: 0; z-index: 1; */
  display: flex; align-items: center;justify-content: flex-start; gap: 10px;
  padding: 10px 12px; background: #fff; border-bottom: 1px solid #eee;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.mm__back { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer;line-height: 1.6; }
.mm__back svg {width: 20px; height: 20px; display: block;fill: #000; }

.mm-hs__title { font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;line-height: 1; }

.mm-hs__section { background: #fff; }
.mm-hs__list { margin: 0; padding: 0; list-style: none; }
.mm-hs__item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #111; text-decoration: none; border-bottom: 1px solid #F0F0F0; }
.mm-hs__item:hover { background: #fafafa; }
.mm-hs__item--icon .mm-hs__icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: .9; }
.mm-hs__item--icon .mm-hs__icon svg { width: 20px; height: 20px; fill: #000; }
.mm-hs__text { line-height: 1.3; }

.mm-hs__divider { height: 12px; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }

.mm-hs__btn {
  display: inline-block; margin: 12px 16px; padding: 10px 14px;
  border: 1px solid #111; border-radius: 8px; color: #111; text-decoration: none;
}

.mm-hs__label { font-size: 12px; opacity: .6; letter-spacing: .06em; text-transform: uppercase; margin: 6px 16px; }
.mm-hs__socials { display: flex; gap: 6px; padding: 6px 12px 16px 12px; }
.mm-hs__socials a { display: inline-flex; padding: 8px; }
.mm-hs__socials a svg { width: 34px; height: 34px;  fill: #000}

/* Перекриття базових стилів списку (якщо підключені) */
.mm__nav, .mm__list, .mm-sub { all: unset; }