/* ============================================================================ ok-product.css — КАРТОЧКА ТОВАРА. Пакет W2-P02. ============================================================================ ЧТО ДЕЛАЕТ ФАЙЛ. Доводит единственную тач-цель карточки товара до нормы 44×44. Больше ничего — и это не лень, а результат замера. Разбор ниже. ── ★ ЗАЯВЛЕННОГО ПЕРЕПОЛНЕНИЯ НЕ СУЩЕСТВУЕТ (D-94) ──────────────────────── Задание строится вокруг дефекта «`button.st-tab` выходит за край на +564,7px при 375» и предписывает «единственную разрешённую правку механики» `.st-main>*{min-width:0}`. Замер по пяти товарам разных марок на трёх ширинах: 375 → clientWidth 375 / scrollWidth 375 горизонтальной прокрутки НЕТ 768 → clientWidth 768 / scrollWidth 768 то же 1440 → clientWidth 1425 / scrollWidth 1425 то же Число +564,7 воспроизводится ТОЧНО — и в этом разгадка, а не подтверждение. Узлы `.st-tab` действительно правее края окна, но лежат внутри ленты div.st-tablist display:flex flex-wrap:nowrap overflow-x:auto min-width:0 width:343 scrollWidth:924 Узел внутри области прокрутки — не выход за край страницы. Тот же класс ошибки, что 711 схлопнутых SEO-ссылок в W2-P01 (D-87): замер смотрел прямоугольник элемента и не смотрел, что делает предок. Предписанный фикс пуст по трём причинам сразу: 1. `.st-main` — НЕ грид: `display:contents` при ≤768, `display:block` при 1440, `grid-template-columns: none`; 2. все три его ребёнка уже вычисляются с `min-width: 0px` (`.st-left`, `section.okna-htb`, `.st-tabs` — задано `single.css:297`); 3. сам `.st-main` уже имеет `min-width:0` — `single.css:42`. А `single.css:284-288` документирует, что этот дефект закрыт РАНЬШЕ и другим пакетом: «MOBILE-P1: minmax(0,1fr) вместо 1fr … распирал страницу на +564px за 375 … Замер R6 ДО: over 564px». Число в задании — замер «ДО» уже закрытой правки, поданный как текущее состояние. Поэтому правило `min-width:0` здесь НЕ объявляется: оно не изменило бы ни одного вычисленного значения, а критерий приёмки прошёл бы сам собой. ── ЧТО В ЭТОМ ЛИСТЕ ЕСТЬ ────────────────────────────────────────────────── Список тач-целей карточки товара, замер 375 и 768, пять товаров: a.st-btn-tel 301×35 / 678×35 ← карточка товара button.ok-city 90×36 ← оболочка, D-32, волна 5 a.ok-mail 108×36 ← оболочка, D-32, волна 5 a «Главная» 51×22 ← хлебные крошки, сквозные a «Каталог» 49×22 ← хлебные крошки, сквозные Своя у карточки ОДНА. Хлебные крошки печатаются `nav.okna-crumbs` на десятках страниц вне зоны пакета — правка по ним уехала бы на чужое, поэтому вынесены в реестр, а не тронуты. ── МЕСТО В КАСКАДЕ ──────────────────────────────────────────────────────── Задание говорит «подключается после single.css». Этого мало: живой порядок на карточке — … single.css … ok-modal.css (100), ok-interactions.css (110), ok-catalog.css (120). Встань лист сразу за `single.css`, единый слой отклика кнопок перебил бы его при равной специфичности, а новый `!important` пакетом запрещён. Поэтому приоритет 130 — последним из листов темы. Новых `!important`: 0. ============================================================================ */ @media (hover: none) and (pointer: coarse){ /* ── Телефон в блоке покупки ───────────────────────────────────────────── 301×35 при 375 и 678×35 при 768: не хватает 9px по высоте, ширина в норме. `min-height` вместо `height`: номер с длинным кодом города должен уметь переноситься и растить кнопку, а не обрезаться. Флекс-центрирование добавлено вместе с высотой: у элемента `display:block` и `padding:6px`, поэтому один только `min-height` увёл бы текст к верхнему краю, а зона выросла бы вниз пустотой. Ниже блок `.st-buy-note` с собственным `border-top` — визуально это читалось бы как съехавшая строка. Специфичность (0,2,0) — ровно как у правила-источника `single.css:107`, а лист печатается позже (приоритет 130), поэтому побеждает порядком. Новый `!important` не нужен. */ .okna-steklo-single .st-btn-tel{ min-height: 44px; display: flex; align-items: center; justify-content: center; } /* ── Переключатель «Только стекло / С установкой» ──────────────────────── 143,5×33,8 при 375 и 332×33,8 при 768, просвет между половинками 6px. ★ ЭТУ ЦЕЛЬ МОЙ ПЕРВЫЙ ЗАМЕР НЕ УВИДЕЛ, И ЭТО ДЕФЕКТ ЗОНДА, А НЕ САЙТА. Перебор шёл по стандартному набору — a[href], button, input, select, textarea, [role=button], [tabindex]. Переключатель в него не попадает: `single-steklo.php:272` печатает его как ГОЛЫЙ
без `role` и без `tabindex`, а обработчик навешивает скрипт (`single.js:43`). Родитель несёт `role="tablist"`, но сами половинки роли не имеют. Правило на будущее: в перебор тач-целей входят узлы, ПО КОТОРЫМ ЖМУТ, а не узлы, которые браузер считает интерактивными. Признак — обработчик click или `cursor:pointer`; здесь стоит и то и другое. Цена промаха здесь выше средней: переключатель задаёт `data-variant` и `data-price` обеим кнопкам покупки (`single.js:34-40`), то есть промах мимо половинки отправляет заявку с чужим вариантом и чужой ценой. Просвет доводится до нормы через `gap` родителя — 6px → 8px. Половинки здесь разделены настоящим зазором и своими рамками, это НЕ бесшовный сегментный переключатель, как `.okna-view-toggle` в W2-P01 (D-89), — поэтому развести их можно, не переделывая компонент. Специфичность (0,2,0) — как у правил-источников `single.css:93,95`; лист печатается позже (приоритет 130) и побеждает порядком. Новый `!important` не нужен. */ .okna-steklo-single .st-toggle{ gap: 8px; } .okna-steklo-single .st-toggle-opt{ min-height: 44px; } }