/* ============================================================================ ok-cart.css — КОРЗИНА. Пакет W2-P04. ============================================================================ ЧТО ДЕЛАЕТ ФАЙЛ. Доводит тач-цели корзины до нормы 44×44 на тач-устройствах. Ничего больше — и это следствие замера, а не осторожности. Разбор ниже. ── ЗАМЕР СНЯТ НА НАПОЛНЕННОЙ КОРЗИНЕ, КАК ТРЕБУЕТ ПАКЕТ ─────────────────── Пустая корзина не содержит ни одной строки товара, поэтому замер по ней даёт ложное «расхождений нет». Наполнение — засев в `localStorage` (ключ `okna_cart`), три позиции разных марок: с фото и длинным названием, две без фото. Способ записан в отчёте, потому что от него зависит воспроизводимость. ★ ПЕРВЫЙ ЗАСЕВ БЫЛ НЕВЕРЕН, И КОРЗИНА ЭТО ПОКАЗАЛА. Итог вышел 66 000 ₽ вместо ожидаемых 75 000. Причина не в корзине: `cart.js:38` суммирует поле `price` как есть, а я положил `price` от варианта «стекло» при `variant:'install'` — сочетание, которого настоящий `add()` не создаёт (`cart.js:139` берёт цену из переключателя). Подложный засев даёт числа и вёрстку, которых у живого пользователя не бывает. ── ★ ПОЧЕМУ ЭТО НЕ ТУПИК, ХОТЯ ВЫГЛЯДИТ ИМ ──────────────────────────────── Блок корзины в `design.css:922-1057` несёт 13 `!important`, а `design.css` в Allowed нет, и новый `!important` пакетом запрещён. Отсюда напрашивается вывод «тач-цели закрыть нечем». Вывод неверен. `!important` стоят на `border`, `background` и `color`: .okna-qty-btn{ width:36px; height:36px; border:0 !important; background:#f4f7fb !important; color:… !important; } а `width`, `height`, `padding` и `line-height` объявлены ОБЫЧНЫМИ. Значит геометрия перебивается равной специфичностью по порядку листов — этот лист печатается позже (приоритет 140). Ни одного нового `!important` не нужно, и `design.css` не трогается. Цвет и рамку этих кнопок отсюда действительно не изменить — но пакет их и не заказывал. ── ЗАМЕР ДО, наполненная корзина, 375 и 768 ─────────────────────────────── .okna-qty-btn 60×36 ×6 не хватает 8px .okna-cart-vbtn--glass 113.3×28 ×3 не хватает 16px .okna-cart-vbtn--install 108.1×28 ×3 не хватает 16px .okna-cart-row__rm 60×38 ×3 не хватает 6px .okna-cart-clear 273×31.5 ×1 не хватает 12.5px Итого 16 целей корзины. Остальные 4 из списка — оболочка и крошки: `ok-city` 90×36, `ok-mail` 108×36, крошка 50.8×19, `skip-link` 1×1 (он и должен быть таким — это ссылка для скринридера). Это D-32, волна 5. Узлов за краем — 0 на обеих тач-ширинах, с учётом предков-лент. ── ЧЕГО ЗДЕСЬ НЕТ И ПОЧЕМУ ──────────────────────────────────────────────── Разметку корзины печатает `assets/cart.js` — функция `renderCartPage()`, строки 205-282. Её в Allowed нет: `page-korzina.php` печатает только `the_content()`, а `inc/cart.php` — контейнер с заглушкой. Поэтому структура строки товара, итогов и блока оформления здесь не меняется, только размеры. ★ И это к лучшему: макет 17 не содержит ни переключателя варианта `.okna-cart-row__vswitch`, ни статуса наличия — а клик по переключателю меняет цену позиции (`cart.js:71`) и то, что уходит менеджеру. «Привести к макету» буквально означало бы сломать расчёт заявки. Правило проекта «макет — не всегда эталон» здесь работает в полную силу. ============================================================================ */ @media (hover: none) and (pointer: coarse){ /* ── Кнопки количества ─────────────────────────────────────────────────── 60×36. Ширину не трогаем — она уже больше нормы и задана раскладкой строки; добираем высоту. `min-height` вместо `height`: жёсткая высота обрезала бы кнопку, если строка когда-нибудь станет выше. */ .okna-qty-btn{ min-height: 44px; } /* ── Переключатель варианта «стекло / с установкой» ────────────────────── 113×28 и 108×28 — самая мелкая цель корзины и самая опасная: клик по ней МЕНЯЕТ ЦЕНУ позиции (`cart.js:71`) и содержимое заявки менеджеру (`cart.js:150`). Промах здесь стоит дороже, чем промах по «удалить». Высота набирается `min-height` плюс флекс-центрирование: у кнопки `padding:7px 13px` и `line-height:1`, один `min-height` увёл бы подпись к верхнему краю. */ .okna-cart-vbtn{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── Удалить позицию ───────────────────────────────────────────────────── 60×38. ★ Осторожно с узкими ширинами: при ≤600px `design.css:1047` переводит кнопку в `position:absolute; top:8px; right:8px` внутри карточки со скруглением 18px. Рост идёт от верхнего правого угла вниз-влево, за карточку не выходит — проверено замером после правки. */ .okna-cart-row__rm{ min-height: 44px; } /* ── Очистить корзину ──────────────────────────────────────────────────── 273×31.5 при 375 и 650×31.5 при 768 — ширина в норме, добираем высоту. */ .okna-cart-clear{ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ============================================================================ W2-P04B — ВЕЛИЧИНЫ ПО МАКЕТУ 17 ============================================================================ Критерий «соответствует макету» отменён решением Архитектора от 29.07 и заменён поимённым списком величин. Величины сняты с макета 17 отдельным агентом — файл экспортирован дизайн-инструментом, классов в нём ноль, узлы опознавались по тексту-якорю и структуре. Снято ~346 объявлений по десяти узлам из одиннадцати. Все правила ниже перебивают `design.css:970-980` порядком: `!important` там стоит на цвете и фоне кнопок, а геометрия и типографика объявлены обычными, и этот лист печатается последним (приоритет 140). Новых `!important` — ноль. ── ★ ДВЕ ВЕЛИЧИНЫ МАКЕТА НЕ ПРИМЕНЕНЫ, И ЭТО НЕ ПРОПУСК ──────────────────── Макет даёт счётчику количества 32×32 (моб.) / 30×30 (десктоп) и кнопке удаления 32×32 (моб.). Норма тач-цели проекта — 44×44, и обе кнопки подняты до неё в `W2-P04`, где приёмка это приняла. Применить величины макета буквально значило бы отменить закрытую работу и вернуть стоп-условие «тач-цели ниже 44». Два принятых критерия здесь исключают друг друга; решение не исполнительское, развилка вынесена в реестр. До решения побеждает норма доступности. ── ★ ЧЕГО В МАКЕТЕ НЕТ — ТО И НЕ ТРОГАЕТСЯ ──────────────────────────────── Переключателя варианта «Только стекло / С установкой» в макете **нет вовсе**: ни разметки, ни текстов, ни поля в модели данных (`_defCart()` отдаёт `{id, name, art, price, qty}`). Статуса наличия тоже нет. По правилу «нет величины — нет критерия» они в критерий не входят — но и удаляться не могут: клик по переключателю меняет цену позиции и текст заявки менеджеру. ============================================================================ */ /* ── Строка товара ───────────────────────────────────────────────────────── Радиус: живое 18px, макет 16px (десктоп) и 14px (мобилка). */ .okna-cart-row{ border-radius: 16px; } /* ── Миниатюра ───────────────────────────────────────────────────────────── Живое 112×112 квадрат, макет 96×72 — прямоугольник 4:3. Радиус 12 → 10. ★ ВМЕСТЕ С КАРТИНКОЙ ОБЯЗАН ЕХАТЬ ТРЕК ГРИДА. Строка корзины — грид, и его первая колонка задана жёстко: `design.css:970` — `112px 1fr auto auto 40px`. Уменьшить картинку и не тронуть колонку значит оставить между фото и названием мёртвую полосу в 16px. Мой зонд этого не увидел и не мог: он мерил бокс элемента, а не трек грида, поэтому в отчётных метриках всё «сходилось». Нашла рецензия живым замером `grid-template-columns` — правило для замеров: у грид-элемента меряется и элемент, и его колонка. `background-size: contain` — тоже величина макета по этому узлу (`17 Корзина.dc.html:173` — `center/contain no-repeat`). Без неё смена пропорции с 1:1 на 4:3 при живом `cover` (`design.css:973`) меняет обрезку задним числом на уже добавленных в корзину позициях. */ .okna-cart-row{ grid-template-columns: 96px 1fr auto auto 40px; } .okna-cart-row__img{ width: 96px; height: 72px; border-radius: 10px; background-size: contain; } /* ── Название товара ─────────────────────────────────────────────────────── Кегль 16 → 15.5, вес 800 → 700. ★ Цвет: живое `--ink` (#123d87), макет `#1c5bd6` — ссылочный синий. В `design.css:980` этот цвет уже есть, но только на `:hover`. На тач-устройстве наведения не бывает вовсе, значит на мобиле название ссылкой не выглядит никогда. Макет здесь прав не только по виду, но и по существу: ссылка на товар обязана читаться как ссылка без наведения. */ .okna-cart-row__title{ font-size: 15.5px; font-weight: 700; color: var(--blue, #1c5bd6); } /* ── Цена позиции ────────────────────────────────────────────────────────── Кегль 18 → 17. Вес 800 и цвет #123d87 уже совпадают с макетом. */ .okna-cart-row__sum{ font-size: 17px; } /* ── Артикул ─────────────────────────────────────────────────────────────── Макет L173: 12.5px, цвет #8a94a6. Живое: 12px, #6b7686 (design.css:981). */ .okna-cart-row__art{ font-size: 12.5px; color: #8a94a6; } /* ── Обойма счётчика количества ──────────────────────────────────────────── Радиус 12 → 8 по макету L173. Величина видимая, с нормой 44 не спорит: сами кнопки внутри остаются 44 по высоте, меняется скругление обоймы. */ .okna-cart-row__qty{ border-radius: 8px; } /* ── Блок итогов ─────────────────────────────────────────────────────────── Макет L188-190: паддинг 20px 24px, сумма 26px. Живое: 18px 22px и 24px. */ .okna-cart-foot{ padding: 20px 24px; } .okna-cart-total b{ font-size: 26px; } /* ── Кнопка «Оформить заявку» ────────────────────────────────────────────── Макет L196: радиус 8px, кегль 15.5px. Живое: радиус 4px, кегль 15px. ★ Высота НЕ приводится к макетным 48px. Живая — 50,5px, и это выше нормы тач-цели; опускать её до 48 незачем, а до макетных значений ниже 44 — нельзя. Правило от 29.07: величина макета идёт к видимому, но не ценой нормы. Радиус и кегль — видимое, они применяются. */ .okna-cart-checkout-open{ border-radius: 8px; font-size: 15.5px; } /* ★ БРЕЙКПОИНТ 600, А НЕ 768 — И ЭТО ИСПРАВЛЕНИЕ МОЕЙ ОШИБКИ. Первая редакция вешала мобильные величины на `max-width:768px`. Величины сняты с ТЕЛЕФОННОГО кадра макета (`17 Корзина.dc.html:330` — рамка `height:812px`, `border-radius:38px`), а сама строка корзины перестраивается в мобильную только на `design.css:1042` — `max-width:600px`. Следствие: в полосе 601–768 телефонные величины ложились на ДЕСКТОПНУЮ пятиколоночную раскладку. Картинка 64px в колонке 112px давала мёртвую полосу в 48px, а широкая карточка получала радиус 14px. Хуже всего, что 768 — ровно та ширина, на которой я снимал «после» и признал результат нормой. Замер подтверждал сам себя. Правило: величина применяется на той ширине, на которой снята, и не раньше той, где перестраивается раскладка под неё. */ @media (max-width: 600px){ /* Мобильная колонка макета — свои величины (строка 349 файла макета). Трек грида здесь свой: `design.css:1043` даёт `84px 1fr auto`, картинка становится 64px — колонка обязана поехать вместе с ней. */ .okna-cart-row{ border-radius: 14px; grid-template-columns: 64px 1fr auto; } .okna-cart-row__img{ width: 64px; height: 64px; border-radius: 8px; } .okna-cart-row__title{ font-size: 14px; line-height: 1.3; } } /* ── ★ ЗОНА НАЖАТИЯ НАЗВАНИЯ: КЕГЛЬ ПО МАКЕТУ, ВЫСОТА ПО НОРМЕ ────────────── Кегль 14px из макета уронил ссылку названия ниже нормы тач-цели: замер после правки дал `a.okna-cart-row__title` **183×36,4** там, где до правки было 62,4 (при кегле 16px). Список тач-целей вырос с 4 до 6 — то есть величина макета сама породила регресс, который критерий 11 этого же пакета запрещает. Поймано сравнением списков поимённо, а не суммой: обе новые позиции — именно название, и именно те две, где текст умещается в одну строку. У третьей позиции название длиннее, переносится и остаётся выше 44. Лечится совмещением, а не выбором: видимый кегль остаётся макетным, зона нажатия добирается до 44px. Тот же приём, что применялся к кнопкам корзины в `W2-P04` и к переключателю вида в `W2-P01`. `inline-flex`, а не `block`: ссылка обязана остаться по ширине текста — иначе кликабельной станет вся строка до правого края вместе с пустотой. */ @media (hover: none) and (pointer: coarse){ .okna-cart-row__title{ min-height: 44px; display: inline-flex; align-items: center; } } /* ===== MOB-04: разделитель подписи варианта ===== .okna-cart-vbtn — inline-flex (ok-cart.css:89), из-за чего пробел между «С установкой» и span.okna-cart-vbtn__req «по запросу» схлопывался → слипание «С установкойпо запросу». Правится РАЗДЕЛИТЕЛЬ (не текст, не сетка): точка перед «по запросу». Без нового !important. */ .okna-cart-vbtn__req::before{ content:"·"; margin:0 5px; font-weight:400; opacity:.7; }