/*
  Вёрстка для узких экранов (телефоны). Подключается последним в templates/page.htm.
  Действует только при ширине окна до 767px — компьютерную версию не затрагивает.
  Правится напрямую: это обычный CSS, из LESS не собирается.
*/
@media (max-width: 767px) {

/* --- общая сетка: убираем жёсткую ширину 1240px --- */
html, body { min-width: 0 !important; }
.container, .header_inner, .breadcrambs_inner, #container #body, .main_block, .help_form, #footer .footer_inner { min-width: 0 !important; max-width: 100% !important; width: auto !important; box-sizing: border-box; }
.container, #header .header_inner, .breadcrambs .breadcrambs_inner, #container #body { padding-left: 12px !important; padding-right: 12px !important; }
#container { padding-top: 0 !important; margin-top: 0 !important; }

/* --- шапка --- */
#header { position: static !important; height: auto !important; }
#header .sticky_header { display: none !important; }
#header .header_inner { height: auto !important; position: relative; }
#header .header_inner .logo { width: auto !important; display: flex; align-items: center; height: auto !important; padding: 8px 60px 8px 0; }
#header .header_inner .logo img { position: static !important; height: 40px !important; width: 40px; max-width: none !important; margin-right: 8px; }
#header .header_inner .logo .logo_text { margin: 0 !important; padding: 0 !important; }
#header .header_inner .logo .logo_name { font-size: 22px !important; line-height: 1.1 !important; height: auto !important; }
#header .header_inner .logo .logo_info, #footer .logo .logo_info { display: inline; line-height: 1.3 !important; height: auto !important; }
#header .header_inner .header_main { float: none !important; width: auto !important; }
#header .header_inner .header_main .header_panel { height: auto !important; }
#header .header_inner .header_main .header_panel .block_left { float: none !important; width: auto !important; min-width: 0 !important; }
#header .header_inner .header_main .header_panel .block_cart { position: absolute !important; top: 10px; right: 12px; float: none !important; margin: 0 !important; }
#menu ul { flex-wrap: wrap; }
#menu .submenu { display: none !important; }

/* --- хлебные крошки, кнопки, заголовки --- */
.breadcrambs { height: auto !important; padding: 6px 0; }
.breadcrambs .breadcrambs_inner { line-height: 1.4 !important; height: auto !important; }
.btn.light_orange_btn.goback.goback_long { float: none !important; display: block; margin: 8px 0; }
.main_block h2, .view-component h2 { float: none !important; }

/* --- карточка детали --- */
.cart_container .image, .cart_container .about { float: none !important; width: auto !important; }
.cart_container .image { overflow-x: auto; }
.cart_container .image img.scheme_img { max-width: none; }
.cart_detail .order_info { width: auto !important; }
.view-component .slider_control.slider_prev { left: 0 !important; }
#other_components_list_container .slider_control.slider_next, .view-component .slider_control.slider_next { right: 0 !important; }

/* --- узел двигателя: схема в прокручиваемом окне, таблица деталей под ней --- */
.view-component .component-image { display: block !important; width: auto !important; height: auto !important; }
.component-image .btn_panel { width: auto !important; height: auto !important; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: static !important; float: none !important; padding: 6px !important; box-sizing: border-box; }
.component-image .btn_panel .btn { width: auto !important; flex: 1 1 auto; height: auto !important; margin: 0 !important; }
#content .view-component .component-image .component-overlay { display: block !important; width: auto !important; height: 440px !important; max-height: none; float: none !important; margin: 0 !important; border: 1px solid #d8d4c8; box-sizing: border-box; }
#content .view-component .details-list { display: block !important; width: auto !important; height: auto !important; overflow: visible !important; float: none !important; margin: 12px 0 0 !important; position: static !important; }
#content .view-component .details-list .table-overlay { width: auto !important; height: auto !important; overflow-x: auto !important; }
#content .view-component .details-list .table-head { display: none !important; }
#content .view-component .details-list #scrTbl { width: auto !important; height: auto !important; overflow: visible !important; }
#content .view-component .details-list #scrTbl table { width: 100% !important; }
#content .view-component .details-list #scrTbl table thead { display: table-header-group !important; }

/* --- страница двигателя: фильтр и плитка узлов --- */
.components-list .search-block, .components-list .search-block h3, .components-list .search-block form, .components-list .search-block .search_info { float: none !important; width: auto !important; }
.components-list .search-block form input { width: calc(100% - 90px) !important; box-sizing: border-box; }
.components-list .search-block .search_info { margin: 6px 0 !important; padding: 0 !important; text-align: left !important; }
.components-list .select_component { margin-left: 0 !important; margin-right: 0 !important; }
.components-list .item { width: 48% !important; margin: 0 4% 16px 0 !important; height: auto !important; box-sizing: border-box; }
.components-list .item:nth-of-type(2n) { margin-right: 0 !important; }

/* --- каталог двигателей и страницы серий --- */
.search-block.engines_search form, .search-block.engines_search .descr, .search-block.engines_search h3 { float: none !important; width: auto !important; max-width: 100%; display: block; box-sizing: border-box; }
.search-block.engines_search form input[type=text] { width: calc(100% - 90px) !important; box-sizing: border-box; }
.search-block.engines_search .descr { padding: 6px 0 !important; }
.lineup__block.block-engine { display: block !important; }
.lineup__block.block-engine > * { float: none !important; width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.lineup__block .block-engine__products { overflow-x: auto; }
.lineup__block img { max-width: 100% !important; height: auto !important; }
.engines-list > div { flex-wrap: wrap; }
.engines-list > div > ul { flex: 0 0 50%; width: 50% !important; box-sizing: border-box; padding-right: 6px; }

/* --- списки деталей и результаты поиска: без служебных столбцов, с прокруткой --- */
#content table.details_table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#content table.details_table th:nth-child(1), #content table.details_table td:nth-child(1),
#content table.details_table th:nth-child(2), #content table.details_table td:nth-child(2) { display: none; }

/* --- главная и текстовые страницы --- */
.main_catalog .work_info, .main_catalog .catalog, .main_map .work_info, .main_block .slider_outter .slider_inner { float: none !important; width: auto !important; }
.main_map .map, .main_block .slider_outter .doc_container { display: none !important; }
.main_block .main_preview .prev_item { width: auto !important; padding: 16px !important; }
.main_block .advantage .container { flex-wrap: wrap; justify-content: space-around; }
.main_block .advantage .advant_item { width: 45% !important; }
#content p img, #content .text img, .main_map .work_info .img img { max-width: 100% !important; height: auto !important; float: none !important; }
#content p span { max-width: 100%; white-space: normal !important; }

/* --- подвал --- */
#footer { height: auto !important; position: static !important; padding: 16px 12px !important; box-sizing: border-box; }
#footer .logo { width: auto !important; display: flex; align-items: center; height: auto !important; float: none !important; }
#footer .logo img { position: static !important; height: 36px !important; width: 36px; max-width: none !important; margin-right: 8px; }
#footer .logo .logo_text { margin: 0 !important; padding: 0 !important; }
#footer .footer_inner { float: none !important; }
#footer nav ul { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0 !important; }
#footer nav ul li { float: none !important; padding: 0 !important; margin: 0 !important; }
#footer .footer_inner .footer_panel .footer_block { float: none !important; width: auto !important; }

}