/* 05.11.2026 «Штрихи» поверх дизайн-системы vrntorg_ms.css: сама система не меняется, добавляются точечные детали.
   Включается только с ?vt_touch=1 (кука на 30 дней, см. header.php), выключается ?vt_touch=0.
   Второй цвет — красный из логотипа (#E61D27), только в мелких деталях: мазок, риски, «+», полоса при наведении.
   Все правила под html.vt-touch; анимации — после класса vt-touch-on (ставит js/vrntorg_touch.js). */

html.vt-touch { --vt-red: #E61D27; }
html.vt-touch ::selection { background: #E61D27; color: #fff; }

/* 1. Мазок кистью под «кафе, ресторанов и магазинов», прорисовывается при загрузке */
html.vt-ds-ms.vt-touch .vt-hero-accent { position: relative; }
html.vt-ds-ms.vt-touch .vt-hero-accent::after {
  display: block !important;
  content: "";
  position: absolute;
  left: -2px; right: -6px; bottom: -11px;
  height: 13px;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath fill='%23E61D27' d='M3 8.5C40 4.5 95 3 160 4.2c55 1 105 2.3 137 .8 2 .5 2 2.5 0 3-35 2-83 1.6-137 1.2C100 8.8 45 10.5 4 12.5c-3 .1-3.5-3.5-1-4z'/%3E%3C/svg%3E") no-repeat left center / 100% 100% !important;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .9s cubic-bezier(.6, .05, .3, 1) .3s;
}
html.vt-ds-ms.vt-touch.vt-touch-on .vt-hero-accent::after { clip-path: inset(0 0 0 0); }

/* 2. Красная риска над заголовками разделов и в надписях-«бровях» */
html.vt-touch :is(.vt-hub-h, .vt-faq-title)::before {
  content: "";
  display: block;
  width: 28px; height: 3px;
  margin-bottom: 12px;
  background: var(--vt-red);
}
html.vt-touch .vt-bento-cta .eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--vt-red);
}

/* 3. Цифры доверия: ровные цифры, красный «+», счётчик при появлении (js) */
html.vt-touch .vt-stat-row b { font-variant-numeric: tabular-nums; }
html.vt-touch .vt-stat-row b .vt-plus { color: var(--vt-red); margin-left: 1px; }

/* 4. Индиго-плашки: точечная сетка «чертежа» справа и красный уголок */
html.vt-ds-ms.vt-touch :is(.vt-pb, .vt-bento-cta) { position: relative; overflow: hidden; }
html.vt-ds-ms.vt-touch :is(.vt-pb, .vt-bento-cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 50%, #000 90%);
          mask-image: linear-gradient(100deg, transparent 50%, #000 90%);
}
html.vt-ds-ms.vt-touch .vt-pb > *,
html.vt-ds-ms.vt-touch .vt-bento-cta > :not(.vt-bento-cta-bg) { position: relative; z-index: 1; }
html.vt-ds-ms.vt-touch .vt-pb::before {
  content: "";
  position: absolute;
  right: 20px; top: 20px;
  width: 22px; height: 22px;
  z-index: 1;
  pointer-events: none;
  border-top: 2px solid var(--vt-red);
  border-right: 2px solid var(--vt-red);
}

/* 5. Карточки разделов: «студийный свет» под фото, лёгкий наезд камеры и красная полоса при наведении */
html.vt-ds-ms.vt-touch .vt-cat-card { position: relative; }
html.vt-ds-ms.vt-touch .vt-cat-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  z-index: 2;
  background: var(--vt-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
html.vt-ds-ms.vt-touch .vt-cat-card:hover::before { transform: scaleX(1); }
html.vt-ds-ms.vt-touch .vt-cat-card-pic {
  overflow: hidden;
  background: radial-gradient(ellipse 70% 62% at 50% 42%, #fff 0%, #f5f6f9 68%, #eceef3 100%) !important;
}
html.vt-ds-ms.vt-touch .vt-cat-card:hover .vt-cat-card-pic {
  background: radial-gradient(ellipse 70% 62% at 50% 42%, #fff 0%, #eeeefa 68%, #e3e3f5 100%) !important;
}
html.vt-ds-ms.vt-touch .vt-cat-card-pic img { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
html.vt-ds-ms.vt-touch .vt-cat-card:hover .vt-cat-card-pic img { transform: scale(1.06) translateY(-2px); }

/* 6. Стрелки в кнопках «шагают» при наведении */
html.vt-touch :is(.vt-pb__cta, .vt-bento-cta-btn) svg { transition: transform .25s ease; }
html.vt-touch :is(.vt-pb__cta, .vt-bento-cta-btn):hover svg { transform: translateX(4px); }

/* 7. Мелкие отклики: иконки направлений и преимуществ, подчёркивание «Часто ищут» */
html.vt-ds-ms.vt-touch .vt-hero-dir i,
html.vt-touch .vt-trust-ico { transition: color .2s ease; }
html.vt-ds-ms.vt-touch .vt-hero-dir:hover i,
html.vt-touch .vt-trust-item:hover .vt-trust-ico { color: var(--vt-red) !important; }
html.vt-touch .vt-hero-tag { transition: box-shadow .2s ease; }
html.vt-touch .vt-hero-tag:hover { box-shadow: inset 0 -2px 0 var(--vt-red); }

/* 8. Блоки ниже первого экрана мягко поднимаются при прокрутке (js ставит .vt-reveal) */
html.vt-touch .vt-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
html.vt-touch .vt-reveal.is-in { opacity: 1; transform: none; }

/* ================= 2-я партия (класс vt-touch2, с 05.11.2026 тоже у всех; бегущую строку брендов и надпись в подвале пользователь отклонил) ================= */

/* 9. Плитки направлений на первом экране: живое фото раздела справа (js берёт его из карточек каталога ниже) */
html.vt-ds-ms.vt-touch2 .vt-hero-dir { position: relative; overflow: hidden; padding-right: 64px !important; }
html.vt-touch2 .vt-dir-pic {
  position: absolute;
  right: 6px; top: 50%;
  width: 54px; height: 54px;
  margin-top: -27px;
  object-fit: contain;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
html.vt-touch2 .vt-hero-dir:hover .vt-dir-pic { transform: scale(1.14) rotate(-3deg); }

/* 11. Синие плашки: мягкий свет следует за курсором */
html.vt-ds-ms.vt-touch2 :is(.vt-pb, .vt-bento-cta) {
  background-image: radial-gradient(420px circle at var(--mx, 85%) var(--my, 25%), rgba(255, 255, 255, .13), transparent 60%) !important;
}

/* 12. Обводка «от руки» вокруг слова «бесплатно» (js оборачивает слово и рисует линию при появлении) */
html.vt-touch2 .vt-circled { position: relative; white-space: nowrap; }
html.vt-touch2 .vt-circ {
  position: absolute;
  left: -9%; top: -26%;
  width: 118%; height: 152%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--vt-red);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s cubic-bezier(.6, .05, .3, 1) .2s;
}
html.vt-touch2 .vt-circled.is-in .vt-circ { stroke-dashoffset: 0; }

/* 13. Главный блок: вместо размытого пятна в углу — сетка «чертежа», та же, что на синих плашках */
html.vt-ds-ms.vt-touch2 .vt-bento-main::after {
  right: 0 !important; top: 0 !important;
  width: 46% !important; height: 70% !important;
  background: radial-gradient(rgba(46, 45, 135, .22) 1px, transparent 1.5px) 0 0 / 16px 16px !important;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 0%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0, #000 0%, transparent 70%);
}

/* ================= Раздел и карточка товара (05.11.2026, под html.vt-touch) ================= */

/* 15. Красная риска над H1 всех внутренних страниц и над заголовками блоков карточки */
html.vt-touch .page-top .topic__heading h1::before,
html.vt-touch :is(.vtrel-h, .ordered-block__title)::before {
  content: "";
  display: block;
  width: 28px; height: 3px;
  margin-bottom: 12px;
  background: var(--vt-red);
}

/* 16. Карточки товаров в разделе: «студийный свет», наезд камеры, красная полоса при наведении */
html.vt-touch article.vt-pc { position: relative; }
html.vt-touch article.vt-pc::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px; right: -1px;
  height: 3px;
  z-index: 2;
  background: var(--vt-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  pointer-events: none;
}
html.vt-touch article.vt-pc:hover::before { transform: scaleX(1); }
html.vt-touch .vt-pc-media {
  overflow: hidden;
  background: radial-gradient(ellipse 72% 64% at 50% 44%, #fff 0%, #f7f8fa 70%, #eff1f5 100%);
}
html.vt-touch .vt-pc-media img { mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
html.vt-touch article.vt-pc:hover .vt-pc-media img { transform: scale(1.05); }

/* 17. Подборки и серии над списком: подчёркивание при наведении */
html.vt-touch :is(.vt-sec-links, .vt-rc-chips-wrap) a { transition: box-shadow .2s ease; }
html.vt-touch :is(.vt-sec-links, .vt-rc-chips-wrap) a:hover { box-shadow: inset 0 -2px 0 var(--vt-red); }

/* 18. Фото товара: «студийный свет» вместо пустого белого */
html.vt-touch .vt-gallery-main {
  background: radial-gradient(ellipse 70% 62% at 50% 45%, #fff 0%, #f7f8fa 72%, #eef0f4 100%);
}
html.vt-touch .vt-gallery-main .vt-gallery-img { mix-blend-mode: multiply; }

/* 19. Цена: мазок кистью под суммой, тот же, что под заголовком главной */
html.vt-touch .vt-buybox-now { position: relative; display: inline-block; }
html.vt-touch .vt-buybox-now::after {
  content: "";
  position: absolute;
  left: -2px; right: -4px; bottom: -9px;
  height: 11px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath fill='%23E61D27' d='M3 8.5C40 4.5 95 3 160 4.2c55 1 105 2.3 137 .8 2 .5 2 2.5 0 3-35 2-83 1.6-137 1.2C100 8.8 45 10.5 4 12.5c-3 .1-3.5-3.5-1-4z'/%3E%3C/svg%3E") no-repeat left center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s cubic-bezier(.6, .05, .3, 1) .4s;
}
html.vt-touch.vt-touch-on .vt-buybox-now::after { clip-path: inset(0 0 0 0); }

/* 20. Блок покупки: красный уголок «чертежа» */
html.vt-touch .vt-buybox { position: relative; }
html.vt-touch .vt-buybox::before {
  content: "";
  position: absolute;
  right: 12px; top: 12px;
  width: 16px; height: 16px;
  pointer-events: none;
  border-top: 2px solid var(--vt-red);
  border-right: 2px solid var(--vt-red);
}

/* 21. Ключевые характеристики и вкладки */
html.vt-touch .vt-keyspec { transition: box-shadow .2s ease; }
html.vt-touch .vt-keyspec:hover { box-shadow: inset 2px 0 0 var(--vt-red); }
html.vt-touch .product-item-detail-tabs-list li.active > a { box-shadow: inset 0 -2px 0 var(--vt-red) !important; }

@media (max-width: 767px) {
  /* плитки на телефоне — колонкой (иконка сверху, подпись снизу): фото в правый верхний угол, подпись не трогаем */
  html.vt-ds-ms.vt-touch2 .vt-hero-dir { padding-right: 10px !important; }
  html.vt-touch2 .vt-dir-pic { top: 6px; right: 6px; width: 42px; height: 42px; margin-top: 0; }
  /* «кафе, ресторанов и магазинов» не помещалось в строку и обрезалось (было и до штрихов): переносим,
     мазок рисуем фоном под каждой строкой */
  html.vt-ds-ms .vt-hero-accent { white-space: normal !important; }
  html.vt-ds-ms.vt-touch .vt-hero-accent::after { display: none !important; }
  html.vt-ds-ms.vt-touch .vt-hero-accent {
    padding-bottom: 5px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath fill='%23E61D27' d='M3 8.5C40 4.5 95 3 160 4.2c55 1 105 2.3 137 .8 2 .5 2 2.5 0 3-35 2-83 1.6-137 1.2C100 8.8 45 10.5 4 12.5c-3 .1-3.5-3.5-1-4z'/%3E%3C/svg%3E") no-repeat left bottom / 100% 8px !important;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
  }
  /* «Серии» / «Популярные производители» в разделе: строка и так листается вбок, а названия ломались в столбики до 108 px (было и до штрихов) */
  .vt-rc-chips-wrap .vt-rc-brands > a { white-space: nowrap; flex-shrink: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.vt-touch2 .vt-circ { transition: none; stroke-dashoffset: 0; }
  html.vt-ds-ms.vt-touch .vt-hero-accent::after, html.vt-touch .vt-buybox-now::after { transition: none; clip-path: none; }
  html.vt-touch article.vt-pc::before, html.vt-touch .vt-pc-media img { transition: none; }
  html.vt-touch .vt-reveal { opacity: 1; transform: none; transition: none; }
  html.vt-ds-ms.vt-touch .vt-cat-card-pic img, html.vt-ds-ms.vt-touch .vt-cat-card::before { transition: none; }
}