feat: implement header/footer visibility controls for checkout and thankyou pages

- Created LayoutWrapper component to conditionally render header/footer based on route
- Created MinimalHeader component (logo only)
- Created MinimalFooter component (trust badges + policy links)
- Created usePageVisibility hook to get visibility settings per page
- Wrapped ClassicLayout with LayoutWrapper for conditional rendering
- Header/footer visibility now controlled directly in React SPA
- Settings: show/minimal/hide for both header and footer
- Background color support for checkout and thankyou pages

admin-spa/src/components/PageHeader.tsx

@@ -13,10 +13,10 @@ export function PageHeader({ fullscreen = false, hideOnDesktop = false }: PageHe
 
   if (!title) return null;
 
-  // Only apply max-w-5xl for settings pages (boxed layout)
+  // Only apply max-w-5xl for settings and appearance pages (boxed layout)
   // All other pages should be full width
-  const isSettingsPage = location.pathname.startsWith('/settings');
-  const containerClass = isSettingsPage ? 'w-full max-w-5xl mx-auto' : 'w-full';
+  const isBoxedLayout = location.pathname.startsWith('/settings') || location.pathname.startsWith('/appearance');
+  const containerClass = isBoxedLayout ? 'w-full max-w-5xl mx-auto' : 'w-full';
 
   // PageHeader is now ABOVE submenu in DOM order
   // z-20 ensures it stays on top when both are sticky

admin-spa/src/components/ui/slider.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }