fix(html): resolve validation errors, implement dynamic MDX heading shifting, and improve accessibility

app/[locale]/products/[...slug]/page.tsx

@@ -112,7 +112,7 @@ const components = {
       className="text-lg md:text-xl text-text-secondary leading-relaxed mb-8 font-medium"
     />
   ),
-  h2: (props: any) => (
+  h1: (props: any) => (
     <div className="relative mb-16">
       <h2
         {...props}
@@ -121,12 +121,18 @@ const components = {
       <div className="w-20 h-1.5 bg-accent rounded-full" />
     </div>
   ),
-  h3: (props: any) => (
+  h2: (props: any) => (
     <h3
       {...props}
       className="text-2xl md:text-3xl font-black text-primary mb-10 tracking-tight uppercase"
     />
   ),
+  h3: (props: any) => (
+    <h4
+      {...props}
+      className="text-xl md:text-2xl font-black text-primary mb-8 tracking-tight uppercase"
+    />
+  ),
   ul: (props: any) => <ul {...props} className="list-none pl-0 mb-10" />,
   section: (props: any) => <div {...props} className="block" />,
   li: (props: any) => (
@@ -347,14 +353,15 @@ export default async function ProductPage({ params }: ProductPageProps) {
 
   // Pre-process content to convert raw HTML tags to Markdown so they use our custom components
   const processedContent = product.content
-    .replace(/<h2[^>]*>(.*?)<\/h2>/g, '\n## $1\n')
-    .replace(/<h3[^>]*>(.*?)<\/h3>/g, '\n### $1\n')
-    .replace(/<p[^>]*>(.*?)<\/p>/g, '\n$1\n')
+    .replace(/<h1[^>]*>(.*?)<\/h1>/gs, '\n# $1\n') // Maps to our custom h1 (which renders h2)
+    .replace(/<h2[^>]*>(.*?)<\/h2>/gs, '\n## $1\n') // Maps to our custom h2 (which renders h3)
+    .replace(/<h3[^>]*>(.*?)<\/h3>/gs, '\n### $1\n') // Maps to our custom h3 (which renders h4)
+    .replace(/<p[^>]*>(.*?)<\/p>/gs, '\n$1\n')
     .replace(/<ul[^>]*>(.*?)<\/ul>/gs, '\n$1\n')
-    .replace(/<li[^>]*>(.*?)<\/li>/g, '\n- $1\n')
-    .replace(/<strong[^>]*>(.*?)<\/strong>/g, '**$1**')
-    .replace(/<section[^>]*>/g, '')
-    .replace(/<\/section>/g, '');
+    .replace(/<li[^>]*>(.*?)<\/li>/gs, '\n- $1\n')
+    .replace(/<strong[^>]*>(.*?)<\/strong>/gs, '**$1**')
+    .replace(/<section[^>]*>/gs, '')
+    .replace(/<\/section>/gs, '');
 
   return (
     <div className="flex flex-col min-h-screen bg-white relative">