/* ==========================================================================
   Serikov Coffee 2026 — ШАПКА на телефоне (≤767px)

   Образец — мобильный lemanapro.kz: логотип по центру, под ним ряд
   «квадратная кнопка меню + поиск во всю ширину», и при прокрутке ряд с
   логотипом уезжает, а ряд с поиском остаётся прижатым к верху.

   Файл подключается последним после site-hf.css, site.css, catalog.css и
   home.css. Всё внутри одного медиазапроса; на десктопе и 768–1100 файл
   молчит. Размеры — в px: на 375px масштабные единицы --u/--d упираются в
   минимум ≈0,7px, и всё, что на них считано, выходит мелким.

   Высоты рядов зафиксированы, потому что на них завязана липкость:
     ряд 1 (город + логотип)      56px
     ряд 2 (меню + поиск)         48px  + 8px поля снизу
     ─────────────────────────────────
     шапка целиком               112px, прилипшая часть 56px
   Поменяли высоту ряда 1 — меняйте и top у #site-header ниже.
   ========================================================================== */
/* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок
   (ширина до планшетной, высота меньше 520px — у планшета в альбоме
   высота 768 и больше, он сюда не попадает). Условие одно и то же
   во всех файлах mobile/ и в их скриптах — менять только всё сразу. */
@media (max-width:767px), (max-width:1023px) and (max-height:520px){

  /* ---- верхняя зелёная полоса ----
     На телефоне города и телефон не помещаются; телефон есть в панели
     каталога. wavy.js на display:none не падает: draw() выходит при
     ширине меньше 2px. */
  .topbar{display:none}

  /* ---- липкость ----
     Липкий здесь #site-header (site-hf.css/site.css), а не .site-head.
     Отрицательный top равен высоте ряда 1: шапка едет вместе со
     страницей, пока ряд с логотипом не уйдёт за верх, и дальше ряд
     «меню + поиск» стоит на месте. */
  #site-header{top:-56px}

  /* site-hf.js при прокрутке вниз вешает .is-hidden и увозит шапку
     transform'ом — на телефоне поиск должен оставаться на экране. */
  .site-head.is-hidden{transform:none}

  /* will-change:transform и backdrop-filter у .site-head делают его
     containing block'ом для position:fixed — панель каталога ниже
     тогда «прилипает» к шапке, а не к окну, и bottom:60px считается от
     шапки. Снимаем оба; тень прилипшей шапки оставляем, а полупрозрачный
     фон без размытия читался бы как грязь — белый. */
  .site-head{padding:0;will-change:auto}
  .site-head.is-stuck{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

  /* site.css (правило под --d) даёт полям 40*--d ≈ 27px и перебивает
     свои же 16px из @media(max-width:1100px). */
  .head-plate{padding:0 16px}

  /* ---- сетка шапки: два ряда ----
     Столбцы: 48px | 1fr | auto | 1fr | 48px.
     Ряд 1: город занимает 48px+1fr слева, логотип — auto по центру,
     справа пусто 1fr+48px. Боковины равны, поэтому логотип стоит строго
     по центру независимо от длины названия города.
     Ряд 2: кнопка меню в первом столбце (ровно 48px), поиск — все
     остальные. minmax(0,1fr) — чтобы длинный город не раздвигал
     столбец и не сдвигал логотип. */
  .head-inner{display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(0,1fr) 48px;
    grid-template-rows:56px 48px;gap:0;height:auto;padding:0 0 8px;align-items:center}

  /* ---- ряд 1: логотип ---- */
  .hd-logo{grid-area:1/3/2/4;justify-self:center;align-self:center;margin:0}
  /* site.css задаёт ширину и высоту в --d; на телефоне логотип 40px
     высотой, ширина по пропорции файла (2482×1398 → ≈71px). */
  .hd-logo img{width:auto;height:40px;max-height:40px}

  /* ---- ряд 1: город ----
     .hd-tools в site.css — margin-left:auto и padding-left под десктоп.
     Кабинет и корзину из этой группы забирает нижняя панель (mobile/nav.js);
     на случай, если скрипт не отработал, прячем их здесь. */
  .hd-tools{grid-area:1/1/2/3;justify-self:start;align-self:center;
    margin:0;padding:0;gap:0;min-width:0;max-width:100%;align-items:center}
  .hd-tools > .hd-acc,
  .hd-tools > .hd-right{display:none}
  .hd-city{min-width:0;max-width:100%}
  /* Город в строку: значок и «г. Город» рядом, а не столбиком — столбик
     под 56px ряда не входит. Тап-цель 44px по обеим осям. */
  .hd-city-btn{flex-direction:row;align-items:center;gap:6px;
    min-width:44px;min-height:44px;max-width:100%;padding:0 6px 0 0;
    border-radius:0}
  .hd-city-btn > .hd-ico-img{height:18px;width:auto}
  .hd-city-wrap{align-items:flex-start;min-width:0}
  /* Длинное название (Усть-Каменогорск) режем многоточием, а не
     переносом: перенос ломает высоту ряда. */
  .hd-city-wrap b{display:block;max-width:100%;font-size:13px;line-height:1.2;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- ряд 2: кнопка каталога 48×48 ----
     На десктопе фигура — одна картинка hd-shape-btn.svg, растянутая на
     кнопку; сжатая до квадрата она теряет скос. Собираем квадрат из тех
     же концов, что у остальных кнопок (cap-green-l/r, §3.1 правил
     бренда). Просто положить оба конца фоном нельзя: прямой участок
     каждого конца шире половины кнопки и накрывает скос соседнего.
     Поэтому каждый конец живёт в своём псевдоэлементе ровно в полкнопки
     и обрезается им — стык прямых участков сходится в середине.
     Псевдоэлементы абсолютные: у inline-flex они иначе стали бы
     флекс-элементами и сдвинули значок. */
  .hd-menu{grid-area:2/1/3/2;margin:0;position:static}
  .hd-cat{position:relative;width:48px;min-width:48px;height:48px;margin:0;padding:0;gap:0;
    font-size:0;line-height:0;background:none}
  .hd-cat::before,
  .hd-cat::after{content:'';position:absolute;top:0;bottom:0;width:24px;
    background-repeat:no-repeat;background-size:auto 100%;pointer-events:none}
  .hd-cat::before{left:0;background-image:url(../img/cap-green-l.svg);background-position:left center}
  .hd-cat::after{right:0;background-image:url(../img/cap-green-r.svg);background-position:right center}
  /* Значок — над подложками: абсолютные псевдоэлементы иначе рисуются
     поверх обычного содержимого. */
  .hd-cat-ico{position:relative;z-index:1;width:20px;height:14px;margin:0}

  /* ---- ряд 2: поиск ----
     Фигуру поля здесь НЕ рисуют: в site.css у .hd-search стоит
     background-image:none!important, а контур приходит border-image'ом
     из field-frame-green.svg — тоже со своими !important. Боковины
     рамки считаются там же, от --frame-cap = --btn-h * 0.4947, значит
     единственное, чем форму можно поправить отсюда, — высота --btn-h.
     При 48px боковины выходят ≈23,8px; этого хватает и как отступ
     тексту, поэтому padding не задаём — он всё равно перебит
     padding-left/right!important из site.css (там 20*--u − --frame-cap,
     на телефоне уходит в минус и зажимается в 0). */
  .hd-search{--btn-h:48px;
    grid-area:2/2/3/6;flex:none;min-width:0;max-width:none;width:auto;
    height:var(--btn-h);margin:0 0 0 10px;gap:8px}
  .hd-search-ico{width:18px;height:18px}
  /* 16px — порог, ниже которого iOS приближает страницу при фокусе. */
  .hd-search input{font-size:16px;line-height:1.2}

  /* ---- панель каталога ----
     На десктопе это выпадашка под кнопкой (absolute от .hd-menu). На
     телефоне — панель на весь экран между шапкой и нижней навигацией.
     Её открывает и .hd-cat, и кнопка «Каталог» нижней панели при любой
     прокрутке, поэтому верх считает mobile/header.js от низа шапки и
     кладёт в --sc-drop-top; 112px — запас на случай, если скрипт не
     отработал (высота шапки в покое). bottom — под нижнюю панель 60px
     плюс «чёлка» снизу. Атрибут hidden и display у [hidden] не трогаем —
     ими управляет site-hf.js. */
  .hd-drop{position:fixed;top:var(--sc-drop-top,112px);left:0;right:0;
    bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:120;
    border:0;border-radius:0;box-shadow:none;background:#fff;
    overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  /* Пока панель открыта, страница под ней не должна ехать: иначе шапка
     уезжает, а панель остаётся на старом месте. Класс ставит
     mobile/header.js — он же пишет --sc-drop-top. */
  html.sc-menu-open,
  html.sc-menu-open body{overflow:hidden}

  /* Кнопка WhatsApp и плашка кук всплывают над открытой панелью и
     перехватывают тапы по её ссылкам. Поднять z-index панели нельзя:
     .hd-drop лежит внутри #site-header, а тот — position:sticky с
     z-index:100, то есть свой контекст наложения, и на странице панель
     стоит на слое 100 при любом своём z-index. .fab (120) и .cookie
     (250) живут в корневом контексте и потому оказываются выше.
     mobile/nav.css к тому же поднимает обе над нижней панелью — ровно
     в полосу, которую занимает меню. Пока панель открыта, просто
     убираем их; класс снимается вместе с закрытием меню. */
  html.sc-menu-open .fab,
  html.sc-menu-open .cookie{display:none}

  /* Внутри панели — те же выпадающие списки, что на десктопе (вид и
     поведение — site-hf.css и site-hf.js, раздел «Меню „Каталог“»):
     первая группа открыта, остальные свёрнуты, открыта одна. Здесь только
     размеры под палец: заголовок 52px, ссылка 44px, кегль 16px (на
     телефоне --d стоит на минимуме), поля 16px — как у контейнера .mac.
     Прокручивается сама .hd-drop, своей прокрутки у списка нет.
     Веса те же, что в site-hf.css, — файл грузится позже и выигрывает
     порядком: .hd-dd-h (0,1,0), .hd-dd-in a (0,1,1),
     .hd-dd .hd-drop-tel (0,2,0). */
  .hd-dd{padding:4px 0 calc(12px + env(safe-area-inset-bottom,0px))}
  .hd-dd-g~.hd-dd-g::before{margin:0 16px}
  .hd-dd-h{padding:0 16px;font-size:16px}
  .hd-dd-in a{min-height:44px;padding:10px 16px;font-size:16px;line-height:20px}
  .hd-dd .hd-drop-tel{margin:4px 16px 0;font-size:18px}

  /* ---- всплывашка «Ваш город — …?» ----
     В site.css при ≤700px она прижата к правому краю кнопки города и
     шириной 268*--u ≈ 188px: с левого края экрана уходила бы за кромку.
     Здесь — от левого края кнопки, шириной под экран. Кнопки в ней — те
     же .pbtn/.pbtn-line, только высотой под палец. */
  .hd-city-confirm{left:0;right:auto;top:calc(100% + 6px);
    width:280px;max-width:calc(100vw - 32px);padding:14px}
  .hd-city-confirm p{margin:0 0 10px;font-size:14px;line-height:1.35}
  .hd-city-confirm-btns{gap:8px}
  .hd-city-confirm-btns .pbtn,
  .hd-city-confirm-btns .pbtn-line{--btn-h:44px;flex:1 1 auto;min-height:44px;
    padding:0 12px;font-size:13px}

  /* ---- модалка выбора города ----
     Ширина уже подстроена (min(560*--u, 100%)), но кегли на --u выходят
     9–11px, а кнопки списка — ниже 30px. */
  .sc-city-modal{padding:12px}
  .sc-city-box{padding:20px 16px;border-radius:20px;max-height:calc(100vh - 24px)}
  .sc-city-x{top:6px;right:6px;width:44px;height:44px}
  .sc-city-box h2{padding-right:44px;font-size:20px;margin:0 0 6px}
  .sc-city-note{margin:0 0 14px;font-size:13px}
  /* Высота поля идёт из --btn-h — от неё же считается ширина боковин
     рамки (border-image в site.css), поэтому меняем только переменную;
     padding не трогаем, он там задан с !important. 16px — против зума iOS. */
  .sc-city-modal input[type=search]{--btn-h:48px;font-size:16px;margin-bottom:14px}
  .sc-city-major{gap:8px;margin-bottom:14px;padding-bottom:14px}
  .sc-city-major button{min-height:44px;padding:0 16px;font-size:14px}
  .sc-city-modal .sc-city-list{grid-template-columns:1fr 1fr;gap:2px}
  .sc-city-modal .sc-city-list button{min-height:44px;padding:10px;font-size:15px;line-height:1.3}
}