.uib-sidebar {
  position: relative;
  width: 270px;
  height: calc(100vh - 32px);
  min-height: 520px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: visible;
  color: #62697a;
  background: rgba(249, 251, 252, 0.98);
  border: 1px solid #eeeef0;
  border-radius: 16px;
  font: 400 13px/1.2 "Inter Display", Inter, Geist, sans-serif;
  backdrop-filter: blur(15px);
  transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Кнопка виступає за правий край картки. Піднімаємо і сам слот, і кнопку:
   z-index дитини не може вийти над сусідній stacking context батька. */
.uib-nav-slot, .uib-nav-slot > div { position: relative; z-index: 2; overflow: visible }

.uib-sidebar *, .uib-sidebar *::before, .uib-sidebar *::after { box-sizing: border-box }
.uib-sidebar a { color: inherit; text-decoration: none }
.uib-sidebar button { color: inherit; font: inherit }
.uib-sidebar-main { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column }
.uib-sidebar-scroll { min-height: 0; padding: 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d4d4d8 transparent }

.uib-sidebar-minimize {
  position: absolute; z-index: 2; top: 7px; right: -9px;
  width: 24px; height: 24px; display: grid; place-items: center;
  padding: 0; border: 1px solid #eeeef0; border-radius: 8px;
  background: #f9fbfc; cursor: col-resize;
  transition: background-color 0.16s ease;
}
.uib-sidebar-minimize:hover { background: #f2f3f5 }
.uib-sidebar-minimize-icon { display: block; width: 16px; height: 16px; flex: 0 0 16px; overflow: visible }

.uib-sidebar-brand {
  height: 80px; padding: 16px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #eeeef0;
}
.uib-sidebar-brand img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; object-fit: cover }
.uib-sidebar-brand-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px }
.uib-sidebar-brand-copy b { color: #290059; font: 500 24px/24px "Google Sans", Geist, sans-serif; letter-spacing: -1.5px; white-space: nowrap }
.uib-sidebar-brand-copy b i { color: rgba(0, 0, 0, 0.5); font-style: normal }
.uib-sidebar-brand-copy small { color: #777f91; font: 400 12px/16px "Google Sans", Geist, sans-serif; letter-spacing: -0.4px; white-space: nowrap }

.uib-sidebar-heading, .uib-sidebar-category-head { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.uib-sidebar-heading { min-height: 32px; margin-bottom: 8px }
.uib-sidebar-online { display: inline-flex; height: 24px; align-items: center; gap: 6px; padding: 0 8px; border: 0; border-radius: 4px; background: rgba(0,0,0,.04); cursor: pointer; white-space: nowrap }
.uib-sidebar-online i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; opacity: .55 }
.uib-sidebar-online b { color: #171717; font-weight: 400; font-variant-numeric: tabular-nums }
.uib-sidebar-online span { opacity: .6 }

.uib-sidebar-links { display: flex; flex-direction: column; gap: 4px }
.uib-sidebar-link, .uib-sidebar-catalog-toggle {
  width: 100%; min-height: 40px; display: flex; align-items: center; gap: 12px;
  padding: 0 8px; border: 0; border-radius: 10px; background: transparent;
  text-align: left; cursor: pointer;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease, border-radius .16s ease;
}
.uib-sidebar-link:hover, .uib-sidebar-link[aria-current="page"], .uib-sidebar-catalog-toggle:hover { color: #0b0b0c; background: #fff; border-radius: 14px; box-shadow: 0 1px 1px rgba(0,0,0,.1) }
.uib-nav-icon { flex: 0 0 18px }
.uib-sidebar-link > span, .uib-sidebar-catalog-toggle > span { min-width: 0; flex: 1 }

.uib-sidebar-section { margin-top: 4px; border: 1px solid #eeeef0; border-radius: 16px; background: #fff; overflow: hidden }
.uib-sidebar-catalog-toggle { border-radius: 15px 15px 0 0; color: #010010 }
.uib-nav-chevron { flex: 0 0 16px; transition: transform .22s ease }
.uib-sidebar.uib-cat-closed .uib-nav-chevron { transform: rotate(-90deg) }
.uib-sidebar-catalog { max-height: 780px; padding: 4px 8px 8px; overflow: hidden; opacity: 1; visibility: visible; transition: max-height .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, padding .28s ease, visibility 0s }
.uib-sidebar.uib-cat-closed .uib-sidebar-catalog { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height .28s cubic-bezier(.22,1,.36,1), opacity .2s ease, padding .28s ease, visibility 0s .28s }
.uib-sidebar-subtitle { margin: 8px 0; color: #62697a }
.uib-sidebar-chips { display: flex; flex-wrap: wrap; gap: 8px }
.uib-sidebar-chip { min-height: 24px; display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid #e2e4e9; border-radius: 6px; background: #fff; white-space: nowrap }
.uib-sidebar-chip[data-tone="green"] { color: #25692a; border-color: #c0f0c4; background: #deffe1 }
.uib-sidebar-chip[data-tone="blue"] { color: #1d5fd1; border-color: #cbdffd; background: #e8f1ff }
.uib-sidebar-chip[data-tone="purple"] { color: #9966ff; border-color: rgba(153,102,255,.2); background: rgba(92,20,176,.05) }
.uib-sidebar-chip:hover { filter: brightness(.97) }
.uib-sidebar-category-head { margin: 16px 0 8px }
.uib-sidebar-categories { display: flex; flex-wrap: wrap; gap: 8px }
.uib-sidebar-category { min-height: 24px; display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid #e2e4e9; border-radius: 6px; background: #fff }
.uib-sidebar-category:hover, .uib-sidebar-category[aria-current="page"] { color: #0b0b0c; border-color: #c8cbd2; background: #f7f7f8 }
.uib-sidebar-secondary { margin-top: 8px }

.uib-sidebar-bottom { flex: 0 0 auto; padding: 16px; border-top: 1px solid #eeeef0; background: rgba(249,251,252,.98); border-radius: 0 0 16px 16px }
.uib-sidebar-contact { margin-bottom: 12px }
.uib-sidebar-auth { width: 100%; min-height: 40px; color: #0b0b0c }
.uib-sidebar-auth-trigger { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 8px; border: 1px solid #eeeef0; border-radius: 12px; background: transparent; color: #0b0b0c; cursor: pointer }
.uib-sidebar-auth-trigger:hover { background: #fff }
.uib-sidebar.uib-has-user .uib-sidebar-contact { display: none }

.uib-sidebar-mini { width: 70px }
.uib-sidebar-mini .uib-sidebar-brand { justify-content: center; padding: 12px 10px }
.uib-sidebar-mini .uib-sidebar-brand img { width: 40px; height: 40px; flex-basis: 40px }
.uib-sidebar-mini .uib-sidebar-brand-copy,
.uib-sidebar-mini .uib-sidebar-heading,
.uib-sidebar-mini .uib-sidebar-link > span,
.uib-sidebar-mini .uib-sidebar-catalog-toggle > span,
.uib-sidebar-mini .uib-nav-chevron,
.uib-sidebar-mini .uib-sidebar-catalog,
.uib-sidebar-mini .uib-sidebar-contact,
.uib-sidebar-mini .uib-sidebar-auth-trigger > span,
.uib-sidebar-mini .uib-user-who,
.uib-sidebar-mini .uib-user-chev,
.uib-sidebar-mini .uib-user-foot { display: none !important }
.uib-sidebar-mini .uib-sidebar-scroll, .uib-sidebar-mini .uib-sidebar-bottom { padding: 12px 8px }
.uib-sidebar-mini .uib-sidebar-section { border: 0; background: transparent }
.uib-sidebar-mini .uib-sidebar-link, .uib-sidebar-mini .uib-sidebar-catalog-toggle, .uib-sidebar-mini .uib-sidebar-auth-trigger { justify-content: center; padding: 0 }
.uib-sidebar-mini .uib-user-row { justify-content: center; padding: 0 }
.uib-sidebar-mini .uib-user-pic { width: 40px; flex-basis: 40px }
/* Меню акаунта в згорнутому сайдбарі: воно тягнулось по ширині рейки
   (70px), і кожен підпис ламався на два-три рядки. Ставимо картку збоку
   від рейки — так само, як це робить будь-який згорнутий навбар. */
.uib-sidebar-mini .uib-user-menu {
  left: calc(100% + 12px); right: auto; bottom: 0;
  width: 248px; max-width: calc(100vw - 96px);
}
.uib-sidebar-mini .uib-user-item { white-space: nowrap }

/* ---------- сайдбар на планшеті й телефоні ---------- */
/* Раніше він просто зникав, і на телефоні не було навігації взагалі.
   Тепер це висувна панель із кнопкою в своїй верхній смужці. */
.uib-topbar { display: none }

@media (max-width: 1023px) {
  /* Framer ховає обгортку сайдбара нижче 810px своїм медіа-запитом —
     нам вона потрібна, бо це тепер висувна панель. */
  .uib-nav-slot { display: block !important }
  /* мертве мобільне меню Framer (без бандла воно нікуди не відкривається) */
  [data-framer-name="menu"] { display: none !important }

  .uib-topbar {
    position: fixed; inset: 0 0 auto; z-index: 900;
    height: 56px; padding: 0 16px;
    display: flex; align-items: center; gap: 16px;
    background: #fff; border-bottom: 1px solid #eeeef0;
  }
  .uib-topbar img { width: 24px; height: 24px }
  .uib-topbar b { font: 600 16px/1 Geist, Inter, sans-serif; letter-spacing: -0.01em }
  .uib-burger {
    width: 40px; height: 40px; margin-left: auto;
    display: grid; place-items: center; gap: 4px;
    border: 1px solid #e4e4e7; border-radius: 8px; background: #fff; cursor: pointer;
  }
  .uib-burger span { display: block; width: 16px; height: 2px; background: #0b0b0c }

  body { padding-top: 56px }

  nav.uib-sidebar {
    position: fixed !important;
    top: 56px !important; left: 0 !important; bottom: auto !important;
    /* Висоту лишаємо ту, що дає власна розкладка сайдбара: і розтягування
       (bottom: 0), і height: auto ламали його внутрішнє позиціонування. */
    max-height: calc(100vh - 56px);
    width: 296px !important; max-width: 88vw;
    margin: 0 !important; border-radius: 0 !important;
    overflow-y: auto; overflow-x: hidden; z-index: 901;
    transform: translateX(-104%);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.uib-nav-open nav.uib-sidebar { transform: none }
  html.uib-nav-open::after {
    content: ""; position: fixed; inset: 56px 0 0; z-index: 900;
    background: rgba(11, 11, 12, 0.32);
  }
  html.uib-nav-open, html.uib-nav-open body { overflow: hidden }
}

@media (max-width: 1023px) {
  .uib-sidebar { width: 296px; height: calc(100vh - 56px); min-height: 0; border-width: 0 1px 0 0; border-radius: 0 }
  .uib-sidebar-mini { width: 296px }
  .uib-sidebar-minimize { display: none }
}

@media (prefers-reduced-motion: reduce) {
  .uib-sidebar, .uib-sidebar *, .uib-sidebar *::before, .uib-sidebar *::after { transition-duration: .01ms !important }
}

/* Під час переходу між категоріями сайдбар не перемальовується: клієнт
   замінює лише main. Легка прозорість показує завантаження без стрибка. */
main[data-framer-name="Content Section"] { transition: opacity .16s ease }
html.uib-content-loading main[data-framer-name="Content Section"] { opacity: .55; pointer-events: none }