/* Общий 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.

   Прототип рисовали на десктопе и на телефоне не открывали: шапка занимает
   ровно 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;
    }
}
