/* ============================================================
   mobile.css — мобильная адаптация (грузится ПОСЛЕ modern.css).
   Десктоп не меняется: почти всё внутри @media, глобально — только
   безопасные защиты от переполнения. Откат: убрать <link mobile.css>.
   ============================================================ */

/* --- Глобальные защиты (безопасны для десктопа) --- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, iframe { max-width: 100%; }
/* длинные слова/ссылки не рвут вёрстку */
h1, h2, h3, p, a, span, .brand, .price, .stock { overflow-wrap: break-word; }
/* дети flex/grid могут сжиматься (иначе распирают строку) */
.searchbar, .hd-right, .topbar-in, .row, .prow, .shop, .form-grid, .steps { min-width: 0; }
/* якоря не прячутся под липкой шапкой */
[id] { scroll-margin-top: 96px; }

/* ============ Планшеты и телефоны ≤ 640px ============ */
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .section { padding: 48px 0; }

  /* флюидные заголовки */
  h1, .cat-title, .page-title { font-size: clamp(24px, 6.5vw, 32px); }
  h2 { font-size: clamp(21px, 5.6vw, 28px); }

  /* верхнее меню категорий — горизонтальный скролл вместо кривого переноса */
  .catnav { gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .catnav::-webkit-scrollbar { display: none; }

  /* удобные тап-таргеты */
  .btn, .search-find, .hd-ic, .catnav a, .subnav-row a { min-height: 44px; }
  .btn { padding: 13px 20px; }
  input, select, textarea { min-height: 44px; font-size: 16px; } /* 16px = iOS не зумит */

  /* каталог: карточки в одну колонку — крупнее фото и текст */
  .prod-grid { grid-template-columns: 1fr !important; gap: 14px; }
  a.prod .imgbox { height: 230px; }

  /* карточки товара: цена и наличие в столбик, чтобы не жались */
  a.prod .prow { flex-wrap: wrap; gap: 4px 10px; }

  /* контакты и кнопки мессенджеров на всю ширину */
  .wa-btn, .tg-btn { width: 100%; }
}

/* ============ Телефоны ≤ 430px ============ */
@media (max-width: 430px) {
  .wrap { padding-left: 14px; padding-right: 14px; }
  .section { padding: 40px 0; }

  /* шапка компактнее */
  .searchbar { height: 58px; gap: 12px; }
  .logo { font-size: 19px; }
  .hd-right { gap: 14px; }

  /* плитки причин/шагов/форма — гарантированно в одну колонку */
  .grid.s2, .grid.s3, .grid.s4, .steps, .form-grid { grid-template-columns: 1fr !important; }

  /* сайдбар фильтров каталога — статично, на всю ширину */
  .shop { grid-template-columns: 1fr !important; }
  .sidebar { position: static !important; }
  .selrow { grid-template-columns: 1fr 1fr !important; }

  /* крупная цена не переносится некрасиво */
  a.prod .prow .price { font-size: 21px; }
}

/* --- Мобильная шапка: логотип+телефон в ряд, поиск отдельной строкой --- */
@media(max-width:700px){
  header .searchbar{flex-wrap:wrap;gap:10px 12px;height:auto;min-height:0;padding-top:12px;padding-bottom:12px}
  header .searchbar .logo{flex:0 0 auto}
  header .searchbar .hd-right{margin-left:auto;gap:12px}
  header .searchbar .search{order:5;flex:1 1 100%;min-width:0}
  .logo .logo-ic{height:40px}
  .logo .logo-wm-img{height:30px}
  .hd-phone b{font-size:15px}
  .hd-phone span{font-size:11px}
}
@media(max-width:360px){
  .logo .logo-wm-img{height:26px}
  .hd-phone b{font-size:14px}
}