/* ──────────────────────────────────────────────────────────────────────────
   HUB · 13 ГРУП — згруповане головне меню (дропдауни).
   Підключається ПІСЛЯ style.css, тож може перевизначати .topnav.
   Кольори/тема/бренди — лише через CSS-змінні з style.css.
   ────────────────────────────────────────────────────────────────────────── */

.topnav{position:relative; gap:0; flex-wrap:nowrap}
.nav-menu{display:flex; align-items:center; gap:4px}

/* Базовий пункт (посилання та кнопка-тригер виглядають однаково) */
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px;
  color:var(--topbar-link); font-size:14px; line-height:1;
  font-family:inherit; border:0; background:transparent; cursor:pointer;
  white-space:nowrap; transition:background-color .15s, color .15s;
}
.nav-link:hover{color:var(--topbar-link-h); background:rgba(127,127,127,.12); text-decoration:none}
.nav-link.active,
.nav-group.is-active > .nav-trigger{color:var(--topbar-link-h); background:rgba(127,127,127,.14)}
.nav-trigger .caret{font-size:10px; opacity:.65; transition:transform .18s}
.nav-group.open > .nav-trigger{color:var(--topbar-link-h); background:rgba(127,127,127,.16)}
.nav-group.open > .nav-trigger .caret{transform:rotate(180deg)}

/* Група + випадна панель */
.nav-group{position:relative}
.nav-drop{
  position:absolute; top:calc(100% + 6px); left:0; z-index:60;
  min-width:230px; max-width:300px; padding:7px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow);
  display:none; animation:navpop .14s ease-out;
}
.nav-group.open > .nav-drop{display:block}
.nav-drop-right{left:auto; right:0}
@keyframes navpop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* Місток наведення: прибирає «розрив» між тригером і панеллю */
.nav-drop::before{content:""; position:absolute; left:0; right:0; top:-8px; height:8px}

.nav-drop-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--muted); padding:7px 10px 4px;
}
.nav-drop-title .ndt-ico{margin-right:7px; font-size:13px}
.nav-drop-tools{min-width:240px; max-height:min(70vh,520px); overflow-y:auto}
.nav-drop-sep{height:1px; background:var(--line); margin:6px 4px}

/* .topnav-префікс — щоб перебити `.topnav a{color:var(--topbar-link)}`
   зі style.css (інакше у скінах perfumes/away текст пунктів стає білим). */
.topnav .nav-drop-item{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  color:var(--text); font-size:14px; line-height:1.2;
}
.topnav .nav-drop-item:hover{color:var(--text); background:var(--panel2); text-decoration:none}
.ndi-ico{flex:0 0 22px; width:22px; text-align:center; font-size:16px}
.ndi-txt{flex:1 1 auto}
.ndi-soon{
  font-size:10px; text-transform:uppercase; letter-spacing:.4px;
  padding:1px 6px; border-radius:20px; border:1px solid var(--line);
  color:var(--muted); margin-left:4px;
}
.nav-drop-item.soon{opacity:.6; cursor:default}
.nav-drop-item.soon:hover{background:transparent}

.nav-drop-empty{padding:8px 10px; color:var(--muted); font-size:13px}
.topnav .nav-drop-more{
  display:block; padding:8px 10px; border-radius:10px;
  color:var(--brand2); font-size:13px; font-weight:600;
}
.topnav .nav-drop-more:hover{color:var(--brand2); background:var(--panel2); text-decoration:none}
.nav-drop-who{padding:8px 10px 4px; font-size:13px; color:var(--muted); word-break:break-all}

/* Профіль */
.nav-group-end{margin-left:6px}
.nav-ava{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; font-size:12px; font-weight:700; flex:0 0 auto; overflow:hidden;
}
.nav-ava.has-img{background:none}
.nav-ava img{width:100%; height:100%; object-fit:cover; display:block}
.mnav-ava.has-img{background:none}
.mnav-ava{overflow:hidden}
.mnav-ava img{width:100%; height:100%; object-fit:cover; display:block; border-radius:50%}
.nav-profile-name{max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Бургер (ховається на десктопі) */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:38px; padding:0 10px; border:0; border-radius:10px;
  background:transparent; cursor:pointer;
}
.nav-burger span{display:block; height:2px; border-radius:2px; background:var(--topbar-fg); transition:.2s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ═══════════════ Мобільна навігація ═══════════════
   На десктопі компоненти приховані; вмикаються лише в медіазапиті нижче. */
.mnav{display:none}
.msheet,.msheet-backdrop{display:none}
body.msheet-lock{overflow:hidden}

/* ───────────────── Мобільна версія (≤860px) ─────────────────
   Десктопне горизонтальне меню повністю ховаємо — натомість працює
   нижній таб-бар із bottom-sheets (нативний для телефона патерн). */
@media (max-width:860px){
  /* Ховаємо десктопну навігацію, бургер і плаваючі кнопки скіна */
  .topnav{display:none}
  .skin-controls{display:none}

  /* Контент не має ховатися під фіксованим таб-баром */
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}

  /* ── Нижній таб-бар ── */
  .mnav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--panel); border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.16);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  }
  .mnav-tab{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px; border:0; background:transparent; cursor:pointer;
    color:var(--muted); font-family:inherit; text-decoration:none;
    border-radius:12px; transition:color .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .mnav-tab:hover{text-decoration:none}
  .mnav-tab.active,.mnav-tab.sheet-open{color:var(--brand2)}
  .mnav-ic{font-size:21px; line-height:1}
  .mnav-lb{font-size:11px; line-height:1; letter-spacing:.2px; white-space:nowrap}
  .mnav-ava{
    display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
    background:linear-gradient(135deg,var(--brand),var(--brand2));
    color:#fff; font-size:11px; font-weight:700;
  }

  /* ── Підложка ── */
  .msheet-backdrop{
    display:block; position:fixed; inset:0; z-index:90;
    background:rgba(0,0,0,.45); opacity:0; visibility:hidden;
    transition:opacity .2s, visibility .2s;
  }
  .msheet-backdrop.open{opacity:1; visibility:visible}

  /* ── Bottom-sheet ── */
  .msheet{
    display:flex; flex-direction:column; position:fixed; left:0; right:0; bottom:0; z-index:95;
    max-height:86vh; padding:0 14px calc(18px + env(safe-area-inset-bottom,0px));
    background:var(--panel); border-radius:20px 20px 0 0;
    border-top:1px solid var(--line); box-shadow:0 -14px 44px rgba(0,0,0,.34);
    transform:translateY(100%); transition:transform .26s cubic-bezier(.32,.72,0,1);
  }
  .msheet.open{transform:none}
  .msheet-grip{width:40px; height:4px; border-radius:3px; background:var(--line); margin:10px auto 2px}
  .msheet-head{display:flex; align-items:center; justify-content:space-between; padding:4px 2px 8px}
  .msheet-head h2{margin:0; font-size:17px; color:var(--text)}
  .msheet-x{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; padding:0; border:0; border-radius:50%; cursor:pointer;
    background:var(--panel2); color:var(--muted); font-size:16px; line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  .msheet-x:active{background:var(--line)}
  .msheet-body{overflow-y:auto; -webkit-overflow-scrolling:touch}

  .msheet-item{
    display:flex; align-items:center; gap:13px; min-height:52px;
    padding:10px 12px; border-radius:14px; color:var(--text); font-size:16px;
  }
  .msheet-item:active{background:var(--panel2)}
  .msheet-item:hover{text-decoration:none}
  .msheet-ico{flex:0 0 26px; width:26px; text-align:center; font-size:20px}
  .msheet-tx{flex:1 1 auto}
  .msheet-soon{
    font-size:10px; text-transform:uppercase; letter-spacing:.4px;
    padding:2px 7px; border-radius:20px; border:1px solid var(--line); color:var(--muted);
  }
  .msheet-item.soon{opacity:.55}
  .msheet-item.soon:active{background:transparent}
  .msheet-empty{padding:14px 12px; color:var(--muted); font-size:15px}
  .msheet-more{
    display:block; padding:13px 12px; border-radius:14px;
    color:var(--brand2); font-weight:600; font-size:15px;
  }
  .msheet-more:active{background:var(--panel2)}
  .msheet-more:hover{text-decoration:none}
  .msheet-who{padding:6px 12px 4px; color:var(--muted); font-size:14px; word-break:break-all}
  .msheet-sep{height:1px; background:var(--line); margin:10px 6px}
  .msheet-label{
    font-size:11px; text-transform:uppercase; letter-spacing:.6px;
    color:var(--muted); padding:8px 12px 8px;
  }

  /* Перемикач теми — сегмент із двох кнопок */
  .skin-seg{display:flex; gap:8px; padding:0 12px 2px}
  .skin-seg button{
    flex:1 1 0; min-height:46px; border:1px solid var(--line); border-radius:13px;
    background:var(--panel2); color:var(--text); font-family:inherit; font-size:15px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .skin-seg button[aria-pressed="true"]{
    border-color:var(--brand2); color:var(--brand2); box-shadow:0 0 0 1px var(--brand2) inset;
  }
  /* Вибір бренду — три картки з фірмовими лого (як на ПК) */
  .skin-brands{display:flex; gap:8px; padding:0 12px 2px}
  .skin-brands button{
    flex:1 1 0; min-height:64px; padding:8px 6px; overflow:hidden;
    border:1px solid var(--line); border-radius:13px;
    background:var(--panel2); color:var(--text); font-family:inherit; font-size:12px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  }
  .skin-brands button[aria-pressed="true"]{border-color:var(--brand2); box-shadow:0 0 0 1px var(--brand2) inset}
  .skin-brands .brand-ic{width:30px; height:30px}
  .skin-brands .sb-nm{line-height:1}
  /* Wordmark-лого: центруємо й трохи зменшуємо під вузьку картку */
  .skin-brands .brand-logo{
    height:14px; width:100%; max-width:74px; margin:0 auto;
    -webkit-mask-position:center; mask-position:center;
  }
}

/* Бренд «away» — трохи округліші панелі під загальний стиль */
:root[data-brand="away"] .nav-drop{border-radius:18px}
:root[data-brand="away"] .msheet{border-radius:26px 26px 0 0}