/* ===============================
   MOBILE VERSION (до 900px)
   Не трогаем style.css
   =============================== */

@media only screen and (max-width: 900px) {

    /* 1) Жесткий анти-горизонтальный скрол */
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Убираем жесткую ширину */
    #layout {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Часто таблицы/дивы распирают экран */
    #wrapper, #layout, #header, #content, #footer,
    .b-main-block, .b-maincontent, .page,
    .left-cols, .center-cols, .col1, .col2 {
        max-width: 100%;
        box-sizing: border-box;
    }
	
	
	
	
	
	.page {
        margin-top: 100px !important;
 
    }




    body {
        margin: 0;
        padding: 0;
    }

    /* ================= HEADER ================= */

    #header {
        height: auto !important;
        padding: 15px 10px;
        text-align: center;
        box-sizing: border-box;
    }

    /* Убираем абсолюты */
    .b-logo,
    .b-slogan,
    .b-menu {
        
        width: 100% !important;
        text-align: center;
		margin-top: 50px;
        margin-bottom: 0px;
        box-sizing: border-box;
    }
	
	
	 .b-logo {
        
	 
	 margin-top: 0px;
 }
 
 
 
    /* Убираем декоративные слои */
    .i-header-1,
    .i-header-2,
    .i-header-3 {
        display: none !important;
    }
	
	
	



/* Скрываем лого и описание на мобилке */
/*.b-logo,*/
/*.b-desc,*/
.b-el-left,
.b-el-right
 {
    display: none !important;
}

.b-desc {
	
	position: static !important;
top: 75px !important;
	
}


.b-logo {
    position: static !important;

}


.b-phones {
	
	
	margin-left: 0px !important;
   
}
	
	


    /* ================= MENU ================= */

    .b-menu ul {
        display: grid;
        /* grid-template-columns: 1fr 1fr;*/
        gap: 0px;
        padding: 0;
        margin: 10px 10px 10px 0;
    }

    .b-menu li { list-style: none; }

    .b-menu a {
        display: block;
        padding: 0px;
        background: #347BB6;
        border-radius: 6px;
        box-sizing: border-box;
    }

    @media (max-width: 500px) {
        .b-menu ul { grid-template-columns: 1fr; }
		

    }

    /* ================= TABLE LAYOUT → STACK ================= */

    .tbl,
    .tbl tbody,
    .tbl tr,
    .tbl td {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .tbl td { padding: 10px 0 !important; }

    /* ================= SIDEBAR ================= */

    #left { margin-bottom: 20px; }

    /* ================= CONTENT ================= */

    #content { padding: 0 10px; }

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

    /* ================= Быстрая навигация (top-tab) =================
       Именно тут часто распирает экран из-за таблицы */
    .top-tab {
        margin: 10px 10px 14px 10px !important;
        padding: 10px !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow-x: auto;               /* если таблица всё равно широкая — будет прокрутка внутри блока, а не у страницы */
        -webkit-overflow-scrolling: touch;
    }

    .top-tab table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        border-collapse: collapse;
        box-sizing: border-box;
    }

    .top-tab td {
        width: 100% !important;
        box-sizing: border-box;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .top-tab a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ================= CARDS (товары) =================
       В page.htm товары сделаны таблицами внутри .anons */
    .anons {
        width: 100% !important;
        float: none !important;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    /* Превращаем таблицу карточек в flex-контейнер */
    .anons table,
    .anons tbody {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .anons tr {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;              /* расстояние между карточками */
        width: 100%;
        box-sizing: border-box;
		margin-left: 10px !important;
    }

    /* Каждая карточка — 2 в ряд */
    .anons td.left {
        display: block;
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
        box-sizing: border-box;
    }

    /* Внутренности карточки не должны распирать */
    .anons td.left .cell,
    .anons td.left .bottom,
    .anons td.left .center {
        
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Старые/узкие мобилки — 1 карточка в ряд */
    @media (max-width: 480px) {
        .anons td.left {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }

    /* ================= FOOTER ================= */

    #footer {
        height: auto !important;
        padding: 20px 10px;
        text-align: center;
        box-sizing: border-box;
    }

    .b-footer-left,
    .b-footer-right {
        position: static !important;
        width: 100% !important;
        margin-bottom: 10px;
    }
	
	/* ===== Footer в столбик на мобилке ===== */
#footer {
  height: auto !important;          /* у тебя на ПК фикс 120px */
  margin-top: 0 !important;
  padding: 20px 10px !important;
}

#footer .f-col1,
#footer .f-col2,
#footer .f-col3 {
  position: static !important;      /* убираем absolute из style.css */
  left: auto !important;
  right: auto !important;
  top: auto !important;

  width: 100% !important;
  margin: 10px 0 !important;
  text-align: center;
}
	
	
	/* =====================================================
   ПЕРЕСТАНОВКА КОЛОНОК (центр выше сайдбара)
   Требуется: в page.htm добавить классы td-left и td-center
   ===================================================== */

.tbl > tbody > tr {
    display: flex !important;
    flex-direction: column !important;
}

.tbl > tbody > tr > td.td-center {
    order: 1 !important;
}

.tbl > tbody > tr > td.td-left {
    order: 2 !important;
}

.tbl > tbody > tr > td {
    width: 100% !important;
}


/* =====================================================
   КАРТОЧКИ ТОВАРОВ
   2 в ряд, на узких 1 в ряд
   ===================================================== */

.anons table {
    width: 100% !important;
}

.anons tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px;

}

.anons td.left {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 24px) !important;
    box-sizing: border-box;
    
	margin-left: 20px;
}

/* внутренности карточки не должны распирать */
.anons td.left .cell,
.anons td.left .bottom,
.anons td.left .center {
    
    box-sizing: border-box;
}

/* Старые мобилки */
@media (max-width: 480px) {
    .anons td.left {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* =========================================
   Мобилка: page-area ниже сайдбара
   Требует: row-cols, row-pagearea, td-pagearea
   ========================================= */

/* Делаем tbody flex-колонкой: можно упорядочить строки */
.tbl > tbody {
    display: flex !important;
    flex-direction: column !important;
}

/* Строка с колонками: внутри неё тоже колонка */
.tbl > tbody > tr.row-cols {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Порядок внутри строки колонок */
.tbl > tbody > tr.row-cols > td.td-center { order: 1 !important; }
.tbl > tbody > tr.row-cols > td.td-left   { order: 2 !important; }

/* Строка с page-area — всегда последняя */
.tbl > tbody > tr.row-pagearea {
    order: 3 !important;
}

/* Ширина и коробка */
.tbl > tbody > tr.row-pagearea > td.td-pagearea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}


.page-area {
    margin: 10px 15px 10px 22px !important;
   
}


.conten {
    margin: 10px 20px 10px 20px !important;
}
	
	
.left

 {
    margin: 0px !important;
}



/* ================= BURGER MENU (mobile) ================= */

/* контейнер меню */
.b-menu {

  width: 100% !important;
  height: auto !important;
  margin: 10px 0 0 0;
  padding: 0 10px 10px 10px;
  background: none !important;
  text-align: left;
}





/* чекбокс прячем */
.mnav-toggle {
  position: absolute;
  left: -9999px;
}




.mnav-btn span { top: 18px; }
.mnav-btn span::before { top: -9px; }
.mnav-btn span::after  { top:  9px; }






/* пункты меню */
.menu li {
  display: block !important;
  border: 0 !important;
  white-space: normal !important;
  margin: 6px 0;
}

.menu a {
  display: block;

  border-radius: 10px;
  background: #347BB6;
  line-height: 1.2;
  color: #fff !important;
}



.menu li a
{


	font-weight: normal !important;
}



.b-menu {
height: 43px !important;
    background: url(images/menu.png) repeat scroll 0% 0% transparent !important;

	}
	
	


.menu {
	
	margin-top: 50px !important;
	
	
}


.png {
	
	margin-top: 48px !important;
	
	
}



.anons td.left{
	margin-left: 15px !important;

}



}