/* ============================================================
   MOBILE.CSS — мобильный слой baby-trend (Вариант D)
   ------------------------------------------------------------
   КОНТРАКТ ИЗОЛЯЦИИ (не нарушать):
   - Весь код ТОЛЬКО внутри @media (max-width: 767px).
   - Браузер на десктопе (>=768px) этот файл не применяет —
     десктоп физически не может измениться отсюда.
   - Файл грузится ПОСЛЕ style.css → переопределяет базу
     при равной специфичности.
   - Ничего десктопного здесь не писать. Планшет — tablet.css.
   Документация: docs/mobile-plan.md
   ============================================================ */

@media (max-width: 767px) {

  /* --- Анти-overflow: <html> протекает +174px (контент 564>390).
     Гасим горизонтальный скролл, чтобы контент не резался справа. --- */
  html, body { overflow-x: hidden; }

  /* --- Общая мобильная база --- */
  .bt-section-title h1,
  .bt-section-title h2 { font-size: 24px; line-height: 1.25; }
  .bt-section-title { padding-left: 16px; padding-right: 16px; }
  /* инлайн white-space:nowrap на <p> бьёт стили → перебиваем !important (только мобайл) */
  .bt-section-title p { font-size: 14px; white-space: normal !important; }
  /* ===== 6.1 Компактная шапка ===== */
  /* Телефон + WhatsApp убраны из мобильной шапки (дублируются в бургер-меню, секция
     «Связь»). Родительская тема рисует их отдельным рядом → шапка была 225px.
     Скрываем блок контактов целиком → шапка становится ниже. */
  #header .bt-grid-contacts,
  #header .container-contacts { display: none !important; }

  /* На боевом перед .bt-home-hero стоит карусель SmartSlider3 (обычный поток,
     не fixed) — она уже опускает контент ниже фикс-шапки сама. Прежний
     padding-top:165px был рассчитан на случай, когда hero — первый блок под
     шапкой, и поверх карусели создавал пустой экран. Обычный отступ секции. */
  .bt-home-hero { padding-top: 28px; }

  /* Клиренс карусели от фикс-шапки — НЕ здесь. У SmartSlider3 у самого
     4 правила padding-top!important на .n2-section-smartslider под свои
     брейкпоинты; при равной специфичности они идут в CSS после нас и
     побеждают по порядку каскада. Реальный фикс — inline-стиль через JS
     с 'important' (functions.php, wp_footer, только главная): такое
     ничем из внешнего CSS не перебить. См. коммит с разбором каскада. */

  /* Плавающая соц-кнопка (.socnav): уменьшаем иконки, чтобы развёрнутый ряд влезал.
     Инлайн-<style> подвала бьёт по каскаду → !important (безопасно в @media 767). */
  .socnav .socnav-btn svg,
  .socnav .socnav-link svg { width: 50px !important; height: 50px !important; }
  .socnav .socnav-list { gap: 8px !important; }
  .socnav.show .socnav-list { right: calc(100% + 16px) !important; }

  /* ===== ТАБ-БАР — нижняя навигация (только мобайл) ===== */
  /* Inline display:none на .bt-tabbar перебиваем здесь → десктоп остаётся без таб-бара */
  .bt-tabbar {
    display: flex !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: transparent; /* фон даёт .bt-tabbar-curve (fixed-сиблинг) — см. комментарий там */
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Единая кривая-вырез — обычная закрашенная SVG-фигура (фигура С ВЫРЕЗОМ В КОНТУРЕ), а не
     mask-image/clip-path НА САМОМ .bt-tabbar: та техника уже вызывала реальный GPU-глюк
     композитинга в Chrome на этом баре (сквозь него просвечивал случайный контент страницы,
     воспроизводилось стабильно, пропадало только при mask:none). Между "нарисовать форму с дыркой"
     и "замаскировать поверх другого контента" разница принципиальная для GPU-композитинга —
     первое стандартная заливка path, второе — отдельный композитный слой-маска, где и был баг.
     height выставляется в JS (positionCluster) = реальной высоте .bt-tabbar (учитывает safe-area). */
  .bt-tabbar-curve {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; display: block !important; z-index: 899 !important;
    pointer-events: none; filter: drop-shadow(0 -3px 10px rgba(0,0,0,.09));
  }
  .bt-tabbar-curve path { fill: #fff; }
  .bt-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 0 9px; color: #9aa0a0; text-decoration: none;
    font-size: 11px; font-weight: 700;
  }
  /* «Меню» — единственный пункт-<button> (JS-триггер, не ссылка) — сброс браузерных стилей кнопки */
  button.bt-tab {
    background: none; border: none; -webkit-appearance: none; appearance: none;
    font-family: inherit; cursor: pointer;
  }
  .bt-tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; }
  .bt-tab--act { color: #0b7a45; }
  /* «Прайс» — постоянный зелёный акцент (как десктопная CTA-кнопка «Получить прайс» в шапке),
     не завязан на активное состояние — попап, а не страница, «активной» ему не бывать */
  .bt-tab--price { color: #0b7a45; }
  /* Бургер шапки скрыт на телефоне (≤767) — «Меню» теперь в таб-баре, дублировать не нужно.
     На планшете (769-1025) бургер остаётся — там таб-бара нет. Специфичность (id+класс+класс)
     сознательно выше, чем у #header .burger{display:flex!important} в style.css, чтобы не зависеть
     от порядка подключения файлов (грабли из прошлого захода). */
  #header .burger.bt-grid-burger { display: none !important; }
  /* контент не под таб-баром + плавающая соц-кнопка над ним */
  body { padding-bottom: 64px !important; }
  /* Приподнятый кластер протыкает вырез над баром — соц-кнопке нужно больше отступа,
     чем от плоского 4-пунктного бара (было 76px) */
  .socnav { bottom: 98px !important; }

  /* --- Кластер PT/WB/OZON (5-й пункт .bt-tabbar) --- */
  /* Один готовый растр дизайнера (не пересборка из CSS-квадратов + вырезанных лого —
     собственная реконструкция градиентов/теней не совпадала 1:1 с макетом) */
  .bt-tc-slot { flex: 0 0 100px; }
  /* position:fixed (не absolute внутри .bt-tabbar) — см. комментарий в functions.php.
     display:flex !important — перебивает inline style="display:none" (десктоп-заглушка) */
  /* bottom БЕЗ !important намеренно — JS (functions.php) вычисляет реальный отступ от
     фактической высоты .bt-tabbar (учитывает safe-area-inset-bottom нотча) и перебивает
     это значение через element.style.bottom; 30px — только запасной вариант до его запуска. */
  .bt-tab-cluster {
    all: unset; position: fixed !important; left: 50% !important; bottom: 30px;
    transform: translateX(-50%) !important; display: block !important; cursor: pointer; z-index: 901 !important;
  }
  .bt-tab-cluster img { width: 108px; height: auto; display: block; }

  /* --- Шторка «Где купить» --- */
  /* display:block !important — перебивает inline style="display:none" (десктоп-заглушка) */
  .bt-mp-sheet-overlay {
    display: block !important;
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    z-index: 910; opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .bt-mp-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }
  .bt-mp-sheet {
    display: block !important;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 911;
    background: #fff; border-radius: 18px 18px 0 0;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 -10px 30px rgba(0,0,0,.2);
  }
  .bt-mp-sheet.is-open { transform: translateY(0); }
  .bt-mp-sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #dfe4e1; margin: 0 auto 14px; }
  .bt-mp-sheet-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: #8a938d; margin-bottom: 4px;
  }
  .bt-mp-sheet-row {
    display: flex; align-items: center; gap: 10px; padding: 12px 4px;
    text-decoration: none; border-bottom: 1px solid #f2f4f2;
  }
  .bt-mp-sheet-row:last-child { border-bottom: none; }
  .bt-mp-sheet-ch { margin-left: auto; color: #c2c8c2; font-size: 16px; flex-shrink: 0; }
  .bt-mp-sheet-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .bt-mp-sheet-name { font-size: 14.5px; font-weight: 700; color: #1c1c1c; }
  .bt-mp-sheet-sub { font-size: 11.5px; font-weight: 600; color: #9aa79e; }
  .bt-mp-sheet-glyph {
    width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 9px; font-weight: 900;
    overflow: hidden;
  }
  .bt-mp-sheet-glyph img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .bt-mp-sheet-pt img { object-fit: cover; }
  .bt-mp-sheet-wb, .bt-mp-sheet-ozon { padding: 3px; }
  .bt-mp-sheet-wb   { background: linear-gradient(135deg, #6a0080, #9c27b0); }
  .bt-mp-sheet-ozon { background: linear-gradient(135deg, #0050d0, #1976d2); }
  .bt-mp-sheet-pt   { background: linear-gradient(140deg, #2f8fef, #0d5fc4); }
  .bt-mp-sheet-tg   { background: linear-gradient(135deg, #0088cc, #229ed9); }

  /* Футер: «Наши магазины» (WB/Ozon/Б2Б) дублирует кластер в таб-баре, который всегда под рукой,
     а не только внизу страницы после скролла — на мобиле скрываем. «Мы в мессенджерах» (WhatsApp/
     Telegram/Max/VK) рядом НЕ трогаем — другая функция (поддержка), не дублируется нигде. */
  .ft-shops { display: none !important; }

  /* ===== 6.7 Попап-заявка «Получить прайс» (#bt-zayvka) — адаптация под мобилку ===== */
  /* попап зашит на width:720px → на мобиле переполняет экран; делаем во всю ширину.
     Инлайн-стили попапа грузятся позже → повышаем специфичность префиксом html. */
  html .mfp-content #bt-zayvka,
  html .mfp-inline-holder .mfp-content { width: auto !important; max-width: 100% !important; }
  /* тема сама пытается сделать 1 колонку (@640), но её селектор слабее базового
     .mfp-content #bt-zayvka → не срабатывает. Перебиваем: форма во всю ширину */
  html .mfp-content #bt-zayvka { grid-template-columns: 1fr !important; }
  .mfp-container { padding-left: 8px !important; padding-right: 8px !important; }
  /* инпуты 14px → 16px: iOS Safari не зумит экран при фокусе */
  html #bt-zayvka input[type=text],
  html #bt-zayvka input[type=email],
  html #bt-zayvka input[type=tel] { font-size: 16px !important; }

  /* ===== Страница контактов (bt-contacts) ===== */
  /* заголовок героя зашит white-space:nowrap → обрезается; разрешаем перенос */
  #bt-contacts .btc-hero h2 { white-space: normal !important; font-size: 23px !important; }
  /* капча-инпут 80px → шире, чтобы плейсхолдер помещался */
  #bt-contacts .dscf7captcha input[type="text"] { width: 120px !important; font-size: 16px !important; }

  /* ===== 6.3/6.4 Каталог/архив (/shop/, категории) ===== */
  /* контент опускается ниже фикс-шапки (187px), иначе верх каталога под меню */
  body.woocommerce-shop main#primary,
  body.tax-product_cat main#primary,
  body.tax-product_tag main#primary,
  body.post-type-archive-product main#primary { padding-top: 150px !important; }

  /* Кнопка «Фильтр» (скрыта на десктопе inline style → показываем тут) */
  .bt-filter-toggle {
    display: inline-flex !important; align-items: center; gap: 8px;
    /* было сплошным #0b7a45 — 4-й несовпадающий оттенок зелёного (найдено внешней проверкой);
       переведено на фирменный тил, тем же градиентом, что и остальные CTA-кнопки сайта */
    background: linear-gradient(135deg, #00695c, #00897b); color: #fff; border: none; border-radius: 12px;
    padding: 11px 18px; font-size: 14px; font-weight: 800; margin: 0 0 14px;
    box-shadow: 0 3px 12px rgba(0,105,92,.25); cursor: pointer;
  }
  /* WOOF-фильтр (.woof_auto_show скрыт opacity:0/height:1px) → выезжающая шторка.
     Родитель .woof_autohide_wrapper имеет display:none → форсим видимым, иначе
     fixed-элемент внутри не рендерится (0×0). */
  .woof_autohide_wrapper { display: block !important; }
  /* A1: форсинг display:block выше проявлял и встроенную кнопку WOOF «Фильтр» → был дубль
     рядом с кастомной .bt-filter-toggle. Прячем родную кнопку плагина, шторку оставляем. */
  .woof_autohide_wrapper .woof_show_auto_form.woof_btn_default { display: none !important; }
  .woof_auto_show {
    display: block !important; opacity: 1 !important; height: auto !important;
    position: fixed !important; top: 0; bottom: 0; left: -92%;
    width: 92% !important; min-width: 300px !important; max-width: 360px; z-index: 1002;
    background: #fff; overflow-y: auto !important;
    padding: 14px 16px 90px; box-sizing: border-box;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
    transition: left .3s ease;
  }
  /* внутренние обёртки WOOF схлопывают контент (height:1px/overflow:hidden) — разворачиваем */
  .woof_auto_show .woof_auto_show_indent,
  .woof_auto_show .woof,
  .woof_auto_show .woof_overflow_hidden {
    height: auto !important; max-height: none !important;
    overflow: visible !important; opacity: 1 !important; width: auto !important;
  }
  .woof_auto_show .woof_container { display: block !important; margin-bottom: 14px; }
  body.bt-filter-open .woof_auto_show { left: 0; }
  body.bt-filter-open { overflow: hidden; }
  body.bt-filter-open .bt-filter-overlay {
    display: block !important; position: fixed; inset: 0; z-index: 1001;
    background: rgba(0,0,0,.45);
  }
  /* шапка шторки (× закрыть) — добавляется JS только на мобиле */
  .bt-filter-close {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 16px; font-weight: 800; color: #18201a;
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eee;
  }
  .bt-filter-close .x { font-size: 26px; color: #999; line-height: 1; cursor: pointer; }

  /* ===== ГЛАВНАЯ — покомпонентно (заполняется по мере проверки) ===== */

  /* 6.2 Каталог-бенто ГЛАВНОЙ — Вариант A: ровная сетка 2×N.
     ВАЖНО: правила ограничены .btc-bento — класс .btc-card используется и
     для карточек товара (ul.products), их НЕ трогаем. */
  .btc-wrap { max-width: 100%; padding-left: 12px; padding-right: 12px; box-sizing: border-box; }
  .btc-bento {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
  }
  .btc-bento .btc-card { aspect-ratio: 1 / 0.86 !important; }
  .btc-bento .btc-card.w2 { grid-column: auto !important; } /* убрать растяжку на 2 колонки */
  .btc-bento .btc-card.h2 { grid-row: auto !important; }    /* убрать растяжку на 2 ряда */
  .btc-bento .btc-name { font-size: 13.5px; }
  .btc-bento .btc-name-lg { font-size: 14px; }
  .btc-bento .btc-inner { padding: 12px; }

  /* Убрать товарные секции ([bz-cat-prod-grid]) с главной на мобиле (десктоп оставляем) */
  body.home .bz-cat-prod-grid { display: none !important; }
  body.home .max-w-1200:has(> .bz-cat-prod-grid) { display: none !important; }

  /* 6.9a «Почему мы» (#why-us-block .why-rows/.why-row) */
  /* TODO */

  /* 6.9b Сертификаты (#cert-block .bt-certs-inner grid 1fr 1.7fr → 1 колонка) */
  /* TODO */

  /* 6.9c Как заказать (#advant-block .bt-v1-row flex → стек) */
  /* TODO */

  /* 6.9d Нам доверяют (#trust-partners-block .stats-row) */
  /* TODO */

  /* 6.9e Контакты (bt-contacts .btc-grid/.btc-email-row) */
  /* TODO */

} /* /max-width:767px */