*{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: заголовок <details> у матрицы
   добавления вариантов (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, manage/product_new.html, manage/_dictionaries.html).
   Раньше — символ «←» в тексте; теперь инлайновый arrow-left.svg, поэтому
   нужен flex-контейнер, чтобы иконка не наезжала на текст. */
/* color/text-decoration — находка 11 финального ревью: без них ссылка
   остаётся браузерным дефолтом (синяя, подчёркнутая) посреди фирменной
   палитры, где ни одна другая ссылка так не выглядит. */
/* max-width/margin/padding — та же колонка 600px, что у остальных блоков
   этих экранов (.товар, .список, .публикация): без них ссылка одна во всю
   ширину окна, пока всё вокруг стоит в колонке. inline-flex здесь пришлось
   заменить на flex: на инлайновом элементе margin:0 auto не центрирует,
   ширина сама сжимается по содержимому, и box никогда не дорастёт до 600px,
   чтобы auto было что центрировать. У блочного flex — та же строка в один
   ряд (иконка + текст), но сам box теперь можно центрировать в 600px, а
   padding внутри него ставит текст по левому краю колонки, а не по центру
   окна: justify-content по умолчанию flex-start, ничего дополнительно не
   нужно. Область нажатия при этом растёт со слова до всей строки колонки —
   так и было задумано (T2 №2, цель ≥44px), не ограничиваем её нарочно. */
.назад{display:flex;align-items:center;gap:var(--space-2);
     color:inherit;text-decoration:none;
     max-width:600px;margin:0 auto;padding:0 var(--space-4)}

/* Каталог витрины (макет 01).
   Две колонки на телефоне — осознанное отступление от T2 №1 (спека §4):
   тридцать позиций в один столбец листаются мучительно, а горизонтального
   скролла сетка не создаёт. С 768px — четыре колонки в 1120px. */
.сетка{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);
       padding:0 var(--space-4);max-width:1120px;margin:0 auto}
@media (min-width:768px){.сетка{grid-template-columns:repeat(4,1fr);gap:var(--space-5)}}
/* Карточка на сером фоне страницы — белая, без рамки и тени (макет): .card
   общий компонент с рамкой, здесь она снята. */
.карточка{text-decoration:none;color:inherit;display:block}
/* .card.карточка, а не .карточка: ui.css с правилом .card подключается позже
   и при равной специфичности вернул бы рамку и тень. */
.card.карточка{border:0;box-shadow:none}
.карточка__фото{position:relative;aspect-ratio:1;background:var(--gray-2)}
.карточка__фото img,.карточка__пусто{width:100%;height:100%;object-fit:cover;display:block}
.карточка__фото .badge{position:absolute;top:var(--space-2);left:var(--space-2)}
.карточка--нет .карточка__фото img{opacity:.45}
.карточка__низ{padding:var(--space-3);display:grid;gap:var(--space-1)}
.карточка__имя{font-weight:700}
.карточка__цена{font:600 18px/1.2 var(--font-display);letter-spacing:.06em}
.карточка--нет .карточка__цена{color:var(--text-faint)}
@media (min-width:768px){.карточка__низ{padding:var(--space-4)}}

/* Карточка товара (макет 02). Фото во всю ширину телефона, без полей.
   Нижний отступ — под фиксированную панель .низ: с кассой в ней ещё и ссылка
   «Задать вопрос», поэтому больше. */
.товар{max-width:600px;margin:0 auto;padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.товар--касса{padding-bottom:calc(148px + env(safe-area-inset-bottom))}
/* Лента снимков: листается пальцем, scroll-snap ставит снимок ровно в кадр. */
.товар__фото{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
     scrollbar-width:none;background:var(--gray-2)}
.товар__фото::-webkit-scrollbar{display:none}
.товар__фото img,.товар__фото .карточка__пусто{flex:0 0 100%;width:100%;aspect-ratio:1;
     object-fit:cover;scroll-snap-align:start;display:block}
.товар__фото img[hidden]{display:none}
/* Точки под лентой — кнопки 22px (видимая точка 6px): листают и пальцем,
   и нажатием. Миниатюра внутри видна только на десктопе. */
.товар__точки{display:flex;justify-content:center;padding-top:var(--space-2)}
.товар__точка{width:22px;height:22px;min-height:0;padding:8px;border:0;background:none;cursor:pointer}
.товар__точка::before{content:"";display:block;width:6px;height:6px;border-radius:50%;
     background:var(--gray-3)}
.товар__точка--текущая::before{background:var(--border-strong)}
.товар__точка img{display:none}
.товар__точка[hidden],.товар__точки[hidden]{display:none}
.товар__инфо{display:grid;gap:var(--space-5);padding:var(--space-4)}
.товар__заголовок h1{margin:0;font-size:32px;line-height:1.15}
.товар__цена{margin:var(--space-1) 0 0;font:600 24px/1.2 var(--font-display);letter-spacing:.06em}
/* Описание товара (задача «описания товаров»). Абзацы приезжают из фильтра
   linebreaks отдельными <p> — им нужен вертикальный ритм, иначе браузерный
   дефолт даёт слишком крупные промежутки. Цвет приглушённый: описание
   поясняет товар, но не спорит по весу с названием и ценой. */
.товар__описание{color:var(--text-muted)}
.товар__описание p{margin:0 0 var(--space-3)}
.товар__описание p:last-child{margin-bottom:0}
.выбор{border:0;padding:0;margin:0;min-width:0}
.выбор legend{padding:0;margin-bottom:var(--space-2);font-size:13px;color:var(--text-muted)}
/* Свотч цвета 44px. Выбранный — кольцо через отступ (макет swatch);
   недоступный — блёклый и перечёркнутый диагональю поверх цвета. */
.кружок{width:44px;height:44px;border-radius:50%;border:var(--border-w) solid var(--border-default);
        background:var(--образец);cursor:pointer;margin:0 var(--space-3) var(--space-2) 4px;padding:0}
.кружок.выбран{box-shadow:0 0 0 3px var(--surface-page),0 0 0 5px var(--border-strong)}
.кружок:disabled{opacity:.35;cursor:not-allowed;
        background:linear-gradient(135deg,transparent calc(50% - 1px),var(--text-muted) calc(50% - 1px),
        var(--text-muted) calc(50% + 1px),transparent calc(50% + 1px)),var(--образец)}
/* Чип размера 52×44. Выбранный — жёлтый с чёрной рамкой, закончившийся —
   серый и зачёркнутый (макет size-chip). */
.чип{min-width:52px;min-height:44px;padding:0 var(--space-2);border-radius:var(--radius-sm);
     border:var(--border-w) solid var(--border-default);background:var(--surface-card);
     color:var(--text-body);font:600 15px/1 var(--font-display);letter-spacing:.1em;
     margin:0 var(--space-2) var(--space-2) 0;cursor:pointer}
.чип.выбран{background:var(--action-primary-bg);border:var(--border-w-strong) solid var(--border-strong)}
.чип:disabled{background:var(--gray-2);border-color:var(--gray-2);color:var(--text-faint);
     text-decoration:line-through;cursor:not-allowed}
.чип.выбран:disabled{border-color:var(--border-strong)}
/* 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;z-index:1;
     padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
     background:var(--surface-card);border-top:var(--border-w) solid var(--border-default)}
.низ .btn{width:100%}
/* На широком экране панель тянется во всю ширину, а содержимое — в колонку
   600px, как у формы над ней. */
@media (min-width:768px){.низ{padding-inline:max(var(--space-4),calc(50% - 300px))}}





/* Экран владельца: список товаров (макет 11) — белые карточки с зазором.
   Строка — то, по чему владелица попадает пальцем между тренировками, поэтому
   цель нажатия заметно больше T2-минимума (44px). */
.список{list-style:none;margin:0 auto;padding:0 var(--space-4) var(--space-6);max-width:600px;
     display:grid;gap:var(--space-2)}
.список a{display:grid;grid-template-columns:56px 1fr auto;grid-template-rows:auto auto;
     column-gap:var(--space-3);align-items:center;min-height:80px;padding:var(--space-3);
     background:var(--surface-card);border-radius:var(--radius-md);text-decoration:none;color:inherit}
.список a > .icon{grid-column:3;grid-row:1 / 3;color:var(--text-faint);width:20px;height:20px}
.список a:focus-visible{border-radius:var(--radius-md)}
/* Миниатюра 56px (макет product-row); заглушка — серый квадрат того же
   размера, что и .карточка__пусто в публичном каталоге. */
.список__миниатюра{grid-row:1 / 3;width:56px;height:56px;border-radius:var(--radius-sm);
     object-fit:cover;background:var(--gray-2)}
.список__имя{font-weight:700;align-self:end;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.список__счёт{grid-column:2;align-self:start;color:var(--text-muted);font-size:14px;
     display:flex;align-items:center;gap:var(--space-2)}
.список__пусто{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:0 auto;padding:var(--space-7) var(--space-4)}
.вход h1{margin:0 0 var(--space-2);font-size:32px}
.вход p{margin:0 0 var(--space-3)}
.вход__пояснение{color:var(--text-muted);margin-bottom:var(--space-5) !important}
.вход .field{margin-bottom:var(--space-4)}
.вход .btn{width:100%;margin-top:var(--space-2)}
.вход__подсказка{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4) !important;
     font-size:12px;color:var(--text-muted)}
.вход__подсказка .icon{width:16px;height:16px;color:var(--text-faint)}
/* «Войти снова» (registration/logged_out.html) — находка 11: браузерный
   синий подчёркнутый посреди фирменной палитры. */
.вход a{color:inherit;text-decoration:none;font-weight:600}





/* Справочники цветов и размеров (макет 14): белые карточки со строками,
   строка не меньше 44px (T2 №4). .образец общий с группой вариантов. */
#справочники{max-width:600px;margin:0 auto;padding-bottom:var(--space-6)}
#справочники > h1{margin:0;padding:var(--space-2) var(--space-4) var(--space-4);font-size:32px;line-height:1.15}
#справочники > h2{margin:var(--space-5) 0 var(--space-2);padding:0 var(--space-4);
     font-size:13px;color:var(--text-muted)}
.справочник{list-style:none;margin:0 var(--space-4) var(--space-3);padding:0;
     background:var(--surface-card);border-radius:var(--radius-md);overflow:hidden}
.справочник li{display:flex;align-items:center;gap:var(--space-2);min-height:52px;
     padding:var(--space-1) var(--space-4);border-bottom:var(--border-w) solid var(--border-default)}
.справочник li:last-child{border-bottom:0}
.справочник__имя{flex:1 1 auto}
.справочник__имя--размер{font:600 18px/1 var(--font-display);letter-spacing:.06em}
.справочник .btn{min-height:36px;padding:0 var(--space-3);font-size:13px}
.справочник__стрелка.btn{width:36px;padding:0;box-shadow:inset 0 0 0 var(--border-w) var(--border-default)}
.справочник__стрелка .icon{width:18px;height:18px}
#справочники form{margin:0 var(--space-4) var(--space-4)}
#справочники form p{margin:0 0 var(--space-3)}
#справочники form label{display:block;font:600 13px/1.2 var(--font-display);text-transform:uppercase;
     letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--space-2)}
#справочники form .btn{width:100%}
/* Нативный выбор цвета: 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) 112px}
.создание .выбор{margin-bottom:var(--space-4)}



/* Матрица цветов/размеров при создании товара и добавлении вариантов
   (задача 4, 5): чекбокс прячется, роль переключателя играет кружок или
   чип — так цель нажатия остаётся 44px и вид совпадает с витриной. */
.кружок-выбор input, .чип-выбор input{position:absolute;opacity:0;pointer-events:none}
.кружок-выбор, .чип-выбор{display:inline-block;cursor:pointer}
/* .кружок/.чип объявлены в другом месте этого файла для <button> (витрина,
   product.js) — там display:inline-block достаётся бесплатно, у кнопки он
   по умолчанию. Здесь те же классы висят на <span> внутри <label>: span
   по умолчанию inline, и без явного inline-block ширина/высота/радиус
   браузер молча игнорирует — кружок сплющивается в полоску вместо 44px
   круга (обнаружено визуальной проверкой на 375×812). */
.кружок-выбор .кружок{display:inline-block}
/* У <span> нет центровки содержимого, которую <button> на витрине получает
   от браузера: без flex буква размера прилипала к левому верхнему углу. */
.чип-выбор .чип{display:inline-flex;align-items:center;justify-content:center}
/* Отмеченные — как выбранные на витрине (макет 13): кольцо у свотча,
   жёлтый чип с чёрной рамкой. */
.кружок-выбор input:checked + .кружок{box-shadow:0 0 0 3px var(--surface-page),0 0 0 5px var(--border-strong)}
.чип-выбор input:checked + .чип{background:var(--action-primary-bg);border:var(--border-w-strong) solid var(--border-strong)}
.кружок-выбор input:disabled + .кружок,
.чип-выбор input:disabled + .чип{opacity:.35;cursor:not-allowed}
.кружок-выбор input:focus-visible + .кружок,
.чип-выбор input:focus-visible + .чип{box-shadow:var(--focus-ring)}
.подсказка{color:var(--text-muted);font-size:14px}
/* Ссылки внутри текста освобождены от цели нажатия 44px (WCAG 2.5.8:
   исключение для встроенных в предложение). Подчёркивание остаётся. */
.подсказка a{color:inherit;text-decoration:underline}
/* Согласие с офертой — под кнопкой оплаты в панели .низ (спека §5). */
.низ__подсказка{margin:var(--space-2) 0 0;font-size:12px;text-align:center}



/* Форма и страница заказа (макет 03–05). Колонка 600px; снизу отступ под
   фиксированную панель .низ. */
.заказ{max-width:600px;margin:0 auto;
       padding:var(--space-2) var(--space-4) calc(var(--space-8) * 2 + var(--space-5) + env(safe-area-inset-bottom))}
.заказ h1{margin:0 0 var(--space-5);font-size:28px;line-height:1.15}
/* Блок товара — белая карточка: фото, название, цена. */
.заказ__что{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-5);
     padding:var(--space-3);background:var(--surface-card);border-radius:var(--radius-md)}
.заказ__фото{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);flex-shrink:0}
.заказ__название{font-weight:700;margin:0}
.заказ__цена{margin:var(--space-1) 0 0;font:600 18px/1.2 var(--font-display);letter-spacing:.06em}
.заказ__ошибка{color:var(--error);font-weight:600}
/* Поля формы заказа и входа (макет 03, 10): подпись Oswald капсом, поле 48px
   с тёмной рамкой; ошибка — красная рамка и текст под полем. */
.заказ .field__input,.вход .field__input{min-height:48px;border-color:var(--border-strong)}
.field--ошибка .field__input{border:var(--border-w-strong) solid var(--border-accent)}
.field__error{display:block;color:var(--error);font-size:14px;margin-top:var(--space-1)}
.заказ .field{margin-bottom:var(--space-4)}

/* Страница заказа (макет 04): всё по центру — значок, номер, состояние. */
.заказ--статус{text-align:center;padding-top:var(--space-6)}
.заказ--статус h1{font-size:24px;text-transform:none;letter-spacing:.06em;margin:var(--space-4) 0 var(--space-3)}
.заказ--статус > p{color:var(--text-muted);margin:0 0 var(--space-4)}
.заказ--статус > p a{color:var(--text-body);font-weight:700}
.заказ--статус .заказ__что{text-align:left;margin-top:var(--space-5)}
.заказ--статус .btn{width:100%}
.заказ__значок{width:72px;height:72px;margin:0 auto var(--space-4);border-radius:50%;
     display:flex;align-items:center;justify-content:center;background:var(--gray-2);color:var(--text-body)}
.заказ__значок .icon{width:36px;height:36px}
.заказ__значок--проверяем{background:var(--surface-brand-tint)}
.заказ__значок--оплачен,.заказ__значок--выдан{background:var(--surface-success-tint);color:var(--success)}
.заказ__значок--не_прошла,.заказ__значок--возврат{background:var(--surface-accent-tint);color:var(--error)}
.заказ--статус > .заказ__подпись{margin:0;font:600 13px/1.2 var(--font-display);text-transform:uppercase;
     letter-spacing:.14em;color:var(--text-muted)}
.заказ__номер{margin:var(--space-1) 0 0;font:600 28px/1.2 var(--font-display);letter-spacing:.06em;color:var(--text-body)}
.заказ--статус > .заказ__номер{color:var(--text-body)}
.заказ__номер--плашка{display:inline-block;padding:var(--space-2) var(--space-5);font-size:32px;
     background:var(--action-primary-bg);color:var(--action-primary-fg);border-radius:var(--radius-md)}
.заказ--статус > .заказ__номер--плашка{color:var(--action-primary-fg)}
/* «Задать вопрос» под кнопкой заказа — тихая ссылка с иконкой; когда
   выбранный вариант закончился, product.js делает её второй крупной кнопкой
   (макет 02в): больше на экране сделать нечего. */
.низ__вопрос{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
     min-height:44px;color:var(--text-muted);font-size:14px}
.низ__вопрос .icon{width:16px;height:16px}
.низ__вопрос--крупно{margin-top:var(--space-2);border-radius:var(--radius-sm);
     box-shadow:inset 0 0 0 var(--border-w-strong) var(--border-strong);color:var(--text-body);
     text-decoration:none;font:600 15px/1 var(--font-display);text-transform:uppercase;letter-spacing:.14em}
.низ__вопрос--крупно .icon{display:none}

/* Карточка товара на десктопе (макет 02, 1280): две колонки, фото 560px
   с миниатюрами под ним; панель заказа — не фиксированная, а в колонке. */
@media (min-width:1024px){
  .назад--широкая{max-width:1120px;padding:var(--space-5) 0 0}
  .товар,.товар--касса{display:grid;grid-template-columns:560px 1fr;gap:64px;align-items:start;
       max-width:1120px;padding:var(--space-5) 0 var(--space-7)}
  .товар__фото{border-radius:var(--radius-md)}
  .товар__точки{justify-content:flex-start;gap:var(--space-3);padding-top:var(--space-3)}
  .товар__точка{width:88px;height:88px;padding:0;border-radius:var(--radius-sm);overflow:hidden}
  .товар__точка::before{display:none}
  .товар__точка img{display:block;width:100%;height:100%;object-fit:cover}
  .товар__точка--текущая{box-shadow:inset 0 0 0 2px var(--border-strong)}
  .товар__точка--текущая img{opacity:.92}
  .товар__инфо{padding:0}
  .товар .низ{position:static;display:flex;align-items:center;gap:var(--space-5);
       padding:var(--space-2) 0 0;background:none;border:0}
  .товар .низ .btn{width:280px}
}

/* Экран заказов (макет 15). Вкладки во всю ширину колонки, текущая
   подчёркнута жёлтым. */
.вкладки{display:flex;max-width:600px;margin:0 auto var(--space-4);padding:0 var(--space-4);overflow-x:auto}
.вкладки__вкладка{flex:1 0 auto;min-height:44px;display:flex;align-items:center;justify-content:center;
     padding:0 var(--space-3);color:var(--text-muted);text-decoration:none;white-space:nowrap;
     font:600 15px/1 var(--font-display);text-transform:uppercase;letter-spacing:.1em;
     border-bottom:var(--border-w) solid var(--border-default)}
.вкладки__вкладка--текущая{color:var(--text-body);border-bottom:3px solid var(--action-primary-bg)}
/* Строка заказа — белая карточка (макет order-row). На телефоне — столбиком,
   с 768px действия справа: шесть колонок таблицы в 375px — горизонтальный
   скролл, его T2 запрещает. */
.заказы{list-style:none;margin:0 auto;padding:0 var(--space-4) var(--space-6);max-width:600px;
     display:grid;gap:var(--space-3)}
.заказ-строка{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);
     background:var(--surface-card);border-radius:var(--radius-md)}
.заказ-строка p{margin:0}
.заказ-строка__текст{display:grid;gap:var(--space-1)}
.заказ-строка__шапка{display:flex;align-items:center;gap:var(--space-2)}
.заказ-строка__номер{font:600 18px/1.2 var(--font-display);letter-spacing:.06em}
.заказ-строка__имя{flex:1 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.заказ-строка__имя--удалено{color:var(--text-muted);font-weight:400}
.заказ-строка__мелко{color:var(--text-muted);font-size:14px}
.заказ-строка__мелко a{color:var(--text-body)}
.заказ-строка__действия{display:flex;gap:var(--space-2)}
.заказ-строка__действия .btn{min-height:44px}
/* Возврат: оплата пришла позже брони, штуки нет — первой в списке, красная
   полоса слева и плашка с указанием, что делать. */
.заказ-строка--возврат{box-shadow:inset 4px 0 0 var(--border-accent)}
.заказ-строка__возврат{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-2) !important;
     padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);
     background:var(--surface-accent-tint);color:var(--error);font-weight:700;font-size:14px}
.заказ-строка__возврат .icon{width:18px;height:18px;margin-top:2px}
.заказ-строка__действия .btn[disabled]{opacity:.5;cursor:progress}

/* Оферта и политика ПД (макет 06): колонка 700px, подзаголовки разделов без
   капса — длинный юридический текст читается спокойнее. */
.документ{max-width:700px;margin:0 auto;padding:var(--space-2) var(--space-4) var(--space-5)}
.документ h1{font-size:32px;line-height:1.15;margin:0 0 var(--space-4)}
.документ h2,.документ h3{font-size:18px;text-transform:none;letter-spacing:.06em;margin:var(--space-5) 0 var(--space-2)}
/* Подвал (макет: footer) — обычный конец страницы: фон страницы и линия сверху,
   не тёмная плашка. Тёмная внизу каталога, который занимает ровно экран,
   читалась как закреплённая панель (решение Alex, 08.10.2026). */
.подвал{margin-top:var(--space-6);border-top:var(--border-w) solid var(--border-default);
     font-size:14px;color:var(--text-muted)}
.подвал__ссылки,.подвал__копирайт{max-width:1120px;margin-inline:auto;padding-inline:var(--space-4)}
.подвал__ссылки{display:flex;flex-direction:column;padding-top:var(--space-3)}
.подвал a{color:inherit;min-height:44px;display:flex;align-items:center}
.подвал__копирайт{margin-block:0;padding-bottom:var(--space-5);font-size:12px;color:var(--text-faint)}
@media (min-width:768px){
  .подвал{display:flex;align-items:center;max-width:1280px;margin-inline:auto;padding:var(--space-4) 80px}
  .подвал__ссылки{flex-direction:row;gap:var(--space-6);padding:0;margin:0}
  .подвал__копирайт{margin:0 0 0 auto;padding:0}
}

/* Шапка сайта (макет: site-header). Плашка чёрная, под ней диагональная лента —
   широкая у витрины, тонкая у экрана владелицы. На телефоне «Задать вопрос» —
   только иконка (цель 44px), с 768px — иконка с текстом и ссылка «Каталог». */
.сайт-шапка{background:var(--surface-dark);color:var(--text-inverse)}
.сайт-шапка__плашка{display:flex;align-items:center;gap:var(--space-3);
     max-width:1280px;margin:0 auto;padding:var(--space-3) var(--space-4)}
.сайт-шапка__бренд{display:flex;align-items:center;gap:var(--space-3);flex:1 1 auto;
     min-width:0;color:inherit;text-decoration:none}
.сайт-шапка__логотип{width:40px;height:40px;flex-shrink:0;
     background:url("../img/logo.e78749f86b51.svg") center/contain no-repeat}
.сайт-шапка__название{display:flex;flex-direction:column;line-height:1.1;
     font-family:var(--font-display);text-transform:uppercase;letter-spacing:.14em}
.сайт-шапка__заголовок{font-size:18px}
.сайт-шапка__подзаголовок{font-size:12px;color:var(--brand)}
.сайт-шапка__ссылки{display:flex;align-items:center;gap:var(--space-6)}
.сайт-шапка__ссылка{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
     min-width:44px;color:inherit;text-decoration:none;background:none;border:0;padding:0;
     cursor:pointer;font:600 15px/1 var(--font-display);text-transform:uppercase;letter-spacing:.14em}
.сайт-шапка__ссылка .icon{width:22px;height:22px}
.сайт-шапка__каталог,.сайт-шапка__вопрос-текст{display:none}
.сайт-шапка__выход{margin:0}
.сайт-шапка__лента{height:12px;background:var(--stripe-brand)}
.сайт-шапка--владелица .сайт-шапка__плашка{padding-block:var(--space-2)}
.сайт-шапка--владелица .сайт-шапка__логотип{width:32px;height:32px}
.сайт-шапка--владелица .сайт-шапка__подзаголовок,
.сайт-шапка--владелица .сайт-шапка__ссылка{color:var(--text-faint)}
.сайт-шапка--владелица .сайт-шапка__ссылка{font-size:13px}
.сайт-шапка--владелица .сайт-шапка__ссылка .icon{width:20px;height:20px}
.сайт-шапка--владелица .сайт-шапка__лента{height:4px;background:var(--stripe-thin)}
@media (min-width:768px){
  .сайт-шапка__плашка{padding:var(--space-4) 80px}
  .сайт-шапка__логотип{width:52px;height:52px}
  .сайт-шапка__заголовок{font-size:24px}
  .сайт-шапка__каталог{display:flex}
  .сайт-шапка__вопрос-текст{display:inline}
  .сайт-шапка__вопрос{color:var(--brand)}
}

/* Заголовок страницы: h1 и то, что стоит сразу под ним (подзаголовок каталога,
   кнопки списка товаров). Колонка совпадает с содержимым экрана. */
.заголовок-страницы{display:grid;gap:var(--space-3);max-width:600px;margin:0 auto;
     padding:var(--space-5) var(--space-4) var(--space-4)}
.заголовок-страницы h1{margin:0;font-size:32px;line-height:1.15}
.заголовок-страницы p{margin:0;color:var(--text-muted)}
.заголовок-страницы__ряд{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.заголовок-страницы__ряд .btn{padding:0 var(--space-2);font-size:14px;letter-spacing:.08em;white-space:nowrap}
.заголовок-страницы--каталог{max-width:1120px}

/* Экран товара владелицы (макет 12). Всё в колонке 600px; блоки — белые
   карточки на сером фоне страницы. */
.товар-упр__заголовок{max-width:600px;margin:0 auto;padding:var(--space-2) var(--space-4) var(--space-4);
     font-size:32px;line-height:1.15}
.публикация,.всем-цену,#варианты-товара,.добавить-варианты,.описание,.фото-блок,.архивация,.архив{
     max-width:600px;margin:0 auto var(--space-4);padding:0 var(--space-4)}
/* Состояние публикации (задача 8) — сразу под заголовком: первое, что
   владелица должна увидеть, открыв товар. */
.публикация{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3)}
.публикация > .switch{flex:1 1 100%;min-height:56px;padding:0 var(--space-4);
     background:var(--surface-card);border-radius:var(--radius-md);font-weight:700}
/* «Цена всем вариантам» (задача 9) — поле с подписью и кнопка в ряд,
   кнопка по нижнему краю поля. */
.всем-цену{display:flex;align-items:flex-end;gap:var(--space-2)}
.всем-цену .field{flex:1 1 auto;min-width:0;margin:0}
.всем-цену .btn{min-height:48px}
.всем-цену .field__input{min-height:48px}
/* Подписи колонок над группами. Ширины совпадают с колонками .строка. */
.колонки{display:grid;grid-template-columns:40px 1fr 104px;gap:var(--space-3);
     padding:0 var(--space-4) var(--space-2);font-size:12px;color:var(--text-muted)}
.колонки span:last-child{text-align:center}
/* Группа вариантов одного цвета: владелица думает «чёрных не осталось», а не
   «вариант №17 снят» — отсюда группировка и образец цвета в заголовке. */
.группа{background:var(--surface-card);border-radius:var(--radius-md);overflow:hidden;
     margin-bottom:var(--space-3)}
.группа h2{display:flex;align-items:center;gap:var(--space-2);margin:0;padding:var(--space-3) var(--space-4);
     font:700 16px/1.3 var(--font-body);text-transform:none;letter-spacing:0;
     border-bottom:var(--border-w) solid var(--border-default)}
.образец{display:inline-block;width:16px;height:16px;border-radius:50%;
     background:var(--образец);border:var(--border-w) solid var(--border-default);flex-shrink:0}
/* Строка варианта (макет variant-row): размер | цена | штуки на полке.
   Ячейки прижаты к верху (align-items:start), у каждой первая линия — 44px:
   «в брони» делает ячейку штук выше остальных, и по центру строки поле штук
   уезжало вверх относительно галочки цены. Галочка цены стоит сразу за «₽»,
   а не у края колонки: иначе на широком экране она оказывалась рядом с полем штук.
   Поле цены и поле штук — независимые цели нажатия ≥44px (T2 №4). Кнопка-
   галочка видна всегда, а не по фокусу: на iOS Safari кнопка, появляющаяся
   только при фокусе поля, исчезает раньше, чем засчитывается нажатие. */
.варианты{list-style:none;margin:0;padding:0}
.строка{display:grid;grid-template-columns:40px 1fr 104px;align-items:start;gap:var(--space-3);
     padding:var(--space-3) var(--space-4);border-bottom:var(--border-w) solid var(--border-default)}
.строка:last-child{border-bottom:0}
.строка__размер{display:flex;align-items:center;min-height:44px;font:600 18px/1 var(--font-display);letter-spacing:.06em}
.строка__цена{margin:0;min-width:0}
.строка__цена-поле{display:flex;align-items:center;gap:var(--space-1);min-height:44px}
/* Поле цены выглядит как текст «1800 ₽», рамка появляется на фокусе. value —
   сырые цифры (круг правок 1, Critical): повторная отправка без правки безопасна. */
.строка__цена-поле .поле-цены{flex:0 1 6ch;min-width:0;padding:0 var(--space-1);
     border-color:transparent;background:transparent}
.строка__цена-поле .поле-цены:focus{border:var(--border-w-strong) solid var(--border-strong);background:var(--surface-card)}
.строка__рубль{color:var(--text-muted)}
.строка__цена .btn,.строка__штуки .btn{min-width:36px;min-height:36px;width:36px;padding:0;
     box-shadow:inset 0 0 0 var(--border-w) var(--border-default);color:var(--text-faint)}
.строка__цена:focus-within .btn{background:var(--action-primary-bg);box-shadow:none;color:var(--action-primary-fg)}
/* Отформатированная цена — для скринридера; на экране её показывает само
   поле (макет). */
.строка__цена-факт{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Количество на полке (спека онлайн-заказа §7): узкое поле по центру,
   «в брони» под ним. Ноль — красное поле (макет variant-row «Ноль»). */
.строка__штуки{display:grid;grid-template-columns:64px 36px;align-items:center;gap:var(--space-1);margin:0}
.строка__штуки .поле-штук{width:64px;text-align:center;font:600 18px/1 var(--font-display);
     background:var(--surface-page)}
.строка--ноль .поле-штук{background:var(--surface-accent-tint);border-color:var(--border-accent);color:var(--error)}
.строка__штуки:focus-within .btn{background:var(--action-primary-bg);box-shadow:none;color:var(--action-primary-fg)}
.строка__бронь{grid-column:1;text-align:center;color:var(--text-muted);font-size:12px;white-space:nowrap}

/* Раскрывающиеся блоки экрана товара — вид заголовка общий, в ui.css
   (summary.disclosure): белая карточка по макету 12а. */
/* .field__input рассчитан на однострочное поле: многострочному нужно своё —
   шесть строк видны сразу (кегль 16px и фокус — от .field__input, T2 №4). */
.описание textarea.field__input{min-height:140px;line-height:1.4;resize:vertical;
     padding:var(--space-2) var(--space-3)}
.описание form .btn{width:100%}
/* Название и описание — две формы в одном блоке, каждая со своей кнопкой:
   отбивка показывает, какая кнопка что сохраняет. */
#название{margin-bottom:var(--space-5)}
/* Фотографии по цвету (задача 7): миниатюры в ряд, перенос на телефоне. */
.фото-блок .группа{background:none;margin:0 0 var(--space-3)}
.фото-блок .группа h2{border:0;padding:0 0 var(--space-2)}
.фото-сетка{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.фото-сетка img{width:88px;height:88px;object-fit:cover;border-radius:var(--radius-sm);background:var(--gray-2)}
.фото-сетка .подсказка{padding:var(--space-2) 0;margin:0}
.фото-форма .btn{width:100%;margin-top:var(--space-2)}
/* Архив товара — в конце экрана, за прокруткой: рядом с рабочими полями
   кнопка была бы в зоне случайного тапа. Действие редкое и не главное,
   поэтому кнопка без заливки. */
.архивация{margin-top:var(--space-6);padding-top:var(--space-4);padding-bottom:var(--space-6);
     border-top:var(--border-w) solid var(--border-default)}
.архивация h2{font-size:16px;margin:0 0 var(--space-2)}
.архивация .подсказка{margin:0 0 var(--space-3)}
.архивация .btn{width:100%}
/* Архив в списке товаров: тот же .список под своим заголовком. */
.архив{margin-top:var(--space-4)}
.архив h2{font-size:16px;margin:0 0 var(--space-2);color:var(--text-muted)}
.архив .список{padding:0}