Update header and product styles, add language flags

Adjusted header cart icon positioning and added a new .language-flags class with responsive styles. Updated button and shadow colors on the index page, improved transition properties, and adjusted text positioning on product pages. CSS and JS files were updated to reflect these style changes.

Author: SharkJohny

assets/css/_header.scss

@@ -215,8 +215,8 @@ header#header {
     line-height: 11px;
     padding: 3px;
     position: absolute;
-    right: -22px;
-    top: 0;
+    right: -38px;
+    top: 19px;
     width: 17px;
     z-index: 10;
     position: absolute;
@@ -775,7 +775,28 @@ a.contact-link {
 .product.active.productVisible {
   width: 25%;
 }
-
+.language-flags {
+  font-size: 31px;
+  position: absolute;
+  right: 110px;
+  width: 90px;
+  top: -6px;
+  a {
+    margin-right: 10px;
+  }
+}
+@media (max-width: 768px) {
+  .language-flags {
+    right: unset;
+    left: 70px;
+    top: -40px;
+    width: 70px;
+    font-size: 24px;
+    a {
+      margin-right: 8px;
+    }
+  }
+}
 @media (max-width: 468px) {
   .plugin-fixed-header__basket > button {
     display: block !important;

assets/css/_index.scss

@@ -93,8 +93,8 @@ section#model-selector {
   margin-top: 20px;
   margin-bottom: 0px;
   a {
-    background-color: #c49b30;
-    border-color: #c49b30;
+    background-color: var(--color-secondary-hover);
+    border-color: var(--color-secondary-hover);
     color: #fff;
     border-radius: 10px;
     font-size: 20px;
@@ -180,7 +180,9 @@ a.ti-header.source-Google {
   position: relative;
   max-width: 700px;
   margin: auto;
-  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.1), 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0px 0px 40px 0px rgba(0, 0, 0, 0.1),
+    0px 0px 10px 0px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   &:before {
     content: "";
@@ -1524,7 +1526,7 @@ a.gold-border.collection-card.shadow {
   @media (min-width: 700px) {
     .layers-text {
       position: absolute;
-      bottom: 30px;
+      bottom: 40%;
     }
   }
   @media (max-width: 768px) {

assets/css/_productPage.scss

@@ -1088,7 +1088,9 @@ span.quantity {
     background-color: #fff;
     border-width: 2px;
     margin-block-start: calc((1.25rem / 2) * -1);
-    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    transition:
+      border-color 0.2s ease-in-out,
+      background-color 0.2s ease-in-out;
     border: 2px solid #6d6d6d1f;
   }
   .timeline__nav {
@@ -1207,7 +1209,7 @@ span.quantity {
     }
     .layers-text {
       position: absolute;
-      bottom: 0px;
+      bottom: 25%;
     }
   }
   @media screen and (min-width: 1000px) {

assets/css/luxuryCar.css

@@ -6,6 +6,8 @@ export function initHeader() {
 
   $('<a href="#" class="toggle-window" data-target="search" data-testid="linkSearchIcon"></a>').prependTo(".desktop  .navigation-buttons");
 
+  // Language flags for SK / CZ - prepend to navigation buttons
+
   $("<div>", {
     class: "navigation-show",
     text: "E-shop",
@@ -21,7 +23,12 @@ 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");
   headerFixProdukt();
 }
 

assets/css/luxuryCar.css.map

@@ -1,5 +1,25 @@
 import { showUpsalePopup } from "./UpsalePopup.js";
 import { createUpsaleButton, createOptions, createBoxConfig } from "./creatButtons.js";
+
+window.addEventListener(
+  "error",
+  (event) => {
+    if (event.target && event.target.tagName === "IMG") {
+      const img = event.target;
+      // Check if we already retried this image to prevent infinite loop
+      if (!img.dataset.retried) {
+        // We can't strictly check for 502 status in JS error event, so we retry on any error once
+        console.warn("Image load failed (possible 502), retrying with timestamp:", img.src);
+
+        img.dataset.retried = "true";
+        const separator = img.src.includes("?") ? "&" : "?";
+        img.src = img.src + separator + Date.now();
+      }
+    }
+  },
+  true, // Capture phase is needed because error events on elements do not bubble
+);
+
 let koberce = 88;
 let boxy = 91;
 let box1 = 94;