: вложенную ссылку внутри ссылки браузер выносит
наружу (NOTES §133). Цвет и ховер наследуются от строки, как было у
. */
.jv-cert-doc,
.jv-cert-dl {
display: inline-flex;
align-items: center;
min-width: 0;
color: inherit;
text-decoration: none;
transition: color var(--jv-transition-fast);
}
.jv-cert-doc:hover,
.jv-cert-doc:hover p,
.jv-cert-dl:hover { color: var(--jv-primary); }
/* Хвост строки: срок, пилюля реестра и стрелка скачивания едут вместе. На узких
экранах тема уводит хвост под название — значит и стрелка уезжает туда же. */
.jv-cert-tail {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
/* стрелка была снаружи .main и держала отступ от него — теперь она внутри хвоста */
.jv-product__certificate-main { margin-right: 0; }
.jv-cert-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 7px;
border: 1px solid var(--jv-border);
border-radius: 999px;
font-size: 12px;
font-weight: var(--jv-font-weight-semibold, 600);
line-height: 1;
white-space: nowrap;
text-decoration: none;
color: var(--jv-text-tertiary);
transition: color var(--jv-transition-fast), border-color var(--jv-transition-fast);
}
.jv-cert-chip:hover,
.jv-cert-chip:focus-visible {
color: var(--jv-primary);
border-color: var(--jv-primary);
}
.jv-cert-chip svg { flex: 0 0 auto; }
/* На мобилке тексту остаётся 253px — тип и дата в одну строку не помещаются
(замер на проде), поэтому срок уходит под тип отдельной подписью. */
@media (max-width: 767px) {
.jv-product__certificate-link {
align-items: flex-start;
}
.jv-product__certificate-main {
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.jv-product__certificate-link p {
max-height: none;
line-height: 1.25;
}
/* #695: на второй строке теперь трое — срок, пилюля «Реестр» и стрелка
скачивания; на 375 px им тесно с десктопным зазором. */
.jv-cert-tail { gap: 6px; }
}
.jv-product__documentation-right {
display: flex;
flex-direction: column;
gap: var(--jv-gap-md);
width: 100%;
flex: 1;
/* #438: имя документа мерим относительно ширины самой колонки, а не окна —
в masonry-раскладке она заметно уже вьюпорта. */
container-type: inline-size;
}
.jv-product__documentation-right-item {
padding: 15px var(--jv-spacing-xl);
background-color: var(--jv-bg-white);
border-radius: var(--jv-radius-xl);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.jv-product__documentation-right-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
}
.jv-product__documentation-right-left > svg,
.jv-product__documentation-right-left > .jv-product__document-icon {
flex: 0 0 auto;
}
/* #438: «Скачать» не сжимается и не переносится. */
.jv-product__documentation-right-right {
flex: 0 0 auto;
white-space: nowrap;
}
.jv-product__documentation-right-left p {
font-weight: var(--jv-font-weight-bold);
font-size: var(--jv-font-size-xl);
line-height: var(--jv-line-height-tight);
color: var(--jv-text-primary);
margin: 0;
}
.jv-product__documentation-right-right {
display: flex;
align-items: center;
gap: var(--jv-gap-xs);
text-decoration: none;
color: var(--jv-text-tertiary);
transition: color var(--jv-transition-fast);
}
.jv-product__documentation-right-right:hover {
color: var(--jv-text-secondary);
}
.jv-product__documentation-right-right p {
font-weight: var(--jv-font-weight-semibold);
font-size: var(--jv-font-size-lg);
line-height: var(--jv-line-height-tight);
color: var(--jv-text-tertiary);
margin: 0;
}
/* #438: в узкой колонке (masonry) длинные имена документов — «Кривая силы
света» — переставали помещаться и уезжали на вторую строку. Меряем ширину
самой колонки, а не окна: правила должны идти ПОСЛЕ базовых, иначе каскад
оставит прежний кегль. */
@container (max-width: 430px) {
.jv-product__documentation-right-item { padding: 15px 16px; }
.jv-product__documentation-right-left { gap: 10px; }
.jv-product__documentation-right-left p { font-size: 16px; }
.jv-product__documentation-right-right p { font-size: 15px; }
}
/* Заглушка Ð´Ð»Ñ Ð´Ð¾ÐºÑƒÐ¼ÐµÐ½Ñ‚Ð°Ñ†Ð¸Ð¸ (еÑли нет Ñертификатов) */
.jv-product__documentation-empty {
padding: var(--jv-spacing-2xl);
background-color: var(--jv-bg-white);
border-radius: var(--jv-radius-xl);
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.jv-product__documentation-empty svg {
flex-shrink: 0;
}
.jv-product__documentation-empty p {
font-weight: var(--jv-font-weight-medium);
font-size: var(--jv-font-size-lg);
line-height: 140%;
color: var(--jv-text-tertiary);
margin: 0;
}
/* ========== ТехничеÑкие характериÑтики ========== */
.jv-product__specifications {
padding: var(--jv-spacing-2xl) 0;
background: var(--jv-bg-white);
}
.jv-product__specifications h2 {
font-weight: var(--jv-font-weight-extrabold);
font-size: var(--jv-font-size-4xl);
line-height: var(--jv-line-height-tight);
color: var(--jv-text-primary);
margin: 0 0 var(--jv-spacing-2xl) 0;
}
.jv-product__specifications-group {
margin-bottom: var(--jv-spacing-2xl);
}
.jv-product__specifications-group:last-child {
margin-bottom: 0;
}
.jv-product__specifications-group h3 {
font-weight: var(--jv-font-weight-bold);
font-size: var(--jv-font-size-xl);
color: var(--jv-text-primary);
margin: 0 0 var(--jv-spacing-lg) 0;
}
.jv-product__specifications-items {
display: flex;
flex-direction: column;
gap: var(--jv-gap-lg);
padding: var(--jv-spacing-xl);
background: var(--jv-bg-light);
border-radius: var(--jv-radius-xl);
}
/* ========== Скрытие Ñтандартных блоков OpenCart ========== */
#product-product .product-busket,
#product-product .product-tabs,
#product-product .tags-container,
#product-product .container-push,
#product-product #prodvar {
display: none !important;
}
/* «ПопулÑрные товары» под «СпиÑком моделей» — показать и ограничить по ширине как другие блоки */
#product-product .jv-product__popular-wrap .container-push {
display: block !important;
}
.jv-product__popular-wrap .jw-popular-module {
margin-top: 30px;
}
/* ========== Ограничение текÑта характериÑтик (верхний блок) ========== */
.jv-product__specs .jv-table-dots-label,
.jv-product__specs .jv-table-dots-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.jv-product__specs .jv-table-dots-label {
max-width: 400px;
flex-shrink: 1;
}
.jv-product__specs .jv-table-dots-value {
max-width: 200px;
flex-shrink: 1;
}
.jv-product__specs .jv-table-dots-item {
position: relative;
}
/* #341: развёрнутая по наведению строка перекрывает соседнюю, поэтому ей нужна
подложка — но белая читалась как «белый прямоугольник под текстом»: блок
характеристик серый (#F2F3F6). Красим подложку в цвет самого блока. */
#408: у неурезанных строк title пустой — подложка на них читалась как
«серый фон непонятно откуда». Раскрываем только реально обрезанные. */
.jv-product__specs .jv-table-dots-label[title]:not([title=""]):hover,
.jv-product__specs .jv-table-dots-value[title]:not([title=""]):hover {
overflow: visible;
white-space: normal;
word-break: break-word;
z-index: 2;
background: var(--jv-bg-light, #F2F3F6);
}
.site-footer {
border-radius: 1.358vw 1.358vw 0 0;
/* margin-bottom: 2.717vw; */
padding: 17px 17px 0px 17px;
width: calc(100%);
left: 0;
margin-left: 0;
}
/* ========== Ðижний информационный блок (ТХ + ЛогичеÑкие параметры) ========== */
.jv-product__bottom-inform {
margin-top: 28px;
margin-bottom: 28px;
}
.jv-product__bottom-inform > .container {
display: flex;
gap: 20px;
align-items: flex-start;
}
/* ТХ внутри bottom-inform */
.jv-product__bottom-inform .jv-product__specifications {
padding: 20px;
border-radius: 15px;
background: #F2F3F6;
width: calc(50% - 10px);
flex-shrink: 0;
}
.jv-product__bottom-inform .jv-product__specifications h2 {
font-weight: 700;
font-size: 22px;
line-height: 100%;
color: var(--jv-text-primary);
margin: 0 0 20px;
}
.jv-product__bottom-inform .jv-product__specifications-group h3 {
font-weight: 600;
font-size: 18px;
color: var(--jv-text-primary);
margin: 0 0 15px;
}
/* 2 Ñтолбца Ð´Ð»Ñ Ð¢Ð¥ */
.jv-product__bottom-inform .jv-product__specifications-items {
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
padding: 0;
background: transparent;
border-radius: 0;
flex-direction: row;
}
.jv-product__bottom-inform .jv-product__specifications-items .jv-table-dots-item {
width: calc(50% - 10px);
}
/* Ограничение текÑта ТХ (нижний блок) — аналог верхних характериÑтик */
.jv-product__bottom-inform .jv-table-dots-label,
.jv-product__bottom-inform .jv-table-dots-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.jv-product__bottom-inform .jv-table-dots-label {
flex-shrink: 1;
}
.jv-product__bottom-inform .jv-table-dots-value {
flex-shrink: 1;
}
.jv-product__bottom-inform .jv-table-dots-label[title]:not([title=""]):hover,
.jv-product__bottom-inform .jv-table-dots-value[title]:not([title=""]):hover {
overflow: visible;
white-space: normal;
word-break: break-word;
z-index: 2;
}
/* Скрытие ТХ поÑле 22 Ñлементов (11 в Ñтолбце) */
.jv-product__bottom-inform .jv-product__specifications-items .jv-table-dots-item:nth-child(n+23) {
display: none;
}
.jv-product__bottom-inform .jv-product__specifications-items.jv-specs-expanded .jv-table-dots-item:nth-child(n+23) {
display: flex;
}
/* Кнопка "Развернуть характериÑтики" */
.jv-product__specifications-expand {
display: flex;
align-items: center;
gap: 5px;
padding: 0;
border: none;
background-color: transparent;
margin-top: 20px;
cursor: pointer;
}
.jv-product__specifications-expand p {
font-weight: 500;
font-size: 16px;
line-height: 100%;
color: #999;
margin: 0;
}
.jv-product__specifications-expand:hover p {
color: #666;
}
.jv-product__specifications-expand.expanded svg {
transform: rotate(180deg);
transition: transform 0.3s;
}
/* JW: блок «Технические характеристики» — десктоп показывает ВСЕ характеристики
одним списком и без кнопки; сворачивание + кнопка только на мобиле (<500px). */
#jv-block-specifications .jv-product__specifications-items .jv-table-dots-item:nth-child(n+23) {
display: flex;
}
#jv-block-specifications .jv-product__specifications-expand {
display: none;
}
@media (max-width: 499px) {
#jv-block-specifications .jv-product__specifications-items .jv-table-dots-item:nth-child(n+23) {
display: none;
}
#jv-block-specifications .jv-product__specifications-items.jv-specs-expanded .jv-table-dots-item:nth-child(n+23) {
display: flex;
}
#jv-block-specifications .jv-product__specifications-expand {
display: flex;
}
}
/* ========== ЛогичеÑкие параметры (заглушка) ========== */
.jv-product__logical {
padding: 20px 0;
border-radius: 15px;
background: #F2F3F6;
display: flex;
height: max-content;
flex: 1;
width: calc(50% - 10px);
min-width: 0;
}
.jv-product__logical > div:first-of-type {
flex: 0 0 310px;
width: 310px;
}
/* доп. Ñтолбцы (2–5 шт) делÑÑ‚ оÑтавшуюÑÑ ÑˆÐ¸Ñ€Ð¸Ð½Ñƒ поровну */
.jv-product__logical > div {
flex: 1 1 0;
min-width: 0;
}
.jv-product__logical p {
line-height: 30px;
padding-bottom: 5px;
margin: 0;
}
.jv-product__logical p:nth-child(2n+1) {
background: #F2F3F6;
}
.jv-product__logical p:nth-child(2n) {
background: #fff;
}
.jv-product__logical p:last-of-type {
color: var(--jv-text-primary);
}
.jv-product__logical-left .title {
font-weight: 700;
font-size: 22px;
padding-left: 20px;
}
.jv-product__logical-left .subtitle {
font-weight: 500;
font-size: 16px;
color: var(--jv-text-primary);
line-height: 16px;
padding-left: 20px;
min-height: 16px;
display: -webkit-box;
-webkit-line-clamp: 1;
padding-top: 8px;
padding-bottom: 8px;
overflow: hidden;
-webkit-box-orient: vertical;
}
.jv-product__logical-center p,
.jv-product__logical-right p {
text-align: center;
}
.jv-product__logical-center .title,
.jv-product__logical-right .title {
font-weight: 500;
font-size: 14px;
color: #303131;
}
.jv-product__logical-center .number,
.jv-product__logical-right .number {
color: #999;
font-weight: 500;
font-size: 16px;
line-height: 16px;
padding-bottom: 8px;
padding-top: 8px;
border: none;
border-radius: 0;
}
.jv-product__logical-center .num,
.jv-product__logical-right .num {
font-weight: 500;
font-size: 14px;
color: var(--jv-text-primary);
}
/* ===== СпиÑок моделей (Ñгруппированные товары) ===== */
.jv-product__models {
width: 100%;
flex: 1;
padding: 24px 0;
border-radius: 15px;
background: #F2F3F6;
}
.jv-product__models-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
padding: 0 24px;
}
.jv-product__models-head .title {
margin: 0;
font-size: 22px;
font-weight: 500;
color: var(--jv-text-primary);
}
.jv-product__models-total {
font-size: 14px;
color: #999;
}
.jv-product__models-scroll {
overflow-x: auto;
max-height: 420px;
overflow-y: auto;
}
.jv-product__models-table thead th{
position: sticky;
top: 0;
z-index: 1;
}
.jv-product__models-table {
width: 100%;
border-collapse: collapse;
font-size: 18px;
white-space: nowrap;
}
.jv-product__models-table th {
text-align: left;
font-weight: 500;
color: var(--jv-text-primary);
padding: 16px 24px 16px 0;
background:#fff;
}
.jv-product__models-table th:first-of-type {
text-align: left;
font-weight: 500;
color: var(--jv-text-primary);
padding: 16px 24px 16px 0;
background:#fff;
min-width:280px;
}
/* Ð¿ÐµÑ€Ð²Ð°Ñ ÐºÐ¾Ð»Ð¾Ð½ÐºÐ° отÑтупает от ÐºÑ€Ð°Ñ ÐºÐ°Ñ€Ñ‚Ð¾Ñ‡ÐºÐ¸, полоÑÑ‹ при Ñтом во вÑÑŽ ширину */
.jv-product__models-table th:first-child,
.jv-product__models-table td:first-child {
padding-left: 24px;
}
.jv-product__models-table td {
padding: 16px 24px 16px 0;
color: #999;
}
/* Чередование Ñтрок — как в «ЛогиÑтичеÑких параметрах» */
.jv-product__models-table tbody tr:nth-child(odd) td {
background: #F2F3F6;
}
.jv-product__models-table tbody tr:nth-child(even) td {
background: #fff;
}
/* #499: колонка «Действия» — лайк и «в сравнение» у каждой модели */
.jv-product__models-table .jv-mrow-actions,
.jv-product__models-table .jv-mrow-actions-th { padding-right: 24px; }
.jv-product__models-table .jv-mrow-actions {
white-space: nowrap;
}
/* лайк каталога позиционируется абсолютом внутри карточки — в ячейке он в потоке */
.jv-mrow-actions .jv-product-card__like {
position: static;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.jv-mrow-actions .jv-mrow-btn {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
width: 30px;
height: 30px;
margin-left: 8px;
padding: 0;
border: none;
border-radius: 8px;
background: none;
color: #9AA0AA;
cursor: pointer;
transition: color var(--jv-transition-fast, .15s), background-color var(--jv-transition-fast, .15s);
}
/* #682: иконки в колонке «Действия» приезжают из разных мест разметки и имели
разный размер — сравнение 20px, избранное 19px. Разница в пиксель не читается
как ошибка, но ряд выглядит неровным. Задаём размер здесь, а не в svg. */
.jv-mrow-actions .jv-mrow-btn svg,
.jv-mrow-actions .jv-product-card__like svg { width: 20px; height: 20px; }
.jv-mrow-actions .jv-mrow-btn:hover { color: var(--jv-primary, #E94E1B); background: #FDEEE8; }
/* окрашивание после добавления в сравнение (класс вешает jv-scripts.js, #480) */
.jv-mrow-actions .jv-mrow-btn.is-added { color: var(--jv-primary, #E94E1B); }
.jv-product__models-table td.name {
color: var(--jv-text-primary);
font-weight: 500;
white-space: normal;
}
.jv-product__models-table td.name a {
color: inherit;
text-decoration: none;
}
.jv-product__models-table td.name a:hover {
color: var(--jv-primary);
}
.jv-product__models-table tr.is-current td {
background: #fff;
}
/* СопутÑтвующие товары — Ð¿Ð¾Ð»Ð½Ð°Ñ ÑˆÐ¸Ñ€Ð¸Ð½Ð° контейнера */
.jv-product__related--fullwidth {
margin-top: var(--jv-spacing-xl);
margin-bottom: var(--jv-spacing-xl);
}
/* ========== Ðдаптив ========== */
@media (max-width: 1880px) {
.jv-product__partner-item {
width: 48%;
/* было height:auto + padding:0 — без потолка логотип рендерился в
исходный размер и доминировал в сайдбаре. Первая попытка (56px/10px)
оказалась мельче референса — по присланному скрину (Shop.pdf)
карточки заметно просторнее, ближе к базовому 76px/15px дизайну.
img{max-height:100%} подстраивается под любое из этих значений. */
height: 76px;
position: relative;
background-color: var(--jv-bg-white);
border-radius: var(--jv-radius-2xl);
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
}
/* Ðа Ñкранах меньше 1600px — убираем side-by-side Ð´Ð»Ñ Ñ…Ð°Ñ€Ð°ÐºÑ‚ÐµÑ€Ð¸Ñтик + покупка */
@media (max-width: 1600px) {
.jv-product__buy {
max-width: none;
min-width: 0;
max-width: 100%;
width: 100%;
}
.jv-product__characteristics {
min-width: 0;
max-width: 100%;
width: 100%;
}
}
@media (max-width: 1540px){
.jv-product__related-item {
flex: 0 0 calc(33.333% - var(--jv-gap-lg) * 2 / 3);
min-width: 0;
padding: 10px;
border-radius: var(--jv-radius-xl);
background: var(--jv-bg-white);
display: flex;
flex-direction: column;
gap: var(--jv-gap-lg);
flex-shrink: 0;
align-items: flex-start;
max-width: 145px;
}
}
/* Ðа Ñкранах меньше 1400px — 2 колонки: Ñлайдер + контент */
@media (max-width: 1440px) {
.jv-product__specifications-group h3 {
font-weight: var(--jv-font-weight-bold);
font-size: var(--jv-font-size-xl);
color: var(--jv-text-primary);
margin: 0 0 var(--jv-spacing-lg) 0;
display:none;
}
.jv-product__specifications h2 {
font-weight: var(--jv-font-weight-extrabold);
font-size: 22px;
line-height: var(--jv-line-height-tight);
color: var(--jv-text-primary);
margin: 0 0 var(--jv-spacing-2xl) 0;
}
.jv-product__specifications-group h3 {
font-weight: 600;
font-size: 18px;
color: var(--jv-text-primary);
margin: 0 0 15px;
}
/* 2 Ñтолбца Ð´Ð»Ñ Ð¢Ð¥ */
.jv-product__specifications-items {
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
padding: 0;
background: transparent;
border-radius: 0;
flex-direction: row;
}
.jv-product__specifications {
padding: 20px;
background: #f2f3f6;
border-radius: 15px;
margin-bottom: 45px;
}
.jv-product__specifications-items .jv-table-dots-item {
width: calc(50% - 10px);
}
/* Ограничение текÑта ТХ (нижний блок) — аналог верхних характериÑтик */
.jv-product__bottom-inform .jv-table-dots-label,
.jv-product__bottom-inform .jv-table-dots-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.jv-product__bottom-inform .jv-table-dots-label {
flex-shrink: 1;
}
.jv-product__bottom-inform .jv-table-dots-value {
flex-shrink: 1;
}
.jv-product__bottom-inform .jv-table-dots-label[title]:not([title=""]):hover,
.jv-product__bottom-inform .jv-table-dots-value[title]:not([title=""]):hover {
overflow: visible;
white-space: normal;
word-break: break-word;
z-index: 2;
background: #f2f3f6;
}
/* Скрытие ТХ поÑле 22 Ñлементов (11 в Ñтолбце) */
.jv-product__bottom-inform .jv-product__specifications-items .jv-table-dots-item:nth-child(n+23) {
display: none;
}
.jv-product__bottom-inform .jv-product__specifications-items.jv-specs-expanded .jv-table-dots-item:nth-child(n+23) {
display: flex;
}
.jv-product__slider-main {
width: 100%;
height: auto;
aspect-ratio: 1 / 0.95;
}
.jv-product__top-left h1 {
font-size: 32px;
}
.jv-product__related-item {
flex: 0 0 calc(33.333% - var(--jv-gap-lg) * 2 / 3);
min-width: 0;
padding: 10px;
border-radius: var(--jv-radius-xl);
background: var(--jv-bg-white);
display: flex;
flex-direction: column;
gap: var(--jv-gap-lg);
flex-shrink: 0;
align-items: flex-start;
max-width: 145px;
}
.jv-product__related-image {
width: 125px;
min-width: 125px;
height: 125px;
border-radius: var(--jv-radius-lg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.jv-product__bottom-inform > .container {
flex-direction: column;
}
.jv-product__bottom-inform .jv-product__specifications {
width: 100%;
}
.jv-product__logical {
width: 100%;
}
/* слито из дубля @1440 ниже (консолидация брейкпоинтов, срез №1) */
.jv-product__documentation-content {
flex-direction: column;
}
}
@media (max-width: 1200px){
.jv-product__slider {
display: flex;
gap: var(--jv-gap-3xl);
padding: var(--jv-spacing-xl);
border-radius: var(--jv-radius-2xl);
background-color: var(--jv-bg-light);
margin-bottom: var(--jv-spacing-2xl);
flex-direction: column-reverse;
}
.jv-product__slider-thumbs-track {
display: flex;
flex-direction: row;
gap: var(--jv-gap-md);
will-change: transform;
}
.jv-product__slider-thumb {
width: 120px;
height: 120px;
border-radius: var(--jv-radius-3xl);
overflow: hidden;
cursor: pointer;
transition: all var(--jv-transition-fast);
border: 1px solid transparent;
}
.jv-product__slider-thumbs {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--jv-gap-md);
padding: 0;
}
}
@media (max-width: 1360px) {
.jv-product__documentation-content {
flex-direction: column;
}
.jv-product__related-item {
flex: 0 0 calc(33.333% - var(--jv-gap-lg) * 2 / 3);
min-width: 0;
padding: 10px;
border-radius: var(--jv-radius-xl);
background: var(--jv-bg-white);
display: flex;
flex-direction: column;
gap: var(--jv-gap-lg);
flex-shrink: 0;
align-items: flex-start;
min-width: 145px;
}
.jv-product__related-slider {
display: flex;
gap: 10px;
transition: transform 0.4s ease;
}
.jv-product__related {
padding: var(--jv-spacing-xl);
background: var(--jv-bg-light);
border-radius: var(--jv-radius-xl);
margin-bottom: var(--jv-spacing-xl);
overflow: hidden;
border-right: 20px solid var(--jv-bg-light);
}
}
/* Ðа Ñкранах меньше 1024px — одна колонка */
@media (max-width: 1024px) {
/* было display:none — фидбэк: «Поделиться/Избранное/Сравнение пропадают
после 1020, не должны, оставь их». Иконки остаются на всех ширинах
(подписи уже скрыты ≤1200 отдельным правилом ниже по файлу), flex-wrap
на случай, если совсем не помещается в одну строку с артикулом. */
.jv-product__top-right {
flex-wrap: wrap;
}
.jv-product__characteristics {
min-width: 300px;
flex: 1;
min-width: auto;
max-width: 100%;
width: 100%;
padding: 15px;
border-radius: 20px;
background: #f2f3f6;
}
.jv-product__characteristics-title {
font-size: 22px;
color: var(--jv-text-primary);
line-height: var(--jv-line-height-tight);
margin: 15px 0 11px 0;
}
.jv-product__buy {
max-width: 100%;
width: 100%;
}
.jv-table-dots-item {
display: flex;
align-items: baseline;
margin-bottom: 0;
}
.jv-product__specs {
display: flex;
flex-direction: column;
gap: 15px;
margin: 22px 0 27px 0;
}
.jv-product__price-block {
padding: var(--jv-spacing-xl);
display: flex;
align-items: center;
background: var(--jv-bg-white);
border-radius: var(--jv-radius-2xl);
gap: var(--jv-gap-3xl);
margin-bottom: var(--jv-gap-2xl);
flex-direction:column;
}
.jv-product__price-right .jv-btn-primary {
padding: 21px 0;
width: 100%;
text-align: center;
}
.jv-product__price-right {
flex-grow: 1;
width:100%
}
.jv-product__partner-item {
width: 147px;
height: 60px;
position: relative;
background-color: var(--jv-bg-white);
border-radius: var(--jv-radius-2xl);
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
}
.jv-product__price-left {
width: 100%;
}
.jv-product__content {
margin-bottom: 0;
width: 100%;
}
.jv-product__bottom-inform {
margin-top: 0px;
margin-bottom: 28px;
}
.jv-product__related{
/* display:none; */
border-right: none;
margin-left: 5px;
margin-right: 5px;
border-right: 20px solid var(--jv-bg-light);
}
}
@media (max-width: 980px) {
.jv-product__documentation-right {
flex: 1;
}
.jv-product__partner-item {
width: 154px;
height: 63px;
position: relative;
background-color: var(--jv-bg-white);
border-radius: var(--jv-radius-2xl);
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
overflow: hidden;
}
.jv-product__documentation-content {
flex-direction: row;
}
.jv-product__related-item {
flex: 0 0 calc(33.333% - var(--jv-gap-lg) * 2 / 3);
min-width: 0;
padding: 10px;
border-radius: var(--jv-radius-xl);
background: var(--jv-bg-white);
display: flex;
flex-direction: row;
gap: var(--jv-gap-lg);
flex-shrink: 0;
align-items: flex-start;
min-width: 290px;
}
}
/* Ðа Ñкранах меньше 768px */
@media (max-width: 768px) {
.jv-product__top .container {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.jv-product__top-left h1 {
font-size: 24px;
}
.jv-product__top-options {
flex-direction: column;
align-items: flex-start;
}
.jv-product__slider {
flex-direction: column-reverse;
}
.jv-product__slider-thumbs {
flex-direction: row;
}
.jv-product__slider-thumbs-track {
flex-direction: row;
}
.jv-product__slider-thumb {
width: 80px;
height: 80px;
}
.jv-product__slider-main {
width: 100%;
height: auto;
}
.jv-product__characteristics {
min-width: auto;
}
.jv-product__buy {
max-width: none;
}
.jv-product__related-slider {
gap: 10px;
}
.jv-product__related-item {
flex: 0 0 calc(50% - 5px);
flex-direction: column;
align-items: stretch;
min-width: 145px;
}
.jv-product__related-image {
width: 100%;
min-width: unset;
height: 130px;
}
/* Мобильные кнопки избранное/Ñравнение — показать над галереей */
.jv-product__mobile-actions {
display: flex;
gap: 16px;
margin-bottom: 12px;
}
.jv-product__mobile-action-btn {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--jv-text-secondary, #666);
line-height: 1.2;
}
.jv-product__mobile-action-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Скрыть оригинальные кнопки избранное/Ñравнение в шапке товара */
/* Было display:none — задумывалось как замена на .jv-product__mobile-actions
(«избранное/сравнение над галереей»), но такой разметки в нашей карточке
нет вообще — иконки пропадали без замены. Фидбэк: «не должны пропадать,
оставь их» — держим видимыми (иконки без подписей, см. правило ≤1200
выше по файлу). */
.jv-product__top-right .jv-product__top-option:has([onclick*="wishlist"]),
.jv-product__top-right .jv-product__top-option:has([onclick*="compare"]) {
display: flex;
}
.jv-product__documentation-content {
flex-direction: column;
}
.jv-product__bottom-inform .jv-product__specifications-items .jv-table-dots-item {
width: 100%;
}
.jv-product__logical {
}
.jv-product__logical > div {
width: 100%;
}
}
/* Ðа Ñкранах меньше 480px */
@media (max-width: 480px) {
.jv-product__top-left h1 {
font-size: 20px;
}
.jv-product__specifications {
margin-bottom: 0px;
}
.jv-product__price-block {
flex-direction: column;
gap: 15px;
}
.jv-product__price-left {
width: 100%;
}
.jv-product__price-right .jv-btn-primary {
width: 100%;
}
.jv-product__partner-item {
width: calc(50% - 6px);
overflow: hidden;
}
.jv-product__partner-item img
{
max-height: 63px;
object-fit: contain;
}
}
/* ========== Мобильный блок избранное/Ñравнение (над галереей) ========== */
.jv-product__mobile-actions {
display: none; /* Ñкрыт на деÑктопе */
}
/* ========== Модальное окно "Задать вопроÑ" ========== */
.jv-question-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 9999;
align-items: center;
justify-content: center;
}
.jv-question-overlay.active {
display: flex;
}
/* #415: форма выглядела грубо — заголовок 44px, поля в рамке 3px и текст 14px
серым. Кегли выровнены, обводка тонкая, поля светлые. */
.jv-question-modal {
background: #fff;
border-radius: 18px;
padding: 32px;
width: 100%;
max-width: 460px;
margin: 16px;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 24px 60px rgba(0,0,0,.22);
max-height: calc(100vh - 32px);
overflow-y: auto;
}
.jv-question-modal__close {
position: absolute;
top: 15px;
right: 15px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
line-height: 1;
opacity: .6;
transition: opacity .2s;
}
.jv-question-modal__close:hover { opacity: 1; }
.jv-question-modal__title {
font-size: 26px; /* #415: было 44px — заголовок занимал треть окна */
line-height: 1.2;
font-weight: 700;
text-align: left;
color: var(--jv-text-primary);
margin: 0;
padding-right: 32px; /* не заезжает под крестик */
}
/* согласие — теперь чекбокс (label), а не абзац: строка выравнивается по левому краю */
.jv-question-modal__subtitle_bottom{
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 11px;
font-weight:450;
color: rgba(153, 153, 153, 1);
text-align:left;
margin-bottom: 14px;
cursor: pointer;
}
.jv-question-modal__subtitle_bottom input{
flex: 0 0 auto;
width: 16px;
height: 16px;
margin: 1px 0 0;
accent-color: var(--jv-primary, #E94E1B);
}
/* сообщение формы: блок вернули в разметку, раньше он был закомментирован */
.jv-question-modal__msg{
margin-top: 12px;
font-size: 13px;
font-weight: 500;
text-align: center;
min-height: 18px;
}
.jv-question-modal__subtitle_bottom a{
font-size: 11px;
font-weight:450;
color: rgba(153, 153, 153, 1);
text-align:center;
/* border-bottom:1px solid; */
text-decoration: underline;
}
.jv-question-modal__subtitle {
font-size: 14px;
line-height: 1.45;
color: var(--jv-text-muted, #999);
margin: -4px 0 2px;
text-align: left; /* #415 */
}
#jv-question-phone{
letter-spacing: 2px;
}
/* #324: правило ниже (width:100%, рамка 3px, padding 6/15) применялось и к
чекбоксу согласия — квадратик распирало и строка «ехала». Текстовые поля
отбираем по типу, чекбоксу даём собственный размер. */
.jv-question-modal input[type="checkbox"] {
-webkit-appearance: checkbox;
appearance: checkbox;
width: 16px;
height: 16px;
min-width: 16px;
flex: 0 0 16px;
margin: 1px 0 0;
padding: 0;
border: none;
border-radius: 0;
accent-color: var(--jv-primary, #E94E1B);
}
/* #415: обводка 3px читалась как «жирная рамка», текст был серым и мелким —
тонкая рамка + светлая заливка, ввод тёмный, плейсхолдер серый. */
.jv-question-modal input:not([type="checkbox"]),
.jv-question-modal textarea {
width: 100%;
border: 1px solid var(--jv-border, #E4E5E9);
background: var(--jv-bg-surface, #F7F8FA);
border-radius: 10px;
padding: 11px 14px;
font-size: 15px;
line-height: 1.3;
outline: none;
font-weight: 450;
box-sizing: border-box;
font-family: inherit;
color: var(--jv-text-primary, #171717);
transition: border-color .18s, background-color .18s, box-shadow .18s;
}
.jv-question-modal input:not([type="checkbox"])::placeholder,
.jv-question-modal textarea::placeholder { color: var(--jv-text-muted, #999); }
.jv-question-modal input:not([type="checkbox"]):hover,
.jv-question-modal textarea:hover { border-color: #cfd1d6; }
.jv-question-modal input:not([type="checkbox"]):focus,
.jv-question-modal textarea:focus {
border-color: var(--jv-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(233, 78, 27, .12);
}
/* #323: товар, по которому задают вопрос */
/* #415: плитка товара — фото + название + артикул, вместо строчки по центру */
.jv-question-modal__product {
display: flex;
align-items: center;
gap: 12px;
margin: 2px 0 6px;
padding: 10px 12px;
border: 1px solid var(--jv-border, #E4E5E9);
border-radius: 12px;
background: var(--jv-bg-surface, #F7F8FA);
line-height: 1.3;
}
.jv-question-modal__product-img {
flex: 0 0 52px;
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 8px;
background: #fff;
}
.jv-question-modal__product-txt { min-width: 0; }
.jv-question-modal__product-name {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--jv-text-primary);
}
.jv-question-modal__product-sku {
display: block;
margin-top: 3px;
font-size: 12px;
color: var(--jv-text-muted, #999);
}
.jv-question-modal textarea {
resize: vertical;
min-height: 86px;
}
.jv-question-modal__btn {
background: var(--jv-primary);
color: #fff;
border: none;
border-radius: 10px;
padding: 13px;
font-size: 16px;
font-weight: 600;
margin-top: 2px;
cursor: pointer;
transition: opacity .2s;
width: 100%;
}
.jv-question-modal__btn:hover { opacity: .85; }
.jv-question-modal__btn:disabled { opacity: .5; cursor: not-allowed; }
.jv-question-modal__msg {
font-size: 14px;
text-align: center;
min-height: 20px;
}
/* #505: пока сообщения нет, блок (min-height + margin-top + gap колонки)
резервировал ~40px пустоты под кнопкой «Отправить» — прячем пустой */
.jv-question-modal__msg:empty { display: none; }
@media (max-width: 600px) {
.jv-question-modal { padding: 24px 20px; }
}
@media (max-width: 500px){
.jv-product__documentation-content {
flex-direction: column;
}
/* ЛогиÑтика: горизонтальный Ñкролл вмеÑто ÑÐ¶Ð°Ñ‚Ð¸Ñ ÐºÐ¾Ð»Ð¾Ð½Ð¾Ðº */
.jv-product__logical {
overflow-x: auto;
}
.jv-product__logical > div:first-of-type {
flex: 0 0 310px;
width: 310px;
}
.jv-product__logical > div {
flex: 0 0 140px;
width: 140px;
min-width: 140px;
}
/* #603: линии под хлебными крошками на мобильном нет — она отделяла
крошки от заголовка там, где отделять нечего: заголовок и так набран
крупно, а полоса читалась как край блока. */
#product-product .navigation-content{
border-bottom: 0;
padding: 19px 0 14px 0;
}
.jv-product__top-options_first {
display: flex;
flex-direction: column;
gap: 5px;
}
.jv-product__top-left h1 {
font-size: 15px;
font-size:26px;
margin-bottom: 20px;
}
#product-product .navigation-content .breadcrumb > li > a {
font-size: 12px !important;
}
#product-product .navigation-content .breadcrumb {
height: auto !important;
background: transparent !important;
gap: 0 !important;
padding: 0px 0 0px !important;
margin: 0 !important;
/* overflow: visible !important; */
border-radius: 0 !important;
display: block;
align-items: center;
}
.jv-product__top-option p {
font-size: 14px;
}
.product{
width: calc(100% + 20px );
margin-left: -10px;
}
.jv-table-dots-label {
font-weight: var(--jv-font-weight-semibold);
font-size:16px;
line-height: var(--jv-line-height-tight);
color: var(--jv-text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.jv-table-dots-value {
font-weight: var(--jv-font-weight-semibold);
font-size: 16px;
line-height: var(--jv-line-height-tight);
color: var(--jv-text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
.jv-product__characteristics {
min-width: 300px;
flex: 1;
min-width: auto;
width: 100%;
padding: 15px;
border-radius: 20px;
background: #f2f3f6;
}
.jv-product__top {
margin-bottom: 10px;
}
.site-footer {
border-radius: 1.358vw 1.358vw 0 0;
/* margin-bottom: 2.717vw; */
padding: 17px 17px 0px 17px;
width: calc(100%);
left: 0;
margin-left: 0;
}
.jv-product__related {
display: block;
width: 100%;
overflow:hidden;
border-radius: 10px 0 0 10px;
}
.jv-product__related-slider {
gap: 10px;
overflow: visible;
}
}
@media (max-width: 360px){
/* #603: линии под хлебными крошками на мобильном нет — она отделяла
крошки от заголовка там, где отделять нечего: заголовок и так набран
крупно, а полоса читалась как край блока. */
#product-product .navigation-content{
border-bottom: 0;
padding: 19px 0 14px 0;
}
.jv-product__top-options_first {
display: flex;
flex-direction: column;
gap: 5px;
}
.jv-product__top-left h1 {
font-size: 15px;
font-size:26px;
margin-bottom: 20px;
}
#product-product .navigation-content .breadcrumb > li > a {
font-size: 12px !important;
}
#product-product .navigation-content .breadcrumb {
height: auto !important;
background: transparent !important;
gap: 0 !important;
padding: 0px 0 0px !important;
margin: 0 !important;
/* overflow: visible !important; */
border-radius: 0 !important;
display: block;
align-items: center;
}
.breadcrumb-arrow {
display: inline-block;
margin-right: 8px;
vertical-align: middle;
width:10px;
flex-shrink: 0;
}
.navigation-content .breadcrumb > li:last-child, .navigation-content .breadcrumb > li:last-child > span, .navigation-content .breadcrumb > li:last-child > a {
font-size: 12px !important;
}
.jv-product__top-option p {font-size: 14px;font-weight: 500;}
.product{
width: calc(100% + 20px );
margin-left: -10px;
}
.jv-table-dots-label {
font-weight: var(--jv-font-weight-semibold);
font-size:16px;
line-height: var(--jv-line-height-tight);
color: var(--jv-text-primary);
white-space: nowrap;
flex-shrink: 0;
}
.jv-table-dots-value {
font-weight: var(--jv-font-weight-semibold);
font-size: 16px;
line-height: var(--jv-line-height-tight);
color: var(--jv-text-tertiary);
white-space: nowrap;
flex-shrink: 0;
}
.jv-product__characteristics {
min-width: 300px;
flex: 1;
min-width: auto;
max-width: 360px;
width: 100%;
padding: 15px;
border-radius: 20px;
background: #f2f3f6;
}
.jv-product__top {
margin-bottom: 10px;
margin-top: 15px;
}
.site-footer {
border-radius: 1.358vw 1.358vw 0 0;
/* margin-bottom: 2.717vw; */
padding: 17px 17px 0px 17px;
width: calc(100%);
left: 0;
margin-left: 0;
}
.jv-product__related {
display: block;
/* Было width:360px — наследие полноширинного дизайна сопутствующих.
Блок лежит внутри «Приобрести» с полем 20px, поэтому на экране 360
он вылезал за правый край на 26px, а на 320 — на 66px. Полосы не
было видно только потому, что html на мобилке обрезан overflow-x:clip;
там, где clip не поддерживается, вылезала нижняя прокрутка. */
width: 100%;
max-width: 100%;
overflow:hidden;
border-radius: 10px 0 0 10px;
border-right: none;
margin-left: 0;
margin-right: 0;
}
.jv-product__related-slider {
gap: 10px;
width: 100%;
}
}
/* JW: горизонтальная карусель миниатюр на узких экранах (≤1200px):
фото сверху, 4 миниатюры снизу, стрелки ‹ › по бокам. Ширину миниатюр (ровно 4)
ставит JS (initProductImageSlider), ориентацию он берёт из flex-direction дорожки. */
@media (max-width: 1200px) {
.jv-product__slider-thumbs {
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
}
.jv-product__slider-thumbs-viewport {
flex: 1 1 auto;
min-width: 0;
width: auto;
height: auto !important;
overflow: hidden;
}
.jv-product__slider-thumbs-track {
flex-direction: row;
gap: 8px;
}
.jv-product__slider-thumb {
flex: 0 0 auto;
border-radius: 10px;
}
.jv-product__slider-nav {
flex: 0 0 auto;
margin: 0;
}
/* стрелки вверх/вниз → влево/вправо (‹ ›) */
.jv-product__slider-nav svg {
transform: rotate(-90deg);
}
}
/* Логистика: семантическая таблица (замена -колонок, P1 аудит).
Первая строка (уровни упаковки как заголовки колонок) — обычная строка
tbody (th[scope=row]="Упаковка" + td на уровень), не выделяется отдельным
thead-стилем — фидбэк: «сделай такой же строкой, как и другие». */
.jv-product__logical { display: block; overflow: hidden; }
.jv-logtable { width: 100%; border-collapse: collapse; }
/* #583: 16px, как подпись и значение в «Технических характеристиках»
(.jv-table-dots-label / .jv-table-dots-value) — соседние блоки читались
разным кеглем: 18 против 16. */
.jv-logtable th[scope="row"] { text-align: left; font-weight: 500; font-size: 16px; color: var(--jv-text-primary); padding: 8px 20px; white-space: nowrap; }
/* #635 (QA 14.08): max-width:140px + ellipsis + nowrap резали длинные значения —
«ГОФРОКАРТОН ТРЕХСЛОЙНЫЙ» показывался как «ГОФРОКАРТОН ТРЕХС…», и узнать
материал упаковки было нельзя. Даём переносить по словам: числа из 1С приезжают
с NBSP («1 000»), так что разряды по-прежнему не разрываются. */
.jv-logtable td { text-align: center; color: #999; font-weight: 500; font-size: 16px; padding: 8px; max-width: 200px; white-space: normal; overflow-wrap: break-word; }
.jv-logtable tbody tr:nth-child(odd) { background: #F2F3F6; }
.jv-logtable tbody tr:nth-child(even) { background: #fff; }
/* Размер синхронизирован с мобильным брейкпоинтом ТХ-блока (.jv-table-dots-*
тоже уходит на 16px именно на ≤499px, см. @media(max-width:499px) выше) —
раньше логистика переходила на мелкий шрифт своим отдельным брейкпоинтом
(767px, 13px) и «ехала» рассинхронизированно с соседним блоком ТХ. */
@media (max-width: 499px) {
/* #293: названия строк начинались на 18px от края блока против 21px у
соседних «Технических характеристик» — два блока подряд с разной левой
кромкой. Отступ переносим с ячейки на скроллер: сама таблица тогда
выровнена по ТХ, а горизонтальная прокрутка остаётся на всю ширину. */
/* #349: white-space:normal ломал первый столбец — «Упаковка», «Кол-во в
коробке» и т.п. рвались на две-три строки, строки таблицы разъезжались по
высоте. Таблица и так лежит в .jv-logtable-scroll (overflow-x:auto), так
что заголовки строк держим в одну строку, как на десктопе. */
/* #476: отступ #293 жил на скроллере (padding-left) — зебра строк начиналась
после него, и слева от липких названий оставалась белая полоска. Возвращаем
отступ внутрь th: фон у него inherit от строки, полоса тянется до края. */
.jv-logtable th[scope="row"] { font-size: 16px; padding: 6px 0 6px 15px; white-space: nowrap; }
.jv-logtable td { font-size: 16px; padding: 6px; }
}
/* ==========================================================================
Нормализация типографики и читаемости карточки товара (аудит 2026-07)
Всё scoped под #product-product — на другие страницы не влияет.
========================================================================== */
/* Bare
Технические характеристики
— приводим к единой секционной шкале
(по умолчанию наследовал default.css h2 = 24px/600 → перебивал остальные H2 22px). */
#product-product .jv-product__specifications > h2 {
font-size: var(--jv-font-size-2xl); /* 22px */
font-weight: var(--jv-font-weight-extrabold); /* 700 */
line-height: var(--jv-line-height-heading);
color: var(--jv-text-primary);
margin: 0 0 var(--jv-gap-2xl) 0;
}
/* Единый вертикальный ритм строк для секционных заголовков карточки
(были 100% tight — многострочные RU-заголовки слипались). */
#product-product .jv-product__characteristics-title,
#product-product .jv-product__buy-title,
#product-product .jv-product__buy-subtitle {
line-height: var(--jv-line-height-heading);
}
/* #362: «Все характеристики» и прочие внутренние якоря карточки прокручивали
страницу так, что заголовок блока оказывался под липкой лентой фидбэка.
Смещение = высота ленты (её публикует jw-feedback.js в --jw-sticky-offset;
лента временная — без неё переменной нет) + 24px воздуха, чтобы заголовок не
упирался в край окна. */
.jv-product__content [id],
#jv-block-specifications,
#jv-block-logical,
#jv-block-documentation,
#jv-block-related {
scroll-margin-top: calc(var(--jw-sticky-offset, 0px) + 24px);
}
/* --------------------------------------------------------------------------
P0. Характеристики (dot-leader): убираем обрезку многоточием.
Была схема nowrap + ellipsis + раскрытие ТОЛЬКО по [title]:hover —
на тач-устройствах hover нет → значение не прочитать; на узких десктопах
метка и значение резались с обеих сторон. Теперь на тач и ≤1200px строка
переносится и читается целиком, разделитель-точки прячется при переносе.
-------------------------------------------------------------------------- */
@media (hover: none), (max-width: 1200px) {
#product-product .jv-product__specs .jv-table-dots-item,
#product-product .jv-product__bottom-inform .jv-table-dots-item {
align-items: flex-start;
gap: var(--jv-spacing-sm);
}
#product-product .jv-product__specs .jv-table-dots-label,
#product-product .jv-product__specs .jv-table-dots-value,
#product-product .jv-product__bottom-inform .jv-table-dots-label,
#product-product .jv-product__bottom-inform .jv-table-dots-value {
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: none;
word-break: break-word;
}
/* #364: было `flex: 1 1 auto` — название забирало всю свободную ширину, и
разделителю не оставалось ни пикселя (на 1165px он выходил шириной 0).
Растёт теперь разделитель, а название занимает столько, сколько занимает
текст, и по-прежнему переносится, если не влезло. */
#product-product .jv-product__specs .jv-table-dots-label,
#product-product .jv-product__bottom-inform .jv-table-dots-label {
flex: 0 1 auto;
}
#product-product .jv-product__specs .jv-table-dots-value,
#product-product .jv-product__bottom-inform .jv-table-dots-value {
flex: 0 0 auto;
text-align: right;
}
/* #364: точки прятались во всём диапазоне ≤1200px и на любом тач-устройстве —
на 1165px строка «Мощность, Вт …… 36» спокойно помещается в одну линию, а
лидера между названием и значением нет: связь читается хуже, чем на
широком экране. Прятать точки нужно только там, где название и значение
реально встают в разные строки, — это стек ≤767px, и его отдельно
выключает custom.css. В 768–1200 оставляем точки: если название всё-таки
перенеслось, разделитель просто сожмётся до своего min-width. */
#product-product .jv-product__specs .jv-table-dots-separator,
#product-product .jv-product__bottom-inform .jv-table-dots-separator {
display: block;
flex: 1 1 auto;
min-width: 20px;
align-self: baseline;
}
}
/* =====================================================================
JV Product — ШАПКА 3 колонки + masonry ниже (без reflow.js)
2026-07-23. Широкий экран: шапка = галерея | характеристики | приобрести
(3 колонки). Ниже — masonry в 2 колонки (описание+ТХ+логистика |
сопутствующие+документация). <1024 — одна колонка, порядок через order.
Новые классы каркаса (.jv-product__hero / __grid / __col) не пересекаются
со старыми — старые media-queries просто перестают находить элементы.
Оформление внутренних блоков (слайдер, партнёры, таблицы, ТХ) сохранено.
===================================================================== */
/* ---------- ШАПКА (hero): 3 колонки на широком. Галерее — больше доли
(фидбэк: на широких экранах справа оставалось воздуха больше, чем нужно
характеристикам/«приобрести» — забираем в пользу фото) ---------- */
.jv-product__hero{
display:grid;
grid-template-columns:1.4fr 1fr 0.85fr;
gap:20px;
align-items:stretch; /* было start — фидбэк: галерея визуально мельче соседей,
выровнять высоту с характеристиками/«Приобрести»; фото само не растягиваем
(аспект-рейшо), тянется карточка-обёртка галереи (см. .jv-product__gallery ниже) */
max-width:var(--jv-container-max-width);
margin:0 auto 20px;
}
.jv-product__hero > *{ min-width:0; margin:0; }
.jv-product__hero .jv-product__characteristics,
.jv-product__hero .jv-product__buy{ width:auto; max-width:none; min-width:0; }
/* #321: серый блок «Приобрести продукцию» больше НЕ тянется на всю высоту ряда.
Растяжку ставили, чтобы три колонки hero были одной высоты, но на товарах без
сопутствующих под логотипами партнёров оставалось до 400px пустой заливки
(«зачем растягивать серый фрейм? пусть будет компактно»). Галерея и
характеристики выравниваются между собой по-прежнему, блок покупки — по
контенту (то же, что форсит custom.css; здесь повторяем явно, чтобы правило
в контексте hero не спорило с ним). */
.jv-product__hero .jv-product__buy{ align-self:start !important; height:max-content !important; }
/* #342: до 1199px hero — две колонки, и серая карточка характеристик тянулась
до высоты галереи: под последней кнопкой оставалось ~118px пустой заливки
(«рамка не обнимает контент»). Ставим её по контенту — замер на проде:
600 → 501px, снизу остаётся только внутренний отступ 15px. На ≥1200 колонки
выравниваются между собой, там stretch по-прежнему уместен. */
@media (max-width: 1199px) {
.jv-product__hero .jv-product__characteristics{ align-self: start !important; height: max-content !important; }
/* #363: та же история, но теперь с галереей. Карточку характеристик по #342
посадили по контенту, а галерея осталась stretch — и уже она растягивалась
до высоты соседа: на 949px сверху над снимком копилось 204px пустой серой
заливки. Стретч колонок задумывался для трёхколоночной шапки (≥1200), где
он и остаётся; в двухколоночной каждая колонка живёт по своему контенту. */
.jv-product__hero #jv-block-gallery{ align-self: start; }
}
/* Переключатель вариантов: НЕ форсим колонку — на проде (сверено 26.07 на
живом товаре PTR 0732, 4 оси) узкие оси (Цвет корпуса, Цветовая
температура) естественно встают рядом в один ряд, а широкие (Мощность,
Световой поток — по 5 значений) сами занимают строку целиком. Это
штатный flex-direction:row + flex-wrap из custom.css — просто доверяем
ему. (Прошлая правка форсила column !important — было переисправлено.) */
/* Галерея — колонку расширили (1.4fr) под фото, место под него освобождаем
уменьшением превью-миниатюр (были 150px).
Высота карточки галереи стретчится под соседей (align-items:stretch на hero),
и это порождало качели: если фото тоже стретчить на всю высоту, то на узких
hero-колонках (1200–1439) коробка фото становилась 382×609 — квадратный
снимок висел в ней с 227px пустоты (фидбэк: «фото не заполняет контейнер»);
а если центрировать без аспекта — гуляли несимметричные зазоры.
Решение: фото держит СВОЮ пропорцию (1/1 — снимки товара квадратные, так
коробка максимально заполняется) и центрируется; лишняя высота карточки
становится симметричным полем сверху/снизу, а не дырой внутри белой
коробки. Миниатюры тоже по центру → вся галерея симметрична. */
.jv-product__gallery{ margin:0; display:flex; flex-direction:column; }
.jv-product__gallery .jv-product__slider{ flex:1; }
.jv-product__slider-main{ width:100%; aspect-ratio:1/1; height:auto; max-height:100%; align-self:center; }
/* Миниатюры НЕ стретчатся — их видимую высоту (сколько превью показывать)
считает JS под фикс. число, она не связана с высотой выросшей карточки:
при стретче внутри колонки появлялся пустой зазор вокруг стрелок.
ВАЖНО: только для вертикальной раскладки (>1200). Ниже слайдер
column-reverse, поперечная ось — горизонтальная, и align-self:center
сжимал горизонтальную ленту превью до ширины контента (324 вместо полной
ширины карточки) — из-за этого в неё влезало меньше миниатюр, чем могло
бы (фидбэк: «сюда может помещаться больше миниатюр — заложить это»). */
@media (min-width:1201px){
.jv-product__slider-thumbs{ align-self:center; }
/* «Галерея прыгает вниз и встаёт на место» (26.08.2026).
Высоту вьюпорта превью (сколько миниатюр видно) считает JS — layout() в
jv-product.js, а стартует он на DOMContentLoaded, то есть ПОСЛЕ первой
отрисовки. До этого лента развёрнута целиком: замер на проде (товар с 8
фото, 1440px) — дорожка 870px против 320px после инициализации. Лента
оказывалась ВЫШЕ главного фото, а высоту флекс-строки диктует самый
высокий элемент — вся галерея была на 550px выше, и страница схлопывалась
на глазах.
Первая попытка резервировала место под 3 миниатюры, а число видимых
по-прежнему считал JS под высоту фото (#215) — и на широких экранах он
раздвигал ленту уже после отрисовки: на 1920 замерено 320 → 540, скачок
220px. Прыжок всей галереи ушёл, а миниатюры продолжали дёргаться.
Поэтому число видимых превью теперь задаёт CSS и только CSS: ровно 4,
4*100 + 3*10 = 430px. На типовом десктопе это вровень с фото (1440: лента
430 при фото 426 — ради этого и затевался #215), на широких экранах лишняя
высота колонки уходит в симметричные поля сверху и снизу, потому что лента
центрирована. JS высоту больше не трогает — visibleCount() её читает.
Именно max-height, а не height: у товара с одним-двумя кадрами лента
остаётся по контенту и под ней не повисает пустая полоса.
min-height:0 обязателен: вьюпорт — флекс-элемент колонки, а у такого
min-height по умолчанию auto, то есть «не сжимайся ниже контента», и
max-height тихо проигрывает (проверено на проде: без него вьюпорт остаётся
870px по высоте всей ленты). */
.jv-product__slider-thumbs-viewport{
min-height: 0;
max-height: calc(100px * 4 + var(--jv-gap-md) * 3);
}
}
/* JW-FEEDBACK #724 (27.08.2026): «Почему тут 4 миниатюры? 5 вполне поместится».
Поместится — но не везде. Главное фото растёт вместе с окном (замерено на
PGX53: 1440 — 426px, 1600 — 495, 1720 — 546, 1920 и шире — 615), а лента
миниатюр стояла на 430px при любой ширине. На 1440 это ровно вровень с фото
и трогать нечего, а на 1920 рядом с 615-пиксельным снимком висела лента в
430 и лишние 185px уходили в пустые поля.
Пятая миниатюра требует 5*100 + 4*10 = 540px, значит порог — та ширина,
где фото дорастает до 540: это 1720px. Ниже него правило не действует, и
прежняя раскладка сохраняется без изменений.
Число видимых по-прежнему задаёт CSS и только CSS — JS его читает
(verticalCount), поэтому рывка из #215 здесь не возникает. */
@media (min-width: 1720px) {
.jv-product__slider-thumbs-viewport{
max-height: calc(100px * 5 + var(--jv-gap-md) * 4);
}
}
/* #363: фото вылезало из своей коробки — сверху и снизу на 20–25px, на белом
поле это читалось как «съехавший» снимок. Правило ниже задаёт картинке
height:100%, но процент считается от РОДИТЕЛЯ, а родитель — ссылка-обёртка
.jv-product__slider-main-link с height:auto: процент не разрешался, картинка
вставала натуральной высотой и перерастала коробку, которую max-height
поджал. Тянем ссылку на всю коробку — тогда height:100% у img работает и
object-fit:contain вписывает снимок честно. */
.jv-product__slider-main-link{ display:block; width:100%; height:100%; }
.jv-product__slider-main img{ display:block; width:100%; height:100%; object-fit:contain; border-radius:12px; }
.jv-product__slider-thumb{ width:100px; height:100px; }
/* ---------- MASONRY ниже: 2 колонки ---------- */
.jv-product__grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:20px;
align-items:start;
max-width:var(--jv-container-max-width);
margin:0 auto 30px;
}
.jv-product__col{ display:flex; flex-direction:column; gap:20px; min-width:0; }
.jv-product__col .jv-product__description,
.jv-product__col .jv-product__documentation{ width:auto; max-width:none; min-width:0; margin:0; }
/* ТХ + логистика — НЕ в masonry-колонках, а top-level блок под сеткой (сиблинг
.jv-product__grid, id=jv-block-bottominform), как и было на проде исходно:
нативная раскладка 50/50 (.jv-product__bottom-inform > .container{display:flex})
уже даёт два визуально одинаковых блока рядом (общий фон/радиус) — фидбэк
просил именно это сходство, поэтому здесь почти нет переопределений. */
#jv-block-logical > .jv-logtable-scroll{ width:auto; }
/* ---------- 1200–1439: галерее больше места, партнёры-столбик, тумбы мельче
(фидбэк превью #5) ---------- */
@media (min-width:1200px) and (max-width:1439px){
.jv-product__hero{ grid-template-columns:1.5fr 1fr 0.72fr; }
.jv-product__slider-thumb{ width:84px; height:84px; }
.jv-product__partner-item{ width:100%; }
/* узкая колонка «Приобрести» — заголовок в 2 строки, сокращаем (фидбэк #1) */
.jv-product__buy-title-extra{ display:none; }
/* на этой ширине сайдбар и так длинный из-за логотипов/переключателя —
сопутствующие убираем, чтобы не растягивать колонку ещё сильнее (фидбэк #5) */
#jv-block-related{ display:none; }
}
/* ---------- 600–1199: галерея | характеристики, «приобрести» на всю ширину вниз
(фидбэк превью #6/#7: галерею не растягивать, описание сразу после шапки) ---------- */
@media (max-width:1199px){
.jv-product__hero{ grid-template-columns:1.25fr 1fr; }
.jv-product__slider-main{ aspect-ratio:1/0.9; height:auto; }
.jv-product__slider-thumb{ width:84px; height:84px; }
.jv-product__buy{ grid-column:1 / -1; }
.jv-product__partner-item{ flex:1 1 160px; width:auto; min-width:160px; max-width:32%; }
/* Своя белая карточка у «Сопутствующих» (читается отдельно от «Приобрести»
с логотипами) — теперь безусловное правило ниже по файлу (было тут
отдельным override, но фидбэк попросил тот же вид и на широких экранах
тоже, так что вынесено в базовый .jv-product__related--mini). */
}
/* ---------- <861: галерея и характеристики тоже в 1 колонку (раньше это
происходило только <600 — фидбэк: уже на ~800px 2 узкие колонки тесные,
пора переносить характеристики под галерею). «Приобрести» и так full-width
с <1199. Брейкпоинт отдельный от <600 (не трогаем тумбы галереи —
64px там уместны, а на ~800px ещё нет). ---------- */
@media (max-width:860px){
.jv-product__hero{ grid-template-columns:1fr; }
.jv-product__hero #jv-block-gallery{ grid-column:auto; }
}
/* ---------- ≤1200: кнопки шапки товара (Поделиться/Сравнение/Избранное) не
помещаются в ряд с длинным названием — убираем подписи, оставляем иконки.
Раньше диапазон был 1025–1200 (ниже 1024 весь блок скрывался легаси-
правилом) — теперь блок не скрывается нигде, поэтому иконки остаются и
на самых узких экранах тоже (фидбэк: «не должны пропадать, оставь их»). ---------- */
@media (max-width:1200px){
.jv-product__top-right button p{ max-width:0; opacity:0; margin-left:0; }
}
/* ---------- <1024: masonry в одну колонку (описание → документация;
ТХ+логистика больше не в этой сетке — top-level блок ниже, см. #jv-block-bottominform) ---------- */
@media (max-width:1023px){
.jv-product__grid{ grid-template-columns:1fr; row-gap:20px; }
.jv-product__col{ display:contents; }
#jv-block-description{ order:1; }
#jv-block-documentation{ order:2; }
}
/* ---------- <600: шапка тоже в одну колонку ---------- */
@media (max-width:599px){
.jv-product__hero{ grid-template-columns:1fr; }
.jv-product__hero #jv-block-gallery{ grid-column:auto; }
.jv-product__buy{ grid-column:auto; }
.jv-product__slider-thumb{ width:64px; height:64px; }
/* Длинный «Артикул: ... Код для заказа: ...» не оставляет места 3 иконкам
(Поделиться/Избранное/Сравнение) в одной строке — сжимались в узкую
колонку и вставали друг под другом. Раз иконки теперь всегда видны
(фидбэк — не прятать их), пускаем ряд переноситься целиком: иконки
уходят на свою строку во всю ширину и там уже нормально идут в ряд.
Важно: класс .jv-product__top-options используется ДВАЖДЫ в разметке —
внешний контейнер (заголовок+иконки) И вложенная обёртка
избранное+сравнение ВНУТРИ .top-right. Скоуп через прямого потомка
.header-product, чтобы не задеть вложенный экземпляр (иначе избранное/
сравнение внутри тоже ловят flex-wrap:column и встают друг под другом). */
.header-product > .jv-product__top-options{ flex-wrap:wrap; row-gap:8px; }
.jv-product__top-right{ flex-wrap:nowrap; width:100%; justify-content:flex-end; }
}
/* Внутренний .jv-product__top-options (избранное+сравнение внутри .top-right)
ловил ЕЩЁ и легаси .jv-product__top-options{flex-direction:column} —
тот же класс, тот же баг. Специфичность 2 класса > 1, побеждает всегда.
gap приравнен к gap самого .top-right (--jv-gap-md, 10px): у внутренней
обёртки был свой --jv-gap-2xl (15px), из-за чего зазор Поделиться→Избранное
был 10px, а Избранное→Сравнение 15px (фидбэк: «большой отступ между
иконками, а должен быть одинаковый»). */
.jv-product__top-right .jv-product__top-options{
flex-direction:row; align-items:center; gap:var(--jv-gap-md);
}
/* Легаси @media(max-width:768px) ставит внешнему .jv-product__top-options
flex-direction:column — строка «Артикул / Код для заказа» и иконки
расходились на две строки, иконки уезжали влево под артикул (фидбэк:
«иконки опять прыгнули на другую строку», «должны быть в одну линию с
артикулом и кодом товара»). Возвращаем один ряд с прижатыми вправо
иконками; wrap оставляем страховкой — если совсем не влезает, перенос
произойдёт сам, но только там, где иначе был бы горизонтальный оверфлоу. */
@media (max-width:768px){
.header-product > .jv-product__top-options{
flex-direction:row; flex-wrap:wrap; align-items:center;
justify-content:space-between; column-gap:var(--jv-gap-2xl); row-gap:8px;
}
.header-product > .jv-product__top-options > .jv-product__top-right{
width:auto; margin-left:auto;
}
}
/* Легаси @media(max-width:500px)/(max-width:360px) задают
.jv-product__related{border-radius:10px 0 0 10px; overflow:hidden} —
наследие полноширинного дизайна сопутствующих (скругление только слева,
блок «уезжал» за край экрана). У карточки-варианта это срезало правые
углы; возвращаем полное скругление. */
.jv-product__related--mini{ overflow:visible; }
/* =====================================================================
Доработки карточки по фидбэку превью (2026-07-26)
===================================================================== */
/* Боковые отступы карточки: контейнер темы на этих ширинах даёт 0 (фидбэк #4).
#204: собственный padding уводил крошки и контент карточки на 40px внутрь —
на категориях контент начинается ровно с края контейнера (20px от окна).
Оставляем небольшой отступ только на мобильных, где контейнер прижат к краю. */
.product-content > .container{
padding-left:0;
padding-right:0;
box-sizing:border-box;
}
@media (max-width:540px){
.product-content > .container{ padding-left:6px; padding-right:6px; }
}
/* --- Сопутствующие: компактная карусель карточек в сайдбаре «Приобрести»
(правка 2026-07-26, по эталонному макету клиента — Frame 8647). Карточка
как везде на сайте: фото сверху (квадрат), название, кнопка «Подробнее»;
несколько штук в ряд со скроллом и стрелками пролистывания. Раньше блок
дублировался полноразмерным ещё и в masonry-сетке — убран оттуда, эта
версия единственная. Своей карточки-фона нет — сайдбар уже даёт фон. --- */
/* Самостоятельность блоку даёт крупный заголовок (в масштабе
.jv-product__buy-title), а НЕ своя подложка: белым остаются только
карточки товаров. Была белая карточка-обёртка — фидбэк: «не должно быть
белого фона у блока, только у карточек». Фон прозрачный, отбивка от
партнёров — отступом сверху. */
.jv-product__related--mini{
padding:0; background:transparent; border-radius:0; overflow:visible;
margin:0; margin-top:var(--jv-gap-2xl); border-top:none;
}
.jv-product__related--mini .jv-product__related-header{ margin-bottom:var(--jv-gap-2xl); }
.jv-product__related--mini .jv-product__related-header h3{
font-size:var(--jv-font-size-2xl); font-weight:var(--jv-font-weight-extrabold);
line-height:var(--jv-line-height-tight); color:var(--jv-text-primary);
}
.jv-product__related--mini .jv-product__related-prev,
.jv-product__related--mini .jv-product__related-next{ width:26px; height:26px; }
.jv-product__related--mini .jv-product__related-prev svg,
.jv-product__related--mini .jv-product__related-next svg{ width:22px; height:22px; }
.jv-product__related--mini .jv-product__related-slider{
gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:2px;
scrollbar-width:none;
/* #206: листание идёт через scrollLeft (см. jv-scripts.js) — плавность здесь */
scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){
.jv-product__related--mini .jv-product__related-slider{ scroll-behavior:auto; }
}
.jv-product__related--mini .jv-product__related-slider::-webkit-scrollbar{ display:none; }
.jv-product__related--mini .jv-product__related-item{
flex:0 0 auto; width:132px; min-width:0; scroll-snap-align:start;
flex-direction:column; align-items:stretch; gap:8px;
padding:8px; border-radius:var(--jv-radius-lg);
} /* старые @media(max-width:980px)/768px правила задают min-width:290px/145px
(унаследовано от полноширинного дизайна) — гасим, у нас узкая карточка-карусель */
.jv-product__related--mini .jv-product__related-image{
/* min-width:0 — гасим легаси-кламп .jv-product__related-image{min-width:125px}
из @media(max-width:1440px) (старый полноразмерный дизайн сопутствующих):
он не перебивался по специфичности (наше правило его не трогало вообще),
на узкой мини-карточке (116px контента) картинка вылезала за край на 9px. */
width:100%; min-width:0; height:auto; aspect-ratio:1/1; flex:none; border-radius:var(--jv-radius-md);
}
.jv-product__related--mini .jv-product__related-info{ gap:8px; height:auto; }
.jv-product__related--mini .jv-product__related-title{
font-size:12.5px; line-height:1.3; min-height:2.6em;
}
.jv-product__related--mini .jv-product__related-article{ display:none; }
.jv-product__related--mini .jv-product__related-btn{ display:none !important; } /* custom.css форсит display:inline-flex !important — перебиваем */
/* узкий сайдбар (1200–1439, партнёры в один столбик) — заголовку тесно рядом со стрелками */
@media (min-width:1200px) and (max-width:1439px){
.jv-product__related--mini .jv-product__related-header h3{ font-size:14px; }
.jv-product__related--mini .jv-product__related-item{ width:118px; }
}
/* --- Логистические параметры — табличный вид (референс клиента): уровни
упаковки колонками, поля строками, зебра-полоски. CSS для .jv-logtable
уже существовал (P1-аудит, семантическая таблица) — переиспользуем его,
разметку строит JS (packagingTable()) под реальный набор уровней/полей
каждого товара (от 1 до 5 уровней, не у всех одни и те же поля). --- */
/* 22px = var(--jv-font-size-2xl), тот же размер, что и у h2 ТХ-карточки
(#product-product .jv-product__specifications > h2) — было 24px, не совпадало. */
.jv-logistics__title{ margin:0 0 16px; padding-left:20px; font-size:22px; font-weight:700; color:var(--jv-text-primary); }
.jv-logtable-scroll{ overflow-x:auto; }
/* --- Список моделей: компактнее, больше колонок (фидбэк #3) --- */
.jv-product__models-head .title{ font-size:20px; font-weight:700; }
.jv-product__models-table{ font-size:14.5px; }
.jv-product__models-table th,
.jv-product__models-table th:first-of-type{ padding:10px 18px 10px 0; font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:#8a8a8a; min-width:0; }
/* ^ сбросило padding-left и у первой колонки — та же специфичность, что и у
исходного th:first-child{padding-left:24px}, но правило ниже по файлу
и потому побеждало; «Название» съезжало влево от текста строк ниже */
.jv-product__models-table th:first-of-type{ padding-left:24px; }
.jv-product__models-table td{ padding:10px 18px 10px 0; color:#666; }
.jv-product__models-table td.name{ font-size:14.5px; }
.jv-product__models-table tbody tr.is-current td{ background:#FDEEE8; }
.jv-product__models-table tbody tr.is-current td.name{ color:var(--jv-primary); }
/* =====================================================================
Перенос из прототипа-харнесса в боевой слой (2026-07-27).
Разметка добавлена в product.twig этим же заходом.
===================================================================== */
/* --- Гарантия пилюлей в одной строке с заголовком «Характеристики:» ---
У заголовка свой margin-top (spacing-xl): внутри flex-строки он не
схлопывается, а раздувает margin-box вниз (align-items:center центрирует
по margin-box, а не по видимому тексту) → пилюля вставала честно по
центру, а заголовок прижимался к низу. Отступ перенесён на сам ряд,
у заголовка обнулён с обеих сторон. */
.jv-characteristics-headrow{
display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin-top:20px; margin-bottom:14px;
}
.jv-characteristics-headrow .jv-product__characteristics-title{ margin:0; }
/* Фон серый, «Гарантия:» чёрным, значение и иконка — акцентом (не вся пилюля) */
.jv-warranty-pill{
display:inline-flex; align-items:center; gap:6px; flex:none; margin:0;
padding:6px 12px; background:#F2F3F6; border-radius:999px;
font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap;
}
.jv-warranty-pill svg{ flex:none; color:var(--jv-primary); }
.jv-warranty-pill__label{ color:var(--jv-text-primary); }
.jv-warranty-pill__value{ color:var(--jv-primary); font-weight:700; }
/* --- CTA-пара под ключевыми характеристиками.
#494 (итог, 07.08): всегда две кнопки в нейтральном виде (#492). У товаров
калькулятора вместо «Все характеристики» стоит «Рассчитать освещение»
(полный список характеристик и так ниже на странице). --- */
.jv-product__cta-row{ display:flex; gap:10px; margin:22px 0 4px; }
.jv-product__cta-row > *{
flex:1; min-width:0; height:48px; display:inline-flex; align-items:center;
justify-content:center; padding:0 14px; border-radius:12px; font-weight:600;
font-size:15px; line-height:1.2; text-align:center; text-decoration:none;
cursor:pointer; box-sizing:border-box;
transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* перебиваем базовые .jv-product__question-btn (width:100%, серый аутлайн) */
.jv-product__cta-row .jv-product__question-btn{
margin:0; width:auto; background:var(--jv-bg-white);
border:1px solid #E2E4EA; color:var(--jv-text-primary);
}
.jv-product__cta-row .jv-product__question-btn:hover{
background:var(--jv-bg-white); border-color:#C7CBD4; color:var(--jv-text-primary);
}
/* #488: стрелки листания в увеличенном фото — дефолтные треугольники MFP
терялись на белых фото товаров; рисуем круглые белые кнопки с оранжевым
шевроном. Листание клавиатурой даёт галерея MagnificPopup. */
.jv-mfp .mfp-arrow{
width:48px; height:48px; margin-top:-24px; border-radius:50%;
background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='22' viewBox='0 0 14 22' fill='none'%3E%3Cpath d='M12 2L3 11l9 9' stroke='%23E94E1B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:.95;
}
.jv-mfp .mfp-arrow:hover{ opacity:1 }
.jv-mfp .mfp-arrow:before,.jv-mfp .mfp-arrow:after{ display:none }
.jv-mfp .mfp-arrow-left{ margin-left:14px }
.jv-mfp .mfp-arrow-right{ margin-right:14px; transform:scaleX(-1) }
/* #493/#494: обе левые кнопки ряда — один нейтральный вид */
.jv-specs-alllink, .jv-calc-link{
background:var(--jv-bg-white); border:1px solid #E2E4EA; color:var(--jv-text-primary);
}
.jv-specs-alllink:hover, .jv-calc-link:hover{
background:var(--jv-bg-white); border-color:#C7CBD4; color:var(--jv-text-primary); text-decoration:none;
}
@media (max-width:420px){ .jv-product__cta-row{ flex-direction:column; } }
/* --- Тултип-словарик у метки характеристики («?» рядом с названием).
Только в полном списке ТХ — разметку даёт twig по словарю jv_tips. --- */
.jv-hint{
display:inline-flex; align-items:center; justify-content:center;
width:16px; height:16px; margin-left:6px; border-radius:50%;
/* #352: было `font: … system-ui` — шорткат сбрасывал и семейство, поэтому и
сама «?», и облачко подсказки рисовались системным SF Pro / Segoe UI
вместо фирменного TT Norms Pro («что-то не то со шрифтом»). Семейство
наследуем от страницы, задаём только начертание/кегль. */
background:#e8e8e8; color:#777; font-weight:600; font-size:11px; line-height:1;
cursor:help; position:relative; vertical-align:middle; flex:none;
}
.jv-hint:hover, .jv-hint:focus{ background:var(--jv-primary); color:var(--jv-bg-white); outline:none; }
.jv-hint::after{
content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px);
transform:translateX(-50%); width:260px; background:var(--jv-text-primary);
color:var(--jv-bg-white); font-weight:400; font-size:12.5px; line-height:1.45; padding:10px 12px;
border-radius:8px; opacity:0; visibility:hidden; transition:opacity .15s;
z-index:20; pointer-events:none; text-align:left; white-space:normal;
}
.jv-hint::before{
content:''; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
border:6px solid transparent; border-top-color:var(--jv-text-primary);
margin-bottom:-4px; opacity:0; visibility:hidden; transition:opacity .15s; z-index:20;
}
.jv-hint:hover::after, .jv-hint:focus::after,
.jv-hint:hover::before, .jv-hint:focus::before{ opacity:1; visibility:visible; }
/* у правого края колонки подсказка не должна уезжать за карточку */
.jv-product__specifications-items .jv-table-dots-item:nth-child(2n) .jv-hint::after{
left:auto; right:0; transform:none;
}
/* QA 29.07 (#246): «подсказка пустая». Тултип рисуется в ::after самой «?», а строка
характеристики (.jv-table-dots-item) имеет overflow:hidden (jv-components.css:113,
плюс мобильный оверрайд в custom.css) — облачко обрезалось по границе строки и
выглядело пустым. Снимаем клиппинг ТОЛЬКО у строк с подсказкой: обрезка длинных
значений живёт на .jv-table-dots-label (свой overflow+ellipsis) и не страдает. */
.jv-table-dots-item:has(.jv-hint){ overflow: visible !important; }
/* =====================================================================
QA-раунд 30.07 — карточка товара (#291, #295, #296)
Блок в конце файла: легаси-медиа выше по файлу (480/500/768/980)
задают те же свойства с той же специфичностью и иначе побеждают.
===================================================================== */
/* #291: логотипы партнёров стояли по 2 в ряд, но фиксированной ширины —
справа оставался мёртвый зазор, а карточка высотой 63px делала логотипы
мелкими. Делим ряд ровно пополам и добавляем высоты. */
@media (max-width: 575px) {
.jv-product__partner-item {
width: calc(50% - 5.5px);
min-width: 0;
max-width: none;
height: 88px;
}
}
/* #295 (отступ h1 сверху) живёт в custom.css рядом с общесайтовым правилом
.catalog-product__container h1 — оно с !important и перебивает этот файл. */
/* #296 (правило удалено в QA 05.08, #465/#475): раньше здесь прятался первый
top-option — «Артикул», дублировавший «Код для заказа». После #443 артикул
из шапки убран совсем, первым стал сам код — и правило прятало его. */
/* #466: кнопка «Код для заказа» после клика на 2с подсвечивается (класс
вешает jvCopyText в jv-scripts.js) — фидбэк на копирование виден в месте
клика, а не только тостом в углу. */
.jv-product__top-option button.jv-copied p { color: var(--jv-primary, #E94E1B); }
.jv-product__top-option button.jv-copied .copy-icon path {
stroke: var(--jv-primary, #E94E1B);
fill: #FDEAE2;
}
/* #294: крестик просмотрщика фото. Штатный mfp-close — полупрозрачный «×»
на белом поле картинки, его не видели. Делаем заметную кнопку в углу
экрана (closeBtnInside:false в product.twig выносит её из картинки). */
.jv-mfp .mfp-close,
.jv-mfp .mfp-close:active {
width: 44px;
height: 44px;
right: 12px;
top: 12px;
padding: 0;
line-height: 44px;
/* Сама кнопка на проде приходит ПУСТОЙ (символ «×» в неё не попадает —
отсюда и жалоба «нет крестика»), поэтому рисуем знак псевдоэлементом,
а собственный текст кнопки гасим, чтобы не задвоился. */
font-size: 0;
color: #fff;
opacity: 1;
background: rgba(0, 0, 0, .45);
border-radius: 50%;
text-align: center;
}
.jv-mfp .mfp-close::before {
content: '×';
font-size: 34px;
line-height: 44px;
color: #fff;
}
.jv-mfp .mfp-close:hover { background: var(--jv-primary, #E94E1B); }
/* #334: крестиков стало ДВА. MagnificPopup в режиме image всегда кладёт свой
внутрь .mfp-figure, а при closeBtnInside:false
добавляет ещё и кнопку в .mfp-wrap. Библиотека внутренний div прячет, но наш
блок выше (#294) поднимал opacity и фон у ЛЮБОГО .mfp-close — внутренний
всплывал обратно. Оставляем один — кнопку в углу экрана. */
.jv-mfp .mfp-figure .mfp-close { display: none !important; }
/* #334: белая подложка под фото. Снимки товаров идут с прозрачным фоном, и на
тёмном оверлее чёрный светильник сливался с подложкой.
#497: снизу поле шире — под точки-переключатели (рисует jvMfpUi в twig). */
.jv-mfp .mfp-figure figure {
position: relative;
background: #fff;
border-radius: 14px;
padding: 18px 18px 48px;
}
/* #497: счётчик «N of M» — в левый верхний угол фото, на тёмной подложке
(стоял голым текстом под правым нижним углом карточки). */
.jv-mfp .mfp-bottom-bar { position: static; margin-top: 0; }
.jv-mfp .mfp-counter {
position: absolute;
top: 28px;
left: 28px;
right: auto;
background: rgba(0, 0, 0, .55);
color: #fff;
padding: 4px 11px;
border-radius: 20px;
font-size: 12.5px;
line-height: 1.5;
white-space: nowrap;
}
/* #497: точки-переключатели в нижнем поле карточки; при большом количестве
фото точки ужимаются (flex-shrink), но остаются в одну строку */
.jv-mfp-dots {
position: absolute;
left: 18px;
right: 18px;
bottom: 17px;
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
flex-wrap: nowrap;
line-height: 0;
}
.jv-mfp-dot {
flex: 0 1 9px;
width: 9px;
height: 9px;
min-width: 5px;
padding: 0;
border: none;
border-radius: 50%;
background: #D9DBE0;
cursor: pointer;
transition: background-color .15s ease;
}
.jv-mfp-dot:hover { background: #b9bcc4; }
.jv-mfp-dot.is-active { background: var(--jv-primary, #E94E1B); }
.jv-mfp .mfp-figure img.mfp-img { background: #fff; border-radius: 8px; }
/* тень-подложка библиотеки под фигурой больше не нужна — фон рисует сама фигура */
.jv-mfp .mfp-figure:after { display: none !important; }
/* =====================================================================
#365 — единая анимация наведения для кликабельных элементов карточки
---------------------------------------------------------------------
Отклик на ховер был собран из трёх разных: часть ссылок чуть темнела
серым (--jv-text-tertiary → --jv-text-secondary, разницы почти не видно),
«Похожие» заливались оранжевым, «Все характеристики» подтягивала серую
рамку на полтона. Приводим всё к контракту дизайн-системы (jw-buttons.css):
ссылка-текст уходит в бренд-цвет, кнопка с рамкой получает оранжевую рамку
и оранжевый текст, длительность у всех одна — --jv-transition-fast.
Заливки и рамки, которые уже сделаны по контракту (.jv-product__related-btn,
.jv-product__cta-row .jv-product__question-btn), не трогаем.
===================================================================== */
.jv-product__certificate-link,
.jv-product__certificate-link p,
.jv-product__documentation-right-right,
.jv-product__documentation-right-right p,
.jv-product__partners-toggle,
.jv-product__description-toggle p,
.jv-product__specifications-expand p {
transition: color var(--jv-transition-fast);
}
.jv-product__certificate-link:hover,
.jv-product__certificate-link:hover p,
.jv-product__documentation-right-right:hover,
.jv-product__documentation-right-right:hover p,
.jv-product__partners-toggle:hover,
.jv-product__description-toggle:hover p,
.jv-product__specifications-expand:hover p {
color: var(--jv-primary);
}
/* иконки внутри ссылок раскрашены через stroke/fill currentColor — подхватят цвет сами */
/* #494: «Все характеристики» больше не кнопка — правило рамки снято,
ховер текстовой ссылки задан в блоке CTA выше */
/* Базовая «Задать вопрос» вне cta-row тоже уходила в серый */
.jv-product__question-btn:hover {
border-color: var(--jv-primary);
color: var(--jv-primary);
}
@media (prefers-reduced-motion: reduce) {
.jv-product__certificate-link,
.jv-product__documentation-right-right,
.jv-product__partners-toggle { transition: none; }
}
/* ==== #18 · ТАБЛИЦЫ КАРТОЧКИ НА УЗКИХ ЭКРАНАХ ====
Горизонтальная прокрутка у обеих таблиц уже была, но при сдвиге вправо
уезжал и первый столбец — оставались голые цифры без понимания, к чему они
относятся. Липкий первый столбец + подсказка, что таблицу можно листать. */
@media (max-width: 900px) {
/* «Логистические параметры»: слева названия строк (Количество, Объём, Вес) */
.jv-logtable th[scope="row"] {
position: sticky;
left: 0;
z-index: 2;
background: inherit; /* подхватывает полосатость строки */
box-shadow: 1px 0 0 rgba(0, 0, 0, .07);
}
/* #665: у «Списка моделей» название больше НЕ липнет. Липкая колонка
требовала узкой ширины (иначе съедала пол-экрана), а в узкую колонку
длинное имя разворачивалось на пять строк — строка таблицы вырастала до
106px. Заказчик выбрал обычную прокрутку: имя занимает нормальную ширину,
таблица листается целиком. У «Логистических параметров» липкость
оставлена — там слева имена показателей, без них цифры не читаются.
Вертикальную липкость шапки не трогаем, она про другое. */
/* Подсказка «листается вбок»: тень у краёв, пока прокрутка не упёрлась.
Чистый CSS — две белые «маски» скроллятся вместе с содержимым (local)
и закрывают тени, когда доехали до края. */
.jv-logtable-scroll,
.jv-product__models-scroll {
background:
linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .13), transparent) left center / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .13), transparent) right center / 12px 100% no-repeat scroll;
}
}
@media (max-width: 575px) {
/* 18px в таблице на телефоне — половина ширины уходит на две колонки */
.jv-logtable th[scope="row"],
.jv-logtable td { font-size: 14px; padding: 8px 12px; }
/* #511: «Упаковка» и прочие имена строк — ровно под заголовком блока
(у .jv-logistics__title слева 20px, у ячеек было 12) */
.jv-logtable th[scope="row"] { padding-left: 20px; }
.jv-product__models-table { font-size: 14px; }
.jv-product__models-table th,
.jv-product__models-table td { padding: 12px 16px 12px 0; }
/* #683: названия исполнений стояли на 20px от края экрана, а подписи
характеристик и заголовки блоков — на 26px: две соседние таблицы шли по
разным вертикалям. Ровняем по характеристикам (14 + 6 = 20 → 26). */
.jv-product__models-table th:first-child,
.jv-product__models-table td:first-child { padding-left: 20px; }
/* #512: колонка «Название» съедала почти весь экран (325px из 385:
custom.css запрещает перенос nowrap'ом) — на телефоне разрешаем перенос
и зажимаем ширину, рядом становится виден артикул. Специфичность
поднята (.jv-product__models-scroll …), чтобы перебить !important
из custom.css при его позднем порядке загрузки. */
.jv-product__models-scroll .jv-product__models-table td.name { white-space: normal !important; }
.jv-product__models-table th:first-of-type { min-width: 0; }
/* #665: ширина 140px досталась от липкой колонки (#512) — она была вынужденно
узкой, чтобы не закрывать таблицу собой. Липкости больше нет, поэтому имени
можно дать читаемые 190px, а лишнее гасить многоточием. */
.jv-product__models-table th:first-child,
.jv-product__models-table td:first-child { width: auto; max-width: none; min-width: 190px; }
/* Две строки вместо пяти: строка таблицы 68px вместо 106px, на экран влезает
вдвое больше моделей. Полное имя — на самой карточке, ссылка ведёт туда. */
.jv-product__models-scroll .jv-product__models-table td.name a {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* ========== Применяется в отраслях (BACKLOG 7.6 / 8.3.9) ==========
Перелинковка карточки с разделом «Отрасли». Оформление повторяет соседний
блок «Документация» — те же токены отступов, фона и радиуса, чтобы новый
блок не выглядел чужим в правой колонке. */
.jv-product__industries {
padding: var(--jv-spacing-xl);
background: var(--jv-bg-light);
border-radius: var(--jv-radius-xl);
margin-bottom: var(--jv-spacing-xl);
}
.jv-product__industries .jv-product__documentation-title {
font-weight: var(--jv-font-weight-extrabold);
font-size: var(--jv-font-size-2xl);
line-height: var(--jv-line-height-heading);
color: var(--jv-text-primary);
margin: 0 0 var(--jv-spacing-lg) 0;
}
.jv-product__industries-list {
display: flex;
flex-wrap: wrap;
gap: var(--jv-spacing-sm);
margin: 0;
padding: 0;
list-style: none;
}
/* Чипсы, а не строчный список: отраслей у товара до пяти, в столбик они
съедали бы высоту правой колонки. */
.jv-product__industries-link {
display: inline-block;
padding: 6px 14px;
background: var(--jv-bg-white, #fff);
border: 1px solid var(--jv-border, #e6e8ec);
border-radius: 999px;
font-size: var(--jv-font-size-sm);
line-height: 1.4;
color: var(--jv-text-primary);
text-decoration: none;
transition: border-color .15s ease, color .15s ease;
}
.jv-product__industries-link:hover,
.jv-product__industries-link:focus-visible {
border-color: var(--jv-primary);
color: var(--jv-primary);
text-decoration: none;
}
/* ==== #570 · ТХ товара: показатель всегда влезает целиком ====
Было: у названия и у значения одинаковый flex-shrink:1, поэтому на длинных
названиях («Диапазон номинального рабочего напряжения, В») ужималось само
значение — «198-253» превращалось в «198-2…». Теперь:
1) значение не сжимается (flex: 0 0 auto) — усечение берёт на себя название,
полный текст названия остаётся в title и в ховер-раскрытии;
2) кегль ТХ 18 → 16px: в ту же ширину влезает примерно на 12% больше текста.
Ограничение max-width:65% у значения — страховка от аномально длинных
значений, чтобы название не схлопнулось в одно многоточие.
На ≤500px кегль и так 16px, ломать нечего. */
#product-product .jv-product__specs .jv-table-dots-label,
#product-product .jv-product__specs .jv-table-dots-value,
#product-product .jv-product__bottom-inform .jv-table-dots-label,
#product-product .jv-product__bottom-inform .jv-table-dots-value {
font-size: 16px;
}
#product-product .jv-product__specs .jv-table-dots-label,
#product-product .jv-product__bottom-inform .jv-table-dots-label {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#product-product .jv-product__specs .jv-table-dots-value,
#product-product .jv-product__bottom-inform .jv-table-dots-value {
flex: 0 0 auto;
max-width: 65%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Разделитель не должен «съедать» место у названия: минимум точек хватает. */
#product-product .jv-product__specs .jv-table-dots-separator,
#product-product .jv-product__bottom-inform .jv-table-dots-separator {
min-width: 10px;
margin: 0 8px;
}
/* Ховер-раскрытие полного текста (#341/#408) — повторяем с той же специфичностью,
иначе правила выше (с #product-product) перебивают его и подсказка не работает. */
#product-product .jv-product__specs .jv-table-dots-label[title]:not([title=""]):hover,
#product-product .jv-product__specs .jv-table-dots-value[title]:not([title=""]):hover,
#product-product .jv-product__bottom-inform .jv-table-dots-label[title]:not([title=""]):hover,
#product-product .jv-product__bottom-inform .jv-table-dots-value[title]:not([title=""]):hover {
max-width: none;
overflow: visible;
white-space: normal;
word-break: break-word;
z-index: 2;
}
/* #655: увеличение фото в полноэкранном просмотре (js/jv-mfp-zoom.js).
Кадр обрезаем по карточке — увеличенная картинка не должна вылезать на
тёмный оверлей поверх стрелок, счётчика и точек. */
.jv-mfp .mfp-figure figure { overflow: hidden; }
.jv-mfp .mfp-figure img.mfp-img { transition: transform .12s ease-out; }
.jv-mfp .mfp-figure figure.is-zoomed img.mfp-img { transition: none; }
.jv-mfp-zoom {
position: absolute;
right: 14px;
bottom: 12px;
display: flex;
gap: 6px;
z-index: 3;
}
.jv-mfp-zoom__btn {
width: 32px;
height: 32px;
padding: 0;
border: 1px solid #E3E5EA;
border-radius: 8px;
background: #fff;
color: var(--jv-text-secondary, #303131);
font-size: 18px;
line-height: 1;
cursor: pointer;
transition: border-color .15s ease, color .15s ease;
}
.jv-mfp-zoom__btn:hover {
border-color: var(--jv-primary, #E94E1B);
color: var(--jv-primary, #E94E1B);
}
/* ===== Блок цены магазина: цена + кнопка всегда в одну строку =====
Идёт в конце файла осознанно: выше по файлу .jv-product__price-block
переводится в колонку медиазапросами 1024 и 980 (там раньше жила кнопка
корзины во всю ширину). Нам нужна строка на любой ширине, поэтому
перебиваем их последним словом. */
.jv-product__price-block {
flex-direction: row;
/* wrap, а не nowrap: на узкой правой колонке (планшет ~1280) цена и кнопка
рядом не помещались, и «1 629 ₽» ломалось на три строки. Теперь при
нехватке места кнопка уходит под цену, а сама цена не рвётся никогда. */
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 15px 20px;
}
.jv-product__price-left {
width: auto;
/* не сжимаем: сумма важнее, чем соседство с кнопкой в одну строку */
flex: 0 0 auto;
}
.jv-product__price-block .jv-product__price-label,
.jv-product__price-block .jv-product__price-current {
white-space: nowrap;
}
/* Цена тёмная, как в макете (Figma 505-76): оранжевый здесь спорил с кнопкой
рядом — два акцента одного цвета в одной карточке. */
.jv-product__price-block .jv-product__price-current {
color: #4C4C4C;
}
.jv-product__price-buy {
flex: 1 1 auto;
min-width: 0;
}
/* Текст кнопки не переносим: «Купить онлайн» в две строки выглядит сломанным. */
.jv-vendor-price__btn {
width: auto;
padding: 0 28px;
white-space: nowrap;
}
@media (max-width: 1024px) {
.jv-product__price-block { flex-direction: row; }
.jv-product__price-left { width: auto; }
}
@media (max-width: 980px) {
.jv-product__price-block { flex-direction: row; }
.jv-product__price-left { width: auto; }
}
/* Совсем узкие экраны: кегль цены и отступы кнопки ужимаем, но строку держим. */
@media (max-width: 480px) {
.jv-product__price-block { gap: 12px; padding: 15px; }
.jv-product__price-block .jv-product__price-current { font-size: 26px; }
.jv-vendor-price__btn { padding: 0 16px; font-size: var(--jv-font-size-base); min-height: 52px; }
}
@media (max-width: 360px) {
.jv-product__price-block .jv-product__price-current { font-size: 22px; }
.jv-vendor-price__btn { padding: 0 12px; font-size: 13px; }
}
/* Под кнопкой «Показать всех партнеров» свой отступ не нужен: снизу блок и так
держит padding 20px, вместе получалось 35px и низ карточки провисал. */
.jv-product__partners-toggle {
margin-bottom: 0;
}
/* Галерея не должна тянуться под высоту правой колонки: .jv-product__hero —
грид с align-items:stretch, и когда блок покупки вырастает (раскрыли всех
партнёров), фото получало серые поля сверху и снизу и уезжало от заголовка.
Прижимаем к верху — высоту диктует само фото. */
.jv-product__gallery {
align-self: start;
}
/* =====================================================================
Пилюля «Новинка» на главном фото карточки (19.08.2026)
Метка приходит из 1С характеристикой «Новинка» = «Да»; в плитках
каталога и поиска её рисует .jv-product-card__status (jv-category.css) —
здесь тот же облик для крупного фото.
position:relative нужен самой коробке фото: она уже overflow:hidden,
поэтому пилюля не вылезет за скруглённый угол.
pointer-events:none — под пилюлей лежит ссылка на лайтбокс, метка не
должна перехватывать клик по фото.
===================================================================== */
.jv-product__slider-main {
position: relative;
}
.jv-product__badge-new {
position: absolute;
top: 12px;
left: 12px;
z-index: 3;
padding: 6px 12px;
background: var(--jv-accent);
color: #fff;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.4px;
border-radius: 6px;
pointer-events: none;
}
@media (max-width: 767px) {
.jv-product__badge-new {
top: 8px;
left: 8px;
padding: 5px 10px;
font-size: 11px;
}
}
/* #681 (19.08): прежде здесь стояло @media (hover: none) { .jv-h1-copy__btn
{ opacity: 1 } } — на тач-устройствах иконку копирования показывали всегда,
раз ховера там нет. Заказчик попросил обратное: на мобилке её быть не должно.
Скрытие живёт в custom.css (мобильная пачка QA 19.08); здесь оставлен след,
чтобы правило не вернули «как было». */
/* =====================================================================
#671: заголовок товара копируется по клику (19.08.2026)
Иконка проявляется по наведению — постоянная кнопка рядом с H1 шумит
и спорит с «Кодом для заказа» ниже. На тач-устройствах ховера нет,
поэтому там иконка видна всегда (@media (hover: none)).
.jv-copied — общий класс подтверждения из jvCopyText (#466).
===================================================================== */
.jv-h1-copy {
cursor: pointer;
}
.jv-h1-copy__btn {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-left: 8px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
}
.jv-h1-copy:hover .jv-h1-copy__btn,
.jv-h1-copy__btn:focus-visible {
opacity: 1;
}
.jv-h1-copy__btn svg path {
transition: stroke 0.15s ease;
}
.jv-h1-copy:hover .jv-h1-copy__btn svg path {
stroke: var(--jv-accent);
}
.jv-h1-copy.jv-copied .jv-h1-copy__btn {
opacity: 1;
}
@media (max-width: 767px) {
/* #681: на мобилке иконки копирования быть не должно (ховера там нет, она
просто висит хвостом у заголовка). Тап по самому названию копирует
по-прежнему. Правило живёт здесь, а не в custom.css: этот файл грузится
позже, и при равной специфичности выигрывал бы его же display:inline-flex. */
.jv-h1-copy__btn { display: none; }
}
/* #681: правило «@media (hover: none) { .jv-h1-copy__btn { opacity: 1 } }» снято.
Оно показывало иконку на всех тач-устройствах — заказчик попросил убрать её
с мобилки совсем (копирование по тапу на заголовок работает по-прежнему). */
/* ─────────────────────────────────────────────────────────────
26.08.2026 — документы в главном блоке карточки.
Переехали из нижнего блока «Документация» (там остались только
сертификаты). Иконка типа файла и слово «Скачать» убраны: иконки
у трёх строк выглядели одинаково, а «Скачать» дублировало то, что
и так очевидно по клику. Вместо них — бейдж формата: он несёт
информацию (IES у КСС ≠ PDF).
───────────────────────────────────────────────────────────── */
.jv-product__docs {
margin: 0 0 27px 0;
padding-top: 18px;
border-top: 1px solid var(--jv-border);
}
.jv-product__docs-label {
margin: 0 0 10px 0;
font-size: var(--jv-font-size-sm);
font-weight: var(--jv-font-weight-bold);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--jv-text-muted);
}
.jv-product__docs-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jv-product__doc {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 14px 9px 11px;
border: 1.5px solid #e2e4ea;
border-radius: 10px;
background: var(--jv-bg-white);
font-size: var(--jv-font-size-base);
font-weight: var(--jv-font-weight-semibold);
line-height: 1.2;
color: var(--jv-text-primary);
text-decoration: none;
transition: border-color .15s, color .15s;
}
.jv-product__doc:hover,
.jv-product__doc:focus-visible {
border-color: var(--jv-primary);
color: var(--jv-primary);
text-decoration: none;
}
.jv-product__doc-fmt {
flex: none;
padding: 3px 5px;
border-radius: 4px;
background: #b9bcc4;
font-size: 9.5px;
font-weight: var(--jv-font-weight-extrabold);
letter-spacing: .04em;
line-height: 1;
color: var(--jv-bg-white);
transition: background-color .15s;
}
.jv-product__doc:hover .jv-product__doc-fmt,
.jv-product__doc:focus-visible .jv-product__doc-fmt {
background: var(--jv-primary);
}
/* Длинные имена («Кривая силы света») на узкой колонке не должны рвать сетку */
.jv-product__doc-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 767px) {
.jv-product__docs-list {
gap: 7px;
}
.jv-product__doc {
padding: 8px 12px 8px 10px;
font-size: var(--jv-font-size-sm);
}
}
/* Попап зума не помещался в экран (прокрутка + карточка уезжала под край).
MagnificPopup ставит картинке max-height = высоте окна и ничего не знает
ни про поля белой карточки (18px сверху, 48px снизу под точки), ни про
собственный padding 40px 0 у .mfp-img — итог: карточка на 66px выше окна.
Считаем высоту сами: гасим padding картинки и вычитаем поля фигуры плюс
воздух по 32px сверху и снизу. */
.jv-mfp .mfp-container { padding: 0 56px; }
.jv-mfp .mfp-figure img.mfp-img {
padding: 0;
max-height: calc(100vh - 130px) !important;
}
@media (max-width: 767px) {
/* на телефоне поля по 56px съедали половину ширины кадра */
.jv-mfp .mfp-container { padding: 0 10px; }
.jv-mfp .mfp-figure figure { padding: 14px 14px 42px; }
.jv-mfp .mfp-figure img.mfp-img { max-height: calc(100vh - 100px) !important; }
}