@sonordev/site-kit 1.3.5 → 1.4.0

package/dist/{chunk-IZZ7XJYN.mjs → chunk-ULAQCW4X.mjs}

@@ -92,6 +92,12 @@ function getApiConfig() {
   const apiKey = typeof window !== "undefined" ? window.__SITE_KIT_API_KEY__ || "" : "";
   return { apiUrl, apiKey };
 }
+function getApiUrl() {
+  return getApiConfig().apiUrl;
+}
+function getApiKey() {
+  return getApiConfig().apiKey;
+}
 async function apiPost(endpoint, body = {}) {
   const { apiUrl, apiKey } = getApiConfig();
   if (!apiKey) {
@@ -325,6 +331,29 @@ async function fetchProcessorConfig() {
     return null;
   }
 }
+async function createPaymentIntent(options) {
+  const apiUrl = getApiUrl();
+  const apiKey = getApiKey();
+  const sessionId = typeof sessionStorage !== "undefined" ? sessionStorage.getItem("_uptrade_sid") : null;
+  try {
+    const response = await fetch(`${apiUrl}/api/public/commerce/create-payment-intent`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify({
+        ...options,
+        analyticsSessionId: sessionId
+      })
+    });
+    const data = await response.json();
+    if (!response.ok) throw new Error(data.message || "Failed to create payment intent");
+    return data;
+  } catch (error) {
+    return { success: false, error: error?.message || "Network error. Please try again." };
+  }
+}
 async function createCheckoutSession(optionsOrOfferingId, legacyOptions) {
   const { apiUrl, apiKey } = getApiConfig();
   const options = typeof optionsOrOfferingId === "string" ? { offeringId: optionsOrOfferingId, ...legacyOptions } : optionsOrOfferingId;
@@ -1295,485 +1324,2413 @@ var tdStyle = {
   borderBottom: "1px solid rgba(128, 128, 128, 0.1)",
   whiteSpace: "nowrap"
 };
-function ProductDetail({
-  product: propProduct,
-  slug,
-  showAddToCart = true,
-  showBuyNow = true,
-  showQuantity = true,
-  showVariants = true,
-  showGallery = true,
-  showFeatures = true,
-  showSpecifications = true,
-  successUrl,
-  cancelUrl,
-  onAddToCart,
-  onBuyNow,
-  onCheckoutSuccess,
-  onCheckoutError,
-  className = "",
-  style
-}) {
-  const [product, setProduct] = useState(propProduct || null);
-  const [loading, setLoading] = useState(!propProduct && !!slug);
-  const [selectedVariant, setSelectedVariant] = useState();
-  const [quantity, setQuantity] = useState(1);
-  const [selectedImage, setSelectedImage] = useState(0);
-  const [checkingOut, setCheckingOut] = useState(false);
-  const analytics = useAnalyticsOptional();
-  useEffect(() => {
-    if (!product || !analytics) return;
-    analytics.trackEvent({
-      name: "product_view",
-      properties: {
-        offering_id: product.id,
-        name: product.name,
-        price: product.price,
-        type: product.type,
-        category: product.category?.name
-      }
-    });
-  }, [product?.id, analytics]);
-  useEffect(() => {
-    if (propProduct) {
-      setProduct(propProduct);
-      const defaultVariant = propProduct.variants?.find((v) => v.is_default) || propProduct.variants?.[0];
-      setSelectedVariant(defaultVariant);
-      return;
-    }
-    if (!slug) return;
-    async function load() {
-      setLoading(true);
-      try {
-        const data = await fetchProductBySlug(slug);
-        setProduct(data);
-        if (data?.variants?.length) {
-          const defaultVariant = data.variants.find((v) => v.is_default) || data.variants[0];
-          setSelectedVariant(defaultVariant);
-        }
-      } catch (e) {
-        console.error("Failed to load product:", e);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [propProduct, slug]);
-  if (loading) {
-    return /* @__PURE__ */ jsxs("div", { className: `site-kit-product-detail site-kit-product-detail--loading ${className}`, style, children: [
-      /* @__PURE__ */ jsx("div", { className: "site-kit-product-detail__loader", style: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        minHeight: "400px"
-      }, children: /* @__PURE__ */ jsx("div", { style: {
-        width: "48px",
-        height: "48px",
-        border: "3px solid #e5e7eb",
-        borderTopColor: "#2563eb",
-        borderRadius: "50%",
-        animation: "spin 1s linear infinite"
-      } }) }),
-      /* @__PURE__ */ jsx("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` })
-    ] });
+var STYLE_BLOCK = `
+@keyframes skc-spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes skc-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+@keyframes skc-fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes skc-slideUp {
+  from { opacity: 0; transform: translateY(100%); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes skc-scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes skc-checkmark {
+  0% { stroke-dashoffset: 24; }
+  100% { stroke-dashoffset: 0; }
+}
+
+.skc-detail {
+  --commerce-bg: transparent;
+  --commerce-surface: #f9fafb;
+  --commerce-surface-hover: #f3f4f6;
+  --commerce-border: #e5e7eb;
+  --commerce-text: #111827;
+  --commerce-text-secondary: #6b7280;
+  --commerce-text-muted: #9ca3af;
+  --commerce-accent: #2563eb;
+  --commerce-accent-hover: #1d4ed8;
+  --commerce-accent-text: #ffffff;
+  --commerce-success: #059669;
+  --commerce-warning: #d97706;
+  --commerce-danger: #dc2626;
+  --commerce-radius: 12px;
+  --commerce-radius-sm: 8px;
+
+  animation: skc-fadeIn 0.3s ease-out;
+}
+
+.skc-detail *, .skc-detail *::before, .skc-detail *::after {
+  box-sizing: border-box;
+}
+
+.skc-detail-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2.5rem;
+  align-items: start;
+}
+
+@media (max-width: 768px) {
+  .skc-detail-layout {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
   }
-  if (!product) {
-    return /* @__PURE__ */ jsx("div", { className: `site-kit-product-detail site-kit-product-detail--not-found ${className}`, style, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "#666" }, children: [
-      /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "#333" }, children: "Product Not Found" }),
-      /* @__PURE__ */ jsx("p", { style: { marginTop: "0.5rem" }, children: "The product you're looking for doesn't exist or has been removed." })
-    ] }) });
+  .skc-detail-layout.skc-stacked {
+    grid-template-columns: 1fr;
   }
-  const currentPrice = selectedVariant?.price ?? product.price ?? 0;
-  const compareAtPrice = product.compare_at_price;
-  const hasDiscount = compareAtPrice && compareAtPrice > currentPrice;
-  const allImages = [
-    product.featured_image_url,
-    ...product.gallery_images || [],
-    ...product.variants?.map((v) => v.image_url).filter(Boolean) || []
-  ].filter(Boolean);
-  const inventoryCount = selectedVariant?.inventory_count ?? product.inventory_count;
-  const isOutOfStock = product.track_inventory && inventoryCount !== void 0 && inventoryCount <= 0;
-  const isLowStock = product.track_inventory && inventoryCount !== void 0 && inventoryCount > 0 && inventoryCount <= 5;
-  const needsVariantSelection = (product.is_clothing || (product.variants?.length ?? 0) > 0) && !selectedVariant;
-  const handleAddToCart = () => {
-    analytics?.trackEvent({
-      name: "add_to_cart",
-      properties: {
-        offering_id: product.id,
-        variant_id: selectedVariant?.id,
-        quantity,
-        price: selectedVariant?.price ?? product.price,
-        name: product.name
-      }
-    });
-    if (onAddToCart) {
-      onAddToCart(product, selectedVariant, quantity);
-    }
+}
+
+.skc-detail-layout.skc-stacked {
+  grid-template-columns: 1fr;
+  max-width: 640px;
+}
+
+/* Gallery */
+.skc-gallery-main {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--commerce-radius);
+  background: var(--commerce-surface);
+  cursor: crosshair;
+  aspect-ratio: 1;
+}
+.skc-gallery-main img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.15s ease-out;
+  will-change: transform;
+}
+.skc-gallery-thumbs {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 4px;
+}
+.skc-gallery-thumb {
+  flex: 0 0 auto;
+  width: 64px;
+  height: 64px;
+  border-radius: var(--commerce-radius-sm);
+  overflow: hidden;
+  border: 2px solid transparent;
+  padding: 0;
+  cursor: pointer;
+  background: var(--commerce-surface);
+  transition: border-color 0.15s ease;
+}
+.skc-gallery-thumb:hover {
+  border-color: var(--commerce-text-muted);
+}
+.skc-gallery-thumb.skc-active {
+  border-color: var(--commerce-accent);
+}
+.skc-gallery-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Sticky buy bar */
+.skc-sticky-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background: white;
+  border-top: 1px solid var(--commerce-border);
+  padding: 0.75rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  animation: skc-slideUp 0.25s ease-out;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
+}
+@media (min-width: 769px) {
+  .skc-sticky-bar { display: none; }
+}
+
+/* Tabs */
+.skc-tabs-list {
+  display: flex;
+  border-bottom: 1px solid var(--commerce-border);
+  gap: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.skc-tabs-list::-webkit-scrollbar { display: none; }
+.skc-tab-btn {
+  padding: 0.75rem 1.25rem;
+  border: none;
+  background: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--commerce-text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  white-space: nowrap;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.skc-tab-btn:hover {
+  color: var(--commerce-text);
+}
+.skc-tab-btn.skc-active {
+  color: var(--commerce-accent);
+  border-bottom-color: var(--commerce-accent);
+}
+
+/* Checkout overlay */
+.skc-checkout-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: rgba(0,0,0,0.5);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  animation: skc-fadeIn 0.2s ease-out;
+}
+.skc-checkout-panel {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  max-height: 90vh;
+  overflow-y: auto;
+  background: white;
+  border-radius: calc(var(--commerce-radius) + 4px);
+  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
+  animation: skc-scaleIn 0.25s ease-out;
+}
+
+/* Form inputs */
+.skc-input {
+  width: 100%;
+  padding: 0.625rem 0.75rem;
+  border-radius: var(--commerce-radius-sm);
+  border: 1px solid var(--commerce-border);
+  font-size: 0.9375rem;
+  color: var(--commerce-text);
+  background: white;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  outline: none;
+}
+.skc-input:focus {
+  border-color: var(--commerce-accent);
+  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
+}
+.skc-input::placeholder {
+  color: var(--commerce-text-muted);
+}
+
+/* Primary button */
+.skc-btn-primary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.875rem 1.5rem;
+  border-radius: var(--commerce-radius-sm);
+  border: none;
+  background: var(--commerce-accent);
+  color: var(--commerce-accent-text);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.1s ease;
+}
+.skc-btn-primary:hover:not(:disabled) {
+  background: var(--commerce-accent-hover);
+}
+.skc-btn-primary:active:not(:disabled) {
+  transform: scale(0.98);
+}
+.skc-btn-primary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Secondary button */
+.skc-btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.875rem 1.5rem;
+  border-radius: var(--commerce-radius-sm);
+  border: 2px solid var(--commerce-accent);
+  background: transparent;
+  color: var(--commerce-accent);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.skc-btn-secondary:hover:not(:disabled) {
+  background: rgba(37,99,235,0.05);
+}
+.skc-btn-secondary:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* Low-stock pulse */
+.skc-pulse {
+  animation: skc-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Step indicator */
+.skc-step-dots {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem 0 0.5rem;
+}
+.skc-step-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--commerce-border);
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+.skc-step-dot.skc-active {
+  background: var(--commerce-accent);
+  transform: scale(1.3);
+}
+.skc-step-dot.skc-done {
+  background: var(--commerce-success);
+}
+.skc-step-connector {
+  width: 24px;
+  height: 2px;
+  background: var(--commerce-border);
+  transition: background 0.2s ease;
+}
+.skc-step-connector.skc-done {
+  background: var(--commerce-success);
+}
+`;
+function loadSquareSDK(env) {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined") return reject(new Error("No window"));
+    if (window.Square) return resolve();
+    const script = document.createElement("script");
+    script.src = env === "sandbox" ? "https://sandbox.web.squarecdn.com/v1/square.js" : "https://web.squarecdn.com/v1/square.js";
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Square SDK"));
+    document.head.appendChild(script);
+  });
+}
+function loadStripeSDK() {
+  return new Promise((resolve, reject) => {
+    if (typeof window === "undefined") return reject(new Error("No window"));
+    if (window.Stripe) return resolve();
+    const script = document.createElement("script");
+    script.src = "https://js.stripe.com/v3/";
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Failed to load Stripe"));
+    document.head.appendChild(script);
+  });
+}
+var IconLock = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var IconTruck = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "1", y: "3", width: "15", height: "13" }),
+  /* @__PURE__ */ jsx("polygon", { points: "16 8 20 8 23 11 23 16 16 16 16 8" }),
+  /* @__PURE__ */ jsx("circle", { cx: "5.5", cy: "18.5", r: "2.5" }),
+  /* @__PURE__ */ jsx("circle", { cx: "18.5", cy: "18.5", r: "2.5" })
+] });
+var IconReturn = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("polyline", { points: "1 4 1 10 7 10" }),
+  /* @__PURE__ */ jsx("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
+] });
+var IconShield = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+var IconChevronLeft = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
+var IconChevronRight = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) });
+var IconCheck = () => /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var IconAlert = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+] });
+var IconCalendar = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+] });
+var IconMapPin = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10", r: "3" })
+] });
+var IconUsers = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+  /* @__PURE__ */ jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
+] });
+var IconExternalLink = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+  /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+] });
+var IconX = () => /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] });
+var ICON_MAP = {
+  lock: IconLock,
+  truck: IconTruck,
+  return: IconReturn,
+  shield: IconShield
+};
+function ProductGallery({ images, productName, selectedIndex, onSelect }) {
+  const [zoomStyle, setZoomStyle] = useState(null);
+  const [isHovering, setIsHovering] = useState(false);
+  const handleMouseMove = (e) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = (e.clientX - rect.left) / rect.width * 100;
+    const y = (e.clientY - rect.top) / rect.height * 100;
+    setZoomStyle({ transformOrigin: `${x}% ${y}%`, transform: "scale(2)" });
   };
-  const handleBuyNow = async () => {
-    analytics?.trackEvent({
-      name: "add_to_cart",
-      properties: {
-        offering_id: product.id,
-        variant_id: selectedVariant?.id,
-        quantity,
-        price: selectedVariant?.price ?? product.price,
-        name: product.name
-      }
-    });
-    if (onBuyNow) {
-      onBuyNow(product, selectedVariant, quantity);
-      return;
-    }
-    setCheckingOut(true);
-    try {
-      const result = await createCheckoutSession({
-        offeringId: product.id,
-        variantId: selectedVariant?.id,
-        quantity,
-        successUrl: successUrl || `${window.location.origin}/checkout/success`,
-        cancelUrl: cancelUrl || window.location.href
-      });
-      if (result.success && result.checkout_url) {
-        onCheckoutSuccess?.(result);
-        window.location.href = result.checkout_url;
-      } else {
-        throw new Error(result.error || "Failed to create checkout");
-      }
-    } catch (error) {
-      console.error("Checkout error:", error);
-      onCheckoutError?.(error.message || "Checkout failed");
-    } finally {
-      setCheckingOut(false);
-    }
+  const handlePrev = (e) => {
+    e.stopPropagation();
+    onSelect(selectedIndex === 0 ? images.length - 1 : selectedIndex - 1);
   };
-  const handleVariantChange = (variant) => {
-    setSelectedVariant(variant);
-    if (variant.image_url) {
-      const imageIndex = allImages.indexOf(variant.image_url);
-      if (imageIndex >= 0) setSelectedImage(imageIndex);
-    }
+  const handleNext = (e) => {
+    e.stopPropagation();
+    onSelect(selectedIndex === images.length - 1 ? 0 : selectedIndex + 1);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `site-kit-product-detail ${className}`, style: {
-    display: "grid",
-    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
-    gap: "2rem",
-    ...style
-  }, children: [
-    showGallery && allImages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__gallery", children: [
-      /* @__PURE__ */ jsx("div", { className: "site-kit-product-detail__main-image", style: {
-        aspectRatio: "1",
-        borderRadius: "12px",
-        overflow: "hidden",
-        backgroundColor: "#f9fafb"
-      }, children: /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: allImages[selectedImage],
-          alt: product.name,
-          style: {
-            width: "100%",
-            height: "100%",
-            objectFit: "cover"
+  if (!images.length) return null;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "skc-gallery-main",
+        onMouseMove: handleMouseMove,
+        onMouseEnter: () => setIsHovering(true),
+        onMouseLeave: () => {
+          setIsHovering(false);
+          setZoomStyle(null);
+        },
+        role: "img",
+        "aria-label": `${productName} image ${selectedIndex + 1} of ${images.length}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: images[selectedIndex],
+              alt: `${productName} - Image ${selectedIndex + 1}`,
+              style: isHovering && zoomStyle ? zoomStyle : void 0,
+              draggable: false
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handlePrev,
+                "aria-label": "Previous image",
+                style: {
+                  position: "absolute",
+                  left: 8,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: 36,
+                  height: 36,
+                  borderRadius: "50%",
+                  border: "none",
+                  background: "rgba(255,255,255,0.9)",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  opacity: isHovering ? 1 : 0,
+                  transition: "opacity 0.2s ease",
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+                },
+                children: /* @__PURE__ */ jsx(IconChevronLeft, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleNext,
+                "aria-label": "Next image",
+                style: {
+                  position: "absolute",
+                  right: 8,
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: 36,
+                  height: 36,
+                  borderRadius: "50%",
+                  border: "none",
+                  background: "rgba(255,255,255,0.9)",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  opacity: isHovering ? 1 : 0,
+                  transition: "opacity 0.2s ease",
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
+                },
+                children: /* @__PURE__ */ jsx(IconChevronRight, {})
+              }
+            )
+          ] }),
+          images.length > 1 && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: 8,
+                right: 8,
+                background: "rgba(0,0,0,0.6)",
+                color: "white",
+                fontSize: "0.75rem",
+                padding: "2px 8px",
+                borderRadius: 12
+              },
+              children: [
+                selectedIndex + 1,
+                " / ",
+                images.length
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    images.length > 1 && /* @__PURE__ */ jsx("div", { className: "skc-gallery-thumbs", role: "listbox", "aria-label": "Image thumbnails", children: images.map((img, idx) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `skc-gallery-thumb${idx === selectedIndex ? " skc-active" : ""}`,
+        onClick: () => onSelect(idx),
+        role: "option",
+        "aria-selected": idx === selectedIndex,
+        "aria-label": `View image ${idx + 1}`,
+        children: /* @__PURE__ */ jsx("img", { src: img, alt: `${productName} thumbnail ${idx + 1}`, draggable: false })
+      },
+      idx
+    )) })
+  ] });
+}
+function VariantSelector({ variants, selected, isClothing, showInventory, onSelect }) {
+  if (!variants.length) return null;
+  const label = isClothing ? "Size" : "Options";
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.25rem" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: {
+          fontSize: "0.875rem",
+          fontWeight: 600,
+          color: "var(--commerce-text)"
+        },
+        children: [
+          label,
+          selected && /* @__PURE__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary)", marginLeft: 6 }, children: [
+            "\u2014 ",
+            selected.options?.Size || selected.name
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, role: "radiogroup", "aria-label": label, children: variants.map((variant) => {
+      const isSelected = selected?.id === variant.id;
+      const variantOutOfStock = variant.track_inventory !== false && (variant.inventory_count ?? 0) <= 0;
+      const isLow = variant.track_inventory !== false && variant.inventory_count != null && variant.inventory_count > 0 && variant.inventory_count <= 5;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          role: "radio",
+          "aria-checked": isSelected,
+          "aria-label": `${variant.options?.Size || variant.name}${variantOutOfStock ? " - Out of stock" : ""}`,
+          onClick: () => !variantOutOfStock && onSelect(variant),
+          disabled: variantOutOfStock,
+          style: {
+            position: "relative",
+            padding: "0.5rem 1rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: isSelected ? "2px solid var(--commerce-accent)" : "1px solid var(--commerce-border)",
+            backgroundColor: isSelected ? "rgba(37,99,235,0.05)" : "white",
+            color: variantOutOfStock ? "var(--commerce-text-muted)" : "var(--commerce-text)",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: variantOutOfStock ? "not-allowed" : "pointer",
+            opacity: variantOutOfStock ? 0.5 : 1,
+            transition: "all 0.15s ease",
+            textDecoration: variantOutOfStock ? "line-through" : "none"
+          },
+          children: [
+            variant.options?.Size || variant.name,
+            showInventory && !variantOutOfStock && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  position: "absolute",
+                  top: -3,
+                  right: -3,
+                  width: 8,
+                  height: 8,
+                  borderRadius: "50%",
+                  backgroundColor: isLow ? "var(--commerce-warning)" : "var(--commerce-success)",
+                  border: "2px solid white"
+                },
+                title: isLow ? `Only ${variant.inventory_count} left` : "In stock"
+              }
+            )
+          ]
+        },
+        variant.id
+      );
+    }) })
+  ] });
+}
+function QuantitySelector({ quantity, max, onChange }) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.25rem" }, children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        style: {
+          display: "block",
+          fontSize: "0.875rem",
+          fontWeight: 600,
+          color: "var(--commerce-text)",
+          marginBottom: "0.5rem"
+        },
+        children: "Quantity"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          border: "1px solid var(--commerce-border)",
+          borderRadius: "var(--commerce-radius-sm)",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onChange(Math.max(1, quantity - 1)),
+              disabled: quantity <= 1,
+              "aria-label": "Decrease quantity",
+              style: {
+                width: 40,
+                height: 40,
+                border: "none",
+                background: "var(--commerce-surface)",
+                fontSize: "1.125rem",
+                cursor: quantity <= 1 ? "not-allowed" : "pointer",
+                opacity: quantity <= 1 ? 0.4 : 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--commerce-text)"
+              },
+              children: "-"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: 1,
+              max,
+              value: quantity,
+              onChange: (e) => {
+                const val = parseInt(e.target.value) || 1;
+                onChange(Math.max(1, Math.min(max, val)));
+              },
+              "aria-label": "Quantity",
+              style: {
+                width: 48,
+                height: 40,
+                textAlign: "center",
+                border: "none",
+                borderLeft: "1px solid var(--commerce-border)",
+                borderRight: "1px solid var(--commerce-border)",
+                fontSize: "0.9375rem",
+                fontWeight: 500,
+                color: "var(--commerce-text)",
+                outline: "none",
+                MozAppearance: "textfield",
+                appearance: "textfield"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => onChange(Math.min(max, quantity + 1)),
+              disabled: quantity >= max,
+              "aria-label": "Increase quantity",
+              style: {
+                width: 40,
+                height: 40,
+                border: "none",
+                background: "var(--commerce-surface)",
+                fontSize: "1.125rem",
+                cursor: quantity >= max ? "not-allowed" : "pointer",
+                opacity: quantity >= max ? 0.4 : 1,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "var(--commerce-text)"
+              },
+              children: "+"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var DEFAULT_TRUST_BADGES = [
+  { icon: "lock", label: "Secure Checkout", sublabel: "SSL encrypted" },
+  { icon: "truck", label: "Fast Shipping", sublabel: "Free over $50" },
+  { icon: "return", label: "Easy Returns", sublabel: "30-day policy" }
+];
+function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        marginTop: "1.5rem",
+        display: "grid",
+        gridTemplateColumns: `repeat(${Math.min(badges.length, 3)}, 1fr)`,
+        gap: "0.75rem"
+      },
+      children: badges.map((badge, idx) => {
+        const Icon = badge.icon ? ICON_MAP[badge.icon] : IconShield;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              textAlign: "center",
+              padding: "0.75rem 0.5rem",
+              borderRadius: "var(--commerce-radius-sm)",
+              background: "var(--commerce-surface)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.75rem",
+                    fontWeight: 600,
+                    color: "var(--commerce-text)",
+                    lineHeight: 1.3
+                  },
+                  children: badge.label
+                }
+              ),
+              badge.sublabel && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "0.6875rem",
+                    color: "var(--commerce-text-muted)",
+                    lineHeight: 1.3
+                  },
+                  children: badge.sublabel
+                }
+              )
+            ]
+          },
+          idx
+        );
+      })
+    }
+  );
+}
+function ProductTabs({
+  features,
+  specifications,
+  description,
+  showFeatures,
+  showSpecifications,
+  showDescription
+}) {
+  const tabs = [];
+  if (showFeatures && features?.length) tabs.push({ id: "features", label: "Features" });
+  if (showSpecifications && specifications && Object.keys(specifications).length)
+    tabs.push({ id: "specs", label: "Specifications" });
+  if (showDescription && description) tabs.push({ id: "description", label: "Description" });
+  const [active, setActive] = useState(tabs[0]?.id || "");
+  useEffect(() => {
+    if (tabs.length && !tabs.find((t) => t.id === active)) {
+      setActive(tabs[0].id);
+    }
+  }, [tabs.length]);
+  if (!tabs.length) return null;
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: "2rem" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "skc-tabs-list", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `skc-tab-btn${active === tab.id ? " skc-active" : ""}`,
+        role: "tab",
+        "aria-selected": active === tab.id,
+        "aria-controls": `skc-tabpanel-${tab.id}`,
+        onClick: () => setActive(tab.id),
+        children: tab.label
+      },
+      tab.id
+    )) }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "1.25rem 0", animation: "skc-fadeIn 0.2s ease-out" }, children: [
+      active === "features" && features && /* @__PURE__ */ jsx("div", { id: "skc-tabpanel-features", role: "tabpanel", children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          style: {
+            margin: 0,
+            paddingLeft: "1.25rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: "0.5rem"
+          },
+          children: features.map((f, i) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              style: {
+                color: "var(--commerce-text-secondary)",
+                fontSize: "0.9375rem",
+                lineHeight: 1.6
+              },
+              children: f
+            },
+            i
+          ))
+        }
+      ) }),
+      active === "specs" && specifications && /* @__PURE__ */ jsx("div", { id: "skc-tabpanel-specs", role: "tabpanel", children: /* @__PURE__ */ jsx(
+        "dl",
+        {
+          style: {
+            margin: 0,
+            display: "grid",
+            gridTemplateColumns: "minmax(120px, auto) 1fr",
+            gap: "0.625rem 1.5rem"
+          },
+          children: Object.entries(specifications).map(([key, value]) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "dt",
+              {
+                style: {
+                  fontSize: "0.875rem",
+                  color: "var(--commerce-text-muted)",
+                  fontWeight: 500
+                },
+                children: key
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "dd",
+              {
+                style: {
+                  margin: 0,
+                  fontSize: "0.875rem",
+                  color: "var(--commerce-text)"
+                },
+                children: value
+              }
+            )
+          ] }, key))
+        }
+      ) }),
+      active === "description" && description && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: "skc-tabpanel-description",
+          role: "tabpanel",
+          style: {
+            color: "var(--commerce-text-secondary)",
+            lineHeight: 1.7,
+            fontSize: "0.9375rem"
+          },
+          dangerouslySetInnerHTML: { __html: description }
+        }
+      )
+    ] })
+  ] });
+}
+function EventInfoBlock({ product, schedule }) {
+  schedule ? getSpotsRemaining(schedule.capacity, schedule.current_registrations ?? (schedule.capacity != null ? schedule.capacity - (schedule.spots_remaining ?? schedule.capacity) : 0)) : null;
+  const soldOut = schedule ? isEventSoldOut(schedule.capacity, schedule.current_registrations ?? (schedule.capacity != null ? schedule.capacity - (schedule.spots_remaining ?? schedule.capacity) : 0)) : false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginTop: "1.25rem",
+        padding: "1rem",
+        borderRadius: "var(--commerce-radius-sm)",
+        background: "var(--commerce-surface)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.5rem"
+      },
+      children: [
+        schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+          /* @__PURE__ */ jsx(IconCalendar, {}),
+          /* @__PURE__ */ jsxs("span", { children: [
+            formatDate(schedule.starts_at),
+            " at ",
+            formatTime(schedule.starts_at)
+          ] })
+        ] }),
+        product.location && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+          /* @__PURE__ */ jsx(IconMapPin, {}),
+          /* @__PURE__ */ jsx("span", { children: product.location })
+        ] }),
+        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent)" }, children: [
+          /* @__PURE__ */ jsx(IconExternalLink, {}),
+          /* @__PURE__ */ jsx("span", { children: "Virtual Event" })
+        ] }),
+        schedule?.capacity != null && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+          /* @__PURE__ */ jsx(IconUsers, {}),
+          /* @__PURE__ */ jsx("span", { children: soldOut ? /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-danger)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning)", fontWeight: 600 }, children: [
+            "Only ",
+            schedule.spots_remaining,
+            " spot",
+            schedule.spots_remaining !== 1 ? "s" : "",
+            " left!"
+          ] }) : /* @__PURE__ */ jsxs("span", { children: [
+            schedule.spots_remaining ?? schedule.capacity,
+            " spots available"
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+function CheckoutStepIndicator({ current, steps }) {
+  const currentIdx = steps.indexOf(current);
+  return /* @__PURE__ */ jsx("div", { className: "skc-step-dots", children: steps.map((step, idx) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    idx > 0 && /* @__PURE__ */ jsx("div", { className: `skc-step-connector${idx <= currentIdx ? " skc-done" : ""}` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `skc-step-dot${idx === currentIdx ? " skc-active" : idx < currentIdx ? " skc-done" : ""}`,
+        title: step.replace("-", " ")
+      }
+    )
+  ] }, step)) });
+}
+function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onNext();
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Contact Information" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Full Name *" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "skc-input",
+          type: "text",
+          required: true,
+          value: customer.name,
+          onChange: (e) => onChange({ ...customer, name: e.target.value }),
+          placeholder: "Jane Smith",
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Email Address *" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "skc-input",
+          type: "email",
+          required: true,
+          value: customer.email,
+          onChange: (e) => onChange({ ...customer, email: e.target.value }),
+          placeholder: "jane@example.com"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Phone Number" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "skc-input",
+          type: "tel",
+          value: customer.phone || "",
+          onChange: (e) => onChange({ ...customer, phone: e.target.value }),
+          placeholder: "(555) 123-4567"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", marginTop: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          style: {
+            padding: "0.75rem 1.25rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: "1px solid var(--commerce-border)",
+            background: "white",
+            color: "var(--commerce-text-secondary)",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: "pointer"
+          },
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "submit", className: "skc-btn-primary", style: { flex: 1 }, children: "Continue" })
+    ] })
+  ] });
+}
+function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onNext();
+  };
+  const update = (field, value) => {
+    onChange({ ...address, [field]: value });
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Shipping Address" }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Street Address *" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "skc-input",
+          type: "text",
+          required: true,
+          value: address.street1,
+          onChange: (e) => update("street1", e.target.value),
+          placeholder: "123 Main St",
+          autoFocus: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Apt / Suite" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "skc-input",
+          type: "text",
+          value: address.street2 || "",
+          onChange: (e) => update("street2", e.target.value),
+          placeholder: "Apt 4B"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "City *" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "skc-input",
+            type: "text",
+            required: true,
+            value: address.city,
+            onChange: (e) => update("city", e.target.value),
+            placeholder: "New York"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "State *" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "skc-input",
+            type: "text",
+            required: true,
+            value: address.state,
+            onChange: (e) => update("state", e.target.value),
+            placeholder: "NY"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "ZIP Code *" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "skc-input",
+            type: "text",
+            required: true,
+            value: address.zip,
+            onChange: (e) => update("zip", e.target.value),
+            placeholder: "10001"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Country" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "skc-input",
+            type: "text",
+            value: address.country || "US",
+            onChange: (e) => update("country", e.target.value),
+            placeholder: "US"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", marginTop: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          style: {
+            padding: "0.75rem 1.25rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: "1px solid var(--commerce-border)",
+            background: "white",
+            color: "var(--commerce-text-secondary)",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: "pointer"
+          },
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "submit", className: "skc-btn-primary", style: { flex: 1 }, disabled: loading, children: loading ? "Getting rates..." : "Continue to Shipping" })
+    ] })
+  ] });
+}
+function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading, currency }) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "2rem 0" }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: 32,
+            height: 32,
+            border: "3px solid var(--commerce-border)",
+            borderTopColor: "var(--commerce-accent)",
+            borderRadius: "50%",
+            animation: "skc-spin 1s linear infinite",
+            margin: "0 auto 1rem"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
+    ] });
+  }
+  if (!rates.length) {
+    return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "1.5rem 0" }, children: [
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.875rem", margin: "0 0 1rem" }, children: "No shipping rates available for this address. Please check your address and try again." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          style: {
+            padding: "0.75rem 1.5rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: "1px solid var(--commerce-border)",
+            background: "white",
+            color: "var(--commerce-text-secondary)",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: "pointer"
+          },
+          children: "Edit Address"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Shipping Method" }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, role: "radiogroup", "aria-label": "Shipping options", children: rates.map((rate, idx) => {
+      const isSelected = selected?.objectId === rate.objectId || selected === null && idx === 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          role: "radio",
+          "aria-checked": isSelected,
+          onClick: () => onSelect(rate),
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "0.875rem 1rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: isSelected ? "2px solid var(--commerce-accent)" : "1px solid var(--commerce-border)",
+            background: isSelected ? "rgba(37,99,235,0.03)" : "white",
+            cursor: "pointer",
+            textAlign: "left",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text)" }, children: [
+                rate.carrier,
+                " \u2014 ",
+                rate.service
+              ] }),
+              rate.estimatedDays != null && /* @__PURE__ */ jsx("div", { style: { fontSize: "0.8125rem", color: "var(--commerce-text-muted)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
+          ]
+        },
+        rate.objectId || idx
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem", marginTop: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          style: {
+            padding: "0.75rem 1.25rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: "1px solid var(--commerce-border)",
+            background: "white",
+            color: "var(--commerce-text-secondary)",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: "pointer"
+          },
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "skc-btn-primary", style: { flex: 1 }, onClick: onNext, children: "Continue to Payment" })
+    ] })
+  ] });
+}
+function PaymentStep({
+  processor,
+  config,
+  product,
+  variant,
+  quantity,
+  customer,
+  shippingRate,
+  shippingAddress,
+  needsShipping,
+  onBack,
+  onSuccess,
+  onError,
+  onProcessing,
+  successUrl,
+  cancelUrl
+}) {
+  const [cardElement, setCardElement] = useState(null);
+  const [stripeInstance, setStripeInstance] = useState(null);
+  const [stripeElements, setStripeElements] = useState(null);
+  const [cardReady, setCardReady] = useState(false);
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const cardContainerRef = useRef(null);
+  const currentPrice = variant?.price ?? product.price ?? 0;
+  const subtotal = currentPrice * quantity;
+  const shippingCost = shippingRate ? parseFloat(shippingRate.amount) : 0;
+  const total = subtotal + shippingCost;
+  useEffect(() => {
+    if (processor !== "square" || !config?.squareAppId) return;
+    let destroyed = false;
+    let card = null;
+    loadSquareSDK(config.squareEnvironment || "production").then(async () => {
+      if (destroyed) return;
+      const payments = window.Square.payments(
+        config.squareAppId,
+        config.squareLocationId
+      );
+      card = await payments.card({
+        style: {
+          ".input-container": { borderRadius: "8px" },
+          ".input-container.is-focus": { borderColor: "#2563eb" },
+          ".input-container.is-error": { borderColor: "#dc2626" }
+        }
+      });
+      if (destroyed) {
+        card.destroy?.();
+        return;
+      }
+      await card.attach("#skc-card-container");
+      setCardElement(card);
+      setCardReady(true);
+    }).catch((err) => {
+      console.error("[Commerce] Square card init failed:", err);
+      setError("Failed to load payment form. Please refresh and try again.");
+    });
+    return () => {
+      destroyed = true;
+      if (card) card.destroy?.().catch(() => {
+      });
+      setCardElement(null);
+      setCardReady(false);
+    };
+  }, [processor, config?.squareAppId]);
+  useEffect(() => {
+    if (processor !== "stripe" || !config?.stripePublishableKey) return;
+    let destroyed = false;
+    (async () => {
+      try {
+        await loadStripeSDK();
+        if (destroyed) return;
+        const checkoutOpts = {
+          offeringId: product.id,
+          variantId: variant?.id,
+          quantity,
+          customer,
+          successUrl: successUrl || window.location.href,
+          cancelUrl: cancelUrl || window.location.href
+        };
+        if (needsShipping && shippingAddress) {
+          checkoutOpts.shippingAddress = shippingAddress;
+          checkoutOpts.shippingCarrier = shippingRate?.carrier;
+          checkoutOpts.shippingService = shippingRate?.service;
+          checkoutOpts.shippingCost = shippingCost;
+        }
+        const piResult = await createPaymentIntent(checkoutOpts);
+        if (destroyed) return;
+        if (!piResult.success || !piResult.clientSecret) {
+          setError(piResult.error || "Failed to initialize payment. Please try again.");
+          return;
+        }
+        const stripe = window.Stripe(config.stripePublishableKey);
+        const elements = stripe.elements({ clientSecret: piResult.clientSecret });
+        const paymentElement = elements.create("payment", {
+          layout: "tabs"
+        });
+        if (destroyed) return;
+        paymentElement.mount("#skc-card-container");
+        paymentElement.on("ready", () => {
+          if (!destroyed) setCardReady(true);
+        });
+        setStripeInstance(stripe);
+        setStripeElements(elements);
+        setCardElement(paymentElement);
+        cardContainerRef.current?.__saleId && delete cardContainerRef.current.__saleId;
+        if (cardContainerRef.current) {
+          ;
+          cardContainerRef.current.__saleId = piResult.saleId;
+          cardContainerRef.current.__confirmationNumber = piResult.confirmationNumber;
+        }
+      } catch (err) {
+        console.error("[Commerce] Stripe init failed:", err);
+        if (!destroyed) setError("Failed to load payment form. Please refresh and try again.");
+      }
+    })();
+    return () => {
+      destroyed = true;
+      setCardElement(null);
+      setStripeInstance(null);
+      setStripeElements(null);
+      setCardReady(false);
+    };
+  }, [processor, config?.stripePublishableKey]);
+  const handleSubmit = async () => {
+    if (!cardReady || submitting) return;
+    setSubmitting(true);
+    setError(null);
+    onProcessing(true);
+    try {
+      if (processor === "square" && cardElement) {
+        const tokenResult = await cardElement.tokenize();
+        if (tokenResult.status !== "OK") {
+          throw new Error(
+            tokenResult.errors?.[0]?.message || "Card verification failed. Please check your card details."
+          );
+        }
+        const checkoutOpts = {
+          offeringId: product.id,
+          variantId: variant?.id,
+          quantity,
+          customer,
+          sourceId: tokenResult.token,
+          successUrl: successUrl || window.location.href,
+          cancelUrl: cancelUrl || window.location.href
+        };
+        if (needsShipping && shippingAddress) {
+          checkoutOpts.shippingAddress = shippingAddress;
+          checkoutOpts.shippingCarrier = shippingRate?.carrier;
+          checkoutOpts.shippingService = shippingRate?.service;
+          checkoutOpts.shippingCost = shippingCost;
+        }
+        const result = await createCheckoutSession(checkoutOpts);
+        if (result.success && !result.payment_url) {
+          onSuccess(result);
+        } else if (result.success && result.payment_url) {
+          window.location.href = result.payment_url;
+        } else {
+          throw new Error(result.error || "Payment failed. Please try again.");
+        }
+      } else if (processor === "stripe" && stripeInstance && stripeElements) {
+        const { error: stripeError, paymentIntent } = await stripeInstance.confirmPayment({
+          elements: stripeElements,
+          confirmParams: {
+            return_url: successUrl || window.location.href
+          },
+          redirect: "if_required"
+        });
+        if (stripeError) {
+          throw new Error(stripeError.message || "Payment failed. Please try again.");
+        }
+        if (paymentIntent && paymentIntent.status === "succeeded") {
+          const saleId = cardContainerRef.current?.__saleId;
+          const confirmationNumber = cardContainerRef.current?.__confirmationNumber;
+          onSuccess({
+            success: true,
+            sale_id: saleId,
+            confirmation_number: confirmationNumber
+          });
+        }
+      } else {
+        const checkoutOpts = {
+          offeringId: product.id,
+          variantId: variant?.id,
+          quantity,
+          customer,
+          successUrl: successUrl || `${window.location.origin}/checkout/success`,
+          cancelUrl: cancelUrl || window.location.href
+        };
+        if (needsShipping && shippingAddress) {
+          checkoutOpts.shippingAddress = shippingAddress;
+          checkoutOpts.shippingCarrier = shippingRate?.carrier;
+          checkoutOpts.shippingService = shippingRate?.service;
+          checkoutOpts.shippingCost = shippingCost;
+        }
+        const result = await createCheckoutSession(checkoutOpts);
+        if (result.success && result.checkout_url) {
+          window.location.href = result.checkout_url;
+        } else {
+          throw new Error(result.error || "Checkout failed.");
+        }
+      }
+    } catch (err) {
+      const msg = err?.message || "Payment failed. Please try again.";
+      setError(msg);
+      onError(msg);
+    } finally {
+      setSubmitting(false);
+      onProcessing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
+    /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Payment" }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          padding: "1rem",
+          borderRadius: "var(--commerce-radius-sm)",
+          background: "var(--commerce-surface)",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.375rem",
+          fontSize: "0.875rem"
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              product.name,
+              " ",
+              variant ? `(${variant.options?.Size || variant.name})` : "",
+              " x ",
+              quantity
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: formatPrice(subtotal, product.currency) })
+          ] }),
+          shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Shipping (",
+              shippingRate.carrier,
+              " ",
+              shippingRate.service,
+              ")"
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: formatPrice(shippingCost, shippingRate.currency || product.currency) })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                fontWeight: 700,
+                color: "var(--commerce-text)",
+                fontSize: "1rem",
+                paddingTop: "0.5rem",
+                borderTop: "1px solid var(--commerce-border)",
+                marginTop: "0.25rem"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "Total" }),
+                /* @__PURE__ */ jsx("span", { children: formatPrice(total, product.currency) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          style: {
+            display: "block",
+            fontSize: "0.8125rem",
+            fontWeight: 500,
+            color: "var(--commerce-text-secondary)",
+            marginBottom: 6
+          },
+          children: "Card Details"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: "skc-card-container",
+          ref: cardContainerRef,
+          style: {
+            minHeight: processor === "stripe" ? 80 : 44,
+            border: "1px solid var(--commerce-border)",
+            borderRadius: "var(--commerce-radius-sm)",
+            padding: processor === "stripe" ? "0.75rem" : "0.5rem 0.75rem",
+            background: "white"
+          }
+        }
+      ),
+      !cardReady && !error && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
+    ] }),
+    error && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "flex-start",
+          gap: 8,
+          padding: "0.75rem",
+          background: "#fef2f2",
+          border: "1px solid #fecaca",
+          borderRadius: "var(--commerce-radius-sm)",
+          color: "var(--commerce-danger)",
+          fontSize: "0.875rem"
+        },
+        children: [
+          /* @__PURE__ */ jsx(IconAlert, {}),
+          /* @__PURE__ */ jsx("span", { children: error })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.75rem" }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onBack,
+          disabled: submitting,
+          style: {
+            padding: "0.75rem 1.25rem",
+            borderRadius: "var(--commerce-radius-sm)",
+            border: "1px solid var(--commerce-border)",
+            background: "white",
+            color: "var(--commerce-text-secondary)",
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            cursor: submitting ? "not-allowed" : "pointer",
+            opacity: submitting ? 0.5 : 1
+          },
+          children: "Back"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "skc-btn-primary",
+          style: { flex: 1 },
+          onClick: handleSubmit,
+          disabled: !cardReady || submitting,
+          children: submitting ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  width: 16,
+                  height: 16,
+                  border: "2px solid rgba(255,255,255,0.3)",
+                  borderTopColor: "white",
+                  borderRadius: "50%",
+                  animation: "skc-spin 0.8s linear infinite",
+                  display: "inline-block"
+                }
+              }
+            ),
+            "Processing..."
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(IconLock, {}),
+            "Pay ",
+            formatPrice(total, product.currency)
+          ] })
+        }
+      )
+    ] }),
+    processor && /* @__PURE__ */ jsxs(
+      "p",
+      {
+        style: {
+          textAlign: "center",
+          fontSize: "0.6875rem",
+          color: "var(--commerce-text-muted)",
+          margin: "0.25rem 0 0"
+        },
+        children: [
+          "Powered by ",
+          processor === "stripe" ? "Stripe" : "Square"
+        ]
+      }
+    )
+  ] });
+}
+function SuccessStep({ result, product, onClose }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        textAlign: "center",
+        padding: "2rem 1rem",
+        animation: "skc-fadeIn 0.3s ease-out"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 64,
+              height: 64,
+              borderRadius: "50%",
+              background: "rgba(5,150,105,0.1)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              margin: "0 auto 1rem"
+            },
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                width: "32",
+                height: "32",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "var(--commerce-success)",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsx(
+                  "polyline",
+                  {
+                    points: "20 6 9 17 4 12",
+                    style: { strokeDasharray: 24, strokeDashoffset: 0, animation: "skc-checkmark 0.5s ease-out" }
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              margin: "0 0 0.5rem",
+              fontSize: "1.375rem",
+              fontWeight: 700,
+              color: "var(--commerce-success)"
+            },
+            children: "Order Confirmed!"
+          }
+        ),
+        /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-secondary)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
+          "Thank you for your purchase of ",
+          product.name,
+          "."
+        ] }),
+        result.confirmation_number && /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-muted)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
+          "Confirmation: ",
+          /* @__PURE__ */ jsx("strong", { style: { color: "var(--commerce-text)" }, children: result.confirmation_number })
+        ] }),
+        /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-muted)", margin: "0 0 1.5rem", fontSize: "0.875rem" }, children: "A confirmation email has been sent to your inbox." }),
+        /* @__PURE__ */ jsx("button", { className: "skc-btn-primary", onClick: onClose, style: { maxWidth: 240 }, children: "Done" })
+      ]
+    }
+  );
+}
+function ProductDetail({
+  product: propProduct,
+  slug,
+  successUrl,
+  cancelUrl,
+  showGallery = true,
+  showVariants = true,
+  showQuantity = true,
+  showSizeChart = true,
+  showFeatures = true,
+  showSpecifications = true,
+  showDescription = true,
+  showTrustBadges = true,
+  showInventory = true,
+  trustBadges,
+  onAddToCart,
+  onCheckoutSuccess,
+  onCheckoutError,
+  className = "",
+  style: customStyle,
+  layout = "horizontal"
+}) {
+  const [product, setProduct] = useState(propProduct || null);
+  const [loading, setLoading] = useState(!propProduct && !!slug);
+  const [selectedVariant, setSelectedVariant] = useState();
+  const [quantity, setQuantity] = useState(1);
+  const [selectedImage, setSelectedImage] = useState(0);
+  const [checkoutState, setCheckoutState] = useState("browsing");
+  const [customer, setCustomer] = useState({ name: "", email: "", phone: "" });
+  const [shippingAddress, setShippingAddress] = useState({
+    street1: "",
+    city: "",
+    state: "",
+    zip: "",
+    country: "US"
+  });
+  const [shippingRates, setShippingRates] = useState([]);
+  const [selectedShippingRate, setSelectedShippingRate] = useState(null);
+  const [ratesLoading, setRatesLoading] = useState(false);
+  const [processorConfig, setProcessorConfig] = useState(null);
+  const [checkoutResult, setCheckoutResult] = useState(null);
+  const [checkoutError, setCheckoutError] = useState(null);
+  const [showStickyBar, setShowStickyBar] = useState(false);
+  const buyButtonRef = useRef(null);
+  const analytics = useAnalyticsOptional();
+  useEffect(() => {
+    if (propProduct) {
+      setProduct(propProduct);
+      const dv = propProduct.variants?.find((v) => v.is_default) || propProduct.variants?.[0];
+      setSelectedVariant(dv);
+      return;
+    }
+    if (!slug) return;
+    let cancelled = false;
+    setLoading(true);
+    fetchProductBySlug(slug).then((data) => {
+      if (cancelled) return;
+      setProduct(data);
+      if (data?.variants?.length) {
+        setSelectedVariant(data.variants.find((v) => v.is_default) || data.variants[0]);
+      }
+      setLoading(false);
+    }).catch(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [propProduct, slug]);
+  useEffect(() => {
+    if (!product || !analytics) return;
+    analytics.trackEvent({
+      name: "product_view",
+      properties: {
+        offering_id: product.id,
+        name: product.name,
+        price: product.price,
+        type: product.type,
+        category: product.category?.name
+      }
+    });
+  }, [product?.id]);
+  useEffect(() => {
+    if (!product) return;
+    fetchProcessorConfig().then((c) => {
+      if (c) setProcessorConfig(c);
+    });
+  }, [product?.id]);
+  useEffect(() => {
+    if (!buyButtonRef.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => setShowStickyBar(!entry.isIntersecting),
+      { threshold: 0 }
+    );
+    observer.observe(buyButtonRef.current);
+    return () => observer.disconnect();
+  }, [product?.id, checkoutState]);
+  useEffect(() => {
+    if (checkoutState === "browsing") return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") setCheckoutState("browsing");
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [checkoutState]);
+  useEffect(() => {
+    if (checkoutState !== "browsing" && checkoutState !== "success") {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [checkoutState]);
+  const allImages = useMemo(() => {
+    if (!product) return [];
+    return [
+      product.featured_image_url,
+      ...product.gallery_images || [],
+      ...product.variants?.map((v) => v.image_url).filter(Boolean) || []
+    ].filter(Boolean);
+  }, [product]);
+  if (!product) {
+    if (loading) {
+      return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
+        /* @__PURE__ */ jsx("style", { children: STYLE_BLOCK }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", minHeight: 400 }, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 48,
+              height: 48,
+              border: "3px solid var(--commerce-border)",
+              borderTopColor: "var(--commerce-accent)",
+              borderRadius: "50%",
+              animation: "skc-spin 1s linear infinite"
+            }
+          }
+        ) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
+      /* @__PURE__ */ jsx("style", { children: STYLE_BLOCK }),
+      /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary)" }, children: [
+        /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text)" }, children: "Product Not Found" }),
+        /* @__PURE__ */ jsx("p", { style: { marginTop: "0.5rem" }, children: "The product you are looking for does not exist or has been removed." })
+      ] })
+    ] });
+  }
+  const currentPrice = selectedVariant?.price ?? product.price ?? 0;
+  const compareAtPrice = product.compare_at_price;
+  const hasDiscount = compareAtPrice != null && compareAtPrice > currentPrice;
+  const discountPercent = hasDiscount ? Math.round((compareAtPrice - currentPrice) / compareAtPrice * 100) : 0;
+  const inventoryCount = selectedVariant?.inventory_count ?? product.inventory_count;
+  const isOutOfStock = product.track_inventory && inventoryCount != null && inventoryCount <= 0;
+  const isLowStock = product.track_inventory && inventoryCount != null && inventoryCount > 0 && inventoryCount <= 5;
+  const needsVariantSelection = (product.is_clothing || (product.variants?.length ?? 0) > 1) && !selectedVariant;
+  const isEvent = product.type === "event";
+  const isService = product.type === "service";
+  const hasExternalUrl = !!product.external_url;
+  const isFree = !product.price || product.price === 0;
+  const needsShipping = !!processorConfig?.shipping_enabled && product.type === "product";
+  const schedule = product.schedules?.[0] || product.next_schedule;
+  const checkoutSteps = useMemo(() => {
+    const steps = ["customer-info"];
+    if (needsShipping) {
+      steps.push("shipping", "rates");
+    }
+    if (!isFree) {
+      steps.push("payment");
+    }
+    return steps;
+  }, [needsShipping, isFree]);
+  const handleVariantChange = (variant) => {
+    setSelectedVariant(variant);
+    if (variant.image_url) {
+      const idx = allImages.indexOf(variant.image_url);
+      if (idx >= 0) setSelectedImage(idx);
+    }
+  };
+  const handleAddToCart = () => {
+    analytics?.trackEvent({
+      name: "add_to_cart",
+      properties: {
+        offering_id: product.id,
+        variant_id: selectedVariant?.id,
+        quantity,
+        price: currentPrice,
+        name: product.name
+      }
+    });
+    onAddToCart?.(product, selectedVariant, quantity);
+  };
+  const handleBuyNow = () => {
+    if (hasExternalUrl) {
+      window.open(product.external_url, "_blank", "noopener");
+      return;
+    }
+    analytics?.trackEvent({
+      name: "begin_checkout",
+      properties: {
+        offering_id: product.id,
+        variant_id: selectedVariant?.id,
+        quantity,
+        price: currentPrice,
+        name: product.name
+      }
+    });
+    setCheckoutError(null);
+    setCheckoutState("customer-info");
+  };
+  const handleCheckoutBack = () => {
+    const currentIdx = checkoutSteps.indexOf(checkoutState);
+    if (currentIdx <= 0) {
+      setCheckoutState("browsing");
+    } else {
+      setCheckoutState(checkoutSteps[currentIdx - 1]);
+    }
+  };
+  const handleCustomerNext = async () => {
+    if (isFree && isEvent && schedule) {
+      setCheckoutState("processing");
+      try {
+        const result = await registerForEvent(product.id, schedule.id, customer);
+        if (result.success) {
+          setCheckoutResult(result);
+          setCheckoutState("success");
+          onCheckoutSuccess?.(result);
+        } else {
+          setCheckoutError(result.error || "Registration failed");
+          setCheckoutState("customer-info");
+        }
+      } catch (err) {
+        setCheckoutError(err?.message || "Registration failed");
+        setCheckoutState("customer-info");
+      }
+      return;
+    }
+    if (needsShipping) {
+      setCheckoutState("shipping");
+    } else if (!isFree) {
+      setCheckoutState("payment");
+    } else {
+      setCheckoutState("processing");
+      try {
+        const result = await createCheckoutSession({
+          offeringId: product.id,
+          variantId: selectedVariant?.id,
+          quantity,
+          customer,
+          successUrl: successUrl || window.location.href,
+          cancelUrl: cancelUrl || window.location.href
+        });
+        if (result.success) {
+          setCheckoutResult(result);
+          setCheckoutState("success");
+          onCheckoutSuccess?.(result);
+        } else {
+          setCheckoutError(result.error || "Checkout failed");
+          setCheckoutState("customer-info");
+        }
+      } catch (err) {
+        setCheckoutError(err?.message || "Checkout failed");
+        setCheckoutState("customer-info");
+      }
+    }
+  };
+  const handleShippingNext = async () => {
+    setRatesLoading(true);
+    setCheckoutState("rates");
+    try {
+      const rates = await fetchShippingRates(shippingAddress, [
+        { offering_id: product.id, quantity }
+      ]);
+      setShippingRates(rates);
+      if (rates.length) setSelectedShippingRate(rates[0]);
+    } catch {
+      setShippingRates([]);
+    } finally {
+      setRatesLoading(false);
+    }
+  };
+  const handleRatesNext = () => {
+    if (!isFree) {
+      setCheckoutState("payment");
+    }
+  };
+  const handlePaymentSuccess = (result) => {
+    setCheckoutResult(result);
+    setCheckoutState("success");
+    analytics?.trackEvent({
+      name: "purchase",
+      properties: {
+        offering_id: product.id,
+        variant_id: selectedVariant?.id,
+        quantity,
+        price: currentPrice,
+        name: product.name,
+        sale_id: result.sale_id
+      }
+    });
+    onCheckoutSuccess?.(result);
+  };
+  const handlePaymentError = (error) => {
+    setCheckoutError(error);
+    onCheckoutError?.(error);
+  };
+  const handleCloseCheckout = () => {
+    setCheckoutState("browsing");
+    if (checkoutResult) {
+      setCustomer({ name: "", email: "", phone: "" });
+      setShippingAddress({ street1: "", city: "", state: "", zip: "", country: "US" });
+      setShippingRates([]);
+      setSelectedShippingRate(null);
+      setCheckoutResult(null);
+    }
+  };
+  const ctaLabel = useMemo(() => {
+    if (isOutOfStock) return "Out of Stock";
+    if (needsVariantSelection) return product.is_clothing ? "Select Size" : "Select Option";
+    if (hasExternalUrl) return product.type === "event" ? "Get Tickets" : "Learn More";
+    if (isEvent) return isFree ? "Register Free" : "Get Tickets";
+    if (isService) return "Book Now";
+    return isFree ? "Get It Free" : "Buy Now";
+  }, [isOutOfStock, needsVariantSelection, hasExternalUrl, isEvent, isService, isFree, product.is_clothing]);
+  return /* @__PURE__ */ jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
+    /* @__PURE__ */ jsx("style", { children: STYLE_BLOCK }),
+    /* @__PURE__ */ jsxs("div", { className: `skc-detail-layout${layout === "stacked" ? " skc-stacked" : ""}`, children: [
+      showGallery && allImages.length > 0 && /* @__PURE__ */ jsx(
+        ProductGallery,
+        {
+          images: allImages,
+          productName: product.name,
+          selectedIndex: selectedImage,
+          onSelect: setSelectedImage
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        product.category && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              color: "var(--commerce-accent)",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              marginBottom: "0.375rem"
+            },
+            children: product.category.name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "h1",
+          {
+            style: {
+              margin: 0,
+              fontSize: "1.875rem",
+              fontWeight: 700,
+              color: "var(--commerce-text)",
+              lineHeight: 1.2
+            },
+            children: product.name
+          }
+        ),
+        product.short_description && /* @__PURE__ */ jsx(
+          "p",
+          {
+            style: {
+              marginTop: "0.625rem",
+              marginBottom: 0,
+              fontSize: "1rem",
+              color: "var(--commerce-text-secondary)",
+              lineHeight: 1.6
+            },
+            children: product.short_description
           }
-        }
-      ) }),
-      allImages.length > 1 && /* @__PURE__ */ jsx("div", { className: "site-kit-product-detail__thumbnails", style: {
-        display: "flex",
-        gap: "0.5rem",
-        marginTop: "0.75rem",
-        overflowX: "auto"
-      }, children: allImages.map((img, idx) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: () => setSelectedImage(idx),
-          style: {
-            flex: "0 0 auto",
-            width: "64px",
-            height: "64px",
-            borderRadius: "8px",
-            overflow: "hidden",
-            border: idx === selectedImage ? "2px solid #2563eb" : "2px solid transparent",
-            padding: 0,
-            cursor: "pointer",
-            backgroundColor: "#f9fafb"
-          },
-          children: /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: img,
-              alt: `${product.name} ${idx + 1}`,
-              style: {
-                width: "100%",
-                height: "100%",
-                objectFit: "cover"
-              }
-            }
-          )
-        },
-        idx
-      )) })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__info", children: [
-      product.category && /* @__PURE__ */ jsx("div", { className: "site-kit-product-detail__category", style: {
-        fontSize: "0.875rem",
-        color: "#6b7280",
-        marginBottom: "0.5rem",
-        textTransform: "uppercase",
-        letterSpacing: "0.05em"
-      }, children: product.category.name }),
-      /* @__PURE__ */ jsx("h1", { className: "site-kit-product-detail__title", style: {
-        margin: 0,
-        fontSize: "2rem",
-        fontWeight: 700,
-        color: "#111827",
-        lineHeight: 1.2
-      }, children: product.name }),
-      product.short_description && /* @__PURE__ */ jsx("p", { className: "site-kit-product-detail__short-description", style: {
-        marginTop: "0.75rem",
-        fontSize: "1rem",
-        color: "#4b5563",
-        lineHeight: 1.6
-      }, children: product.short_description }),
-      product.price_is_public && currentPrice !== void 0 && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__price", style: {
-        marginTop: "1rem",
-        display: "flex",
-        alignItems: "baseline",
-        gap: "0.75rem"
-      }, children: [
-        /* @__PURE__ */ jsx("span", { style: {
-          fontSize: "1.75rem",
-          fontWeight: 700,
-          color: hasDiscount ? "#dc2626" : "#111827"
-        }, children: formatPrice(currentPrice, product.currency) }),
-        hasDiscount && /* @__PURE__ */ jsx("span", { style: {
-          fontSize: "1.25rem",
-          color: "#9ca3af",
-          textDecoration: "line-through"
-        }, children: formatPrice(compareAtPrice, product.currency) })
-      ] }),
-      product.track_inventory && /* @__PURE__ */ jsx("div", { className: "site-kit-product-detail__stock", style: {
-        marginTop: "0.75rem",
-        fontSize: "0.875rem",
-        fontWeight: 500
-      }, children: isOutOfStock ? /* @__PURE__ */ jsx("span", { style: { color: "#dc2626" }, children: "Out of Stock" }) : isLowStock ? /* @__PURE__ */ jsxs("span", { style: { color: "#f59e0b" }, children: [
-        "Only ",
-        inventoryCount,
-        " left!"
-      ] }) : /* @__PURE__ */ jsx("span", { style: { color: "#10b981" }, children: "In Stock" }) }),
-      showVariants && product.variants && (product.variants.length > 1 || product.is_clothing) && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__variants", style: { marginTop: "1.5rem" }, children: [
-        /* @__PURE__ */ jsx("label", { style: {
-          display: "block",
-          fontSize: "0.875rem",
-          fontWeight: 600,
-          color: "#374151",
-          marginBottom: "0.5rem"
-        }, children: product.is_clothing ? "Size" : "Options" }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" }, children: product.variants.map((variant) => {
-          const variantOutOfStock = variant.track_inventory !== false && (variant.inventory_count ?? 0) <= 0;
-          return /* @__PURE__ */ jsxs(
+        ),
+        product.price_is_public && currentPrice != null && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "1rem",
+              display: "flex",
+              alignItems: "center",
+              gap: "0.75rem",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "1.75rem",
+                    fontWeight: 700,
+                    color: hasDiscount ? "var(--commerce-danger)" : "var(--commerce-text)"
+                  },
+                  children: formatPrice(currentPrice, product.currency)
+                }
+              ),
+              hasDiscount && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "1.125rem",
+                      color: "var(--commerce-text-muted)",
+                      textDecoration: "line-through"
+                    },
+                    children: formatPrice(compareAtPrice, product.currency)
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "0.75rem",
+                      fontWeight: 700,
+                      color: "var(--commerce-accent-text)",
+                      background: "var(--commerce-danger)",
+                      padding: "2px 8px",
+                      borderRadius: 4
+                    },
+                    children: [
+                      "-",
+                      discountPercent,
+                      "%"
+                    ]
+                  }
+                )
+              ] }),
+              product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted)" }, children: [
+                "/ ",
+                product.billing_period
+              ] })
+            ]
+          }
+        ),
+        product.track_inventory && /* @__PURE__ */ jsx("div", { style: { marginTop: "0.75rem", display: "flex", alignItems: "center", gap: 6 }, children: isOutOfStock ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              color: "var(--commerce-danger)",
+              display: "flex",
+              alignItems: "center",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx(IconAlert, {}),
+              " Out of Stock"
+            ]
+          }
+        ) : isLowStock ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "skc-pulse",
+            style: {
+              fontSize: "0.8125rem",
+              fontWeight: 600,
+              color: "var(--commerce-warning)",
+              display: "flex",
+              alignItems: "center",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx(IconAlert, {}),
+              " Only ",
+              inventoryCount,
+              " left!"
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: "0.8125rem",
+              fontWeight: 500,
+              color: "var(--commerce-success)",
+              display: "flex",
+              alignItems: "center",
+              gap: 4
+            },
+            children: [
+              /* @__PURE__ */ jsx(IconCheck, {}),
+              " In Stock"
+            ]
+          }
+        ) }),
+        isEvent && schedule && /* @__PURE__ */ jsx(EventInfoBlock, { product, schedule }),
+        showVariants && product.variants && (product.variants.length > 1 || product.is_clothing) && /* @__PURE__ */ jsx(
+          VariantSelector,
+          {
+            variants: product.variants,
+            selected: selectedVariant,
+            isClothing: !!product.is_clothing,
+            showInventory,
+            onSelect: handleVariantChange
+          }
+        ),
+        showSizeChart && product.is_clothing && product.size_chart && /* @__PURE__ */ jsx("div", { style: { marginTop: "0.625rem" }, children: /* @__PURE__ */ jsx(
+          SizeChart,
+          {
+            chart: product.size_chart,
+            selectedSize: selectedVariant?.options?.["Size"]
+          }
+        ) }),
+        showQuantity && !isOutOfStock && !isEvent && !isService && /* @__PURE__ */ jsx(
+          QuantitySelector,
+          {
+            quantity,
+            max: product.track_inventory && inventoryCount != null ? inventoryCount : 99,
+            onChange: setQuantity
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.625rem" }, children: [
+          /* @__PURE__ */ jsxs(
             "button",
             {
-              onClick: () => !variantOutOfStock && handleVariantChange(variant),
-              disabled: variantOutOfStock,
-              style: {
-                padding: "0.5rem 1rem",
-                borderRadius: "8px",
-                border: selectedVariant?.id === variant.id ? "2px solid #2563eb" : "1px solid #d1d5db",
-                backgroundColor: selectedVariant?.id === variant.id ? "#eff6ff" : "white",
-                color: variantOutOfStock ? "#9ca3af" : "#374151",
-                fontSize: "0.875rem",
-                fontWeight: 500,
-                cursor: variantOutOfStock ? "not-allowed" : "pointer",
-                opacity: variantOutOfStock ? 0.6 : 1,
-                transition: "all 0.15s ease"
-              },
+              ref: buyButtonRef,
+              className: "skc-btn-primary",
+              onClick: handleBuyNow,
+              disabled: isOutOfStock || needsVariantSelection,
+              "aria-label": ctaLabel,
               children: [
-                variant.options?.Size || variant.name,
-                variantOutOfStock && " (Out of stock)"
+                hasExternalUrl && /* @__PURE__ */ jsx(IconExternalLink, {}),
+                ctaLabel
               ]
-            },
-            variant.id
-          );
-        }) })
-      ] }),
-      product.is_clothing && product.size_chart && /* @__PURE__ */ jsx("div", { style: { marginTop: "0.75rem" }, children: /* @__PURE__ */ jsx(
-        SizeChart,
-        {
-          chart: product.size_chart,
-          selectedSize: selectedVariant?.options?.["Size"]
-        }
-      ) }),
-      showQuantity && !isOutOfStock && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__quantity", style: { marginTop: "1.5rem" }, children: [
-        /* @__PURE__ */ jsx("label", { style: {
-          display: "block",
-          fontSize: "0.875rem",
-          fontWeight: 600,
-          color: "#374151",
-          marginBottom: "0.5rem"
-        }, children: "Quantity" }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setQuantity(Math.max(1, quantity - 1)),
-              disabled: quantity <= 1,
-              style: {
-                width: "40px",
-                height: "40px",
-                borderRadius: "8px",
-                border: "1px solid #d1d5db",
-                backgroundColor: "white",
-                fontSize: "1.25rem",
-                cursor: quantity <= 1 ? "not-allowed" : "pointer",
-                opacity: quantity <= 1 ? 0.5 : 1
-              },
-              children: "\u2212"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "number",
-              min: "1",
-              max: inventoryCount ?? 99,
-              value: quantity,
-              onChange: (e) => setQuantity(Math.max(1, parseInt(e.target.value) || 1)),
-              style: {
-                width: "60px",
-                height: "40px",
-                textAlign: "center",
-                borderRadius: "8px",
-                border: "1px solid #d1d5db",
-                fontSize: "1rem"
-              }
             }
           ),
-          /* @__PURE__ */ jsx(
+          onAddToCart && !isEvent && !isService && !hasExternalUrl && /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setQuantity(quantity + 1),
-              disabled: product.track_inventory && inventoryCount !== void 0 && quantity >= inventoryCount,
-              style: {
-                width: "40px",
-                height: "40px",
-                borderRadius: "8px",
-                border: "1px solid #d1d5db",
-                backgroundColor: "white",
-                fontSize: "1.25rem",
-                cursor: "pointer"
-              },
-              children: "+"
+              className: "skc-btn-secondary",
+              onClick: handleAddToCart,
+              disabled: isOutOfStock || needsVariantSelection,
+              children: "Add to Cart"
             }
           )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__actions", style: {
-        marginTop: "1.5rem",
-        display: "flex",
-        flexDirection: "column",
-        gap: "0.75rem"
-      }, children: [
-        showBuyNow && /* @__PURE__ */ jsx(
-          "button",
+        ] }),
+        checkoutError && checkoutState === "browsing" && /* @__PURE__ */ jsxs(
+          "div",
           {
-            onClick: handleBuyNow,
-            disabled: isOutOfStock || checkingOut || needsVariantSelection,
-            className: "site-kit-product-detail__buy-now",
             style: {
-              padding: "1rem 2rem",
-              borderRadius: "8px",
-              border: "none",
-              backgroundColor: isOutOfStock ? "#d1d5db" : "#2563eb",
-              color: "white",
-              fontSize: "1rem",
-              fontWeight: 600,
-              cursor: isOutOfStock ? "not-allowed" : "pointer",
-              transition: "all 0.15s ease"
+              marginTop: "0.75rem",
+              padding: "0.75rem",
+              background: "#fef2f2",
+              border: "1px solid #fecaca",
+              borderRadius: "var(--commerce-radius-sm)",
+              color: "var(--commerce-danger)",
+              fontSize: "0.875rem",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: 8
             },
-            children: checkingOut ? "Processing..." : needsVariantSelection ? "Select Size" : isOutOfStock ? "Out of Stock" : "Buy Now"
+            children: [
+              /* @__PURE__ */ jsx(IconAlert, {}),
+              /* @__PURE__ */ jsx("span", { children: checkoutError })
+            ]
           }
         ),
-        showAddToCart && onAddToCart && /* @__PURE__ */ jsx(
-          "button",
+        showTrustBadges && /* @__PURE__ */ jsx(TrustBadges, { badges: trustBadges }),
+        /* @__PURE__ */ jsx(
+          ProductTabs,
           {
-            onClick: handleAddToCart,
-            disabled: isOutOfStock || needsVariantSelection,
-            className: "site-kit-product-detail__add-to-cart",
-            style: {
-              padding: "1rem 2rem",
-              borderRadius: "8px",
-              border: "2px solid #2563eb",
-              backgroundColor: "white",
-              color: "#2563eb",
-              fontSize: "1rem",
-              fontWeight: 600,
-              cursor: isOutOfStock || needsVariantSelection ? "not-allowed" : "pointer",
-              transition: "all 0.15s ease"
-            },
-            children: needsVariantSelection ? "Select Size" : isOutOfStock ? "Out of Stock" : "Add to Cart"
+            features: product.features,
+            specifications: product.specifications,
+            description: product.long_description,
+            showFeatures,
+            showSpecifications,
+            showDescription
           }
         )
-      ] }),
-      showFeatures && product.features && product.features.length > 0 && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__features", style: { marginTop: "2rem" }, children: [
-        /* @__PURE__ */ jsx("h3", { style: {
-          fontSize: "1rem",
-          fontWeight: 600,
-          color: "#111827",
-          marginBottom: "0.75rem"
-        }, children: "Features" }),
-        /* @__PURE__ */ jsx("ul", { style: {
-          margin: 0,
-          paddingLeft: "1.25rem",
-          display: "flex",
-          flexDirection: "column",
-          gap: "0.5rem"
-        }, children: product.features.map((feature, idx) => /* @__PURE__ */ jsx("li", { style: { color: "#4b5563", fontSize: "0.9375rem" }, children: feature }, idx)) })
-      ] }),
-      showSpecifications && product.specifications && Object.keys(product.specifications).length > 0 && /* @__PURE__ */ jsxs("div", { className: "site-kit-product-detail__specifications", style: { marginTop: "2rem" }, children: [
-        /* @__PURE__ */ jsx("h3", { style: {
-          fontSize: "1rem",
-          fontWeight: 600,
-          color: "#111827",
-          marginBottom: "0.75rem"
-        }, children: "Specifications" }),
-        /* @__PURE__ */ jsx("dl", { style: {
-          margin: 0,
-          display: "grid",
-          gridTemplateColumns: "auto 1fr",
-          gap: "0.5rem 1rem"
-        }, children: Object.entries(product.specifications).map(([key, value]) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
-          /* @__PURE__ */ jsx("dt", { style: { color: "#6b7280", fontSize: "0.875rem" }, children: key }),
-          /* @__PURE__ */ jsx("dd", { style: { margin: 0, color: "#111827", fontSize: "0.875rem" }, children: value })
-        ] }, key)) })
       ] })
     ] }),
-    product.long_description && /* @__PURE__ */ jsxs(
+    showStickyBar && checkoutState === "browsing" && !isOutOfStock && !needsVariantSelection && /* @__PURE__ */ jsxs("div", { className: "skc-sticky-bar", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem", color: "var(--commerce-text)", lineHeight: 1.2 }, children: product.name }),
+        product.price_is_public && currentPrice != null && /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger)" : "var(--commerce-text)" }, children: formatPrice(currentPrice, product.currency) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "skc-btn-primary",
+          onClick: handleBuyNow,
+          style: { width: "auto", padding: "0.625rem 1.5rem", fontSize: "0.875rem" },
+          children: ctaLabel
+        }
+      )
+    ] }),
+    checkoutState !== "browsing" && /* @__PURE__ */ jsx(
       "div",
       {
-        className: "site-kit-product-detail__description",
-        style: {
-          gridColumn: "1 / -1",
-          marginTop: "2rem",
-          padding: "2rem",
-          backgroundColor: "#f9fafb",
-          borderRadius: "12px"
+        className: "skc-checkout-overlay",
+        onClick: (e) => {
+          if (e.target === e.currentTarget && checkoutState !== "processing") {
+            handleCloseCheckout();
+          }
         },
-        children: [
-          /* @__PURE__ */ jsx("h2", { style: {
-            fontSize: "1.25rem",
-            fontWeight: 600,
-            color: "#111827",
-            marginBottom: "1rem"
-          }, children: "About This Product" }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              style: { color: "#4b5563", lineHeight: 1.7 },
-              dangerouslySetInnerHTML: { __html: product.long_description }
-            }
-          )
-        ]
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Checkout",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "skc-checkout-panel",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              checkoutState !== "processing" && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleCloseCheckout,
+                  "aria-label": "Close checkout",
+                  style: {
+                    position: "absolute",
+                    top: 12,
+                    right: 12,
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    border: "none",
+                    background: "var(--commerce-surface)",
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 10,
+                    color: "var(--commerce-text-secondary)"
+                  },
+                  children: /* @__PURE__ */ jsx(IconX, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { padding: "1.5rem" }, children: [
+                checkoutState !== "success" && checkoutState !== "processing" && /* @__PURE__ */ jsx(CheckoutStepIndicator, { current: checkoutState, steps: checkoutSteps }),
+                checkoutState === "processing" && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "3rem 0" }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 48,
+                        height: 48,
+                        border: "3px solid var(--commerce-border)",
+                        borderTopColor: "var(--commerce-accent)",
+                        borderRadius: "50%",
+                        animation: "skc-spin 0.8s linear infinite",
+                        margin: "0 auto 1.5rem"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
+                ] }),
+                checkoutState === "success" && checkoutResult && /* @__PURE__ */ jsx(SuccessStep, { result: checkoutResult, product, onClose: handleCloseCheckout }),
+                checkoutState === "customer-info" && /* @__PURE__ */ jsx(
+                  CustomerInfoStep,
+                  {
+                    customer,
+                    onChange: setCustomer,
+                    onNext: handleCustomerNext,
+                    onBack: handleCloseCheckout
+                  }
+                ),
+                checkoutState === "shipping" && /* @__PURE__ */ jsx(
+                  ShippingAddressStep,
+                  {
+                    address: shippingAddress,
+                    onChange: setShippingAddress,
+                    onNext: handleShippingNext,
+                    onBack: handleCheckoutBack,
+                    loading: ratesLoading
+                  }
+                ),
+                checkoutState === "rates" && /* @__PURE__ */ jsx(
+                  ShippingRatesStep,
+                  {
+                    rates: shippingRates,
+                    selected: selectedShippingRate,
+                    onSelect: setSelectedShippingRate,
+                    onNext: handleRatesNext,
+                    onBack: handleCheckoutBack,
+                    loading: ratesLoading,
+                    currency: product.currency
+                  }
+                ),
+                checkoutState === "payment" && /* @__PURE__ */ jsx(
+                  PaymentStep,
+                  {
+                    processor: processorConfig?.processor || null,
+                    config: processorConfig,
+                    product,
+                    variant: selectedVariant,
+                    quantity,
+                    customer,
+                    shippingRate: selectedShippingRate,
+                    shippingAddress: needsShipping ? shippingAddress : null,
+                    needsShipping,
+                    onBack: handleCheckoutBack,
+                    onSuccess: handlePaymentSuccess,
+                    onError: handlePaymentError,
+                    onProcessing: (p) => {
+                      if (p) setCheckoutState("processing");
+                    },
+                    successUrl,
+                    cancelUrl
+                  }
+                ),
+                checkoutError && checkoutState !== "payment" && checkoutState !== "processing" && checkoutState !== "success" && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      marginTop: "0.75rem",
+                      padding: "0.75rem",
+                      background: "#fef2f2",
+                      border: "1px solid #fecaca",
+                      borderRadius: "var(--commerce-radius-sm)",
+                      color: "var(--commerce-danger)",
+                      fontSize: "0.875rem",
+                      display: "flex",
+                      alignItems: "flex-start",
+                      gap: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(IconAlert, {}),
+                      /* @__PURE__ */ jsx("span", { children: checkoutError })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        )
       }
     )
   ] });
@@ -2188,8 +4145,6 @@ function ProductPage({
       ProductDetail,
       {
         product,
-        showAddToCart: !!onAddToCart,
-        showBuyNow: true,
         showQuantity: true,
         showVariants: true,
         showGallery: true,
@@ -3400,7 +5355,7 @@ function CalendarView({
     }, children: "Loading..." })
   ] });
 }
-function loadSquareSDK(environment) {
+function loadSquareSDK2(environment) {
   return new Promise((resolve, reject) => {
     if (typeof window === "undefined") return reject(new Error("No window"));
     if (window.Square) return resolve();
@@ -3447,7 +5402,7 @@ function EventModal({
       if (config?.processor) setProcessor(config.processor);
       if (config?.processor === "square" && config.squareAppId && config.squareLocationId) {
         try {
-          await loadSquareSDK(config.squareEnvironment || "production");
+          await loadSquareSDK2(config.squareEnvironment || "production");
           const Square = window.Square;
           const payments = Square.payments(config.squareAppId, config.squareLocationId);
           const card = await payments.card({
@@ -4110,8 +6065,8 @@ function EventsWidget({
       return;
     }
     async function loadEvents() {
-      const apiUrl = getApiUrl();
-      const apiKey = getApiKey();
+      const apiUrl = getApiUrl2();
+      const apiKey = getApiKey2();
       if (!apiKey) {
         if (retryCount < 3) {
           setTimeout(() => setRetryCount((c) => c + 1), 100);
@@ -4586,19 +6541,19 @@ function EventsWidget({
     )
   ] });
 }
-function getApiUrl() {
+function getApiUrl2() {
   if (typeof window !== "undefined") {
     return window.__SITE_KIT_API_URL__ || "https://api.sonor.io";
   }
   return "https://api.sonor.io";
 }
-function getApiKey() {
+function getApiKey2() {
   if (typeof window !== "undefined") {
     return window.__SITE_KIT_API_KEY__ || "";
   }
   return "";
 }
 
-export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress };
-//# sourceMappingURL=chunk-IZZ7XJYN.mjs.map
-//# sourceMappingURL=chunk-IZZ7XJYN.mjs.map
+export { CalendarView, CheckoutForm, EventCalendar, EventEmbed, EventModal, EventTile, EventsWidget, OfferingCard, OfferingList, ProductDetail, ProductEmbed, ProductGrid, ProductPage, RegistrationForm, SizeChart, UpcomingEvents, createCheckoutSession, createPaymentIntent, fetchActiveProcessor, fetchCategories, fetchLatestOffering, fetchNextEvent, fetchOffering, fetchOfferings, fetchProcessorConfig, fetchProductBySlug, fetchProducts, fetchProductsPublic, fetchServices, fetchShippingRates, fetchUpcomingEvents, formatDate, formatDateRange, formatDateTime, formatPrice, formatTime, getOfferingUrl, getRelativeTimeUntil, getSpotsRemaining, isEventSoldOut, registerForEvent, useEventModal, validateAddress };
+//# sourceMappingURL=chunk-ULAQCW4X.mjs.map
+//# sourceMappingURL=chunk-ULAQCW4X.mjs.map