/* ==========================================================================
   Serikov Coffee 2026 — ШАПКА НА ТЕЛЕФОНЕ В ПОРТРЕТЕ ПО МАКЕТУ FIGMA 52:4469
   (17.09.2026)

   Макет «iPhone 17 - 3» (узлы 52:4470 — логотип, 52:4471 — ряд «меню +
   поиск»). Отличия прежней шапки (mobile/header.css) от макета на 390:
     логотип 71 × 40 на y 8          → видимый знак 98 × 52 на y 12;
     ряд «меню + поиск» на y 56      → на y 75–76;
     кнопка меню 48, скошенный квадрат → своя фигура макета 52 × 52
                                         (узел 52:4472, выгружена как есть:
                                         img/hd-menu-m.svg — клякса со
                                         значком «три линии»);
     поиск 48, значок 18, кегль 16   → 54, значок 22, Medium 17, между ними 10
                                         (узлы 52:4475–52:4482);
     промежуток меню—поиск 10        → 12;
     поля 16                         → 14 (только на главной, см. ниже).
   Город слева в ряду логотипа остаётся: в макете его нет, но без него
   негде выбрать город доставки — это отдельный вопрос к заказчику.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, а не правка mobile/header.css: тот файл в этот
   день переделывает задача «меню „Каталог“» (панель каталога). Чтобы
   правки не затёрли друг друга, размеры шапки в портрете вынесены сюда.
   Когда та задача закончится, эти правила можно перенести в header.css —
   тогда поправить и таблицу высот в его шапке.

   ВЫСОТЫ (на них завязана липкость, как в header.css):
     ряд 1 (город + логотип)      75px   (макет: ряд 2 начинается на y 75)
     ряд 2 (меню + поиск)         54px  + 8px поля снизу
     ─────────────────────────────────
     шапка целиком               137px, прилипшая часть 62px

   Условие — телефон в портрете, как у остальных разделов «по макету»
   (mobile/hero.css, entries.css, home.css, products.css). Телефон набок
   живёт по mobile/landscape.css (шапка там в одну полосу), планшет — по
   mobile/tablet.css; их это не касается.
   Файл подключается glob'ом по алфавиту сразу после header.css
   («header.css» < «header.portrait.css»), но веса ниже всё равно на
   ступень выше правил header.css — порядок им не важен.
   ========================================================================== */
@media (max-width:767px) and (min-height:521px){

  /* ---- липкость ----
     Отрицательный top — высота ряда 1: ряд с логотипом уезжает, ряд
     «меню + поиск» остаётся. (1,0,1) против #site-header (1,0,0). */
  body #site-header{top:-75px}

  /* ---- поля 14 — только на главной ----
     Содержимое главной стоит в 14 от краёв (mobile/home.css), на
     остальных страницах поле .mac — 16, и шапка с ним совпадает. (1,1,1)
     против .head-plate (0,1,0). */
  body:has(#hero) .head-plate{padding:0 14px}

  /* ---- сетка ----
     Боковые столбцы — по ширине кнопки меню (52), чтобы логотип стоял
     строго по центру. (0,2,0) против .head-inner (0,1,0). */
  .site-head .head-inner{
    grid-template-columns:52px minmax(0,1fr) auto minmax(0,1fr) 52px;
    grid-template-rows:75px 54px}

  /* ---- логотип ----
     В файле logo-main.png (600 × 338) знак занимает x 42–557, y 22–301.
     Высота картинки 62 даёт знак 94 × 51, верх знака — 62 · 22 / 338 = 4
     от верха картинки; картинка на y 8 ставит знак на y 12, как в макете
     (узел 52:4470: 98 × 52 на y 12). Ширина — по пропорции файла (110).
     (0,2,0)/(0,2,1) против (0,1,0)/(0,1,1) в header.css. */
  .head-inner .hd-logo{align-self:start;margin:8px 0 0}
  .head-inner .hd-logo img{height:62px;max-height:62px}

  /* ---- кнопка меню 52 × 52 ----
     Фигура — картинка из макета целиком (клякса и три линии), поэтому
     подложки-колпачки из header.css не нужны: первая растягивается на
     всю кнопку и несёт фигуру, вторая выключена, свой значок кнопки
     скрыт (visibility, чтобы не сдвигать ничего). Размер значка в макете
     24 × 17 по центру — он внутри картинки.
     (0,2,0)/(0,2,1) против (0,1,0)/(0,1,1) в header.css. */
  .hd-menu .hd-cat{width:52px;min-width:52px;height:52px}
  .hd-menu .hd-cat::before{left:0;right:0;width:auto;
    background:url(../img/hd-menu-m.svg) no-repeat center / 100% 100%}
  .hd-menu .hd-cat::after{content:none}
  .hd-menu .hd-cat .hd-cat-ico{visibility:hidden}

  /* ---- поиск ----
     Высота 54: контур поля (border-image в site.css) считает боковины от
     --btn-h, при 54 они 26,7 — в макете 28. Значок 22, до слова 10,
     слово — Medium 17 (выше порога 16, при котором iOS увеличивает
     страницу при нажатии). Промежуток от кнопки меню 12.
     (0,2,0)/(0,2,1) против (0,1,0)/(0,1,1) в header.css. */
  .head-inner .hd-search{--btn-h:54px;margin:0 0 0 12px;gap:10px}
  .head-inner .hd-search-ico{width:22px;height:22px}
  .head-inner .hd-search input{font-size:17px;line-height:1.15}

  /* ---- панель каталога ----
     Запасной верх панели, если mobile/header.js не отработал, — высота
     шапки в покое (137 вместо 112). (0,2,0) против .hd-drop (0,1,0). */
  .hd-menu .hd-drop{top:var(--sc-drop-top,137px)}

  /* ---- тест на главной ----
     mobile/quiz.js прокручивает к результату с запасом под прилипший
     ряд: было 60 при прилипшей части 56, теперь она 62 — запас тот же,
     4. (1,1,0) против .quiz-aside (0,1,0). */
  #quiz .quiz-aside{scroll-margin-top:66px}
}