fix: update styles for minicart and mobile navigation, remove unnecessary x-cloak class

Author: james0r

layout/theme.liquid

@@ -66,7 +66,7 @@
 
     {% comment %} Styles for minicart wrapper in sections/minicart.liquid {% endcomment %}
     <div
-      class="minicart-wrapper fixed top-[50px] right-[50px] z-100 max-[576px]:right-[20px] [[x-cloak]]:hidden"
+      class="minicart-wrapper fixed top-12.5 right-12.5 z-100 max-[576px]:right-5"
       x-data
       x-show="$store.global.isMinicartVisible"
       x-on:click.outside="$store.global.isMinicartVisible = false"

sections/header.liquid

@@ -21,7 +21,7 @@
     <nav
       :class="$store.global.isMobileMenuVisible ? 'open' : 'closed'"
       aria-label="Mobile Navigation Overlay"
-      class="block md:hidden [[x-cloak]]:hidden"
+      class="block md:hidden"
       style="transition: all 300ms;"
       id="mobile-nav"
       role="navigation"
@@ -95,7 +95,7 @@
 
       <a
         href="{{ routes.cart_url }}"
-        class="relative p-2 text-white [&>svg]:h-5.5 [&>svg]:w-auto [[x-cloak]]:hidden"
+        class="relative p-2 text-white [&>svg]:h-5.5 [&>svg]:w-auto"
         x-cloak>
         {% render 'icon-cart' %}
         <span data-ajax-cart-bind="item_count" class="absolute top-[58%] left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs text-cloud-burst-500">

sections/minicart.liquid

@@ -1,5 +1,5 @@
 <div
-  class="minicart h-auto w-72 rounded-md bg-white p-5 shadow-[0_30px_130px_-8px_rgba(0,0,0,0.25)] [&_a]:text-black [&_a]:no-underline [&_a:hover]:underline [[x-cloak]]:hidden"
+  class="minicart h-auto w-72 rounded-md bg-white p-5 shadow-[0_30px_130px_-8px_rgba(0,0,0,0.25)] [&_a]:text-black [&_a]:no-underline [&_a:hover]:underline"
   data-ajax-cart-section
   x-cloak>
   <div class="title-row mb-2.5 flex items-center justify-between">

snippets/head-css.liquid

@@ -1,2 +1,6 @@
-{% comment %} x-cloak hiding is handled via `[[x-cloak]]:hidden` utility classes. {% endcomment %}
-
+<style>
+  /* Hide elements with x-cloak attribute until Alpine.js is loaded */
+  [x-cloak] {
+    display: none !important;
+  }
+</style>