/* =========================================================
nk-product.css — слой группы «product»
Карточка товара: /catalog/<раздел>/<товар>/ (catalog.element, табы, галерея, похожие) — группа product
Подключается в header.php после css/nk-base.css (прямой с ?v=filemtime).
Правила писать ТОЛЬКО здесь и только под скоупом body.nk-inner + своя обёртка страницы
(например body.nk-inner .nk-product-...). Токены (--nk-*) и компоненты (.nk-btn, .nk-field,
.nk-check, .nk-card, .nk-tile, .nk-panel ...) — из nk-base.css, не переопределять глобально.
Обёртки группы (разметка — catalog.element/.default/template.php, tabs/*.php, catalog/catalog/element.php):
.nk-pd — div.product-detail (галерея + инфо + табы)
.nk-pd-gal — галерея (.product-detail-images), .nk-pd__info — правая колонка
.nk-pd-tabs — табы (.product-detail-tabs: ul.tabs + .tabs-content)
.nk-pd-srv / .nk-pd-help / .nk-pd-similar / .nk-pd-lead — нижние блоки element.php
Старые правила template_styles.css (.product-detail-*, .tech-prop*, .docs-list, .product-item-actions)
перебиваются здесь специфичностью; класс .product-item-actions с кнопок карточки снят в разметке.
Карточки «Похожих»/«Подходящих» (.product-item) — группа catalog, здесь не стилизуются.
========================================================= */
body.nk-inner .nk-pd {
--pd-line: #e9eef5;
--pd-soft: #eef4fb;
--pd-muted: #6b7485;
color: var(--nk-text);
font-weight: 300;
}
body.nk-inner .nk-pd ul { margin: 0; padding: 0; list-style: none; }
body.nk-inner .nk-pd p { margin: 0; }
/* ---------- Баннер: длинное название товара в H1 ---------- */
body.nk-inner .nk-top--product .nk-top__title { max-width: 1040px; font-size: 40px; line-height: 48px; text-wrap: balance; }
/* ---------- Первый экран: галерея + инфо ---------- */
body.nk-inner .nk-pd .nk-pd__top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
gap: 24px;
align-items: start;
}
/* Галерея: белая панель r30, превью слева, главное фото справа */
body.nk-inner .nk-pd .nk-pd-gal {
position: sticky; /* правая колонка выше галереи — фото остаётся в кадре; top ≥ 84 (под липкой шапкой) */
top: 96px;
display: flex;
gap: 16px;
flex: none;
max-width: none;
height: 580px;
padding: 20px;
border-radius: 30px;
background: #fff;
box-shadow: var(--nk-shadow-tile);
}
body.nk-inner .nk-pd .nk-pd-gal__thumbs {
position: relative;
flex: 0 0 92px;
width: 92px;
height: 100%;
margin: 0;
padding: 0;
}
body.nk-inner .nk-pd .product-detail-thumb {
width: 100%;
height: auto;
border: 1.5px solid var(--pd-line, #e9eef5);
border-radius: 18px;
background: #fff;
cursor: pointer;
overflow: hidden;
transition: border-color .2s, box-shadow .2s;
}
body.nk-inner .nk-pd .product-detail-thumb img { width: 100%; height: 100%; padding: 6px; object-fit: contain; display: block; }
body.nk-inner .nk-pd .product-detail-thumb:hover { border-color: #bfe4fb; }
body.nk-inner .nk-pd .product-detail-thumb.swiper-slide-thumb-active { border-color: var(--nk-blue); box-shadow: 0 0 0 2px rgba(75, 186, 249, .18); transform: none; } /* template_styles: scale(1.05) обрезался overflow превью (>10 фото — без swiper-backface-hidden) */
/* Мини-стрелки превью (вверх/вниз); позиционирование из style.css компонента перебиваем */
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-prev.mini,
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-next.mini {
--swiper-navigation-size: 11px;
display: flex !important; /* style.css компонента ставит block — шеврон уезжает к краю круга */
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 0;
border-radius: 50%;
background: #fff;
box-shadow: 0 3px 10px rgba(20, 38, 100, .16);
color: var(--nk-navy);
z-index: 5 !important;
transition: opacity .2s, background .2s, color .2s;
}
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-prev.mini { top: 4px !important; bottom: auto !important; }
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-next.mini { top: auto !important; bottom: 4px !important; }
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-prev.mini:hover,
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-next.mini:hover { background: var(--nk-grad-sq); color: #fff; }
body.nk-inner .nk-pd .nk-pd-gal__thumbs .swiper-button-disabled { opacity: 0 !important; pointer-events: none; }
body.nk-inner .nk-pd .nk-pd-gal--single .nk-pd-gal__thumbs { display: none; }
/* Главное фото */
body.nk-inner .nk-pd .nk-pd-gal__main {
flex: 1 1 auto;
min-width: 0;
height: 100%;
border: 0;
border-radius: 22px;
background: #fff;
}
body.nk-inner .nk-pd .product-detail-picture { display: flex; align-items: center; justify-content: center; height: 100%; }
body.nk-inner .nk-pd .product-detail-picture a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; cursor: zoom-in; }
/* width/height: auto — у ![]()
есть атрибуты width/height (размер самой крупной копии): без auto рамка картинки растягивалась бы на весь слайд */
body.nk-inner .nk-pd .product-detail-picture img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
body.nk-inner .nk-pd .nk-pd-gal__empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 22px; background: var(--nk-card); color: var(--nk-navy); font-size: 17px; font-weight: 400; }
/* Стрелки главного фото — круги в стиле .nk-arrow (классы swiper-button-* нужны initDetailSwiper) */
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-prev,
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-next {
--swiper-navigation-size: 15px;
width: 48px;
height: 48px;
margin-top: -24px;
border-radius: 50%;
background: #fff;
box-shadow: 0 4px 14px rgba(20, 38, 100, .14);
color: var(--nk-navy);
transition: background .2s, color .2s, opacity .2s;
}
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-prev { left: 8px; }
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-next { right: 8px; }
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-prev:hover,
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-next:hover { background: var(--nk-grad-sq); color: #fff; }
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-disabled { opacity: 0; }
body.nk-inner .nk-pd .nk-pd-gal--single .nk-pd-gal__main > .swiper-button-prev,
body.nk-inner .nk-pd .nk-pd-gal--single .nk-pd-gal__main > .swiper-button-next { display: none; }
/* Точки/счётчик (строит script.js компонента) — только на мобильных, где превью скрыты */
body.nk-inner .nk-pd .nk-pd-gal__nav { display: none; }
body.nk-inner .nk-pd .nk-pd-gal__dots { margin: 0; }
/* полоска 5px, а область нажатия ~25px: прозрачные поля по вертикали + фон только по content-box */
body.nk-inner .nk-pd .nk-pd-gal__dots { gap: 4px; }
body.nk-inner .nk-pd .nk-pd-gal__dots button { box-sizing: content-box; width: 24px; height: 5px; padding: 10px 2px; background-clip: content-box; }
body.nk-inner .nk-pd .nk-pd-gal__count {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 12px;
border-radius: 999px;
background: var(--pd-soft, #eef4fb);
color: var(--nk-navy);
font-size: 14px;
font-weight: 700;
}
/* ---------- Правая колонка ---------- */
body.nk-inner .nk-pd .nk-pd__info {
flex: none;
margin: 0;
padding: 34px 36px 36px;
border-radius: 30px;
background: #fff;
box-shadow: var(--nk-shadow-tile);
}
body.nk-inner .nk-pd .nk-pd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
body.nk-inner .nk-pd .nk-pd__stock {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 14px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
}
body.nk-inner .nk-pd .nk-pd__stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
body.nk-inner .nk-pd .nk-pd__stock.is-in { background: #e8f6ee; color: #1f8a4c; }
body.nk-inner .nk-pd .nk-pd__stock.is-order { background: var(--pd-soft, #eef4fb); color: var(--nk-navy); }
body.nk-inner .nk-pd .nk-pd__info .product-detail-art { margin: 0; font-family: inherit; font-size: 15px; line-height: 18px; font-weight: 300; color: var(--pd-muted, #6b7485); }
/* Цена */
body.nk-inner .nk-pd .nk-pd__price { margin-top: 22px; }
body.nk-inner .nk-pd .nk-pd__price .product-item-price-current {
display: block;
font-size: 44px;
line-height: 1.05;
font-weight: 700;
color: var(--nk-navy);
letter-spacing: -.01em;
white-space: nowrap;
}
body.nk-inner .nk-pd .nk-pd__price.is-request .product-item-price-current { font-size: 32px; white-space: normal; }
body.nk-inner .nk-pd .nk-pd__price .nk-pd__old { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
body.nk-inner .nk-pd .nk-pd__price .product-item-price-old { font-size: 18px; font-weight: 300; color: var(--pd-muted, #6b7485); text-decoration: line-through; }
body.nk-inner .nk-pd .nk-pd__price .product-item-economy {
display: inline-flex;
align-items: center;
height: 30px;
margin: 0;
padding: 0 14px;
border-radius: 999px;
background: var(--nk-grad-sq);
color: #fff;
font-size: 15px;
font-weight: 700;
}
body.nk-inner .nk-pd .nk-pd__price-note { margin: 8px 0 0; font-size: 15px; line-height: 1.35; color: var(--pd-muted, #6b7485); }
body.nk-inner .nk-pd .nk-pd__price-note--terms { flex-basis: 100%; font-size: 14px; }
/* «Подтверждение соответствия» под вкладками карточки (задача Л10; includes/conformity.php) */
body.nk-inner .nk-pd-conf { margin-top: 28px; padding: 26px 30px; border-radius: 30px; background: var(--nk-card, #fff); }
body.nk-inner .nk-pd-conf__title { margin: 0 0 14px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--nk-text); }
body.nk-inner .nk-pd-conf__list { margin: 0; padding: 0; list-style: none; }
body.nk-inner .nk-pd-conf__item { margin: 0 0 8px; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; font-weight: 300; }
body.nk-inner .nk-pd-conf__item b { font-weight: 500; }
body.nk-inner .nk-pd-conf__item a { color: var(--nk-blue); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
body.nk-inner .nk-pd-conf__note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--nk-grey); }
@media (max-width: 640px) {
body.nk-inner .nk-pd-conf { margin-top: 18px; padding: 18px; border-radius: 24px; }
body.nk-inner .nk-pd-conf__title { font-size: 19px; }
body.nk-inner .nk-pd-conf__item { font-size: 15px; }
body.nk-inner .nk-pd-conf__item a { white-space: normal; }
}
/* «Официальный дилер» во вкладке «Документация» (20.10.2026; includes/dealer.php) — та же плашка, что у документов о соответствии */
body.nk-inner .nk-pd-dealer { display: flex; align-items: flex-start; gap: 24px; margin-top: 20px; padding: 22px 30px 22px 22px; border-radius: 30px; background: var(--nk-card, #fff); }
body.nk-inner .nk-pd-dealer__pic { flex: 0 0 120px; display: block; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: var(--nk-shadow-tile); transition: box-shadow .2s; }
body.nk-inner .nk-pd-dealer__pic:hover { box-shadow: var(--nk-shadow-tile-h); }
body.nk-inner .nk-pd-dealer__pic img { display: block; width: 120px; height: auto; }
body.nk-inner .nk-pd-dealer__body { min-width: 0; }
body.nk-inner .nk-pd-dealer__title { margin: 0 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--nk-text); }
body.nk-inner .nk-pd-dealer__text { margin: 0 0 10px; font-size: 16px; line-height: 1.45; font-weight: 300; }
body.nk-inner .nk-pd-dealer__file { margin: 0; }
body.nk-inner .nk-pd-dealer__link { color: var(--nk-blue); font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
body.nk-inner .nk-pd-dealer__size { font-size: 13px; color: var(--nk-grey); }
@media (max-width: 640px) {
/* превью и заголовок в ряд, текст и ссылка — на всю ширину */
body.nk-inner .nk-pd-dealer { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 0 14px; margin-top: 14px; padding: 16px 18px 18px; border-radius: 24px; }
body.nk-inner .nk-pd-dealer__body { display: contents; }
body.nk-inner .nk-pd-dealer__pic { border-radius: 6px; }
body.nk-inner .nk-pd-dealer__pic img { width: 60px; }
body.nk-inner .nk-pd-dealer__title { margin: 0; font-size: 19px; }
body.nk-inner .nk-pd-dealer__text, body.nk-inner .nk-pd-dealer__file { grid-column: 1 / -1; }
body.nk-inner .nk-pd-dealer__text { margin: 12px 0 8px; }
body.nk-inner .nk-pd-dealer__text, body.nk-inner .nk-pd-dealer__link { font-size: 15px; }
}
/* Предложения (SKU; локально не выводятся — оформление вслепую) */
body.nk-inner .nk-pd .offers-list { display: flex; flex-flow: row wrap; gap: 8px; margin-top: 22px; }
body.nk-inner .nk-pd .offers-list .offer-item {
height: 44px;
padding: 0 20px;
border: 1.5px solid var(--pd-line, #e9eef5);
border-radius: 999px;
background: #fff;
color: var(--nk-text);
font-size: 16px;
font-weight: 400;
transition: border-color .2s, background .2s, color .2s;
}
body.nk-inner .nk-pd .offers-list .offer-item:hover { border-color: var(--nk-blue); background: #fff; color: var(--nk-navy); }
body.nk-inner .nk-pd .offers-list .offer-item.active { border-color: transparent; background: var(--nk-grad-sq); color: #fff; font-weight: 700; }
/* Чипы площади (ссылки на соседние товары серии) */
body.nk-inner .nk-pd .related-products-list { margin: 24px 0 0; }
body.nk-inner .nk-pd .related-products-list + .related-products-list { margin-top: 16px; }
body.nk-inner .nk-pd .related-products-title { margin: 0 0 10px; font-size: 15px; line-height: 18px; font-weight: 700; color: var(--nk-text); }
body.nk-inner .nk-pd .related-products-subtitle { margin: 12px 0 8px; font-size: 14px; line-height: 17px; font-weight: 300; color: var(--pd-muted, #6b7485); }
body.nk-inner .nk-pd .related-products-subtitle:first-of-type { margin-top: 0; }
body.nk-inner .nk-pd .related-products-items { gap: 8px; }
body.nk-inner .nk-pd .related-product-item {
min-width: 56px;
height: 42px;
padding: 0 16px;
border: 1.5px solid transparent;
border-radius: 999px;
background: var(--nk-bg);
color: var(--nk-text);
font-size: 16px;
font-weight: 400;
overflow: hidden;
}
body.nk-inner .nk-pd .related-product-item:hover { border-color: var(--nk-blue); background: #fff; color: var(--nk-navy); }
body.nk-inner .nk-pd .related-product-item.active,
body.nk-inner .nk-pd .related-product-item.active:hover { border-color: transparent; background: var(--nk-grad-sq); color: #fff; font-weight: 700; }
body.nk-inner .nk-pd .related-product-item.no-combination { background: var(--nk-bg); color: #a3a9b5; border-color: transparent; opacity: .7; }
body.nk-inner .nk-pd .related-product-item.no-combination:hover { opacity: 1; border-color: #d5dbe4; background: #fff; }
body.nk-inner .nk-pd .related-product-item.out-of-stock { color: #a3a9b5; }
body.nk-inner .nk-pd .related-product-item.out-of-stock::after { left: 10px; right: 10px; background: #a3a9b5; transform: rotate(-14deg); }
body.nk-inner .nk-pd .related-product-item.out-of-stock:hover { background: #fff; border-color: #d5dbe4; color: #8a92a0; }
/* out-of-stock ставится только товарам, которые нельзя купить (не «под заказ»); выбранный чип не зачёркиваем никогда */
body.nk-inner .nk-pd .related-product-item.active.out-of-stock { color: #fff; }
body.nk-inner .nk-pd .related-product-item.active.out-of-stock::after,
body.nk-inner .nk-pd .related-color-item.active.out-of-stock::after { content: none; display: none; }
body.nk-inner .nk-pd .related-color-item.active.out-of-stock { opacity: 1; }
/* Цвета серии */
body.nk-inner .nk-pd .related-colors-list { margin: 24px 0 0; }
body.nk-inner .nk-pd .related-colors-title { margin: 0 0 10px; font-size: 15px; line-height: 18px; font-weight: 300; color: var(--pd-muted, #6b7485); }
body.nk-inner .nk-pd .related-colors-title .current-color-name { font-weight: 700; color: var(--nk-text); }
body.nk-inner .nk-pd .related-colors-items { gap: 10px; }
body.nk-inner .nk-pd .related-color-item {
width: 44px;
height: 44px;
padding: 3px;
border: 2px solid transparent;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px var(--pd-line, #e9eef5);
}
body.nk-inner .nk-pd .related-color-item img,
body.nk-inner .nk-pd .related-color-item .color-placeholder { border-radius: 50%; }
/* внутренний контур образца: белый цвет не сливается с белой кнопкой */
body.nk-inner .nk-pd .related-color-item img { outline: 1px solid #c2cad7; outline-offset: -1px; }
body.nk-inner .nk-pd .related-color-item .color-placeholder { box-shadow: inset 0 0 0 1px #c2cad7; }
body.nk-inner .nk-pd .related-color-item:hover { border-color: #bfe4fb; }
body.nk-inner .nk-pd .related-color-item.active { border-color: var(--nk-blue); box-shadow: none; }
body.nk-inner .nk-pd .related-color-item.no-combination::before { border-radius: 50%; }
body.nk-inner .nk-pd .show-all-colors { margin-top: 10px; font-size: 14px; color: var(--nk-navy); }
/* Кнопки: «В корзину» (капсула), «Консультация» (вторичная), избранное (круг) */
body.nk-inner .nk-pd .nk-pd__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 28px 0 0;
}
body.nk-inner .nk-pd .nk-pd__buy { flex: 1 1 210px; min-width: 0; max-width: 260px; width: auto; height: 60px; padding: 0 7px 0 26px; font-size: 18px; }
body.nk-inner .nk-pd .nk-pd__buy .nk-btn__circle { width: 46px; height: 46px; }
body.nk-inner .nk-pd .nk-pd__buy .nk-btn__circle .nk-ui-i { width: 22px; height: 22px; }
body.nk-inner .nk-pd .nk-pd__buy:hover .nk-btn__circle { transform: none; }
body.nk-inner .nk-pd .nk-pd__consult {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 170px;
min-width: 0;
height: 60px;
padding: 0 24px;
border-radius: 999px;
background: var(--pd-soft, #eef4fb);
color: var(--nk-navy);
font-size: 17px;
font-weight: 700;
white-space: nowrap;
transition: background .2s, color .2s, box-shadow .2s;
}
body.nk-inner .nk-pd .nk-pd__consult:hover { background: var(--nk-navy); color: #fff; box-shadow: 0 8px 20px rgba(54, 82, 157, .25); }
body.nk-inner .nk-pd .nk-pd__fav {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--pd-soft, #eef4fb);
color: var(--nk-navy);
transition: background .2s, color .2s, transform .2s;
}
body.nk-inner .nk-pd .nk-pd__fav .nk-ui-i { width: 24px; height: 24px; }
body.nk-inner .nk-pd .nk-pd__fav:hover { background: #dcebf9; transform: scale(1.04); }
body.nk-inner .nk-pd .nk-pd__fav.active { background: var(--nk-grad-sq); color: #fff; }
body.nk-inner .nk-pd .nk-pd__fav.active svg { fill: currentColor; }
body.nk-inner .nk-pd .nk-pd__buy:focus-visible,
body.nk-inner .nk-pd .nk-pd__consult:focus-visible,
body.nk-inner .nk-pd .nk-pd__fav:focus-visible { outline: 3px solid rgba(75, 186, 249, .45); outline-offset: 2px; }
/* Кратко о товаре */
body.nk-inner .nk-pd .nk-pd-kp {
margin: 28px 0 0;
padding: 24px 0 0;
border-top: 1px solid var(--pd-line, #e9eef5);
border-radius: 0;
background: none;
}
body.nk-inner .nk-pd .nk-pd-kp__features { display: grid; gap: 10px; margin: 0 0 18px; }
body.nk-inner .nk-pd .nk-pd-kp__features li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.35; font-weight: 300; color: var(--nk-text); }
body.nk-inner .nk-pd .nk-pd-kp li::before { content: none; }
body.nk-inner .nk-pd .nk-pd-kp__check { flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nk-grad-sq); color: #fff; font-size: 14px; font-style: normal; }
body.nk-inner .nk-pd .nk-pd-kp__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.nk-inner .nk-pd .nk-pd-kp__item {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-height: 78px;
margin: 0;
padding: 14px 16px;
border-radius: 18px;
background: var(--nk-card);
}
/* нечётное число свойств — последняя плитка на всю ширину, без «дырки» справа */
body.nk-inner .nk-pd .nk-pd-kp__item:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 64px; }
body.nk-inner .nk-pd .nk-pd-kp__val { font-size: 19px; line-height: 1.15; font-weight: 700; color: var(--nk-navy); overflow-wrap: anywhere; }
body.nk-inner .nk-pd .nk-pd-kp__val a { color: inherit; }
body.nk-inner .nk-pd .nk-pd-kp__name { font-size: 15px; line-height: 1.25; font-weight: 300; color: #4a5468; overflow-wrap: anywhere; }
/* ---------- Табы: капсулы-переключатели + карточка содержимого ---------- */
body.nk-inner .nk-pd .nk-pd-tabs { margin-top: 48px; }
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar {
display: flex;
flex-flow: row nowrap;
gap: 6px;
flex-wrap: wrap; /* >640: не помещается — вторая строка (прокрутка без полосы мышью недоступна); ≤640 — прокрутка */
width: fit-content;
max-width: 100%;
margin: 0;
padding: 6px;
border-radius: 32px; /* = половина высоты одной строки: одна строка — капсула, две — скруглённая плашка */
background: #fff;
box-shadow: var(--nk-shadow-tile);
}
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar li {
flex: none;
display: inline-flex;
align-items: center;
min-height: 0;
height: 52px;
padding: 0 26px;
border-radius: 999px;
background: transparent;
color: var(--nk-navy);
font-size: 17px;
font-weight: 400;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background .2s, color .2s;
}
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar li:hover { background: var(--nk-bg); }
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar li.active {
background: var(--nk-grad);
color: #fff;
font-weight: 700;
box-shadow: 0 6px 16px rgba(75, 186, 249, .3);
}
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs-content.nk-pd-tabs__body {
margin: 20px 0 0;
padding: 44px 48px 48px;
border-radius: 30px;
background: #fff;
box-shadow: var(--nk-shadow-tile);
}
body.nk-inner .nk-pd .nk-pd-tabs__body > .tab { color: var(--nk-text); }
/* Описание */
body.nk-inner .nk-pd .nk-pd-desc { max-width: 900px; font-size: 17px; line-height: 1.6; font-weight: 300; color: var(--nk-text); overflow-wrap: anywhere; }
body.nk-inner .nk-pd .nk-pd-desc b, body.nk-inner .nk-pd .nk-pd-desc strong { font-weight: 700; }
body.nk-inner .nk-pd .nk-pd-desc a { color: var(--nk-navy); text-decoration: underline; text-underline-offset: 3px; }
body.nk-inner .nk-pd .nk-pd-desc img { max-width: 100%; height: auto; border-radius: 18px; }
/* Описание собирается генератором (Л14, 13.10.2026 — nk_card.php): абзацы, подзаголовки и списки. В карточке ul и p сброшены
общим правилом в начале файла, поэтому отступы и маркеры задаются здесь. */
body.nk-inner .nk-pd .nk-pd-desc p { margin: 0 0 14px; }
body.nk-inner .nk-pd .nk-pd-desc > :last-child { margin-bottom: 0; }
body.nk-inner .nk-pd .nk-pd-desc h3 { margin: 26px 0 12px; font-size: 21px; line-height: 1.25; font-weight: 700; color: var(--nk-text); }
body.nk-inner .nk-pd .nk-pd-desc ul { margin: 0 0 14px; padding: 0; list-style: none; }
body.nk-inner .nk-pd .nk-pd-desc li { position: relative; margin: 0 0 8px; padding-left: 20px; }
body.nk-inner .nk-pd .nk-pd-desc li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--nk-blue); }
body.nk-inner .nk-pd .nk-pd-desc li b { font-weight: 500; }
body.nk-inner .nk-pd .nk-pd-desc__lead { font-size: 18px; }
body.nk-inner .nk-pd .nk-pd-desc__seller { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--pd-line); font-size: 15px; line-height: 1.5; color: var(--pd-muted); }
body.nk-inner .nk-pd .nk-pd-desc.is-clamped:not(.is-open) { position: relative; max-height: 560px; overflow: hidden; }
body.nk-inner .nk-pd .nk-pd-desc.is-clamped:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; }
body.nk-inner .nk-pd .nk-pd-desc__more {
display: inline-flex;
align-items: center;
height: 44px;
margin-top: 18px;
padding: 0 22px;
border: 0;
border-radius: 999px;
background: var(--pd-soft, #eef4fb);
color: var(--nk-navy);
font: 700 15px/1 'Geologica', Arial, sans-serif;
cursor: pointer;
transition: background .2s, color .2s;
}
body.nk-inner .nk-pd .nk-pd-desc__more:hover { background: var(--nk-navy); color: #fff; }
/* Подтабы (комплект: наружный / внутренние блоки) */
body.nk-inner .nk-pd .subtabs { gap: 8px; margin: 0 0 28px; padding: 0; border: 0; }
body.nk-inner .nk-pd .subtab-item {
display: inline-flex;
align-items: center;
height: 42px;
padding: 0 18px;
border-radius: 999px;
background: var(--nk-bg);
color: var(--nk-navy);
font-size: 15px;
font-weight: 400;
transition: background .2s, color .2s;
}
body.nk-inner .nk-pd .subtab-item:hover { background: var(--pd-soft, #eef4fb); }
body.nk-inner .nk-pd .subtab-item.active { background: var(--nk-navy); color: #fff; font-weight: 700; }
/* Характеристики: группы в 2 колонки, строки-таблица */
body.nk-inner .nk-pd .tech-props {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px 56px;
max-width: none;
margin: 0;
}
body.nk-inner .nk-pd .tech-props .tech-prop-group { flex: none; max-width: none; min-width: 0; }
body.nk-inner .nk-pd .tech-props .tech-prop-group > p,
body.nk-inner .nk-pd .tech-props .tech-prop-group-name {
margin: 0 0 8px;
font-family: inherit;
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: var(--nk-navy);
}
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px 20px;
margin: 0;
padding: 11px 0;
border-bottom: 1px solid var(--pd-line, #e9eef5);
}
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li:last-child { border-bottom: 0; }
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span { font-size: 15px; line-height: 1.4; color: var(--nk-text); }
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-name {
flex: 1 1 55%;
display: block;
padding: 0;
background: none;
font-weight: 300;
color: var(--pd-muted, #6b7485);
}
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-value { flex: 1 1 45%; font-weight: 400; text-align: right; overflow-wrap: anywhere; }
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-value.blocks-linked { margin: 0; text-align: right; }
body.nk-inner .nk-pd .tech-props .prop-value a { color: var(--nk-navy); text-decoration: underline; text-decoration-color: rgba(54, 82, 157, .35); text-underline-offset: 3px; }
body.nk-inner .nk-pd .tech-props .prop-value a:hover { text-decoration-color: currentColor; }
body.nk-inner .nk-pd .nk-colon { display: none; }
/* Подсказка «?» (GroupperTooltips вешается на .hint-prop[id]) */
body.nk-inner .nk-pd .tech-props .hint-prop {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
min-width: 18px;
height: 18px;
margin-left: 6px;
vertical-align: 1px;
border-radius: 50%;
background: #eaf6fe;
cursor: help;
font-style: normal;
}
body.nk-inner .nk-pd .tech-props .hint-prop::before { content: "?"; font-size: 11px; line-height: 1; font-weight: 700; color: var(--nk-blue); }
body.nk-inner .nk-pd .tech-props .hint-prop { background-image: none; }
/* Комплектация (tabs/equipment.php — .tech-props.full) */
body.nk-inner .nk-pd .tech-props.full { grid-template-columns: minmax(0, 1fr); max-width: none; }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 8px;
padding: 20px 22px;
border: 0;
border-radius: 20px;
background: var(--nk-card);
}
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li span.prop-name { flex: none; font-size: 14px; color: #56617a; }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li span.prop-value { flex: none; text-align: left; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--nk-navy); }
/* список блоков комплекта — на всю ширину, каждый блок отдельной белой плашкой-ссылкой */
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li:has(.blocks-linked) { grid-column: 1 / -1; background: var(--nk-bg); }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li span.prop-value.blocks-linked {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
font-size: 15px;
line-height: 1.4;
font-weight: 400;
text-align: left;
}
body.nk-inner .nk-pd .tech-props.full .prop-value.blocks-linked br { display: none; }
body.nk-inner .nk-pd .tech-props.full .prop-value.blocks-linked a {
display: flex;
align-items: center;
min-height: 64px;
padding: 12px 18px;
border-radius: 16px;
background: #fff;
box-shadow: var(--nk-shadow-tile);
color: var(--nk-navy);
text-decoration: none;
transition: box-shadow .2s, transform .2s;
}
body.nk-inner .nk-pd .tech-props.full .prop-value.blocks-linked a:hover { box-shadow: var(--nk-shadow-tile-h); transform: translateY(-2px); }
/* Режимы и очистка: сетка плиток с галочкой вместо таблицы «Да/Нет» */
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props { grid-template-columns: minmax(0, 1fr); gap: 28px; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-prop-group ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li {
align-items: center;
gap: 12px;
min-height: 60px;
padding: 12px 16px;
border: 0;
border-radius: 16px;
background: var(--nk-bg);
}
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li span.prop-name { flex: 1 1 auto; color: var(--nk-text); font-weight: 400; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li span.prop-value { flex: 0 1 auto; font-weight: 700; color: var(--nk-navy); white-space: nowrap; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li.is-yes span.prop-value {
flex: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat, var(--nk-grad-sq);
color: transparent;
font-size: 0;
overflow: hidden;
}
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li.is-no { background: #fafbfc; box-shadow: inset 0 0 0 1px var(--pd-line, #e9eef5); }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li.is-no span { color: #9aa2b1; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li.is-no span.prop-value { font-weight: 400; }
/* Документация: карточки */
body.nk-inner .nk-pd .docs-list.nk-pd-docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.nk-inner .nk-pd .nk-pd-docs__item {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
padding: 16px 16px 16px 16px;
border-radius: 20px;
background: var(--nk-bg);
transition: box-shadow .2s, background .2s;
}
body.nk-inner .nk-pd .nk-pd-docs__item:hover { background: #fff; box-shadow: var(--nk-shadow-tile-h); }
body.nk-inner .nk-pd .docs-list .nk-pd-docs__ic {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin: 0;
border-radius: 16px;
background: var(--nk-grad-sq);
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
}
body.nk-inner .nk-pd .docs-list .nk-pd-docs__info { flex: 1 1 auto; min-width: 0; font-family: inherit; }
body.nk-inner .nk-pd .docs-list .doc-name { margin: 0; font-size: 15px; line-height: 1.3; font-weight: 400; color: var(--nk-text); overflow-wrap: anywhere; }
body.nk-inner .nk-pd .nk-pd-docs__size { display: block; margin-top: 3px; font-size: 13px; color: var(--pd-muted, #6b7485); }
body.nk-inner .nk-pd .docs-list .nk-pd-docs__dl {
flex: none;
display: inline-flex;
align-items: center;
height: 38px;
padding: 0 16px;
border-radius: 999px;
background: #fff;
box-shadow: var(--nk-shadow-tile);
color: var(--nk-navy);
font-family: inherit;
font-size: 14px;
line-height: 1;
font-weight: 700;
text-decoration: none;
transition: background .2s, color .2s;
}
body.nk-inner .nk-pd .docs-list .nk-pd-docs__dl:hover { background: var(--nk-grad-sq); color: #fff; }
/* Подходящие товары (второй catalog.section в табе): только отступ, карточки — группа catalog */
body.nk-inner .nk-pd #suitable_products > h2 { margin: 0 0 24px; font-size: 28px; font-weight: 400; }
/* белые карточки каталога не кладём на белую панель: у этой вкладки панель снимаем, карточки стоят на фоне #f5f6f9 */
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs-content.nk-pd-tabs__body:has(> #suitable_products.active) {
padding: 0;
background: transparent;
box-shadow: none;
}
body.nk-inner .nk-pd .nk-pd-tabs__body:has(> #suitable_products.active) { margin-top: 28px; }
/* ---------- Всплывающая подсказка «?» (GroupperTooltips: div.hint-popup в body, вне .nk-pd) ----------
Позицию считает script.js шаблонов grupper.list (справа от «?», а если не помещается — под ним в пределах экрана) */
body.nk-inner .hint-popup {
z-index: 980; /* контент: ниже липкой шапки (1000) */
box-sizing: border-box;
width: max-content;
max-width: min(340px, calc(100vw - 32px));
padding: 16px 44px 16px 18px;
border-radius: 18px;
background: #fff;
box-shadow: 0 10px 30px rgba(20, 38, 100, .16), 0 0 0 1px rgba(20, 38, 100, .05);
color: var(--nk-text);
font: 300 15px/1.45 'Geologica', Arial, sans-serif;
text-align: left;
overflow-wrap: anywhere;
}
body.nk-inner .hint-popup__text { padding: 0; }
body.nk-inner .hint-popup__close {
position: absolute;
top: 8px;
right: 8px;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--nk-bg);
color: var(--nk-navy);
font: 400 20px/1 Arial, sans-serif;
cursor: pointer;
transition: background .2s, color .2s;
}
body.nk-inner .hint-popup__close:hover { background: var(--nk-navy); color: #fff; }
@media (max-width: 640px) {
/* на телефоне — во всю ширину экрана с полями 16px (перебивает inline left из скрипта) */
body.nk-inner .hint-popup { left: 16px !important; right: 16px; width: auto; max-width: none; }
}
/* ---------- Нижние блоки element.php ---------- */
/* Услуги: заголовок как на главной, карточки .nk-srv — из основы */
body.nk-inner .nk-pd-srv .nk-srv { margin-top: 36px; }
/* «Не нашли, что искали?» — тёмная карточка с контактами */
body.nk-inner .nk-pd-help__in {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
padding: 48px 52px 52px;
border-radius: 30px;
background: var(--nk-card-dark);
color: #fff;
overflow: hidden;
}
body.nk-inner .nk-pd-help__in::after {
content: "";
position: absolute;
right: -120px;
top: -140px;
width: 380px;
height: 380px;
border-radius: 50%;
background: radial-gradient(closest-side, rgba(158, 233, 255, .28), rgba(158, 233, 255, 0));
pointer-events: none;
}
body.nk-inner .nk-pd-help__title { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 400; color: #fff; text-wrap: balance; }
body.nk-inner .nk-pd-help__title b { font-weight: 700; color: var(--nk-cyan); }
body.nk-inner .nk-pd-help__sub { margin: 14px 0 0; font-size: 19px; line-height: 1.3; font-weight: 300; color: rgba(255, 255, 255, .86); }
body.nk-inner .nk-pd-help__links { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
body.nk-inner .nk-pd-help .nk-pd-help__link {
display: inline-flex;
align-items: center;
gap: 10px;
height: 54px;
padding: 0 20px 0 8px;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: rgba(255, 255, 255, .1);
color: #fff;
font-size: 17px;
font-weight: 400;
white-space: nowrap;
transition: background .2s, border-color .2s;
}
body.nk-inner .nk-pd-help .nk-pd-help__link:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); color: #fff; }
body.nk-inner .nk-pd-help__ic { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--nk-grad-sq); font-style: normal; color: #fff; }
body.nk-inner .nk-pd-help__ic img { width: 18px; height: 18px; display: block; }
body.nk-inner .nk-pd-help__ic .nk-ui-i { width: 18px; height: 18px; }
/* Похожие товары: только обёртка и заголовок блока */
body.nk-inner .nk-pd-similar > h2 {
margin: 0 0 36px;
font-size: 43px;
line-height: 1.05;
font-weight: 400;
text-align: left;
color: var(--nk-text);
}
body.nk-inner .nk-pd-similar .block-btn { display: flex; justify-content: center; margin: 16px 0 0; }
/* «В каталог» — вторичная капсула (первичная — «Показать ещё» группы catalog над ней) */
body.nk-inner .nk-pd-similar .block-btn .site-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 260px;
height: 56px;
padding: 0 36px;
border-radius: 999px;
background: #fff;
box-shadow: inset 0 0 0 1.5px #cfe3f6;
color: var(--nk-navy);
font-size: 17px;
font-weight: 700;
filter: none;
transition: background .2s, color .2s, box-shadow .2s;
}
body.nk-inner .nk-pd-similar .block-btn .site-btn:hover { background: var(--nk-navy); color: #fff; box-shadow: 0 8px 20px rgba(54, 82, 157, .25); filter: none; }
/* 5 карточек на странице (PAGE_ELEMENT_COUNT=5, «Показать ещё» добавляет по 5): на широком экране — ровно 5 в ряд,
без одинокой пятой; сами карточки не трогаем, только колонки сетки в этой обёртке */
@media (min-width: 1261px) {
body.nk-inner .nk-pd-similar .products-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
/* без «Показать ещё» (последняя страница) — отступ от сетки как у неё */
body.nk-inner .nk-pd-similar .products-list-inner:not(:has(.custom-show-more-btn)) + .block-btn { margin-top: 36px; }
/* Инлайн-форма: .nk-lead из основы; старые поля .container больше не сужают панель */
body.nk-inner .nk-pd-lead { margin-top: 100px; }
body.nk-inner .nk-pd-lead .nk-lead { margin-top: 0; }
/* ---------- Адаптив ---------- */
@media (max-width: 1260px) {
body.nk-inner .nk-top--product .nk-top__title { font-size: 34px; line-height: 42px; }
body.nk-inner .nk-pd .nk-pd__top { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }
body.nk-inner .nk-pd .nk-pd-gal { height: 500px; padding: 16px; gap: 12px; }
body.nk-inner .nk-pd .nk-pd-gal__thumbs { flex-basis: 80px; width: 80px; }
body.nk-inner .nk-pd .nk-pd__info { padding: 28px 28px 30px; }
body.nk-inner .nk-pd .nk-pd__price .product-item-price-current { font-size: 38px; }
/* узкая правая колонка (1025–1260): «В корзину» на всю ширину, ниже «Консультация» + избранное */
body.nk-inner .nk-pd .nk-pd__buy { flex: 1 1 100%; max-width: none; }
body.nk-inner .nk-pd .nk-pd__consult { flex: 1 1 0; }
body.nk-inner .nk-pd .tech-props { gap: 32px 40px; }
/* компактнее табы: 5 вкладок в одну строку примерно до 1000px, дальше — перенос */
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar { gap: 4px; border-radius: 30px; }
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar li { height: 48px; padding: 0 18px; font-size: 16px; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-prop-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nk-inner .nk-pd .docs-list.nk-pd-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.nk-inner .nk-pd-similar > h2 { font-size: 36px; }
body.nk-inner .nk-pd-help__in { padding: 40px; }
body.nk-inner .nk-pd-help__title { font-size: 32px; }
}
@media (max-width: 1024px) {
body.nk-inner .nk-pd .nk-pd__top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
body.nk-inner .nk-pd .nk-pd-gal { position: relative; top: auto; height: 480px; }
body.nk-inner .nk-pd .nk-pd__buy { flex: 1 1 210px; max-width: 320px; }
body.nk-inner .nk-pd .nk-pd__consult { flex: 1 1 170px; }
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs-content.nk-pd-tabs__body { padding: 32px 30px 36px; }
body.nk-inner .nk-pd-lead { margin-top: 70px; }
}
@media (max-width: 900px) {
body.nk-inner .nk-top--product .nk-top__title { font-size: 28px; line-height: 34px; }
/* превью скрыты (и в старом CSS ≤768) — листаем стрелками, внизу точки/счётчик */
body.nk-inner .nk-pd .nk-pd-gal { display: block; height: auto; padding: 12px 12px 14px; }
body.nk-inner .nk-pd .nk-pd-gal__thumbs { display: none; }
body.nk-inner .nk-pd .nk-pd-gal__main { height: auto; aspect-ratio: 4 / 3; }
body.nk-inner .nk-pd .nk-pd-gal__nav { display: flex; justify-content: center; margin-top: 10px; }
body.nk-inner .nk-pd .tech-props { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
body.nk-inner .nk-top--product .nk-top__title { font-size: 22px; line-height: 28px; }
body.nk-inner .nk-pd .nk-pd-gal { border-radius: 24px; }
body.nk-inner .nk-pd .nk-pd-gal__main { aspect-ratio: 1 / 1; border-radius: 16px; }
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-prev,
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-next { width: 40px; height: 40px; margin-top: -20px; --swiper-navigation-size: 13px; }
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-prev { left: 2px; }
body.nk-inner .nk-pd .nk-pd-gal__main > .swiper-button-next { right: 2px; }
body.nk-inner .nk-pd .nk-pd__info { padding: 22px 18px 24px; border-radius: 24px; }
body.nk-inner .nk-pd .nk-pd__price { margin-top: 16px; }
body.nk-inner .nk-pd .nk-pd__price .product-item-price-current { font-size: 32px; }
body.nk-inner .nk-pd .nk-pd__price.is-request .product-item-price-current { font-size: 26px; }
/* кнопки: «В корзину» на всю ширину, ниже «Консультация» + избранное — текст в одну строку */
body.nk-inner .nk-pd .nk-pd__actions { gap: 10px; margin-top: 22px; }
body.nk-inner .nk-pd .nk-pd__buy { flex: 1 1 100%; max-width: none; height: 56px; font-size: 17px; }
body.nk-inner .nk-pd .nk-pd__buy .nk-btn__circle { width: 42px; height: 42px; }
body.nk-inner .nk-pd .nk-pd__consult { flex: 1 1 0; height: 56px; padding: 0 16px; font-size: 16px; }
body.nk-inner .nk-pd .nk-pd__fav { width: 56px; height: 56px; }
body.nk-inner .nk-pd .nk-pd-kp { margin-top: 22px; padding-top: 18px; }
body.nk-inner .nk-pd .nk-pd-kp__grid { gap: 8px; }
body.nk-inner .nk-pd .nk-pd-kp__item { min-height: 0; padding: 12px; border-radius: 16px; }
body.nk-inner .nk-pd .nk-pd-kp__val { font-size: 16px; }
body.nk-inner .nk-pd .nk-pd-kp__name { font-size: 14px; -webkit-hyphens: auto; hyphens: auto; }
body.nk-inner .nk-pd .nk-pd-tabs { margin-top: 32px; }
/* полоса табов — горизонтальная прокрутка внутри своей капсулы, на всю ширину контейнера */
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar {
flex-wrap: nowrap;
width: 100%;
padding: 5px;
border-radius: 999px;
overflow-x: auto;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
body.nk-inner .nk-pd .nk-pd-tabs__bar::-webkit-scrollbar { display: none; }
/* намёк на прокрутку: затухание у обрезанного края (классы is-more-l/-r ставит script.js компонента).
Липкие псевдоэлементы вместо mask-image — маска срезала бы тень капсулы */
body.nk-inner .nk-pd .nk-pd-tabs__bar::before,
body.nk-inner .nk-pd .nk-pd-tabs__bar::after,
body.nk-inner .nk-pd .subtabs::before,
body.nk-inner .nk-pd .subtabs::after {
content: "";
position: sticky;
z-index: 2;
flex: none;
align-self: stretch;
width: 44px;
pointer-events: none;
opacity: 0;
transition: opacity .2s;
}
body.nk-inner .nk-pd .nk-pd-tabs__bar::before,
body.nk-inner .nk-pd .subtabs::before { order: -1; left: 0; margin-right: -44px; background: linear-gradient(90deg, #fff 25%, rgba(255, 255, 255, 0)); }
body.nk-inner .nk-pd .nk-pd-tabs__bar::after,
body.nk-inner .nk-pd .subtabs::after { order: 99; right: 0; margin-left: -44px; background: linear-gradient(270deg, #fff 25%, rgba(255, 255, 255, 0)); }
/* липкая позиция считается от края содержимого (внутри padding 5px) — сдвигаем на padding */
body.nk-inner .nk-pd .nk-pd-tabs__bar::before { left: -5px; margin-left: -5px; border-radius: 999px 0 0 999px; }
body.nk-inner .nk-pd .nk-pd-tabs__bar::after { right: -5px; margin-right: -5px; border-radius: 0 999px 999px 0; }
body.nk-inner .nk-pd .subtabs::before { margin-left: -18px; }
body.nk-inner .nk-pd .subtabs::after { margin-right: -18px; }
body.nk-inner .nk-pd :is(.nk-pd-tabs__bar, .subtabs).is-more-l::before,
body.nk-inner .nk-pd :is(.nk-pd-tabs__bar, .subtabs).is-more-r::after { opacity: 1; }
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar li { height: 44px; padding: 0 16px; font-size: 15px; }
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs-content.nk-pd-tabs__body { margin-top: 12px; padding: 24px 18px 26px; border-radius: 24px; }
body.nk-inner .nk-pd .nk-pd-desc { font-size: 16px; line-height: 1.55; }
body.nk-inner .nk-pd .nk-pd-desc__lead { font-size: 16px; }
body.nk-inner .nk-pd .nk-pd-desc h3 { margin-top: 22px; font-size: 19px; }
body.nk-inner .nk-pd .nk-pd-desc__seller { font-size: 14px; }
body.nk-inner .nk-pd .subtabs { flex-wrap: nowrap; margin: 0 -18px 20px; padding: 0 18px; overflow-x: auto; scrollbar-width: none; }
body.nk-inner .nk-pd .subtabs::-webkit-scrollbar { display: none; }
body.nk-inner .nk-pd .subtab-item { flex: none; white-space: nowrap; height: 38px; padding: 0 14px; font-size: 14px; }
body.nk-inner .nk-pd .tech-props .tech-prop-group > p,
body.nk-inner .nk-pd .tech-props .tech-prop-group-name { font-size: 19px; }
/* строки характеристик: значение под названием */
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li { flex-direction: column; align-items: stretch; gap: 3px; padding: 10px 0; }
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-name,
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-value { flex: none; text-align: left; }
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-name { font-size: 14px; }
body.nk-inner .nk-pd .tech-props .tech-prop-group ul li span.prop-value.blocks-linked { text-align: left; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-prop-group ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li { flex-direction: row; align-items: center; min-height: 52px; padding: 10px 14px; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li span.prop-name { font-size: 15px; }
body.nk-inner .nk-pd :is(#regims, #ochistka) .tech-props .tech-prop-group ul li span.prop-value { text-align: right; }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul,
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li span.prop-value.blocks-linked { grid-template-columns: minmax(0, 1fr); }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li { padding: 16px; }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li span.prop-value { font-size: 21px; }
body.nk-inner .nk-pd .tech-props.full .tech-prop-group ul li span.prop-value.blocks-linked { font-size: 14px; }
body.nk-inner .nk-pd .docs-list.nk-pd-docs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
body.nk-inner .nk-pd .nk-pd-docs__item { flex-wrap: wrap; padding: 14px; }
body.nk-inner .nk-pd .docs-list .nk-pd-docs__ic { width: 44px; height: 44px; border-radius: 14px; }
body.nk-inner .nk-pd-srv .nk-srv { margin-top: 24px; }
body.nk-inner .nk-pd-help__in { gap: 20px; padding: 28px 20px 24px; border-radius: 24px; }
body.nk-inner .nk-pd-help__title { font-size: 26px; }
body.nk-inner .nk-pd-help__sub { font-size: 16px; }
body.nk-inner .nk-pd-help__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.nk-inner .nk-pd-help .nk-pd-help__link { height: 50px; font-size: 16px; }
body.nk-inner .nk-pd-similar > h2 { margin-bottom: 22px; font-size: 28px; line-height: 1.1; }
body.nk-inner .nk-pd-similar .block-btn { margin-top: 28px; }
body.nk-inner .nk-pd-similar .block-btn .site-btn { width: 100%; height: 56px; }
body.nk-inner .nk-pd-lead { margin-top: 60px; }
}
/* Фокус с клавиатуры у табов/подтабов (li[tabindex]) */
body.nk-inner .nk-pd.product-detail .nk-pd-tabs.product-detail-tabs .tabs.nk-pd-tabs__bar li:focus-visible,
body.nk-inner .nk-pd .subtab-item:focus-visible { outline: 3px solid rgba(75, 186, 249, .45); outline-offset: -3px; }