*{box-sizing:border-box} body{margin:0;background:var(--surface-page);color:var(--text-body); font-family:var(--font-body);font-size:16px;line-height:1.5} /* T2: фокус виден всегда */ :focus-visible{outline:none;box-shadow:var(--focus-ring)} /* T2: цель нажатия не меньше 44px. summary — круг правок 1 задачи 5: заголовок
у матрицы добавления вариантов (manage/product.html) был 24px, единственный способ раскрыть блок, и в этот список не попадал — тег перечислен поимённо, а не через общий селектор. min-height сам по себе строку не растягивает (высота инлайнового текста), поэтому ещё и flex с вертикальным центрированием — иначе текст прилипает к верхнему краю выросшей цели. */ a,button,label.switch,input[type=file],summary{min-height:44px} summary{display:flex;align-items:center} /* Инлайновые SVG-иконки (задача 12, круг правок 1): размер и baseline независимо от места вставки — внутри .btn или ссылки .назад. Цвет — через stroke="currentColor" в самом файле, здесь не трогаем. */ .icon{width:18px;height:18px;flex-shrink:0} /* Ссылка «назад» — на витрине и у владельца товара (storefront/product.html, manage/product.html). Раньше — символ «←» в тексте; теперь инлайновый arrow-left.svg, поэтому нужен flex-контейнер, чтобы иконка не наезжала на текст. */ /* color/text-decoration — находка 11 финального ревью: без них ссылка остаётся браузерным дефолтом (синяя, подчёркнутая) посреди фирменной палитры, где ни одна другая ссылка так не выглядит. */ .назад{display:inline-flex;align-items:center;gap:var(--space-2); color:inherit;text-decoration:none} /* Каталог витрины. Две колонки на телефоне — осознанное отступление от T2 №1 (спека §4): тридцать позиций в один столбец листаются мучительно, а горизонтального скролла сетка не создаёт. */ .сетка{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3); padding:var(--space-3);max-width:900px;margin:0 auto} @media (min-width:700px){.сетка{grid-template-columns:repeat(3,1fr)}} .карточка{text-decoration:none;color:inherit;display:block} .карточка img{width:100%;aspect-ratio:1;object-fit:cover;display:block} .карточка__пусто{width:100%;aspect-ratio:1;background:var(--gray-1)} .карточка__низ{padding:var(--space-3);display:grid;gap:var(--space-1)} .карточка__имя{font-weight:600} .карточка__цена{color:var(--text-muted)} /* Карточка товара: выбор цвета и размера. */ .товар{padding:var(--space-4);max-width:600px;margin:0 auto;padding-bottom:96px} .товар__фото img{width:100%;border-radius:var(--radius-lg)} .товар__цена{font-size:24px;font-weight:700} .выбор{border:0;padding:0;margin:var(--space-4) 0} .выбор legend{font-size:14px;color:var(--text-muted);margin-bottom:var(--space-2)} .кружок{width:44px;height:44px;border-radius:50%;border:var(--border-w-strong) solid var(--border-default); background:var(--образец);cursor:pointer;margin-right:var(--space-2)} .кружок.выбран{border-color:var(--border-strong)} /* Недоступный цвет гаснет и не нажимается — как и размер. Зачёркивания здесь нет: перечеркнуть кружок нечем, роль «недоступно» несут блёклость и курсор. */ .кружок:disabled{opacity:.35;cursor:not-allowed} .чип{min-width:44px;min-height:44px;border-radius:var(--radius-md); border:var(--border-w-strong) solid var(--border-default);background:var(--surface-card); font:inherit;margin-right:var(--space-2);cursor:pointer} .чип.выбран{border-color:var(--border-strong);background:var(--yellow-tint)} .чип:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed} /* Бейдж объявлен строчным, но .карточка__низ — это grid, а он растягивает потомков на всю колонку: серая плашка расползалась во всю карточку. */ .карточка__низ .badge{justify-self:start} /* T2 №7: основное действие внизу, в зоне большого пальца. Отступ снизу — не просто var(--space-3): находка 14 финального ревью, на iPhone с домашним индикатором кнопка иначе перекрывается им. env(safe-area-inset-bottom) требует viewport-fit=cover в base.html — без него iOS всегда отдаёт 0, даже при наличии индикатора. */ .низ{position:fixed;left:0;right:0;bottom:0; padding:var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom)); background:var(--surface-page);box-shadow:var(--shadow-pop)} .низ .btn{width:100%} /* Заголовок жил вообще без собственного правила и прилипал к левому краю окна, пока сетка товаров под ним центрировалась в 900px: на широком экране «МЕРЧ МСБИ» оказывался сам по себе, метров за пять от первой карточки. Ширина и горизонтальный отступ — те же, что у .сетка, чтобы заголовок вставал ровно над левым краем первой карточки. */ .шапка{max-width:900px;margin:0 auto;padding:var(--space-4) var(--space-3) 0} /* Экран владельца: шапка с кнопкой выхода. Модификатор, не правка .шапка целиком — у неё уже есть потребитель на публичной витрине (storefront/catalog.html). Своя ширина: список товаров под ней — 600px, и шапка должна вставать над ним, а не над пустотой. Отступ совпадает с .список a, чтобы заголовок был на одной вертикали с названиями товаров. */ .шапка--manage{display:flex;align-items:center;justify-content:space-between; gap:var(--space-3);max-width:600px;margin-inline:auto; padding:var(--space-3) var(--space-4)} .шапка--manage form{margin:0} /* Экран владельца: список товаров. Строка — то, по чему владелец попадает пальцем между тренировками, поэтому цель нажатия заметно больше T2-минимума (44px), а не впритык к нему. */ .список{list-style:none;margin:0;padding:0;max-width:600px;margin-inline:auto} .список li{border-bottom:var(--border-w) solid var(--border-default)} .список a{display:flex;align-items:center;gap:var(--space-3);min-height:56px; padding:var(--space-3) var(--space-4);text-decoration:none;color:inherit} .список a:focus-visible{border-radius:var(--radius-sm)} /* Миниатюра списка товаров (спека §5, финальное ревью, находка 4): квадрат 44px — под высоту строки, не растягивает её. Заглушка того же размера и того же серого, что и .карточка__пусто в публичном каталоге. */ .список__миниатюра{width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-sm); object-fit:cover;background:var(--gray-1)} .список__имя{font-weight:600;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .список__счёт{color:var(--text-muted);font-size:14px;white-space:nowrap} .список__пусто{padding:var(--space-4);color:var(--text-muted)} /* Экран входа. Поля рендерятся через ФормаВхода (manage_ui/forms.py) с классом field__input на каждом виджете, так что кегль ≥16px, высота ≥44px и видимый фокус берутся из .field__input в ui.css — здесь их дублировать не нужно (ревью задачи 7, круг правок 1, находка 3). max-width — как у .товар/.список, а не отдельное число. */ .вход{max-width:600px;margin:var(--space-7) auto;padding:0 var(--space-4)} .вход h1{margin-bottom:var(--space-4)} .вход p{margin:0 0 var(--space-3)} .вход label{display:block;font-size:14px;color:var(--text-muted);margin-bottom:var(--space-1)} .вход .btn{width:100%;margin-top:var(--space-2)} /* «Войти снова» (registration/logged_out.html) — та же находка 11: браузерный синий подчёркнутый посреди фирменной палитры. font-weight — единственная опора на видимость ссылки взамен подчёркивания, как и у .назад выше. */ .вход a{color:inherit;text-decoration:none;font-weight:600} /* Главный экран: карточка товара у владельца — тумблеры наличия по вариантам. Ради этого экрана существует вся остальная витрина: здесь снимают с наличия то, что закончилось. */ .товар-упр__заголовок{max-width:600px;margin:var(--space-4) auto;padding:0 var(--space-4)} /* Состояние публикации (задача 8) — сразу под заголовком, тот же контейнер 600px/padding, что и у остального содержимого экрана (.группа, .всем-цену), иначе блок съехал бы во всю ширину и выбивался бы из вёрстки страницы. Тумблер и бейдж «черновик» в один ряд — оба невысокие, вертикальный стек тут не нужен. */ .публикация{display:flex;align-items:center;gap:var(--space-3); max-width:600px;margin:0 auto var(--space-4);padding:0 var(--space-4)} /* Форма «цена всем вариантам» (задача 9) — над списком, в обычном потоке, без .низ: это редкое действие при заведении товара, а не то, чем владелец пользуется на каждом визите, так что фиксированная зона большого пальца ей не положена — там ничего и нет на этом экране. */ .всем-цену{display:flex;gap:var(--space-2);max-width:600px;margin:0 auto var(--space-4); padding:0 var(--space-4)} .всем-цену .field__input{flex:1 1 auto;min-width:0} /* Группа вариантов одного цвета. Владелец думает «чёрных не осталось», а не «вариант №17 снят» — отсюда группировка и цветовой образец в заголовке. */ .группа{max-width:600px;margin:0 auto var(--space-5)} .группа h2{display:flex;align-items:center;gap:var(--space-2); padding:0 var(--space-4);margin:var(--space-4) 0 var(--space-2);font-size:18px} .образец{display:inline-block;width:20px;height:20px;border-radius:50%; background:var(--образец);border:var(--border-w) solid var(--border-default); flex-shrink:0} /* «Снять цвет» — рядом с заголовком группы, не основное действие экрана: основное — тумблер в каждой строке. margin-left:auto прижимает кнопку вправо, чтобы имя цвета осталось главным, что читается в заголовке. */ .группа__снять{margin-left:auto;font-size:14px;padding:0 var(--space-3)} /* Строка варианта — то, по чему владелец попадает пальцем на ходу, снимая позицию с наличия. Тумблер и поле цены — независимые цели нажатия, каждая ≥44px (T2 №4): строка целиком не кликабельна, кликабельны сами элементы. */ .варианты{list-style:none;margin:0;padding:0} .строка{display:flex;align-items:center;gap:var(--space-3); padding:var(--space-2) var(--space-4); border-bottom:var(--border-w) solid var(--border-default)} .строка__цена{margin:0;flex:1 1 140px;min-width:0} /* Поле и кнопка отправки в ряд (находка 1 финального ревью): без кнопки форму нечем отправить с телефона, у числовой клавиатуры нет Enter. */ .строка__цена-поле{display:flex;gap:var(--space-1);align-items:stretch} .строка__цена-поле .поле-цены{flex:1 1 auto;min-width:0;text-align:right} .строка__цена-поле .btn{flex-shrink:0;padding:0 var(--space-2)} /* Отформатированная цена рядом с редактируемым сырым полем (круг правок 1, Critical): value поля — сырые цифры ради безопасной повторной отправки, «1 800 ₽» показывается отдельно, чтобы владелец видел то же число сразу читаемым. */ .строка__цена-факт{display:block;margin-top:2px;font-size:12px; color:var(--text-muted);text-align:right} .строка__размер{flex:1 1 auto;font-weight:600} /* Шапка списка товаров: ссылка на справочники рядом с кнопкой выхода — обе цели нажатия, поэтому в общем flex-контейнере, не разбросаны. */ .шапка--manage__действия{display:flex;align-items:center;gap:var(--space-2)} .шапка--manage__действия form{margin:0} /* Справочники цветов и размеров (задача 3): список — то, куда владелица попадает пальцем на телефоне, поэтому строка не меньше 44px (T2 №4), как и .список выше. .образец уже определён у группы вариантов (тот же кружок с цветом из --образец) — здесь переиспользуется, не дублируется. */ .справочник{list-style:none;padding:0;margin:0 0 var(--space-4);max-width:600px;margin-inline:auto} .справочник li{display:flex;align-items:center;gap:var(--space-2); min-height:44px;padding:0 var(--space-4); border-bottom:var(--border-w) solid var(--border-default)} .справочник li > :last-child{margin-left:auto} .справочник form{max-width:600px;margin:0 auto var(--space-6);padding:0 var(--space-4)} /* Нативный выбор цвета: type=color открывает системную палитру на телефоне — владелица тыкает пальцем, а не вводит #RRGGBB (спека §6). */ .поле-цвета{width:64px;height:44px;padding:2px; border:var(--border-w) solid var(--border-default); border-radius:var(--radius-sm);background:var(--surface-card)} /* Экран создания товара (задача 4) — та же ширина и тот же нижний отступ под фиксированную кнопку .низ, что и у .товар на витрине. */ .создание{max-width:600px;margin:0 auto;padding:0 var(--space-4) 96px} /* Матрица цветов/размеров при создании товара и добавлении вариантов (задача 4, 5): чекбокс прячется, роль переключателя играет кружок или чип — так цель нажатия остаётся 44px и вид совпадает с витриной. */ .кружок-выбор input, .чип-выбор input{position:absolute;opacity:0;pointer-events:none} .кружок-выбор, .чип-выбор{display:inline-block;cursor:pointer} /* .кружок/.чип объявлены в другом месте этого файла для