/* ============================================================
   bufet — мобильный слой (≤767px).
   Источник: docs/02/design_2/assets/mobile.css. В макете это
   отдельные документы без медиазапросов, поэтому здесь всё
   обёрнуто в @media и переведено на классы темы.

   Перенесены правила каркаса: шапка, футер, таб-бар, safe-area.
   Правила компонентов (герой, карточки, лента, CTA-полоса) едут
   вместе со своими компонентами — задачи 9–13; правила карточки
   товара (m-pdp*, m-buybar, m-sw, m-specs) — веха 4.
   ============================================================ */

@media (max-width: 767px) {

  * { -webkit-tap-highlight-color: transparent; }

  /* запас под таб-бар — на body: футер лежит вне main и иначе оказывается перекрыт */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 10px)); }

  /* ---- шапка: компактнее, как в m-home ----------------------- */
  .hd__in { height: 52px; }
  .hd__logo { font-size: 1.35rem; }

  /* отступ страниц-заглушек считается от мобильной высоты шапки.
     Пара классов, а не одиночный `.page`: `body_class()` вешает класс `page`
     на <body> любой обычной страницы, и одиночное правило попадало по нему.
     Специфичность обязана совпадать с base.css (0,2,0) — иначе десктопное
     правило перебьёт эту ветку. */
  .shell.page-stub { padding-top: calc(52px + clamp(24px, 6vw, 40px)); }
  /* то же и для внутренних страниц с собственной вёрсткой: десктопные 78px
     оставили бы под шапкой пустую полосу в четверть экрана телефона */
  .shell.page { padding-top: 52px; }
  /* цепочка глубины 3 — лента с уходом за край (приём .catnav), 5px снизу — под кольцо фокуса */
  .crumb { padding-block: 16px 5px; font-size: .76rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .crumb::-webkit-scrollbar { display: none; }
  .phead { padding-block: 12px 18px; margin-bottom: 20px; gap: 10px; }
  /* кегль заголовка внутренней страницы — как у .m-sec h2 мобильного макета */
  .phead__title { font-size: 1.9rem; margin-top: 6px; }
  .phead__count { font-size: .88rem; }

  /* ---- герой: типографика; композиция обложки — в hero.css ---- */
  .hero__eyebrow { margin-bottom: 0; font-size: .68rem; }
  .hero__title { font-size: 2.5rem; line-height: 1; letter-spacing: -.03em; margin: 16px 0 14px; }
  .hero__sub { font-size: 1rem; margin-bottom: 20px; }
  .hero__cta { gap: 16px; }
  /* в мобильном макете (.m-cta) стрелка без белого круга — просто иконка */
  .cta-main { gap: .7em; padding: 1em 1.5em; font-size: 1rem; }
  .cta-main__arrow { width: auto; height: auto; background: none; color: currentColor; border-radius: 0; }
  .cta-main__arrow svg { width: 18px; height: 18px; }

  /* кольцо-бейдж мобильный макет не показывает */
  .badge { display: none; }

  /* бегущая строка компактнее — чтобы не спорила с заголовком */
  .marquee { padding-block: 14px; }
  .marquee__track { gap: 34px; }
  .marquee__track span { gap: 34px; font-size: 1.15rem; }

  /* ---- порядок секций главной: «страницы 1–3» 03.docx (решение 42) ---- */
  .home main { display: flex; flex-direction: column; }
  .home main > * { order: 10; }
  .home main > .hero { order: 1; }
  .home main > .showcase { order: 2; }
  .home main > .feature { order: 3; }
  .home main > .process { order: 4; }
  .home main > .news { order: 5; }
  .home main > .stats { order: 6; }
  .home main > .calc { order: 7; }
  .home main > .ctaband { order: 8; }
  /* модификатор ставит home/process.php при заведённой странице «Как работаем» */
  .home main > .process--paged { display: none; }

  /* ---- заголовки секций: кегль мобильного макета (.m-sec h2) ---- */
  .sec-title { font-size: 1.6rem; }

  /* ---- лента изделий: протяжка вбок, карточка в 64% содержимого (.m-rail) ---- */
  .showcase { padding-top: clamp(30px, 8vw, 48px); padding-bottom: 8px; }
  .showcase__head { margin-bottom: 12px; }
  .showcase__track { gap: 14px; }
  /* 64% содержимого, как у .merch__track: дорожка — width: max-content, и процент в ней не считается */
  .showcase .pcard { width: calc((100vw - var(--gutter) * 2) * .64); }
  .pcard__plate { aspect-ratio: 3 / 4; border-radius: 14px; }
  /* длинное название категории не должно обрываться на полуслове */
  .pcard__plate .plate__tag { max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
  /* Бейдж наличия приехал в catalog.css из десктопного inner.css:51 (кегль .68rem,
     padding 6/11). На телефоне карточка вдвое уже, и мобильный макет рисует его мельче
     (mobile.css:58 «.m-card__badge») — берём его размеры. */
  .pcard__plate .plate__badge { top: 8px; left: 8px; padding: 4px 8px; font-size: .58rem; letter-spacing: .04em; }
  .pcard__body { display: block; padding-top: 10px; }
  .pcard__name { font-size: .96rem; }
  .pcard__tagline { font-size: .78rem; }
  /* Многочастной цене разрешаем перенос: разряды и символ валюты внутри суммы склеены
     неразрывными пробелами (wc_price), поэтому само число не разорвётся, а «было/стало»
     и диапазон встанут в две строки вместо того, чтобы вылезти за карточку. */
  .pcard__price { margin-top: 5px; font-size: 1rem; white-space: normal; }
  .pcard__price small { text-align: left; }
  /* подсказку «листайте вбок» мобильный макет не показывает */
  .showcase__hint { display: none; }

  /* ---- новости: та же лента протяжкой, что у изделий (решение 45) ---- */
  .news__head { margin-bottom: 16px; }
  .news__grid { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .news__grid::-webkit-scrollbar { display: none; }
  /* contents ставит две текстовые записи в дорожку наравне с главной */
  .news__list { display: contents; }
  .news__main, .news__item { flex: 0 0 auto; width: calc((100vw - var(--gutter) * 2) * .78); }
  /* в дорожке все три записи — одинаковые карточки с кадром, поэтому ни рамок, ни кегля крупнее */
  .news__item, .news__item:first-child, .news__item:last-child { padding: 0; border: 0; }
  .news__item .news__plate { display: block; }
  .news__main .news__title { font-size: var(--fs-h4); }
  .news__plate { margin-bottom: 14px; }
  /* в дорожке карточки видны сразу — см. CLAUDE.md темы → «Карточка и лента» */
  html.anim-on .news__grid [data-reveal]:not(.is-in) { transform: none; opacity: 1; }

  /* ---- ритм секций на телефоне ---- */
  .process, .feature, .news, .stats, .calc { padding-block: clamp(36px, 10vw, 64px); }
  .pstep { padding: 22px 0; }
  .pstep__n { font-size: 1.9rem; }
  .feature__media { aspect-ratio: 4 / 3; border-radius: 22px; }
  .feature__media .plate { border-radius: 22px; }
  .feature__facts { gap: 22px; }

  /* ---- CTA-полоса: акцентная карточка со скруглением, как .m-band ---- */
  .ctaband { margin: 26px var(--gutter); padding: 28px 22px; border-radius: 24px; }
  .ctaband__ring { display: none; }
  .ctaband__in { max-width: none; padding-inline: 0; }
  .ctaband__t { font-size: 1.6rem; line-height: 1.1; margin: 12px 0 10px; }
  .ctaband__p { font-size: .92rem; margin-bottom: 20px; }
  .ctaband__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .ctaband__row .cta-main, .ctaband__row .btn { min-height: 0; justify-content: center; padding-block: .95em; }
  /* стрелка без плашки — как в мобильном макете; фон ей даёт правило CTA-полосы */
  .ctaband .cta-main__arrow { background: none; color: currentColor; }
  .ctaband__contacts { gap: 8px 18px; margin-top: 24px; padding-top: 18px; }

  /* ---- форма заявки на узком экране ---- */
  .ctaband__form { margin-top: 26px; }
  .reqform__card { padding: 20px 18px; border-radius: 22px; }
  .field { padding-block: 14px; }
  .reqdone__row { flex-direction: column; align-items: stretch; }
  .reqdone__row .btn { justify-content: center; }
  /* автопрокрутка к полю не должна ставить его ни под шапку, ни под таб-бар */
  html { scroll-padding-top: 66px; scroll-padding-bottom: 96px; }

  /* ---- футер: на узком экране — компактный блок из мобильного макета */
  .ft { padding-top: clamp(32px, 8vw, 56px); }
  .ft__cols { display: none; }
  .ft__top { grid-template-columns: 1fr; text-align: center; }
  .ft__blurb { max-width: none; margin-inline: auto; }
  .ft__slogan { max-width: none; margin-inline: auto; }
  .ft__social { justify-content: center; }
  .ft__base { justify-content: center; text-align: center; padding-bottom: 26px; }

  /* плавающая кнопка WhatsApp не должна спорить с таб-баром */
  .wa-fab { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right: 16px; }

  /* ---- нижний таб-бар ---------------------------------------- */
  .m-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: flex; padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 10px));
    background: color-mix(in oklab, var(--bg) 90%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .m-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-family: var(--font-display); font-weight: 600; font-size: .64rem; color: var(--ink-3);
  }
  .m-tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .m-tab.is-on { color: var(--accent); }
}

/* таб-бар существует только на узких экранах */
@media (min-width: 768px) {
  .m-tabs { display: none; }
}