@cimplify/sdk 0.24.1 → 0.25.0

package/dist/react.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { getVariantDisplayName, createCimplifyClient } from './chunk-H34GSEGR.mjs';
-export { getVariantDisplayName } from './chunk-H34GSEGR.mjs';
+import { DURATION_UNIT, getVariantDisplayName, PRODUCT_TYPE, createCimplifyClient, RENDER_HINT } from './chunk-JMNMSVDQ.mjs';
+export { getVariantDisplayName } from './chunk-JMNMSVDQ.mjs';
 import { ELEMENT_TYPES, EVENT_TYPES } from './chunk-TBZLJPM4.mjs';
 import { isSupportedCurrency, formatPrice, parsePrice, getUnitPriceAtQuantity, isOnSale, getDiscountPercentage, getBasePrice, getPriceRange, formatPriceRange } from './chunk-E3HC2YAE.mjs';
 import React3, { createContext, useRef, useState, useCallback, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
@@ -1031,7 +1031,7 @@ function useCart(options = {}) {
     () => snapshot.items.reduce((sum, item) => sum + item.quantity, 0),
     [snapshot.items]
   );
-  return {
+  return useMemo(() => ({
     items: snapshot.items,
     itemCount,
     subtotal: snapshot.subtotal,
@@ -1046,7 +1046,7 @@ function useCart(options = {}) {
     clearCart,
     sync,
     reorder
-  };
+  }), [snapshot.items, itemCount, snapshot.subtotal, snapshot.tax, snapshot.total, snapshot.currency, snapshot.isLoading, addItem, removeItem, updateQuantity, clearCart, sync, reorder]);
 }
 var LOCATION_STORAGE_KEY = "cimplify_location_id";
 var DISPLAY_CURRENCY_STORAGE_KEY = "cimplify_display_currency";
@@ -1697,11 +1697,14 @@ function CimplifyCheckout({
     errorMessage && /* @__PURE__ */ jsx("p", { "data-cimplify-error": "", style: { marginTop: SPACE.sm, fontSize: 13, color: colors.error }, children: errorMessage })
   ] });
 }
-function Price({ amount, className, prefix }) {
-  const { displayCurrency, convertPrice } = useCimplify();
+function Price({ amount, currency, className, prefix }) {
+  const context = useOptionalCimplify();
+  const resolvedCurrency = currency ?? context?.displayCurrency ?? "USD";
+  const convertedAmount = !currency && context?.convertPrice ? context.convertPrice(amount) : amount;
+  const resolvedAmount = typeof convertedAmount === "string" ? parseFloat(convertedAmount) || 0 : convertedAmount;
   return /* @__PURE__ */ jsxs("span", { className, children: [
     prefix,
-    formatPrice(convertPrice(amount), displayCurrency)
+    formatPrice(resolvedAmount, resolvedCurrency)
   ] });
 }
 function createCachedQuery(config) {
@@ -4801,7 +4804,9 @@ function ProductCustomizer({
     },
     []
   );
-  const handleAddToCart = async () => {
+  const addedTimerRef = useRef(void 0);
+  useEffect(() => () => clearTimeout(addedTimerRef.current), []);
+  const handleAddToCart = useCallback(async () => {
     if (isSubmitting) return;
     setIsSubmitting(true);
     const options = {
@@ -4827,15 +4832,16 @@ function ProductCustomizer({
         await cart.addItem(product, quantity, options);
       }
       setIsAdded(true);
-      setTimeout(() => {
+      clearTimeout(addedTimerRef.current);
+      addedTimerRef.current = setTimeout(() => {
         setIsAdded(false);
-        setQuantity(1);
+        setQuantity(product.min_order_quantity ?? 1);
       }, 2e3);
     } catch {
     } finally {
       setIsSubmitting(false);
     }
-  };
+  }, [product, quantity, selectedVariantId, selectedVariant, quoteId, normalizedAddOnOptionIds, selectedAddOnOptions, isComposite, compositeSelections, isBundle, bundleSelections, selectedBillingPlan, specialInstructions, isSubmitting, onAddToCart, cart]);
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-customizer": true, className: cn("space-y-6", className, classNames?.root), children: [
     isComposite && product.groups && product.composite_id && /* @__PURE__ */ jsx(
       CompositeSelector,
@@ -5487,19 +5493,832 @@ function ProductSheet({
     }
   );
 }
+function CardImage({
+  src,
+  alt,
+  aspectRatio = "square",
+  renderImage,
+  className,
+  children
+}) {
+  const aspectClass = {
+    square: "aspect-square",
+    "3/4": "aspect-[3/4]",
+    "4/3": "aspect-[4/3]",
+    "16/9": "aspect-[16/9]"
+  }[aspectRatio];
+  return /* @__PURE__ */ jsxs("div", { "data-cimplify-card-image": true, className: cn("relative overflow-hidden bg-muted", aspectClass, className), children: [
+    renderImage ? renderImage({ src, alt, className: "w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]" }) : /* @__PURE__ */ jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: "w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.04]"
+      }
+    ),
+    children
+  ] });
+}
+function QuickAddButton({
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-cimplify-card-quick-add": true,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      className: cn(
+        "w-9 h-9 rounded-full bg-background text-foreground flex items-center justify-center",
+        "shadow-[0_1px_4px_rgba(0,0,0,0.10),0_4px_12px_rgba(0,0,0,0.08)]",
+        "transition-all duration-200 ease-out",
+        "opacity-0 group-hover:opacity-100 translate-y-1 group-hover:translate-y-0",
+        "hover:!bg-foreground hover:!text-background hover:!scale-110",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("line", { x1: "8", y1: "3", x2: "8", y2: "13" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "8", x2: "13", y2: "8" })
+      ] })
+    }
+  );
+}
+function WishlistButton({
+  filled = false,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-cimplify-card-wishlist": true,
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick?.();
+      },
+      className: cn(
+        "w-8 h-8 rounded-full bg-background/90 backdrop-blur flex items-center justify-center",
+        "transition-all duration-200 ease-out hover:scale-110 hover:bg-background",
+        filled ? "text-destructive" : "text-muted-foreground hover:text-destructive",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" }) })
+    }
+  );
+}
+function SoldOutOverlay() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-cimplify-card-sold-out": true,
+      className: "absolute inset-0 bg-background/50 backdrop-blur-[1px] flex items-center justify-center z-10 rounded-[inherit]",
+      children: /* @__PURE__ */ jsx("span", { className: "bg-background/90 text-foreground text-xs font-bold px-4 py-2 uppercase tracking-wider", children: "Sold Out" })
+    }
+  );
+}
+function SaleBadge2({ product }) {
+  if (!isOnSale(product)) return null;
+  const pct = getDiscountPercentage(product);
+  if (!pct || pct <= 0) return null;
+  return /* @__PURE__ */ jsxs("span", { "data-cimplify-card-sale-badge": true, className: "inline-flex items-center text-[11px] font-semibold tracking-wide bg-destructive text-destructive-foreground px-2 py-0.5 rounded-md", children: [
+    "-",
+    pct,
+    "%"
+  ] });
+}
+function CardShell({
+  product,
+  renderLink,
+  disabled = false,
+  className,
+  children
+}) {
+  const href = `/products/${product.slug}`;
+  const shellClass = cn(
+    "group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden",
+    "shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]",
+    "transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]",
+    !disabled && "hover:-translate-y-1 hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)]",
+    disabled && "opacity-60 cursor-default",
+    className
+  );
+  if (renderLink) {
+    return renderLink({ href, className: shellClass, children: /* @__PURE__ */ jsx(Fragment, { children }) });
+  }
+  return /* @__PURE__ */ jsx("a", { href, className: shellClass, "data-cimplify-card": true, children });
+}
+function FoodProductCard({
+  product,
+  onQuickAdd,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const tags = product.tags || [];
+  const isSignature = product.metadata?.is_signature === true;
+  const isNew = product.metadata?.is_new === true;
+  const isComposite = product.type === PRODUCT_TYPE.Composite;
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
+      isSignature && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 left-3 inline-flex items-center gap-1 text-[11px] font-semibold tracking-wide bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md", children: [
+        /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 opacity-70", fill: "currentColor", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx("path", { d: "M8 .75l1.85 4.95L15 6.2l-3.7 3.2 1.1 5.1L8 12.15 3.6 14.5l1.1-5.1L1 6.2l5.15-.5z" }) }),
+        "Signature"
+      ] }),
+      isNew && !isSignature && /* @__PURE__ */ jsx("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50 text-emerald-700 border border-emerald-200/60 px-2 py-0.5 rounded-md", children: "New" }),
+      isComposite && /* @__PURE__ */ jsx("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-violet-50 text-violet-700 border border-violet-200/60 px-2 py-0.5 rounded-md", children: "Customizable" }),
+      /* @__PURE__ */ jsx(
+        QuickAddButton,
+        {
+          onClick: () => onQuickAdd?.(product),
+          className: "absolute bottom-3 right-3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3", children: [
+        isComposite ? /* @__PURE__ */ jsxs("span", { className: "text-sm font-bold", children: [
+          "From ",
+          /* @__PURE__ */ jsx(Price, { amount: product.default_price })
+        ] }) : /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1", children: tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) })
+      ] })
+    ] })
+  ] });
+}
+function getColorSwatches(product) {
+  const variants = product.variants;
+  if (!variants || variants.length === 0) return [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const v of variants) {
+    if (v.display_attributes) {
+      for (const attr of v.display_attributes) {
+        if (attr.axis_name.toLowerCase() === "color" && !seen.has(attr.value_name)) {
+          seen.add(attr.value_name);
+        }
+      }
+    }
+  }
+  return Array.from(seen).slice(0, 5);
+}
+function RetailProductCard({
+  product,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const outOfStock = product.inventory_status?.in_stock === false;
+  const onSale = isOnSale(product);
+  const swatches = getColorSwatches(product);
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, disabled: outOfStock, className, children: [
+    outOfStock && /* @__PURE__ */ jsx(SoldOutOverlay, {}),
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "3/4", renderImage, children: [
+      onSale && /* @__PURE__ */ jsx("div", { className: "absolute top-3 left-3", children: /* @__PURE__ */ jsx(SaleBadge2, { product }) }),
+      /* @__PURE__ */ jsx(WishlistButton, { className: "absolute top-3 right-3" }),
+      product.inventory_status?.low_stock && product.inventory_status?.stock_level && /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 left-3 text-[11px] font-semibold bg-amber-50 text-amber-700 border border-amber-200/60 px-2 py-0.5 rounded-md", children: [
+        "Only ",
+        product.inventory_status.stock_level,
+        " left"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
+      product.vendor && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest", children: product.vendor }),
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate", children: product.name }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        onSale && /* @__PURE__ */ jsx(Price, { amount: getBasePrice(product), className: "text-xs text-muted-foreground line-through" })
+      ] }),
+      swatches.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 mt-2.5", children: swatches.map((name) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          title: name,
+          className: "text-[9px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded",
+          children: name
+        },
+        name
+      )) })
+    ] })
+  ] });
+}
+function PriceRange({ product, currency, className }) {
+  const context = useOptionalCimplify();
+  const resolvedCurrency = currency ?? context?.displayCurrency ?? "USD";
+  const range = getPriceRange(product);
+  if (!range) return null;
+  return /* @__PURE__ */ jsx("span", { "data-cimplify-price-range": true, className, children: formatPriceRange(range.min, range.max, resolvedCurrency) });
+}
+function WholesaleProductCard({
+  product,
+  onQuickAdd,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
+  const status = product.inventory_status;
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
+      product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-zinc-800 text-white px-2 py-0.5 rounded-md", children: [
+        "MOQ: ",
+        product.min_order_quantity
+      ] }),
+      /* @__PURE__ */ jsx(
+        QuickAddButton,
+        {
+          onClick: () => onQuickAdd?.(product),
+          className: "absolute bottom-3 right-3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
+      product.sku && /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground font-mono", children: product.sku }),
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate", children: product.name }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: hasTiers ? /* @__PURE__ */ jsx(PriceRange, { product, className: "text-sm font-bold" }) : /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }) }),
+      status && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [
+        /* @__PURE__ */ jsx("span", { className: cn(
+          "w-[7px] h-[7px] rounded-full shrink-0",
+          status.in_stock ? status.low_stock ? "bg-amber-500" : "bg-emerald-500" : "bg-red-500"
+        ) }),
+        /* @__PURE__ */ jsx("span", { className: cn(
+          "text-[10.5px] font-medium",
+          status.in_stock ? status.low_stock ? "text-amber-600" : "text-emerald-600" : "text-red-600"
+        ), children: !status.in_stock ? "Out of stock" : status.stock_level != null ? `${status.stock_level.toLocaleString()} in stock` : "In stock" })
+      ] })
+    ] })
+  ] });
+}
+var TYPE_BADGES = {
+  download: { label: "Download", color: "bg-sky-50 text-sky-700 border-sky-200/60" },
+  license: { label: "License", color: "bg-blue-50 text-blue-700 border-blue-200/60" },
+  event_ticket: { label: "Event", color: "bg-violet-50 text-violet-700 border-violet-200/60" },
+  access_pass: { label: "Access", color: "bg-emerald-50 text-emerald-700 border-emerald-200/60" },
+  gift_card: { label: "Gift Card", color: "bg-amber-50 text-amber-700 border-amber-200/60" }
+};
+function DigitalProductCard({
+  product,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const typeBadge = product.digital_type ? TYPE_BADGES[product.digital_type] : null;
+  const isTicket = product.digital_type === "event_ticket";
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsx(CardImage, { src: image, alt: product.name, aspectRatio: "4/3", renderImage, children: typeBadge && /* @__PURE__ */ jsx("span", { className: `absolute top-3 left-3 text-[11px] font-semibold tracking-wide border px-2 py-0.5 rounded-md ${typeBadge.color}`, children: typeBadge.label }) }),
+    /* @__PURE__ */ jsxs("div", { className: "p-3.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
+      isTicket && (product.event_date || product.venue) && /* @__PURE__ */ jsxs("p", { className: "text-[12px] text-muted-foreground mt-1 truncate", children: [
+        product.event_date && new Date(product.event_date).toLocaleDateString(void 0, { month: "short", day: "numeric" }),
+        product.event_date && product.venue && " \xB7 ",
+        product.venue
+      ] }),
+      !isTicket && product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        product.file_type && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded", children: [
+          product.file_type.toUpperCase(),
+          product.file_size_mb != null && ` \xB7 ${product.file_size_mb >= 1024 ? `${(product.file_size_mb / 1024).toFixed(1)}GB` : `${product.file_size_mb}MB`}`
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function formatDuration2(minutes, unit) {
+  if (unit && unit !== "minutes") return `${minutes} ${unit}`;
+  if (minutes >= 60) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return m > 0 ? `${h}h ${m}m` : `${h} hr${h > 1 ? "s" : ""}`;
+  }
+  return `${minutes} min`;
+}
+function StandardServiceCard({
+  product,
+  onBook,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      product.duration_minutes != null && /* @__PURE__ */ jsx("span", { className: "absolute bottom-3 left-3 inline-flex items-center gap-1 text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: formatDuration2(product.duration_minutes, product.duration_unit) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: /* @__PURE__ */ jsx(Price, { amount: product.default_price }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse" }),
+          /* @__PURE__ */ jsx("span", { children: "Available" }),
+          hasDeposit && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "text-border", children: "\xB7" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx(Price, { amount: product.deposit_amount }),
+              " deposit"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBook?.(product);
+            },
+            className: "text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors",
+            children: "Book now \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function formatDuration3(minutes, unit) {
+  if (unit && unit !== "minutes") return `${minutes} ${unit}`;
+  if (minutes >= 60) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return m > 0 ? `${h}h ${m}m` : `${h} hr`;
+  }
+  return `${minutes} min`;
+}
+function CompactServiceCard({
+  product,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
+  const hasBillingPlans = product.billing_plans && product.billing_plans.length > 0;
+  const href = `/products/${product.slug}`;
+  const content = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 p-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-[72px] h-[72px] rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14px] font-semibold text-foreground leading-tight truncate", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: product.description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
+        product.duration_minutes != null && /* @__PURE__ */ jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: formatDuration3(product.duration_minutes, product.duration_unit) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10.5px] font-medium text-emerald-600", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-[6px] h-[6px] rounded-full bg-emerald-500" }),
+          "Available"
+        ] }),
+        hasDeposit && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
+          /* @__PURE__ */ jsx(Price, { amount: product.deposit_amount }),
+          " deposit"
+        ] }),
+        hasBillingPlans && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-0.5 text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded", children: "Subscription" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+      /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+    ] })
+  ] });
+  const shellClass = cn(
+    "group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden",
+    "shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]",
+    "border border-transparent",
+    "transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]",
+    "hover:-translate-y-[1px] hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)] hover:border-primary/20",
+    className
+  );
+  if (renderLink) {
+    return renderLink({ href, className: shellClass, children: content });
+  }
+  return /* @__PURE__ */ jsx("a", { href, className: shellClass, "data-cimplify-card": true, children: content });
+}
+function ScheduleServiceCard({
+  product,
+  slots,
+  onBook,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const href = `/products/${product.slug}`;
+  const durationLabel = product.duration_minutes != null ? `${product.duration_minutes} ${product.duration_unit ?? "min"}` : null;
+  const displaySlots = (slots || []).slice(0, 3);
+  const shellClass = cn(
+    "group block text-left cursor-pointer bg-card rounded-[14px] overflow-hidden",
+    "shadow-[0_1px_3px_rgba(0,0,0,0.04),0_6px_24px_rgba(0,0,0,0.06)]",
+    "transition-all duration-300 ease-[cubic-bezier(0.19,1,0.22,1)]",
+    "hover:-translate-y-1 hover:shadow-[0_2px_6px_rgba(0,0,0,0.04),0_12px_40px_rgba(0,0,0,0.10)]",
+    className
+  );
+  const inner = /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-[12.5px] text-muted-foreground mt-0.5", children: [
+          durationLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+            durationLabel,
+            " \xB7 "
+          ] }),
+          /* @__PURE__ */ jsx(Price, { amount: product.default_price })
+        ] })
+      ] }),
+      image && /* @__PURE__ */ jsx("div", { className: "w-14 h-14 rounded-xl overflow-hidden bg-muted shrink-0", children: renderImage ? renderImage({ src: image, alt: product.name, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) })
+    ] }),
+    product.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed", children: product.description }),
+    displaySlots.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-3 border-t border-border", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest mb-2", children: product.general_service_capacity != null && product.general_service_capacity > 1 ? "Upcoming classes" : "Next available" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-wrap", children: displaySlots.map((slot, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onBook?.(product);
+          },
+          className: cn(
+            "text-[12.5px] font-medium px-3 py-1.5 rounded-lg transition-all duration-200 ease-out hover:scale-[1.04]",
+            i === 0 ? "bg-primary text-primary-foreground font-semibold shadow-sm" : "bg-muted text-foreground hover:bg-muted/80"
+          ),
+          children: new Date(slot.start_time).toLocaleString(void 0, {
+            weekday: "short",
+            hour: "numeric",
+            minute: "2-digit"
+          })
+        },
+        i
+      )) })
+    ] })
+  ] });
+  if (renderLink) {
+    return renderLink({ href, className: shellClass, children: inner });
+  }
+  return /* @__PURE__ */ jsx("a", { href, className: shellClass, "data-cimplify-card": true, children: inner });
+}
+var UNIT_LABELS = {
+  minutes: "min",
+  hours: "hr",
+  days: "day",
+  nights: "night",
+  weeks: "week",
+  months: "mo",
+  years: "yr"
+};
+function RentalServiceCard({
+  product,
+  onBook,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
+  const unit = product.duration_unit ? UNIT_LABELS[product.duration_unit] || product.duration_unit : "day";
+  const status = product.inventory_status;
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: [
+        "Per ",
+        unit
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price }),
+        "/",
+        unit
+      ] }),
+      product.general_service_capacity != null && product.general_service_capacity > 1 && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-blue-50/90 text-blue-700 border border-blue-200/50 backdrop-blur px-2 py-0.5 rounded-md", children: [
+        "Up to ",
+        product.general_service_capacity,
+        " guests"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
+        product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: [
+          "Min. ",
+          product.min_order_quantity,
+          " ",
+          unit,
+          product.min_order_quantity > 1 ? "s" : ""
+        ] }),
+        hasDeposit && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
+          /* @__PURE__ */ jsx(Price, { amount: product.deposit_amount }),
+          " deposit"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        status && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[12px]", children: [
+          /* @__PURE__ */ jsx("span", { className: cn(
+            "w-[7px] h-[7px] rounded-full shrink-0",
+            status.in_stock ? "bg-emerald-500" : "bg-red-500"
+          ) }),
+          /* @__PURE__ */ jsx("span", { className: status.in_stock ? "text-muted-foreground" : "text-red-600", children: status.in_stock ? status.stock_level != null ? `${status.stock_level} available` : "Available" : "Unavailable" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBook?.(product);
+            },
+            className: "text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors",
+            children: "Reserve now \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function AccommodationCard({
+  product,
+  onBook,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
+  const cancellationHours = product.cancellation_window_minutes ? Math.floor(product.cancellation_window_minutes / 60) : null;
+  const tags = product.tags || [];
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsx("span", { className: "absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: "Per night" }),
+      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price }),
+        "/night"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
+      product.general_service_capacity != null && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0" }) }),
+        product.general_service_capacity,
+        " guest",
+        product.general_service_capacity > 1 ? "s" : ""
+      ] }),
+      hasTiers && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(VolumePricing, { tiers: product.quantity_pricing }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
+          cancellationHours != null && /* @__PURE__ */ jsxs("span", { className: "text-emerald-600 font-medium", children: [
+            "Free cancellation ",
+            cancellationHours,
+            "h"
+          ] }),
+          product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxs("span", { children: [
+            "Min. ",
+            product.min_order_quantity,
+            " nights"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBook?.(product);
+            },
+            className: "text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors",
+            children: "Book room \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var UNIT_LABELS2 = {
+  weeks: "week",
+  months: "mo",
+  years: "yr"
+};
+function LeaseServiceCard({
+  product,
+  onBook,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const hasDeposit = product.deposit_type && product.deposit_type !== "none" && product.deposit_amount;
+  const hasTiers = product.quantity_pricing && product.quantity_pricing.length > 1;
+  const unit = product.duration_unit ? UNIT_LABELS2[product.duration_unit] || product.duration_unit : "mo";
+  const tags = product.tags || [];
+  const cancellationHours = product.cancellation_window_minutes ? Math.floor(product.cancellation_window_minutes / 60) : null;
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 left-3 inline-flex items-center text-[12px] font-semibold px-2.5 py-1 rounded-lg bg-background/92 backdrop-blur-xl text-foreground shadow-sm", children: [
+        "Per ",
+        unit
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price }),
+        "/",
+        unit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
+      hasTiers && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(VolumePricing, { tiers: product.quantity_pricing }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
+        product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: [
+          "Min. ",
+          product.min_order_quantity,
+          " ",
+          unit,
+          product.min_order_quantity > 1 ? "s" : ""
+        ] }),
+        hasDeposit && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
+          /* @__PURE__ */ jsx(Price, { amount: product.deposit_amount }),
+          " deposit"
+        ] }),
+        cancellationHours != null && /* @__PURE__ */ jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground", children: cancellationHours >= 720 ? `${Math.floor(cancellationHours / 720)} month notice` : `${cancellationHours}h notice` })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        product.billing_plans && product.billing_plans.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[10.5px] font-semibold text-primary px-1.5 py-0.5 bg-primary/10 rounded", children: [
+          product.billing_plans[0].frequency,
+          " billing"
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBook?.(product);
+            },
+            className: "text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors ml-auto",
+            children: "Enquire now \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var FREQUENCY_LABELS2 = {
+  weekly: "/week",
+  monthly: "/mo",
+  quarterly: "/qtr",
+  annually: "/yr"
+};
+function SubscriptionCard({
+  product,
+  onBook,
+  renderImage,
+  renderLink,
+  className
+}) {
+  const image = product.image_url || product.images?.[0] || "";
+  const plans = product.billing_plans || [];
+  const primaryPlan = plans[0];
+  const frequency = primaryPlan?.frequency ? FREQUENCY_LABELS2[primaryPlan.frequency] || `/${primaryPlan.frequency}` : "/mo";
+  const hasTrial = primaryPlan?.trial_days != null && primaryPlan.trial_days > 0;
+  const tags = product.tags || [];
+  return /* @__PURE__ */ jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price }),
+        frequency
+      ] }),
+      hasTrial && /* @__PURE__ */ jsxs("span", { className: "absolute top-3 left-3 text-[11px] font-semibold tracking-wide bg-emerald-50/90 text-emerald-700 border border-emerald-200/50 backdrop-blur px-2 py-0.5 rounded-md", children: [
+        primaryPlan.trial_days,
+        "-day free trial"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
+      plans.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1", children: plans.slice(0, 3).map((plan) => {
+        const label = plan.frequency ? plan.frequency.charAt(0).toUpperCase() + plan.frequency.slice(1) : "Standard";
+        const hasMarkup = plan.markup_type && plan.markup_amount;
+        const isSavings = plan.markup_type === "percentage" && plan.markup_amount != null && plan.markup_amount < 0;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: hasMarkup && isSavings && /* @__PURE__ */ jsxs("span", { className: "text-emerald-600 mr-1", children: [
+            "Save ",
+            Math.abs(plan.markup_amount),
+            "%"
+          ] }) })
+        ] }, plan.id);
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
+          hasTrial && /* @__PURE__ */ jsx("span", { className: "text-emerald-600 font-medium", children: "Free trial" }),
+          primaryPlan?.setup_fee != null && primaryPlan.setup_fee > 0 && /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsx(Price, { amount: primaryPlan.setup_fee }),
+            " setup"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onBook?.(product);
+            },
+            className: "text-[13px] font-semibold text-primary hover:text-primary/80 transition-colors",
+            children: "Subscribe \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/react/cards/index.ts
+var CardVariant = /* @__PURE__ */ ((CardVariant2) => {
+  CardVariant2["Food"] = "food";
+  CardVariant2["Retail"] = "retail";
+  CardVariant2["Wholesale"] = "wholesale";
+  CardVariant2["Digital"] = "digital";
+  CardVariant2["Standard"] = "standard";
+  CardVariant2["Compact"] = "compact";
+  CardVariant2["Schedule"] = "schedule";
+  CardVariant2["Rental"] = "rental";
+  CardVariant2["Accommodation"] = "accommodation";
+  CardVariant2["Lease"] = "lease";
+  CardVariant2["Subscription"] = "subscription";
+  return CardVariant2;
+})(CardVariant || {});
 var ASPECT_STYLES2 = {
   square: { aspectRatio: "1/1" },
   "4/3": { aspectRatio: "4/3" },
   "16/10": { aspectRatio: "16/10" },
   "3/4": { aspectRatio: "3/4" }
 };
+var BUILT_IN_CARDS = {
+  ["food" /* Food */]: FoodProductCard,
+  ["retail" /* Retail */]: RetailProductCard,
+  ["wholesale" /* Wholesale */]: WholesaleProductCard,
+  ["digital" /* Digital */]: DigitalProductCard,
+  ["standard" /* Standard */]: StandardServiceCard,
+  ["rental" /* Rental */]: RentalServiceCard,
+  ["accommodation" /* Accommodation */]: AccommodationCard,
+  ["lease" /* Lease */]: LeaseServiceCard,
+  ["subscription" /* Subscription */]: SubscriptionCard
+};
+var RENTAL_UNITS = /* @__PURE__ */ new Set([DURATION_UNIT.Days, DURATION_UNIT.Hours]);
+var LEASE_UNITS = /* @__PURE__ */ new Set([DURATION_UNIT.Weeks, DURATION_UNIT.Months, DURATION_UNIT.Years]);
+function resolveCardVariant(product) {
+  if (product.quantity_pricing && product.quantity_pricing.length > 1) {
+    return "wholesale" /* Wholesale */;
+  }
+  if (product.type === PRODUCT_TYPE.Digital) {
+    return "digital" /* Digital */;
+  }
+  if (product.type === PRODUCT_TYPE.Service) {
+    if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {
+      return "rental" /* Rental */;
+    }
+    if (product.duration_unit === DURATION_UNIT.Nights) {
+      return "accommodation" /* Accommodation */;
+    }
+    if (product.duration_unit && LEASE_UNITS.has(product.duration_unit)) {
+      return "lease" /* Lease */;
+    }
+    if (product.billing_plans && product.billing_plans.length > 0 && !product.duration_minutes) {
+      return "subscription" /* Subscription */;
+    }
+    return "standard" /* Standard */;
+  }
+  if (product.render_hint === RENDER_HINT.Food) {
+    return "food" /* Food */;
+  }
+  if (product.render_hint === RENDER_HINT.Physical) {
+    return "retail" /* Retail */;
+  }
+  return "retail" /* Retail */;
+}
 function ProductCard({
   product,
   displayMode,
+  variant,
+  cards,
   href,
   renderModal,
   renderImage,
   renderLink,
+  onQuickAdd,
   children,
   aspectRatio = "4/3",
   className,
@@ -5525,61 +6344,42 @@ function ProductCard({
     setIsOpen(false);
   }, []);
   const imageUrl = product.image_url || product.images?.[0];
-  const cardBody = children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    imageUrl && /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-cimplify-product-card-image-container": true,
-        className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
-        style: ASPECT_STYLES2[aspectRatio],
-        children: renderImage ? renderImage({
-          src: imageUrl,
-          alt: product.name,
-          className: classNames?.image
-        }) : /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: imageUrl,
-            alt: product.name,
-            className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", classNames?.image),
-            "data-cimplify-product-card-image": true
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-cimplify-product-card-body": true,
-        className: cn("p-4 flex flex-col gap-1", classNames?.body),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-cimplify-product-card-name": true,
-              className: cn("font-semibold text-foreground leading-tight", classNames?.name),
-              children: product.name
-            }
-          ),
-          product.description && /* @__PURE__ */ jsx(
-            "span",
-            {
-              "data-cimplify-product-card-description": true,
-              className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description),
-              children: product.description
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Price,
+  const cardBody = (() => {
+    if (children) return children;
+    const SlugCard = cards?.[product.slug];
+    if (SlugCard) {
+      return /* @__PURE__ */ jsx(SlugCard, { product, onQuickAdd, renderImage, renderLink });
+    }
+    const key = variant ?? resolveCardVariant(product);
+    const ResolvedCard = BUILT_IN_CARDS[key];
+    if (ResolvedCard) {
+      return /* @__PURE__ */ jsx(ResolvedCard, { product, onQuickAdd, renderImage, renderLink });
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      imageUrl && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-cimplify-product-card-image-container": true,
+          className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
+          style: ASPECT_STYLES2[aspectRatio],
+          children: renderImage ? renderImage({ src: imageUrl, alt: product.name, className: classNames?.image }) : /* @__PURE__ */ jsx(
+            "img",
             {
-              amount: product.default_price,
-              className: cn("text-sm font-medium text-foreground mt-1", classNames?.price)
+              src: imageUrl,
+              alt: product.name,
+              className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", classNames?.image),
+              "data-cimplify-product-card-image": true
             }
           )
-        ]
-      }
-    )
-  ] });
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { "data-cimplify-product-card-body": true, className: cn("p-4 flex flex-col gap-1", classNames?.body), children: [
+        /* @__PURE__ */ jsx("span", { "data-cimplify-product-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: product.name }),
+        product.description && /* @__PURE__ */ jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: product.description }),
+        /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: cn("text-sm font-medium text-foreground mt-1", classNames?.price) })
+      ] })
+    ] });
+  })();
   if (mode === "page") {
     const linkHref = href ?? `/menu/${product.slug}`;
     const linkClassName = cn("group block no-underline text-[inherit] rounded-xl border border-border bg-background transition-shadow duration-200 hover:shadow-md", className, classNames?.root);
@@ -7073,7 +7873,7 @@ function BookingList({
 }
 
 // src/react/utils/format-duration.ts
-var UNIT_LABELS = {
+var UNIT_LABELS3 = {
   minutes: { singular: "min", plural: "min" },
   hours: { singular: "hr", plural: "hrs" },
   days: { singular: "day", plural: "days" },
@@ -7082,9 +7882,9 @@ var UNIT_LABELS = {
   months: { singular: "month", plural: "months" },
   years: { singular: "year", plural: "years" }
 };
-function formatDuration2(value, unit) {
+function formatDuration4(value, unit) {
   const resolved = unit ?? "minutes";
-  const labels = UNIT_LABELS[resolved];
+  const labels = UNIT_LABELS3[resolved];
   const label = value === 1 ? labels.singular : labels.plural;
   return `${value} ${label}`;
 }
@@ -7139,7 +7939,7 @@ function ServiceCard({
         }
       ),
       /* @__PURE__ */ jsxs("div", { "data-cimplify-service-card-meta": true, className: cn("flex items-center gap-2 mt-1 text-sm", classNames?.meta), children: [
-        /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-duration": true, className: cn("text-muted-foreground", classNames?.duration), children: formatDuration2(service.duration_minutes, service.duration_unit) }),
+        /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-duration": true, className: cn("text-muted-foreground", classNames?.duration), children: formatDuration4(service.duration_minutes, service.duration_unit) }),
         service.price && /* @__PURE__ */ jsx("span", { "data-cimplify-service-card-price": true, className: cn("font-medium text-foreground", classNames?.price), children: /* @__PURE__ */ jsx(Price, { amount: service.price }) })
       ] })
     ] }),
@@ -7621,12 +8421,6 @@ function getMetadataStringList(metadata, key) {
   if (!Array.isArray(value)) return [];
   return value.filter((item) => typeof item === "string");
 }
-function PriceRange({ product, className }) {
-  const { displayCurrency } = useCimplify();
-  const range = getPriceRange(product);
-  if (!range) return null;
-  return /* @__PURE__ */ jsx("span", { "data-cimplify-price-range": true, className, children: formatPriceRange(range.min, range.max, displayCurrency) });
-}
 function DefaultProductLayout({
   product,
   onAddToCart,
@@ -7714,18 +8508,6 @@ function DefaultProductLayout({
     )
   ] });
 }
-var DIETARY_TAGS = /* @__PURE__ */ new Set([
-  "vegetarian",
-  "vegan",
-  "gluten-free",
-  "dairy-free",
-  "nut-free",
-  "spicy",
-  "halal",
-  "kosher",
-  "organic",
-  "sugar-free"
-]);
 function FoodProductLayout({
   product,
   onAddToCart,
@@ -7735,9 +8517,7 @@ function FoodProductLayout({
   className
 }) {
   const images = product.images || (product.image_url ? [product.image_url] : []);
-  const allTags = product.tags || [];
-  const dietaryTags = allTags.filter((t) => DIETARY_TAGS.has(t));
-  const otherTags = allTags.filter((t) => !DIETARY_TAGS.has(t));
+  const tags = product.tags || [];
   const ingredients = getMetadataStringList(product.metadata, "ingredients");
   const pairings = getMetadataStringList(product.metadata, "pairings");
   return /* @__PURE__ */ jsxs("div", { "data-cimplify-product-layout": "food", className: cn("space-y-8", className), children: [
@@ -7754,13 +8534,12 @@ function FoodProductLayout({
         ),
         right: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
-            dietaryTags.map((tag) => /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full", children: tag }, tag)),
+            tags.map((tag) => /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full", children: tag }, tag)),
             product.allergies && product.allergies.map((allergy) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 px-2.5 py-1 bg-amber-100 text-amber-800 text-xs font-medium rounded-full", children: [
               "Contains ",
               allergy
             ] }, allergy))
           ] }),
-          /* @__PURE__ */ jsx(TagPills, { tags: otherTags }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
             /* @__PURE__ */ jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold mt-2 block" })
@@ -8146,16 +8925,16 @@ function resolveTemplateKey(product) {
   if (product.quantity_pricing && product.quantity_pricing.length > 1) {
     return "wholesale" /* Wholesale */;
   }
-  if (product.type === "service") {
+  if (product.type === PRODUCT_TYPE.Service) {
     return "service" /* Service */;
   }
-  if (product.type === "digital") {
+  if (product.type === PRODUCT_TYPE.Digital) {
     return "digital" /* Digital */;
   }
-  if (product.render_hint === "food") {
+  if (product.render_hint === RENDER_HINT.Food) {
     return "food" /* Food */;
   }
-  if (product.render_hint === "physical") {
+  if (product.render_hint === RENDER_HINT.Physical) {
     return "physical" /* Physical */;
   }
   return "default" /* Default */;
@@ -8852,7 +9631,7 @@ function BookingPage({
     ] }) }),
     /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-service-info": true, className: classNames?.serviceInfo, children: [
       /* @__PURE__ */ jsx("span", { "data-cimplify-booking-service-name": true, children: service.name }),
-      /* @__PURE__ */ jsx("span", { "data-cimplify-booking-service-duration": true, children: formatDuration2(service.duration_minutes, service.duration_unit) }),
+      /* @__PURE__ */ jsx("span", { "data-cimplify-booking-service-duration": true, children: formatDuration4(service.duration_minutes, service.duration_unit) }),
       service.price && /* @__PURE__ */ jsx("span", { "data-cimplify-booking-service-price": true, children: /* @__PURE__ */ jsx(Price, { amount: service.price }) }),
       hasDeposit && /* @__PURE__ */ jsxs("span", { "data-cimplify-booking-deposit-info": true, className: classNames?.depositInfo, children: [
         "Deposit: ",
@@ -8924,7 +9703,7 @@ function BookingPage({
         ] }),
         /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
           /* @__PURE__ */ jsx("span", { children: "Duration" }),
-          /* @__PURE__ */ jsx("span", { children: formatDuration2(service.duration_minutes, service.duration_unit) })
+          /* @__PURE__ */ jsx("span", { children: formatDuration4(service.duration_minutes, service.duration_unit) })
         ] }),
         selectedResourceId && resources && /* @__PURE__ */ jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
           /* @__PURE__ */ jsx("span", { children: "Room" }),
@@ -9402,4 +10181,4 @@ function CurrencySelector({
   }) });
 }
 
-export { Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleSelector, CartPage, CartSummary, CataloguePage, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyCheckout, CimplifyProvider, CollectionPage, CompositeSelector, CurrencySelector, CustomAttributesTable, DateSlotPicker, DealBanner, DealsPage, DefaultProductLayout, DeliveryEstimate, DigitalProductLayout, DiscountInput, ElementsProvider, FoodProductLayout, InventoryBadge, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, ResourcePicker, SaleBadge, SearchInput, SearchPage, ServiceCard, ServiceGrid, ServiceProductLayout, SessionMessageBanner, SlotPicker, StaffPicker, StoreNav, TagPills, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductLayout, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };
+export { AccommodationCard, Ad, AdProvider, AddOnSelector, AddressElement, AuthElement, AvailabilityBadge, BillingPlanSelector, BookingCard, BookingList, BookingPage, BookingsPage, BundleSelector, CardImage, CardShell, CardVariant, CartPage, CartSummary, CataloguePage, CategoryFilter, CategoryGrid, CheckoutPage, CimplifyCheckout, CimplifyProvider, CollectionPage, CompactServiceCard, CompositeSelector, CurrencySelector, CustomAttributesTable, DateSlotPicker, DealBanner, DealsPage, DefaultProductLayout, DeliveryEstimate, DigitalProductCard, DigitalProductLayout, DiscountInput, ElementsProvider, FoodProductCard, FoodProductLayout, InventoryBadge, LeaseServiceCard, LocationPicker, MetadataStringList, OrderDetailPage, OrderHistory, OrderHistoryPage, OrderSummary, PaymentElement, Price, PriceRange, ProductCard, ProductCustomizer, ProductGrid, ProductImageGallery, ProductPage, ProductSheet, ProductTemplate, PropertiesTable, QuantitySelector, QuickAddButton, RecentlyViewed, RecommendationCarousel, RelatedProductsSection, RentalServiceCard, ResourcePicker, RetailProductCard, SaleBadge, ScheduleServiceCard, SearchInput, SearchPage, ServiceCard, ServiceGrid, ServiceProductLayout, SessionMessageBanner, SlotPicker, SoldOutOverlay, StaffPicker, StandardServiceCard, StoreNav, SubscriptionCard, TagPills, TwoColumnGrid, VariantSelector, VolumePricing, WholesaleProductCard, WholesaleProductLayout, WishlistButton, cn, roomToResource, useActivityState, useAds, useAttributeDefinitions, useAvailableSlots, useBillingPlans, useBookings, useBootstrap, useBundles, useCart, useCategories, useCheckout, useCimplify, useCimplifyClient, useCollection, useCollections, useDeals, useDeliveryFee, useElements, useElementsReady, useFxRate, useLocations, useOptionalCimplify, useOrder, useOrders, useProduct, useProductAvailability, useProductDeals, useProductPrice, useProductSchedules, useProducts, useProductsOnSale, usePropertyFacets, useQuote, useRecommendations, useSearch, useServiceAvailability, useServices, useTaxonomies, useTaxonomy, useTaxonomyPath, useValidateDiscount, useVariantSelector };