@media screen and (max-width: 768px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  .colorfont { color: #fff !important; }
  #mobileheading { color: #fff !important; }

  .mapiframemobile {
    display: none !important;
    margin-bottom: 20px;
  }

  /* If you truly need a fixed ratio, use aspect-ratio instead of fixed px heights */
  .homepageimg_mobileversion {
    width: 100% !important;
    aspect-ratio: 34 / 25;        /* matches your 34rem x 25rem intent */
    height: auto !important;
    margin-bottom: 20px;
    object-fit: cover;
  }

  #container {
    display: flex;
    flex-direction: column;
  }

  #contactinfo { order: 99; } /* push near bottom */

  /* NAV */
  ul#mainnav {
    all: unset;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    background-color: #408b0e;
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 1000;
  }

  ul#mainnav li {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ul#mainnav li a {
    display: block !important;
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    background-color: #408b0e !important;
    color: #fff !important;
    text-align: center;
    box-sizing: border-box;
    border-bottom: 1px solid #193606;
  }

  ul#mainnav li a.active,
  ul#mainnav li a:hover,
  ul#mainnav li a:active {
    background-color: #193606 !important;
    color: #46e00a !important;
  }

  /* Header / spacing */
  div#header {
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    padding-bottom: 1rem;
  }

  .emailmobile { padding: 1rem !important; }
  .facebookmobile { padding: 1rem !important; }

  .logo {
    float: none !important;
    display: block;
    margin: 1rem auto !important;
  }

  /* Layout containers */
  div#container,
  div#header,
  div#content,
  div#cta,
  div#sidebar,
  div#footer {
    width: 100% !important;
    float: none !important;
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0 auto;
  }

  div#cta {
    background-size: contain;
    height: auto;
  }

  div#sidebar {
    padding: 0rem;
    background-color: #51b04f;
    max-height: 20rem;
  }

  div#content {
    background-position: top;
    background-size: contain;
  }

  /* Prevent overlap below header */
  div#cta, div#content {
    clear: both;
    margin-top: 1rem;
  }

  /* Image gallery hardening for mobile */
  .gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 0 auto;
  }

  .image-box {
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
    aspect-ratio: 4 / 3;      /* reserve space to prevent jumps */
    overflow: hidden;
  }

  .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* uniform tiles */
    display: block;
  }

  .caption { font-size: 0.85rem; }

  address,
  .txtaddress {
    font-size: 1rem;
    text-align: center;
    margin: 0rem auto;
    color: #fff;
  }

  #emailinfo {
    position: static;
    font-size: 0.6rem;
    margin-top: 0.5rem;
  }

  h1, h2, h3, h4 {
    margin: 1rem auto;
    text-align: center;
  }

  p { margin: 0.5rem 1rem; }

  /* Hide certain images on mobile if needed */
  .mobileimgnone { display: none; }

  /* Mobile content background */
  #content {
    background: url(images/mobile-content.jpg) no-repeat 0px 245px !important;
  }

  /* FOOTER – avoid fixed wide width on small screens */
  div#footer {
    font-size: 0.625rem;
    width: 100% !important;   /* ← corrected from fixed 58.125rem */
    margin: 0 auto;
    text-align: center;
    clear: both;
    padding: 0px 30px 20px;
    color: #393633;
  }

  div#footer a { font-weight: bold; }
  div#footer a:link,
  div#footer a:visited {
    text-decoration: underline;
    color: #302e2b;
  }
  div#footer a:hover,
  div#footer a:active {
    text-decoration: none;
    color: #302e2b;
  }
}

/* =========================================================
   DESKTOP (≥769px)  — formerly nested incorrectly
   ========================================================= */
@media (min-width: 769px) {
  .field_group--desktop {
    float: right;
    display: block;
    margin: 0 0 1rem 1rem;
    max-width: 250px;
  }
  .field_group--mobile { display: none; }
}

/* =========================================================
   WIDE DESKTOP (≥1200px) — formerly nested incorrectly
   ========================================================= */
@media (min-width: 1200px) {
  .family_group {
    max-width: 690px; /* matches your old width */
  }
}

/* =========================================================
   PRODUCT PAGE TABLE & GALLERY TWEAKS (≤37rem ≈ 600px)
   ========================================================= */
@media screen and (max-width: 37rem) {
  /* Table responsiveness */
  table {
    font-size: 0.5rem;
    width: 50% !important;   /* if intentional; otherwise consider 100% */
  }

  th, td {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
  }

  th:first-child,
  td:first-child {
    width: 8rem;
    max-width: 8rem;
  }

  .responsive-table table { min-width: unset; }

  .tablecenter { width: 85% !important; }

  /* Image gallery tweaks */
  .image-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .gallery-item { margin-bottom: 1rem; }

  .txtaddress {
    font-size: 0.8125rem; /* 13px */
    padding: 0 0.625rem;  /* 10px */
  }
}