/* Start:/bitrix/components/bitrix/catalog/templates/.default/style.min.css?1783353538959*/ .grid .bx_content_section{margin-bottom:15px}.grid .bx_sidebar{margin-bottom:15px}.grid2x1 .bx_content_section{float:left;width:66%;margin-bottom:15px}.grid2x1 .bx_sidebar{float:right;width:33%;margin-bottom:15px;padding-left:5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media(max-width:960px){.grid2x1 .bx_sidebar{padding-left:4%}}@media(max-width:640px){.grid2x1 .bx_content_section,.grid2x1 .bx_sidebar{width:100%;float:none}.grid2x1 .bx_sidebar{padding-left:3%}}@media(max-width:479px){.grid2x1 .bx_sidebar{padding-left:1%}}.catalog-block-header{font-size:14px;font-weight:bold;text-align:left;margin:5px 0;padding:5px 15px;border-bottom:2px solid #d9dee6;color:#000}body.bx-theme-blue .catalog-block-header{border-color:#006cc0}body.bx-theme-green .catalog-block-header{border-color:#63aa28}body.bx-theme-red .catalog-block-header{border-color:#da3737}body.bx-theme-yellow .catalog-block-header{border-color:#f4b236} /* End */ /* Start:/local/templates/welle/components/bitrix/catalog.element/.default/style.css?179170789179878*/ /* ============================================================================ * ЭТАЛОННАЯ КАРТОЧКА ТОВАРА (PDP) — bitrix:catalog.element, шаблон сайта welle. * * ПОРТ ПРИНЯТОГО ПРОТОТИПА Design/prototypes/product-pdp/index.html («Э6-три», * принят владельцем целиком 09.08). Правила перенесены ОДИН В ОДИН вместе с их * авторскими комментариями — так будущая правка design ложится сюда без перевода. * * ─── ДВА ОТЛИЧИЯ ОТ ФАЙЛА ПРОТОТИПА, ОБА ВЫНУЖДЕННЫЕ ─────────────────────────── * 1. ВСЁ ЗАСКОУПЛЕНО ПОД .wt-pdp. В прототипе селекторы короткие (.t, .section, * .desc, .tabs, .field) — в отдельном файле это нормально, на боевом сайте это * мины: любой из них однажды поймает чужой блок. Имена классов внутри НЕ * переименованы намеренно: переименование порвало бы связь с макетом, и следующая * правка design потребовала бы перевода. Скоуп решает ту же задачу без этой цены. * 2. ИМЯ КОНТЕЙНЕРА — wtpdp, а не pdp. В прототипе контейнером был демо-фрейм .frame; * здесь контейнер — сама карточка. Пороги 780/1040/359 взяты один в один, но * считаются от ширины .wt-pdp, а не от вьюпорта: слева на странице стоит колонка * разделов, поэтому вьюпорт и ширина карточки — разные числа, и порог обязан * переезжать вместе с карточкой. * * НЕ ПЕРЕНЕСЕНО (демо-обвязка прототипа, о чём его шапка и предупреждает): * .frame / .frame-label — рамки вокруг состояний; * .todo и .proto-note — пометки «значение неизвестно» и «фото временное». * * ЗНАЧЕНИЯ — ТОЛЬКО ТОКЕНЫ /local/templates/welle/css/tokens/. Цветовых литералов нет, * кроме двух #ffffff у подложек изображений — они пояснены на месте. * ============================================================================ */ /* ---------- НЕЙТРАЛИЗАЦИЯ BOOTSTRAP 3 ВНУТРИ КАРТОЧКИ ---------- На страницах /catalog/ подключён /bitrix/css/main/bootstrap.min.css (Bootstrap 3.3.7) — его тянут штатные шаблоны комплексного компонента bitrix:catalog. Его элементные правила и класс .lead попадают внутрь карточки там, где у прототипа соперника не было: прототип — отдельный файл, Bootstrap в нём отсутствует. Замер 09.08 (Playwright, обе темы, 320–1440): 11 расхождений с макетом, все от пяти правил ниже. Специфичность .wt-pdp <элемент> = (0,1,1) и .wt-pdp .lead = (0,2,0) — выше, чем у Bootstrap; !important не нужен и не ставится, порядок подключения роли не играет. Класс .lead НЕ переименован намеренно: имя пришло из принятого макета, переименование порвало бы связь с ним — ровно та причина, по которой при порте не переименовывали остальные классы. */ .wt-pdp .lead { font-size: inherit; font-weight: inherit; line-height: inherit; margin-bottom: 0; } .wt-pdp dt, .wt-pdp dd { font-weight: 400; line-height: normal; } .wt-pdp label { font-weight: 400; margin-bottom: 0; } .wt-pdp h1, .wt-pdp h2, .wt-pdp h3, .wt-pdp h4, .wt-pdp h5, .wt-pdp h6 { line-height: normal; } .wt-pdp caption { padding-top: 0; } .wt-pdp { container-type: inline-size; container-name: wtpdp; padding-bottom: var(--space-16); font-family: var(--font-sans); color: var(--foreground); } .wt-pdp *, .wt-pdp *::before, .wt-pdp *::after { box-sizing: border-box; } .wt-pdp .pdp-top { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; } /* ---------- БЕЙДЖ НАЛИЧИЯ ---------- Тот же самостоятельный кусок, что в шаблоне листинга (catalog.section/.default/style.css): единый язык статусов на весь сайт. Копия, а не общий файл, — осознанно: кусок мал, самодостаточен и в прототипе тоже подключался отдельной таблицей стилей (badge.css). Расходиться им нельзя — при правке править ОБА места. */ .wt-pdp .wt-stock-badge { display: inline-flex; align-items: center; gap: 0.4em; width: fit-content; flex: none; padding: 0.22rem 0.55rem; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; } .wt-pdp .wt-stock-badge::before { content: ""; flex: none; width: 0.45em; height: 0.45em; border-radius: 50%; background: currentColor; } .wt-pdp .wt-stock-badge--in-stock { background: color-mix(in oklab, var(--success) 13%, var(--background)); color: color-mix(in oklab, var(--success) 80%, var(--foreground)); } .wt-pdp .wt-stock-badge--on-order { background: color-mix(in oklab, var(--warning) 18%, var(--background)); color: var(--warning-foreground); } .wt-pdp .wt-stock-badge--out { background: color-mix(in oklab, var(--muted-foreground) 12%, var(--background)); color: var(--muted-foreground); } /* Тёмная тема: --warning-foreground/--success-foreground рассчитаны на текст ПО заливке, а бейдж кладёт их на тонированную подложку — контраст падал до 1,03:1. Правка принята в прототипе 2026-07-18 и переносится вместе с ним. 10.08.2026: тема включается системной настройкой пользователя, а не классом .dark (решение владельца, переключателя нет) — см. css/tokens/semantic.css. 🔴 ЭТОТ БЛОК ОБЯЗАН ОСТАВАТЬСЯ НИЖЕ базовых правил бейджа. Раньше `.dark …` перебивал базовое правило по СПЕЦИФИЧНОСТИ; без класса специфичность одинаковая, и переопределение держится ТОЛЬКО порядком в файле. Перенос блока выше — молчаливая потеря правки. */ @media screen and (prefers-color-scheme: dark) { .wt-pdp .wt-stock-badge--on-order { color: color-mix(in oklab, var(--warning) 80%, var(--foreground)); } .wt-pdp .wt-stock-badge--out { color: color-mix(in oklab, var(--muted-foreground) 70%, var(--foreground)); } } /* ---------- ГАЛЕРЕЯ ---------- Слот 4:3 сохранён от принятого каркаса; изображение вписывается целиком (object-fit: contain) — обрезать изделие по краям нельзя, снабженец опознаёт деталь по силуэту. Подложка светлая в ОБЕИХ темах ОСОЗНАННО: у фото и у линейной графики белый фон, чёрная линия по тёмному не читается (то же решение, что для чертежей экрана выбора, 07.08). */ .wt-pdp .gallery { margin: 0; } .wt-pdp .gallery-main { aspect-ratio: 4 / 3; max-height: 22rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #ffffff; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: var(--space-3); } .wt-pdp .gallery-main img { max-width: 100%; max-height: 100%; object-fit: contain; } .wt-pdp .gallery-main img[hidden] { display: none; } /* Заглушка слота, когда фотографий у позиции ещё нет. Подложка слота светлая в обеих темах (см. выше), поэтому цвет подписи задаётся явно, а не наследуется: на белом фоне тёмной темы наследованный светлый текст был бы нечитаем. */ .wt-pdp .gallery-stub { font-family: var(--font-mono); font-size: var(--text-xs); color: color-mix(in oklab, #000000 45%, transparent); } .wt-pdp .gallery-cap { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--muted-foreground); } .wt-pdp .gallery-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); } .wt-pdp .thumb { all: unset; box-sizing: border-box; cursor: pointer; width: 64px; height: 64px; flex: none; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #ffffff; display: grid; place-content: center; } .wt-pdp .thumb img { width: 100%; height: 100%; object-fit: contain; } .wt-pdp .thumb[aria-current="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); } .wt-pdp .thumb:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ---------- ИДЕНТИФИКАЦИЯ ---------- */ .wt-pdp .pdp-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); } .wt-pdp .ident { display: grid; gap: var(--space-5); margin-top: var(--space-6); } .wt-pdp .pdp-h1 { margin: 0; font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); overflow-wrap: break-word; } @container wtpdp (min-width: 780px) { .wt-pdp .pdp-h1 { font-size: var(--text-2xl); } } .wt-pdp .ident-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .wt-pdp .sku { display: inline-flex; align-items: center; gap: var(--space-1_5); font-size: var(--text-xs); color: var(--muted-foreground); } .wt-pdp .sku b { font-family: var(--font-mono); font-weight: 650; color: var(--foreground); letter-spacing: var(--tracking-wide); } .wt-pdp .btn-copy { all: unset; box-sizing: border-box; cursor: pointer; display: inline-grid; place-content: center; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted-foreground); font-size: 0.72rem; } .wt-pdp .btn-copy:hover { color: var(--foreground); border-color: var(--primary); } .wt-pdp .btn-copy:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Подтверждение копирования: короткая подпись вместо всплывашки — островок ставит атрибут, CSS его показывает. Своего элемента для этого не заводим. */ .wt-pdp .btn-copy[data-wt-copied]::after { content: attr(data-wt-copied); margin-left: var(--space-2); font-family: var(--font-sans); color: var(--success); white-space: nowrap; } /* ---------- КЛЮЧЕВЫЕ ТТХ ---------- Подписи стали длиннее («Посадочный Ø кламп-соединения»), поэтому на узком контейнере колонок ДВЕ, а не три, и подпись переносится — обрезать её нельзя: число без имени бесполезно. */ .wt-pdp .key-specs { margin: 0; padding: var(--space-3) 0; display: grid; gap: var(--space-3) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } @container wtpdp (min-width: 780px) { .wt-pdp .key-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .wt-pdp .key-specs div { min-width: 0; } .wt-pdp .key-specs dt { font-size: var(--text-xs); color: var(--muted-foreground); line-height: var(--leading-normal); } .wt-pdp .key-specs dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: 650; color: var(--foreground); font-variant-numeric: tabular-nums; overflow-wrap: break-word; } /* Слот A — три абзаца. Интервал задан gap, а не margin абзаца: расстояние читается как граница смысловых частей, а сами абзацы остаются одним блоком в сетке сводки. */ .wt-pdp .lead-block { display: grid; gap: var(--space-2_5); } .wt-pdp .lead-text { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--foreground); } /* Перечень размеров отдельной строкой — пара П4, вариант (б), принят владельцем 09.08 («согласен полностью, сделал классно»). Решение ФОРМОЙ, а не словом: текст не тронут ни на знак (зона welle-copy), изменены только место разрыва и отбивка. Отступ с линейкой слева переводит второе «100 мм» из повторённого утверждения в строку данных — глаз читает её как выписку чисел, а не как повтор предыдущей фразы. */ .wt-pdp .size-line { padding-left: var(--space-3); border-left: 2px solid var(--border); } /* «Состав поставки» — Н4: 63 % не понимают комплектацию, 31 % сайтов не помечают, что аксессуар продаётся отдельно. Единственное место карточки, где заявлена комплектность (welle-copy §4). */ .wt-pdp .incl { margin: 0; display: grid; gap: var(--space-3); } .wt-pdp .incl dt { font-size: var(--text-xs); color: var(--muted-foreground); } .wt-pdp .incl dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--foreground); } /* Приписка к составу и ссылка в блок комплекта (прототип design, 1:1). 🔴 Правки шаблона 14.08 добавили разметку .incl-note, но стилей к ней в бою не было вовсе — приписка выходила неоформленной. Найдено сплошным поиском классов, а не глазом. .incl-note набрана ПОЛНЫМ контрастом, а не подписью: это не второй состав поставки, а ответ на вопрос «а кронштейн мне тоже брать?». */ .wt-pdp .incl-note { margin: var(--space-2_5) 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--foreground); } .wt-pdp .incl-note b { font-weight: 650; } .wt-pdp .incl-link { display: inline-block; margin-top: var(--space-1_5); font-size: var(--text-xs); color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; } .wt-pdp .incl-link:hover { color: var(--primary); } .wt-pdp .incl-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* ---------- КОЛОНКА ПОКУПКИ ---------- */ .wt-pdp .buy-box { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: grid; gap: var(--space-4); } .wt-pdp .price-main { display: block; font-size: 1.75rem; font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: var(--leading-none); } .wt-pdp .price-vat-in { font-size: var(--text-xs); font-weight: 600; color: var(--muted-foreground); letter-spacing: 0; } .wt-pdp .price-net { margin: var(--space-1_5) 0 0; font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .wt-pdp .price-net b { color: var(--foreground); font-weight: 650; } .wt-pdp .buy-row { display: flex; align-items: center; gap: var(--space-2_5); flex-wrap: wrap; } .wt-pdp .stepper { display: inline-flex; align-items: center; flex: none; border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); } .wt-pdp .stepper .step { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 44px; display: grid; place-content: center; color: var(--muted-foreground); font-size: var(--text-base); font-weight: 700; } .wt-pdp .stepper .step:hover { color: var(--foreground); } .wt-pdp .stepper .step:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .wt-pdp .stepper .qty { width: 52px; height: 44px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: transparent; color: var(--foreground); text-align: center; font: inherit; font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .wt-pdp .stepper .qty::-webkit-outer-spin-button, .wt-pdp .stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .wt-pdp .stepper .qty:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .wt-pdp .unit { font-size: var(--text-xs); color: var(--muted-foreground); } .wt-pdp .btn-cart { flex: 1 1 12rem; min-height: 44px; padding: 0 var(--space-5); display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); font: inherit; font-size: var(--text-sm); font-weight: 700; cursor: pointer; text-decoration: none; } .wt-pdp .btn-cart:hover { background: color-mix(in oklab, var(--primary) 88%, black); color: var(--primary-foreground); } .wt-pdp .btn-cart:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .wt-pdp .btn-cart--off { background: var(--muted); color: var(--muted-foreground); cursor: default; } /* Условия сделки у кнопки: срок · стоимость получения · минимальная сумма КОРЗИНЫ. Тон нейтральный — это условия работы, а не ошибка. Отрицательный margin гасит grid-gap буй-бокса, чтобы блок читался как принадлежащий кнопке. */ .wt-pdp .buy-facts { margin: calc(var(--space-2_5) - var(--space-4)) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-1_5); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .wt-pdp .buy-facts b { color: var(--foreground); font-weight: 650; } .wt-pdp .buy-facts .ok { color: var(--success); font-weight: 650; } .wt-pdp .buy-facts .min-order { margin: 0; } /* 04.10.2026, акт №68 — строка «дата¹ — ориентировочная дата поставки» и сноска под ней. Правила перенесены из замороженного эталона card/Srok-datoy-u-knopki__2026-10-04_1117 (блок «ПРЕДМЕТ ПРИЁМКИ — ляжет в style.css шаблона»): строка-ответ основным цветом, сноска — кеглем бейджа (0,72rem, нового размера не заводится), приглушённая. */ .wt-pdp .buy-facts .buy-facts__answer { color: var(--foreground); } .wt-pdp .buy-facts__fn { display: block; margin-top: var(--space-1); font-size: 0.72rem; font-weight: 400; line-height: var(--leading-normal); color: var(--muted-foreground); } .wt-pdp .total { margin: 0; padding: var(--space-3); border-radius: var(--radius); background: var(--muted); font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); } .wt-pdp .total b { font-size: var(--text-lg); font-weight: 700; color: var(--foreground); } .wt-pdp .total .per-unit { font-size: var(--text-xs); } .wt-pdp .legal-note { margin: 0; padding: var(--space-3); background: var(--secondary); color: var(--secondary-foreground); border-radius: var(--radius); font-size: var(--text-xs); line-height: var(--leading-normal); display: flex; gap: var(--space-2_5); } .wt-pdp .legal-note .ico { flex: none; color: var(--muted-foreground); font-weight: 700; } /* ---------- СЕКЦИИ ---------- */ .wt-pdp .section { margin-top: var(--space-10); } .wt-pdp .section-h { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 700; color: var(--foreground); letter-spacing: var(--tracking-wide); } .wt-pdp .sub-h { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--foreground); letter-spacing: var(--tracking-wide); } /* ---------- ТАБЛИЦЫ ---------- */ .wt-pdp .t { width: 100%; border-collapse: collapse; font-size: var(--text-sm); color: var(--foreground); } .wt-pdp .t caption { text-align: left; font-size: var(--text-xs); color: var(--muted-foreground); padding-bottom: var(--space-2); line-height: var(--leading-normal); } .wt-pdp .t th, .wt-pdp .t td { text-align: left; padding: var(--space-2_5) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; } .wt-pdp .t thead th { font-size: var(--text-xs); font-weight: 650; color: var(--muted-foreground); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .wt-pdp .t tbody th { font-weight: 500; color: var(--muted-foreground); width: 46%; } .wt-pdp .t tbody td { font-weight: 650; font-variant-numeric: tabular-nums; } .wt-pdp .t tbody tr:nth-child(odd) { background: var(--muted); } .wt-pdp .t .u { color: var(--muted-foreground); font-weight: 400; } .wt-pdp .t tbody tr.grp { background: transparent; } .wt-pdp .t tbody tr.grp th { width: auto; padding-top: var(--space-5); color: var(--foreground); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-bottom: 1px solid var(--foreground); } .wt-pdp .t tbody tr.grp:first-child th { padding-top: var(--space-2_5); } /* ---------- ЯРУС 2: ОТВЕТ И ПУТЬ ДО ОТСЧЁТА СРОКА ---------- Перенос из принятого прототипа (Design/prototypes/product-pdp-seal/stock-b-predlagayu.html, замороженная копия sha256 b1dab229…), правила 1:1 и только префиксованы `.wt-pdp`. 🔴 ЗДЕСЬ БЫЛИ ПРАВИЛА ТАБЛИЦЫ ЧЕТЫРЁХ СКЛАДОВ — `.stock-table`, `.stock-rule` и три их ветки по контейнерам (≤359, ≤559, ≥780). Сняты 31.08.2026 вместе с разметкой и с источником данных: после снятия класс `.stock-table` не встречается в проекте нигде — проверено грепом по всему /local. Мёртвый CSS не оставлен намеренно: он и есть та дорожка, по которой снятое возвращается обратно «само». */ /* Ответ (слот 6): имя состояния и ПРИЧИНА срока — двумя строками, а не одной фразой: имя читают за полсекунды, причину дочитывают. */ .wt-pdp .stock-answer { display: flex; flex-direction: column; gap: .15rem; margin: 0 0 var(--space-3); } .wt-pdp .stock-answer__key { font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); } /* Зелёным окрашивается только состояние «В наличии»: цвет здесь несёт смысл («уже здесь»), а не украшает — поэтому у двух других состояний его нет. */ .wt-pdp .stock-answer--now .stock-answer__key { color: color-mix(in oklab, var(--success) 80%, var(--foreground)); } .wt-pdp .stock-answer__sub { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); } /* Путь до отсчёта (слот 5). Нумерация — счётчиком, а не цветом: карточку печатают на бумаге и показывают технологу, и номер шага обязан пережить чёрно-белую печать. */ .wt-pdp .stock-steps { margin: 0 0 var(--space-3); padding: 0; list-style: none; display: grid; gap: .45rem; counter-reset: st; } .wt-pdp .stock-steps li { position: relative; padding-left: 1.85rem; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--muted-foreground); } .wt-pdp .stock-steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: .02rem; width: 1.3rem; height: 1.3rem; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 1px solid var(--border); border-radius: 50%; background: var(--background); font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: var(--foreground); } .wt-pdp .stock-steps b { color: var(--foreground); } /* Закрывающий довод. Маркера нет намеренно: пункт один, и точка-буллет при единственном пункте читается как оборванный список. */ .wt-pdp .stock-facts { margin: .1rem 0 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--foreground); } .wt-pdp .stock-facts li { margin: 0; } /* ── G2-1. ТАБЛИЦА ДОСТАВКИ НА ≤359 — КАРТОЧКАМИ, КАК ТАБЛИЦА СКЛАДОВ ВЫШЕ ── Перенос G1 из прототипа (design, 27.08.2026, коммиты 5985cf2 / 7490d72 / 2c9c23e, раздел «G1-1» в Design/prototypes/product-pdp-seal/proto.css). Селекторы стендовые: контейнер здесь wtpdp, правила пишутся на .wt-pdp. 🔴 Что было (замер стенда 27.08, карточка EPDM DN 50, 320 px, вкладка «Доставка» открыта): раздел «Получение» — грид-элемент .two-col с min-width: auto, то есть он не может стать уже своего min-content. Min-content таблицы доставки — 300 px, дорожка грида на 320 — 280 px. Раздел вылезает вправо ровно на 20 px и съедает правое поле страницы: правый край 319,9 при ширине окна 320, поле 0,1 px. На 360 / 390 / 430 поле было и осталось 20 px — правило живёт только ≤359. Почему не min-width: 0 на грид-элементы: таблица уехала бы в свой .table-scroll, и часть колонки «Стоимость» спряталась бы за краем — вместо потерянного поля получили бы спрятанный текст. У соседней таблицы складов .table-scroll нет вовсе, и то же правило отправило бы её в переполнение страницы на 360. Почему карточками: три колонки русского текста в 280 px не помещаются В ПРИНЦИПЕ — тот же диагноз и то же лечение, что у таблицы складов на ≤359 (блок выше). На 320 соседний блок УЖЕ карточками, так что раздел становится однородным. 🔴 ОТЛИЧИЕ ОТ ТАБЛИЦЫ СКЛАДОВ, И ОНО НЕ ВКУСОВОЕ. У складов заголовок строки — ИМЯ («Беларусь (Минск)»), оно и становится шапкой карточки без подписи. Здесь заголовок строки — ЗНАЧЕНИЕ («уточняется»), и без подписи карточка начиналась бы словом «уточняется» неизвестно о чём. Поэтому первая ячейка набирается как остальные: подпись сверху, значение под ней. Подписи берутся из data-l — из тех же заголовков колонок (template.php, строки 678–680), а не пишутся вторым текстом. */ @container wtpdp (max-width: 359px) { .wt-pdp .ship-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wt-pdp .ship-table, .wt-pdp .ship-table tbody, .wt-pdp .ship-table tr, .wt-pdp .ship-table th, .wt-pdp .ship-table td { display: block; } .wt-pdp .ship-table tbody tr { padding: var(--space-3) 0 var(--space-3_5); border-bottom: 1px solid var(--border); } .wt-pdp .ship-table tbody th, .wt-pdp .ship-table tbody td { display: grid; gap: 1px; width: auto; padding: 0 0 var(--space-2); border: none; font-size: var(--text-sm); font-weight: 650; color: var(--foreground); } .wt-pdp .ship-table tbody td:last-child { padding-bottom: 0; } .wt-pdp .ship-table tbody th::before, .wt-pdp .ship-table tbody td::before { content: attr(data-l); font-size: var(--text-xs); font-weight: 400; color: var(--muted-foreground); } .wt-pdp .ship-table tbody tr:nth-child(odd) { background: transparent; } } /* ---------- РАЗМЕРНЫЙ РЯД ---------- Шесть колонок против пяти в Э4: добавлены проход и высота (welle-copy §8). Никогда картинкой (Т2) — только HTML. 🔴 ПРАВКА Э6 ПО ЗАМЕРУ ГЛАЗОМ. Сначала таблица стояла с min-width: 34rem внутри .table-scroll: страница оставалась целой (переполнение 0), но НА 390 ВИДНО БЫЛО ТРИ КОЛОНКИ ИЗ ШЕСТИ, а признака, что таблицу можно потянуть вбок, не было никакого. Счётчик показывал «переполнения нет», глаз показывал «данные обрезаны» — вердикт выносит глаз. Лечение двумя шагами: 1) на узком контейнере таблица УМЕЩАЕТСЯ целиком: min-width снят, шрифт xs, горизонтальные отступы поджаты; 2) подпись таблицы вынесена ИЗ прокручиваемой обёртки в обычный абзац — внутри она уезжала вправо вместе с таблицей и обрывалась на полуслове. */ .wt-pdp .table-scroll { overflow-x: auto; } .wt-pdp .size-table { min-width: 34rem; } /* Узкий контейнер: таблица шести колонок в 350 px не влезает НИКАК — замер дал ~490 px даже на шрифте xs с поджатыми отступами. Поэтому на телефоне строка разворачивается в компактную карточку «DN сверху, пять значений в две колонки». Разметка остаётся НАСТОЯЩЕЙ таблицей (Т2: никогда картинкой, всегда HTML); меняется только представление, роли ARIA проставлены явно — при display:block браузер иначе теряет табличную семантику. Подписи значений берутся из data-l, то есть из тех же заголовков колонок. */ @container wtpdp (max-width: 779px) { .wt-pdp .size-table { min-width: 0; } /* ── G2-2. ПОДПИСЬ ШИРОКОЙ ТАБЛИЦЫ НА УЗКОМ — В ПОЛНУЮ ШИРИНУ ── Перенос G1 из прототипа (design, 27.08.2026, раздел «G1-2»). Сама таблица здесь становится display: block, а её оставался table-caption и сжимался по СОДЕРЖИМОМУ, а не по месту: замер стенда 27.08 — 71,3 px и четыре строки при доступных 280 / 320 / 350 / 390. Соседняя подпись таблицы складов ведёт себя правильно ровно потому, что ей display: block выдан явно (блок ≤359 выше). Приём не изобретён — распространён на вторую таблицу того же поведения. Десктоп не затронут: правило живёт только ≤779. */ .wt-pdp .size-table caption { display: block; } .wt-pdp .size-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wt-pdp .size-table, .wt-pdp .size-table tbody, .wt-pdp .size-table tr, .wt-pdp .size-table th, .wt-pdp .size-table td { display: block; } .wt-pdp .size-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3_5); border-bottom: 1px solid var(--border); } .wt-pdp .size-table tbody th { grid-column: 1 / -1; width: auto; padding: 0; border: none; font-size: var(--text-sm); font-weight: 700; color: var(--foreground); } .wt-pdp .size-table tbody td { display: grid; gap: 1px; padding: 0; border: none; font-size: var(--text-sm); font-weight: 650; } .wt-pdp .size-table tbody td::before { content: attr(data-l); font-size: var(--text-xs); font-weight: 400; color: var(--muted-foreground); } /* 🔴 ПУСТАЯ ЯЧЕЙКА В КАРТОЧНОМ ВИДЕ ПОКАЗЫВАЛА ПОДПИСЬ БЕЗ ЗНАЧЕНИЯ. Найдено ГЛАЗОМ 16.08 на снимке 390 px, когда появился модельный ряд приводов: у шести старших моделей нет ни площадки, ни вала, ни длины, и на телефоне под моментом висели три серых подписи, под которыми ничего нет. Читается как «данные потеряли» — то есть ровно то, чего требование «пустые ячейки оставить пустыми» (welle-copy, Н1) и должно было избежать. Это не новое дизайн-решение, а выравнивание узкого вида по широкому: на десктопе пустая ячейка не показывает НИЧЕГО, подпись живёт в шапке таблицы. Подпись рисует ::before, и без этого правила она появляется даже там, где значения нет. Размерного ряда затвора правило не касается: туда позиция без значения не попадает вовсе, пустых ячеек там не бывает. */ .wt-pdp .size-table tbody td:empty { display: none; } } /* ── G2-3. СНОСКА ПОСЛЕ ТАБЛИЦЫ ОТБИВАЕТСЯ СВЕРХУ ── Перенос G1 из прототипа (design, 27.08.2026, раздел «G1-4»). Был только нижний отступ, поэтому сноска начиналась ровно на пикселе, где кончается таблица: замер стенда 27.08 — зазор 0 px во всех трёх местах карточки и на ВСЕХ ширинах, включая десктоп. Глазом читается как оборванное продолжение абзаца выше. 12 px = --space-3: тот же шаг, каким отбиты соседние подписи и примечания. */ .wt-pdp .table-cap { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--muted-foreground); } .wt-pdp .size-table tbody th { width: auto; } .wt-pdp .size-table a { color: var(--foreground); text-decoration: none; font-weight: 650; } .wt-pdp .size-table a:hover { color: var(--primary); text-decoration: underline; } .wt-pdp .size-table a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* 🆕 11.10.2026 (ядро 43, шаг 14-тер, заход А) — Р1 / находка №354: У ПОДШИПНИКА В ТАБЛИЦАХ size-table ВЫДЕЛЕНА ТОЛЬКО СВОЯ СТРОКА. Перенос правила формы `.size-table tbody tr:nth-child(odd) { background: transparent; }` — оно стоит во всех четырёх формах карточки подшипника: К3 `9cd5ff20…`, К3-нерж `14ad7676…`, К3-нерж-178 `cc00be50…`, К3-ядро `b6797e1b…` (там же — почему: полоса --muted под подсветкой --secondary неразличима, а подпись «Подсвечена строка вашего размера» обещает одну строку). Без правила в бою серой была каждая нечётная строка (справка design шага 14, §Р1). 🔴 ОБЛАСТЬ — ТОЛЬКО КАРТОЧКА ПОДШИПНИКА: класс size-table несут ещё 111 карточек затворов, приводов и уплотнений (замер стенда 11.10), а их принятая форма (`stock-b-predlagayu…`) полосы не снимает. Признак подшипника — .kod / .size-table--brg: их рисует только разметка подшипника (см. блок «ЖАНР „ПОДШИПНИК“» ниже); замер 11.10 — 224 из 224 подшипников с таблицами, 0 из 111 прочих. Браузер без :has() правило пропустит — останутся прежние полосы, как сейчас. Свою строку правило не трогает (:not(.is-current)) — её фон держит правило ниже, как в форме, где оно идёт следом. */ .wt-pdp:has(.kod, .size-table--brg) .size-table tbody tr:nth-child(odd):not(.is-current) { background: transparent; } .wt-pdp .size-table tbody tr.is-current { background: var(--secondary); } .wt-pdp .size-table tbody tr.is-current th, .wt-pdp .size-table tbody tr.is-current td { color: var(--foreground); font-weight: 700; } .wt-pdp .size-table .here { color: var(--muted-foreground); font-weight: 400; font-size: var(--text-xs); } /* ---------- ПОЛУЧЕНИЕ: табы ---------- */ .wt-pdp .tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); } .wt-pdp .tab { all: unset; box-sizing: border-box; cursor: pointer; min-height: 44px; padding: 0 var(--space-4); display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 650; color: var(--muted-foreground); border-bottom: 2px solid transparent; margin-bottom: -1px; } .wt-pdp .tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--primary); } .wt-pdp .tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .wt-pdp .tabpanel { padding-top: var(--space-4); } .wt-pdp .tabpanel[hidden] { display: none; } .wt-pdp .pickup-point { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--foreground); } .wt-pdp .pickup-point span { display: block; font-size: var(--text-xs); color: var(--muted-foreground); font-weight: 400; } .wt-pdp .free { color: var(--success); font-weight: 650; } .wt-pdp .state-hint { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--muted-foreground); font-style: italic; } /* ---------- ОПИСАНИЕ: слой «раскрытие» ---------- Двухслойная подача: сводка сверху обслуживает чтение за 30 секунд, раскрытие здесь — за 5 минут. Скелет ОДИН, заголовки не повторяются дважды. */ .wt-pdp .desc { display: grid; gap: var(--space-6); max-width: 46rem; } .wt-pdp .desc h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--foreground); letter-spacing: var(--tracking-wide); } .wt-pdp .desc p { margin: 0 0 var(--space-2_5); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--foreground); } .wt-pdp .desc p:last-child { margin-bottom: 0; } .wt-pdp .desc-list { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); } .wt-pdp .desc-list li { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--foreground); } .wt-pdp .desc-tail { padding-top: var(--space-4); border-top: 1px solid var(--border); } .wt-pdp .desc-tail p { color: var(--muted-foreground); } /* ---------- ПОДХОДИТ К ЭТОМУ ЗАТВОРУ · КОМПЛЕКТ С НАШИМ ЗАТВОРОМ ---------- */ .wt-pdp .kit { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: var(--space-4); } /* .fit-text — та же коробка .kit, но с текстом вместо списка с чекбоксами: у привода докупать нечего, кронштейн и адаптер входят в цену. Прототип design, 1:1. */ .wt-pdp .fit-text { max-width: 46rem; display: grid; gap: var(--space-3); } .wt-pdp .fit-text p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--foreground); } .wt-pdp .fit-text b { font-weight: 650; } .wt-pdp .kit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); } .wt-pdp .kit-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border); cursor: pointer; } .wt-pdp .kit-item:last-child { border-bottom: none; } .wt-pdp .kit-item input { -webkit-appearance: none; appearance: none; width: 1.15em; height: 1.15em; flex: none; margin: 0; border: 1.5px solid var(--input); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; display: grid; place-content: center; } .wt-pdp .kit-item input:checked { background: var(--primary); border-color: var(--primary); } .wt-pdp .kit-item input:checked::after { content: ""; width: 0.32em; height: 0.6em; border: solid var(--primary-foreground); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .wt-pdp .kit-item input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Слот (совместимость не подтверждена): выбрать нельзя. Показываем это спокойно — курсор обычный, без «запрещающего» знака: позиция не сломана, она ещё не открыта. */ .wt-pdp .kit-item input:disabled { border-color: var(--border); background: var(--muted); cursor: default; } .wt-pdp .kit-thumb { width: 48px; height: 48px; flex: none; border-radius: var(--radius); overflow: hidden; background: var(--muted); color: var(--muted-foreground); display: grid; place-content: center; font-family: var(--font-mono); font-size: 0.6rem; } .wt-pdp .kit-thumb img { width: 100%; height: 100%; object-fit: contain; } .wt-pdp .kit-body { flex: 1 1 auto; min-width: 0; } .wt-pdp .kit-name { display: block; font-size: var(--text-sm); font-weight: 650; color: var(--foreground); line-height: var(--leading-tight); } .wt-pdp .kit-sku { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted-foreground); } .wt-pdp .kit-sep { font-family: var(--font-sans); } .wt-pdp .kit-meta { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted-foreground); } .wt-pdp .kit-price { flex: none; font-size: var(--text-sm); font-weight: 700; color: var(--foreground); font-variant-numeric: tabular-nums; } /* Узкий контейнер: строка из четырёх элементов в ряд оставляла тексту ~130 px, и наименование позиции рвалось по одному-два слова в строку — проверено глазом на 390. Раскладываем в сетку: чекбокс и миниатюра слева, текст на всю оставшуюся ширину, цена уходит под текст. Порядок в разметке не меняется. */ @container wtpdp (max-width: 559px) { .wt-pdp .kit-item { display: grid; align-items: start; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "chk thumb body" ". . price"; column-gap: var(--space-3); row-gap: var(--space-2); } .wt-pdp .kit-item input { grid-area: chk; margin-top: 0.2em; } .wt-pdp .kit-thumb { grid-area: thumb; } .wt-pdp .kit-body { grid-area: body; } .wt-pdp .kit-price { grid-area: price; } } .wt-pdp .kit-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } .wt-pdp .kit-sum { font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; } .wt-pdp .kit-sum b { color: var(--foreground); font-weight: 700; } .wt-pdp .btn-secondary { min-height: 44px; padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: var(--text-sm); font-weight: 650; cursor: pointer; } .wt-pdp .btn-secondary:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); } .wt-pdp .btn-secondary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Ничего не выбрано — добавлять нечего. Кнопка приглушена, но остаётся на месте: она объясняет, что даёт выбор чекбоксами. */ .wt-pdp .btn-secondary:disabled { color: var(--muted-foreground); cursor: default; } /* ---------- ДОКУМЕНТАЦИЯ — ДВА ЯРУСА (решение владельца 09.08) ---------- ВЕРХ — перечень документов, пока не скачивается. 🔴 Неактивность выражена ОТСУТСТВИЕМ признаков скачивания, а не ПРИСУТСТВИЕМ признаков поломки. Четыре решения, каждое против прочтения «сломано»: 1. строка — обычный
  • , а не и не