@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, #wrapper, .container, #content-top, #content, .post, .item, .mobile-cards-block, .content-post, .mobile-sidebar-block, #footer { background: #ffffff !important; }
#wrapper { padding: 10px !important; }
.container, .box, .box_center, .box_right, #content, .mobile-sidebar-block, #footer, #headerwrap, #header {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; float: none !important; margin-right: 0 !important;
}
.container { padding: 0 !important; }
#headerwrap { height: auto !important; background: #ffffff !important; }
#header { height: auto !important; padding: 12px 10px 10px !important; background: none !important; }
#call { float: none !important; margin: 0 0 10px 0 !important; text-align: center !important; }
#call p, .lozung p { margin-left: 0 !important; margin-right: 0 !important; text-align: center !important; }
.logo { display: block !important; margin: 0 auto 10px auto !important; max-width: 100%; height: auto; }
#header h2 { text-align: center !important; padding-left: 0 !important; margin: 0 0 12px 0 !important; color: #625da8 !important; }
#menu { height: auto !important; margin: 10px 0 0 0 !important; }
#menu ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 0 !important; padding: 0 !important; }
#menu li { display: block !important; margin: 0 !important; padding: 0 !important; background: none !important; }
#menu a {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 50px !important; padding: 10px 12px !important; text-align: center !important;
  text-decoration: none !important; color: #ffffff !important; font-weight: bold !important;
  font-family: tahoma !important; font-size: 13px !important; line-height: 1.2 !important;
  border-radius: 12px !important; border: 1px solid #8b85de !important;
  background: linear-gradient(180deg, #938de8 0%, #625da8 100%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
}
#menu a:hover, #menu .current_page_item a { color: #ffffff !important; background: linear-gradient(180deg, #a7a1f0 0%, #746ec0 100%) !important; }
#content-top { margin-top: 10px !important; border-top: 0 !important; background: #ffffff !important; }
#content { margin: 10px 0 !important; background: #ffffff !important; }
.post { margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 0 !important; }
.mobile-cards-block, .mobile-sidebar-anchor, .content-post { width: 100% !important; }
.mobile-sidebar-anchor { display: block; margin: 0 0 12px 0; }
.mobile-sidebar-anchor > .mobile-sidebar-block { display: block !important; width: 100% !important; float: none !important; margin: 0 !important; }
.catalog { margin: 10px 0 12px 0 !important; padding: 0 !important; }
.catalog table, .catalog tbody { display: block !important; width: 100% !important; }
.catalog tr { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; margin-bottom: 10px !important; }
.catalog td { display: block !important; width: 100% !important; }
.catalog img { width: 100% !important; max-width: none !important; }
.content-post { margin: 0 0 12px 0 !important; padding: 12px !important; }
.content-post h2 { margin: 0 0 14px 0 !important; }
.comments, .relates { margin: 10px 0 !important; padding-left: 0 !important; }
.comment, .article, .relate { margin: 10px 0 16px 0 !important; }
.sidebar .h2 { margin-top: 0 !important; }
.sidebar img, #banner img { max-width: 225px !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; display: block !important; }
#footer { padding: 12px !important; background: #ffffff !important; border-top: 0 !important; }
#footer ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 12px !important; }
#footer ul li { display: block !important; border-right: 0 !important; padding: 0 !important; margin: 0 !important; }
#footer ul li a {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 46px !important; padding: 10px 12px !important;
  background: linear-gradient(180deg, #f0effa 0%, #dfdcf5 100%) !important;
  border: 1px solid #d9d3f0 !important; border-radius: 12px !important;
  text-decoration: none !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}
}
@media only screen and (max-width: 560px) {
.catalog tr, #menu ul, #footer ul { grid-template-columns: 1fr !important; }
#header h2 { font-size: 13px !important; line-height: 1.4 !important; }
h1 { font-size: 22px !important; }
.content-post h2 { font-size: 18px !important; }
}

/* requested mobile refinements */
@media only screen and (max-width: 900px) {
  .lozung,
  .lozung p {
    display: none !important;
  }

  #menu ul {
    grid-template-columns: 1fr 1fr !important;
  }

  #menu a {
    font-size: 15px !important;
    padding: 12px 12px !important;
  }

  #wrapper {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-right: 20px !important;
  }

  .container,
  .box,
  .box_center,
  .box_right,
  #content,
  .post,
  .item,
  .mobile-cards-block,
  .mobile-sidebar-anchor,
  .content-post,
  .sidebar,
  #footer,
  #headerwrap,
  #header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .content-post,
  .comment,
  .article,
  .relate,
  .sidebar ul,
  .sidebar ul li,
  .sidebar ul ul,
  #footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .catalog,
  .comments,
  .relates {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media only screen and (max-width: 560px) {
  #menu ul {
    grid-template-columns: 1fr 1fr !important;
  }

  #menu a {
    font-size: 14px !important;
    min-height: 48px !important;
  }
}

/* force top menu to 2x2 on mobile */
@media only screen and (max-width: 900px) {
  #menu {
    height: auto !important;
    margin: 30px 0 0 0 !important;
  }

  #menu ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #menu ul noindex {
    display: contents !important;
  }

  #menu li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    list-style: none !important;
  }

  #menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 10px 12px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #8b85de !important;
   background: linear-gradient(181deg, #0800eeb5 0%, #9e9bce 100%) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10) !important;
  }
}

@media only screen and (max-width: 560px) {
  #menu ul {
    grid-template-columns: 1fr 1fr !important;
  }

  #menu li a {
    min-height: 48px !important;
    font-size: 14px !important;
  }
}
 