/* mobile.css — адаптивные правила для телефонов и узких планшетов.
   Подключается ПОСЛЕ style1.css. Чтобы отключить мобильную версию, уберите строку <link> в header.tpl.html. */

img{max-width:100%;height:auto}

/* нижняя панель «Позвонить» — на ПК скрыта */
.m-call{display:none}
.m-cat-btn{display:none}
.m-hero{display:none}

@media screen and (max-width:900px){
  html{overflow-x:hidden;-webkit-text-size-adjust:100%}
  body{height:auto !important;padding-bottom:64px}

  /* шапка: больше не прибита к экрану, чтобы не съедала место */
  .header{position:static !important}
  #stroka1{padding:8px 12px !important;display:flex;flex-direction:column;gap:6px}
  #stolbec1{display:none}
  #stroka1 #stolbec2{position:static !important;width:auto !important;margin:0 !important;left:auto !important;text-align:left;font-size:15px}
  #menu{float:none !important;margin:0 !important;width:100%}
  #menu ul{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}
  #menu ul li{float:none !important;padding:0 !important}
  #menu ul li a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px !important;border:1px solid #d5d5d5;border-radius:8px;background:#fff;font-size:14px}

  #stroka2{padding:10px 12px !important;flex-wrap:wrap;gap:10px}
  #logo{float:none !important;margin:0 !important;width:200px !important;max-width:60%}
  #stroka2 #stolbec2{position:static !important;margin:0 !important;width:100% !important;order:3}
  #search{position:relative}
  #search input[type=text]{width:100% !important;height:44px;box-sizing:border-box;font-size:16px;padding-right:46px}
  #search input:nth-child(2){top:7px !important;right:7px !important}
  #stolbec3{float:none !important;margin:0 !important}

  /* крупный слайдер с баннерами на телефоне скрываем: те же направления есть плиткой ниже */
  #slider{display:none !important}
  #menu_down{padding-top:0 !important}

  h2{margin-left:16px !important;font-size:20px}
  .content_s h2,#slider h2{margin-left:0 !important}

  /* мобильный баннер: карточки листаются свайпом (на ПК остаётся обычный слайдер) */
  .m-hero{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:12px;scrollbar-width:none}
  .m-hero::-webkit-scrollbar{display:none}
  .m-slide{flex:0 0 86%;scroll-snap-align:center;display:flex;align-items:center;gap:12px;min-height:150px;padding:14px;border-radius:12px;background:#1d2a35;color:#fff;text-decoration:none;box-sizing:border-box}
  .m-slide:only-child{flex-basis:100%}
  .m-slide img{flex:0 0 88px;width:88px;height:88px;object-fit:contain;background:#fff;border-radius:8px;padding:4px;box-sizing:border-box}
  .m-slide b{display:block;font-size:17px;line-height:1.25;margin-bottom:4px}
  .m-slide small{display:block;font-size:13px;line-height:1.35;opacity:.85;margin-bottom:10px}
  .m-slide em{display:inline-block;font-style:normal;font-weight:700;font-size:14px;padding:8px 14px;border-radius:8px;background:#d13c25}

  /* плитка категорий на главной */
  #table_catalog{width:100% !important;padding:12px;gap:10px !important;box-sizing:border-box}
  .cat-item{width:calc(50% - 5px) !important;padding:10px !important;box-sizing:border-box;font-size:13px}
  .cat-item img{max-height:90px !important;margin-bottom:8px !important}
  .cat-item a{font-size:14px}

  /* блок «Мы — надёжный партнёр» */
  #our{margin:24px 0 !important;padding:24px 0 !important}
  #inner_our{width:auto !important;padding:12px 16px !important}
  #inner_our ul{flex-direction:column}
  #inner_our ul li{width:auto !important;float:none !important;padding:18px 16px !important}

  /* внутренние страницы: меню каталога сверху, контент под ним */
  /* каталог на внутренних страницах: свёрнут, раскрывается кнопкой «Каталог» */
  .m-cat-btn{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 24px);margin:12px;min-height:48px;padding:0 16px;border:0;border-radius:10px;background:#d13c25;color:#fff;font:700 16px/1 Arial,sans-serif;cursor:pointer}
  .m-cat-btn span{transition:transform .2s}
  .m-cat-btn[aria-expanded="true"] span{transform:rotate(180deg)}
  #leftc{display:none !important;float:none !important;width:auto !important;margin:0 12px 12px !important;padding:4px 12px !important;box-sizing:border-box}
  #leftc.open{display:block !important}
  #leftc ul li{float:none !important;width:100% !important}
  #leftc ul li a{display:block;padding:6px 0}
  #leftc ul li img{max-width:44px !important;max-height:44px !important;margin-right:10px}
  #rightc{float:none !important;width:auto !important;margin:0 !important;padding:0 16px 32px !important;min-height:0 !important;box-sizing:border-box}
  #innerban{width:auto !important}
  #path_to h3{font-size:13px;line-height:1.4}

  /* список товаров и карточка товара */
  #category_block table{width:100% !important}
  #category_block td{display:block;width:100% !important}
  .product_brief a,#product_block div{float:none !important;padding:0 0 10px !important}
  .product_brief img,#product_block img{max-width:100% !important;height:auto !important}
  .category_img{max-width:100% !important}
  .sub_picturies_d{width:calc(50% - 8px) !important;box-sizing:border-box}
  #product_block table,.prop,#price_table{display:block;max-width:100%;overflow-x:auto}
  .quest_button .more_button{min-height:44px}

  /* контакты */
  #map_canvas{width:100% !important;height:280px !important}
  #contact_form input,#contact_form textarea{width:100% !important;box-sizing:border-box;font-size:16px}

  /* подвал */
  #footer{padding:16px 14px 24px !important}
  #footer div[style*="margin-right:-100px"]{float:none !important;margin:16px 0 0 !important}
  #footer .text1{width:auto !important}
  #istyle{float:none !important;margin-top:12px}

  /* нижняя панель «Позвонить» */
  .m-call{display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:9998;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:#1d2a35}
  .m-call a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;font-size:16px;color:#fff;text-decoration:none;background:#d13c25}
  .m-call a+a{background:rgba(255,255,255,.18)}
  #fdbk_tab{display:none}
}

@media screen and (max-width:340px){
  .cat-item{width:100% !important}
}