diff --git a/mandelstudio/static/mandelstudio/header_mobile.css b/mandelstudio/static/mandelstudio/header_mobile.css
new file mode 100644
index 0000000..c8d0c43
--- /dev/null
+++ b/mandelstudio/static/mandelstudio/header_mobile.css
@@ -0,0 +1,111 @@
+/* Scoped mobile header fixes for MandelBlog Studio.
+ Keep changes local to the Carbasa mega header to avoid desktop regressions. */
+
+@media (max-width: 991.98px) {
+ header.mega_header .header-inner .container {
+ flex-wrap: nowrap;
+ align-items: center;
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+ }
+
+ header.mega_header .header-inner .navbar-brand {
+ margin: 0;
+ padding: 0;
+ position: relative;
+ z-index: 30;
+ }
+
+ header.mega_header .header-inner .navbar-brand .logo.big_brand img,
+ header.mega_header .header-inner .navbar-brand .logo img {
+ max-height: 36px;
+ width: auto;
+ height: auto;
+ }
+
+ header.mega_header .header-inner .header-right {
+ padding-left: 0;
+ margin-left: auto;
+ gap: 0.5rem;
+ position: relative;
+ z-index: 30;
+ }
+
+ header.mega_header .header-inner .header-right .user-button {
+ margin-right: 0;
+ }
+
+ header.mega_header .header-inner .navbar-toggler {
+ position: static;
+ inset: auto;
+ width: 42px;
+ height: 42px;
+ margin: 0 0 0 0.5rem;
+ box-shadow: none;
+ background: #fff;
+ border: 1px solid rgba(15, 23, 42, 0.12);
+ z-index: 35;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent.show {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 100vh;
+ width: 100%;
+ overflow: auto;
+ background: #fff;
+ padding: 5.25rem 1.25rem 6rem;
+ z-index: 40;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent.show ~ .header-right {
+ opacity: 0;
+ visibility: hidden;
+ pointer-events: none;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent .brand-wrapper {
+ display: none;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent .navbar-nav {
+ width: 100%;
+ align-items: stretch;
+ gap: 0.25rem;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li {
+ width: 100%;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.nav-link,
+ header.mega_header .header-inner #navbarSupportedContent .navbar-nav > li > a.toggler.nav-link {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.85rem 0.25rem;
+ font-size: 1.1rem;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent .dropdown-menu {
+ position: static;
+ float: none;
+ width: 100%;
+ border: 0;
+ padding: 0.25rem 0 0.75rem;
+ margin: 0;
+ background: transparent;
+ }
+
+ header.mega_header .header-inner #navbarSupportedContent .dropdown-menu .nav-link {
+ justify-content: flex-start;
+ padding: 0.6rem 0.25rem;
+ font-size: 1rem;
+ opacity: 0.9;
+ }
+}
+
diff --git a/mandelstudio/static/mandelstudio/header_mobile.scss b/mandelstudio/static/mandelstudio/header_mobile.scss
deleted file mode 100644
index d4fea45..0000000
--- a/mandelstudio/static/mandelstudio/header_mobile.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-/* Scoped mobile header fixes for MandelBlog Studio.
- Keep changes local to the Carbasa mega header to avoid desktop regressions. */
-
-header.mega_header {
- @media (max-width: 991.98px) {
- .header-inner {
- .container {
- flex-wrap: nowrap;
- align-items: center;
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
- }
-
- .navbar-brand {
- margin: 0;
- padding: 0;
- position: relative;
- z-index: 30;
-
- .logo.big_brand img,
- .logo img {
- max-height: 36px;
- width: auto;
- height: auto;
- }
- }
-
- .header-right {
- padding-left: 0;
- margin-left: auto;
- gap: 0.5rem;
- position: relative;
- z-index: 30;
-
- .user-button {
- margin-right: 0;
- }
- }
-
- /* Move the mobile menu toggle into the header (not floating at the bottom). */
- .navbar-toggler {
- position: static;
- inset: auto;
- width: 42px;
- height: 42px;
- margin: 0 0 0 0.5rem;
- box-shadow: none;
- background: #fff;
- border: 1px solid rgba(15, 23, 42, 0.12);
- z-index: 35;
- }
-
- /* Fullscreen mobile menu that sits above header icons. */
- #navbarSupportedContent.show {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- height: 100vh;
- width: 100%;
- overflow: auto;
- background: #fff;
- padding: 5.25rem 1.25rem 6rem;
- z-index: 40;
- }
-
- /* Prevent header action icons overlapping the open menu. */
- #navbarSupportedContent.show ~ .header-right {
- opacity: 0;
- visibility: hidden;
- pointer-events: none;
- }
-
- /* Make mobile menu items look consistent and aligned. */
- #navbarSupportedContent {
- .brand-wrapper {
- display: none;
- }
-
- .navbar-nav {
- width: 100%;
- align-items: stretch;
- gap: 0.25rem;
- }
-
- .navbar-nav > li {
- width: 100%;
- }
-
- .navbar-nav > li > a.nav-link,
- .navbar-nav > li > a.toggler.nav-link {
- display: flex;
- width: 100%;
- align-items: center;
- justify-content: space-between;
- padding: 0.85rem 0.25rem;
- font-size: 1.1rem;
- }
-
- .dropdown-menu {
- position: static;
- float: none;
- width: 100%;
- border: 0;
- padding: 0.25rem 0 0.75rem;
- margin: 0;
- background: transparent;
- }
-
- .dropdown-menu .nav-link {
- justify-content: flex-start;
- padding: 0.6rem 0.25rem;
- font-size: 1rem;
- opacity: 0.9;
- }
- }
- }
- }
-}
-
diff --git a/mandelstudio/templates/layout.html b/mandelstudio/templates/layout.html
index a1842c4..f1087ab 100644
--- a/mandelstudio/templates/layout.html
+++ b/mandelstudio/templates/layout.html
@@ -15,8 +15,8 @@
{{ block.super }}
{# Ensure Carbasa webshop styling is present so responsive header/footer render correctly. #}
-{# Project-scoped header mobile fixes (no Bootstrap overrides). #}
-
+{# Project-scoped header mobile fixes (plain CSS to avoid SCSS compilation at runtime). #}
+
{% endblock %}
{% block extrahead %}