/* ==========================================================================
   Мобильная адаптация сайта.
   Подключается последним, поэтому перекрывает правила style.css и mobile.css.
   ========================================================================== */

/* 1. Главная причина поломки на телефонах: в style.css у body стояло
      min-width: 1250px — страница была шире экрана втрое. */
html, body { min-width: 0 !important; width: auto !important; max-width: 100%; }

/* 2. Картинки, схемы и таблицы не должны выходить за пределы экрана. */
img, svg, video, iframe, embed, object { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* 3. Переключатель языков переносится на новую строку, а не растягивает страницу. */
nav.langs, .langs { max-width: 100%; overflow-x: auto; white-space: nowrap; }

/* ---------- Планшеты ---------- */
@media screen and (max-width: 1024px) {
  body { background-attachment: scroll; }
  .content { width: 94%; }
  .left-bar { width: 30%; margin-right: 3%; }
  .right-bar { width: 64%; }
}

/* ---------- Телефоны ---------- */
@media screen and (max-width: 760px) {

  /* Колонки становятся одна под другой, содержимое идёт первым */
  .content { display: flex; flex-direction: column; width: 94%; margin: 0 auto; }
  .right-bar { order: 1; float: none; width: 100%; margin: 0; }
  .left-bar  { order: 2; float: none; width: 100%; margin: 24px 0 0; }

  /* Шапка */
  header { height: auto !important; padding: 10px 0; text-align: center; }
  .header-logo a { font-size: 1.35em !important; line-height: 1.25; display: block; word-wrap: break-word; }
  .header-logo p img, .header-logo img { max-width: 100%; height: auto; }
  header p { float: none !important; font-size: 1em !important; color: inherit !important; position: static !important; }

  /* Навигация: пункты в столбик, раскрываются кнопкой «Меню» */
  .header-nav { width: 100% !important; padding: 8px 0 !important; }
  .header-nav ul { display: none; margin: 0 !important; padding: 0 !important; }
  .header-nav ul li { width: 100% !important; display: block !important; }
  .header-nav ul li a { font-size: 1.05em !important; padding: 12px 14px !important; }
  #pull, a#pull { display: block !important; font-size: 1.1em !important; padding: 8px 14px; }
  .product-nav-goods { position: static !important; }
  .product-nav-goods p, .product-nav-goods-one p { width: auto !important; }

  /* Тексты и заголовки */
  body { font-size: 16px; line-height: 1.55; }
  h1, .right-bar h1 { font-size: 1.45em !important; line-height: 1.25; }
  h2, .right-bar h2 { font-size: 1.2em !important; line-height: 1.3; }
  h3, h4 { font-size: 1.05em !important; }
  .right-bar-content { font-size: 1em !important; padding: 10px !important; }
  .article-style { margin: 20px 0 !important; }

  /* Картинка в статье больше не «плавает» и не шире экрана */
  .article-style-content-img { float: none !important; width: 100% !important; margin: 0 0 12px !important; }

  /* Форма заявки */
  .div-for-form { width: auto !important; max-width: 100% !important; margin: 10px !important; padding: 0 12px 20px !important; }
  .div-for-form input, .div-for-form textarea, .div-for-form select { width: 100% !important; box-sizing: border-box; }
  .order-online { overflow-y: auto; }
  .error-online, .success-online { width: auto !important; margin: 120px 12px !important; font-size: 1.1em !important; }

  /* Широкие таблицы прокручиваются вбок, а не ломают страницу */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Таблицы данных */
  .facts th, .facts td { font-size: 0.95em !important; padding: 6px 8px; }

  /* Подвал */
  footer { height: auto !important; padding: 14px 10px; }
  footer nav ul li { display: block !important; width: 100% !important; text-align: center; }
  .footer-left, .footer-right, .footer-center { float: none !important; width: 100% !important; text-align: center; }

  /* Плакат А4 на телефоне показывается целиком */
  .sheet { width: auto !important; min-height: 0 !important; margin: 8px !important; padding: 12px !important; }
  .sheet .body { display: block !important; }
  .sheet .photo { width: 100% !important; flex: none !important; margin-bottom: 12px; }
  .hdr .big { font-size: 20pt !important; letter-spacing: 0 !important; }
  .hdr .sub { font-size: 10pt !important; }
  .facts .name { font-size: 15pt !important; }
  .toolbar { padding: 10px !important; }
}