/* Pixelify Sans BILSHE NE VANTAZHYMO: simya perevyznachena na DotGothic16 - dyv. blok ALIAS v kinci failu (CEO 2026-08-25). Bulo: @import googleapis Pixelify+Sans */
/* ============================================================
   VD прайс-интерфейс разделов «за прикладом Канцелярії»
   (редизайн 2026-08-20, итерация 2: фоновое видео + окна)
   Палитра образца /kanceliaria: тёмный #1e1d2d, оранж #e8a33d,
   белые окна с тёмной шапкой и зелёной точкой.
   ============================================================ */

:root {
  --vd-dark: #1e1d2d;
  --vd-ink: #23222f;
  --vd-gray: #6d6c7a;
  --vd-line: #e3e3ea;
  --vd-orange: #e8a33d;
  --vd-orange-dark: #d18f27;
  --vd-orange-soft: #fdf3e3;
  --vd-green: #4caf50;
}

/* ---------- ФОНОВОЕ ВИДЕО ---------- */

.vd-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--vd-dark);
  /* фон «природа» — виден на мобильных (видео там не грузится),
     на десктопе перекрыт видео. Градиент — запасной, если фото не загрузилось. */
  background-color: #6f9c5a;
  background-image:
    url(/img/vd-bg-mobile.jpg),
    linear-gradient(to bottom, #5b86a5 0%, #7ba3b8 42%, #9ec99e 68%, #6f9c5a 100%);
  background-size: cover;
  background-position: center;
}
.vd-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh;
  min-width: 100%;
  height: 100vh;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  border: 0;
}
.vd-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 29, 45, .55);
}

.vd-over-video {
  position: relative;
  z-index: 1;
}

.vd-video-page {
  background: transparent !important;
  padding-bottom: 40px;
}

.vd-video-page h1 {
  color: #fff;
  font-size: 30px;
  letter-spacing: .3px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.vd-video-page .breadcrumbs,
.vd-video-page .breadcrumbs a,
.vd-video-page .breadcrumbs span {
  color: rgba(255, 255, 255, .85) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* ---------- ОКНА ---------- */

.vd-window {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
  overflow: hidden;
  margin-bottom: 24px;
}
.vd-window-head {
  background: var(--vd-dark);
  color: #fff;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: bold;
}
.vd-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vd-green);
  margin-right: 8px;
}
.vd-window-body {
  padding: 18px;
}
/* окно запроса не режет выпадающие списки производителей и подсказки */
.vd-window-query {
  overflow: visible;
  z-index: 20;
}
.vd-window-query .vd-window-head {
  border-radius: 12px 12px 0 0;
}
.vd-window-results {
  z-index: 10;
}
.vd-window-results .info-table-cont {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* ---------- ОКНО ЗАПРОСА ---------- */

/* мобильный триггер подраздела из старой вёрстки — не нужен в окне */
.vd-video-page .left-menu-droptrigger {
  display: none !important;
}

/* серые обёртки старого виджета фильтра — обнуляем, окно само даёт фон */
.vd-video-page .printer-search,
.vd-video-page .printer-search-in {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.vd-video-page .search-areas {
  background: transparent !important;
  border: none !important;
  box-shadow: none;
  padding: 0 !important;
  margin: 0;
}

.vd-video-page .search-areas .flex {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* селекты formstyler */
.vd-video-page .search-areas .jq-selectbox__select {
  height: 46px !important;
  line-height: 44px !important;
  border: 1px solid #d3d3dd !important;
  border-radius: 9px !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0 40px 0 14px !important;
  font-size: 15px;
  color: var(--vd-ink);
}
.vd-video-page .search-areas .jq-selectbox__select:hover {
  border-color: var(--vd-orange) !important;
}
.vd-video-page .search-areas .jq-selectbox__trigger {
  border-left: none !important;
}
.vd-video-page .search-areas .jq-selectbox__trigger-arrow {
  border-top-color: var(--vd-orange) !important;
}
.vd-video-page .search-areas .jq-selectbox__dropdown {
  border-radius: 9px !important;
  border: 1px solid var(--vd-line) !important;
  box-shadow: 0 10px 28px rgba(30, 29, 45, .2) !important;
  overflow: hidden;
}
.vd-video-page .search-areas .jq-selectbox__dropdown li:hover,
.vd-video-page .search-areas .jq-selectbox__dropdown li.selected {
  background: var(--vd-orange-soft) !important;
  color: #b97a17 !important;
}

/* строка поиска + подсказки */
.vd-video-page .vd-search-wrap {
  position: relative;
  flex: 1 1 280px;
}
.vd-video-page .search-areas input.search {
  width: 100%;
  height: 46px !important;
  border: 1px solid #d3d3dd !important;
  border-radius: 9px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  color: var(--vd-ink);
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s;
}
.vd-video-page .search-areas input.search:focus {
  outline: none;
  border-color: var(--vd-orange) !important;
  box-shadow: 0 0 0 3px rgba(232, 163, 61, .25);
}
.vd-video-page .search-areas input.search::placeholder {
  color: #9c9ba8;
}

.vd-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--vd-line);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(30, 29, 45, .35);
  max-height: 380px;
  overflow-y: auto;
  padding: 6px 0;
}
.vd-sg-title {
  padding: 8px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--vd-gray);
}
.vd-sg-item {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--vd-ink);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-sg-item:hover {
  background: var(--vd-orange-soft);
  color: #b97a17;
}

/* кнопка Пошук */
.vd-video-page .search-areas .search-but {
  height: 46px !important;
  min-width: 120px;
  border: none !important;
  border-radius: 9px !important;
  background: var(--vd-orange) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background .15s;
}
.vd-video-page .search-areas .search-but:hover {
  background: var(--vd-orange-dark) !important;
}

/* чекбокс наличия */
.vd-video-page .search-areas .check {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--vd-line);
}
.vd-video-page .search-areas .check label {
  color: var(--vd-gray);
  font-size: 14px;
}

/* ---------- ОКНО ВЫДАЧИ: БЛОКОВАЯ СЕТКА КАРТОЧЕК ---------- */

/* колоночная шапка таблицы в блоковом виде не нужна */
.vd-video-page #vd-results-head,
.vd-video-page .info-table {
  display: none !important;
}

/* сетка карточек */
.vd-video-page .tabl-body-wrap {
  overflow: visible;
}
.vd-video-page .tabl-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 16px;
}
.vd-video-page .tabl-body #ajax-before { display: none; }

/* карточка товара */
.vd-video-page .one-tr {
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--vd-line);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .15s, transform .1s, border-color .15s;
}
.vd-video-page .one-tr:hover {
  box-shadow: 0 8px 24px rgba(30, 29, 45, .14);
  border-color: #d7d7e0;
  transform: translateY(-2px);
}

/* верх карточки: картинка / заглушка */
.vd-card-media {
  position: relative;
  display: block;
  height: 130px;
  background: #f4f4f8;
  overflow: hidden;
}
.vd-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.vd-card-noimg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, #e7e7ee 0 38%, transparent 39%),
    linear-gradient(135deg, #eef0f4, #e3e4ec);
}
.vd-card-noimg::after {
  content: "🖨";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  opacity: .5;
}
.vd-card-brand {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(30, 29, 45, .72);
  border-radius: 5px;
  padding: 2px 7px;
}

/* тело карточки */
.vd-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 14px;
  flex: 1 1 auto;
}
.vd-card-title.show-product {
  color: var(--vd-ink) !important;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .12s;
}
.vd-card-title.show-product:hover {
  color: var(--vd-orange-dark) !important;
}

.vd-card-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.vd-card-partnum {
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--vd-gray);
  background: #f4f4f8;
  border: 1px solid var(--vd-line);
  border-radius: 6px;
  padding: 2px 7px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vd-card-av {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.vd-card-av.available { background: var(--vd-green); box-shadow: 0 0 0 3px rgba(76,175,80,.18); }
.vd-card-av.call-img { background: #c9ccd6; box-shadow: 0 0 0 3px rgba(201,204,214,.25); }

/* низ карточки: цена + покупка */
.vd-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px dashed var(--vd-line);
  padding-top: 10px;
}
.vd-card-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--vd-ink);
  white-space: nowrap;
}
.vd-card-price span {
  font-size: 11px;
  font-weight: 400;
  color: var(--vd-gray);
}
.vd-card-noprice {
  font-size: 12px;
  font-weight: 500;
  color: var(--vd-gray);
}
.vd-card-buy {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vd-card-buy input,
.vd-card-buy .jq-number {
  width: 46px !important;
}
.vd-card-buy input {
  height: 34px !important;
  border: 1px solid #d3d3dd !important;
  border-radius: 7px !important;
  text-align: center;
  font-size: 14px;
  color: var(--vd-ink);
}
.vd-card-buy .add-to-bask {
  display: inline-block;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background-color: var(--vd-orange) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 2px 8px rgba(209, 143, 39, .4);
  transition: background-color .15s, transform .1s;
  flex: 0 0 auto;
}
.vd-card-buy .add-to-bask:hover {
  background-color: var(--vd-orange-dark) !important;
  transform: scale(1.06);
}
.vd-card-buy .add-to-bask.green-btn {
  background-color: var(--vd-green) !important;
  box-shadow: 0 2px 8px rgba(46, 125, 84, .35);
}

@media (max-width: 480px) {
  .vd-video-page .tabl-body {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .vd-card-media { height: 96px; }
  .vd-card-body { padding: 10px; }
}

/* Показати ще */
.vd-video-page .show-more-container {
  padding: 14px 16px 18px;
  text-align: center;
}
.vd-video-page .show-more-btn {
  width: 100%;
  max-width: 420px;
  height: 46px;
  border: 1.5px solid var(--vd-orange) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #b97a17 !important;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vd-video-page .show-more-btn:hover {
  background: var(--vd-orange) !important;
}
.vd-video-page .show-more-btn:hover .infoinbtn {
  color: #fff !important;
}
.vd-video-page .show-more-btn .infoinbtn {
  color: inherit !important;
}

/* пагинация */
.vd-video-page .vd-pagination {
  margin: 6px 0 0;
}
.vd-video-page .vd-pagination li a,
.vd-video-page .vd-pagination li span {
  background: rgba(255, 255, 255, .92);
  border: none;
  border-radius: 7px;
  color: var(--vd-ink);
  margin: 0 3px;
}
.vd-video-page .vd-pagination li.active a,
.vd-video-page .vd-pagination li.active span {
  background: var(--vd-orange);
  color: #fff;
}

/* контент-окна */
.vd-window-content .vd-window-body {
  color: var(--vd-ink);
}

/* пусто */
.vd-video-page .no-results {
  color: var(--vd-gray);
  font-size: 15px;
  text-align: center;
}

/* стартовая заглушка окна выдачи */
.vd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 20px;
  text-align: center;
}
.vd-empty-icon {
  font-size: 34px;
  opacity: .8;
}
.vd-empty-text {
  color: var(--vd-gray);
  font-size: 16px;
}

/* фильтры-чипы групп найденных товаров (кадр 2 схемы CEO) */
.vd-groups-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 4px;
  background: #fff;
}
.vd-groups-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--vd-gray);
  padding-top: 4px;
}
.vd-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
}
.vd-chip {
  display: inline-block;
  border: 1px solid var(--vd-orange);
  background: #fff;
  color: #b97a17;
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, color .12s;
  user-select: none;
}
.vd-chip b {
  font-weight: 700;
  opacity: .75;
}
.vd-chip:hover {
  background: var(--vd-orange-soft);
}
.vd-chip.active {
  background: var(--vd-orange);
  color: #fff;
}

/* мобильные */
@media (max-width: 991px) {
  .vd-window-body {
    padding: 14px;
  }
  .vd-video-page .search-areas .flex {
    gap: 10px;
  }
  .vd-video-page .vd-search-wrap {
    flex: 1 1 100%;
  }
}

/* ============================================================
   ГЛАВНАЯ — 4 вертикальные крутилки в 8-битном стиле (CEO 2026-08-20)
   (шрифт Pixelify Sans подключён @import в начале файла)
   ============================================================ */

.vd-home8 {
  --px-dark: #1a1030;
  --px-c1: #d13b27;  /* картриджі — красный */
  --px-c2: #2f8ecb;  /* витратні — синий */
  --px-c3: #e8a33d;  /* сервіс — оранж */
  --px-c4: #3fae6b;  /* канц — зелёный */
  background: var(--px-dark);
  padding: 0;
  image-rendering: pixelated;
}
.vd-home8-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: #0d0820;
  min-height: 560px;
}
.vd-hcol {
  display: flex;
  flex-direction: column;
  background: var(--px-dark);
  position: relative;
  overflow: hidden;
}
.vd-hcol.c1 { --c: var(--px-c1); }
.vd-hcol.c2 { --c: var(--px-c2); }
.vd-hcol.c3 { --c: var(--px-c3); }
.vd-hcol.c4 { --c: var(--px-c4); }

/* крутилка (вертикальная) */
.vd-hcol-slider {
  flex: 1 1 auto;
  min-height: 0;
}
.vd-hcol-slider .slick-list,
.vd-hcol-slider .slick-track { height: 100%; }
.vd-hslide { height: 100%; }
.vd-hslide-in {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 460px;
  text-decoration: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 4px, transparent 4px 8px),
    linear-gradient(160deg, var(--c), color-mix(in srgb, var(--c) 60%, #000));
  border-bottom: 6px solid rgba(0,0,0,.35);
  transition: filter .15s;
}
.vd-hslide-in:hover { filter: brightness(1.12); }
.vd-hslide-icon {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(0,0,0,.4));
}
.vd-hslide-badge {
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(0,0,0,.4);
  padding: 6px 16px;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.4),
    6px 6px 0 rgba(0,0,0,.35);
  text-shadow: 3px 3px 0 rgba(0,0,0,.5);
}

/* кнопка-вход раздела внизу колонки */
.vd-hcol-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 10px;
  background: var(--px-dark);
  border-top: 4px solid var(--c);
  text-decoration: none;
  transition: background .15s;
}
.vd-hcol-btn:hover { background: #241640; }
.vd-hcol-title {
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .5px;
  color: #fff;
  text-align: center;
  text-shadow: 3px 3px 0 var(--c);
}

/* планшет / телефон */
@media (max-width: 900px) {
  .vd-home8-cols { grid-template-columns: repeat(2, 1fr); min-height: auto; }
  .vd-hslide-in { height: 300px; gap: 14px; }
  .vd-hslide-icon { width: 64px; height: 64px; }
  .vd-hslide-badge { font-size: 20px; }
  .vd-hcol-title { font-size: 16px; }
}
@media (max-width: 480px) {
  .vd-home8-cols { grid-template-columns: 1fr; }
  .vd-hslide-in { height: 220px; }
}

/* ============================================================
   Окремі вікна «Пошук» і «Фільтри» у розділах (ескіз CEO 20.08):
   не ріжемо випадашки/підказки, шаруємо вікна по z-index
   ============================================================ */
.vd-window-search-only,
.vd-window-filters {
  overflow: visible;
}
.vd-window-search-only { z-index: 30; }
.vd-window-filters { z-index: 20; }
.vd-window-search-only .vd-window-head,
.vd-window-filters .vd-window-head {
  border-radius: 12px 12px 0 0;
}

/* ============================================================
   Верхня панель: флюїдне масштабування v2 (CEO 2026-08-20)
   Урок v1: .logo-cont стоїть absolute left:-118px від центрованого
   .cont — тому контейнер розширюємо із запасом 300px під логотип,
   НЕ чіпаючи його позиціонування. Тільки десктоп ≥1200px.
   ============================================================ */
@media (min-width: 1200px) {
  .main-header .top-bar nav .menu a {
    font-size: clamp(15px, 0.95vw, 20px);
  }
  .main-header .btn-write-us {
    font-size: clamp(16px, 1vw, 21px);
  }
  .main-header .tel-nums a,
  .main-header .mob-phone-call {
    font-size: clamp(15px, 1vw, 20px);
  }
  .main-header .pers-wrap .personal {
    font-size: clamp(14px, 0.95vw, 19px);
  }
  #short_cart .meter {
    font-size: clamp(14px, 0.9vw, 18px);
  }
  .main-header .desc a {
    font-size: clamp(14px, 0.95vw, 20px);
  }
}

/* форма обгортає обидва вікна — її сірий фон з теми вилазив у зазорі */
.vd-video-page #find_by_cartridge {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Шапка v4 (CEO 2026-08-20 ніч): меню «Партнерам/Про компанію/
   Контакти» і розділи каталогу — від ЛІВОГО краю вікна,
   логотип — завжди ПО ЦЕНТРУ, Вхід/Кошик — праворуч. ≥768px.
   ============================================================ */
@media (min-width: 768px) {
  .main-header .cont {
    width: 100%;
    max-width: none;
    padding-left: clamp(18px, 2vw, 48px);
    padding-right: clamp(18px, 2vw, 48px);
    box-sizing: border-box;
  }
  .main-header .logo-cont {
    left: 50%;
    transform: translateX(-50%);
  }
  /* Вхід/суми/Кошик — до правого краю (порожнє місце лишилось від телефону) */
  .main-header .right-info {
    justify-content: flex-end;
  }
  /* дві кнопки поруч: Вхід + Реєстрація */
  .main-header .pers-wrap { gap: 10px; }
}

/* десктоп: фон розділів — японський будинок, фото CEO DSCF5966 (2026-08-20);
   мобільний (<768px) лишається з качками */
@media (min-width: 768px) {
  .vd-video-wrap {
    background-image:
      url(/img/vd-bg-desktop.jpg),
      linear-gradient(to bottom, #5b86a5 0%, #7ba3b8 42%, #9ec99e 68%, #6f9c5a 100%);
  }
}

/* фікс бага: контейнери старого слайдера мали фіксовану висоту 518px —
   під 8-бітним банером (430px) лишалась сіра смуга. Висоти — по вмісту.
   ТІЛЬКИ перша секція (банер+плитки)! Нижні .one-screen (стрічки «Зробити
   замовлення», лічильники) тримаються на фіксованих висотах — не чіпати. */
.home-page .one-screen:first-child { height: auto !important; min-height: 0 !important; }
.home-page .slider-cont,
.home-page .slider-cont .home-cont { height: auto !important; min-height: 0 !important; }

/* ============================================================
   ВИДАЧА СПИСКОМ (CEO 2026-08-21): картки → горизонтальні рядки
   (мініатюра | назва | партномер+наявність | ціна+кошик).
   На мобільному (<641px) лишаються картки.
   ============================================================ */
@media (min-width: 641px) {
  .vd-video-page .tabl-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
  }
  .vd-video-page .one-tr {
    flex-direction: row !important;
    align-items: stretch;
  }
  .vd-video-page .one-tr:hover {
    transform: none;
  }
  .vd-video-page .vd-card-media {
    width: 96px;
    height: auto;
    min-height: 72px;
    flex: 0 0 96px;
  }
  .vd-video-page .vd-card-body {
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    flex: 1 1 auto;
  }
  .vd-video-page .vd-card-title.show-product {
    flex: 1 1 auto;
    -webkit-line-clamp: 2;
  }
  .vd-video-page .vd-card-tags {
    margin-top: 0;
    flex: 0 0 auto;
    max-width: 240px;
  }
  .vd-video-page .vd-card-foot {
    border-top: none;
    padding-top: 0;
    margin-left: auto;
    flex: 0 0 auto;
  }
}

/* мобільна шапка: лого по центру (CEO 2026-08-21) */
@media (max-width: 767px) {
  .main-header .logo-cont {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ============================================================
   МОБІЛЬНА ВИДАЧА СПИСКОМ (CEO 2026-08-21): рядки і на телефоні
   ============================================================ */
@media (max-width: 640px) {
  .vd-video-page .tabl-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }
  .vd-video-page .one-tr {
    flex-direction: row !important;
    align-items: stretch;
  }
  .vd-video-page .one-tr:hover { transform: none; }
  .vd-video-page .vd-card-media {
    width: 64px;
    height: auto;
    min-height: 64px;
    flex: 0 0 64px;
  }
  .vd-video-page .vd-card-media img { padding: 4px; }
  .vd-video-page .vd-card-brand { font-size: 8.5px; padding: 1px 4px; top: 4px; left: 4px; }
  .vd-video-page .vd-card-body {
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px 10px;
  }
  .vd-video-page .vd-card-title.show-product { -webkit-line-clamp: 2; font-size: 12.5px; }
  .vd-video-page .vd-card-tags { margin-top: 0; }
  .vd-video-page .vd-card-foot {
    border-top: none;
    padding-top: 0;
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

/* ============================================================
   КАРТКА ТОВАРУ (CEO 2026-08-21): хрестик з попап-розмітки
   не потрібен на повній сторінці; мобільні CTA — на всю ширину
   ============================================================ */
.product-content .fancybox-close-small,
.product-content .btn-windowclose { display: none !important; }
@media (max-width: 640px) {
  .product-content .buy-one-click { width: 100%; box-sizing: border-box; }
  .product-content .buy-one-click-button-block button,
  .product-content .buy-one-click-button-block a { width: 100%; box-sizing: border-box; }
}

/* лого: емблема по центру свого контейнера (CEO 2026-08-21 —
   контейнер центрувався, а картинка 45–63px липла до його лівого краю) */
.main-header .logo-cont { text-align: center; }
.main-header .logo { margin-left: auto !important; margin-right: auto !important; }

/* ============================================================
   8-БІТ ФАКТУРА ПО САЙТУ (CEO 2026-08-21): смужки з банерів —
   на тёмных плашках вікон, плитках головної, фактах «Чому ми»
   ============================================================ */
.vd-window-head,
.tiles-cont .tiles-wrap > a,
.w8-fact,
.w8-card-head,
.m8-block-head,
.kanc-chat-head,
.cb-chat .cb-messages ~ .cb-quick { background-image: none; }
.vd-window-head,
.w8-card-head,
.kanc-chat-head {
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 4px, transparent 4px 8px);
}
.tiles-cont .tiles-wrap > a,
.w8-fact {
    background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 4px, transparent 4px 8px);
}

/* мобільна шапка: Вхід/Реєстрація охайно праворуч (CEO 2026-08-21 «пливуть») */
@media (max-width: 767px) {
  .main-header .top-bar { height: auto; min-height: 64px; }
  .main-header .top-bar .cont {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 64px;
    padding: 6px 12px;
    box-sizing: border-box;
  }
  .main-header .top-bar .right-info {
    flex: 1 1 100%;
    justify-content: space-between; /* кнопки зліва, Меню справа, лого в центрі вільний */
    align-items: center;
  }
  .main-header .pers-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0;
    width: auto;
  }
  .main-header .pers-wrap .personal {
    display: block;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* ============================================================
   Шапка v4.1 (CEO 2026-08-21 «поплив хедер на головній»)
   1) Вхід/Реєстрація стояли СТОВПЧИКОМ на десктопі: старий
      main.min.css (2021) задає header .top-bar .pers-wrap
      { flex-direction: column } — тоді там була одна кнопка.
      Перебиваємо специфічністю: на ≥768px — В РЯД.
   2) «Пропали розділи»: брейкпоінт 2022 ховає ОБИДВА меню шапки
      у гамбургер уже при <1400px. Після v4 (телефони/пошук
      прибрано) на ноутбуках 1025–1400px шапка лишалась майже
      порожньою. Показуємо меню, ховаємо гамбургер.
      <1025px не чіпаємо: меню не влазить поруч із центрованим
      лого — там лишається «Меню».
   ============================================================ */
@media (min-width: 768px) {
  .main-header .top-bar .pers-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}
@media (min-width: 1025px) and (max-width: 1400px) {
  .main-header .top-bar nav .menu,
  .main-header .bottom-bar nav .menu {
    display: flex;
  }
  #mob-menu-but { display: none; }
}

/* ============================================================
   Модалка «Реєстрація» у 8-біт стилі (CEO 2026-08-21
   «зроби вікно реєстрації прикольне як контакти і вхід»).
   Розмітка: modules/user/widgets/views/register.php (.vd-reg-*).
   Бірюза #6fa7a9 — і в палітрі контактів (c8), і колір стрічки
   «Авторизація» у вікні входу. Фактура смуг — як .vd-window-head.
   ============================================================ */
#sign-up.std-modal {
  width: 460px;
  max-width: 92vw;
  border: none;
  padding: 0;
  min-height: 0;
  background: #fff;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .35);
}
.vd-reg-head {
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  font-size: 19px;
  letter-spacing: 1px;
  color: #fff;
  background-color: #6fa7a9;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 4px, transparent 4px 8px);
  padding: 12px 52px 12px 18px; /* справа місце під хрестик fancybox */
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .4);
}
.vd-reg-ico { margin-right: 8px; }
.vd-reg-body { padding: 18px; }
.vd-reg-body .form-group { margin-bottom: 10px; }
.vd-reg-body input[type=text],
.vd-reg-body input[type=email],
.vd-reg-body input[type=tel],
.vd-reg-body input[type=password] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #2c2a32;
  border-radius: 0;
  padding: 10px 12px;
  font-size: 14px;
  height: auto;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .15);
}
.vd-reg-body input:focus {
  outline: none;
  border-color: #6fa7a9;
}
.vd-reg-phone {
  display: flex;
  gap: 10px;
}
.vd-reg-phone .field-registerform-phone_code { flex: 0 0 92px; }
.vd-reg-phone .field-register-phone { flex: 1 1 auto; }
/* помилки валідації */
.vd-reg-body .help-block {
  color: #d13b27;
  font-size: 12px;
  margin: 4px 0 0;
}
.vd-reg-body .has-error input,
.vd-reg-body .is-error input {
  border-color: #d13b27;
}
.vd-reg-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.vd-reg-auth {
  color: #6fa7a9;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vd-reg-auth:hover { text-decoration: none; }
.vd-reg-btn {
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  background: #6fa7a9;
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 12px 26px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
}
.vd-reg-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
}
/* хрестик fancybox — білий, поверх бірюзової плашки */
#sign-up .fancybox-close-small,
#sign-up .btn-windowclose {
  color: #fff;
  top: 6px;
  right: 6px;
}
@media (max-width: 480px) {
  .vd-reg-phone { flex-wrap: nowrap; }
  .vd-reg-foot { flex-direction: column-reverse; gap: 12px; align-items: stretch; }
  .vd-reg-btn { width: 100%; }
  .vd-reg-auth { text-align: center; }
}

/* ============================================================
   МОБІЛЬНА ВИДАЧА «ПОПЛИЛА» + ШРИФТИ (CEO 2026-08-21)
   1) Фікс флекс-переповнення карток: довгі назви типу
      «...p1100ser/1101/1102/...» — один нерозривний токен; без
      min-width:0 флекс-дитина не стискається і випирає за край
      картки (степер/кошик різались справа).
   2) Мобільні шрифти — МАКСИМУМ 3:
      Roboto (весь текст) + Pixelify Sans (плашки/акценти)
      + SF Mono (артикули). PFDin/Myriad/Arial на мобільному
      більше не використовуються. FontAwesome — іконки, не текст.
   ============================================================ */

/* --- фікс переповнення (усі ширини — та сама флекс-модель) --- */
.vd-video-page .one-tr { overflow: hidden; }
.vd-video-page .vd-card-body { min-width: 0; }
.vd-video-page .vd-card-title.show-product {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vd-video-page .vd-card-tags { min-width: 0; }

/* --- плашки вікон — піксельний акцент (як банери головної) --- */
.vd-window-head,
.kanc-chat-head,
.w8-card-head,
.m8-block-head {
  font-family: 'Pixelify Sans', 'Courier New', monospace;
  font-weight: 400;
  letter-spacing: .5px;
}

@media (max-width: 767px) {
  /* --- шрифт 1: Roboto — весь текст --- */
  body { font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; }
  input, select, textarea, button,
  .personal, .logout, .std-but, .search-but, .rights,
  .jq-selectbox__select-text, .jq-selectbox li,
  .jq-number__field, .sticker, .title {
    font-family: Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  }
  /* --- шрифт 2: Pixelify — заголовок розділу --- */
  .vd-video-page h1 {
    font-family: 'Pixelify Sans', 'Courier New', monospace;
    font-weight: 400;
    letter-spacing: 1px;
  }
  /* --- шрифт 3: SF Mono вже стоїть на .vd-card-partnum --- */

  /* --- читабельність карток товару --- */
  .vd-video-page .vd-card-title.show-product {
    font-size: 13.5px;
    line-height: 1.4;
  }
  .vd-video-page .vd-card-partnum { font-size: 12px; }
  .vd-video-page .vd-card-price { font-size: 18px; }
  .vd-video-page .vd-card-price span { font-size: 12px; }
  .vd-video-page .vd-card-av { width: 12px; height: 12px; }
  .vd-video-page .vd-card-av.available { box-shadow: 0 0 0 2px rgba(76, 175, 80, .18); }
  .vd-video-page .vd-card-av.call-img { box-shadow: 0 0 0 2px rgba(201, 204, 214, .25); }
  /* низ картки: ціна + степер + кошик — переносяться, не ріжуться */
  .vd-video-page .vd-card-foot {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .vd-video-page .vd-card-buy { margin-left: auto; flex-shrink: 0; }
  .vd-video-page .jq-number__field { font-size: 15px; }
}

/* плаваюча кнопка дзвінка на мобільному: менша і нижче в кутку,
   щоб не лягала на поле пошуку (CEO 2026-08-21) */
@media (max-width: 767px) {
  .mob-callmeebox {
    bottom: 12px;
    left: 10px;
  }
  .mob-calmee {
    width: 46px;
    height: 46px;
    font-size: 20px;
  }
}

/* ============================================================
   МОБІЛЬНИЙ ЛЕНДИНГ (CEO 2026-08-22): вирівняти шапку + «ТОП ОБМІНІВ»
   1) Шапка: Вхід/Реєстрація були різної ширини (align-items:
      flex-start у стовпчику) — тепер однакові (stretch);
      емблема 45px стояла на 4px від верху — центр висоти 64px
      вимагає 9px; іконка «Меню» сплющувалась (бокс 32px при
      контенті ~50px) — бокс auto, іконці явна висота.
   2) «ТОП ОБМІНІВ» (.m8-pin, стилі inline у mobile.php):
      у .m8-pin-name дефолтний min-width:auto — довгий токен
      назви («…p1100ser/1101/…») розпирає флекс-рядок і бейдж
      ціни їде за екран (звіт: name 615px при екрані 375).
      Тут ТІЛЬКИ нові властивості — конфлікту з inline немає.
   ============================================================ */
@media (max-width: 767px) {
  .main-header .pers-wrap { align-items: stretch; }
  header .logo-cont .logo { margin-top: 9px !important; }
  #mob-menu-but { height: auto; }
  #mob-menu-but .img-cont { height: 20px; }
}
.m8-pin { overflow: hidden; }
.m8-pin-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.m8-pin-price {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ============================================================
   ПІКСЕЛЬНИЙ ШРИФТ → DotGothic16 (CEO 2026-08-25: «простіший
   8-бітний, читабельніший» — у Pixelify Sans цифра 5 схожа на S,
   9 на 3 тощо; порівнювали з Press Start 2P (заширокий),
   Handjet (нулі як вісімки), Tiny5 (заблідий).
   Трюк-АЛІАС: ці @font-face перевизначають сім'ю 'Pixelify Sans'
   (пізніші @font-face виграють при перетині unicode-range), тому
   ВЕСЬ піксельний текст сайту — плашки вікон каталогу, банери
   головної, контакти (c8-*), моб. лендінг (m8-*), модалка
   реєстрації — переходить на DotGothic16 БЕЗ правок inline-стилів
   у views. Файли самохостимо: ../fonts/dotgothic16-*.woff2
   (v21 з Google Fonts). Вага 100-900 одним файлом — без
   синтетичного жирного, пікселі лишаються чіткими.
   ВІДКАТ: видалити цей блок.
   ============================================================ */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/dotgothic16-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/dotgothic16-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/dotgothic16-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   ЦІЛЬНА КРУТИЛКА ГОЛОВНОЇ .vb2-* (CEO 2026-08-26)
   Один інфо-банер на всю ширину замість 4 колонок; зміна 4 с.
   Дизайн: handoff «Банери Вірний Друк» (Claude Design), вар. 2a:
   ілюстрація на все полотно + скрим; «Сервіс» — іконка сайту на
   бордовому колі. Розмітка: home/_home_banner8.php. Одиниця
   сітки --u = 1/1200 ширини екрана (артборд 1200×480).
   Старі .vd-hcol*-стилі не чіпаємо — розмітки більше немає.
   ============================================================ */
.vb2-slider {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1200/480;
  background: #1D1310;
}
.vb2-slide {
  --u: calc(100vw / 1200);
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #1D1310;
  text-decoration: none;
  opacity: 0;
  transition: opacity .7s ease;
}
.vb2-slide.on { opacity: 1; z-index: 2; }
.vb2-ill { position: absolute; top: 0; height: 100%; object-fit: cover; }
.vb2-flip { transform: scaleX(-1); }
.vb2-px { image-rendering: pixelated; }
.vb2-siteicon { width: 56%; height: 56%; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.vb2-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, #1D1310 0%, rgba(29,19,16,.96) 30%, rgba(29,19,16,.72) 50%, rgba(29,19,16,.18) 68%, rgba(29,19,16,0) 80%); }
.vb2-scrimtop { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29,19,16,.55) 0%, rgba(29,19,16,0) 30%); }
.vb2-lines {
  position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.30) 0 2px, rgba(255,255,255,.018) 2px, rgba(255,255,255,.03) 4px);
}
.vb2-edge { position: absolute; left: 0; top: 0; width: calc(var(--u)*14); height: 100%; background: #F2A94D; }
.vb2-brand { position: absolute; left: calc(var(--u)*72); top: calc(var(--u)*44); display: flex; gap: calc(var(--u)*14); align-items: center; }
.vb2-mark {
  display: flex; align-items: center; justify-content: center;
  width: calc(var(--u)*44); height: calc(var(--u)*44);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.22); background: rgba(0,0,0,.28);
}
.vb2-mark svg { width: 60%; height: auto; }
.vb2-word {
  color: #fff; font-family: 'PFDin TextCondPro Medium', 'Fira Sans Condensed', sans-serif;
  font-size: calc(var(--u)*21); letter-spacing: calc(var(--u)*2.5); line-height: 1.1;
}
.vb2-word i {
  display: block; font-style: normal; letter-spacing: .2px;
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: calc(var(--u)*12.5); color: rgba(255,255,255,.55); margin-top: calc(var(--u)*3);
}
.vb2-text {
  position: absolute; left: calc(var(--u)*72); top: calc(var(--u)*170); width: calc(var(--u)*620);
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u)*20);
}
.vb2-h {
  color: #fff; font-family: 'PFDin TextCondPro Medium', 'Fira Sans Condensed', sans-serif;
  font-weight: 500; font-size: calc(var(--u)*52); line-height: .98; letter-spacing: -.4px;
}
.vb2-sub {
  color: rgba(255,255,255,.8); font-family: 'Fira Sans Condensed', sans-serif;
  font-size: calc(var(--u)*19); line-height: 1.28; max-width: calc(var(--u)*520);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.vb2-chip {
  display: inline-flex; padding: calc(var(--u)*11) calc(var(--u)*17);
  font-family: 'Pixelify Sans', 'Courier New', monospace; font-weight: 600;
  font-size: calc(var(--u)*13.5); letter-spacing: .6px; text-transform: uppercase;
  white-space: nowrap; box-shadow: inset 0 -4px 0 rgba(0,0,0,.16);
}
.vb2-circle {
  position: absolute; right: calc(var(--u)*82); top: calc(var(--u)*90);
  width: calc(var(--u)*300); height: calc(var(--u)*300); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -14px 0 rgba(0,0,0,.12), 0 0 0 10px rgba(255,255,255,.04);
}
.vb2-ring {
  position: absolute; right: calc(var(--u)*-30); top: calc(var(--u)*22);
  width: calc(var(--u)*436); height: calc(var(--u)*436);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.06);
}
.vb2-dring {
  position: absolute; left: calc(var(--u)*520); top: calc(var(--u)*-70);
  width: calc(var(--u)*220); height: calc(var(--u)*220);
  border-radius: 50%; border: 2px dashed rgba(255,255,255,.07);
}
.vb2-dots { position: absolute; left: calc(100vw/1200*72); bottom: 6%; display: flex; gap: 9px; z-index: 3; }
.vb2-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.25); cursor: pointer; }
.vb2-dots i.on { background: #F2A94D; }
/* мобільний: сильніший скрим, текст донизу, більший відносний кегль */
@media (max-width: 640px) {
  .vb2-slider { aspect-ratio: auto; min-height: 430px; }
  .vb2-slide { --u: calc(100vw / 640); }
  .vb2-scrim { background: linear-gradient(90deg, #1D1310 0%, rgba(29,19,16,.9) 45%, rgba(29,19,16,.45) 75%, rgba(29,19,16,.2) 100%); }
  .vb2-text { top: auto; bottom: calc(var(--u)*54); width: calc(var(--u)*520); }
  .vb2-h { font-size: calc(var(--u)*44); }
  .vb2-sub { font-size: calc(var(--u)*20); }
  .vb2-chip { white-space: normal; line-height: 1.4; font-size: calc(var(--u)*15); }
  .vb2-circle { right: calc(var(--u)*40); top: calc(var(--u)*40); width: calc(var(--u)*200); height: calc(var(--u)*200); }
}

/* ============================================================
   КРУТИЛКА: вирівнювання по контейнеру плиток (CEO 2026-08-26:
   «масштабування попливло», «нижні розділи має бути видно»,
   «банер починається там, де чорна підкладка значків»).
   Слайдер тепер усередині .cont (як плитки): ширина 1200px на
   широких екранах (1024 при ≤1400 і т.д. — ті самі брейкпоінти,
   що в .cont з main.min.css), висота = --u*480. Одиниця сітки
   --u = contWidth/1200 — на екранах >1400 макет 1:1 (480px),
   банер не з'їдає екран, плитки видно. Перекриває vw-математику
   з первинного блоку .vb2-* вище.
   ============================================================ */
.vb2-slider {
  aspect-ratio: auto;
  height: calc(var(--u) * 480);
  --u: 1px;
}
.vb2-slider .vb2-slide { --u: 1px; }
@media (max-width: 1400px) {
  .vb2-slider { --u: calc(1024px / 1200); }
  .vb2-slider .vb2-slide { --u: calc(1024px / 1200); }
}
@media (max-width: 1024px) {
  .vb2-slider { --u: calc(768px / 1200); }
  .vb2-slider .vb2-slide { --u: calc(768px / 1200); }
}
@media (max-width: 840px) {
  .vb2-slider { --u: calc(750px / 1200); }
  .vb2-slider .vb2-slide { --u: calc(750px / 1200); }
}
.vb2-dots { left: calc(var(--u) * 72); }
/* мобільний (слайдер на моб. головній не рендериться — лендінг),
   але про запас: */
@media (max-width: 768px) {
  .vb2-slider { height: auto; min-height: 430px; }
  .vb2-slider .vb2-slide { --u: calc(90vw / 640); }
}





/* іконки плиток розділів: −20% (CEO «іконки стали більші ніж були» —
   поряд із новим банером виглядали громіздко) */
.tiles-cont .tiles-wrap .cart img { width: 100px; }
.tiles-cont .tiles-wrap .mat img { width: 74px; }
.tiles-cont .tiles-wrap .service img { width: 66px; }
.tiles-cont .tiles-wrap .stationery img { width: 64px; }
@media screen and (max-width: 1400px) {
  .tiles-cont .tiles-wrap .cart img { width: 60px; }
  .tiles-cont .tiles-wrap .mat img { width: 48px; }
  .tiles-cont .tiles-wrap .service img { width: 44px; }
  .tiles-cont .tiles-wrap .stationery img { width: 42px; }
}

/* ============================================================
   ПІДКЛАДКА КРУТИЛКИ .vb2-strip — фінальне правило
   (CEO 2026-08-26, історія підбору кольору схлопнута в один блок:
   тьмяний → жовтуватий → +40% білого → Pantone141 → повернення).
   Актуально: світлий теплий тан +40% білого, темні смужки.
   ============================================================ */
.vb2-strip {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.055) 0 4px, transparent 4px 8px),
    linear-gradient(180deg, #928773, #8b8171);
}

/* Картриджі та Витратні матеріали: фон без фото — темний смугастий
   як поверхні головної (CEO 2026-08-26). Перебиває фото-фолбеки
   .vd-video-wrap (десктоп/мобільний) з css вище. */
.vd-video-wrap.vd-bg-plain {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 4px, transparent 4px 8px),
    #2c2a32 !important;
}

/* ============================================================
   ГОЛОВНА НА ВСЮ ВИСОТУ ЕКРАНА (CEO 2026-08-28, доопрацьовано 29.08).
   Контент першого екрана був фіксований: банер .vb2-strip 480px +
   плитки .tiles-cont 210px = 690px, нижче до футера лишалася БІЛА
   СМУГА (правило .one-screen:first-child{height:auto!important} з
   чистки головної 21.08 вимкнуло старий calc). Рішення: перший екран
   знову тягнеться на висоту вьюпорта (флекс-колонка), росте БАНЕР —
   слайди absolute і мають height:100% каскадом, фонові зображення
   покривають усю площу. На екранах, нижчих за 690px контенту,
   нічого не стискаємо (min-height). Мобільну версію не чіпаємо.
   Перевірено живим прогоном у браузері 29.08.
   ============================================================ */
@media (min-width: 992px) {
  .home-page .one-screen:first-child,
  .home-page .one-screen {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 99px) !important;
    max-height: none !important;
    min-height: 690px !important;
  }
  .home-page .one-screen .vb2-strip {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 480px;
  }
  .home-page .one-screen .vb2-strip > .cont { height: 100% !important; }
  .home-page .one-screen .vb2-slider { height: 100% !important; }
  .home-page .one-screen .tiles-cont { flex: 0 0 auto; }
}

/* ============================================================
   КОНВЕРСІЙНИЙ БЛОК У ПІДВАЛІ СТАТТІ (CEO 2026-09-01).
   Статті тягнуть ~60% усієї органіки — тисячі візитів на місяць —
   і дають НУЛЬ заявок: людина читає інструкцію («як відсканувати
   документ», «як дізнатися пароль від принтера») і йде. Блок
   м'яко переводить читача-власника принтера в послугу: заправка
   або обмін картриджа з кур'єром по Києву, тобто веде на
   /catalog/zapravka-kartridja, де вже стоїть бот «Швидке
   замовлення» (саме через нього прийшли заявки №6-9).
   Не «купи-купи», а корисне продовження статті: питання —
   один рядок вигоди — факти — кнопка.
   Розмітка: frontend/modules/articles/views/article/_article_cta.php
   ВІДКАТ: видалити цей блок і рядок render('_article_cta') у article.php.
   ============================================================ */

.vd-cta {
  /* акцент виносимо в змінну: розділ можна перефарбувати одним
     класом-модифікатором на корені, не чіпаючи решту правил */
  --vd-cta-accent: var(--vd-orange, #e8a33d);
  --vd-cta-accent-dark: var(--vd-orange-dark, #d18f27);
  --vd-cta-accent-text: #b97a17;

  display: block;
  margin: 30px 0 0;
  padding: 22px 26px 24px;
  background: #fff;
  border: 1px solid var(--vd-line, #e3e3ea);
  border-left: 4px solid var(--vd-cta-accent);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(30, 29, 45, .09);
  /* .about-page .about-text ставить text-indent:20px і justify —
     блок лежить поруч, але страхуємось, щоб типографіка не «поїхала» */
  text-indent: 0;
  text-align: left;
}

/* надзаголовок із «живою» зеленою крапкою — підпис наших вікон */
.vd-cta .vd-cta-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--vd-gray, #6d6c7a);
}

.vd-cta .vd-cta-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vd-green, #4caf50);
  box-shadow: 0 0 0 3px rgba(76, 175, 80, .18);
}

/* питання. Навмисно <p>, а не <h2>: блок стоїть на ~228 сторінках,
   однаковий h2 на всіх — зайвий дубль у структурі заголовків */
.vd-cta .vd-cta-title {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--vd-ink, #23222f);
}

.vd-cta .vd-cta-text {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #3a3947;
}

/* факти-пігулки — той самий силует, що .vd-chip і .cb-quick button */
.vd-cta .vd-cta-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.vd-cta .vd-cta-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--vd-line, #e3e3ea);
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--vd-gray, #6d6c7a);
}

.vd-cta .vd-cta-fact svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--vd-cta-accent);
}

.vd-cta .vd-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

/* первинна кнопка — геометрія .vd-video-page .search-but */
.vd-cta .vd-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  background: var(--vd-cta-accent);
  color: #fff !important;
  border: 0;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.vd-cta .vd-cta-btn:hover,
.vd-cta .vd-cta-btn:focus {
  background: var(--vd-cta-accent-dark);
  color: #fff !important;
}

.vd-cta .vd-cta-btn:active { transform: translateY(1px); }

.vd-cta .vd-cta-btn svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* вторинний сценарій — обмін: швидше за заправку, принтер не стоїть */
.vd-cta .vd-cta-alt {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 14px;
  line-height: 1.35;
  color: var(--vd-cta-accent-text) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed rgba(185, 122, 23, .45);
}

.vd-cta .vd-cta-alt:hover,
.vd-cta .vd-cta-alt:focus {
  color: var(--vd-cta-accent-dark) !important;
  border-bottom-color: currentColor;
}

/* видима фокусна рамка для клавіатури — кнопка помітна без миші */
.vd-cta .vd-cta-btn:focus-visible,
.vd-cta .vd-cta-alt:focus-visible {
  outline: 2px solid var(--vd-cta-accent-dark);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .vd-cta {
    margin-top: 22px;
    padding: 18px 16px 20px;
    border-radius: 10px;
    border-left-width: 3px;
    box-shadow: 0 6px 20px rgba(30, 29, 45, .08);
  }
  .vd-cta .vd-cta-title { font-size: 19px; }
  .vd-cta .vd-cta-text { font-size: 14.5px; margin-bottom: 12px; }
  .vd-cta .vd-cta-facts { gap: 6px; margin-bottom: 16px; }
  /* на телефоні дії стають стовпчиком, кнопка — на всю ширину:
     великий палець влучає без прицілювання */
  .vd-cta .vd-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .vd-cta .vd-cta-btn {
    width: 100%;
    height: 48px;
    padding: 0 16px;
  }
  .vd-cta .vd-cta-alt {
    justify-content: center;
    text-align: center;
    border-bottom: 0;
    text-decoration: underline !important;
    text-underline-offset: 3px;
  }
}

@media (max-width: 480px) {
  .vd-cta { padding: 16px 14px 18px; }
  .vd-cta .vd-cta-title { font-size: 17.5px; }
  .vd-cta .vd-cta-text { font-size: 14px; }
  .vd-cta .vd-cta-fact { font-size: 12px; padding: 4px 10px; }
  .vd-cta .vd-cta-btn { font-size: 14.5px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-cta .vd-cta-btn { transition: none; }
  .vd-cta .vd-cta-btn:active { transform: none; }
}

/* ===== Контекстна врізка «Схожі послуги» у статтях (ArticleInterlink, 22.09.2026) ===== */
.vd-il {
  margin: 22px 0;
  padding: 14px 16px;
  border-left: 3px solid var(--vd-orange, #e8a33d);
  background: rgba(232, 163, 61, 0.07);
  border-radius: 0 6px 6px 0;
}
.vd-il .vd-il-lead {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.45;
  color: #2b2b2b;
}
.vd-il .vd-il-links {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.vd-il .vd-il-links a {
  font-weight: 600;
  color: #b8781a;
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 120, 26, 0.35);
}
.vd-il .vd-il-links a:hover,
.vd-il .vd-il-links a:focus { color: #8d5b0f; border-bottom-color: #8d5b0f; }
.vd-il .vd-il-sep { color: #b3a58c; padding: 0 4px; }
/* інлайн-лінк у тексті статті — підкреслення, без зміни ритму абзацу */
.about-text-in a[data-vd-il] { border-bottom: 1px solid rgba(184, 120, 26, 0.45); text-decoration: none; }
@media (max-width: 767px) {
  .vd-il { margin: 18px 0; padding: 12px 13px; }
  .vd-il .vd-il-lead, .vd-il .vd-il-links { font-size: 14px; }
}