@lexsis/storefront-components 1.0.0

package/dist/product/ProductCard.d.ts

@@ -0,0 +1,62 @@
+export type CardStyle = "standard" | "editorial" | "minimal" | "floating" | "story" | "polaroid" | "magnetic" | "spotlight" | "flip" | "morph";
+export type ImageAspect = "1:1" | "3:4" | "4:5" | "16:9";
+export type HoverReveal = "none" | "quick_add" | "details";
+export type BadgeStyle = "pill" | "ribbon" | "corner";
+export type ShadowLevel = "none" | "sm" | "md" | "lg";
+export interface ProductItem {
+    name: string;
+    price: string;
+    compare_price?: string;
+    image_url?: string;
+    handle?: string;
+    badge?: string;
+    images?: string[];
+    rating?: number;
+    colors?: string[];
+    card_style?: CardStyle;
+    image_aspect?: ImageAspect;
+    hover_image?: boolean;
+    hover_image_speed?: number;
+    hover_reveal?: HoverReveal;
+    badge_style?: BadgeStyle;
+    image_fit?: "cover" | "contain";
+    card_shadow?: ShadowLevel;
+    blob_color?: string;
+}
+export interface ProductCardSectionFlags {
+    card_style: CardStyle;
+    image_aspect: ImageAspect;
+    hover_image: boolean;
+    hover_image_speed: number;
+    hover_reveal: HoverReveal;
+    show_compare_price: boolean;
+    show_rating: boolean;
+    show_color_swatches: boolean;
+    badge_style: BadgeStyle;
+    image_fit: "cover" | "contain";
+    card_shadow: ShadowLevel;
+    blob_color: string;
+}
+export interface ProductCardProps {
+    item: ProductItem;
+    flags: ProductCardSectionFlags;
+    theme: {
+        palette: {
+            bg: string;
+            surface: string;
+            text: string;
+            accent: string;
+            border?: string;
+        };
+        fonts: {
+            display: string;
+            body: string;
+        };
+    };
+    isCarouselCard?: boolean;
+    idx?: number;
+}
+export declare function parseSectionFlags(content: Record<string, unknown>): ProductCardSectionFlags;
+export declare function ProductCard({ item, flags, theme, isCarouselCard, idx }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+export default ProductCard;
+//# sourceMappingURL=ProductCard.d.ts.map

package/dist/product/ProductCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductCard.d.ts","sourceRoot":"","sources":["../../src/product/ProductCard.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,SAAS,GAAK,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AACjJ,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AACzD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;AAC3D,MAAM,MAAM,UAAU,GAAI,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACvD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAElB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,SAAS,CAAC;IACtB,YAAY,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,YAAY,EAAE,WAAW,CAAC;IAC1B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,WAAW,CAAC;IAClB,KAAK,EAAE,uBAAuB,CAAC;IAC/B,KAAK,EAAE;QACL,OAAO,EAAE;YAAE,EAAE,EAAE,MAAM,CAAC;YAAC,OAAO,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACxF,KAAK,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,IAAI,EAAE,MAAM,CAAA;SAAE,CAAC;KAC1C,CAAC;IACF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAkBD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,uBAAuB,CAe3F;AA2ND,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,cAAsB,EAAE,GAAO,EAAE,EAAE,gBAAgB,2CAmuBpG;AAED,eAAe,WAAW,CAAC"}

package/dist/product/ProductCard.js

@@ -0,0 +1,442 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { motion, useSpring, useMotionValue, useTransform, AnimatePresence } from "framer-motion";
+import { useMouseOffset } from "../animations/advanced-hooks";
+// ── Default flags ──────────────────────────────────────────────────────────
+const DEFAULT_FLAGS = {
+    card_style: "standard",
+    image_aspect: "1:1",
+    hover_image: true,
+    hover_image_speed: 1500,
+    hover_reveal: "quick_add",
+    show_compare_price: true,
+    show_rating: false,
+    show_color_swatches: false,
+    badge_style: "pill",
+    image_fit: "cover",
+    card_shadow: "md",
+    blob_color: "#fde8d8",
+};
+export function parseSectionFlags(content) {
+    return {
+        card_style: content.card_style ?? DEFAULT_FLAGS.card_style,
+        image_aspect: content.image_aspect ?? DEFAULT_FLAGS.image_aspect,
+        hover_image: content.hover_image !== false,
+        hover_image_speed: typeof content.hover_image_speed === "number" ? content.hover_image_speed : DEFAULT_FLAGS.hover_image_speed,
+        hover_reveal: content.hover_reveal ?? DEFAULT_FLAGS.hover_reveal,
+        show_compare_price: content.show_compare_price !== false,
+        show_rating: Boolean(content.show_rating),
+        show_color_swatches: Boolean(content.show_color_swatches),
+        badge_style: content.badge_style ?? DEFAULT_FLAGS.badge_style,
+        image_fit: content.image_fit ?? DEFAULT_FLAGS.image_fit,
+        card_shadow: content.card_shadow ?? DEFAULT_FLAGS.card_shadow,
+        blob_color: typeof content.blob_color === "string" ? content.blob_color : DEFAULT_FLAGS.blob_color,
+    };
+}
+// ── Maps ───────────────────────────────────────────────────────────────────
+const ASPECT_MAP = {
+    "1:1": "1 / 1", "3:4": "3 / 4", "4:5": "4 / 5", "16:9": "16 / 9",
+};
+const SHADOW_MAP = {
+    none: "none",
+    sm: "0 2px 8px rgba(0,0,0,0.07)",
+    md: "var(--lx-shadow-md, 0 8px 24px rgba(0,0,0,0.12))",
+    lg: "0 16px 48px rgba(0,0,0,0.18)",
+};
+const SHADOW_HOVER_MAP = {
+    none: "none",
+    sm: "0 4px 14px rgba(0,0,0,0.12)",
+    md: "0 16px 40px rgba(0,0,0,0.18)",
+    lg: "0 24px 60px rgba(0,0,0,0.24)",
+};
+// ── Hooks ──────────────────────────────────────────────────────────────────
+function useImageCycle(images, speed, active) {
+    const [idx, setIdx] = useState(0);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        if (timerRef.current)
+            clearInterval(timerRef.current);
+        if (!active || images.length < 2) {
+            setIdx(0);
+            return;
+        }
+        setIdx(1);
+        if (images.length < 3)
+            return;
+        let current = 1;
+        timerRef.current = setInterval(() => {
+            current = (current % (images.length - 1)) + 1;
+            setIdx(current);
+        }, speed);
+        return () => { if (timerRef.current)
+            clearInterval(timerRef.current); };
+    }, [active, images.length, speed]);
+    return images[idx] ?? images[0] ?? "";
+}
+// ── Sub-components ─────────────────────────────────────────────────────────
+function StarRow({ rating }) {
+    const r = Math.round(Math.min(5, Math.max(0, rating)));
+    return (_jsx("div", { style: { fontSize: "0.75rem", lineHeight: 1, letterSpacing: "0.06em" }, children: Array.from({ length: 5 }, (_, i) => (_jsx("span", { style: { color: "#f59e0b", opacity: i < r ? 1 : 0.3 }, children: "\u2605" }, i))) }));
+}
+function ColorSwatches({ colors }) {
+    const visible = colors.slice(0, 6);
+    const extra = colors.length - 6;
+    return (_jsxs("div", { style: { display: "flex", gap: "var(--lx-productcard-swatch-gap, var(--lx-space-xs))", flexWrap: "wrap", alignItems: "center" }, children: [visible.map((hex, i) => (_jsx("span", { style: {
+                    display: "inline-block", width: "12px", height: "12px",
+                    borderRadius: "var(--lx-productcard-swatch-radius, var(--lx-radius-full))", backgroundColor: hex,
+                    border: "1px solid rgba(0,0,0,0.12)",
+                } }, i))), extra > 0 && (_jsxs("span", { style: { fontSize: "0.6rem", opacity: 0.6 }, children: ["+", extra] }))] }));
+}
+function BadgeOverlay({ badge, compare_price, badgeStyle, theme, }) {
+    const hasBadge = badge || compare_price;
+    if (!hasBadge)
+        return null;
+    const label = compare_price ? "SALE" : badge;
+    const bg = compare_price ? theme.palette.accent : theme.palette.accent;
+    if (badgeStyle === "ribbon") {
+        return (_jsx("div", { style: {
+                position: "absolute", top: 0, left: 0,
+                width: "72px", height: "72px", overflow: "hidden", zIndex: 2,
+            }, children: _jsx("span", { style: {
+                    position: "absolute",
+                    top: "18px", left: "-28px",
+                    width: "110px",
+                    backgroundColor: bg,
+                    color: "#fff",
+                    fontSize: "0.6rem",
+                    fontWeight: 700,
+                    textAlign: "center",
+                    padding: "3px 0",
+                    transform: "rotate(-45deg)",
+                    display: "block",
+                    letterSpacing: "0.04em",
+                }, children: label }) }));
+    }
+    if (badgeStyle === "corner") {
+        return (_jsx("div", { style: {
+                position: "absolute", top: 0, right: 0, zIndex: 2,
+                backgroundColor: bg, color: "#fff",
+                borderRadius: "0 0 0 var(--lx-productcard-badge-radius, var(--lx-radius-md))",
+                padding: "var(--lx-productcard-badge-padding-y, var(--lx-space-xs)) var(--lx-productcard-badge-padding-x, var(--lx-space-3))",
+                fontSize: "0.65rem",
+                fontWeight: 700,
+                letterSpacing: "0.04em",
+            }, children: label }));
+    }
+    // pill (default)
+    return (_jsxs("div", { style: { position: "absolute", top: "var(--lx-space-3)", left: "var(--lx-space-3)", zIndex: 2, display: "flex", flexDirection: "column", gap: "var(--lx-productcard-badge-gap, var(--lx-space-xs))" }, children: [compare_price && (_jsx("span", { style: { backgroundColor: theme.palette.accent, color: "#fff", fontSize: "0.65rem", fontWeight: 700, padding: "2px 10px", borderRadius: "var(--lx-productcard-badge-radius, var(--lx-radius-full))" }, children: "SALE" })), badge && (_jsx("span", { style: { backgroundColor: theme.palette.accent, color: "#fff", fontSize: "0.65rem", fontWeight: 700, padding: "2px 10px", borderRadius: "var(--lx-productcard-badge-radius, var(--lx-radius-full))" }, children: badge }))] }));
+}
+function HoverRevealOverlay({ reveal, item, theme, isHovered, showRating, showSwatches, }) {
+    if (reveal === "none")
+        return null;
+    const visible = isHovered;
+    if (reveal === "quick_add") {
+        return (_jsx("div", { style: {
+                position: "absolute", inset: "auto 0 0 0",
+                padding: "10px",
+                opacity: visible ? 1 : 0,
+                transform: visible ? "translateY(0)" : "translateY(8px)",
+                transition: "opacity 0.2s ease, transform 0.2s ease",
+                zIndex: 3,
+            }, children: _jsx("button", { type: "button", "data-lx-atc": "", "data-variant-gid": item.handle || "", "data-qty": "1", style: {
+                    width: "100%",
+                    padding: "10px 0",
+                    fontSize: "0.85rem",
+                    fontWeight: 600,
+                    color: "#fff",
+                    backgroundColor: theme.palette.accent,
+                    border: "none",
+                    borderRadius: "var(--lx-button-radius, 8px)",
+                    cursor: "pointer",
+                }, children: "Add to Cart" }) }));
+    }
+    // details
+    return (_jsxs("div", { style: {
+            position: "absolute", inset: "auto 0 0 0",
+            padding: "10px 12px",
+            backgroundColor: "rgba(0,0,0,0.6)",
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            opacity: visible ? 1 : 0,
+            transform: visible ? "translateY(0)" : "translateY(8px)",
+            transition: "opacity 0.2s ease, transform 0.2s ease",
+            zIndex: 3,
+        }, children: [showRating && item.rating != null && _jsx(StarRow, { rating: item.rating }), showSwatches && item.colors?.length ? _jsx(ColorSwatches, { colors: item.colors }) : null, _jsx("a", { href: item.handle ? `/products/${item.handle}` : "#", style: { marginLeft: "auto", color: "#fff", fontSize: "0.75rem", fontWeight: 600, textDecoration: "none", opacity: 0.9 }, children: "View Details \u2192" })] }));
+}
+// ── Main Component ─────────────────────────────────────────────────────────
+export function ProductCard({ item, flags, theme, isCarouselCard = false, idx = 0 }) {
+    const [isHovered, setIsHovered] = useState(false);
+    // Merge per-item overrides over section flags
+    const style = item.card_style ?? flags.card_style;
+    const aspect = item.image_aspect ?? flags.image_aspect;
+    const doHover = item.hover_image ?? flags.hover_image;
+    const hoverSpeed = item.hover_image_speed ?? flags.hover_image_speed;
+    const reveal = item.hover_reveal ?? flags.hover_reveal;
+    const badgeStyle = item.badge_style ?? flags.badge_style;
+    const imageFit = item.image_fit ?? flags.image_fit;
+    const shadow = item.card_shadow ?? flags.card_shadow;
+    const blobColor = item.blob_color ?? flags.blob_color;
+    // Build image list: prefer item.images[], fall back to [image_url]
+    const images = (item.images && item.images.length > 0)
+        ? item.images
+        : (item.image_url ? [item.image_url] : []);
+    const primarySrc = images[0] ?? "";
+    const cycledSrc = useImageCycle(images, hoverSpeed, isHovered && doHover);
+    const hasHoverImage = doHover && images.length > 1;
+    const aspectRatioCss = ASPECT_MAP[aspect];
+    const shadowCss = isHovered ? SHADOW_HOVER_MAP[shadow] : SHADOW_MAP[shadow];
+    const outerStyle = isCarouselCard
+        ? { flexShrink: 0, width: "280px", scrollSnapAlign: "start" }
+        : { display: "block", width: "100%" };
+    // ── FLOATING ──────────────────────────────────────────────────────────
+    if (style === "floating") {
+        return (_jsxs("div", { style: {
+                ...outerStyle,
+                backgroundColor: theme.palette.bg,
+                borderRadius: "var(--lx-card-radius, 12px)",
+                overflow: "visible",
+                transition: "transform 0.3s ease, box-shadow 0.3s ease",
+                transform: isHovered ? "translateY(-3px)" : "translateY(0)",
+                boxShadow: shadowCss,
+                cursor: "pointer",
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, borderRadius: "var(--lx-card-radius, 12px)", overflow: "hidden", backgroundColor: theme.palette.bg }, children: [_jsx("div", { style: {
+                                position: "absolute",
+                                top: "50%", left: "50%",
+                                transform: "translate(-50%, -50%)",
+                                width: "78%", height: "78%",
+                                borderRadius: "60% 40% 70% 30% / 40% 60% 30% 70%",
+                                backgroundColor: blobColor,
+                                opacity: 0.5,
+                                transition: "border-radius 0.8s ease",
+                                zIndex: 0,
+                            } }), primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: {
+                                position: "absolute", inset: 0, width: "100%", height: "100%",
+                                objectFit: "contain", padding: "var(--lx-productcard-image-padding, var(--lx-space-3))",
+                                opacity: hasHoverImage && isHovered ? 0 : 1,
+                                transition: "opacity 0.35s ease",
+                                zIndex: 1,
+                            } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: {
+                                position: "absolute", inset: 0, width: "100%", height: "100%",
+                                objectFit: "contain", padding: "var(--lx-productcard-image-padding, var(--lx-space-3))",
+                                opacity: isHovered ? 1 : 0,
+                                transition: "opacity 0.35s ease",
+                                zIndex: 1,
+                            } })), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme }), _jsx(HoverRevealOverlay, { reveal: reveal, item: item, theme: theme, isHovered: isHovered, showRating: flags.show_rating, showSwatches: flags.show_color_swatches })] }), _jsxs("div", { style: { padding: "var(--lx-productcard-info-padding-top, var(--lx-space-3)) var(--lx-productcard-info-padding-x, var(--lx-space-xs)) var(--lx-productcard-info-padding-bottom, var(--lx-space-sm))" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.9rem", fontWeight: 600, margin: "0 0 4px", lineHeight: 1.3 }, children: item.name }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "1rem", color: theme.palette.accent }, children: item.price }), flags.show_compare_price && item.compare_price && (_jsx("span", { style: { fontSize: "0.8rem", textDecoration: "line-through", opacity: 0.5, color: theme.palette.text }, children: item.compare_price }))] }), flags.show_rating && item.rating != null && _jsx("div", { style: { marginTop: "var(--lx-productcard-rating-gap, var(--lx-space-xs))" }, children: _jsx(StarRow, { rating: item.rating }) }), flags.show_color_swatches && item.colors?.length ? _jsx("div", { style: { marginTop: "6px" }, children: _jsx(ColorSwatches, { colors: item.colors }) }) : null] })] }));
+    }
+    // ── EDITORIAL ─────────────────────────────────────────────────────────
+    if (style === "editorial") {
+        return (_jsxs("div", { style: {
+                ...outerStyle,
+                position: "relative",
+                borderRadius: "var(--lx-card-radius, 12px)",
+                overflow: "hidden",
+                aspectRatio: aspectRatioCss,
+                boxShadow: shadowCss,
+                transition: "transform 0.3s ease, box-shadow 0.3s ease",
+                transform: isHovered ? "scale(1.02)" : "scale(1)",
+                cursor: "pointer",
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                        opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                        opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 55%)", zIndex: 1 } }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "var(--lx-productcard-info-padding, var(--lx-space-md))", zIndex: 2 }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.display, color: "#fff", fontSize: "1rem", fontWeight: 700, margin: "0 0 4px", lineHeight: 1.2 }, children: item.name }), _jsx("span", { style: { color: "#fff", opacity: 0.85, fontSize: "0.875rem", fontWeight: 500 }, children: item.price }), flags.show_rating && item.rating != null && _jsx("div", { style: { marginTop: "var(--lx-productcard-rating-gap, var(--lx-space-xs))" }, children: _jsx(StarRow, { rating: item.rating }) })] }), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme }), _jsx(HoverRevealOverlay, { reveal: reveal, item: item, theme: theme, isHovered: isHovered, showRating: false, showSwatches: flags.show_color_swatches })] }));
+    }
+    // ── MINIMAL ───────────────────────────────────────────────────────────
+    if (style === "minimal") {
+        return (_jsxs("div", { style: { ...outerStyle, backgroundColor: "transparent", cursor: "pointer" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, borderRadius: "var(--lx-productcard-image-radius, var(--lx-radius-md))", overflow: "hidden" }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme })] }), _jsxs("div", { style: { paddingTop: "10px" }, children: [_jsx("h3", { style: {
+                                fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.875rem",
+                                fontWeight: 500, margin: "0 0 4px",
+                                textDecoration: isHovered ? "underline" : "none",
+                                transition: "text-decoration 0.15s ease",
+                            }, children: item.name }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "0.875rem", color: theme.palette.text }, children: item.price }), flags.show_compare_price && item.compare_price && (_jsx("span", { style: { fontSize: "0.75rem", textDecoration: "line-through", opacity: 0.45, color: theme.palette.text }, children: item.compare_price }))] }), flags.show_rating && item.rating != null && _jsx("div", { style: { marginTop: "var(--lx-productcard-rating-gap, var(--lx-space-xs))" }, children: _jsx(StarRow, { rating: item.rating }) }), flags.show_color_swatches && item.colors?.length ? _jsx("div", { style: { marginTop: "6px" }, children: _jsx(ColorSwatches, { colors: item.colors }) }) : null] })] }));
+    }
+    // ── STORY ─────────────────────────────────────────────────────────────
+    if (style === "story") {
+        return (_jsxs("div", { style: {
+                ...outerStyle,
+                position: "relative",
+                borderRadius: "var(--lx-card-radius, 12px)",
+                overflow: "hidden",
+                aspectRatio: "4 / 5",
+                boxShadow: shadowCss,
+                transition: "transform 0.3s ease, box-shadow 0.3s ease",
+                transform: isHovered ? "scale(1.02)" : "scale(1)",
+                cursor: "pointer",
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
+                        opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
+                        opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0) 50%)", zIndex: 1 } }), _jsxs("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, padding: "var(--lx-productcard-info-padding, var(--lx-space-md))", zIndex: 2 }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.display, color: "#fff", fontSize: "1.1rem", fontWeight: 700, margin: "0 0 4px", lineHeight: 1.2 }, children: item.name }), _jsx("span", { style: { color: "#fff", opacity: 0.85, fontSize: "0.9rem" }, children: item.price }), flags.show_color_swatches && item.colors?.length ? _jsx("div", { style: { marginTop: "6px" }, children: _jsx(ColorSwatches, { colors: item.colors }) }) : null] }), (item.badge || item.compare_price) && (_jsx("div", { style: { position: "absolute", top: "var(--lx-space-3)", right: "var(--lx-space-3)", zIndex: 3 }, children: _jsx("span", { style: {
+                            backgroundColor: theme.palette.accent,
+                            color: "#fff", fontSize: "0.65rem", fontWeight: 700, padding: "2px 10px", borderRadius: "var(--lx-productcard-badge-radius, var(--lx-radius-full))",
+                        }, children: item.compare_price ? "SALE" : item.badge }) })), _jsx(HoverRevealOverlay, { reveal: reveal, item: item, theme: theme, isHovered: isHovered, showRating: flags.show_rating, showSwatches: false })] }));
+    }
+    // ── POLAROID ──────────────────────────────────────────────────────────
+    if (style === "polaroid") {
+        const tiltDeg = idx % 2 === 0 ? -1.5 : 1.5;
+        return (_jsxs("div", { style: {
+                ...outerStyle,
+                backgroundColor: theme.palette.surface,
+                padding: "10px 10px 36px",
+                boxShadow: isHovered ? "0 12px 36px rgba(0,0,0,0.2)" : "0 4px 18px rgba(0,0,0,0.14)",
+                transition: "transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease",
+                transform: isHovered ? "rotate(0deg) scale(1.03) translateY(-4px)" : `rotate(${tiltDeg}deg)`,
+                cursor: "pointer",
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, overflow: "hidden" }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } }))] }), _jsxs("div", { style: { paddingTop: "10px", textAlign: "center" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.85rem", fontStyle: "italic", margin: "0 0 4px", fontWeight: 400 }, children: item.name }), _jsx("span", { style: { fontWeight: 700, fontSize: "0.875rem", color: theme.palette.accent }, children: item.price })] })] }));
+    }
+    // ── MAGNETIC ─────────────────────────────────────────────────────────
+    // Card physically follows cursor. Premium feel, signals interactivity.
+    if (style === "magnetic") {
+        const cardRef = useRef(null);
+        const offset = useMouseOffset(cardRef, 0.08);
+        const springX = useSpring(0, { stiffness: 200, damping: 20 });
+        const springY = useSpring(0, { stiffness: 200, damping: 20 });
+        useEffect(() => {
+            if (isHovered) {
+                springX.set(offset.x);
+                springY.set(offset.y);
+            }
+            else {
+                springX.set(0);
+                springY.set(0);
+            }
+        }, [isHovered, offset.x, offset.y]);
+        return (_jsxs(motion.div, { ref: cardRef, style: {
+                ...outerStyle,
+                x: springX,
+                y: springY,
+                backgroundColor: theme.palette.surface,
+                borderRadius: "var(--lx-card-radius, 12px)",
+                overflow: "hidden",
+                cursor: "pointer",
+                position: "relative",
+                zIndex: isHovered ? 10 : 0,
+            }, whileHover: { scale: 1.04, boxShadow: "0 24px 60px rgba(0,0,0,0.22), 0 0 0 1.5px rgba(0,0,0,0.06)" }, transition: { type: "spring", stiffness: 300, damping: 25 }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, overflow: "hidden" }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx(motion.div, { initial: { x: "-100%", opacity: 0 }, animate: isHovered ? { x: "150%", opacity: 0.18 } : { x: "-100%", opacity: 0 }, transition: { duration: 0.55, ease: "easeInOut" }, style: {
+                                position: "absolute", inset: 0, zIndex: 4, pointerEvents: "none",
+                                background: "linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.9) 50%, transparent 60%)",
+                                transform: "skewX(-15deg)",
+                            } }), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme }), _jsx(HoverRevealOverlay, { reveal: reveal, item: item, theme: theme, isHovered: isHovered, showRating: flags.show_rating, showSwatches: flags.show_color_swatches })] }), _jsxs("div", { style: { padding: "14px 16px" }, children: [_jsx(motion.h3, { animate: { color: isHovered ? theme.palette.accent : theme.palette.text }, transition: { duration: 0.2 }, style: { fontFamily: theme.fonts.body, fontSize: "0.9rem", fontWeight: 600, margin: "0 0 6px", lineHeight: 1.3 }, children: item.name }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "1rem", color: theme.palette.accent }, children: item.price }), flags.show_compare_price && item.compare_price && (_jsx("span", { style: { fontSize: "0.8rem", textDecoration: "line-through", opacity: 0.5, color: theme.palette.text }, children: item.compare_price }))] }), flags.show_rating && item.rating != null && _jsx("div", { style: { marginTop: "var(--lx-productcard-rating-gap, var(--lx-space-xs))" }, children: _jsx(StarRow, { rating: item.rating }) }), _jsx(AnimatePresence, { children: isHovered && flags.show_color_swatches && item.colors?.length && (_jsx(motion.div, { initial: { opacity: 0, height: 0 }, animate: { opacity: 1, height: "auto" }, exit: { opacity: 0, height: 0 }, transition: { duration: 0.2 }, style: { overflow: "hidden", marginTop: "6px" }, children: _jsx(ColorSwatches, { colors: item.colors }) })) })] })] }));
+    }
+    // ── SPOTLIGHT ─────────────────────────────────────────────────────────
+    // Radial spotlight follows cursor across the card image. Dramatic + premium.
+    if (style === "spotlight") {
+        const cardRef = useRef(null);
+        const mouseX = useMotionValue(0);
+        const mouseY = useMotionValue(0);
+        const spotlightX = useSpring(mouseX, { stiffness: 180, damping: 18 });
+        const spotlightY = useSpring(mouseY, { stiffness: 180, damping: 18 });
+        const spotlightOpacity = useSpring(0, { stiffness: 200, damping: 20 });
+        const gradientBg = useTransform([spotlightX, spotlightY], ([x, y]) => `radial-gradient(circle 160px at ${x}px ${y}px, rgba(255,255,255,0.22) 0%, transparent 70%)`);
+        function handleMouseMove(e) {
+            const rect = cardRef.current?.getBoundingClientRect();
+            if (!rect)
+                return;
+            mouseX.set(e.clientX - rect.left);
+            mouseY.set(e.clientY - rect.top);
+        }
+        return (_jsxs(motion.div, { ref: cardRef, style: {
+                ...outerStyle,
+                backgroundColor: theme.palette.surface,
+                borderRadius: "var(--lx-card-radius, 12px)",
+                overflow: "hidden",
+                cursor: "pointer",
+                boxShadow: SHADOW_MAP[shadow],
+            }, whileHover: { scale: 1.025, boxShadow: SHADOW_HOVER_MAP[shadow] }, transition: { type: "spring", stiffness: 280, damping: 24 }, onMouseEnter: () => { setIsHovered(true); spotlightOpacity.set(1); }, onMouseLeave: () => { setIsHovered(false); spotlightOpacity.set(0); }, onMouseMove: handleMouseMove, children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, overflow: "hidden" }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx(motion.div, { style: {
+                                position: "absolute", inset: 0, zIndex: 3, pointerEvents: "none",
+                                background: gradientBg,
+                                opacity: spotlightOpacity,
+                                mixBlendMode: "overlay",
+                            } }), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme }), _jsx(HoverRevealOverlay, { reveal: reveal, item: item, theme: theme, isHovered: isHovered, showRating: flags.show_rating, showSwatches: flags.show_color_swatches })] }), _jsxs("div", { style: { padding: "14px 16px" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.9rem", fontWeight: 600, margin: "0 0 6px", lineHeight: 1.3 }, children: item.name }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "1rem", color: theme.palette.accent }, children: item.price }), flags.show_compare_price && item.compare_price && (_jsx("span", { style: { fontSize: "0.8rem", textDecoration: "line-through", opacity: 0.5, color: theme.palette.text }, children: item.compare_price }))] }), flags.show_rating && item.rating != null && _jsx("div", { style: { marginTop: "var(--lx-productcard-rating-gap, var(--lx-space-xs))" }, children: _jsx(StarRow, { rating: item.rating }) }), flags.show_color_swatches && item.colors?.length ? _jsx("div", { style: { marginTop: "6px" }, children: _jsx(ColorSwatches, { colors: item.colors }) }) : null] })] }));
+    }
+    // ── FLIP ──────────────────────────────────────────────────────────────
+    // 3D card flip — front=image+price, back=details+add-to-cart. Delight + CRO.
+    if (style === "flip") {
+        return (_jsx("div", { style: { ...outerStyle, perspective: "1200px", cursor: "pointer" }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: _jsxs(motion.div, { style: { position: "relative", width: "100%", transformStyle: "preserve-3d", minHeight: "340px" }, animate: { rotateY: isHovered ? 180 : 0 }, transition: { type: "spring", stiffness: 220, damping: 28 }, children: [_jsxs("div", { style: {
+                            backfaceVisibility: "hidden",
+                            WebkitBackfaceVisibility: "hidden",
+                            borderRadius: "var(--lx-card-radius, 12px)",
+                            overflow: "hidden",
+                            backgroundColor: theme.palette.surface,
+                            boxShadow: SHADOW_MAP[shadow],
+                        }, children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, overflow: "hidden" }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { width: "100%", height: "100%", objectFit: imageFit, display: "block" } })), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme })] }), _jsxs("div", { style: { padding: "14px 16px" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.9rem", fontWeight: 600, margin: "0 0 4px" }, children: item.name }), _jsx("span", { style: { fontWeight: 700, fontSize: "1rem", color: theme.palette.accent }, children: item.price })] })] }), _jsxs("div", { style: {
+                            position: "absolute", inset: 0, top: 0, left: 0, right: 0, bottom: 0,
+                            backfaceVisibility: "hidden",
+                            WebkitBackfaceVisibility: "hidden",
+                            transform: "rotateY(180deg)",
+                            borderRadius: "var(--lx-card-radius, 12px)",
+                            overflow: "hidden",
+                            backgroundColor: theme.palette.accent,
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            padding: "var(--lx-productcard-flip-back-padding, var(--lx-space-lg))",
+                            gap: "var(--lx-productcard-flip-back-gap, var(--lx-space-md))",
+                            boxShadow: SHADOW_HOVER_MAP[shadow],
+                        }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, style: { width: "80px", height: "80px", objectFit: "contain", borderRadius: "var(--lx-productcard-flip-thumb-radius, var(--lx-radius-lg))", backgroundColor: "rgba(255,255,255,0.15)" } })), _jsxs("div", { style: { textAlign: "center" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.display, color: "#fff", fontSize: "1.1rem", fontWeight: 700, margin: "0 0 4px" }, children: item.name }), _jsx("span", { style: { color: "rgba(255,255,255,0.85)", fontSize: "0.9rem" }, children: item.price }), flags.show_rating && item.rating != null && (_jsx("div", { style: { marginTop: "6px", display: "flex", justifyContent: "center" }, children: _jsx(StarRow, { rating: item.rating }) }))] }), flags.show_color_swatches && item.colors?.length && (_jsx(ColorSwatches, { colors: item.colors })), _jsx("button", { type: "button", "data-lx-atc": "", "data-variant-gid": item.handle || "", "data-qty": "1", style: {
+                                    backgroundColor: "#fff",
+                                    color: theme.palette.accent,
+                                    border: "none",
+                                    borderRadius: "var(--lx-productcard-badge-radius, var(--lx-radius-full))",
+                                    padding: "10px 28px",
+                                    fontSize: "0.875rem",
+                                    fontWeight: 700,
+                                    fontFamily: theme.fonts.body,
+                                    cursor: "pointer",
+                                    width: "100%",
+                                }, children: "Add to Cart" })] })] }) }));
+    }
+    // ── MORPH ─────────────────────────────────────────────────────────────
+    // Card expands vertically on hover, revealing a details strip below the image.
+    // Feels like a drawer opening. Spring physics = premium.
+    if (style === "morph") {
+        return (_jsxs(motion.div, { layout: true, style: {
+                ...outerStyle,
+                backgroundColor: theme.palette.surface,
+                borderRadius: "var(--lx-card-radius, 12px)",
+                overflow: "hidden",
+                cursor: "pointer",
+                boxShadow: SHADOW_MAP[shadow],
+                position: "relative",
+                zIndex: isHovered ? 10 : 0,
+            }, animate: {
+                boxShadow: isHovered ? SHADOW_HOVER_MAP[shadow] : SHADOW_MAP[shadow],
+                y: isHovered ? -6 : 0,
+            }, transition: { type: "spring", stiffness: 260, damping: 24 }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs(motion.div, { style: { position: "relative", aspectRatio: aspectRatioCss, overflow: "hidden" }, animate: { scale: isHovered ? 1.04 : 1 }, transition: { type: "spring", stiffness: 300, damping: 25 }, children: [primarySrc && (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: hasHoverImage && isHovered ? 0 : 1, transition: "opacity 0.35s ease" } })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                                opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme })] }), _jsxs("div", { style: { padding: "var(--lx-productcard-info-padding-top, var(--lx-space-3)) var(--lx-productcard-info-padding-x, var(--lx-space-md)) 10px" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.9rem", fontWeight: 600, margin: "0 0 4px" }, children: item.name }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "1rem", color: theme.palette.accent }, children: item.price }), flags.show_compare_price && item.compare_price && (_jsx("span", { style: { fontSize: "0.8rem", textDecoration: "line-through", opacity: 0.5, color: theme.palette.text }, children: item.compare_price }))] })] }), _jsx(AnimatePresence, { children: isHovered && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { type: "spring", stiffness: 280, damping: 28 }, style: { overflow: "hidden", borderTop: `1px solid ${theme.palette.border || "#f0ece8"}` }, children: _jsxs("div", { style: { padding: "var(--lx-productcard-info-padding-top, var(--lx-space-3)) var(--lx-productcard-info-padding-x, var(--lx-space-md))" }, children: [flags.show_rating && item.rating != null && (_jsx(motion.div, { initial: { x: -8, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { delay: 0.04 }, style: { marginBottom: "var(--lx-productcard-rating-gap, var(--lx-space-sm))" }, children: _jsx(StarRow, { rating: item.rating }) })), flags.show_color_swatches && item.colors?.length && (_jsx(motion.div, { initial: { x: -8, opacity: 0 }, animate: { x: 0, opacity: 1 }, transition: { delay: 0.08 }, style: { marginBottom: "10px" }, children: _jsx(ColorSwatches, { colors: item.colors }) })), _jsx(motion.button, { initial: { y: 6, opacity: 0 }, animate: { y: 0, opacity: 1 }, transition: { delay: 0.12, type: "spring", stiffness: 300, damping: 22 }, whileTap: { scale: 0.97 }, type: "button", "data-lx-atc": "", "data-variant-gid": item.handle || "", "data-qty": "1", style: {
+                                        width: "100%",
+                                        padding: "10px",
+                                        fontSize: "0.85rem",
+                                        fontWeight: 700,
+                                        color: "#fff",
+                                        backgroundColor: theme.palette.accent,
+                                        border: "none",
+                                        borderRadius: "var(--lx-button-radius, 8px)",
+                                        cursor: "pointer",
+                                        fontFamily: theme.fonts.body,
+                                    }, children: "Add to Cart" })] }) }, "morph-drawer")) })] }));
+    }
+    // ── STANDARD (default) ────────────────────────────────────────────────
+    return (_jsxs("div", { style: {
+            ...outerStyle,
+            backgroundColor: theme.palette.surface,
+            borderRadius: "var(--lx-card-radius, 12px)",
+            overflow: "hidden",
+            boxShadow: shadowCss,
+            transition: "transform 0.25s ease, box-shadow 0.25s ease",
+            transform: isHovered ? "translateY(-2px)" : "translateY(0)",
+            cursor: "pointer",
+        }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsxs("div", { style: { position: "relative", aspectRatio: aspectRatioCss, overflow: "hidden" }, children: [primarySrc ? (_jsx("img", { src: primarySrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                            transition: "opacity 0.35s ease, transform 0.4s ease",
+                            opacity: hasHoverImage && isHovered ? 0 : 1,
+                            transform: isHovered && !hasHoverImage ? "scale(1.06)" : "scale(1)", } })) : (_jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "2.5rem", backgroundColor: `${theme.palette.accent}18` }, children: "\uD83D\uDECD" })), hasHoverImage && (_jsx("img", { src: cycledSrc, alt: item.name, loading: "lazy", style: { position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: imageFit,
+                            opacity: isHovered ? 1 : 0, transition: "opacity 0.35s ease" } })), _jsx(BadgeOverlay, { badge: item.badge, compare_price: item.compare_price, badgeStyle: badgeStyle, theme: theme }), _jsx(HoverRevealOverlay, { reveal: reveal, item: item, theme: theme, isHovered: isHovered, showRating: flags.show_rating, showSwatches: flags.show_color_swatches })] }), _jsxs("div", { style: { padding: "14px 16px" }, children: [_jsx("h3", { style: { fontFamily: theme.fonts.body, color: theme.palette.text, fontSize: "0.9rem", fontWeight: 600, margin: "0 0 6px", lineHeight: 1.3 }, children: item.name }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }, children: [_jsx("span", { style: { fontWeight: 700, fontSize: "1rem", color: theme.palette.accent }, children: item.price }), flags.show_compare_price && item.compare_price && (_jsx("span", { style: { fontSize: "0.8rem", textDecoration: "line-through", opacity: 0.5, color: theme.palette.text }, children: item.compare_price }))] }), flags.show_rating && item.rating != null && _jsx("div", { style: { marginTop: "var(--lx-productcard-rating-gap, var(--lx-space-xs))" }, children: _jsx(StarRow, { rating: item.rating }) }), flags.show_color_swatches && item.colors?.length ? _jsx("div", { style: { marginTop: "6px" }, children: _jsx(ColorSwatches, { colors: item.colors }) }) : null] })] }));
+}
+export default ProductCard;
+//# sourceMappingURL=ProductCard.js.map