/* ──────────────────────────────────────────────────────────────────────────
   Vice Neon (.vn) — етап 3b: каталог транспорту (docs/redesign/prototype/VehiclesB.dc.html).
   .fc-* / .vc-* / .vc (facets shell, public/js/facets.js + vehicles-catalog.js) — СПІЛЬНИЙ шар
   для /vehicles, /items, /cases, /discounts, /online (style.css). За рішенням користувача
   рескін тут глобальний під .vn — усі ці сторінки отримають той самий вигляд одразу, ще до
   власного етапу (ROUTES.md), замість дубльованої розмітки лише для /vehicles.

   Навмисно КОСМЕТИЧНИЙ рескін: кольори/шрифти/радіуси/тінь, без display/position/grid-template-
   columns/width/height — макет (десктоп-колонки, мобільна шторка фільтрів, усі брейкпоінти) лишається
   тим самим, що в style.css, тож JS (facets.js, catalog.js, vehicles-catalog.js) і сама логіка
   відкриття/закриття шторки не зачеплені.
   ────────────────────────────────────────────────────────────────────────── */

html.vn:not([data-section="admin"]) .fc-page { font-family: var(--vn-font-body), sans-serif; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .fc-head h1 { font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; }
html.vn:not([data-section="admin"]) .fc-head p { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .catalog-crumbs { color: var(--vn-muted-2); font-size: 13px; }
html.vn:not([data-section="admin"]) .catalog-crumbs [aria-current] { color: var(--vn-text); }

/* ─── Бічна панель фільтрів ──────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .fc-side { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html.vn:not([data-section="admin"]) .fc-side__head { color: var(--vn-text); }
html.vn:not([data-section="admin"]) .fc-x {
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .fc-q, html.vn:not([data-section="admin"]) .fc-find {
  background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--vn-radius-pill); color: var(--vn-muted);
}
html.vn:not([data-section="admin"]) .fc-q:focus-within, html.vn:not([data-section="admin"]) .fc-find:focus-within { border-color: var(--vn-cyan); box-shadow: 0 0 0 4px rgba(46, 230, 214, .14); }
html.vn:not([data-section="admin"]) .fc-q input, html.vn:not([data-section="admin"]) .fc-find input { color: var(--vn-text); font-family: var(--vn-font-body); }
html.vn:not([data-section="admin"]) .fc-q kbd { border-color: rgba(255, 255, 255, .16); color: var(--vn-muted); font-family: var(--vn-font-mono); }

html.vn:not([data-section="admin"]) .fc-g { border-top-color: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .fc-g__h { color: var(--vn-text); font-family: var(--vn-font-body); font-weight: 800; }
html.vn:not([data-section="admin"]) .fc-g__name { letter-spacing: -.01em; }
html.vn:not([data-section="admin"]) .fc-new { background: rgba(46, 230, 214, .16); color: var(--vn-cyan); border-radius: var(--vn-radius-pill); }
html.vn:not([data-section="admin"]) .fc-sel { background: var(--vn-pink); color: var(--vn-ink); border-radius: var(--vn-radius-pill); font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .fc-hint { color: var(--vn-muted); }

html.vn:not([data-section="admin"]) .fc-chip {
  border-radius: var(--vn-radius-pill); border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03);
  color: var(--vn-text); font-weight: 700; font-family: var(--vn-font-body); transition: border-color .2s, transform .2s;
}
html.vn:not([data-section="admin"]) .fc-chip:hover { border-color: rgba(255, 255, 255, .35); transform: translateY(-1px); }
html.vn:not([data-section="admin"]) .fc-chip[aria-pressed="true"] {
  border-color: var(--vn-pink); background: rgba(255, 79, 163, .16); color: var(--vn-pink-soft);
  box-shadow: 0 0 0 2px rgba(255, 79, 163, .3);
}
html.vn:not([data-section="admin"]) .fc-chip.is-zero { opacity: .45; }
html.vn:not([data-section="admin"]) .fc-n { color: var(--vn-muted-2); font-family: var(--vn-font-mono); }

html.vn:not([data-section="admin"]) .fc-o label:hover { background: rgba(255, 255, 255, .05); }
html.vn:not([data-section="admin"]) .fc-o__t { color: var(--vn-text); }
html.vn:not([data-section="admin"]) .fc-box { border-radius: 5px; border-color: rgba(255, 255, 255, .22); background: rgba(0, 0, 0, .2); color: transparent; }
html.vn:not([data-section="admin"]) .fc-o input:checked + .fc-box { background: var(--vn-pink); border-color: var(--vn-pink); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .fc-sw { border-radius: 50%; }
html.vn:not([data-section="admin"]) .fc-more { color: var(--vn-cyan); font-family: var(--vn-font-body); font-weight: 700; }

/* ─── Швидкість: гістограма й повзунок ───────────────────────────────────── */
html.vn:not([data-section="admin"]) .vc-modes { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--vn-radius-pill); }
html.vn:not([data-section="admin"]) .vc-modes button { font-family: var(--vn-font-display); font-weight: 800; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc-modes button[aria-checked="true"] { color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .vc-hist i { background: rgba(255, 255, 255, .12); border-radius: 4px 4px 0 0; }
html.vn:not([data-section="admin"]) .vc-hist i.is-in { background: linear-gradient(180deg, var(--vn-pink), var(--vn-orange)); }
html.vn:not([data-section="admin"]) .vc-rng__track { background: rgba(255, 255, 255, .1); }
html.vn:not([data-section="admin"]) .vc-rng__fill { background: linear-gradient(90deg, var(--vn-pink), var(--vn-orange)); }
html.vn:not([data-section="admin"]) .vc-rng__track input[type="range"] { accent-color: var(--vn-pink); }
html.vn:not([data-section="admin"]) .vc-rng__in label { background: rgba(0, 0, 0, .25); border-color: rgba(255, 255, 255, .14); color: var(--vn-muted); border-radius: var(--vn-radius-field); }
html.vn:not([data-section="admin"]) .vc-rng__in input { color: var(--vn-text); font-family: var(--vn-font-mono); }

html.vn:not([data-section="admin"]) .fc-apply {
  background: var(--vn-grad-brand); color: var(--vn-ink); font-family: var(--vn-font-body); font-weight: 800; border-radius: var(--vn-radius-pill);
}
html.vn:not([data-section="admin"]) .fc-sheet-bg { background: rgba(6, 5, 12, .62); backdrop-filter: blur(6px); }

/* ─── Панель результатів ─────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .fc-fbtn {
  border-radius: var(--vn-radius-pill); border: 1px solid var(--vn-pink); background: rgba(255, 79, 163, .14); color: var(--vn-pink-soft); font-weight: 800;
}
html.vn:not([data-section="admin"]) .fc-fbtn__n { color: var(--vn-ink); background: var(--vn-pink-soft); border-radius: var(--vn-radius-pill); }
html.vn:not([data-section="admin"]) .fc-found { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .fc-found b { color: var(--vn-cyan); font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .fc-sort { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .fc-sort select { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); color: var(--vn-text); border-radius: var(--vn-radius-pill); font-family: var(--vn-font-body); }
html.vn:not([data-section="admin"]) .fc-dens button { border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); color: var(--vn-muted); border-radius: 10px; }
html.vn:not([data-section="admin"]) .fc-dens button[aria-pressed="true"] { border-color: var(--vn-cyan); color: var(--vn-cyan); background: rgba(46, 230, 214, .12); }

html.vn:not([data-section="admin"]) .fc-ac { background: rgba(255, 79, 163, .14); border-color: rgba(255, 79, 163, .4); color: var(--vn-pink-soft); border-radius: var(--vn-radius-pill); }
html.vn:not([data-section="admin"]) .fc-ac small { opacity: .8; }
html.vn:not([data-section="admin"]) .fc-clear { color: var(--vn-muted); font-weight: 700; }
html.vn:not([data-section="admin"]) .fc-clear:hover { color: var(--vn-text); }

html.vn:not([data-section="admin"]) .fc-empty { border-color: rgba(255, 255, 255, .16); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .fc-empty b { font-family: var(--vn-font-display); font-weight: 900; text-transform: uppercase; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .fc-empty__btn {
  display: inline-flex; margin-top: 10px; height: 44px; padding: 0 20px; align-items: center; border-radius: var(--vn-radius-pill);
  background: var(--vn-pink); color: var(--vn-ink); font-weight: 800; text-decoration: none;
}

/* ─── Картка транспорту: .vc ─────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vc {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--vn-radius-card);
  color: var(--vn-text); transition: transform .3s var(--vn-ease), border-color .3s, box-shadow .3s;
}
html.vn:not([data-section="admin"]) .vc:hover {
  border-color: rgba(255, 79, 163, .5); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(255, 79, 163, .16);
}
@media (hover: none) { html.vn:not([data-section="admin"]) .vc:hover { transform: none; } }
html.vn:not([data-section="admin"]) .vc__art { background: linear-gradient(160deg, #221A3A, #120F1C); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc__kind { background: rgba(11, 10, 18, .75); color: var(--vn-muted); border-radius: 8px; font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .vc__cert { background: var(--vn-cyan); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .vc__ltd { background: var(--vn-yellow); color: var(--vn-ink); }
html.vn:not([data-section="admin"]) .vc__nm { font-family: var(--vn-font-display); font-weight: 800; letter-spacing: -.01em; }
html.vn:not([data-section="admin"]) .vc__br { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc__sp > b { font-family: var(--vn-font-mono); color: var(--vn-text); }
html.vn:not([data-section="admin"]) .vc__sp > b em { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc__none { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc__alt { color: var(--vn-muted-2); font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .vc__bar { background: rgba(255, 255, 255, .08); }
html.vn:not([data-section="admin"]) .vc__bar i { background: linear-gradient(90deg, var(--vn-pink), var(--vn-orange)); }
html.vn:not([data-section="admin"]) .vc__tags span { background: rgba(255, 255, 255, .06); color: var(--vn-muted); border-radius: 6px; }

/* ─── Швидкий перегляд (.vn лише, views/_vehicle_tile.erb + public/js/vehicles-catalog-vn.js) ───── */
html.vn:not([data-section="admin"]) .vc { position: relative; }
html.vn:not([data-section="admin"]) .vc__eye {
  position: absolute; right: 10px; top: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(11, 10, 18, .72); color: var(--vn-text); display: grid; place-items: center; padding: 0;
}
html.vn:not([data-section="admin"]) .vc__eye svg { width: 17px; height: 17px; }
html.vn:not([data-section="admin"]) .vc__qv {
  position: absolute; left: 6px; right: 6px; top: 6px; z-index: 3; display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: 18px; background: rgba(17, 13, 27, .97); border: 1px solid rgba(255, 79, 163, .4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); animation: bIn .18s var(--vn-ease) both;
  font-family: var(--vn-font-body), sans-serif; color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .vc__qv[hidden] { display: none; }
html.vn:not([data-section="admin"]) .vc__qv-head { display: flex; align-items: center; gap: 10px; }
html.vn:not([data-section="admin"]) .vc__qv-dot { width: 36px; height: 36px; flex: none; border-radius: 12px; background: rgba(255, 79, 163, .2); border: 1px solid rgba(255, 79, 163, .6); box-shadow: 0 0 14px rgba(255, 79, 163, .4); }
html.vn:not([data-section="admin"]) .vc__qv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
html.vn:not([data-section="admin"]) .vc__qv-t b { font-family: var(--vn-font-display); font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.vn:not([data-section="admin"]) .vc__qv-t span { font-size: 12px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc__qv-rows { display: flex; flex-direction: column; gap: 6px; }
html.vn:not([data-section="admin"]) .vc__qv-row { display: grid; grid-template-columns: 54px 1fr 50px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc__qv-track { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
html.vn:not([data-section="admin"]) .vc__qv-track i { display: block; height: 100%; border-radius: 6px; background: var(--vn-grad-brand); }
html.vn:not([data-section="admin"]) .vc__qv-row b { font-family: var(--vn-font-mono); font-size: 12.5px; text-align: right; color: var(--vn-text); }
html.vn:not([data-section="admin"]) .vc__qv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html.vn:not([data-section="admin"]) .vc__qv-facts div { padding: 7px 9px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
html.vn:not([data-section="admin"]) .vc__qv-facts span { display: block; font-size: 11px; color: var(--vn-muted-2); text-transform: uppercase; letter-spacing: .06em; }
html.vn:not([data-section="admin"]) .vc__qv-facts b { font-size: 12.5px; }
html.vn:not([data-section="admin"]) .vc__qv-cta {
  display: block; text-align: center; height: 38px; line-height: 38px; border-radius: var(--vn-radius-pill);
  background: var(--vn-grad-brand); color: var(--vn-ink); font-weight: 800; font-size: 13px;
}

/* ─── Збережені пошуки ───────────────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .vc-save-row { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.vn:not([data-section="admin"]) .vc-saved-label { font-size: 13px; color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .vc-saved-list { display: flex; flex-wrap: wrap; gap: 6px; }
html.vn:not([data-section="admin"]) .vc-saved {
  display: inline-flex; align-items: center; border-radius: var(--vn-radius-pill); overflow: hidden;
  border: 1px solid rgba(46, 230, 214, .35); background: rgba(46, 230, 214, .1);
}
html.vn:not([data-section="admin"]) .vc-saved a {
  height: 32px; padding: 0 10px 0 12px; display: inline-flex; align-items: center; color: var(--vn-text);
  font-weight: 700; font-size: 12.5px; text-decoration: none;
}
html.vn:not([data-section="admin"]) .vc-saved button {
  height: 32px; width: 28px; border: 0; background: none; color: var(--vn-muted); font-size: 14px; cursor: pointer;
}

/* ─── Каталог предметів: .ic (views/_item_tile.erb, етап 3c) ────────────────
   Та сама логіка швидкого перегляду, що в .vc (public/js/catalog-vn.js) — .ic__qv/.ic__eye лише
   позиціювання, вміст (.vc__qv-*) спільний з транспортом. */
html.vn:not([data-section="admin"]) .ic__art--rarity { box-shadow: inset 0 0 0 2px var(--cc); }
html.vn:not([data-section="admin"]) .ic { position: relative; }
html.vn:not([data-section="admin"]) .ic__eye {
  position: absolute; left: 6px; bottom: 6px; z-index: 2; width: 26px; height: 26px; border-radius: 7px; border: 0;
  background: rgba(11, 10, 18, .72); color: var(--vn-text); display: grid; place-items: center; padding: 0;
}
html.vn:not([data-section="admin"]) .ic__eye svg { width: 14px; height: 14px; }
html.vn:not([data-section="admin"]) .ic__qv {
  position: absolute; left: 6px; right: 6px; top: 6px; z-index: 3; display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 16px; background: rgba(17, 13, 27, .97); border: 1px solid rgba(255, 79, 163, .4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); animation: bIn .18s var(--vn-ease) both;
  font-family: var(--vn-font-body), sans-serif; color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .ic__qv[hidden] { display: none; }

html.vn:not([data-section="admin"]) .ic__a {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--vn-radius-card);
  color: var(--vn-text); transition: transform .3s var(--vn-ease), border-color .3s, box-shadow .3s;
}
html.vn:not([data-section="admin"]) .ic__a:hover { border-color: rgba(255, 79, 163, .5); transform: translateY(-4px); box-shadow: 0 20px 50px rgba(255, 79, 163, .16); }
@media (hover: none) { html.vn:not([data-section="admin"]) .ic__a:hover { transform: none; } }
html.vn:not([data-section="admin"]) .ic__art { background: var(--vn-surface-2); color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .ic__lock, html.vn:not([data-section="admin"]) .ic__lv { background: rgba(11, 10, 18, .75); color: var(--vn-text); border-radius: 7px; }
html.vn:not([data-section="admin"]) .ic__lv { color: var(--vn-orange); font-family: var(--vn-font-mono); }
html.vn:not([data-section="admin"]) .ic__coll { background: rgba(11, 10, 18, .75); color: var(--cc, var(--vn-muted)); font-family: var(--vn-font-mono); border-radius: 6px; }
html.vn:not([data-section="admin"]) .ic__b b { font-family: var(--vn-font-body); font-weight: 700; }
html.vn:not([data-section="admin"]) .ic__fav { color: var(--vn-muted); }
html.vn:not([data-section="admin"]) .ic__fav:hover { color: var(--vn-text); background: rgba(255, 255, 255, .06); }
html.vn:not([data-section="admin"]) .ic__fav[aria-pressed="true"] { color: var(--vn-yellow); }

/* ─── Банер колекції (items.erb) ─────────────────────────────────────────── */
html.vn:not([data-section="admin"]) .fc-banner {
  border-radius: var(--vn-radius-field); background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .08); color: var(--vn-text);
}
html.vn:not([data-section="admin"]) .fc-banner__sw { background: var(--cc, var(--vn-pink)); color: var(--vn-ink); border-radius: 8px; font-family: var(--vn-font-display); font-weight: 900; }