fix: mobile header polish + move language styles to scss

mandelstudio/static/mandelstudio/scss/header_overrides.scss

@@ -0,0 +1,146 @@
+/*
+Project-scoped header overrides for MandelStudio.
+
+Important:
+- Keep this file import-free so django-compressor's SCSS step stays stable on
+  staging (no dependency on Sass include paths).
+- Scope selectors tightly to header components used by Carbasa/Oxyan.
+*/
+
+header .language-dropdown .dropdown-toggle::after {
+  display: none;
+}
+
+header .language-dropdown .dropdown-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1px;
+  line-height: 1;
+  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+}
+
+header .language-dropdown .dropdown-toggle:hover,
+header .language-dropdown .dropdown-toggle:focus-visible {
+  transform: translateY(-1px);
+  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
+}
+
+header .language-dropdown .dropdown-toggle .language-icon,
+header .language-dropdown .dropdown-toggle .language-chevron {
+  display: block;
+}
+
+header .language-dropdown .dropdown-toggle .language-icon {
+  width: 18px;
+  height: 18px;
+}
+
+header .language-dropdown .dropdown-toggle .language-chevron {
+  width: 10px;
+  height: 10px;
+  opacity: 0.9;
+  transition: transform 120ms ease, opacity 120ms ease;
+}
+
+header .language-dropdown .dropdown-toggle.show .language-chevron {
+  transform: rotate(180deg);
+  opacity: 1;
+}
+
+header .language-dropdown .dropdown-menu {
+  min-width: 15rem;
+  padding: 0.5rem;
+  border-radius: 0.9rem;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
+}
+
+header .language-dropdown .dropdown-menu .dropdown-item {
+  border-radius: 0.65rem;
+  padding: 0.55rem 0.7rem;
+  font-weight: 600;
+  color: #0f172a;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+header .language-dropdown .dropdown-menu .dropdown-item:hover,
+header .language-dropdown .dropdown-menu .dropdown-item:focus-visible {
+  background: rgba(2, 132, 199, 0.1);
+  color: #0b5aa3;
+}
+
+header .language-dropdown .dropdown-menu svg {
+  width: 1.35rem;
+  height: auto;
+  border-radius: 0.2rem;
+  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06);
+  flex: 0 0 auto;
+}
+
+/* Mobile header polish (<= Bootstrap lg). */
+@media (max-width: 991.98px) {
+  header.mega_header .header-inner > .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  header.mega_header .header-inner .navbar-brand {
+    margin: 0;
+    padding: 0;
+    z-index: 2;
+  }
+
+  header.mega_header .header-inner .navbar-brand img {
+    max-height: 34px;
+    width: auto;
+    height: auto;
+  }
+
+  header.mega_header .header-inner .header-right {
+    margin-left: auto;
+    padding-left: 0;
+    gap: 0.45rem;
+    z-index: 2;
+  }
+
+  header.mega_header .header-inner .header-right .menu-circle {
+    width: 38px;
+    height: 38px;
+  }
+
+  /* Prevent the basket trigger from floating above the opened mobile menu. */
+  header.mega_header .header-inner .header-right .basket-dropdown {
+    z-index: 5;
+  }
+
+  header.mega_header .header-inner .page-menu-bar {
+    z-index: 50;
+  }
+
+  /* Replace Carbasa's floating FAB toggler with an in-header control. */
+  header.mega_header .header-inner .navbar-toggler {
+    position: static;
+    bottom: auto;
+    right: auto;
+    width: 38px;
+    height: 38px;
+    margin: 0;
+    box-shadow: none;
+    z-index: 60;
+  }
+
+  /* Align megamenu toggler with other menu items. */
+  header.mega_header .page-menu-bar .navbar-nav > .megamenu > .toggler {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+

mandelstudio/templates/layout.html

@@ -15,6 +15,8 @@
 {{ block.super }}
 {# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
 <link rel="stylesheet" type="text/x-scss" href="{% static 'carbasa/webshop_base.scss' %}">
+{# Project-scoped header tweaks (kept import-free for compressor safety). #}
+<link rel="stylesheet" type="text/x-scss" href="{% static 'mandelstudio/scss/header_overrides.scss' %}">
 {% endblock %}
 
 {% block extrahead %}
@@ -25,69 +27,6 @@
 <link rel="preconnect" href="https://www.google-analytics.com/">
 {% endif %}
 {{ block.super }}
-<style>
-  header .language-dropdown .dropdown-toggle::after { display: none; }
-  header .language-dropdown .dropdown-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1px;
-    color: #fff;
-    line-height: 1;
-    transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
-  }
-  header .language-dropdown .dropdown-toggle:hover,
-  header .language-dropdown .dropdown-toggle:focus-visible {
-    transform: translateY(-1px);
-    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
-  }
-  header .language-dropdown .dropdown-toggle .language-icon,
-  header .language-dropdown .dropdown-toggle .language-chevron {
-    display: block;
-  }
-  header .language-dropdown .dropdown-toggle .language-icon {
-    width: 18px;
-    height: 18px;
-  }
-  header .language-dropdown .dropdown-toggle .language-chevron {
-    width: 10px;
-    height: 10px;
-    opacity: .9;
-    transition: transform 120ms ease, opacity 120ms ease;
-  }
-  header .language-dropdown .dropdown-toggle.show .language-chevron {
-    transform: rotate(180deg);
-    opacity: 1;
-  }
-
-  header .language-dropdown .dropdown-menu {
-    min-width: 15rem;
-    padding: .5rem;
-    border-radius: 0.9rem;
-    border: 1px solid rgba(15, 23, 42, .08);
-    box-shadow: 0 16px 44px rgba(15, 23, 42, .18);
-  }
-  header .language-dropdown .dropdown-menu .dropdown-item {
-    border-radius: .65rem;
-    padding: .55rem .7rem;
-    font-weight: 600;
-    color: #0f172a;
-    transition: background-color 120ms ease, color 120ms ease;
-  }
-  header .language-dropdown .dropdown-menu .dropdown-item:hover,
-  header .language-dropdown .dropdown-menu .dropdown-item:focus-visible {
-    background: rgba(2, 132, 199, .10);
-    color: #0b5aa3;
-  }
-  header .language-dropdown .dropdown-menu svg {
-    width: 1.35rem;
-    height: auto;
-    border-radius: .2rem;
-    box-shadow: 0 1px 0 rgba(15, 23, 42, .06);
-    flex: 0 0 auto;
-  }
-</style>
 {% if cookie_jar.needs_approval %}
 <link rel="stylesheet" type="text/css" href="{% static 'cookie_jar/css/cookie_jar.css' %}">
 {% endif %}