/* Общий CSS витрины.
   ============================================================================
   ЧТО ЗДЕСЬ ЛЕЖИТ И ПОЧЕМУ. Всё, что нарисовано в прототипах ОДИНАКОВО на
   нескольких страницах: токены, база, кнопки, шапка, футер, нижняя навигация и
   системный экран. До выноса (задача сразу после 3.20, `docs/BLOCK3.md` §5)
   каждый такой блок был скопирован в инлайновый <style> каждой страницы:

       семь шаблонов, 168 647 байт CSS,  из них 83 728 — одни только токены
       (--logo, 17 КБ base64, лежал в пяти копиях)

   Правка футера означала четыре одинаковые правки, и одна забытая копия была
   видна только на скриншоте. Теперь копия одна, а nginx отдаёт файл с хэшем
   содержимого и кэшем на 30 дней — то есть на весь сайт он грузится однажды.

   В СТРАНИЦАХ ОСТАЛОСЬ ТОЛЬКО СВОЁ: герой и категории у главной, фильтры и
   сетка у каталога, галерея и табы у карточки, позиции и итоги у корзины.
   Плюс ровно три перекрытия, где прототипы разошлись между собой (ваше решение
   2026-08-05 — сохранить как есть, а не унифицировать): высота кнопки на
   главной и в каталоге, line-height заголовков там же и отступ под чёлку
   iPhone у нижней навигации на главной. Каждое подписано в своём файле.

   ПОРЯДОК ПРАВИЛ В ЭТОМ ФАЙЛЕ ЗНАЧИМ. Файл подключается в <head> ДО инлайнового
   <style> (решение 3.1: стили прототипа должны выигрывать), поэтому внутри него
   базовые правила обязаны идти раньше надстроек — мобильной шапки, липкого
   футера, скрытого бейджа. Ниже порядок такой: токены → база → кнопки → шапка →
   футер → навигация → системный экран → десктоп → надстройки.
   ============================================================================ */

/* ---------- ТОКЕНЫ ПРОТОТИПА (объединение всех вариантов) ---------- */
:root{
  --color-bg:#F5EDDC;
  --color-surface:#FBF6EA;
  --color-primary:#2E5B3E;
  --color-primary-hover:#23472F;
  --color-accent:#E0592A;
  --color-mustard:#E5B93C;
  --color-text:#1F241F;
  --color-muted:#6E6A5E;
  --color-primary-tint:#E4EAE0;
  --color-accent-tint:#F7E2D4;
  --color-border:#E6DCC6;
  --color-star:#E5B93C;
  --color-badge-text:#FBF6EA;
  --font-heading:'Unbounded',sans-serif;
  --font-body:'Onest','Inter',sans-serif;
  --radius-pill:999px;
  --radius-card:20px;
  --radius-surface:16px;
  --shadow-card:0 4px 16px rgba(31,36,31,.08);
  --shadow-pop:0 10px 30px rgba(31,36,31,.16);
  color-scheme:light;
  --container:1200px;
  --shadow-tab:0 -2px 12px rgba(31,36,31,.06);
  --logo:url("data:image/png;base64,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");
  --color-error:#C43D2E;
  --color-error-tint:#F6DED9;
}
html[data-theme="dark"]{
  --color-bg:#171A15;
  --color-surface:#21261E;
  --color-primary:#5C9A6D;
  --color-primary-hover:#4C8459;
  --color-accent:#E86A3C;
  --color-mustard:#E5B93C;
  --color-text:#F1EAD8;
  --color-muted:#A29E8F;
  --color-primary-tint:#28352A;
  --color-accent-tint:#3A2A22;
  --color-border:#333A2E;
  --color-star:#E5B93C;
  --color-badge-text:#FBF6EA;
  --shadow-card:0 4px 16px rgba(0,0,0,.35);
  --shadow-pop:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
  --color-error:#F08A7B;
  --color-error-tint:#3A241F;
}

/* ---------- БАЗА ПРОТОТИПА ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html{transition:background .25s}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font-family:inherit}
h1,h2,h3{font-family:var(--font-heading);font-weight:700;line-height:1.15;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.5;font-size:15px}
.wrap{max-width:var(--container);margin:0 auto;padding:0 16px}

/* ---------- КНОПКИ ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:600;font-size:15px;padding:0 22px;height:48px;transition:background .15s,color .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:var(--color-badge-text)}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-secondary{background:transparent;color:var(--color-primary);box-shadow:inset 0 0 0 1.5px var(--color-primary)}
.btn-secondary:hover{background:var(--color-primary-tint)}
.btn-catalog{display:none}

/* ---------- ШАПКА ---------- */
.header{position:sticky;top:0;z-index:40;background:var(--color-bg);border-bottom:1px solid var(--color-border)}
.header-in{display:flex;align-items:center;gap:12px;height:60px}
.header-actions{display:flex;align-items:center;gap:4px}
.logo{display:flex;align-items:center;gap:8px}
.logo-mark{width:34px;height:34px;flex:none;background:var(--color-primary);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.logo-text{font-family:var(--font-heading);font-weight:700;font-size:19px;letter-spacing:-.02em;white-space:nowrap}
.logo-text b{color:var(--color-primary)}
.logo-text i{font-style:normal;color:var(--color-accent)}
.city{display:flex;align-items:center;gap:5px;font-weight:500;font-size:14px;color:var(--color-muted);white-space:nowrap;position:relative;padding:6px 8px;border-radius:var(--radius-pill)}
.city:hover{background:var(--color-primary-tint);color:var(--color-text)}
.city svg:first-child{color:var(--color-primary)}
.city-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-surface);box-shadow:var(--shadow-pop);padding:6px;min-width:190px;display:none;z-index:50}
.city-menu.open{display:block}
.city-menu button{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:12px;font-size:14px;color:var(--color-text)}
.city-menu button:hover{background:var(--color-primary-tint)}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-pill);padding:0 16px;height:42px;min-width:0}
.search svg{color:var(--color-muted);flex:none}
.search input{border:none;background:none;outline:none;flex:1;min-width:0;font-size:14px;color:var(--color-text)}
.search input::placeholder{color:var(--color-muted)}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;color:var(--color-text);position:relative}
.icon-btn:hover{background:var(--color-primary-tint)}
.icon-btn span{font-size:11px;font-weight:600;display:none}
.badge{position:absolute;top:6px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-badge-text);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}
.ico-moon{display:none}
html[data-theme="dark"] .ico-sun{display:none}
html[data-theme="dark"] .ico-moon{display:block}

/* ---------- ФУТЕР ---------- */
.footer{background:var(--color-primary);color:var(--color-surface);margin-top:44px;padding:36px 0 30px}
.footer a:hover{color:var(--color-mustard)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:26px}
.foot-brand .logo-mark{background:var(--color-surface)}
.foot-brand .logo-text{color:var(--color-surface)}
.foot-brand .logo-text b,.foot-brand .logo-text i{color:var(--color-surface)}
.foot-brand p{margin-top:12px;font-size:14px;opacity:.8;max-width:280px}
.foot-col h4{font-family:var(--font-heading);font-size:15px;margin-bottom:14px;font-weight:600}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14px;opacity:.85}
.foot-contact a{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.foot-socials{display:flex;gap:10px;margin-top:14px}
.soc{width:44px;height:44px;border-radius:50%;background:rgba(251,246,234,.14);display:flex;align-items:center;justify-content:center}
.soc:hover{background:rgba(251,246,234,.28)}
.foot-bottom{border-top:1px solid rgba(251,246,234,.16);margin-top:28px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px;opacity:.75}

/* ---------- НИЖНЯЯ НАВИГАЦИЯ ---------- */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:45;background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;height:64px}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--color-muted);font-size:11px;font-weight:600;position:relative}
.tab.active{color:var(--color-primary)}
.tab .badge{top:6px;right:calc(50% - 22px)}

/* ---------- СИСТЕМНЫЙ ЭКРАН ---------- */
/* АТРИБУТ hidden ОБЯЗАН ПРЯТАТЬ, ЧЕГО БЫ ЭТО НИ СТОИЛО (5.4).
   Браузерное правило [hidden]{display:none} живёт в UA-стилях и проигрывает
   ЛЮБОМУ селектору по классу: .sum-row{display:flex} перебивает его молча, и
   элемент с hidden остаётся на экране. Поймано пиксельной сверкой на 5.4 —
   скрытая строка скидки показывала покупателю пустое «Скидка —» и поднимала
   панель заказа на 32 пикселя.
   !important здесь не украшение: правило обязано выигрывать у любого класса,
   иначе следующий скрытый блок снова окажется видимым, и заметит это глаз. */
[hidden]{display:none !important}

.state{text-align:center;max-width:420px;margin:0 auto;padding:20px 0}
.state .art{width:120px;height:120px;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;position:relative}
.state .art .ring{position:absolute;inset:-8px;border-radius:50%;border:2px dashed currentColor;color:var(--color-primary);opacity:.3}
.state h2{font-size:24px;font-weight:800;margin-bottom:10px}
.state p{color:var(--color-muted);margin-bottom:22px;text-wrap:pretty}
.state .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- ДЕСКТОП (то, что одинаково у всех четырёх страниц витрины) ----------
   ЗДЕСЬ НЕТ `body{padding-bottom:0}`, И ЭТО НЕ ЗАБЫВЧИВОСТЬ. Отступ под нижнюю
   навигацию задаётся в самой странице (`body{padding-bottom:64px}`), а инлайновый
   <style> идёт ПОСЛЕ этого файла. Медиазапрос специфичности не добавляет, поэтому
   сброс отсюда молча проигрывал бы правилу страницы, и на десктопе под футером
   осталось бы 64px пустоты. Сброс остался в @media каждой из четырёх страниц —
   там он написан после своего же правила и выигрывает.

   СОКРАЩЕНИЕ `padding:0 24px` — НАРОЧНО, И ЕГО НЕЛЬЗЯ МЕНЯТЬ НА `padding-inline`.
   Оно обнуляет вертикальные отступы, и на этом держится вёрстка футера: класс
   .wrap висит ещё и на .foot-bottom, у которой padding-top:18px. В прототипе на
   десктопе эти 18px гасились именно здесь. Замена на padding-inline их вернула —
   и страница выросла на 18px (замерено: каталог 2388 → 2406). */
@media (min-width:900px){
  .wrap{padding:0 24px}
  .header-in{height:74px;gap:18px}
  .search{max-width:460px}
  .icon-btn{width:auto;padding:0 12px;gap:6px}
  .icon-btn span{display:inline}
  .icon-btn .badge{right:6px}
  .btn-catalog{display:inline-flex}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .tabbar{display:none}
}

/* .state-page ПОСЛЕ десктопного блока, и это единственная причина такого места.
   Класс висит на том же элементе, что .wrap, специфичность у них одинаковая —
   значит решает порядок. Стой правило выше, сокращение `padding:0 24px` из
   медиазапроса обнуляло бы его padding-top, и содержимое 404, 500 и заглушки
   оформления уезжало бы на 56px вверх при ширине от 900px. Поймано сверкой
   снимков: расхождение было 43 000 пикселей. */
.state-page{padding-top:56px;padding-bottom:40px}

/* Общий CSS витрины. Основная масса стилей пока живёт в инлайновом <style>
   каждой страницы — вынос прототипных стилей это 3.20, раньше начинать нельзя
   (.claude/skills/design-port/SKILL.md).

   ДО 3.4 здесь намеренно НЕ БЫЛО правил, влияющих на вёрстку: любое глобальное
   правило становится невидимым входом в сверку скриншотов. Это перестало быть
   правдой на 3.4, и вот почему — исключение ровно одно, читайте ниже.

   Файл нужен ещё и затем, чтобы работало версионирование статики: ссылка на
   него отдаётся как /css/app-<md5>.css, поэтому после деплоя браузер не может
   показать старую версию. Сторожат StaticHashingTest и scripts/smoke.sh. */
:root {
    /* Маркер: по нему видно, что файл реально подключился, а не отдал 404. */
    --app-css: 1;
}

/* ============================================================================
   Корзина в шапке и тост (3.16). Второе и последнее отступление от правила «в
   этом файле нет вёрстки», и по той же причине, что мобильная шапка ниже:
   РАЗМЕТКА ЛЕЖИТ В ОБЩЕМ ФРАГМЕНТЕ (templates/fragments/layout.html), значит и
   стили обязаны быть общими. Иначе их пришлось бы повторить в инлайновом
   <style> четырёх страниц витрины, и одна забытая копия дала бы тост без
   оформления, заметный только на скриншоте.

   Бейдж скрыт по умолчанию и показывается скриптом. Сервер не знает, что лежит
   в корзине у этого посетителя, — она в localStorage, — поэтому нарисовать в
   шапке правильное число он не может. Показать «0» и через мгновение заменить
   его значило бы мигание на КАЖДОЙ странице сайта.

   Правило .badge.hide (0,2,0) бьёт инлайновое .badge (0,1,0) при любом порядке
   подключения, поэтому здесь оно работает, хотя app.css идёт в <head> ДО
   инлайнового <style>. То же правило есть в <style> корзины: оно пришло туда с
   прототипом и остаётся его частью.
   ============================================================================ */
.badge.hide {
    display: none;
}

/* Тост «Товар добавлен в корзину». Правила скопированы ДОСЛОВНО из
   design/prototypes/states.html — компонент нарисован дизайнером там же, где
   остальные состояния, и выдумывать его заново не нужно. */
.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
    max-width: 380px;
}

.toast .t-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.toast.ok .t-ico {
    background: var(--color-primary);
}

.toast .t-body {
    flex: 1;
    min-width: 0;
}

.toast .t-body b {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.toast .t-body span {
    font-size: 13px;
    color: var(--color-muted);
}

.toast .t-close {
    color: var(--color-muted);
    flex: none;
}

.toast .t-close:hover {
    color: var(--color-text);
}

.toast-stack {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100vw - 36px);
}

/* Красный тост. Правила из того же states.html, что и всё выше; на 3.16 они не
   поехали, потому что в браузере был ровно один повод показать тост — «товар
   добавлен». С 3.19 тост умеет обе роли (static/js/toast.js), и вторая половина
   оформления обязана быть здесь: иначе ошибка приедет в зелёной рамке
   «всё хорошо». */
.toast.err {
    border-left-color: var(--color-error);
}

.toast.err .t-ico {
    background: var(--color-error);
}

.toast.live {
    animation: toastIn .3s cubic-bezier(.5, 1.4, .5, 1) both;
}

.toast.out {
    animation: toastOut .25s ease forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ============================================================================
   ПРИЖАТИЕ ФУТЕРА К НИЗУ ОКНА (3.19). Третье и последнее отступление от правила
   «в этом файле нет вёрстки», и причина та же, что у мобильной шапки: правится
   общая разметка — <body>, — значит и правило обязано быть общим. В инлайновом
   <style> его пришлось бы повторить в пяти местах, и одна забытая копия дала бы
   полосу ровно на той странице, куда не посмотрели.

   ЧТО БЫЛО. У body нет min-height, поэтому документ кончался там же, где
   кончился контент, и на короткой странице под зелёным футером оставалась
   бежевая полоса --color-bg во всю ширину. Замерено на живом проде и локально
   (окно 1440): пустая корзина — низ футера 826px, то есть полоса 74px при высоте
   окна 900 и 254px при 1080; корзина с товарами — 5px и 185px. Дальше растёт
   линейно с высотой окна. Дефект прототипа, а не порта: cart.html оставляет под
   футером 291px, checkout.html — 279px.

   СТАНДАРТНОЕ ПРИЖАТИЕ ЧЕРЕЗ FLEX ЗДЕСЬ НЕ ГОДИТСЯ, И ЭТО ПРОВЕРЕНО, А НЕ
   ПРЕДПОЛОЖЕНО. `body{display:flex;flex-direction:column}` + `main{flex:1 0 auto}`
   действительно убирает полосу, но ломает две вещи разом:

     * НА ТЕЛЕФОНЕ СТРАНИЦА СТАНОВИТСЯ ШИРЕ ЭКРАНА. main превращается во
       флекс-элемент, а у него `min-width:auto` — то есть минимальный размер по
       min-content, и сжаться до 390 он больше не обязан. Замер: главная 660px
       при вьюпорте 390 (распирает заголовок hero), карточка товара 794px. В
       блочной раскладке такого нет: блок всегда шириной с родителя, а лишнее
       просто торчит из него, не меняя ширину документа;
     * НА ДЕСКТОПЕ СДВИГАЕТСЯ ВСЁ НИЖЕ ГЛАВНОЙ. Флекс-элемент образует новый
       контекст форматирования, и вертикальные отступы внутри него перестают
       схлопываться с внешними. Главная выросла с 2103 до 2139 пикселей —
       страница, которой правка вообще не касалась.

   ПОЭТОМУ ПРИЁМ ДРУГОЙ И БЕЗ ЕДИНОЙ СМЕНЫ display: body получает min-height, а
   футер — липкое положение с порогом в целый экран. Пока страница короче окна,
   body всё равно тянется на 100vh, и футеру разрешено съехать вниз ровно до
   нижней кромки body — полоса закрывается им же. Как только страница длиннее
   окна, футер и так стоит в конце документа, а вверх липкость его не двигает:
   `top:100vh` означает «не выше нижнего края экрана», а он там и есть.

   Блочная раскладка при этом не меняется НИ НА ЧТО: display прежний, отступы
   схлопываются как схлопывались, min-width у детей не появляется. Отсюда и
   ожидание сверки: выше футера — ноль различающихся пикселей на всех страницах.
   ============================================================================ */
body {
    min-height: 100vh;
}

.footer {
    position: sticky;
    top: 100vh;
}

/* ============================================================================
   Скелетоны загрузки (3.19). Перенесены из design/prototypes/states.html
   дословно — вместе с токеном --skel, которого нет ни в одной странице: у
   дизайнера он объявлен в самом наборе состояний.

   ПОТРЕБИТЕЛЕЙ У НИХ СЕГОДНЯ НЕТ НИ ОДНОГО, и это не забывчивость: на витрине
   всё рисует сервер, а единственный клиентский запрос — догрузка каталога —
   успевает раньше, чем скелетон стал бы виден. Правила лежат здесь, чтобы
   таблицы и карточки админки (4.2, 4.5) не переизобретали мерцание заново;
   первый настоящий потребитель появится там. Разметку брать из states.html.
   ============================================================================ */
:root {
    --skel: linear-gradient(90deg, var(--color-border) 25%, #efe6d1 37%, var(--color-border) 63%);
}

html[data-theme="dark"] {
    --skel: linear-gradient(90deg, var(--color-border) 25%, #2c322710 37%, var(--color-border) 63%);
}

.skel {
    background: var(--skel);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 8px;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.sk-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 12px;
    max-width: 230px;
}

.sk-photo {
    aspect-ratio: 1;
    border-radius: var(--radius-surface);
    margin-bottom: 12px;
}

.sk-line {
    height: 12px;
    margin-bottom: 8px;
}

.sk-line.w80 {
    width: 80%;
}

.sk-line.w60 {
    width: 60%;
}

.sk-line.w50 {
    width: 50%;
}

.sk-chips {
    display: flex;
    gap: 6px;
    margin: 12px 0;
}

.sk-chip {
    width: 44px;
    height: 22px;
    border-radius: var(--radius-pill);
}

.sk-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
}

.sk-price {
    width: 70px;
    height: 20px;
}

.sk-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.sk-table {
    width: 100%;
}

.sk-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--color-border);
}

.sk-row:last-child {
    border-bottom: none;
}

.sk-avatar {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex: none;
}

.sk-col {
    flex: 1;
}

.sk-pill {
    width: 74px;
    height: 24px;
    border-radius: var(--radius-pill);
    flex: none;
}

/* ============================================================================
   ФОТОГРАФИИ ТОВАРА (4.15). Одно правило на всю витрину.

   До этого этапа те же три свойства стояли инлайновым style на КАЖДОМ <img> —
   четыре копии в трёх шаблонах. Инлайн там появился на 3.3 потому, что в
   прототипах нет ни одного <img> и правил для картинки не существовало вовсе
   (dev/images.md).

   ТЕХДОЛГ «CSS КАРТОЧКИ В ТРЁХ КОПИЯХ» ЭТИМ НЕ РАСШИРЯЕТСЯ: правило добавлено
   в общий файл ОДИН раз, а не продублировано в трёх инлайновых блоках. Слоты
   у всех страниц одинаковые — квадрат с overflow:hidden, — поэтому и правило
   одно.

   object-fit:cover остаётся страховкой, а не механизмом: после 4.13a все файлы
   квадратные, вписывать нечего. Но битая пропорция здесь стоила бы растянутого
   фото на витрине, а строка — ничего.

   width/height у самих тегов расставлены в разметке: они задают пропорцию до
   загрузки. На CLS это не влияет (место резервирует aspect-ratio слота с 3.3),
   но браузер перестаёт гадать.

   .thumb ЕСТЬ И В АДМИНКЕ (миниатюра фото в форме товара, 4.14) — там своё
   правило в admin.css с теми же значениями плюс display:block. admin.css
   подключается вторым и перекрывает; расхождения нет, но знать об этом надо.
   Класса .p-thumb (строка списка товаров админки) здесь НЕТ нарочно: он
   витрине не принадлежит, и своё правило у него уже есть в admin.css. */
.card-photo img,
.ph img,
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Мини-строка модалки «купить в 1 клик»: слот 34px, размеры свои. У .mg в
   прототипе только font-size — там было эмодзи. */
.prod-mini .mg {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 8px;
}

/* ============================================================================
   Мобильная шапка. Единственное отступление от вёрстки прототипа в блоке 3.

   Прототип рисовали на десктопе и на телефоне не открывали: шапка занимает
   ровно 561px независимо от ширины экрана, потому что не сжимаются ни .city, ни
   .logo-text (у обоих white-space:nowrap), ни три .icon-btn по 44px, а .search
   уже раздавлен до 34px — в него физически не видно текст.

       16 (поле) + 149 (город) + 12 + 186 (лого) + 12 + 34 (поиск) + 12 + 140 = 561

   Дефект системный, а не про главную: эталонные мобильные снимки ref-home,
   ref-catalog, ref-cart и ref-product — все 561px, то есть ровно те четыре
   страницы, где есть эта шапка. Страницы без неё (auth, checkout, states,
   success-fail, account) — честные 390.

   ПОЭТОМУ ПРАВИЛА ЗДЕСЬ, А НЕ В <style> СТРАНИЦЫ: с 3.4 шапка стала общим
   фрагментом (templates/fragments/layout.html), и её стили обязаны быть
   общими — иначе на 3.6, 3.11 и 3.15 починку пришлось бы повторять руками в
   каждой копии инлайнового <style>, и одна забытая копия вернула бы 561px.

   ВНИМАНИЕ, СЕЛЕКТОРЫ НАМЕРЕННО С .header ВПЕРЕДИ. Ссылка на этот файл стоит
   в <head> ДО инлайнового <style> — так решено на 3.1, чтобы стили прототипа
   выигрывали и подключение app.css не могло сдвинуть вёрстку. Значит при
   равной специфичности побеждает инлайновый блок, а @media специфичности не
   добавляет: голое .header-in{height:auto} отсюда было бы молча
   проигнорировано. .header .header-in (0,2,0) бьёт .header-in (0,1,0).
   Упрощать эти селекторы нельзя.

   Раскладка — flex-wrap + order, разметка не меняется ни на символ:
   строка 1 — знак логотипа, город, иконки; строка 2 — поиск во всю ширину.
   ============================================================================ */
/* ----------------------------------------------------------------------------
   Заголовок секции на очень узких экранах: ссылка «Все наборы →» переносится на
   свою строку вместо того, чтобы вылезать за край.

   Второй дефект той же природы, что и шапка, и последний, из-за которого
   страница не влезала в узкий экран. `.sec-head` — flex без переноса, `h2`
   сжимается только до самого длинного слова, а `.sec-more` держит
   `white-space:nowrap` и не сжимается вовсе. В «Подарочных наборах» это
   198 («Подарочные») + 12 + 98 = 308, и пока доступной ширины меньше 308 —
   ссылку выносит за правый край. Отсюда и граница: 308 + 32 (поля .wrap) = 340.

   МЕДИАЗАПРОС ЗДЕСЬ ОБЯЗАТЕЛЕН, хотя выглядит как магическое число. Пробовал два
   безусловных варианта, оба меняли вид на 390px — самой ходовой ширине
   телефона — ради дефекта на 320:

   * `flex-wrap: wrap` на контейнере: перенос во flexbox решается по НАТУРАЛЬНОЙ
     ширине элемента, а не по минимальной. Полное «Подарочные наборы» шире
     248px, поэтому ссылка уезжала на свою строку уже на 390;
   * `white-space: normal` на ссылке: на 390 строка всё равно переполнена
     натуральными размерами, flex-shrink сжимал ссылку, и от «Все наборы →»
     отрывалась стрелка. Проверено скриншотом — стало хуже, чем было.

   Если заголовок секции когда-нибудь переименуют так, что самое длинное слово
   станет шире, границу 339px придётся пересчитать. Формула выше.
   ---------------------------------------------------------------------------- */
@media (max-width: 339px) {
    .wrap .sec-head {
        flex-wrap: wrap;
    }

    /* На своей строке `justify-content: space-between` уже не работает —
       элемент один, и прижать его вправо может только авто-отступ. */
    .wrap .sec-head .sec-more {
        margin-left: auto;
    }
}

@media (max-width: 899px) {
    /* Боковые 16px обязаны остаться от .wrap: сокращение `padding: 8px 0`
       затирало их, и логотип вставал вплотную к левому краю, а поиск
       растягивался от кромки до кромки, не совпадая с контентом ниже. */
    .header .header-in {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 16px;
        row-gap: 8px;
    }

    /* Без этого иконки липнут к городу, а справа остаётся дыра: на десктопе
       промежуток занимал поиск с flex:1, но он ушёл на вторую строку. */
    .header .header-actions {
        margin-left: auto;
    }

    /* order переносит поиск за иконки, flex-basis отдаёт ему всю строку. */
    .header .header-in .search {
        order: 1;
        flex-basis: 100%;
    }

    /* От логотипа остаётся знак-белка: текст занимал 150px из 186. */
    .header .logo-text {
        display: none;
    }

    /* Порядок в DOM — город, логотип, каталог, поиск, иконки. Каталог и поиск
       из первой строки уходят, и знак логотипа остался бы посередине между
       городом и иконками, будто его туда уронили. order:-1 ставит его первым,
       как в утверждённом макете. */
    .header .logo {
        order: -1;
    }

    /* Город забирает остаток строки и обрезается многоточием.
       Все три части обязательны, и вот почему:

       min-width:0     — иначе flex-элемент не сжимается меньше min-content, а у
                         .city стоит white-space:nowrap, и он держал 149px мёртвым
                         грузом;
       flex-basis:0    — одного min-width:0 мало. Перенос строк во flexbox решается
                         ДО сжатия и по гипотетическому размеру: с basis:auto город
                         считается за 149px, сумма 34+149+140+24=347 не влезает в
                         288px на экране 320, и на третью строку уезжали иконки.
                         С нулевой базой сумма 198px, всё остаётся в одной строке;
       max-width       — flex-grow:1 без потолка растянул бы город на весь остаток
       :max-content      строки, и подсветка при наведении стала бы шире текста.
                         max-content = ровно натуральные 149px.

       На экране 320px городу достаётся 90px, дальше многоточие. */
    .header .city {
        flex: 1 1 0;
        min-width: 0;
        max-width: max-content;
    }

    .header .city #cityName {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hero занимал 542px из ~800 видимых на телефоне: под текстом лежало 190px
       чистого отступа — место под декоративные круги. Резать его безопасно:
       .hero-b2 и .hero-b3 привязаны к низу (bottom:70 и bottom:30), поэтому
       поднимаются вместе с карточкой, а не обрезаются. Верхний оранжевый круг
       привязан к верху и не двигается вовсе. */
    .hero .hero-card {
        padding-bottom: 110px;
    }
}

/* ============================================================================
   ПРАВОВЫЕ СТРАНИЦЫ (4.5.2) — /legal/*, каркас templates/fragments/legal-layout.

   ПОЧЕМУ ЗДЕСЬ, А НЕ В ИНЛАЙНОВОМ <style> СТРАНИЦЫ. Правило блока 4: своего CSS
   минимум, инлайновых <style> не заводить. Страниц по этому каркасу будет
   восемь, и инлайновая копия на каждой означала бы восемь копий одного набора
   правил — ровно то, от чего избавил вынос 3.20.

   ПОЧЕМУ ЭТО НЕ МОЖЕТ СДВИНУТЬ ВИТРИНУ. Все селекторы ниже начинаются с .legal,
   .legal-page или .legal-body. Ни один элемент главной, каталога, карточки и
   корзины таких классов не несёт — значит правила до них не достают ни при
   каком каскаде. Это проверяемое утверждение, а не намерение: сверка снимков
   витрины обязана дать ноль.

   ПОЧЕМУ СЕКЦИЯ В КОНЦЕ ФАЙЛА, И ЭТО НЕ БЕЗРАЗЛИЧНО. Ровно та же причина, по
   которой ниже медиазапроса стоит .state-page: класс .legal-page висит на том же
   элементе, что .wrap, специфичность у них одинаковая, решает порядок. Стой
   правило выше @media (min-width:900px), сокращение .wrap{padding:0 24px}
   обнуляло бы его вертикальные отступы, и текст документа прилипал бы к шапке
   при ширине от 900px. На 3.19 такая же ошибка стоила 43 000 различающихся
   пикселей.
   ============================================================================ */

/* Место под нижнюю навигацию. На витрине это объявление живёт в инлайновом
   <style> каждой страницы; здесь <style> нет, поэтому правило включается
   классом на <body>. Сброс на десктопе — в медиазапросе в конце секции, и он
   работает, потому что перебивать ему нечего: инлайнового правила у страницы
   не существует. */
.legal-body {
    padding-bottom: 64px;
}

.legal-page {
    padding-top: 28px;
    padding-bottom: 36px;
}

/* Мера строки. Длинная строка юридического текста читается тяжело, и это
   единственная «дизайнерская» величина во всей секции: остальное — размеры и
   цвета, уже объявленные токенами витрины. */
.legal {
    max-width: 760px;
}

.legal h1 {
    font-size: 28px;
    font-weight: 800;
}

/* h2 — для страниц 4.5.3–4.5.5, у которых текст разбит на разделы. У реквизитов
   разделов нет, но правило стоит здесь, а не приедет вместе с первой страницей,
   которой понадобится: иначе оно окажется в инлайновом <style>, а его тут быть
   не должно. */
.legal h2 {
    font-size: 20px;
    margin-top: 30px;
}

.legal p {
    margin-top: 14px;
    text-wrap: pretty;
}

.legal ul,
.legal ol {
    margin-top: 14px;
    padding-left: 22px;
}

.legal li {
    margin-top: 6px;
}

/* Ссылки внутри текста документа: на витрине <a> красится в currentColor
   (base в начале файла), и в сплошном абзаце ссылка была бы неотличима от
   текста. Внутри .legal — фирменный зелёный. */
.legal a {
    color: var(--color-primary);
    font-weight: 600;
}

.legal a:hover {
    color: var(--color-accent);
}

/* Строка «Редакция от …» — подпись под заголовком. */
.legal-rev {
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-muted);
}

/* Таблица реквизитов. Прокрутка внутри обёртки — на случай значения, которое не
   переносится (адрес из ЕГРИП, длинная почта): страница не имеет права уезжать
   вбок на 390px, и это меряется documentElement.scrollWidth, а не осматривается
   (грабля 4.16b). */
.legal-table-wrap {
    margin-top: 20px;
    overflow-x: auto;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
}

.legal-table th {
    width: 38%;
    padding: 12px 16px 12px 0;
    text-align: left;
    vertical-align: top;
    font-weight: 500;
    color: var(--color-muted);
}

.legal-table td {
    padding: 12px 0;
    vertical-align: top;
}

/* Линейка между строками, но не над первой: tr+tr — это «каждая, кроме
   первой». Отдельного класса первой строке не нужно. */
.legal-table tr + tr th,
.legal-table tr + tr td {
    border-top: 1px solid var(--color-border);
}

@media (min-width: 900px) {
    /* Нижней навигации на десктопе нет (.tabbar{display:none} выше), значит и
       места под неё быть не должно — иначе под футером остаётся 64px пустоты. */
    .legal-body {
        padding-bottom: 0;
    }

    .legal-page {
        padding-top: 44px;
        padding-bottom: 48px;
    }
}

/* ============================================================================
   ПЕЧАТНАЯ ПАМЯТКА (4.5.4) — /legal/returns/print, страница без обвязки сайта.

   ПОЧЕМУ ЗДЕСЬ, А НЕ В ИНЛАЙНОВОМ <style> СТРАНИЦЫ. То же правило блока 4, по
   которому сюда уехала секция правовых страниц: инлайновых <style> не заводить.

   ПОЧЕМУ ЭТО НЕ МОЖЕТ СДВИНУТЬ ВИТРИНУ. Экранные правила ниже — только под
   .legal-print*, и ни один элемент витрины такого класса не несёт. Блок
   @media print виден вообще только принтеру: на снимках витрины, которые
   снимаются в режиме screen, его не существует.

   @page ЗДЕСЬ НЕТ НАРОЧНО. Правило размера полей глобально для документа, а
   app.css общий для всего сайта — поля уехали бы на печать любой страницы,
   включая карточку товара. Поля печатной памятки задаёт .legal-print-body.
   ============================================================================ */

.legal-print-body {
    padding: 32px 16px 48px;
}

.legal-print {
    margin: 0 auto;
}

.legal-print-head {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.legal-print-seller {
    font-weight: 700;
}

/* ОГРНИП и ИНН в одну строку. Разделитель — отступ, а не символ: незаданное
   поле не выводится вовсе, и висящая запятая выдала бы пропуск за опечатку. */
.legal-print-ids {
    margin-top: 4px;
    font-size: 14px;
    color: var(--color-muted);
}

.legal-print-ids span + span {
    margin-left: 18px;
}

.legal-print-source {
    margin-top: 28px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-muted);
}

/* Ссылка «Версия для печати» на ЭКРАННОЙ странице возврата. */
.legal-actions {
    margin-top: 28px;
}

@media print {
    /* Бумага не бывает тёмной и не бывает кремовой: чистый чёрный по белому —
       это ещё и тонер. Тему на сайте включает скрипт в <head>, которого у
       печатной страницы нет вовсе, но правило ниже страхует и тот случай, когда
       печатают экранную страницу с включённой тёмной темой. */
    .legal-print-body,
    .legal-body {
        background: #fff;
        color: #000;
        padding: 0;
    }

    .legal,
    .legal-print {
        max-width: none;
    }

    /* Обвязка сайта на бумаге — мусор: шапка с поиском, футер со ссылками и
       нижняя навигация, которую на бумаге не нажать. У печатной страницы их нет
       в разметке вовсе; здесь они убираются на случай печати экранной. */
    .header,
    .footer,
    .tabbar,
    .toast-stack,
    .legal-actions {
        display: none;
    }

    .legal-page {
        padding: 0;
    }

    /* Адрес ссылки на бумаге не виден, а он и есть контакт: телефон и почта в
       тексте памятки останутся читаемыми словами, поэтому подчёркивание
       сохраняем, а цвет уводим в чёрный — цветной принтер есть не у всех. */
    .legal a {
        color: #000;
        text-decoration: underline;
    }

    /* Заголовок раздела не должен оставаться внизу листа один. */
    .legal h1,
    .legal h2 {
        break-after: avoid;
    }

    .legal li,
    .legal p {
        break-inside: avoid;
    }
}

/* ============================================================================
   ТАБЛИЦА С ШАПКОЙ НА ПРАВОВОЙ СТРАНИЦЕ (4.5.5) — §6 политики ПДн, список
   получателей данных.

   ПОЧЕМУ МОДИФИКАТОР, А НЕ ПРАВКА .legal-table. Базовая таблица — это пары
   «метка — значение» (реквизиты, сроки доставки), и у неё первая колонка
   зафиксирована в 38 %. Трёхколоночной таблице такая ширина не годится, а
   менять базовую нельзя: она стоит на двух уже сданных страницах, и сверка
   снимков обязана дать по ним ноль.
   ============================================================================ */

.legal-table--cols th,
.legal-table--cols td {
    width: auto;
    padding-right: 20px;
}

.legal-table--cols th:last-child,
.legal-table--cols td:last-child {
    padding-right: 0;
}
