@sonordev/site-kit 1.4.2 → 1.4.4

package/dist/{chunk-KGNO6DZH.mjs → chunk-GA2MN6CF.mjs}

@@ -1350,25 +1350,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;
 }
@@ -1378,6 +1371,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) {
@@ -1399,8 +1395,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;
 }
@@ -1424,19 +1420,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%;
@@ -1452,7 +1448,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;
@@ -1468,7 +1464,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;
@@ -1480,18 +1476,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 */
@@ -1514,7 +1510,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;
 }
@@ -1523,20 +1519,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 */
@@ -1547,17 +1543,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);
@@ -1575,10 +1571,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;
@@ -1609,24 +1605,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) {
@@ -1847,11 +1843,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__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary)", marginLeft: 6 }, children: [
+          selected && /* @__PURE__ */ jsxs("span", { style: { fontWeight: 400, color: "var(--commerce-text-secondary, #6b7280)", marginLeft: 6 }, children: [
             "\u2014 ",
             selected.options?.Size || selected.name
           ] })
@@ -1873,10 +1869,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",
@@ -1896,8 +1892,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"
               }
@@ -1918,7 +1914,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"
@@ -1930,8 +1926,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: [
@@ -1945,14 +1941,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: "-"
             }
@@ -1974,11 +1970,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"
@@ -1995,14 +1991,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: "+"
             }
@@ -2038,18 +2034,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__ */ jsx("span", { style: { color: "var(--commerce-text-secondary)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: Icon && /* @__PURE__ */ jsx(Icon, {}) }),
               /* @__PURE__ */ jsx(
                 "span",
                 {
                   style: {
                     fontSize: "0.75rem",
                     fontWeight: 600,
-                    color: "var(--commerce-text)",
+                    color: "var(--commerce-text, #111827)",
                     lineHeight: 1.3
                   },
                   children: badge.label
@@ -2060,7 +2056,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
@@ -2122,7 +2118,7 @@ function ProductTabs({
             "li",
             {
               style: {
-                color: "var(--commerce-text-secondary)",
+                color: "var(--commerce-text-secondary, #6b7280)",
                 fontSize: "0.9375rem",
                 lineHeight: 1.6
               },
@@ -2147,7 +2143,7 @@ function ProductTabs({
               {
                 style: {
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text-muted)",
+                  color: "var(--commerce-text-muted, #9ca3af)",
                   fontWeight: 500
                 },
                 children: key
@@ -2159,7 +2155,7 @@ function ProductTabs({
                 style: {
                   margin: 0,
                   fontSize: "0.875rem",
-                  color: "var(--commerce-text)"
+                  color: "var(--commerce-text, #111827)"
                 },
                 children: value
               }
@@ -2173,7 +2169,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"
           },
@@ -2192,14 +2188,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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary)" }, children: [
+        schedule && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
           /* @__PURE__ */ jsx(IconCalendar, {}),
           /* @__PURE__ */ jsxs("span", { children: [
             formatDate(schedule.starts_at),
@@ -2207,17 +2203,17 @@ function EventInfoBlock({ product, schedule }) {
             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: [
+        product.location && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, 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: [
+        product.is_virtual && product.virtual_meeting_url && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-accent, #2563eb)" }, 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: [
+        schedule?.capacity != null && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6, fontSize: "0.875rem", color: "var(--commerce-text-secondary, #6b7280)" }, 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: [
+          /* @__PURE__ */ jsx("span", { children: soldOut ? /* @__PURE__ */ jsx("span", { style: { color: "var(--commerce-danger, #dc2626)", fontWeight: 600 }, children: "Sold Out" }) : schedule.spots_remaining != null && schedule.spots_remaining <= 10 ? /* @__PURE__ */ jsxs("span", { className: "skc-pulse", style: { color: "var(--commerce-warning, #d97706)", fontWeight: 600 }, children: [
             "Only ",
             schedule.spots_remaining,
             " spot",
@@ -2251,9 +2247,9 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
     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__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, 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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Full Name *" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2268,7 +2264,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Email Address *" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2282,7 +2278,7 @@ function CustomerInfoStep({ customer, onChange, onNext, onBack }) {
       )
     ] }),
     /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Phone Number" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2302,10 +2298,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"
@@ -2326,9 +2322,9 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     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__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, 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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Street Address *" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2343,7 +2339,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
       )
     ] }),
     /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Apt / Suite" }),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -2357,7 +2353,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "City *" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2371,7 +2367,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "State *" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2387,7 +2383,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
     ] }),
     /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "ZIP Code *" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2401,7 +2397,7 @@ function ShippingAddressStep({ address, onChange, onNext, onBack, loading }) {
         )
       ] }),
       /* @__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("label", { style: { display: "block", fontSize: "0.8125rem", fontWeight: 500, color: "var(--commerce-text-secondary, #6b7280)", marginBottom: 4 }, children: "Country" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2422,10 +2418,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"
@@ -2446,20 +2442,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__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.875rem", margin: 0 }, children: "Calculating shipping rates..." })
+      /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", 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("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__ */ jsx(
         "button",
         {
@@ -2467,10 +2463,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"
@@ -2481,7 +2477,7 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
     ] });
   }
   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("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, 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(
@@ -2495,8 +2491,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",
@@ -2504,14 +2500,14 @@ function ShippingRatesStep({ rates, selected, onSelect, onNext, onBack, loading,
           },
           children: [
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text)" }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.875rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, 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` })
+              rate.estimatedDays != null && /* @__PURE__ */ 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__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "0.9375rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: formatPrice(parseFloat(rate.amount), rate.currency || currency) })
           ]
         },
         rate.objectId || idx
@@ -2525,10 +2521,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"
@@ -2751,21 +2747,21 @@ function PaymentStep({
     }
   };
   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__ */ jsx("h3", { style: { margin: 0, fontSize: "1.125rem", fontWeight: 600, color: "var(--commerce-text, #111827)" }, children: "Payment" }),
     /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
             /* @__PURE__ */ jsxs("span", { children: [
               product.name,
               " ",
@@ -2775,7 +2771,7 @@ function PaymentStep({
             ] }),
             /* @__PURE__ */ jsx("span", { children: formatPrice(subtotal, product.currency) })
           ] }),
-          shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary)" }, children: [
+          shippingRate && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
             /* @__PURE__ */ jsxs("span", { children: [
               "Shipping (",
               shippingRate.carrier,
@@ -2792,10 +2788,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: [
@@ -2815,7 +2811,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"
@@ -2828,14 +2824,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__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
+      !cardReady && !error && /* @__PURE__ */ jsx("p", { style: { fontSize: "0.75rem", color: "var(--commerce-text-muted, #9ca3af)", marginTop: 4, marginBottom: 0 }, children: "Loading secure payment form..." })
     ] }),
     error && /* @__PURE__ */ jsxs(
       "div",
@@ -2847,8 +2843,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: [
@@ -2866,10 +2862,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",
@@ -2916,7 +2912,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: [
@@ -2957,7 +2953,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",
@@ -2979,21 +2975,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__ */ jsxs("p", { style: { color: "var(--commerce-text-secondary)", margin: "0 0 0.5rem", fontSize: "0.9375rem" }, children: [
+        /* @__PURE__ */ 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__ */ jsxs("p", { style: { color: "var(--commerce-text-muted)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
+        result.confirmation_number && /* @__PURE__ */ jsxs("p", { style: { color: "var(--commerce-text-muted, #9ca3af)", margin: "0 0 1rem", fontSize: "0.8125rem" }, children: [
           "Confirmation: ",
-          /* @__PURE__ */ jsx("strong", { style: { color: "var(--commerce-text)" }, children: result.confirmation_number })
+          /* @__PURE__ */ jsx("strong", { style: { color: "var(--commerce-text, #111827)" }, 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("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__ */ jsx("button", { className: "skc-btn-primary", onClick: onClose, style: { maxWidth: 240 }, children: "Done" })
       ]
     }
@@ -3160,8 +3156,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"
             }
@@ -3171,8 +3167,8 @@ function ProductDetail({
     }
     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__ */ jsxs("div", { style: { textAlign: "center", padding: "4rem 2rem", color: "var(--commerce-text-secondary, #6b7280)" }, children: [
+        /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "1.5rem", color: "var(--commerce-text, #111827)" }, 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." })
       ] })
     ] });
@@ -3340,7 +3336,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"
@@ -3355,7 +3351,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
@@ -3368,7 +3364,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
@@ -3391,7 +3387,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)
                 }
@@ -3402,7 +3398,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)
@@ -3414,8 +3410,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
                     },
@@ -3427,7 +3423,7 @@ function ProductDetail({
                   }
                 )
               ] }),
-              product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted)" }, children: [
+              product.billing_period && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.875rem", color: "var(--commerce-text-muted, #9ca3af)" }, children: [
                 "/ ",
                 product.billing_period
               ] })
@@ -3440,7 +3436,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-danger)",
+              color: "var(--commerce-danger, #dc2626)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3457,7 +3453,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 600,
-              color: "var(--commerce-warning)",
+              color: "var(--commerce-warning, #d97706)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3475,7 +3471,7 @@ function ProductDetail({
             style: {
               fontSize: "0.8125rem",
               fontWeight: 500,
-              color: "var(--commerce-success)",
+              color: "var(--commerce-success, #059669)",
               display: "flex",
               alignItems: "center",
               gap: 4
@@ -3497,11 +3493,38 @@ function ProductDetail({
             onSelect: handleVariantChange
           }
         ),
+        product.size_chart?.fit_note && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+              ] }),
+              product.size_chart.fit_note
+            ]
+          }
+        ),
         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"]
+            selectedSize: selectedVariant?.options?.Size || selectedVariant?.name
           }
         ) }),
         showQuantity && !isOutOfStock && !isEvent && !isService && /* @__PURE__ */ jsx(
@@ -3545,8 +3568,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",
@@ -3574,8 +3597,8 @@ function ProductDetail({
     ] }),
     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("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__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1rem", color: hasDiscount ? "var(--commerce-danger, #dc2626)" : "var(--commerce-text, #111827)" }, children: formatPrice(currentPrice, product.currency) })
       ] }),
       /* @__PURE__ */ jsx(
         "button",
@@ -3618,13 +3641,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__ */ jsx(IconX, {})
                 }
@@ -3638,15 +3661,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__ */ jsx("p", { style: { color: "var(--commerce-text-secondary)", fontSize: "0.9375rem", margin: 0 }, children: "Processing your order..." })
+                  /* @__PURE__ */ jsx("p", { style: { color: "var(--commerce-text-secondary, #6b7280)", 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(
@@ -3710,8 +3733,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",
@@ -6551,5 +6574,5 @@ function getApiKey2() {
 }
 
 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-KGNO6DZH.mjs.map
-//# sourceMappingURL=chunk-KGNO6DZH.mjs.map
+//# sourceMappingURL=chunk-GA2MN6CF.mjs.map
+//# sourceMappingURL=chunk-GA2MN6CF.mjs.map