@cimplify/sdk 0.24.2 → 0.26.0

package/dist/react.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkIYQGGFVQ_js = require('./chunk-IYQGGFVQ.js');
+var chunkWMQXSDRC_js = require('./chunk-WMQXSDRC.js');
 var chunkI4F4Y3D4_js = require('./chunk-I4F4Y3D4.js');
 var chunkPEDLCL72_js = require('./chunk-PEDLCL72.js');
 var React3 = require('react');
@@ -1061,7 +1061,7 @@ var DEFAULT_COUNTRY = "US";
 function createDefaultClient() {
   const processRef = globalThis.process;
   const envPublicKey = processRef?.env?.NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY || "";
-  return chunkIYQGGFVQ_js.createCimplifyClient({ publicKey: envPublicKey });
+  return chunkWMQXSDRC_js.createCimplifyClient({ publicKey: envPublicKey });
 }
 function getStoredLocationId() {
   if (typeof window === "undefined" || !window.localStorage) {
@@ -3565,7 +3565,7 @@ function VariantSelector({
                   {
                     "data-cimplify-variant-name": true,
                     className: cn("flex-1 min-w-0 text-sm", classNames?.name),
-                    children: chunkIYQGGFVQ_js.getVariantDisplayName(variant, productName)
+                    children: chunkWMQXSDRC_js.getVariantDisplayName(variant, productName)
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-variant-pricing": true, className: cn("text-sm text-muted-foreground", classNames?.pricing), children: [
@@ -5101,7 +5101,7 @@ function CartLineItemRow({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item": true, className: classNames?.item, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-item-info": true, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-name": true, className: classNames?.itemName, children: item.product.name }),
-      item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: chunkIYQGGFVQ_js.getVariantDisplayName(item.variant, item.product.name) }),
+      item.variant && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-cart-item-variant": true, children: chunkWMQXSDRC_js.getVariantDisplayName(item.variant, item.product.name) }),
       item.addOnOptions && item.addOnOptions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-cart-item-addons": true, children: [
         "+ ",
         item.addOnOptions.map((opt) => opt.name).join(", ")
@@ -5498,19 +5498,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "3", x2: "8", y2: "13" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "8", x2: "13", y2: "8" })
+      ] })
+    }
+  );
+}
+function WishlistButton({
+  filled = false,
+  onClick,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 (!chunkPEDLCL72_js.isOnSale(product)) return null;
+  const pct = chunkPEDLCL72_js.getDiscountPercentage(product);
+  if (!pct || pct <= 0) return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.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 === chunkWMQXSDRC_js.PRODUCT_TYPE.Composite;
+  return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
+      isSignature && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 opacity-70", fill: "currentColor", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        QuickAddButton,
+        {
+          onClick: () => onQuickAdd?.(product),
+          className: "absolute bottom-3 right-3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight truncate", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3", children: [
+        isComposite ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-bold", children: [
+          "From ",
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: tags.slice(0, 2).map((tag) => /* @__PURE__ */ jsxRuntime.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 = chunkPEDLCL72_js.isOnSale(product);
+  const swatches = getColorSwatches(product);
+  return /* @__PURE__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, disabled: outOfStock, className, children: [
+    outOfStock && /* @__PURE__ */ jsxRuntime.jsx(SoldOutOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "3/4", renderImage, children: [
+      onSale && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3", children: /* @__PURE__ */ jsxRuntime.jsx(SaleBadge2, { product }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(WishlistButton, { className: "absolute top-3 right-3" }),
+      product.inventory_status?.low_stock && product.inventory_status?.stock_level && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
+      product.vendor && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-widest", children: product.vendor }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate", children: product.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        onSale && /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: chunkPEDLCL72_js.getBasePrice(product), className: "text-xs text-muted-foreground line-through" })
+      ] }),
+      swatches.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 mt-2.5", children: swatches.map((name) => /* @__PURE__ */ jsxRuntime.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 = chunkPEDLCL72_js.getPriceRange(product);
+  if (!range) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-price-range": true, className, children: chunkPEDLCL72_js.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "square", renderImage, children: [
+      product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        QuickAddButton,
+        {
+          onClick: () => onQuickAdd?.(product),
+          className: "absolute bottom-3 right-3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
+      product.sku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground font-mono", children: product.sku }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-semibold text-foreground leading-snug tracking-tight mt-1 truncate", children: product.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: hasTiers ? /* @__PURE__ */ jsxRuntime.jsx(PriceRange, { product, className: "text-sm font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }) }),
+      status && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardImage, { src: image, alt: product.name, aspectRatio: "4/3", renderImage, children: typeBadge && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-3.5", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-1 line-clamp-1", children: product.description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+        product.file_type && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[12px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[7px] h-[7px] rounded-full bg-emerald-500 animate-pulse" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Available" }),
+          hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-border", children: "\xB7" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+              " deposit"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14px] font-semibold text-foreground leading-tight truncate", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-0.5 truncate", children: product.description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-2 flex-wrap", children: [
+        product.duration_minutes != null && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1 text-[10.5px] font-medium text-emerald-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[6px] h-[6px] rounded-full bg-emerald-500" }),
+          "Available"
+        ] }),
+        hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+          " deposit"
+        ] }),
+        hasBillingPlans && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-sm font-bold" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[12.5px] text-muted-foreground mt-0.5", children: [
+          durationLabel && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            durationLabel,
+            " \xB7 "
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price })
+        ] })
+      ] }),
+      image && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("img", { src: image, alt: product.name, className: "w-full h-full object-cover" }) })
+    ] }),
+    product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-muted-foreground mt-2 line-clamp-2 leading-relaxed", children: product.description }),
+    displaySlots.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 pt-3 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-wrap", children: displaySlots.map((slot, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        "/",
+        unit
+      ] }),
+      product.general_service_capacity != null && product.general_service_capacity > 1 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
+        product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+          " deposit"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        status && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-[12px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+            "w-[7px] h-[7px] rounded-full shrink-0",
+            status.in_stock ? "bg-emerald-500" : "bg-red-500"
+          ) }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        "/night"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mt-2 text-[11px] text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3.5 h-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(VolumePricing, { tiers: product.quantity_pricing }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
+          cancellationHours != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-emerald-600 font-medium", children: [
+            "Free cancellation ",
+            cancellationHours,
+            "h"
+          ] }),
+          product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Min. ",
+            product.min_order_quantity,
+            " nights"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        "/",
+        unit
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 4).map((tag) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium text-muted-foreground px-1.5 py-0.5 bg-muted rounded", children: tag }, tag)) }),
+      hasTiers && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsxRuntime.jsx(VolumePricing, { tiers: product.quantity_pricing }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mt-3", children: [
+        product.min_order_quantity != null && product.min_order_quantity > 1 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "text-[10.5px] font-medium text-amber-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.deposit_amount }),
+          " deposit"
+        ] }),
+        cancellationHours != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10.5px] font-medium text-muted-foreground", children: cancellationHours >= 720 ? `${Math.floor(cancellationHours / 720)} month notice` : `${cancellationHours}h notice` })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(CardShell, { product, renderLink, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(CardImage, { src: image, alt: product.name, aspectRatio: "16/9", renderImage, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/50 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute bottom-3 right-3 text-white font-bold text-lg drop-shadow-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price }),
+        frequency
+      ] }),
+      hasTrial && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[14.5px] font-bold text-foreground leading-snug tracking-tight", children: product.name }),
+      product.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12.5px] text-muted-foreground mt-1 leading-relaxed line-clamp-2", children: product.description }),
+      tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-2.5", children: tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-[11px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: hasMarkup && isSavings && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-emerald-600 mr-1", children: [
+            "Save ",
+            Math.abs(plan.markup_amount),
+            "%"
+          ] }) })
+        ] }, plan.id);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-3 pt-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[11px] text-muted-foreground", children: [
+          hasTrial && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-emerald-600 font-medium", children: "Free trial" }),
+          primaryPlan?.setup_fee != null && primaryPlan.setup_fee > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: primaryPlan.setup_fee }),
+            " setup"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.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([chunkWMQXSDRC_js.DURATION_UNIT.Days, chunkWMQXSDRC_js.DURATION_UNIT.Hours]);
+var LEASE_UNITS = /* @__PURE__ */ new Set([chunkWMQXSDRC_js.DURATION_UNIT.Weeks, chunkWMQXSDRC_js.DURATION_UNIT.Months, chunkWMQXSDRC_js.DURATION_UNIT.Years]);
+function resolveCardVariant(product) {
+  if (product.quantity_pricing && product.quantity_pricing.length > 1) {
+    return "wholesale" /* Wholesale */;
+  }
+  if (product.type === chunkWMQXSDRC_js.PRODUCT_TYPE.Digital) {
+    return "digital" /* Digital */;
+  }
+  if (product.type === chunkWMQXSDRC_js.PRODUCT_TYPE.Service) {
+    if (product.duration_unit && RENTAL_UNITS.has(product.duration_unit)) {
+      return "rental" /* Rental */;
+    }
+    if (product.duration_unit === chunkWMQXSDRC_js.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 === chunkWMQXSDRC_js.RENDER_HINT.Food) {
+    return "food" /* Food */;
+  }
+  if (product.render_hint === chunkWMQXSDRC_js.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,
@@ -5536,61 +6349,42 @@ function ProductCard({
     setIsOpen(false);
   }, []);
   const imageUrl = product.image_url || product.images?.[0];
-  const cardBody = children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    imageUrl && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-cimplify-product-card-body": true,
-        className: cn("p-4 flex flex-col gap-1", classNames?.body),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "data-cimplify-product-card-name": true,
-              className: cn("font-semibold text-foreground leading-tight", classNames?.name),
-              children: product.name
-            }
-          ),
-          product.description && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              "data-cimplify-product-card-description": true,
-              className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description),
-              children: product.description
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Price,
+  const cardBody = (() => {
+    if (children) return children;
+    const SlugCard = cards?.[product.slug];
+    if (SlugCard) {
+      return /* @__PURE__ */ jsxRuntime.jsx(SlugCard, { product, onQuickAdd, renderImage, renderLink });
+    }
+    const key = variant ?? resolveCardVariant(product);
+    const ResolvedCard = BUILT_IN_CARDS[key];
+    if (ResolvedCard) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ResolvedCard, { product, onQuickAdd, renderImage, renderLink });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      imageUrl && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-card-body": true, className: cn("p-4 flex flex-col gap-1", classNames?.body), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: product.name }),
+        product.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-product-card-description": true, className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description), children: product.description }),
+        /* @__PURE__ */ jsxRuntime.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);
@@ -7033,458 +7827,356 @@ function BookingList({
     filter,
     enabled: bookingsProp === void 0
   });
-  const bookings = bookingsProp ?? fetched;
-  if (isLoading && bookings.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-booking-list": true,
-        "aria-busy": "true",
-        className: cn(className, classNames?.root, classNames?.loading)
-      }
-    );
-  }
-  if (bookings.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-booking-list": true,
-        "data-empty": true,
-        className: cn(className, classNames?.root, classNames?.empty),
-        children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: emptyMessage })
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-list": true, className: cn(className, classNames?.root), children: bookings.map((booking) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-cimplify-booking-list-item": true,
-      className: classNames?.item,
-      onClick: () => onBookingClick?.(booking),
-      role: onBookingClick ? "button" : void 0,
-      tabIndex: onBookingClick ? 0 : void 0,
-      onKeyDown: onBookingClick ? (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onBookingClick(booking);
-        }
-      } : void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        BookingCard,
-        {
-          booking,
-          onCancel,
-          onReschedule,
-          renderBooking
-        }
-      )
-    },
-    booking.order_id
-  )) });
-}
-
-// src/react/utils/format-duration.ts
-var UNIT_LABELS = {
-  minutes: { singular: "min", plural: "min" },
-  hours: { singular: "hr", plural: "hrs" },
-  days: { singular: "day", plural: "days" },
-  nights: { singular: "night", plural: "nights" },
-  weeks: { singular: "week", plural: "weeks" },
-  months: { singular: "month", plural: "months" },
-  years: { singular: "year", plural: "years" }
-};
-function formatDuration2(value, unit) {
-  const resolved = unit ?? "minutes";
-  const labels = UNIT_LABELS[resolved];
-  const label = value === 1 ? labels.singular : labels.plural;
-  return `${value} ${label}`;
-}
-var ASPECT_STYLES3 = {
-  square: { aspectRatio: "1/1" },
-  "4/3": { aspectRatio: "4/3" },
-  "16/10": { aspectRatio: "16/10" },
-  "3/4": { aspectRatio: "3/4" }
-};
-function ServiceCard({
-  service,
-  onBook,
-  href,
-  actionLabel = "Book",
-  renderImage,
-  children,
-  aspectRatio = "4/3",
-  className,
-  classNames
-}) {
-  const imageUrl = service.image_url;
-  const cardBody = children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-service-card-image-container": true,
-        className: cn("overflow-hidden rounded-t-xl", classNames?.imageContainer),
-        style: ASPECT_STYLES3[aspectRatio],
-        children: renderImage ? renderImage({
-          src: imageUrl,
-          alt: service.name,
-          className: classNames?.image
-        }) : /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: imageUrl,
-            alt: service.name,
-            className: cn("w-full h-full object-cover transition-transform duration-300 group-hover:scale-105", classNames?.image),
-            "data-cimplify-service-card-image": true
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-body": true, className: cn("p-4 flex flex-col gap-1.5", classNames?.body), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-name": true, className: cn("font-semibold text-foreground leading-tight", classNames?.name), children: service.name }),
-      service.description && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          "data-cimplify-service-card-description": true,
-          className: cn("text-sm text-muted-foreground line-clamp-2", classNames?.description),
-          children: service.description
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-service-card-meta": true, className: cn("flex items-center gap-2 mt-1 text-sm", classNames?.meta), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-duration": true, className: cn("text-muted-foreground", classNames?.duration), children: formatDuration2(service.duration_minutes, service.duration_unit) }),
-        service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-price": true, className: cn("font-medium text-foreground", classNames?.price), children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) })
-      ] })
-    ] }),
-    !href && onBook && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-service-card-action": true, className: cn("px-4 pb-4 pt-1 text-sm font-medium text-primary", classNames?.action), children: actionLabel })
-  ] });
-  const cardClasses = cn(
-    "group block w-full rounded-xl border border-border bg-background text-left transition-shadow duration-200 hover:shadow-md",
-    !service.is_available && "opacity-60",
-    className,
-    classNames?.root
-  );
-  if (href) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "a",
-      {
-        href,
-        "data-cimplify-service-card": true,
-        "data-available": service.is_available || void 0,
-        className: cn(cardClasses, "no-underline text-[inherit]"),
-        children: cardBody
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick: () => onBook?.(service),
-      disabled: !service.is_available,
-      "data-cimplify-service-card": true,
-      "data-available": service.is_available || void 0,
-      className: cn(cardClasses, "cursor-pointer font-[inherit] p-0 border-border"),
-      children: cardBody
-    }
-  );
-}
-function ServiceGrid({
-  services: servicesProp,
-  columns,
-  onServiceSelect,
-  getServiceHref,
-  renderCard,
-  renderImage,
-  availableOnly = true,
-  actionLabel,
-  emptyMessage = "No services available",
-  className,
-  classNames
-}) {
-  const rawId = React3__default.default.useId();
-  const gridId = `cimplify-service-grid-${rawId.replace(/:/g, "")}`;
-  const { services: fetched, isLoading } = useServices({
-    enabled: servicesProp === void 0
-  });
-  const allServices = servicesProp ?? fetched;
-  const services = availableOnly ? allServices.filter((s) => s.is_available) : allServices;
-  const sm = columns?.sm ?? 1;
-  const md = columns?.md ?? 2;
-  const lg = columns?.lg ?? 3;
-  const xl = columns?.xl ?? 4;
-  if (isLoading && services.length === 0) {
+  const bookings = bookingsProp ?? fetched;
+  if (isLoading && bookings.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "data-cimplify-service-grid": true,
+        "data-cimplify-booking-list": true,
         "aria-busy": "true",
         className: cn(className, classNames?.root, classNames?.loading)
       }
     );
   }
-  if (services.length === 0) {
+  if (bookings.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "data-cimplify-service-grid": true,
+        "data-cimplify-booking-list": true,
         "data-empty": true,
         className: cn(className, classNames?.root, classNames?.empty),
         children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: emptyMessage })
       }
     );
   }
-  const css = [
-    `#${gridId}{display:grid;grid-template-columns:repeat(${sm},1fr);gap:1rem}`,
-    `@media(min-width:768px){#${gridId}{grid-template-columns:repeat(${md},1fr)}}`,
-    `@media(min-width:1024px){#${gridId}{grid-template-columns:repeat(${lg},1fr)}}`,
-    `@media(min-width:1280px){#${gridId}{grid-template-columns:repeat(${xl},1fr)}}`
-  ].join("");
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: css } }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        id: gridId,
-        "data-cimplify-service-grid": true,
-        className: cn(className, classNames?.root),
-        children: services.map((service) => /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            "data-cimplify-service-grid-item": true,
-            className: classNames?.item,
-            children: renderCard ? renderCard(service) : /* @__PURE__ */ jsxRuntime.jsx(
-              ServiceCard,
-              {
-                service,
-                onBook: onServiceSelect,
-                href: getServiceHref?.(service),
-                actionLabel,
-                renderImage
-              }
-            )
-          },
-          service.id
-        ))
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-list": true, className: cn(className, classNames?.root), children: bookings.map((booking) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-cimplify-booking-list-item": true,
+      className: classNames?.item,
+      onClick: () => onBookingClick?.(booking),
+      role: onBookingClick ? "button" : void 0,
+      tabIndex: onBookingClick ? 0 : void 0,
+      onKeyDown: onBookingClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onBookingClick(booking);
+        }
+      } : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        BookingCard,
+        {
+          booking,
+          onCancel,
+          onReschedule,
+          renderBooking
+        }
+      )
+    },
+    booking.order_id
+  )) });
 }
-function CataloguePage({
-  title = "Products",
-  products: productsProp,
-  categories: categoriesProp,
-  showFilter = true,
-  showSearch = true,
-  showSort = false,
-  showInStockFilter = false,
-  showPriceRange = false,
-  showTagsFilter = false,
+function DefaultCatalogueLayout({
+  products,
+  categories,
+  facets,
+  isLoading,
+  selectedCategory,
+  onCategoryChange,
+  searchQuery,
+  onSearchChange,
+  sortBy,
+  sortOrder,
+  onSortChange,
+  inStockOnly,
+  onInStockChange,
+  selectedTags,
   availableTags,
-  defaultSort,
-  pageSize,
-  onProductClick,
-  onCategoryClick,
+  onTagToggle,
+  minPrice,
+  maxPrice,
+  onPriceRangeChange,
+  page,
+  totalPages,
+  onPageChange,
   renderCard,
   renderImage,
-  columns,
-  className,
-  classNames
+  renderLink,
+  onQuickAdd,
+  title = "Products",
+  className
 }) {
-  const [selectedCategoryId, setSelectedCategoryId] = React3.useState(null);
-  const [searchQuery, setSearchQuery] = React3.useState("");
-  const [sortBy, setSortBy] = React3.useState(defaultSort?.by ?? "name");
-  const [sortOrder, setSortOrder] = React3.useState(defaultSort?.order ?? "asc");
-  const [inStockOnly, setInStockOnly] = React3.useState(false);
-  const [selectedTags, setSelectedTags] = React3.useState([]);
-  const [minPrice, setMinPrice] = React3.useState("");
-  const [maxPrice, setMaxPrice] = React3.useState("");
-  const [page, setPage] = React3.useState(1);
-  const debouncedSearch = useDebounce(searchQuery, 300);
-  const { products: fetchedProducts, isLoading: productsLoading, pagination } = useProducts({
-    enabled: productsProp === void 0,
-    category: selectedCategoryId ?? void 0,
-    search: debouncedSearch.length >= 2 ? debouncedSearch : void 0,
-    sort_by: sortBy,
-    sort_order: sortOrder,
-    in_stock: inStockOnly || void 0,
-    tags: selectedTags.length > 0 ? selectedTags : void 0,
-    min_price: minPrice ? parseFloat(minPrice) : void 0,
-    max_price: maxPrice ? parseFloat(maxPrice) : void 0,
-    page,
-    limit: pageSize
-  });
-  const { categories: fetchedCategories } = useCategories({
-    enabled: showFilter && categoriesProp === void 0
-  });
-  const allProducts = productsProp ?? fetchedProducts;
-  const categories = categoriesProp ?? fetchedCategories;
-  const handleCategorySelect = React3.useCallback(
-    (id) => {
-      setSelectedCategoryId(id);
-      setPage(1);
-      if (id) {
-        const cat = categories.find((c) => c.id === id);
-        if (cat) onCategoryClick?.(cat);
-      }
-    },
-    [categories, onCategoryClick]
-  );
-  const handleTagToggle = React3.useCallback((tag) => {
-    setSelectedTags(
-      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
-    );
-    setPage(1);
-  }, []);
-  const totalPages = pagination?.total_pages ?? 1;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-header": true, className: classNames?.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-catalogue-title": true, className: classNames?.title, children: title }),
-      showSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-search": true, className: classNames?.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-        SearchInput,
-        {
-          onResultClick: onProductClick,
-          searchOptions: { category: selectedCategoryId ?? void 0 }
-        }
-      ) })
+  const hasSidebar = facets && facets.length > 0 || availableTags && availableTags.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-layout": "default", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mt-0.5", children: [
+          products.length,
+          " items"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full sm:max-w-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            value: searchQuery,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: "Search...",
+            className: "w-full h-10 pl-10 pr-4 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all"
+          }
+        )
+      ] })
     ] }),
-    showFilter && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-filter": true, className: classNames?.filterContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      CategoryFilter,
-      {
-        selectedId: selectedCategoryId,
-        onSelect: handleCategorySelect
-      }
-    ) }),
-    (showSort || showInStockFilter || showPriceRange || showTagsFilter) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-toolbar": true, className: cn("flex flex-wrap items-center gap-3", classNames?.toolbar), children: [
-      showSort && /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onCategoryChange(null),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              !selectedCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: "All"
+          }
+        ),
+        categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onCategoryChange(selectedCategory === cat.id ? null : cat.id),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              selectedCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: cat.name
+          },
+          cat.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
-          "data-cimplify-sort": true,
           value: `${sortBy}:${sortOrder}`,
           onChange: (e) => {
             const [by, order] = e.target.value.split(":");
-            setSortBy(by);
-            setSortOrder(order);
-            setPage(1);
+            onSortChange(by, order);
           },
-          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm",
+          className: "text-xs border border-border rounded-lg px-2 py-1.5 bg-background outline-none shrink-0",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name:asc", children: "Name A\u2013Z" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name:desc", children: "Name Z\u2013A" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "created_at:desc", children: "Newest" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price:asc", children: "Price: Low to High" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price:desc", children: "Price: High to Low" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "created_at:desc", children: "Newest" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "created_at:asc", children: "Oldest" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "updated_at:desc", children: "Recently Updated" })
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name:asc", children: "Name: A-Z" })
           ]
         }
-      ),
-      showInStockFilter && /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-cimplify-stock-filter": true, className: "flex items-center gap-1.5 text-sm cursor-pointer", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: inStockOnly,
-            onChange: (e) => {
-              setInStockOnly(e.target.checked);
-              setPage(1);
-            },
-            className: "accent-primary"
-          }
-        ),
-        "In stock only"
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hasSidebar ? "flex gap-6" : "", children: [
+      hasSidebar && /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "hidden lg:block w-60 shrink-0 space-y-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "In stock only" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => onInStockChange(!inStockOnly),
+              className: cn("w-10 h-6 rounded-full transition-colors relative", inStockOnly ? "bg-foreground" : "bg-border"),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("absolute top-1 w-4 h-4 rounded-full bg-background transition-transform shadow-sm", inStockOnly ? "left-5" : "left-1") })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: "Price Range" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                placeholder: "Min",
+                value: minPrice,
+                onChange: (e) => onPriceRangeChange(e.target.value, maxPrice),
+                className: "w-full rounded-lg border border-border px-2 py-1.5 text-xs bg-background outline-none focus:ring-1 focus:ring-primary/20"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs", children: "\u2013" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                placeholder: "Max",
+                value: maxPrice,
+                onChange: (e) => onPriceRangeChange(minPrice, e.target.value),
+                className: "w-full rounded-lg border border-border px-2 py-1.5 text-xs bg-background outline-none focus:ring-1 focus:ring-primary/20"
+              }
+            )
+          ] })
+        ] }),
+        facets?.map((facet) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: facet.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: facet.values.slice(0, 8).map((fv) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "w-3.5 h-3.5 accent-foreground rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors flex-1", children: fv.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground/60", children: fv.count })
+          ] }, fv.value)) })
+        ] }, facet.slug)),
+        availableTags && availableTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: "Tags" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: availableTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: selectedTags.includes(tag),
+                onChange: () => onTagToggle(tag),
+                className: "w-3.5 h-3.5 accent-foreground rounded"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors", children: tag })
+          ] }, tag)) })
+        ] })
       ] }),
-      showPriceRange && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-price-range": true, className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+        isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 animate-pulse", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+          ] })
+        ] }, i)) }) : products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "No products found" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try adjusting your filters" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: products.map(
+          (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+            ProductCard,
+            {
+              product,
+              renderImage,
+              renderLink,
+              onQuickAdd
+            },
+            product.id
+          )
+        ) }),
+        totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 pt-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              disabled: page <= 1,
+              onClick: () => onPageChange(page - 1),
+              className: "text-sm px-3 py-1.5 border border-border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground tabular-nums px-2", children: [
+            page,
+            " / ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              disabled: page >= totalPages,
+              onClick: () => onPageChange(page + 1),
+              className: "text-sm px-3 py-1.5 border border-border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+              children: "Next"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function CompactCatalogueLayout({
+  products,
+  categories,
+  isLoading,
+  selectedCategory,
+  onCategoryChange,
+  searchQuery,
+  onSearchChange,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  title = "Menu",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-layout": "compact", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold tracking-tight", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1 flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+          "button",
           {
-            type: "number",
-            placeholder: "Min",
-            value: minPrice,
-            onChange: (e) => {
-              setMinPrice(e.target.value);
-              setPage(1);
-            },
-            className: "w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
-            min: 0,
-            step: "0.01"
+            onClick: () => onCategoryChange(null),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              !selectedCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: "All"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "\u2013" }),
+        categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onCategoryChange(selectedCategory === cat.id ? null : cat.id),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+              selectedCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: cat.name
+          },
+          cat.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full sm:max-w-[200px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
-            type: "number",
-            placeholder: "Max",
-            value: maxPrice,
-            onChange: (e) => {
-              setMaxPrice(e.target.value);
-              setPage(1);
-            },
-            className: "w-20 rounded-md border border-input bg-background px-2 py-1.5 text-sm",
-            min: 0,
-            step: "0.01"
+            type: "search",
+            value: searchQuery,
+            onChange: (e) => onSearchChange(e.target.value),
+            placeholder: "Search...",
+            className: "w-full h-9 pl-10 pr-3 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/10 transition-all"
           }
         )
-      ] }),
-      showTagsFilter && availableTags && availableTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-tags-filter": true, className: "flex flex-wrap gap-1.5", children: availableTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleTagToggle(tag),
-          className: cn(
-            "rounded-full px-3 py-1 text-xs font-medium border transition-colors",
-            selectedTags.includes(tag) ? "bg-primary text-primary-foreground border-primary" : "bg-background text-foreground border-input hover:bg-muted"
-          ),
-          children: tag
-        },
-        tag
-      )) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-grid": true, className: classNames?.gridContainer, children: productsLoading && !productsProp ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-catalogue-loading": true,
-        "aria-busy": "true",
-        className: classNames?.loading
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      ProductGrid,
-      {
-        products: allProducts,
-        renderCard,
-        renderImage,
-        columns,
-        emptyMessage: "No products found"
-      }
-    ) }),
-    totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-catalogue-pagination": true, className: cn("flex items-center justify-center gap-2 pt-6", classNames?.pagination), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          disabled: page <= 1,
-          onClick: () => setPage((p) => Math.max(1, p - 1)),
-          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40",
-          children: "Previous"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-muted-foreground tabular-nums", children: [
-        page,
-        " / ",
-        totalPages
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5 animate-pulse", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+      ] })
+    ] }, i)) }) : products.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "No items found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different category or search" })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: products.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
         {
-          type: "button",
-          disabled: page >= totalPages,
-          onClick: () => setPage((p) => p + 1),
-          className: "rounded-md border border-input bg-background px-3 py-1.5 text-sm disabled:opacity-40",
-          children: "Next"
-        }
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
       )
-    ] })
+    ) })
   ] });
 }
+var CatalogueTemplate = /* @__PURE__ */ ((CatalogueTemplate2) => {
+  CatalogueTemplate2["Default"] = "default";
+  CatalogueTemplate2["Compact"] = "compact";
+  return CatalogueTemplate2;
+})(CatalogueTemplate || {});
+var BUILT_IN_LAYOUTS = {
+  ["default" /* Default */]: DefaultCatalogueLayout,
+  ["compact" /* Compact */]: CompactCatalogueLayout
+};
 function useDebounce(value, delay) {
   const [debounced, setDebounced] = React3__default.default.useState(value);
   React3__default.default.useEffect(() => {
@@ -7493,6 +8185,109 @@ function useDebounce(value, delay) {
   }, [value, delay]);
   return debounced;
 }
+function CataloguePage({
+  template,
+  layouts,
+  title,
+  products: productsProp,
+  categories: categoriesProp,
+  facets,
+  availableTags,
+  pageSize,
+  defaultSort,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  onProductClick,
+  className,
+  classNames
+}) {
+  const [selectedCategory, setSelectedCategory] = React3.useState(null);
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [sortBy, setSortBy] = React3.useState(defaultSort?.by ?? "created_at");
+  const [sortOrder, setSortOrder] = React3.useState(defaultSort?.order ?? "desc");
+  const [inStockOnly, setInStockOnly] = React3.useState(false);
+  const [selectedTags, setSelectedTags] = React3.useState([]);
+  const [minPrice, setMinPrice] = React3.useState("");
+  const [maxPrice, setMaxPrice] = React3.useState("");
+  const [page, setPage] = React3.useState(1);
+  const debouncedSearch = useDebounce(searchQuery, 300);
+  const { products: fetchedProducts, isLoading, pagination } = useProducts({
+    enabled: productsProp === void 0,
+    category: selectedCategory ?? void 0,
+    search: debouncedSearch.length >= 2 ? debouncedSearch : void 0,
+    sort_by: sortBy,
+    sort_order: sortOrder,
+    in_stock: inStockOnly || void 0,
+    tags: selectedTags.length > 0 ? selectedTags : void 0,
+    min_price: minPrice ? parseFloat(minPrice) : void 0,
+    max_price: maxPrice ? parseFloat(maxPrice) : void 0,
+    page,
+    limit: pageSize
+  });
+  const { categories: fetchedCategories } = useCategories({
+    enabled: categoriesProp === void 0
+  });
+  const products = productsProp ?? fetchedProducts;
+  const categories = categoriesProp ?? fetchedCategories;
+  const totalPages = pagination?.total_pages ?? 1;
+  const handleCategoryChange = React3.useCallback((id) => {
+    setSelectedCategory(id);
+    setPage(1);
+  }, []);
+  const handleSortChange = React3.useCallback((by, order) => {
+    setSortBy(by);
+    setSortOrder(order);
+    setPage(1);
+  }, []);
+  const handleTagToggle = React3.useCallback((tag) => {
+    setSelectedTags(
+      (prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
+    );
+    setPage(1);
+  }, []);
+  const handlePriceRangeChange = React3.useCallback((min, max) => {
+    setMinPrice(min);
+    setMaxPrice(max);
+    setPage(1);
+  }, []);
+  const key = template ?? "default" /* Default */;
+  const Layout = layouts?.[key] ?? BUILT_IN_LAYOUTS[key] ?? DefaultCatalogueLayout;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-catalogue-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      products,
+      categories,
+      facets,
+      isLoading,
+      selectedCategory,
+      onCategoryChange: handleCategoryChange,
+      searchQuery,
+      onSearchChange: setSearchQuery,
+      sortBy,
+      sortOrder,
+      onSortChange: handleSortChange,
+      inStockOnly,
+      onInStockChange: setInStockOnly,
+      selectedTags,
+      availableTags,
+      onTagToggle: handleTagToggle,
+      minPrice,
+      maxPrice,
+      onPriceRangeChange: handlePriceRangeChange,
+      page,
+      totalPages,
+      onPageChange: setPage,
+      renderCard,
+      renderImage,
+      renderLink,
+      onQuickAdd,
+      onProductClick,
+      title
+    }
+  ) });
+}
 function TwoColumnGrid({
   left,
   right,
@@ -7632,13 +8427,6 @@ function getMetadataStringList(metadata, key) {
   if (!Array.isArray(value)) return [];
   return value.filter((item) => typeof item === "string");
 }
-function PriceRange({ product, currency, className }) {
-  const context = useOptionalCimplify();
-  const resolvedCurrency = currency ?? context?.displayCurrency ?? "USD";
-  const range = chunkPEDLCL72_js.getPriceRange(product);
-  if (!range) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-price-range": true, className, children: chunkPEDLCL72_js.formatPriceRange(range.min, range.max, resolvedCurrency) });
-}
 function DefaultProductLayout({
   product,
   onAddToCart,
@@ -7726,18 +8514,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,
@@ -7747,9 +8523,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__ */ jsxRuntime.jsxs("div", { "data-cimplify-product-layout": "food", className: cn("space-y-8", className), children: [
@@ -7766,13 +8540,12 @@ function FoodProductLayout({
         ),
         right: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
-            dietaryTags.map((tag) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TagPills, { tags: otherTags }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-product-layout-name": true, className: "text-3xl lg:text-4xl font-bold tracking-tight", children: product.name }),
             /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: product.default_price, className: "text-2xl font-semibold mt-2 block" })
@@ -8143,7 +8916,7 @@ var ProductTemplate = /* @__PURE__ */ ((ProductTemplate2) => {
   ProductTemplate2["Physical"] = "physical";
   return ProductTemplate2;
 })(ProductTemplate || {});
-var BUILT_IN_LAYOUTS = {
+var BUILT_IN_LAYOUTS2 = {
   ["food" /* Food */]: FoodProductLayout,
   ["wholesale" /* Wholesale */]: WholesaleProductLayout,
   ["service" /* Service */]: ServiceProductLayout,
@@ -8158,16 +8931,16 @@ function resolveTemplateKey(product) {
   if (product.quantity_pricing && product.quantity_pricing.length > 1) {
     return "wholesale" /* Wholesale */;
   }
-  if (product.type === "service") {
+  if (product.type === chunkWMQXSDRC_js.PRODUCT_TYPE.Service) {
     return "service" /* Service */;
   }
-  if (product.type === "digital") {
+  if (product.type === chunkWMQXSDRC_js.PRODUCT_TYPE.Digital) {
     return "digital" /* Digital */;
   }
-  if (product.render_hint === "food") {
+  if (product.render_hint === chunkWMQXSDRC_js.RENDER_HINT.Food) {
     return "food" /* Food */;
   }
-  if (product.render_hint === "physical") {
+  if (product.render_hint === chunkWMQXSDRC_js.RENDER_HINT.Physical) {
     return "physical" /* Physical */;
   }
   return "default" /* Default */;
@@ -8180,8 +8953,8 @@ function resolveLayout(product, pages, templates) {
   if (templates?.[key]) {
     return templates[key];
   }
-  if (BUILT_IN_LAYOUTS[key]) {
-    return BUILT_IN_LAYOUTS[key];
+  if (BUILT_IN_LAYOUTS2[key]) {
+    return BUILT_IN_LAYOUTS2[key];
   }
   return DefaultProductLayout;
 }
@@ -8239,56 +9012,168 @@ function ProductPage({
     }
   ) });
 }
-function CartPage({
-  title = "Your Cart",
+function DefaultCartLayout({
+  cart,
   onCheckout,
   onContinueShopping,
   onDiscountApply,
   onDiscountClear,
   showDiscount = true,
-  showContinueShopping = true,
   checkoutLabel = "Proceed to Checkout",
-  className,
-  classNames
+  className
 }) {
-  const { isEmpty, subtotal } = useCart();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-page-header": true, className: classNames?.header, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-cart-page-title": true, className: classNames?.title, children: title }),
-      showContinueShopping && /* @__PURE__ */ jsxRuntime.jsx(
+  if (cart.isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("text-center py-20", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-16 h-16 mx-auto text-muted-foreground/30", fill: "none", stroke: "currentColor", strokeWidth: "1", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium mt-4", children: "Your cart is empty" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Add some items to get started" }),
+      onContinueShopping && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          type: "button",
           onClick: onContinueShopping,
-          "data-cimplify-cart-continue": true,
-          className: classNames?.continueButton,
-          children: "Continue Shopping"
+          className: "text-sm font-medium text-primary mt-4 hover:underline",
+          children: "Continue shopping"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-page-content": true, className: classNames?.content, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}),
-      showDiscount && !isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-page-discount": true, className: classNames?.discount, children: /* @__PURE__ */ jsxRuntime.jsx(
-        DiscountInput,
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "default", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-2xl font-bold tracking-tight", children: [
+        "Your Cart (",
+        cart.itemCount,
+        " ",
+        cart.itemCount === 1 ? "item" : "items",
+        ")"
+      ] }),
+      onContinueShopping && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          orderSubtotal: subtotal.toString(),
-          onApply: onDiscountApply,
-          onClear: onDiscountClear
+          onClick: onContinueShopping,
+          className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: "Continue shopping"
         }
-      ) })
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid lg:grid-cols-[1fr_380px] gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:sticky lg:top-6 h-fit space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-border rounded-[14px] p-6 space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-semibold", children: "Order Summary" }),
+        showDiscount && /* @__PURE__ */ jsxRuntime.jsx(
+          DiscountInput,
+          {
+            orderSubtotal: cart.subtotal.toString(),
+            onApply: onDiscountApply,
+            onClear: onDiscountClear
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.subtotal })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tax" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.tax })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between font-semibold text-base pt-2 border-t border-border", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.total })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onCheckout,
+            className: "w-full h-12 bg-foreground text-background font-medium text-sm rounded-lg hover:bg-foreground/90 transition-colors",
+            children: checkoutLabel
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+}
+function CompactCartLayout({
+  cart,
+  onCheckout,
+  onContinueShopping,
+  checkoutLabel = "Place Order",
+  className
+}) {
+  if (cart.isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "compact", className: cn("text-center py-16", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-medium", children: "Your order is empty" }),
+      onContinueShopping && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onContinueShopping, className: "text-sm font-medium text-primary mt-3 hover:underline", children: "Browse menu" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-cart-layout": "compact", className: cn("max-w-lg mx-auto space-y-4", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("h1", { className: "text-xl font-bold tracking-tight", children: [
+      "Your Order (",
+      cart.itemCount,
+      ")"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(CartSummary, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-sm pt-4 border-t border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Subtotal" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.subtotal })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Tax" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.tax })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between font-semibold text-base pt-2 border-t border-border", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: cart.total })
+      ] })
     ] }),
-    !isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-page-footer": true, className: classNames?.footer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        type: "button",
         onClick: onCheckout,
-        "data-cimplify-cart-checkout-button": true,
-        className: classNames?.checkoutButton,
+        className: "w-full h-12 bg-foreground text-background font-medium text-sm rounded-lg hover:bg-foreground/90 transition-colors",
         children: checkoutLabel
       }
-    ) })
+    )
   ] });
 }
+var CartTemplate = /* @__PURE__ */ ((CartTemplate2) => {
+  CartTemplate2["Default"] = "default";
+  CartTemplate2["Compact"] = "compact";
+  return CartTemplate2;
+})(CartTemplate || {});
+var BUILT_IN_LAYOUTS3 = {
+  ["default" /* Default */]: DefaultCartLayout,
+  ["compact" /* Compact */]: CompactCartLayout
+};
+function CartPage({
+  template,
+  layouts,
+  onCheckout,
+  onContinueShopping,
+  onDiscountApply,
+  onDiscountClear,
+  showDiscount = true,
+  checkoutLabel,
+  className,
+  classNames
+}) {
+  const cart = useCart();
+  const key = template ?? "default" /* Default */;
+  const Layout = layouts?.[key] ?? BUILT_IN_LAYOUTS3[key] ?? DefaultCartLayout;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-cart-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      cart,
+      onCheckout,
+      onContinueShopping,
+      onDiscountApply,
+      onDiscountClear,
+      showDiscount,
+      checkoutLabel
+    }
+  ) });
+}
 function CheckoutPage({
   title = "Checkout",
   onComplete,
@@ -8312,22 +9197,362 @@ function CheckoutPage({
     )
   ] });
 }
+function DefaultCollectionLayout({
+  collection,
+  products,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  className
+}) {
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [activeTag, setActiveTag] = React3.useState(null);
+  const collectionTags = React3.useMemo(() => {
+    const tagSet = /* @__PURE__ */ new Set();
+    for (const p of products) {
+      if (p.tags) {
+        for (const t of p.tags) tagSet.add(t);
+      }
+    }
+    return Array.from(tagSet).slice(0, 6);
+  }, [products]);
+  const filtered = React3.useMemo(() => {
+    let result = products;
+    if (searchQuery.trim().length >= 2) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q)
+      );
+    }
+    if (activeTag) {
+      result = result.filter((p) => p.tags?.includes(activeTag));
+    }
+    return result;
+  }, [products, searchQuery, activeTag]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-layout": "default", className: cn("space-y-8", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-hero": true, className: "relative overflow-hidden rounded-2xl bg-muted", children: [
+      collection.image_url && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: collection.image_url,
+          alt: collection.name,
+          className: "w-full h-64 lg:h-80 object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-6 lg:p-8", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-4xl font-bold text-white tracking-tight", children: collection.name }),
+        collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/80 mt-2 max-w-lg text-sm lg:text-base", children: collection.description }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-white/60 text-sm mt-2", children: [
+          products.length,
+          " ",
+          products.length === 1 ? "item" : "items"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0 w-full sm:max-w-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "search",
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            placeholder: `Search ${collection.name}...`,
+            className: "w-full h-10 pl-10 pr-4 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
+          }
+        )
+      ] }),
+      collectionTags.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setActiveTag(null),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
+              !activeTag ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: "All"
+          }
+        ),
+        collectionTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setActiveTag(activeTag === tag ? null : tag),
+            className: cn(
+              "text-xs font-medium px-3 py-1.5 rounded-full transition-colors",
+              activeTag === tag ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+            ),
+            children: tag
+          },
+          tag
+        ))
+      ] })
+    ] }),
+    filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
+        {
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
+      )
+    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No items match your search." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setSearchQuery("");
+            setActiveTag(null);
+          },
+          className: "text-sm font-medium text-primary mt-2 hover:underline",
+          children: "Clear filters"
+        }
+      )
+    ] })
+  ] });
+}
+function FeaturedCollectionLayout({
+  collection,
+  products,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-layout": "featured", className: cn("space-y-10", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-hero": true, className: "relative overflow-hidden rounded-2xl bg-muted", children: [
+      collection.image_url && /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: collection.image_url,
+          alt: collection.name,
+          className: "w-full h-72 lg:h-96 object-cover"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-8 lg:p-12", children: [
+        collection.tags && collection.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-white/70 uppercase tracking-widest", children: collection.tags[0] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl lg:text-5xl font-bold text-white tracking-tight mt-2", children: collection.name }),
+        collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white/80 mt-3 max-w-2xl text-base lg:text-lg leading-relaxed", children: collection.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", children: products.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
+        {
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
+      )
+    ) })
+  ] });
+}
+function CatalogueCollectionLayout({
+  collection,
+  products,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  className
+}) {
+  const [searchQuery, setSearchQuery] = React3.useState("");
+  const [activeCategory, setActiveCategory] = React3.useState(null);
+  const [sortBy, setSortBy] = React3.useState("default");
+  const categories = React3.useMemo(() => {
+    const cats = /* @__PURE__ */ new Map();
+    for (const p of products) {
+      if (p.category_id && p.tags) {
+        for (const t of p.tags) {
+          if (!cats.has(t)) cats.set(t, t);
+        }
+      }
+    }
+    return Array.from(cats.values()).slice(0, 8);
+  }, [products]);
+  const filtered = React3.useMemo(() => {
+    let result = products;
+    if (searchQuery.trim().length >= 2) {
+      const q = searchQuery.toLowerCase();
+      result = result.filter(
+        (p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q)
+      );
+    }
+    if (activeCategory) {
+      result = result.filter((p) => p.tags?.includes(activeCategory));
+    }
+    if (sortBy === "price-asc") {
+      result = [...result].sort((a, b) => chunkPEDLCL72_js.parsePrice(a.default_price) - chunkPEDLCL72_js.parsePrice(b.default_price));
+    } else if (sortBy === "price-desc") {
+      result = [...result].sort((a, b) => chunkPEDLCL72_js.parsePrice(b.default_price) - chunkPEDLCL72_js.parsePrice(a.default_price));
+    } else if (sortBy === "name") {
+      result = [...result].sort((a, b) => a.name.localeCompare(b.name));
+    }
+    return result;
+  }, [products, searchQuery, activeCategory, sortBy]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-layout": "catalogue", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl lg:text-3xl font-bold tracking-tight", children: collection.name }),
+      collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-1 max-w-2xl", children: collection.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pb-4 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-1 min-w-0 w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 max-w-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "search",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "Search...",
+              className: "w-full h-9 pl-10 pr-4 text-sm border border-border rounded-lg bg-background outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setActiveCategory(null),
+              className: cn(
+                "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+                !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+              ),
+              children: "All"
+            }
+          ),
+          categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setActiveCategory(activeCategory === cat ? null : cat),
+              className: cn(
+                "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+                activeCategory === cat ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+              ),
+              children: cat
+            },
+            cat
+          ))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          filtered.length,
+          " items"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: sortBy,
+            onChange: (e) => setSortBy(e.target.value),
+            className: "text-xs border border-border rounded-lg px-2 py-1.5 bg-background outline-none focus:ring-2 focus:ring-primary/20",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "default", children: "Sort: Default" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-asc", children: "Price: Low to High" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-desc", children: "Price: High to Low" }),
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name", children: "Name: A-Z" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filtered.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
+        {
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
+      )
+    ) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No products found." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            setSearchQuery("");
+            setActiveCategory(null);
+          },
+          className: "text-sm font-medium text-primary mt-2 hover:underline",
+          children: "Clear filters"
+        }
+      )
+    ] })
+  ] });
+}
+var CollectionTemplate = /* @__PURE__ */ ((CollectionTemplate2) => {
+  CollectionTemplate2["Default"] = "default";
+  CollectionTemplate2["Featured"] = "featured";
+  CollectionTemplate2["Catalogue"] = "catalogue";
+  return CollectionTemplate2;
+})(CollectionTemplate || {});
+var BUILT_IN_LAYOUTS4 = {
+  ["default" /* Default */]: DefaultCollectionLayout,
+  ["featured" /* Featured */]: FeaturedCollectionLayout,
+  ["catalogue" /* Catalogue */]: CatalogueCollectionLayout
+};
+var LARGE_COLLECTION_THRESHOLD = 30;
+function resolveTemplateKey2(collection, productCount) {
+  const metaTemplate = collection.metadata?.page_template;
+  if (typeof metaTemplate === "string" && metaTemplate.trim()) {
+    return metaTemplate.trim();
+  }
+  if (collection.tags?.includes("featured") || collection.metadata?.is_featured === true) {
+    return "featured" /* Featured */;
+  }
+  if (productCount > LARGE_COLLECTION_THRESHOLD) {
+    return "catalogue" /* Catalogue */;
+  }
+  return "default" /* Default */;
+}
+function resolveLayout2(collection, productCount, pages, templates) {
+  if (pages?.[collection.slug]) {
+    return pages[collection.slug];
+  }
+  const key = resolveTemplateKey2(collection, productCount);
+  if (templates?.[key]) {
+    return templates[key];
+  }
+  if (BUILT_IN_LAYOUTS4[key]) {
+    return BUILT_IN_LAYOUTS4[key];
+  }
+  return DefaultCollectionLayout;
+}
 function CollectionPage({
   collectionId,
   collection: collectionProp,
   products: productsProp,
+  pages,
+  templates,
   renderCard,
   renderImage,
-  columns,
+  renderLink,
+  onQuickAdd,
   className,
   classNames
 }) {
+  const resolvedId = collectionId || collectionProp?.slug || collectionProp?.id || "";
   const {
     collection: fetchedCollection,
     products: fetchedProducts,
     isLoading
-  } = useCollection(collectionProp ? null : collectionId, {
-    enabled: !collectionProp
+  } = useCollection(collectionProp ? null : resolvedId, {
+    enabled: !collectionProp && resolvedId.length > 0
   });
   const collection = collectionProp ?? fetchedCollection;
   const products = productsProp ?? fetchedProducts;
@@ -8337,37 +9562,35 @@ function CollectionPage({
       {
         "data-cimplify-collection-page": true,
         "aria-busy": "true",
-        className: cn(className, classNames?.root, classNames?.loading)
+        className: cn(className, classNames?.root, classNames?.loading),
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse space-y-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 lg:h-80 bg-muted rounded-2xl" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+            ] })
+          ] }, i)) })
+        ] })
       }
     );
   }
   if (!collection) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Collection not found." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "Collection not found." }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-collection-header": true, className: classNames?.header, children: [
-      collection.image_url && /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: collection.image_url,
-          alt: collection.name,
-          "data-cimplify-collection-image": true,
-          className: classNames?.image
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-collection-title": true, className: classNames?.title, children: collection.name }),
-      collection.description && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cimplify-collection-description": true, className: classNames?.description, children: collection.description })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-grid": true, className: classNames?.grid, children: /* @__PURE__ */ jsxRuntime.jsx(
-      ProductGrid,
-      {
-        products,
-        renderCard,
-        renderImage,
-        columns
-      }
-    ) })
-  ] });
+  const Layout = resolveLayout2(collection, products.length, pages, templates);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-collection-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      collection,
+      products,
+      renderCard,
+      renderImage,
+      renderLink,
+      onQuickAdd
+    }
+  ) });
 }
 function OrderDetailPage({
   orderId,
@@ -8486,573 +9709,355 @@ function OrderHistoryPage({
     ) })
   ] });
 }
-function SearchPage({
-  title = "Search",
-  placeholder = "What are you looking for?",
-  onProductClick,
+function DefaultSearchLayout({
+  search,
+  facets,
+  categories,
+  activeCategory,
+  onCategoryChange,
+  inStockOnly,
+  onInStockChange,
+  sortBy,
+  onSortChange,
   renderCard,
   renderImage,
-  columns,
-  className,
-  classNames
+  renderLink,
+  onQuickAdd,
+  placeholder = "Search products...",
+  className
 }) {
-  const { results, isLoading, query, setQuery, clear } = useSearch();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-search-page-title": true, className: classNames?.title, children: title }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page-input": true, className: classNames?.inputContainer, children: [
+  const { query, setQuery, results, isLoading, clear } = search;
+  const hasFacets = facets && facets.length > 0 || categories && categories.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-layout": "default", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        input.Input,
+        "input",
         {
           type: "search",
           value: query,
           onChange: (e) => setQuery(e.target.value),
           placeholder,
-          "data-cimplify-search-page-field": true,
-          className: classNames?.input,
-          "aria-label": "Search products",
+          className: "w-full h-14 pl-12 pr-12 text-base border border-border rounded-xl bg-background outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all",
           autoFocus: true
         }
       ),
       query.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          type: "button",
           onClick: clear,
-          "data-cimplify-search-page-clear": true,
-          className: classNames?.clearButton,
+          className: "absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center text-muted-foreground hover:text-foreground rounded-full hover:bg-muted transition-colors",
           "aria-label": "Clear search",
-          children: "\xD7"
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M6 18L18 6M6 6l12 12" }) })
         }
       )
     ] }),
-    query.length >= 2 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-page-count": true, className: classNames?.resultCount, children: [
-      results.length,
-      " ",
-      results.length === 1 ? "result" : "results",
-      " for \u201C",
-      query,
-      "\u201D"
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-grid": true, className: classNames?.grid, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-loading": true, "aria-busy": "true", className: classNames?.loading, children: "Searching..." }) : query.length >= 2 && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-      "No products found for \u201C",
-      query,
-      "\u201D"
-    ] }) }) : results.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-      ProductGrid,
-      {
-        products: results,
-        renderCard,
-        renderImage,
-        columns
-      }
-    ) })
-  ] });
-}
-function DealsPage({
-  title = "Deals & Offers",
-  deals: dealsProp,
-  productsOnSale: productsOnSaleProp,
-  products: productsProp,
-  locationId,
-  renderImage,
-  columns,
-  className,
-  classNames
-}) {
-  const { deals: fetchedDeals, isLoading: dealsLoading } = useDeals({
-    locationId,
-    enabled: dealsProp === void 0
-  });
-  const { products: fetchedOnSale, isLoading: productsLoading } = useProductsOnSale({
-    enabled: productsOnSaleProp === void 0
-  });
-  const deals = dealsProp ?? fetchedDeals;
-  const onSale = productsOnSaleProp ?? fetchedOnSale;
-  const isLoading = dealsLoading || productsLoading;
-  const isEmpty = deals.length === 0 && onSale.length === 0;
-  if (isLoading && isEmpty) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        "data-cimplify-deals-page": true,
-        "aria-busy": "true",
-        className: cn(className, classNames?.root, classNames?.loading)
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-deals-title": true, className: classNames?.title, children: title }) }),
-    deals.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-banner-section": true, className: classNames?.bannerSection, children: /* @__PURE__ */ jsxRuntime.jsx(DealBanner, { deals }) }),
-    (onSale.length > 0 || productsProp && productsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-products": true, className: classNames?.productsSection, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-deals-products-title": true, className: classNames?.productsTitle, children: "On Sale Now" }),
-      productsProp ? /* @__PURE__ */ jsxRuntime.jsx(
-        ProductGrid,
+    query.length >= 2 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: results.length }),
+        " result",
+        results.length !== 1 ? "s" : "",
+        " for ",
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [
+          "\u201C",
+          query,
+          "\u201D"
+        ] })
+      ] }),
+      onSortChange && /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
         {
-          products: productsProp,
-          renderImage,
-          columns
+          value: sortBy || "relevance",
+          onChange: (e) => onSortChange(e.target.value),
+          className: "text-xs border border-border rounded-lg px-2 py-1.5 bg-background outline-none focus:ring-2 focus:ring-primary/10",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "relevance", children: "Relevance" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-asc", children: "Price: Low to High" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "price-desc", children: "Price: High to Low" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "name", children: "Name: A-Z" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "newest", children: "Newest" })
+          ]
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-list": true, children: onSale.map((dealInfo) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-item": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        SaleBadge,
+      )
+    ] }),
+    categories && categories.length > 0 && onCategoryChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          product: { id: dealInfo.product_id, name: dealInfo.deal_name },
-          dealInfo,
-          showOriginalPrice: true
+          onClick: () => onCategoryChange(null),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: "All"
         }
-      ) }, `${dealInfo.product_id}-${dealInfo.deal_id}`)) })
+      ),
+      categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onCategoryChange(activeCategory === cat.id ? null : cat.id),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            activeCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: cat.name
+        },
+        cat.id
+      ))
     ] }),
-    isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No deals available right now. Check back soon!" }) })
-  ] });
-}
-var ANY_VALUE2 = "__any__";
-function roomToResource(room) {
-  return {
-    id: room.id,
-    name: room.name,
-    capacity: room.capacity,
-    floor: room.floor,
-    is_available: room.status === "available"
-  };
-}
-function ResourcePicker({
-  resources,
-  selectedResourceId,
-  onResourceSelect,
-  showAnyOption = true,
-  anyLabel = "Any available",
-  renderImage,
-  className,
-  classNames
-}) {
-  const groupValue = selectedResourceId === null ? ANY_VALUE2 : selectedResourceId ?? "";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    radioGroup.RadioGroup,
-    {
-      "data-cimplify-resource-picker": true,
-      className: cn("flex flex-col gap-2", className, classNames?.root),
-      value: groupValue,
-      onValueChange: (value) => {
-        onResourceSelect?.(value === ANY_VALUE2 ? null : value);
-      },
-      children: [
-        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
-          radio.Radio.Root,
-          {
-            value: ANY_VALUE2,
-            "data-cimplify-resource-option": true,
-            "data-selected": selectedResourceId === null || void 0,
-            "data-any": true,
-            className: cn(
-              "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
-              "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
-              classNames?.option
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: anyLabel })
-          }
-        ),
-        resources.map((resource) => {
-          const unavailable = resource.is_available === false;
-          return /* @__PURE__ */ jsxRuntime.jsxs(
-            radio.Radio.Root,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: hasFacets ? "flex gap-6" : "", children: [
+      hasFacets && /* @__PURE__ */ jsxRuntime.jsxs("aside", { "data-cimplify-search-facets": true, className: "hidden lg:block w-60 shrink-0 space-y-6", children: [
+        onInStockChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "In stock only" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              value: resource.id,
-              disabled: unavailable,
-              "data-cimplify-resource-option": true,
-              "data-selected": selectedResourceId === resource.id || void 0,
-              "data-unavailable": unavailable || void 0,
+              onClick: () => onInStockChange(!inStockOnly),
               className: cn(
-                "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
-                "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
-                unavailable && "opacity-50 cursor-not-allowed",
-                classNames?.option,
-                unavailable ? classNames?.unavailable : void 0
+                "w-10 h-6 rounded-full transition-colors relative",
+                inStockOnly ? "bg-foreground" : "bg-border"
               ),
-              children: [
-                resource.image_url && (renderImage ? renderImage({
-                  src: resource.image_url,
-                  alt: resource.name,
-                  className: classNames?.image
-                }) : /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: resource.image_url,
-                    alt: resource.name,
-                    "data-cimplify-resource-image": true,
-                    className: cn("w-10 h-10 rounded-lg object-cover", classNames?.image)
-                  }
-                )),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: resource.name }),
-                  resource.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-description": true, className: cn("text-sm text-muted-foreground truncate", classNames?.description), children: resource.description }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-resource-meta": true, className: cn("flex items-center gap-2 text-xs text-muted-foreground", classNames?.meta), children: [
-                    resource.capacity !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-resource-capacity": true, className: classNames?.capacity, children: [
-                      "Up to ",
-                      resource.capacity
-                    ] }),
-                    resource.floor && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-floor": true, className: classNames?.floor, children: resource.floor })
-                  ] })
-                ] })
-              ]
-            },
-            resource.id
-          );
-        })
-      ]
-    }
-  );
-}
-var STEP = {
-  SELECT_SLOT: "select-slot",
-  SELECT_RESOURCE: "select-resource",
-  SELECT_STAFF: "select-staff",
-  CONFIRM: "confirm"
-};
-function BookingPage({
-  service,
-  product,
-  staff,
-  resources,
-  participantCount,
-  title,
-  onBooked,
-  onBack,
-  existingBooking,
-  onRescheduled,
-  showPrice = true,
-  className,
-  classNames
-}) {
-  const { addItem } = useCart();
-  const { client } = useCimplifyClient();
-  const isReschedule = existingBooking !== void 0;
-  const [step, setStep] = React3.useState(STEP.SELECT_SLOT);
-  const [selectedSlot, setSelectedSlot] = React3.useState(null);
-  const [selectedDate, setSelectedDate] = React3.useState(null);
-  const [selectedStaffId, setSelectedStaffId] = React3.useState(null);
-  const [selectedResourceId, setSelectedResourceId] = React3.useState(null);
-  const [isSubmitting, setIsSubmitting] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const hasResourceStep = resources && resources.length > 0;
-  const hasStaffStep = staff && staff.length > 0;
-  const depositType = product?.deposit_type;
-  const depositAmount = product?.deposit_amount;
-  const hasDeposit = depositType !== void 0 && depositType !== "none" && depositAmount !== void 0 && chunkPEDLCL72_js.parsePrice(depositAmount) !== 0;
-  const cancellationMinutes = product?.cancellation_window_minutes;
-  const noShowFee = product?.no_show_fee;
-  const handleSlotSelect = React3.useCallback(
-    (slot, date) => {
-      setSelectedSlot(slot);
-      setSelectedDate(date);
-      setError(null);
-      if (hasResourceStep) {
-        setStep(STEP.SELECT_RESOURCE);
-      } else if (hasStaffStep) {
-        setStep(STEP.SELECT_STAFF);
-      } else {
-        setStep(STEP.CONFIRM);
-      }
-    },
-    [hasResourceStep, hasStaffStep]
-  );
-  const handleResourceSelect = React3.useCallback(
-    (resourceId) => {
-      setSelectedResourceId(resourceId);
-      if (hasStaffStep) {
-        setStep(STEP.SELECT_STAFF);
-      } else {
-        setStep(STEP.CONFIRM);
-      }
-    },
-    [hasStaffStep]
-  );
-  const handleStaffSelect = React3.useCallback((staffId) => {
-    setSelectedStaffId(staffId);
-    setStep(STEP.CONFIRM);
-  }, []);
-  const handleBack = React3.useCallback(() => {
-    setError(null);
-    if (step === STEP.CONFIRM && hasStaffStep) {
-      setStep(STEP.SELECT_STAFF);
-    } else if (step === STEP.CONFIRM && hasResourceStep) {
-      setStep(STEP.SELECT_RESOURCE);
-    } else if (step === STEP.SELECT_STAFF && hasResourceStep) {
-      setStep(STEP.SELECT_RESOURCE);
-    } else if (step === STEP.CONFIRM || step === STEP.SELECT_STAFF || step === STEP.SELECT_RESOURCE) {
-      setStep(STEP.SELECT_SLOT);
-    } else {
-      onBack?.();
-    }
-  }, [step, hasStaffStep, hasResourceStep, onBack]);
-  const handleConfirm = React3.useCallback(async () => {
-    if (!selectedSlot || !selectedDate) return;
-    setIsSubmitting(true);
-    setError(null);
-    try {
-      if (isReschedule && existingBooking) {
-        const serviceItem = existingBooking.service_items[0];
-        const result = await client.scheduling.rescheduleBooking({
-          order_id: existingBooking.order_id,
-          line_item_id: serviceItem?.service_id ?? existingBooking.order_id,
-          new_start_time: selectedSlot.start_time,
-          new_end_time: selectedSlot.end_time,
-          new_staff_id: selectedStaffId || void 0,
-          reschedule_type: "customer"
-        });
-        if (!result.ok) {
-          throw result.error;
-        }
-        onRescheduled?.(existingBooking, selectedSlot);
-      } else {
-        const serviceProduct = {
-          id: service.product_id || service.id,
-          business_id: service.business_id || "",
-          category_id: service.category_id || void 0,
-          name: service.name,
-          slug: service.id,
-          description: service.description || void 0,
-          image_url: service.image_url || void 0,
-          default_price: service.price || "0",
-          type: "service",
-          inventory_type: "none",
-          variant_strategy: "fetch_all",
-          is_active: service.is_available,
-          created_at: (/* @__PURE__ */ new Date()).toISOString(),
-          updated_at: (/* @__PURE__ */ new Date()).toISOString()
-        };
-        await addItem(serviceProduct, 1, {
-          scheduledStart: selectedSlot.start_time,
-          scheduledEnd: selectedSlot.end_time,
-          staffId: selectedStaffId || void 0,
-          resourceId: selectedResourceId || void 0
-        });
-        onBooked?.(selectedSlot, selectedStaffId);
-      }
-    } catch (err) {
-      const fallbackMessage = isReschedule ? "Failed to reschedule booking" : "Failed to add booking to cart";
-      setError(err instanceof Error ? err.message : fallbackMessage);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [selectedSlot, selectedDate, selectedStaffId, service, addItem, onBooked, isReschedule, existingBooking, client, onRescheduled]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-page-header": true, className: classNames?.header, children: [
-      onBack && step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "absolute top-1 w-4 h-4 rounded-full bg-background transition-transform shadow-sm",
+                inStockOnly ? "left-5" : "left-1"
+              ) })
+            }
+          )
+        ] }),
+        facets?.map((facet) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold mb-2", children: facet.name }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: facet.values.slice(0, 8).map((fv) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 text-sm cursor-pointer group", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", className: "w-3.5 h-3.5 accent-foreground rounded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground group-hover:text-foreground transition-colors flex-1", children: fv.value }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground/60", children: fv.count })
+          ] }, fv.value)) })
+        ] }, facet.slug))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 animate-pulse", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+        ] })
+      ] }, i)) }) : query.length >= 2 && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-20", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12 mx-auto text-muted-foreground/30", fill: "none", stroke: "currentColor", strokeWidth: "1", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium mt-4", children: [
+          "No results for \u201C",
+          query,
+          "\u201D"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
+      ] }) : results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4", children: results.map(
+        (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+          ProductCard,
+          {
+            product,
+            renderImage,
+            renderLink,
+            onQuickAdd
+          },
+          product.id
+        )
+      ) }) : null })
+    ] })
+  ] });
+}
+function CompactSearchLayout({
+  search,
+  categories,
+  activeCategory,
+  onCategoryChange,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
+  placeholder = "Search menu...",
+  className
+}) {
+  const { query, setQuery, results, isLoading, clear } = search;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-search-layout": "compact", className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
         {
-          type: "button",
-          onClick: onBack,
-          "data-cimplify-booking-page-back": true,
-          className: classNames?.backButton,
-          children: "Back"
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          placeholder,
+          className: "w-full h-12 pl-12 pr-12 text-base border border-border rounded-xl bg-background outline-none focus:ring-2 focus:ring-primary/10 focus:border-primary/30 transition-all",
+          autoFocus: true
         }
       ),
-      step !== STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsx(
+      query.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          type: "button",
-          onClick: handleBack,
-          "data-cimplify-booking-page-back": true,
-          className: classNames?.backButton,
-          children: "Back"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-booking-page-title": true, className: classNames?.title, children: title || (isReschedule ? "Reschedule Booking" : `Book ${service.name}`) })
-    ] }),
-    isReschedule && existingBooking && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-reschedule-info": true, className: classNames?.rescheduleInfo, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      "Rescheduling booking from ",
-      new Date(existingBooking.service_items[0]?.scheduled_start ?? existingBooking.created_at).toLocaleDateString()
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-service-info": true, className: classNames?.serviceInfo, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-name": true, children: service.name }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-duration": true, children: formatDuration2(service.duration_minutes, service.duration_unit) }),
-      service.price && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-booking-service-price": true, children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: service.price }) }),
-      hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-deposit-info": true, className: classNames?.depositInfo, children: [
-        "Deposit: ",
-        depositType === "percentage" ? `${chunkPEDLCL72_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount })
-      ] }),
-      cancellationMinutes !== void 0 && cancellationMinutes > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-cancellation-policy": true, className: classNames?.cancellationPolicy, children: [
-        "Free cancellation up to ",
-        cancellationMinutes >= 60 ? `${Math.floor(cancellationMinutes / 60)} hour${Math.floor(cancellationMinutes / 60) !== 1 ? "s" : ""}` : `${cancellationMinutes} minute${cancellationMinutes !== 1 ? "s" : ""}`,
-        " before"
-      ] }),
-      noShowFee !== void 0 && chunkPEDLCL72_js.parsePrice(noShowFee) !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-booking-no-show-fee": true, className: classNames?.cancellationPolicy, children: [
-        "No-show fee: ",
-        /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: noShowFee })
-      ] })
-    ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-booking-error": true, className: classNames?.error, children: error }),
-    step === STEP.SELECT_SLOT && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-slot", className: classNames?.step, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Select a date & time" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DateSlotPicker,
-        {
-          serviceId: service.id,
-          participantCount,
-          selectedSlot,
-          onSlotSelect: handleSlotSelect,
-          showPrice
+          onClick: clear,
+          className: "absolute right-4 top-1/2 -translate-y-1/2 w-6 h-6 flex items-center justify-center text-muted-foreground hover:text-foreground rounded-full hover:bg-muted transition-colors",
+          "aria-label": "Clear search",
+          children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M6 18L18 6M6 6l12 12" }) })
         }
       )
     ] }),
-    step === STEP.SELECT_RESOURCE && resources && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-resource", className: cn(classNames?.step, classNames?.resourceStep), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a room" }),
+    categories && categories.length > 0 && onCategoryChange && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5 overflow-x-auto pb-1", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        ResourcePicker,
+        "button",
         {
-          resources,
-          selectedResourceId,
-          onResourceSelect: handleResourceSelect
+          onClick: () => onCategoryChange(null),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: "All"
         }
-      )
-    ] }),
-    step === STEP.SELECT_STAFF && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "select-staff", className: classNames?.step, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Choose a provider" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StaffPicker,
+      ),
+      categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
         {
-          staff,
-          selectedStaffId,
-          onStaffSelect: handleStaffSelect
-        }
-      )
+          onClick: () => onCategoryChange(activeCategory === cat.id ? null : cat.id),
+          className: cn(
+            "text-xs font-medium px-3 py-1.5 rounded-full shrink-0 transition-colors",
+            activeCategory === cat.id ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-muted/80"
+          ),
+          children: cat.name
+        },
+        cat.id
+      ))
     ] }),
-    step === STEP.CONFIRM && selectedSlot && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-step": "confirm", className: classNames?.step, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-booking-step-title": true, className: classNames?.stepTitle, children: "Confirm your booking" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary": true, className: classNames?.summary, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Service" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: service.name })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Date" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: selectedDate })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Time" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(selectedSlot.start_time).toLocaleTimeString(void 0, {
-            hour: "numeric",
-            minute: "2-digit"
-          }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Duration" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatDuration2(service.duration_minutes, service.duration_unit) })
-        ] }),
-        selectedResourceId && resources && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Room" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: resources.find((r) => r.id === selectedResourceId)?.name ?? "Selected" })
-        ] }),
-        selectedStaffId && staff && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Provider" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: staff.find((s) => s.id === selectedStaffId)?.name ?? "Selected" })
-        ] }),
-        (selectedSlot.price || service.price) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: classNames?.summaryRow, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Price" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: selectedSlot.price || service.price }) })
-        ] }),
-        hasDeposit && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-booking-summary-row": true, className: cn(classNames?.summaryRow, classNames?.depositInfo), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Deposit" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: depositType === "percentage" ? `${chunkPEDLCL72_js.parsePrice(depositAmount)}%` : /* @__PURE__ */ jsxRuntime.jsx(Price, { amount: depositAmount }) })
-        ] })
+    query.length >= 2 && !isLoading && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: results.length }),
+      " result",
+      results.length !== 1 ? "s" : "",
+      " for ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [
+        "\u201C",
+        query,
+        "\u201D"
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-5 animate-pulse", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted rounded-[14px]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-3/4 bg-muted rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-3 w-1/2 bg-muted rounded" })
+      ] })
+    ] }, i)) }) : query.length >= 2 && results.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-lg font-medium", children: [
+        "No results for \u201C",
+        query,
+        "\u201D"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: "Try a different search term" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: clear, className: "text-sm font-medium text-primary mt-4 hover:underline", children: "Clear search" })
+    ] }) : results.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 lg:grid-cols-3 gap-5", children: results.map(
+      (product) => renderCard ? /* @__PURE__ */ jsxRuntime.jsx(React3__default.default.Fragment, { children: renderCard(product) }, product.id) : /* @__PURE__ */ jsxRuntime.jsx(
+        ProductCard,
         {
-          type: "button",
-          onClick: handleConfirm,
-          disabled: isSubmitting,
-          "data-cimplify-booking-confirm": true,
-          className: classNames?.confirmButton,
-          children: isSubmitting ? isReschedule ? "Rescheduling\u2026" : "Adding to cart\u2026" : isReschedule ? "Reschedule" : "Confirm Booking"
-        }
+          product,
+          renderImage,
+          renderLink,
+          onQuickAdd
+        },
+        product.id
       )
-    ] })
+    ) }) : null
   ] });
 }
-var BOOKING_FILTERS = [
-  { label: "All", value: "all" },
-  { label: "Upcoming", value: "upcoming" },
-  { label: "Past", value: "past" }
-];
-function BookingsPage({
-  title = "My Bookings",
-  bookings: bookingsProp,
-  onBookingNavigate,
-  onCancel,
-  onReschedule,
-  showFilters = true,
-  renderBooking,
+var SearchTemplate = /* @__PURE__ */ ((SearchTemplate2) => {
+  SearchTemplate2["Default"] = "default";
+  SearchTemplate2["Compact"] = "compact";
+  return SearchTemplate2;
+})(SearchTemplate || {});
+var BUILT_IN_LAYOUTS5 = {
+  ["default" /* Default */]: DefaultSearchLayout,
+  ["compact" /* Compact */]: CompactSearchLayout
+};
+function SearchPage({
+  template,
+  layouts,
+  categories,
+  facets,
+  searchOptions,
+  placeholder,
+  renderCard,
+  renderImage,
+  renderLink,
+  onQuickAdd,
   className,
   classNames
 }) {
-  const [filter, setFilter] = React3.useState("all");
-  const [selectedBooking, setSelectedBooking] = React3.useState(null);
-  const handleBookingClick = React3.useCallback(
-    (booking) => {
-      if (onBookingNavigate) {
-        onBookingNavigate(booking);
-      } else {
-        setSelectedBooking(booking);
+  const search = useSearch(searchOptions);
+  const key = template ?? "default" /* Default */;
+  const Layout = layouts?.[key] ?? BUILT_IN_LAYOUTS5[key] ?? DefaultSearchLayout;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-search-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsx(
+    Layout,
+    {
+      search,
+      facets,
+      categories,
+      renderCard,
+      renderImage,
+      renderLink,
+      onQuickAdd,
+      placeholder
+    }
+  ) });
+}
+function DealsPage({
+  title = "Deals & Offers",
+  deals: dealsProp,
+  productsOnSale: productsOnSaleProp,
+  products: productsProp,
+  locationId,
+  renderImage,
+  columns,
+  className,
+  classNames
+}) {
+  const { deals: fetchedDeals, isLoading: dealsLoading } = useDeals({
+    locationId,
+    enabled: dealsProp === void 0
+  });
+  const { products: fetchedOnSale, isLoading: productsLoading } = useProductsOnSale({
+    enabled: productsOnSaleProp === void 0
+  });
+  const deals = dealsProp ?? fetchedDeals;
+  const onSale = productsOnSaleProp ?? fetchedOnSale;
+  const isLoading = dealsLoading || productsLoading;
+  const isEmpty = deals.length === 0 && onSale.length === 0;
+  if (isLoading && isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-cimplify-deals-page": true,
+        "aria-busy": "true",
+        className: cn(className, classNames?.root, classNames?.loading)
       }
-    },
-    [onBookingNavigate]
-  );
-  const handleBack = React3.useCallback(() => {
-    setSelectedBooking(null);
-  }, []);
-  if (selectedBooking && !onBookingNavigate) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-page": true, className: cn(className, classNames?.root), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bookings-detail": true, className: classNames?.detail, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-page": true, className: cn(className, classNames?.root), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-deals-title": true, className: classNames?.title, children: title }) }),
+    deals.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-banner-section": true, className: classNames?.bannerSection, children: /* @__PURE__ */ jsxRuntime.jsx(DealBanner, { deals }) }),
+    (onSale.length > 0 || productsProp && productsProp.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-deals-products": true, className: classNames?.productsSection, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { "data-cimplify-deals-products-title": true, className: classNames?.productsTitle, children: "On Sale Now" }),
+      productsProp ? /* @__PURE__ */ jsxRuntime.jsx(
+        ProductGrid,
         {
-          type: "button",
-          onClick: handleBack,
-          "data-cimplify-bookings-back": true,
-          className: classNames?.backButton,
-          children: "Back to bookings"
+          products: productsProp,
+          renderImage,
+          columns
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BookingCard,
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-list": true, children: onSale.map((dealInfo) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-sale-item": true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        SaleBadge,
         {
-          booking: selectedBooking,
-          onCancel,
-          onReschedule
+          product: { id: dealInfo.product_id, name: dealInfo.deal_name },
+          dealInfo,
+          showOriginalPrice: true
         }
-      )
-    ] }) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-bookings-page": true, className: cn(className, classNames?.root), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-header": true, className: classNames?.header, children: /* @__PURE__ */ jsxRuntime.jsx("h1", { "data-cimplify-bookings-title": true, className: classNames?.title, children: title }) }),
-    showFilters && /* @__PURE__ */ jsxRuntime.jsx(
-      tabs.Tabs.Root,
-      {
-        value: filter,
-        onValueChange: (value) => setFilter(value),
-        children: /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs.List, { "data-cimplify-bookings-filters": true, className: classNames?.filters, children: BOOKING_FILTERS.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
-          tabs.Tabs.Tab,
-          {
-            value: f.value,
-            "data-cimplify-booking-filter": true,
-            "data-selected": filter === f.value || void 0,
-            className: classNames?.filterButton,
-            children: f.label
-          },
-          f.value
-        )) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-bookings-list": true, className: classNames?.list, children: /* @__PURE__ */ jsxRuntime.jsx(
-      BookingList,
-      {
-        bookings: bookingsProp,
-        filter,
-        onCancel,
-        onReschedule,
-        onBookingClick: handleBookingClick,
-        renderBooking
-      }
-    ) })
+      ) }, `${dealInfo.product_id}-${dealInfo.deal_id}`)) })
+    ] }),
+    isEmpty && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cimplify-deals-empty": true, className: classNames?.empty, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No deals available right now. Check back soon!" }) })
   ] });
 }
 function LocationPicker({
@@ -9413,11 +10418,109 @@ function CurrencySelector({
     );
   }) });
 }
+var ANY_VALUE2 = "__any__";
+function roomToResource(room) {
+  return {
+    id: room.id,
+    name: room.name,
+    capacity: room.capacity,
+    floor: room.floor,
+    is_available: room.status === "available"
+  };
+}
+function ResourcePicker({
+  resources,
+  selectedResourceId,
+  onResourceSelect,
+  showAnyOption = true,
+  anyLabel = "Any available",
+  renderImage,
+  className,
+  classNames
+}) {
+  const groupValue = selectedResourceId === null ? ANY_VALUE2 : selectedResourceId ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radioGroup.RadioGroup,
+    {
+      "data-cimplify-resource-picker": true,
+      className: cn("flex flex-col gap-2", className, classNames?.root),
+      value: groupValue,
+      onValueChange: (value) => {
+        onResourceSelect?.(value === ANY_VALUE2 ? null : value);
+      },
+      children: [
+        showAnyOption && /* @__PURE__ */ jsxRuntime.jsx(
+          radio.Radio.Root,
+          {
+            value: ANY_VALUE2,
+            "data-cimplify-resource-option": true,
+            "data-selected": selectedResourceId === null || void 0,
+            "data-any": true,
+            className: cn(
+              "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
+              "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
+              classNames?.option
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: anyLabel })
+          }
+        ),
+        resources.map((resource) => {
+          const unavailable = resource.is_available === false;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            radio.Radio.Root,
+            {
+              value: resource.id,
+              disabled: unavailable,
+              "data-cimplify-resource-option": true,
+              "data-selected": selectedResourceId === resource.id || void 0,
+              "data-unavailable": unavailable || void 0,
+              className: cn(
+                "flex items-center gap-3 rounded-lg border border-border p-3 transition-colors cursor-pointer",
+                "hover:bg-muted data-[checked]:border-primary data-[checked]:bg-primary/5",
+                unavailable && "opacity-50 cursor-not-allowed",
+                classNames?.option,
+                unavailable ? classNames?.unavailable : void 0
+              ),
+              children: [
+                resource.image_url && (renderImage ? renderImage({
+                  src: resource.image_url,
+                  alt: resource.name,
+                  className: classNames?.image
+                }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: resource.image_url,
+                    alt: resource.name,
+                    "data-cimplify-resource-image": true,
+                    className: cn("w-10 h-10 rounded-lg object-cover", classNames?.image)
+                  }
+                )),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-name": true, className: cn("font-medium text-foreground", classNames?.name), children: resource.name }),
+                  resource.description && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-description": true, className: cn("text-sm text-muted-foreground truncate", classNames?.description), children: resource.description }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cimplify-resource-meta": true, className: cn("flex items-center gap-2 text-xs text-muted-foreground", classNames?.meta), children: [
+                    resource.capacity !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-cimplify-resource-capacity": true, className: classNames?.capacity, children: [
+                      "Up to ",
+                      resource.capacity
+                    ] }),
+                    resource.floor && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cimplify-resource-floor": true, className: classNames?.floor, children: resource.floor })
+                  ] })
+                ] })
+              ]
+            },
+            resource.id
+          );
+        })
+      ]
+    }
+  );
+}
 
 Object.defineProperty(exports, "getVariantDisplayName", {
   enumerable: true,
-  get: function () { return chunkIYQGGFVQ_js.getVariantDisplayName; }
+  get: function () { return chunkWMQXSDRC_js.getVariantDisplayName; }
 });
+exports.AccommodationCard = AccommodationCard;
 exports.Ad = Ad;
 exports.AdProvider = AdProvider;
 exports.AddOnSelector = AddOnSelector;
@@ -9427,31 +10530,48 @@ exports.AvailabilityBadge = AvailabilityBadge;
 exports.BillingPlanSelector = BillingPlanSelector;
 exports.BookingCard = BookingCard;
 exports.BookingList = BookingList;
-exports.BookingPage = BookingPage;
-exports.BookingsPage = BookingsPage;
 exports.BundleSelector = BundleSelector;
+exports.CardImage = CardImage;
+exports.CardShell = CardShell;
+exports.CardVariant = CardVariant;
 exports.CartPage = CartPage;
 exports.CartSummary = CartSummary;
+exports.CartTemplate = CartTemplate;
+exports.CatalogueCollectionLayout = CatalogueCollectionLayout;
 exports.CataloguePage = CataloguePage;
+exports.CatalogueTemplate = CatalogueTemplate;
 exports.CategoryFilter = CategoryFilter;
 exports.CategoryGrid = CategoryGrid;
 exports.CheckoutPage = CheckoutPage;
 exports.CimplifyCheckout = CimplifyCheckout;
 exports.CimplifyProvider = CimplifyProvider;
 exports.CollectionPage = CollectionPage;
+exports.CollectionTemplate = CollectionTemplate;
+exports.CompactCartLayout = CompactCartLayout;
+exports.CompactCatalogueLayout = CompactCatalogueLayout;
+exports.CompactSearchLayout = CompactSearchLayout;
+exports.CompactServiceCard = CompactServiceCard;
 exports.CompositeSelector = CompositeSelector;
 exports.CurrencySelector = CurrencySelector;
 exports.CustomAttributesTable = CustomAttributesTable;
 exports.DateSlotPicker = DateSlotPicker;
 exports.DealBanner = DealBanner;
 exports.DealsPage = DealsPage;
+exports.DefaultCartLayout = DefaultCartLayout;
+exports.DefaultCatalogueLayout = DefaultCatalogueLayout;
+exports.DefaultCollectionLayout = DefaultCollectionLayout;
 exports.DefaultProductLayout = DefaultProductLayout;
+exports.DefaultSearchLayout = DefaultSearchLayout;
 exports.DeliveryEstimate = DeliveryEstimate;
+exports.DigitalProductCard = DigitalProductCard;
 exports.DigitalProductLayout = DigitalProductLayout;
 exports.DiscountInput = DiscountInput;
 exports.ElementsProvider = ElementsProvider;
+exports.FeaturedCollectionLayout = FeaturedCollectionLayout;
+exports.FoodProductCard = FoodProductCard;
 exports.FoodProductLayout = FoodProductLayout;
 exports.InventoryBadge = InventoryBadge;
+exports.LeaseServiceCard = LeaseServiceCard;
 exports.LocationPicker = LocationPicker;
 exports.MetadataStringList = MetadataStringList;
 exports.OrderDetailPage = OrderDetailPage;
@@ -9470,25 +10590,33 @@ exports.ProductSheet = ProductSheet;
 exports.ProductTemplate = ProductTemplate;
 exports.PropertiesTable = PropertiesTable;
 exports.QuantitySelector = QuantitySelector;
+exports.QuickAddButton = QuickAddButton;
 exports.RecentlyViewed = RecentlyViewed;
 exports.RecommendationCarousel = RecommendationCarousel;
 exports.RelatedProductsSection = RelatedProductsSection;
+exports.RentalServiceCard = RentalServiceCard;
 exports.ResourcePicker = ResourcePicker;
+exports.RetailProductCard = RetailProductCard;
 exports.SaleBadge = SaleBadge;
+exports.ScheduleServiceCard = ScheduleServiceCard;
 exports.SearchInput = SearchInput;
 exports.SearchPage = SearchPage;
-exports.ServiceCard = ServiceCard;
-exports.ServiceGrid = ServiceGrid;
+exports.SearchTemplate = SearchTemplate;
 exports.ServiceProductLayout = ServiceProductLayout;
 exports.SessionMessageBanner = SessionMessageBanner;
 exports.SlotPicker = SlotPicker;
+exports.SoldOutOverlay = SoldOutOverlay;
 exports.StaffPicker = StaffPicker;
+exports.StandardServiceCard = StandardServiceCard;
 exports.StoreNav = StoreNav;
+exports.SubscriptionCard = SubscriptionCard;
 exports.TagPills = TagPills;
 exports.TwoColumnGrid = TwoColumnGrid;
 exports.VariantSelector = VariantSelector;
 exports.VolumePricing = VolumePricing;
+exports.WholesaleProductCard = WholesaleProductCard;
 exports.WholesaleProductLayout = WholesaleProductLayout;
+exports.WishlistButton = WishlistButton;
 exports.cn = cn;
 exports.roomToResource = roomToResource;
 exports.useActivityState = useActivityState;