@media only screen and (max-width: 900px) {
  * { box-sizing: border-box; }
  html, body { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
  body { background: #fff !important; }
  img { max-width: 100%; height: auto; }

  #wrapper, #top_background, #top_background #inner, #top, #main, #content, #left, #footer {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  }

  #top_background { height: auto !important; margin-bottom: 16px !important; overflow: visible !important; }
  #top_background #inner { height: auto !important; background-position: center top !important; }
  #top { padding: 0 10px !important; }
  #header { height: auto !important; padding: 12px 0 !important; }

  #logo, #contact, #logo_footer, #contact_footer {
    float: none !important; width: 100% !important; height: auto !important;
    margin: 12px 0 9px 0 !important; text-align: center !important;
  }

  #logo { padding: 0 !important; }
  #logo img, #logo_footer img { margin: 0 auto !important; }
  #contact, #contact_footer { font-size: 24px !important; text-shadow: none !important; }
  #contact #slogan, #contact_footer #slogan { width: 100% !important; font-size: 16px !important; }

  #menu, #menu2 { height: auto !important; }
  #menu ul, #menu2 ul { float: none !important; width: 100% !important; text-align: left !important; }
  #menu ul li, #menu2 ul li { float: none !important; display: block !important; width: 100% !important; height: auto !important; background: none !important; }
  #menu ul li a, #menu2 ul li a {
    float: none !important; display: block !important; height: auto !important; margin: 0 0 8px 0 !important;
    padding: 12px 10px !important; border-radius: 8px; text-align: center;
  }
  #menu ul li a { background: #14b414 !important; color: #fff !important; }
  #menu2 ul li a { background: #dfe8cf !important; color: #222 !important; }

  #main { padding: 10px !important; overflow: visible !important; }
  #content, #left { float: none !important; width: 100% !important; margin: 0 !important; }
  .navigation, .navigation2 { margin-bottom: 12px !important; padding-bottom: 0 !important; }

  .mobile-sidebar-anchor { display: block; width: 100%; margin: 0 0 12px 0; }
  .mobile-sidebar-anchor > #left.mobile-sidebar-block {
    display: block !important; float: none !important; width: 100% !important; margin: 0 !important; overflow: visible !important;
  }

  h1 { margin: 0 0 14px 0 !important; line-height: 1.25 !important; }
  h2, h3 { margin: 18px 0 14px 0 !important; line-height: 1.3 !important; }

  #catalog { margin: 0 0 12px 0 !important; }
  #catalog table, #catalog tbody { display: block; width: 100%; }
  #catalog tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-bottom: 10px; }
  #catalog td { display: block; width: 100% !important; }
  #catalog img { width: 100% !important; max-width: none !important; }

  .content-post, .block, .related, #catalog_menu {
    width: 100% !important; margin: 0 0 12px 0 !important;
  }
  .content-post { padding: 12px !important; }
  .block { width: 100% !important; }
  .related { padding: 8px !important; }
  #catalog_menu img, .block_img, .block_img img, .info-baner {
    width: 100% !important; max-width: 235px; display: block !important; margin-left: auto !important; margin-right: auto !important;
  }

  #footer { padding: 16px 10px 20px !important; }
  .title { margin: 0 10px 10px 10px !important; }
}

@media only screen and (max-width: 560px) {
  #catalog tr { grid-template-columns: 1fr; }
  #contact, #contact_footer { font-size: 22px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
}

/* menu grid 2x2 + safer spacing under logo on mobile */
@media only screen and (max-width: 900px) {
  #header {
    padding-bottom: 8px !important;
  }

  #menu {
    margin-top: 8px !important;
  }

  #menu ul,
  #menu2 ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #menu ul li,
  #menu2 ul li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #menu ul li a,
  #menu2 ul li a {
    margin: 0 !important;
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    padding: 10px 8px !important;
  }
}

@media only screen and (max-width: 560px) {
  #menu ul li a,
  #menu2 ul li a {
    min-height: 48px !important;
    font-size: 20px !important;
  }
}