@sonordev/site-kit 1.4.2 → 1.4.4

package/dist/{chunk-B46F5RXP.js → chunk-BYXMT7IG.js}

@@ -1356,25 +1356,18 @@ var STYLE_BLOCK = `
 }
 
 .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;
 }
 
+/*
+ * Commerce CSS custom properties are NOT set here \u2014 they inherit from the host site's :root.
+ * If the host site does not define them, the inline var() fallbacks in each usage provide defaults.
+ * Example: color: var(--commerce-text, #111827) \u2014 uses #111827 if --commerce-text is not defined.
+ *
+ * Host sites should define these in their CSS:
+ *   :root { --commerce-accent: #d9b338; --commerce-surface: #0f0f17; ... }
+ */
+
 .skc-detail *, .skc-detail *::before, .skc-detail *::after {
   box-sizing: border-box;
 }
@@ -1384,6 +1377,9 @@ var STYLE_BLOCK = `
   grid-template-columns: 1fr 1fr;
   gap: 2.5rem;
   align-items: start;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1.5rem;
 }
 
 @media (max-width: 768px) {
@@ -1405,8 +1401,8 @@ var STYLE_BLOCK = `
 .skc-gallery-main {
   position: relative;
   overflow: hidden;
-  border-radius: var(--commerce-radius);
-  background: var(--commerce-surface);
+  border-radius: var(--commerce-radius, 12px);
+  background: var(--commerce-surface, #f9fafb);
   cursor: crosshair;
   aspect-ratio: 1;
 }
@@ -1430,19 +1426,19 @@ var STYLE_BLOCK = `
   flex: 0 0 auto;
   width: 64px;
   height: 64px;
-  border-radius: var(--commerce-radius-sm);
+  border-radius: var(--commerce-radius-sm, 8px);
   overflow: hidden;
   border: 2px solid transparent;
   padding: 0;
   cursor: pointer;
-  background: var(--commerce-surface);
+  background: var(--commerce-surface, #f9fafb);
   transition: border-color 0.15s ease;
 }
 .skc-gallery-thumb:hover {
-  border-color: var(--commerce-text-muted);
+  border-color: var(--commerce-text-muted, #9ca3af);
 }
 .skc-gallery-thumb.skc-active {
-  border-color: var(--commerce-accent);
+  border-color: var(--commerce-accent, #2563eb);
 }
 .skc-gallery-thumb img {
   width: 100%;
@@ -1458,7 +1454,7 @@ var STYLE_BLOCK = `
   right: 0;
   z-index: 999;
   background: white;
-  border-top: 1px solid var(--commerce-border);
+  border-top: 1px solid var(--commerce-border, #e5e7eb);
   padding: 0.75rem 1rem;
   display: flex;
   align-items: center;
@@ -1474,7 +1470,7 @@ var STYLE_BLOCK = `
 /* Tabs */
 .skc-tabs-list {
   display: flex;
-  border-bottom: 1px solid var(--commerce-border);
+  border-bottom: 1px solid var(--commerce-border, #e5e7eb);
   gap: 0;
   overflow-x: auto;
   scrollbar-width: none;
@@ -1486,18 +1482,18 @@ var STYLE_BLOCK = `
   background: none;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--commerce-text-secondary);
+  color: var(--commerce-text-secondary, #6b7280);
   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);
+  color: var(--commerce-text, #111827);
 }
 .skc-tab-btn.skc-active {
-  color: var(--commerce-accent);
-  border-bottom-color: var(--commerce-accent);
+  color: var(--commerce-accent, #2563eb);
+  border-bottom-color: var(--commerce-accent, #2563eb);
 }
 
 /* Checkout overlay */
@@ -1520,7 +1516,7 @@ var STYLE_BLOCK = `
   max-height: 90vh;
   overflow-y: auto;
   background: white;
-  border-radius: calc(var(--commerce-radius) + 4px);
+  border-radius: calc(var(--commerce-radius, 12px) + 4px);
   box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
   animation: skc-scaleIn 0.25s ease-out;
 }
@@ -1529,20 +1525,20 @@ var STYLE_BLOCK = `
 .skc-input {
   width: 100%;
   padding: 0.625rem 0.75rem;
-  border-radius: var(--commerce-radius-sm);
-  border: 1px solid var(--commerce-border);
+  border-radius: var(--commerce-radius-sm, 8px);
+  border: 1px solid var(--commerce-border, #e5e7eb);
   font-size: 0.9375rem;
-  color: var(--commerce-text);
+  color: var(--commerce-text, #111827);
   background: white;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   outline: none;
 }
 .skc-input:focus {
-  border-color: var(--commerce-accent);
+  border-color: var(--commerce-accent, #2563eb);
   box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
 }
 .skc-input::placeholder {
-  color: var(--commerce-text-muted);
+  color: var(--commerce-text-muted, #9ca3af);
 }
 
 /* Primary button */
@@ -1553,17 +1549,17 @@ var STYLE_BLOCK = `
   gap: 0.5rem;
   width: 100%;
   padding: 0.875rem 1.5rem;
-  border-radius: var(--commerce-radius-sm);
+  border-radius: var(--commerce-radius-sm, 8px);
   border: none;
-  background: var(--commerce-accent);
-  color: var(--commerce-accent-text);
+  background: var(--commerce-accent, #2563eb);
+  color: var(--commerce-accent-text, #ffffff);
   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);
+  background: var(--commerce-accent-hover, #1d4ed8);
 }
 .skc-btn-primary:active:not(:disabled) {
   transform: scale(0.98);
@@ -1581,10 +1577,10 @@ var STYLE_BLOCK = `
   gap: 0.5rem;
   width: 100%;
   padding: 0.875rem 1.5rem;
-  border-radius: var(--commerce-radius-sm);
-  border: 2px solid var(--commerce-accent);
+  border-radius: var(--commerce-radius-sm, 8px);
+  border: 2px solid var(--commerce-accent, #2563eb);
   background: transparent;
-  color: var(--commerce-accent);
+  color: var(--commerce-accent, #2563eb);
   font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
@@ -1615,24 +1611,24 @@ var STYLE_BLOCK = `
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: var(--commerce-border);
+  background: var(--commerce-border, #e5e7eb);
   transition: background 0.2s ease, transform 0.2s ease;
 }
 .skc-step-dot.skc-active {
-  background: var(--commerce-accent);
+  background: var(--commerce-accent, #2563eb);
   transform: scale(1.3);
 }
 .skc-step-dot.skc-done {
-  background: var(--commerce-success);
+  background: var(--commerce-success, #059669);
 }
 .skc-step-connector {
   width: 24px;
   height: 2px;
-  background: var(--commerce-border);
+  background: var(--commerce-border, #e5e7eb);
   transition: background 0.2s ease;
 }
 .skc-step-connector.skc-done {
-  background: var(--commerce-success);
+  background: var(--commerce-success, #059669);
 }
 `;
 function loadSquareSDK(env) {
@@ -1853,11 +1849,11 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
         style: {
           fontSize: "0.875rem",
           fontWeight: 600,
-          color: "var(--commerce-text)"
+          color: "var(--commerce-text, #111827)"
         },
         children: [
           label,
-          selected && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary)", marginLeft: 6 }, children: [
+          selected && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary, #6b7280)", marginLeft: 6 }, children: [
             "\u2014 ",
             selected.options?.Size || selected.name
           ] })
@@ -1879,10 +1875,10 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
           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)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : "1px solid var(--commerce-border, #e5e7eb)",
+            backgroundColor: isSelected ? "color-mix(in srgb, var(--commerce-accent, #2563eb) 8%, transparent)" : "var(--commerce-surface, #f9fafb)",
+            color: variantOutOfStock ? "var(--commerce-text-muted, #9ca3af)" : "var(--commerce-text, #111827)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: variantOutOfStock ? "not-allowed" : "pointer",
@@ -1902,8 +1898,8 @@ function VariantSelector({ variants, selected, isClothing, showInventory, onSele
                   width: 8,
                   height: 8,
                   borderRadius: "50%",
-                  backgroundColor: isLow ? "var(--commerce-warning)" : "var(--commerce-success)",
-                  border: "2px solid white"
+                  backgroundColor: isLow ? "var(--commerce-warning, #d97706)" : "var(--commerce-success, #059669)",
+                  border: "2px solid var(--commerce-surface, #f9fafb)"
                 },
                 title: isLow ? `Only ${variant.inventory_count} left` : "In stock"
               }
@@ -1924,7 +1920,7 @@ function QuantitySelector({ quantity, max, onChange }) {
           display: "block",
           fontSize: "0.875rem",
           fontWeight: 600,
-          color: "var(--commerce-text)",
+          color: "var(--commerce-text, #111827)",
           marginBottom: "0.5rem"
         },
         children: "Quantity"
@@ -1936,8 +1932,8 @@ function QuantitySelector({ quantity, max, onChange }) {
         style: {
           display: "inline-flex",
           alignItems: "center",
-          border: "1px solid var(--commerce-border)",
-          borderRadius: "var(--commerce-radius-sm)",
+          border: "1px solid var(--commerce-border, #e5e7eb)",
+          borderRadius: "var(--commerce-radius-sm, 8px)",
           overflow: "hidden"
         },
         children: [
@@ -1951,14 +1947,14 @@ function QuantitySelector({ quantity, max, onChange }) {
                 width: 40,
                 height: 40,
                 border: "none",
-                background: "var(--commerce-surface)",
+                background: "var(--commerce-surface, #f9fafb)",
                 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)"
+                color: "var(--commerce-text, #111827)"
               },
               children: "-"
             }
@@ -1980,11 +1976,11 @@ function QuantitySelector({ quantity, max, onChange }) {
                 height: 40,
                 textAlign: "center",
                 border: "none",
-                borderLeft: "1px solid var(--commerce-border)",
-                borderRight: "1px solid var(--commerce-border)",
+                borderLeft: "1px solid var(--commerce-border, #e5e7eb)",
+                borderRight: "1px solid var(--commerce-border, #e5e7eb)",
                 fontSize: "0.9375rem",
                 fontWeight: 500,
-                color: "var(--commerce-text)",
+                color: "var(--commerce-text, #111827)",
                 outline: "none",
                 MozAppearance: "textfield",
                 appearance: "textfield"
@@ -2001,14 +1997,14 @@ function QuantitySelector({ quantity, max, onChange }) {
                 width: 40,
                 height: 40,
                 border: "none",
-                background: "var(--commerce-surface)",
+                background: "var(--commerce-surface, #f9fafb)",
                 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)"
+                color: "var(--commerce-text, #111827)"
               },
               children: "+"
             }
@@ -2044,18 +2040,18 @@ function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
               alignItems: "center",
               textAlign: "center",
               padding: "0.75rem 0.5rem",
-              borderRadius: "var(--commerce-radius-sm)",
-              background: "var(--commerce-surface)"
+              borderRadius: "var(--commerce-radius-sm, 8px)",
+              background: "var(--commerce-surface, #f9fafb)"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "span",
                 {
                   style: {
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    color: "var(--commerce-text)",
+                    color: "var(--commerce-text, #111827)",
                     lineHeight: 1.3
                   },
                   children: badge.label
@@ -2066,7 +2062,7 @@ function TrustBadges({ badges = DEFAULT_TRUST_BADGES }) {
                 {
                   style: {
                     fontSize: "0.6875rem",
-                    color: "var(--commerce-text-muted)",
+                    color: "var(--commerce-text-muted, #9ca3af)",
                     lineHeight: 1.3
                   },
                   children: badge.sublabel
@@ -2128,7 +2124,7 @@ function ProductTabs({
             "li",
             {
               style: {
-                color: "var(--commerce-text-secondary)",
+                color: "var(--commerce-text-secondary, #6b7280)",
                 fontSize: "0.9375rem",
                 lineHeight: 1.6
               },
@@ -2153,7 +2149,7 @@ function ProductTabs({
               {
                 style: {
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text-muted)",
+                  color: "var(--commerce-text-muted, #9ca3af)",
                   fontWeight: 500
                 },
                 children: key
@@ -2165,7 +2161,7 @@ function ProductTabs({
                 style: {
                   margin: 0,
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text)"
+                  color: "var(--commerce-text, #111827)"
                 },
                 children: value
               }
@@ -2179,7 +2175,7 @@ function ProductTabs({
           id: "skc-tabpanel-description",
           role: "tabpanel",
           style: {
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             lineHeight: 1.7,
             fontSize: "0.9375rem"
           },
@@ -2198,14 +2194,14 @@ function EventInfoBlock({ product, schedule }) {
       style: {
         marginTop: "1.25rem",
         padding: "1rem",
-        borderRadius: "var(--commerce-radius-sm)",
-        background: "var(--commerce-surface)",
+        borderRadius: "var(--commerce-radius-sm, 8px)",
+        background: "var(--commerce-surface, #f9fafb)",
         display: "flex",
         flexDirection: "column",
         gap: "0.5rem"
       },
       children: [
-        schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+        schedule && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconCalendar, {}),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             formatDate(schedule.starts_at),
@@ -2213,17 +2209,17 @@ function EventInfoBlock({ product, schedule }) {
             formatTime(schedule.starts_at)
           ] })
         ] }),
-        product.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+        product.location && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconMapPin, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.location })
         ] }),
-        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent)" }, children: [
+        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent, #2563eb)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconExternalLink, {}),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Virtual Event" })
         ] }),
-        schedule?.capacity != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+        schedule?.capacity != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(IconUsers, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: soldOut ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--commerce-danger)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning)", fontWeight: 600 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: soldOut ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--commerce-danger, #dc2626)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning, #d97706)", fontWeight: 600 }, children: [
             "Only ",
             schedule.spots_remaining,
             " spot",
@@ -2257,9 +2253,9 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
     onNext();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Contact Information" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Contact Information" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Full Name *" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Full Name *" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2274,7 +2270,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Email Address *" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Email Address *" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2288,7 +2284,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Phone Number" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Phone Number" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2308,10 +2304,10 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
           onClick: onBack,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm)",
-            border: "1px solid var(--commerce-border)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: "1px solid var(--commerce-border, #e5e7eb)",
             background: "white",
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2332,9 +2328,9 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     onChange({ ...address, [field]: value });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Shipping Address" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Address" }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Street Address *" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Street Address *" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2349,7 +2345,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Apt / Suite" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Apt / Suite" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -2363,7 +2359,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "City *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "City *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2377,7 +2373,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "State *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "State *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2393,7 +2389,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "ZIP Code *" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "ZIP Code *" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2407,7 +2403,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: "Country" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Country" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -2428,10 +2424,10 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
           onClick: onBack,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm)",
-            border: "1px solid var(--commerce-border)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: "1px solid var(--commerce-border, #e5e7eb)",
             background: "white",
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2452,20 +2448,20 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           style: {
             width: 32,
             height: 32,
-            border: "3px solid var(--commerce-border)",
-            borderTopColor: "var(--commerce-accent)",
+            border: "3px solid var(--commerce-border, #e5e7eb)",
+            borderTopColor: "var(--commerce-accent, #2563eb)",
             borderRadius: "50%",
             animation: "skc-spin 1s linear infinite",
             margin: "0 auto 1rem"
           }
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
     ] });
   }
   if (!rates.length) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "1.5rem 0" }, children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.875rem", margin: "0 0 1rem" }, children: "No shipping rates available for this address. Please check your address and try again." }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -2473,10 +2469,10 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           onClick: onBack,
           style: {
             padding: "0.75rem 1.5rem",
-            borderRadius: "var(--commerce-radius-sm)",
-            border: "1px solid var(--commerce-border)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: "1px solid var(--commerce-border, #e5e7eb)",
             background: "white",
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2487,7 +2483,7 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.875rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Shipping Method" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Shipping Method" }),
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
@@ -2501,8 +2497,8 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
             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)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: isSelected ? "2px solid var(--commerce-accent, #2563eb)" : "1px solid var(--commerce-border, #e5e7eb)",
             background: isSelected ? "rgba(37,99,235,0.03)" : "white",
             cursor: "pointer",
             textAlign: "left",
@@ -2510,14 +2506,14 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text)" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: [
                 rate.carrier,
                 " \u2014 ",
                 rate.service
               ] }),
-              rate.estimatedDays != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.8125rem", color: "var(--commerce-text-muted)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
+              rate.estimatedDays != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "0.8125rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 2 }, children: rate.estimatedDays === 1 ? "1 business day" : `${rate.estimatedDays} business days` })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
           ]
         },
         rate.objectId || idx
@@ -2531,10 +2527,10 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           onClick: onBack,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm)",
-            border: "1px solid var(--commerce-border)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: "1px solid var(--commerce-border, #e5e7eb)",
             background: "white",
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: "pointer"
@@ -2757,21 +2753,21 @@ function PaymentStep({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "1rem" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text)" }, children: "Payment" }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Payment" }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         style: {
           padding: "1rem",
-          borderRadius: "var(--commerce-radius-sm)",
-          background: "var(--commerce-surface)",
+          borderRadius: "var(--commerce-radius-sm, 8px)",
+          background: "var(--commerce-surface, #f9fafb)",
           display: "flex",
           flexDirection: "column",
           gap: "0.375rem",
           fontSize: "0.875rem"
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               product.name,
               " ",
@@ -2781,7 +2777,7 @@ function PaymentStep({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatPrice(subtotal, product.currency) })
           ] }),
-          shippingRate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
+          shippingRate && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
               "Shipping (",
               shippingRate.carrier,
@@ -2798,10 +2794,10 @@ function PaymentStep({
                 display: "flex",
                 justifyContent: "space-between",
                 fontWeight: 700,
-                color: "var(--commerce-text)",
+                color: "var(--commerce-text, #111827)",
                 fontSize: "1rem",
                 paddingTop: "0.5rem",
-                borderTop: "1px solid var(--commerce-border)",
+                borderTop: "1px solid var(--commerce-border, #e5e7eb)",
                 marginTop: "0.25rem"
               },
               children: [
@@ -2821,7 +2817,7 @@ function PaymentStep({
             display: "block",
             fontSize: "0.8125rem",
             fontWeight: 500,
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             marginBottom: 6
           },
           children: "Card Details"
@@ -2834,14 +2830,14 @@ function PaymentStep({
           ref: cardContainerRef,
           style: {
             minHeight: processor === "stripe" ? 80 : 44,
-            border: "1px solid var(--commerce-border)",
-            borderRadius: "var(--commerce-radius-sm)",
+            border: "1px solid var(--commerce-border, #e5e7eb)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
             padding: processor === "stripe" ? "0.75rem" : "0.5rem 0.75rem",
             background: "white"
           }
         }
       ),
-      !cardReady && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
+      !cardReady && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
     ] }),
     error && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -2853,8 +2849,8 @@ function PaymentStep({
           padding: "0.75rem",
           background: "#fef2f2",
           border: "1px solid #fecaca",
-          borderRadius: "var(--commerce-radius-sm)",
-          color: "var(--commerce-danger)",
+          borderRadius: "var(--commerce-radius-sm, 8px)",
+          color: "var(--commerce-danger, #dc2626)",
           fontSize: "0.875rem"
         },
         children: [
@@ -2872,10 +2868,10 @@ function PaymentStep({
           disabled: submitting,
           style: {
             padding: "0.75rem 1.25rem",
-            borderRadius: "var(--commerce-radius-sm)",
-            border: "1px solid var(--commerce-border)",
+            borderRadius: "var(--commerce-radius-sm, 8px)",
+            border: "1px solid var(--commerce-border, #e5e7eb)",
             background: "white",
-            color: "var(--commerce-text-secondary)",
+            color: "var(--commerce-text-secondary, #6b7280)",
             fontSize: "0.875rem",
             fontWeight: 500,
             cursor: submitting ? "not-allowed" : "pointer",
@@ -2922,7 +2918,7 @@ function PaymentStep({
         style: {
           textAlign: "center",
           fontSize: "0.6875rem",
-          color: "var(--commerce-text-muted)",
+          color: "var(--commerce-text-muted, #9ca3af)",
           margin: "0.25rem 0 0"
         },
         children: [
@@ -2963,7 +2959,7 @@ function SuccessStep({ result, product, onClose }) {
                 height: "32",
                 viewBox: "0 0 24 24",
                 fill: "none",
-                stroke: "var(--commerce-success)",
+                stroke: "var(--commerce-success, #059669)",
                 strokeWidth: "2.5",
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
@@ -2985,21 +2981,21 @@ function SuccessStep({ result, product, onClose }) {
               margin: "0 0 0.5rem",
               fontSize: "1.375rem",
               fontWeight: 700,
-              color: "var(--commerce-success)"
+              color: "var(--commerce-success, #059669)"
             },
             children: "Order Confirmed!"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--commerce-text-secondary)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
           "Thank you for your purchase of ",
           product.name,
           "."
         ] }),
-        result.confirmation_number && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--commerce-text-muted)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
+        result.confirmation_number && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
           "Confirmation: ",
-          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "var(--commerce-text)" }, children: result.confirmation_number })
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: "var(--commerce-text, #111827)" }, children: result.confirmation_number })
         ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1.5rem", fontSize: "0.875rem" }, children: "A confirmation email has been sent to your inbox." }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "skc-btn-primary", onClick: onClose, style: { maxWidth: 240 }, children: "Done" })
       ]
     }
@@ -3166,8 +3162,8 @@ function ProductDetail({
             style: {
               width: 48,
               height: 48,
-              border: "3px solid var(--commerce-border)",
-              borderTopColor: "var(--commerce-accent)",
+              border: "3px solid var(--commerce-border, #e5e7eb)",
+              borderTopColor: "var(--commerce-accent, #2563eb)",
               borderRadius: "50%",
               animation: "skc-spin 1s linear infinite"
             }
@@ -3177,8 +3173,8 @@ function ProductDetail({
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `skc-detail ${className}`, style: customStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("style", { children: STYLE_BLOCK }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary)" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text)" }, children: "Product Not Found" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text, #111827)" }, children: "Product Not Found" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginTop: "0.5rem" }, children: "The product you are looking for does not exist or has been removed." })
       ] })
     ] });
@@ -3346,7 +3342,7 @@ function ProductDetail({
             style: {
               fontSize: "0.75rem",
               fontWeight: 600,
-              color: "var(--commerce-accent)",
+              color: "var(--commerce-accent, #2563eb)",
               textTransform: "uppercase",
               letterSpacing: "0.05em",
               marginBottom: "0.375rem"
@@ -3361,7 +3357,7 @@ function ProductDetail({
               margin: 0,
               fontSize: "1.875rem",
               fontWeight: 700,
-              color: "var(--commerce-text)",
+              color: "var(--commerce-text, #111827)",
               lineHeight: 1.2
             },
             children: product.name
@@ -3374,7 +3370,7 @@ function ProductDetail({
               marginTop: "0.625rem",
               marginBottom: 0,
               fontSize: "1rem",
-              color: "var(--commerce-text-secondary)",
+              color: "var(--commerce-text-secondary, #6b7280)",
               lineHeight: 1.6
             },
             children: product.short_description
@@ -3397,7 +3393,7 @@ function ProductDetail({
                   style: {
                     fontSize: "1.75rem",
                     fontWeight: 700,
-                    color: hasDiscount ? "var(--commerce-danger)" : "var(--commerce-text)"
+                    color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)"
                   },
                   children: formatPrice(currentPrice, product.currency)
                 }
@@ -3408,7 +3404,7 @@ function ProductDetail({
                   {
                     style: {
                       fontSize: "1.125rem",
-                      color: "var(--commerce-text-muted)",
+                      color: "var(--commerce-text-muted, #9ca3af)",
                       textDecoration: "line-through"
                     },
                     children: formatPrice(compareAtPrice, product.currency)
@@ -3420,8 +3416,8 @@ function ProductDetail({
                     style: {
                       fontSize: "0.75rem",
                       fontWeight: 700,
-                      color: "var(--commerce-accent-text)",
-                      background: "var(--commerce-danger)",
+                      color: "var(--commerce-accent-text, #ffffff)",
+                      background: "var(--commerce-danger, #dc2626)",
                       padding: "2px 8px",
                       borderRadius: 4
                     },
@@ -3433,7 +3429,7 @@ function ProductDetail({
                   }
                 )
               ] }),
-              product.billing_period && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted)" }, children: [
+              product.billing_period && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted, #9ca3af)" }, children: [
                 "/ ",
                 product.billing_period
               ] })
@@ -3446,7 +3442,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-danger)",
+              color: "var(--commerce-danger, #dc2626)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3463,7 +3459,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-warning)",
+              color: "var(--commerce-warning, #d97706)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3481,7 +3477,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 500,
-              color: "var(--commerce-success)",
+              color: "var(--commerce-success, #059669)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3503,11 +3499,38 @@ function ProductDetail({
             onSelect: handleVariantChange
           }
         ),
+        product.size_chart?.fit_note && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "0.75rem",
+              padding: "0.625rem 0.875rem",
+              borderRadius: "var(--commerce-radius-sm, 8px)",
+              backgroundColor: "color-mix(in srgb, var(--commerce-warning, #d97706) 10%, transparent)",
+              border: "1px solid color-mix(in srgb, var(--commerce-warning, #d97706) 25%, transparent)",
+              display: "flex",
+              alignItems: "flex-start",
+              gap: "0.5rem",
+              fontSize: "0.8125rem",
+              color: "var(--commerce-warning, #d97706)",
+              fontWeight: 500,
+              lineHeight: 1.4
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { flexShrink: 0, marginTop: 1 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+              ] }),
+              product.size_chart.fit_note
+            ]
+          }
+        ),
         showSizeChart && product.is_clothing && product.size_chart && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.625rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
           SizeChart,
           {
             chart: product.size_chart,
-            selectedSize: selectedVariant?.options?.["Size"]
+            selectedSize: selectedVariant?.options?.Size || selectedVariant?.name
           }
         ) }),
         showQuantity && !isOutOfStock && !isEvent && !isService && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3551,8 +3574,8 @@ function ProductDetail({
               padding: "0.75rem",
               background: "#fef2f2",
               border: "1px solid #fecaca",
-              borderRadius: "var(--commerce-radius-sm)",
-              color: "var(--commerce-danger)",
+              borderRadius: "var(--commerce-radius-sm, 8px)",
+              color: "var(--commerce-danger, #dc2626)",
               fontSize: "0.875rem",
               display: "flex",
               alignItems: "flex-start",
@@ -3580,8 +3603,8 @@ function ProductDetail({
     ] }),
     showStickyBar && checkoutState === "browsing" && !isOutOfStock && !needsVariantSelection && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "skc-sticky-bar", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger)" : "var(--commerce-text)" }, children: formatPrice(currentPrice, product.currency) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: "0.875rem", color: "var(--commerce-text, #111827)", lineHeight: 1.2 }, children: product.name }),
+        product.price_is_public && currentPrice != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)" }, children: formatPrice(currentPrice, product.currency) })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
@@ -3624,13 +3647,13 @@ function ProductDetail({
                     height: 32,
                     borderRadius: "50%",
                     border: "none",
-                    background: "var(--commerce-surface)",
+                    background: "var(--commerce-surface, #f9fafb)",
                     cursor: "pointer",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
                     zIndex: 10,
-                    color: "var(--commerce-text-secondary)"
+                    color: "var(--commerce-text-secondary, #6b7280)"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(IconX, {})
                 }
@@ -3644,15 +3667,15 @@ function ProductDetail({
                       style: {
                         width: 48,
                         height: 48,
-                        border: "3px solid var(--commerce-border)",
-                        borderTopColor: "var(--commerce-accent)",
+                        border: "3px solid var(--commerce-border, #e5e7eb)",
+                        borderTopColor: "var(--commerce-accent, #2563eb)",
                         borderRadius: "50%",
                         animation: "skc-spin 0.8s linear infinite",
                         margin: "0 auto 1.5rem"
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
                 ] }),
                 checkoutState === "success" && checkoutResult && /* @__PURE__ */ jsxRuntime.jsx(SuccessStep, { result: checkoutResult, product, onClose: handleCloseCheckout }),
                 checkoutState === "customer-info" && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3716,8 +3739,8 @@ function ProductDetail({
                       padding: "0.75rem",
                       background: "#fef2f2",
                       border: "1px solid #fecaca",
-                      borderRadius: "var(--commerce-radius-sm)",
-                      color: "var(--commerce-danger)",
+                      borderRadius: "var(--commerce-radius-sm, 8px)",
+                      color: "var(--commerce-danger, #dc2626)",
                       fontSize: "0.875rem",
                       display: "flex",
                       alignItems: "flex-start",
@@ -6599,5 +6622,5 @@ exports.isEventSoldOut = isEventSoldOut;
 exports.registerForEvent = registerForEvent;
 exports.useEventModal = useEventModal;
 exports.validateAddress = validateAddress;
-//# sourceMappingURL=chunk-B46F5RXP.js.map
-//# sourceMappingURL=chunk-B46F5RXP.js.map
+//# sourceMappingURL=chunk-BYXMT7IG.js.map
+//# sourceMappingURL=chunk-BYXMT7IG.js.map