Mobile language flags, menu styles & JS tweaks

Hide the desktop .language-flags on small screens and add a .language-flags-mobile block inside the menu with adjusted spacing and font sizes. Comment out the menu max-height to allow the menu to expand/scroll naturally. Rebuild/minified CSS (luxuryCar.css + map) updated and small supporting changes made in header.js and productPage.js to align behavior with the new mobile menu/language handling.

Author: SharkJohny

assets/css/_header.scss

@@ -787,14 +787,7 @@ a.contact-link {
 }
 @media (max-width: 768px) {
   .language-flags {
-    right: unset;
-    left: 70px;
-    top: -40px;
-    width: 70px;
-    font-size: 24px;
-    a {
-      margin-right: 8px;
-    }
+    display: none;
   }
 }
 @media (max-width: 468px) {

assets/css/_menu.scss

@@ -60,11 +60,21 @@ div#menu-widget {
   div#menu-widget {
     overflow: scroll;
 
-    max-height: 600px;
+    // max-height: 600px;
   }
   div#menu-widget .menu {
     margin-right: 0px;
     text-align: left;
     width: 50%;
   }
+  .language-flags-mobile {
+    padding: 15px 30px;
+    border-top: 1px solid #ddd;
+    font-size: 28px;
+    margin-top: 20px;
+    a {
+      margin-right: 12px;
+      font-size: 30px;
+    }
+  }
 }

assets/css/luxuryCar.css

@@ -23,12 +23,24 @@ export function initHeader() {
     }
   });
   $('<a class="contact-link" href="/kontakty/">Kontakt</a>').prependTo(".navigation-buttons");
-  $("<div>", { class: "language-flags" })
-    .html(
-      '<a href="https://www.luxurycardesign.sk/" class="flag-link" data-lang="sk" aria-label="Slovenská verzia">🇸🇰</a>' +
-        '<a href="https://www.luxurycardesign.cz/" class="flag-link" data-lang="cs" aria-label="Česká verze">🇨🇿</a>',
-    )
-    .prependTo(".navigation-buttons");
+
+  // Language flags - add to desktop navigation, mobile menu will have them via CSS
+  if (window.innerWidth > 768) {
+    $("<div>", { class: "language-flags" })
+      .html(
+        '<a href="https://www.luxurycardesign.sk/" class="flag-link" data-lang="sk" aria-label="Slovenská verzia">🇸🇰</a>' +
+          '<a href="https://www.luxurycardesign.cz/" class="flag-link" data-lang="cs" aria-label="Česká verze">🇨🇿</a>',
+      )
+      .prependTo(".navigation-buttons");
+  } else {
+    // Mobile: add flags to end of menu
+    $("<div>", { class: "language-flags-mobile" })
+      .html(
+        '<a href="https://www.luxurycardesign.sk/" class="flag-link" data-lang="sk" aria-label="Slovenská verzia">🇸🇰</a>' +
+          '<a href="https://www.luxurycardesign.cz/" class="flag-link" data-lang="cs" aria-label="Česká verze">🇨🇿</a>',
+      )
+      .appendTo("#menu-widget");
+  }
   headerFixProdukt();
 }
 

assets/css/luxuryCar.css.map

@@ -667,7 +667,7 @@ $(document).on("click", ".upsale-button", function (e) {
 
 function resetBoxConfigDefaults() {
   // reset amount buttons to default (2 ks)
-  const $amountButtons = $(".amount-button");
+  const $amountButtons = $(".box-config .amount-button");
   if ($amountButtons.length) {
     $amountButtons.removeClass("active");
     $amountButtons
@@ -678,7 +678,7 @@ function resetBoxConfigDefaults() {
   }
 
   // reset size selections and visibility (default: 2 sizes visible)
-  $(".parameter-wrap.parameter-sizes").each(function (index) {
+  $(".box-config .parameter-wrap.parameter-sizes").each(function (index) {
     const $wrap = $(this);
     const shouldShow = index < 2;
     if (shouldShow) {
@@ -692,7 +692,24 @@ function resetBoxConfigDefaults() {
 
     const paramId = $wrap.attr("data-parameterId");
     if (paramId) {
-      $("select.parameter-id-" + paramId + ".surcharge-parameter").val(0);
+      $("select.parameter-id-" + paramId + ".surcharge-parameter").val("");
+    }
+  });
+
+  // reset all box-config parameters to default (empty value)
+  $(".box-config .parameter-wrap").each(function () {
+    const $wrap = $(this);
+
+    // reset all option buttons to inactive
+    $wrap.find(".button.option-button").removeClass("active");
+
+    // reset all inputs
+    $wrap.find("input[type='radio'], input[type='checkbox']").prop("checked", false);
+
+    // reset select to default empty value
+    const paramId = $wrap.attr("data-parameterId");
+    if (paramId) {
+      $("select.parameter-id-" + paramId + ".surcharge-parameter").val("");
     }
   });
 }