/* ===============================
   MOBILE.CSS for template #2
   =============================== */

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

  /* --- базовая защита --- */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  * { box-sizing: border-box; }
  img { max-width: 100%; height: auto;  margin: 0 auto !important;}

  /* --- основной контейнер (было 1000px) --- */
  #super{
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
 
  }

  /* “спейсеры” на мобиле обычно только мешают */
  .spacer68{
    width: 100% !important;
    height: 0 !important;
  }

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

  #header{
    height: auto !important;
    position: relative !important;
    padding: 10px 10px 0 10px;
  }

  /* логотип/слоган — в поток */
  #slogan{
    position: static !important;
    text-align: center !important;
    top: auto !important;
    left: auto !important;
    margin: 15px 0 0 0 !important;
  }



  #slogan img{
	 /* border: 2px solid rgb(255, 255, 255) !important;*/
    padding-top: 15px!important;
  }
  
  
  
  /* верхняя плашка справа (у тебя absolute + margin-left 700) — в поток */
  .topbar{
    position: static !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 8px 10px !important;
    border: none !important;
  }

  /* верхнее меню (у тебя absolute top:100px) — в поток */
  #top_menu_bgr{
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    background: rgb(196, 61, 106) !important;
    padding: 8px 10px !important;
    margin: 0 0 10px 0 !important;
  }

  /* ссылки меню в 2 колонки -> 1 */
  #top_menu_bgr p{
    margin: 0 !important;
    padding: 0 !important;
  }

  #top_menu_bgr p{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  @media (max-width: 500px){
    #top_menu_bgr p{ grid-template-columns: 1fr; }
  }

  #top_menu_bgr a{
    display: block !important;
    margin: 0 !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.12);
    border-radius: 8px;
    text-align: center;
    text-decoration: none !important;
  }

  /* ================= BANNER ================= */

  #banner img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* ================= MAIN LAYOUT ================= */

  #main{
    margin: 10px 0 0 0 !important;
    padding: 0 10px !important;
  }

  /* убираем флоаты, складываем блоки */
  #column_3,
  #column_1,
  #column4
  {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* У тебя #column_3 было с отрицательным margin и cont с большими отступами */
  #column_3,
   #column4
  {
    margin: 0 !important;
  }
  #column_3 #cont{
    margin: 0 !important;
  }

 #column4 #cont4{
    margin: 0 !important;
  }
  
  
  /* контентная часть */
  .blog_post_body{
    width: auto !important;
    margin: 15px 0 0 0 !important;
    padding-bottom: 10px !important;
  }

  .blog_post_body img{
    float: none !important;
    margin: 0 0 10px 0 !important;
  }

  /* текстовые блоки */
  .conten{
    margin: 10px 0 !important;
  }

 /* ================= CATALOG ================= */

  .catalog {
    padding: 0 !important;
  }

  .catalog table {
    width: 100% !important;
    border-collapse: collapse;
  }

  .catalog td {
    width: 50% !important;
    padding: 6px !important;
    vertical-align: top;
  }

  .catalog img {
    width: 100% !important;   /* было 340px */
    margin: 0 !important;
  }

  @media (max-width: 500px) {
    .catalog td {
      width: 100% !important;
      display: block !important;
    }
  }
  
  
  
  /* карточки .box: 2 в ряд -> 1 */
  .box{
    float: left !important;
    width: calc(50% - 10px) !important;
    height: auto !important;
    margin: 0 10px 10px 0 !important;
    padding: 12px !important;
  }

  /* внутренности карточки */
  .box span .img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
    text-align: center;
  }
  .box span.img img{
    max-width: 100% !important;
    max-height: none !important;
  }

  /* блок цены/кнопки — у тебя absolute + line-height:0, на мобиле ломает */
  .box p{
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 10px 0 0 0 !important;
    line-height: 1.2 !important;
  }

  @media (max-width: 480px){
    .box{
      width: 100% !important;
      margin-right: 0 !important;
    }
  }

  /* сайдбар: чтобы не “прилипал” */
  #column_1{
    margin-top: 15px !important;
  }

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

  #footer{
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;            /* убираем -68px */
    padding: 15px 10px !important;
    background: rgb(12, 15, 17) !important;
  }

  .footer_menu{
    margin: 0 0 10px 0 !important;
    padding-top: 0 !important;
  }

  .footer_menu ul{
    margin: 0 !important;
    padding: 0 !important;
  }

  .footer_menu li.leaf{
    float: none !important;
    display: block !important;
    margin: 6px 0 !important;
  }

  #footer span{
    float: none !important;
    display: block !important;
    padding: 6px 0 0 0 !important;
    margin: 0 !important;
  }

  /* “очистки” */
  br[clear]{
    display: none;
  }
  
  
  
    
  .blog_post_body4 { width: 100%; position: relative; margin: 43px 0px 0px 0px; padding-bottom: 20px; }
.blog_post_body4 img { position: relative; float: left; margin: 5px 20px 15px 0px; }
.blog_post_body4 p { color: rgb(1, 1, 1); font-size: 12px; margin: 0px 0px 10px; line-height: 18px; }



.blog_post_body4 { width: 100% !important;}


#column4 {
    margin: 0px 8px 0px 8px!important;
  }
  
  #cont4 {
    margin: 0px 5px 0px 5px!important;
  }
  
  
  .page {
   
	margin: 0px !important;
  }
  
  
  .post4 {
    margin: 0px 15px 0px 0px!important;
  }
  
}