/**
 * MIVEX — Стилі для спільних блоків (top-bar, cat-nav, мега-меню).
 * Підключається як <link rel="stylesheet" href="/partials/shared.css">.
 *
 * ВАЖЛИВО: очікує наявність CSS-змінних на сторінці:
 *   --red, --red-dark, --black, --bg, --border, --gray-nav, --text, --muted
 * На всіх сторінках Mivex ці змінні вже визначені в :root.
 */

/* ===== TOP-BAR ===== */
.top-bar{background:var(--black);color:rgba(255,255,255,0.7);font-size:0.72rem;padding:6px 0;border-bottom:1px solid #333;position:sticky;top:0;z-index:500}
.top-bar-inner{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
.top-links{display:flex;gap:1.25rem}
.top-links a{color:rgba(255,255,255,0.55);transition:color 0.15s;text-decoration:none}
.top-links a:hover{color:#fff}
.top-right{display:flex;align-items:center;gap:1rem}
.top-socials{display:flex;gap:6px}
.top-soc{width:22px;height:22px;background:rgba(255,255,255,0.08);border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:0.62rem;color:rgba(255,255,255,0.5);transition:background 0.15s;text-decoration:none}
.top-soc:hover{background:var(--red);color:#fff}
.lang-sw{display:flex;gap:3px}
.lang-btn{background:transparent;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.45);padding:2px 8px;border-radius:2px;font-size:0.65rem;font-family:'Nunito Sans',sans-serif;cursor:pointer;letter-spacing:0.05em;transition:all 0.15s}
.lang-btn.active,.lang-btn:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ===== CAT-NAV ===== */
/* Fallback #2C2C2C — на випадок, коли на сторінці не оголошена --gray-nav (product.html та інші). */
.cat-nav{background:var(--gray-nav, #2C2C2C);position:sticky;top:113px;z-index:300;overflow:visible}
.cat-nav-inner{max-width:1320px;margin:0 auto;padding:0 20px;display:flex;overflow:visible}
.cat-nav-item{
  position:relative;display:flex;align-items:center;
  padding:0 14px;height:44px;
  color:rgba(255,255,255,0.8);font-size:0.75rem;font-weight:600;
  letter-spacing:0.03em;white-space:nowrap;cursor:pointer;
  transition:background 0.15s;gap:5px;border:none;
  background:transparent;font-family:'Nunito Sans',sans-serif;
  text-decoration:none;
}
.cat-nav-item:hover,.cat-nav-item.active-cat{background:var(--red);color:#fff}
.cat-nav-item.featured{background:var(--red);color:#fff}
.cat-arrow{font-size:0.5rem;opacity:0.6;transition:transform 0.2s}
.cat-nav-item:hover .cat-arrow{transform:rotate(180deg)}

/* ===== MEGA-MENU ===== */
.mega-menu{
  visibility:hidden;opacity:0;
  position:absolute;top:100%;left:0;
  background:#fff;
  border:1px solid var(--border);border-top:3px solid var(--red);
  box-shadow:0 12px 40px rgba(0,0,0,0.18);
  min-width:320px;padding:0;
  z-index:99999;
  transition:opacity 0.18s,visibility 0.18s,transform 0.18s;
  transform:translateY(6px);
  pointer-events:none;
}
.cat-nav-item:hover>.mega-menu{
  visibility:visible;opacity:1;
  transform:translateY(0);
  pointer-events:all;
}
.mega-menu.mega-menu-right{left:auto;right:0}
.mega-menu-header{
  background:var(--bg);padding:8px 14px;
  font-size:0.62rem;font-weight:700;color:var(--muted);
  letter-spacing:0.1em;text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:8px}
.mega-grid.cols-1{grid-template-columns:1fr}
/* ═══════════════════════════════════════════════════════
   МЕГА-МЕНЮ — мінімалістичний дизайн з крапками замість emoji
   ═══════════════════════════════════════════════════════ */
.mega-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:999px;
  color:var(--text);font-size:.82rem;font-weight:500;
  transition:background .15s,color .15s,padding .15s;
  white-space:nowrap;cursor:pointer;border:none;background:transparent;
  font-family:'Nunito Sans',sans-serif;width:100%;text-align:left;
  position:relative;
}
.mega-item:hover{background:rgba(232,34,42,.06);color:var(--red);padding-left:16px}
.mega-item-label{flex:1}

/* Крапка-маркер: 5px, майже чорна, +червона на hover.
   Emoji з JS невидимий через font-size:0. */
.mega-item-icon{
  width:14px;height:14px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;flex-shrink:0;
  background:none;border-radius:0;
  position:relative;
}
.mega-item-icon::before{
  content:'';display:block;
  width:5px;height:5px;border-radius:50%;
  background:#333;
  transition:background .15s,transform .15s,box-shadow .15s;
}
/* Без box-shadow-halo — pill-фон на всьому item і так дає достатнє візуальне відчуття.
   Halo через box-shadow іноді рендерився як квадрат на певних браузерах через клипінг
   від parent flex-контейнера — тому лишаємо тільки колір + scale. */
.mega-item:hover .mega-item-icon::before{
  background:var(--red);transform:scale(1.4);
}

/* Chevron ▾ для елементів з підменю — тонкий та ненав'язливий */
.mega-chevron{
  font-size:.55rem;opacity:.35;margin-left:4px;
  color:var(--text);transition:opacity .15s,color .15s,transform .15s;
}
.mega-item-has-sub:hover>.mega-chevron{opacity:.9;color:var(--red);transform:translateX(2px)}

/* Sub-list — попап справа */
.mega-item-has-sub{position:relative;cursor:pointer}
.mega-sub-list{
  display:none;position:absolute;left:100%;top:-4px;
  background:#fff;border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,.14);
  min-width:200px;z-index:700;
  padding:6px;border:1px solid #f0f0f0;
}
.mega-sub-list.mega-sub-left{left:auto;right:100%}
.mega-item-has-sub:hover>.mega-sub-list{display:block}

/* Sub-item — той же стиль що і mega-item, тільки трохи компактніше */
.mega-sub-item{
  padding:8px 14px;border-radius:999px;
  font-size:.78rem;color:#222;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:10px;
  transition:background .15s,color .15s,padding .15s;
  border:none;
}
.mega-sub-item:hover{background:rgba(232,34,42,.06);color:var(--red);padding-left:16px}
.mega-sub-icon{
  width:12px;height:12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0;flex-shrink:0;position:relative;
}
.mega-sub-icon::before{
  content:'';display:block;
  width:4px;height:4px;border-radius:50%;
  background:#666;
  transition:background .15s,transform .15s;
}
.mega-sub-item:hover .mega-sub-icon::before{
  background:var(--red);transform:scale(1.4);
}
.mega-sub-label{flex:1}

.mega-footer{border-top:1px solid var(--border);padding:8px 14px;margin-top:4px}
.mega-footer a{font-size:.72rem;color:var(--red);font-weight:700;letter-spacing:.04em;text-decoration:none}

/* ===== МОБІЛЬНА ВЕРСІЯ ===== */
@media(max-width:768px){
  .top-bar{display:none}
  .cat-nav{display:none}
  .mega-menu{display:none!important}
}
@media(max-width:600px){
  .top-links{display:none}
}

/* ═══════════════════════════════════════════════════════
   ГЛОБАЛЬНІ МОБІЛЬНІ КОМПОНЕНТИ (drawer + hamburger + search)
   Використовуються на всіх сторінках через partials/mob-drawer.html
   ═══════════════════════════════════════════════════════ */

/* Гамбургер + пошук у header — приховані на desktop, з'являються на мобільному */
.mob-hamburger{
  display:none;
  background:none;border:none;
  color:#fff;font-size:22px;cursor:pointer;
  padding:8px;line-height:1;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
.mob-search-btn{
  display:none;
  background:none;border:none;
  color:#fff;font-size:20px;cursor:pointer;
  padding:8px;line-height:1;
  min-width:44px;min-height:44px;
  align-items:center;justify-content:center;
}
@media(max-width:768px){
  .mob-hamburger{display:flex}
  .mob-search-btn{display:flex}
}

/* Overlay під drawer */
.mob-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:800;opacity:0;transition:opacity .3s;
}
.mob-overlay.open{display:block;opacity:1}

/* Drawer знизу (bottom-sheet стиль)
   max-height:78vh — залишає 22% екрана зверху видимим (як overlay),
   щоб клієнт розумів це модальне вікно і бачив ручку зверху. */
.mob-drawer{
  position:fixed;bottom:0;left:0;right:0;
  background:#111;
  border-radius:20px 20px 0 0;
  z-index:900;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
  max-height:78vh;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 -8px 32px rgba(0,0,0,.4);
  /* Клас .dragging додається під час свайпу — вимикає анімацію щоб drawer
     точно слідував за пальцем без згладжування */
}
.mob-drawer.dragging{transition:none}
.mob-drawer.open{transform:translateY(0)}
/* Handle — велика ЯСКРАВА риска, одразу помітна на темному drawer'і.
   Тонкий градієнт з "peek"-фоном допомагає клієнту зрозуміти що це drag-зона. */
.mob-drawer-handle{
  width:48px;height:5px;
  background:rgba(255,255,255,.5);border-radius:3px;
  margin:10px auto 6px;flex-shrink:0;
  cursor:grab;
  transition:background .15s,width .15s;
}
.mob-drawer.dragging .mob-drawer-handle{cursor:grabbing;background:rgba(255,255,255,.8);width:60px}
/* Header — легкий градієнт зверху щоб зона handle+title візуально відділялась
   від категорій і клієнт розумів "ось верхня частина, її можна тягнути". */
.mob-drawer-header{
  display:flex;align-items:center;
  padding:6px 16px 14px;flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.1);
  gap:10px;
  /* Без градієнту — handle-зона і "КАТАЛОГ" смуга одного кольору (#111) */
}
.mob-drawer-back{
  background:none;border:none;
  color:rgba(255,255,255,.6);font-size:18px;cursor:pointer;
  padding:4px 8px 4px 0;display:none;line-height:1;
  transition:color .15s;min-width:32px;
}
.mob-drawer-back.visible{display:block}
.mob-drawer-back:active{color:#fff}
.mob-drawer-title{
  font-family:'Oswald',sans-serif;
  font-size:18px;font-weight:700;letter-spacing:.06em;
  color:#fff;flex:1;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mob-drawer-close{
  background:rgba(255,255,255,.08);border:none;
  color:rgba(255,255,255,.6);font-size:16px;cursor:pointer;
  padding:6px 8px;border-radius:6px;line-height:1;
  transition:all .15s;min-width:32px;min-height:32px;
}
.mob-drawer-close:active{background:rgba(255,255,255,.15);color:#fff}

/* Scrollable content */
.mob-drawer-scroll{
  overflow-y:auto;flex:1;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.mob-drawer-scroll::-webkit-scrollbar{display:none}

/* Level panels */
.mob-level{display:none;animation:mobDrawerSlideIn .22s ease}
.mob-level.active{display:block}
@keyframes mobDrawerSlideIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* Category list */
.mob-cat-list{padding:6px 0 20px}
.mob-section-head{
  padding:10px 16px 6px;
  font-size:10px;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,.3);text-transform:uppercase;
}
.mob-cat-item{
  display:flex;align-items:center;
  padding:14px 16px;color:#fff;
  border:none;background:none;text-decoration:none;
  width:100%;text-align:left;cursor:pointer;
  transition:background .12s;
  gap:12px;position:relative;
  min-height:52px;box-sizing:border-box;
}
.mob-cat-item:active{background:rgba(255,255,255,.1)}
/* Іконка категорії у mob-drawer — прибираємо емодзі, показуємо чорну крапку
   (як на десктопі в mega-menu). Емодзі-текст лишається в DOM для дебагу, але
   font-size:0 ховає його, а ::before рендерить точку. Це дає єдиний візуальний
   стиль між мобільним меню і десктопом. */
.mob-cat-item .mob-cat-icon{
  font-size:0;
  width:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.mob-cat-item .mob-cat-icon::before{
  content:'';display:block;
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.4);
  transition:background .15s,transform .15s;
}
.mob-cat-item:active .mob-cat-icon::before,
.mob-cat-item.has-sub:active .mob-cat-icon::before{
  background:var(--red);transform:scale(1.4);
}
/* "Всі товари каталогу" — червона точка щоб виділятись */
.mob-cat-item.view-all .mob-cat-icon::before{background:var(--red)}
.mob-cat-item .mob-cat-label{
  flex:1;font-size:15px;font-weight:600;
  font-family:'Nunito Sans',sans-serif;line-height:1.3;
  /* Довгі назви обрізаємо з …, не ламаємо ритм списку */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.mob-cat-item .mob-cat-chevron{
  color:rgba(255,255,255,.3);font-size:14px;flex-shrink:0;
}
.mob-cat-item.has-sub .mob-cat-chevron{color:rgba(255,255,255,.5)}
.mob-cat-divider{height:1px;background:rgba(255,255,255,.06);margin:4px 0}
.mob-cat-item.view-all{
  color:var(--red);font-size:14px;
  border-bottom:1px solid rgba(232,34,42,.15);
  background:rgba(232,34,42,.05);margin-bottom:4px;
}
.mob-cat-item.view-all .mob-cat-chevron{color:var(--red);opacity:.6}
.mob-cat-item.view-all:active{background:rgba(232,34,42,.12)}
.mob-cat-item.special{
  color:rgba(255,255,255,.55);border-top:none;font-size:14px;
  /* Компактніші ніж категорії — інформаційні пункти не мають конкурувати з товарними */
  padding:10px 16px;min-height:44px;
}
.mob-cat-item.special .mob-cat-icon{opacity:.45;width:22px}
.mob-cat-item.special .mob-cat-icon::before{width:4px;height:4px}
.mob-cat-item.special .mob-cat-label{font-weight:500;font-size:13px}

/* Лічильник товарів у категорії (mob-drawer) — заповнюється JS'ом */
.mob-cat-count{
  font-size:11px;color:rgba(255,255,255,.35);
  margin-right:6px;font-weight:500;
  min-width:20px;text-align:right;
}

/* Хлібні крихти в заголовку drawer'а: "Приманки / Силікон" */
.mob-crumb{color:rgba(255,255,255,.5);font-weight:400}
.mob-crumb-sep{color:rgba(255,255,255,.25);margin:0 4px}

/* ═══ ПОСТІЙНИЙ МОБІЛЬНИЙ ПОШУК (sticky під хедером) ═══
   На десктопі повністю прихований; на mobile (≤768px) видимий завжди.
   Це стандарт e-commerce: клієнт бачить поле і одразу може шукати. */
.mob-persist-search{display:none}
@media(max-width:768px){
  .mob-persist-search{
    display:flex;
    position:sticky;top:50px;z-index:399;
    background:#0e0e0e;
    padding:8px 12px;gap:6px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .mob-persist-search input{
    flex:1;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    padding:9px 12px 9px 34px;
    color:#fff;font-size:14px;
    font-family:'Nunito Sans',sans-serif;outline:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
    background-repeat:no-repeat;background-position:10px center;
    min-height:40px;
  }
  .mob-persist-search input::placeholder{color:rgba(255,255,255,.4)}
  .mob-persist-search input:focus{border-color:var(--red);background-color:rgba(255,255,255,.1)}
  /* Коли є постійний пошук — прибираємо кнопку-лупу з header (більше не потрібна) */
  .mob-search-btn{display:none!important}
}

/* Мобільний пошук — bar зверху */
.mob-search-bar{
  display:none;position:fixed;
  top:52px;left:0;right:0;
  background:#111;padding:10px 12px;
  z-index:600;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.mob-search-bar.open{display:flex;gap:8px}
.mob-search-bar input{
  flex:1;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;padding:10px 14px;
  color:#fff;font-size:14px;
  font-family:'Nunito Sans',sans-serif;outline:none;
}
.mob-search-bar input::placeholder{color:rgba(255,255,255,.4)}
.mob-search-bar button{
  background:var(--red);border:none;
  color:#fff;border-radius:8px;
  padding:0 16px;font-size:16px;cursor:pointer;
  min-width:44px;min-height:44px;
}

/* ===== КНОПКИ У СПИСКУ ВИБРАНОГО ===== */
/* Клік по фото/назві товару вже веде на product.html — окрема кнопка «→ до товару»
   не потрібна. Лишаємо 2 кнопки: «В кошик» (flex:1, велика) + «Видалити» (компактна). */
.wish-item-actions{display:flex;gap:8px;align-items:stretch;flex-wrap:nowrap}
.wish-item-add,
.wish-item-remove,
.wish-item-goto{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;line-height:1;
  border-radius:6px;padding:8px 12px;
  font-size:.78rem;font-weight:600;
  font-family:'Nunito Sans',sans-serif;
  cursor:pointer;transition:all .15s;
  text-decoration:none;
  border:1px solid transparent;
  height:34px;box-sizing:border-box;
}
.wish-item-add{background:var(--red,#e8222a);color:#fff;flex:1;min-width:0}
.wish-item-add:hover{background:#c81820}
/* Стан «уже у кошику» — зелена кнопка з галочкою + числом + плюсом */
.wish-item-add.in-cart{background:#22c55e;color:#fff;gap:6px}
.wish-item-add.in-cart:hover{background:#16a34a}
.wish-item-add.in-cart .wish-add-check{font-size:.9rem;font-weight:900}
.wish-item-add.in-cart b{font-weight:800;font-size:.85rem}
.wish-item-add.in-cart .wish-add-plus{font-size:1rem;font-weight:900;opacity:.9;margin-left:2px}
.wish-item-remove{background:#f5f5f5;color:#666;flex-shrink:0}
.wish-item-remove:hover{background:#e8e8e8;color:#333}
/* wish-item-goto лишено як стиль на випадок якщо десь ще використовується, але в UI прибрано */
.wish-item-goto{background:#fff;color:var(--red,#e8222a);border-color:var(--red,#e8222a);flex-shrink:0}
.wish-item-goto:hover{background:var(--red,#e8222a);color:#fff}

/* Фото і назва товару у вибраному — <a> обгортки, ведуть на product.html */
.wish-item-img{cursor:pointer;transition:opacity .15s;text-decoration:none;display:flex;align-items:center;justify-content:center}
.wish-item-img:hover{opacity:.85}
.wish-item-name{cursor:pointer;transition:color .15s;text-decoration:none;color:inherit;display:block}
.wish-item-name:hover{color:var(--red,#e8222a)}