Fix mobile SaaS hero stats stacking on webshop package page

mandelstudio/static/mandelstudio/scss/layout_overrides.scss

@@ -227,49 +227,114 @@ body.cookie-consent-open {
 
 @media (max-width: 991.98px) {
   header .header-inner > .container {
-    display: flex;
+    display: flex !important;
-    flex-wrap: nowrap;
+    flex-wrap: nowrap !important;
-    align-items: center;
+    align-items: center !important;
-    column-gap: 0.375rem;
+    justify-content: space-between !important;
+    width: 100%;
+    max-width: 100%;
+    gap: 0.5rem;
     padding-top: 0.625rem;
     padding-bottom: 0.625rem;
+    padding-left: max(10px, env(safe-area-inset-left, 0px));
+    padding-right: max(10px, env(safe-area-inset-right, 0px));
+  }
+
+  header .header-inner > .container > .search-wrapper,
+  header .header-inner > .container > .alert-messages-header {
+    display: none !important;
   }
 
   header .header-inner > .container > .navbar-brand {
-    order: 1;
+    order: 1 !important;
-    margin: 0;
+    display: flex !important;
-    flex: 0 1 auto;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    flex: 1 1 auto !important;
+    min-width: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  header .header-inner > .container > .navbar-brand .logo.big_brand {
+    display: block;
+    margin: 0 !important;
+    max-width: none;
+  }
+
+  header .header-inner > .container > .navbar-brand picture {
+    display: block;
   }
 
   header .header-inner > .container > .navbar-brand img {
-    width: auto;
+    display: block;
-    height: auto;
+    width: auto !important;
-    max-height: 74px;
+    height: auto !important;
-    max-width: 190px;
+    max-width: min(34vw, 128px) !important;
+    max-height: 56px !important;
+    margin: 0 !important;
+    transform: none !important;
   }
 
   header .header-inner > .container > .header-right {
+    order: 2 !important;
+    margin: 0 0 0 auto !important;
+    padding: 0 !important;
+    display: flex !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+    gap: 0.35rem;
+    flex: 0 0 auto !important;
+  }
+
+  header .header-right > .language-dropdown {
+    order: 4;
+  }
+
+  header .header-right > a[data-bs-target="#siteSearchModal"],
+  header .header-right > a.search-toggler {
+    order: 1;
+  }
+
+  header .header-right > a.user-button.menu-circle:not(.search-toggler):not([data-bs-target="#siteSearchModal"]) {
     order: 2;
-    margin-left: auto;
+  }
-    flex: 0 0 auto;
+
-    gap: 0.375rem;
+  header .header-right > .basket-dropdown {
+    order: 3;
+  }
+
+  header .header-right .user-button,
+  header .header-right .dropdown-toggle {
+    margin: 0 !important;
   }
 
   header .header-right .language-dropdown,
   header .header-right .basket-dropdown,
   header .header-right > a.user-button.menu-circle,
   header .header-right .menu-circle {
-    width: 36px;
+    width: 34px;
-    height: 36px;
+    height: 34px;
-    min-width: 36px;
+    min-width: 34px;
-    min-height: 36px;
+    min-height: 34px;
-    flex-basis: 36px;
+    flex: 0 0 34px;
+  }
+
+  header .header-right,
+  header .header-right .basket-dropdown,
+  header .header-right .menu-circle {
+    position: relative;
+    z-index: 100;
   }
 
   header .header-inner > .container > .navbar-toggler {
     order: 3;
-    margin-left: 0.125rem;
     flex: 0 0 auto;
+    margin: 0 !important;
+    position: fixed;
+    right: max(12px, env(safe-area-inset-right, 0px));
+    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   }
 
   header .header-inner > .container > .navbar-collapse {
@@ -336,16 +401,6 @@ body.cookie-consent-open {
     border-bottom: 1px solid rgba(15, 23, 42, 0.08);
   }
 
-
-  header .header-right,
-  header .header-right .basket-dropdown,
-  header .header-right .menu-circle {
-    position: relative;
-    z-index: 100;
-  }
-}
-
-@media (max-width: 991.98px) {
   body.mobile-menu-open {
     header .header-inner > .container > .navbar-brand {
       opacity: 0;
@@ -364,7 +419,30 @@ body.cookie-consent-open {
       opacity: 0 !important;
       pointer-events: none !important;
     }
+  }
+}
 
+@media (max-width: 374.98px) {
+  header .header-inner > .container {
+    gap: 0.25rem;
+    padding-left: max(8px, env(safe-area-inset-left, 0px));
+    padding-right: max(8px, env(safe-area-inset-right, 0px));
+  }
+
+  header .header-inner > .container > .navbar-brand img {
+    max-width: 108px !important;
+    max-height: 48px !important;
+  }
+
+  header .header-right .language-dropdown,
+  header .header-right .basket-dropdown,
+  header .header-right > a.user-button.menu-circle,
+  header .header-right .menu-circle {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    flex: 0 0 32px;
   }
 }
 
@@ -412,3 +490,27 @@ body.cookie-consent-open {
     }
   }
 }
+
+@media (max-width: 767.98px) {
+  .te-modern-saas .te-block--saas-hero-banner .saas-hero.saas-hero--split {
+    .saas-hero__stats {
+      width: 100%;
+      max-width: 100%;
+      gap: 0.625rem;
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .saas-hero__stat {
+      width: 100%;
+      min-width: 0;
+      padding: 0.75rem 0.875rem;
+    }
+
+    .saas-hero__stat-value,
+    .saas-hero__stat-label {
+      white-space: normal;
+      overflow-wrap: break-word;
+      word-break: normal;
+    }
+  }
+}