/* ==== VEKTOR SHOP — CLEAN CSS PACK ==== */
/* Космические волны (фон) */
html, body { background: var(--bg); color: var(--text); }
body::after{
  content:""; position:fixed; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 280px at 60% 62%, rgba(52,232,255,.22) 0%, rgba(52,232,255,0) 60%),
    radial-gradient(850px 220px  at 30% 40%, rgba(29,164,255,.20) 0%, rgba(29,164,255,0) 62%),
    radial-gradient(1100px 260px at 40% 48%, rgba(123,92,255,.22) 0%, rgba(123,92,255,0) 62%),
    radial-gradient(900px 220px  at 70% 30%, rgba(255,123,213,.16) 0%, rgba(255,123,213,0) 64%),
    radial-gradient(1300px 320px at 50% 75%, rgba(29,164,255,.12) 0%, rgba(29,164,255,0) 70%);
  filter: blur(8px) saturate(115%);
  transform: skewY(-8deg) translateY(2%);
  mix-blend-mode: screen;
  animation: wavesDrift 16s ease-in-out infinite alternate;
  opacity:.95;
}
@keyframes wavesDrift{
  0%{transform:skewY(-8deg) translateY(2%) translateX(0)}
  50%{transform:skewY(-7deg) translateY(0) translateX(-1%)}
  100%{transform:skewY(-8deg) translateY(-1%) translateX(1%)}
}
@media (prefers-reduced-motion:reduce){ body::after{animation:none} }

/* Контент поверх фона */
.topbar, #topbar, .sidebar, #grid, main, .content{ position:relative; z-index:10; }

/* ====== TOPBAR + BRAND + SEARCH + CART + LANG ====== */
header.topbar{
  display:flex !important;
  align-items:center;
  gap:.75rem;
  position:relative;
  padding-right:12px;
  z-index:10;
}

/* Бренд "VEKTOR SHOP" — живой неон */
header.topbar .brand, .brand-vshop{
  font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  background:linear-gradient(90deg,#34e8ff,#7b5cff,#ff7bd5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 6px rgba(52,232,255,.7), 0 0 18px rgba(123,92,255,.5), 0 0 32px rgba(255,123,213,.35);
  animation:brandPulse 3s ease-in-out infinite;
}
header.topbar .brand:hover, .brand-vshop:hover{
  filter:drop-shadow(0 0 12px rgba(52,232,255,.9));
}
@keyframes brandPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(52,232,255,.55))}
  50%{filter:drop-shadow(0 0 12px rgba(52,232,255,.85))}
}

/* Поиск */
header.topbar .search{
  order:2 !important;
  margin-left:auto !important;
  max-width:min(720px,52vw);
  width:100%;
  display:flex; align-items:center; gap:.5rem;
}
header.topbar .search input[type="search"]{
  width:100%; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:box-shadow .18s, background .18s, border-color .18s;
}
header.topbar .search input[type="search"]:focus{
  outline:none; background:rgba(255,255,255,.08);
  border-color:rgba(52,232,255,.45);
  box-shadow:0 0 0 3px rgba(52,232,255,.18), 0 0 18px rgba(52,232,255,.25) inset;
}

/* Корзина */
header.topbar #cartBtn,
header.topbar .cart,
header.topbar .basket,
header.topbar .mini-cart{
  order:3 !important;
  margin-left:.75rem !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
}

/* Переключатель языка */
header.topbar .ua-ru,
header.topbar .lang,
header.topbar .locale,
header.topbar [data-role="lang"]{
  order:4 !important;
  margin-left:.75rem !important;
  margin-right:0 !important;
  flex:0 0 auto !important;
}



/* ====== Группы (категории) — НЕ прозрачные ====== */
#tiles .tile, #grid .tile{
  background:#1f2937;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  transition:transform .15s, box-shadow .18s, border-color .18s, background .18s;
}
#tiles .tile:hover, #grid .tile:hover{
  background:#223041;
  border-color:rgba(52,232,255,.25);
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(52,232,255,.18);
}

/* ====== Товары (анкеты) — прозрачные с подсветкой ====== */
.product-card, .card.product, .product.tile, .goods-card, .product-item{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  backdrop-filter:blur(10px) saturate(140%);
  transition:transform .15s, box-shadow .18s, border-color .18s, background .18s, filter .18s;
}
.product-card:hover, .card.product:hover, .product.tile:hover, .goods-card:hover, .product-item:hover{
  transform:translateY(-2px);
  border-color:rgba(52,232,255,.35);
  background:radial-gradient(120% 120% at 10% -10%, rgba(52,232,255,.14), transparent 55%) rgba(255,255,255,.035);
  box-shadow:0 0 0 1px rgba(52,232,255,.25), 0 10px 28px rgba(0,0,0,.45), 0 0 26px rgba(52,232,255,.18);
  filter:drop-shadow(0 0 14px rgba(52,232,255,.18));
}
.product-card img, .card.product img, .product.tile img, .goods-card img, .product-item img{
  -webkit-box-reflect:none !important;
}

/* Hover кнопки на карточках */
.product-card .btn:hover,
.card.product .btn:hover,
.product.tile .btn:hover,
.goods-card .btn:hover,
.product-item .btn:hover{
  box-shadow:0 0 12px rgba(52,232,255,.45),
             inset 0 0 18px rgba(52,232,255,.22);
  border-color:rgba(52,232,255,.45);
}
/* ===== RIGHT ORDER: [LANG] → [CART] → [SEARCH] ===== */

/* Поиск — тянется до середины, остаётся перед правым блоком */
header.topbar .search{
  order:2 !important;
  flex:1 1 auto !important;
  margin-left:auto !important;
  max-width:min(720px,52vw);
  width:100%;
}

/* Корзина — сразу после поиска */
header.topbar #cartBtn,
header.topbar .cart,
header.topbar .basket,
header.topbar .mini-cart,
header.topbar [data-role="cart"]{
  order:3 !important;
  flex:0 0 auto !important;
  margin-left:.75rem !important;
  margin-right:0 !important;
  align-self:center;
}

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА — САМЫЙ ПРАВЫЙ КРАЙ */
header.topbar .ua-ru,
header.topbar .lang,
header.topbar .locale,
header.topbar [data-role="lang"],
header.topbar [data-lang],
header.topbar [class*="lang"],
header.topbar [class*="locale"],
header.topbar a[href*="lang"],
header.topbar button[aria-label*="UA"],
header.topbar button[aria-label*="RU"]{
  order:4 !important;
  flex:0 0 auto !important;
  margin-left:.75rem !important;
  margin-right:0 !important;   /* упираем в самый угол */
  align-self:center;
}

/* На очень узких экранах страхуем правый край */
@media (max-width: 1024px){
  header.topbar{ padding-right:12px; }
  header.topbar .search{ max-width:58vw; }
}



/* ===== Бренд «VEKTOR SHOP» — живее на hover ===== */
header.topbar .brand, .brand-vshop{
  font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  background:linear-gradient(90deg,#34e8ff,#7b5cff,#ff7bd5);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 6px rgba(52,232,255,.7), 0 0 18px rgba(123,92,255,.5), 0 0 32px rgba(255,123,213,.35);
  animation:brandPulse 3s ease-in-out infinite;
}
header.topbar .brand:hover, .brand-vshop:hover{
  filter:drop-shadow(0 0 14px rgba(52,232,255,1));
}
@keyframes brandPulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(52,232,255,.6))}
  50%{filter:drop-shadow(0 0 14px rgba(52,232,255,.95))}
}

/* ВРЕМЕННАЯ ПОДСВЕТКА ГАМБУРГЕРА — кто «отвечает» */
header.topbar .menu,
header.topbar .menu-toggle,
header.topbar .hamburger,
header.topbar .sidebar-toggle,
header.topbar [data-role="menu"],
header.topbar [aria-label*="menu" i],
header.topbar [aria-label*="меню" i]{
  outline: 2px solid #00e7ff !important;
  box-shadow: 0 0 14px rgba(0,231,255,.9) !important;
}
/* ===== MOBILE DRAWER: выезжающая слева панель категорий ===== */
@media (max-width: 1024px){
  /* если у тебя панель называется не .sidebar — добавь сюда свой селектор (#sidebar, .side и т.п.) */
  .sidebar, #sidebar, .side {
    position: fixed !important;
    top: 56px;              /* высота шапки, при необходимости подстрой (например 60px) */
    left: 0; bottom: 0;
    width: 86vw; max-width: 360px;
    transform: translateX(-104%);
    transition: transform .24s ease;
    z-index: 1000;
    background: #0f172a;
    box-shadow: 20px 0 60px rgba(0,0,0,.5);
  }
  /* открытое состояние */
  body.menu-open .sidebar,
  body.menu-open #sidebar,
  body.menu-open .side {
    transform: translateX(0);
  }

  /* затемнение фона */
  #drawerBackdrop{
    display:none;
    position:fixed; inset:0;
    background: rgba(4,12,24,.55);
    backdrop-filter: blur(2px);
    z-index: 900;
  }
  body.menu-open #drawerBackdrop{ display:block; }
}
/* === MOBILE DRAWER (auto) — открываем левую колонку как дровер === */
@media (max-width:1024px){
  /* закрыто: прячем колонку за левый край */
  .drawer,
  .sidebar, #sidebar,
  .left-panel{
    position: fixed !important;
    top: var(--topbar-h, 56px);
    left: 0; bottom: 0;
    width: 86vw; max-width: 360px;
    transform: translateX(-104%);
    transition: transform .24s ease;
    z-index: 1000;
    background: #0f172a;
    box-shadow: 20px 0 60px rgba(0,0,0,.5);
  }
  /* открыто */
  body.menu-open .drawer,
  body.menu-open .sidebar,
  body.menu-open #sidebar,
  body.menu-open .left-panel{
    transform: translateX(0);
  }

  /* фон-затемнение */
  #drawerBackdrop{
    display:none; position:fixed; inset:0;
    background: rgba(4,12,24,.55);
    backdrop-filter: blur(2px);
    z-index: 900;
  }
  body.menu-open #drawerBackdrop{ display:block; }

  /* блокируем прокрутку фона */
  body.menu-open{ overflow: hidden; }
}
/* FORCE drawer visible on mobile, even if theme hides sidebar */
@media (max-width:1024px){
  .drawer,
  .sidebar, #sidebar, .left, .left-panel, .sidebar-left {
    display:block !important;
    visibility:visible !important;
    position: fixed !important;
    top: var(--topbar-h, 56px);
    left: 0; bottom: 0;
    width: 86vw; max-width: 360px;
    transform: translateX(-104%);
    transition: transform .24s ease;
    z-index: 1000;
    background: #0f172a;
    box-shadow: 20px 0 60px rgba(0,0,0,.5);
  }
  body.menu-open .drawer,
  body.menu-open .sidebar,
  body.menu-open #sidebar,
  body.menu-open .left,
  body.menu-open .left-panel,
  body.menu-open .sidebar-left{
    transform: translateX(0);
  }

  /* backdrop + блокировка прокрутки уже есть, оставляем */
  body.menu-open{ overflow:hidden; }
}
/* ===== «Всі категорії» — аккуратная неоновая метка (clean) ===== */
#chips{ overflow: visible !important; }

#chips .pill[data-key="Все категории"],
#chips .pill[data-key="Всі категорії"],
#chips .pill:last-child{
  position: relative !important;
  z-index: 3 !important;

  /* Размер и геометрия, чтобы не выбивалось из ряда */
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .15px;
  padding: 7px 12px !important;
  border-radius: 999px;

  /* Фон и граница — без «кислоты» */
  color:#fff !important;
  background: linear-gradient(180deg,#0f172a,#141f2e) !important;
  border: 1.5px solid rgba(82, 244, 255, .95) !important;

  /* Мягкий свет (внутри — чуть, снаружи — компактно) */
  text-shadow:
    0 0 6px rgba(82,244,255,.85);
  box-shadow:
    0 0 10px rgba(82,244,255,.45),
    inset 0 0 14px rgba(82,244,255,.20) !important;
}

/* Узкий аккуратный контур без «разлива» */
#chips .pill[data-key="Все категории"]::after,
#chips .pill[data-key="Всі категорії"]::after,
#chips .pill:last-child::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  z-index:-1;
  box-shadow:
    0 0 14px rgba(82,244,255,.55),
    0 0 26px rgba(120,92,255,.35);
}

/* Едва заметный hover — без анимаций и лагов */
#chips .pill[data-key="Все категории"]:hover,
#chips .pill[data-key="Всі категорії"]:hover,
#chips .pill:last-child:hover{
  box-shadow:
    0 0 14px rgba(82,244,255,.55),
    inset 0 0 18px rgba(82,244,255,.26) !important;
}
/* ===== HEADER: "circuit board" в самой шапке (статично, без анимаций) ===== */
header, .topbar{
  position: relative;
  z-index: 10;                 /* контент выше фона */
  background: #0a0f18 !important;
  overflow: hidden;
}

/* Фон-«плата» за всеми кнопками */
header::before, .topbar::before{
  content:"";
  position:absolute; inset:0;
  z-index: 0;                  /* именно под контентом */
  pointer-events:none;

  /* Слои: световые пятна → стеклянная глубина → "трассы" */
  background:
    /* Glow пятна */
    radial-gradient(120% 160% at 20% 30%, rgba(52,232,255,.22), transparent 60%),
    radial-gradient(120% 160% at 80% 65%, rgba(123,92,255,.18), transparent 60%),
    radial-gradient(90% 130%  at 55% 20%, rgba(255,123,213,.12), transparent 60%),
    /* лёгкая «стеклянная» глубина сверху вниз */
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.18) 55%, rgba(0,0,0,.25)),
    /* диагональные «трассы» (тонкие линии) */
    repeating-linear-gradient(25deg, rgba(90,170,255,.16) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-25deg, rgba(100,255,230,.12) 0 1px, transparent 1px 16px),
    /* редкая сетка-ориентир */
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 22px);
  background-blend-mode: screen, screen, screen, normal, screen, screen, screen, screen;

  /* Чуть «перспективы» без анимаций */
  transform: perspective(1200px) rotateX(12deg);
  box-shadow: inset 0 10px 28px rgba(255,255,255,.03);
}

/* Тонкая неоновая линия снизу (аккуратная) */
header::after, .topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background: linear-gradient(90deg,#34e8ff,#7b5cff,#ff7bd5);
  box-shadow: 0 0 10px rgba(123,92,255,.55);
  pointer-events:none; z-index:1;
}

/* Контент шапки поверх фона */
header > *, .topbar > *{ position: relative; z-index: 2; }

/* Твики под мобильные, чтобы не «давило» */
@media (max-width: 640px){
  header::before, .topbar::before{
    transform: perspective(900px) rotateX(10deg);
    background:
      radial-gradient(130% 160% at 18% 32%, rgba(52,232,255,.18), transparent 60%),
      radial-gradient(130% 160% at 82% 68%, rgba(123,92,255,.14), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2) 55%, rgba(0,0,0,.27)),
      repeating-linear-gradient(25deg, rgba(90,170,255,.14) 0 1px, transparent 1px 16px),
      repeating-linear-gradient(-25deg, rgba(100,255,230,.1) 0 1px, transparent 1px 18px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px);
  }
}