@revova/hydrogen 1.0.2 → 1.1.0

package/dist/index.js

@@ -60,44 +60,40 @@ function useReviews({
 }
 
 // src/components/StarRating.tsx
+import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function StarRating({ rating, max = 5, size = 16, color = "#f59e0b", className }) {
-  const stars = Array.from({ length: max }, (_, i) => {
-    const fill = Math.min(1, Math.max(0, rating - i));
-    return { index: i, fill };
-  });
+function StarRating({
+  rating,
+  max = 5,
+  size = 16,
+  color = "#f59e0b",
+  emptyColor = "#e5e7eb",
+  className
+}) {
+  const uid = React.useId().replace(/:/g, "");
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className,
-      style: { display: "inline-flex", gap: 2 },
-      "aria-label": `${rating} out of ${max} stars`,
+      className: `rv-stars${className ? ` ${className}` : ""}`,
+      "aria-label": `${Number(rating).toFixed(1)} out of ${max} stars`,
       role: "img",
-      children: stars.map(({ index, fill }) => /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: size,
-          height: size,
-          viewBox: "0 0 24 24",
-          "aria-hidden": "true",
-          children: [
-            /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `star-fill-${index}`, x1: "0", x2: "1", y1: "0", y2: "0", children: [
-              /* @__PURE__ */ jsx("stop", { offset: `${fill * 100}%`, stopColor: color }),
-              /* @__PURE__ */ jsx("stop", { offset: `${fill * 100}%`, stopColor: "#e5e7eb" })
-            ] }) }),
-            /* @__PURE__ */ jsx(
-              "path",
-              {
-                d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
-                fill: `url(#star-fill-${index})`,
-                stroke: color,
-                strokeWidth: "1"
-              }
-            )
-          ]
-        },
-        index
-      ))
+      children: Array.from({ length: max }, (_, i) => {
+        const fill = Math.min(1, Math.max(0, rating - i));
+        const gradId = `rk-sg-${uid}-${i}`;
+        return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradId, x1: "0", x2: "1", y1: "0", y2: "0", children: [
+            /* @__PURE__ */ jsx("stop", { offset: `${(fill * 100).toFixed(2)}%`, stopColor: color }),
+            /* @__PURE__ */ jsx("stop", { offset: `${(fill * 100).toFixed(2)}%`, stopColor: emptyColor })
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+              fill: `url(#${gradId})`
+            }
+          )
+        ] }, i);
+      })
     }
   );
 }
@@ -142,45 +138,34 @@ function cfg(field) {
 function AttributeRatingField({ field, value, onChange }) {
   const { max = 5 } = cfg(field);
   const current = Number(value ?? 0);
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2("label", { children: field.label }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
-      Array.from({ length: max }, (_, i) => i + 1).map((val) => /* @__PURE__ */ jsx2(
-        "button",
+  const STAR_HINTS = ["", "Terrible", "Bad", "Okay", "Good", "Excellent"];
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+      Array.from({ length: max }, (_, i) => i + 1).map((val) => /* @__PURE__ */ jsx2("button", { type: "button", className: "rv-star-btn", onClick: () => onChange(val), "aria-label": `${val} out of ${max}`, children: /* @__PURE__ */ jsx2("svg", { width: "26", height: "26", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
+        "path",
         {
-          type: "button",
-          onClick: () => onChange(val),
-          "aria-label": `${val} out of ${max}`,
-          style: { background: "none", border: "none", cursor: "pointer", padding: 2 },
-          children: /* @__PURE__ */ jsx2(StarRating, { rating: val <= current ? 1 : 0, size: 22 })
-        },
-        val
-      )),
-      current > 0 && /* @__PURE__ */ jsxs2("span", { style: { fontSize: 12, color: "#6b7280", marginLeft: 4 }, children: [
-        current,
-        "/",
-        max
-      ] })
+          d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+          fill: val <= current ? "#f59e0b" : "#e5e7eb"
+        }
+      ) }) }, val)),
+      current > 0 && /* @__PURE__ */ jsx2("span", { className: "rv-star-input__hint", children: STAR_HINTS[current] ?? "" })
     ] })
   ] });
 }
 function SingleSelectField({ field, value, onChange }) {
   const { options = [] } = cfg(field);
-  const id = `revova-${field.id}`;
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2("label", { htmlFor: id, children: field.label }),
-    /* @__PURE__ */ jsx2("div", { role: "radiogroup", "aria-labelledby": id, style: { display: "flex", flexDirection: "column", gap: 6 }, children: options.map((opt) => /* @__PURE__ */ jsxs2("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: 14 }, children: [
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          type: "radio",
-          name: id,
-          value: opt,
-          checked: value === opt,
-          onChange: () => onChange(opt),
-          required: field.required && !value
-        }
-      ),
+  const id = `rv-f-${field.id}`;
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", id, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "rv-options", role: "radiogroup", "aria-labelledby": id, children: options.map((opt) => /* @__PURE__ */ jsxs2("label", { className: `rv-option-pill${value === opt ? " rv-option-pill--checked" : ""}`, children: [
+      /* @__PURE__ */ jsx2("input", { type: "radio", name: id, value: opt, checked: value === opt, onChange: () => onChange(opt) }),
       opt
     ] }, opt)) })
   ] });
@@ -189,34 +174,24 @@ function MultiSelectField({ field, value, onChange }) {
   const { options = [], maxSelections } = cfg(field);
   const selected = Array.isArray(value) ? value : [];
   function toggle(opt) {
-    if (selected.includes(opt)) {
-      onChange(selected.filter((v) => v !== opt));
-    } else if (!maxSelections || selected.length < maxSelections) {
-      onChange([...selected, opt]);
-    }
+    if (selected.includes(opt)) onChange(selected.filter((v) => v !== opt));
+    else if (!maxSelections || selected.length < maxSelections) onChange([...selected, opt]);
   }
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsxs2("label", { children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", children: [
       field.label,
-      maxSelections && /* @__PURE__ */ jsxs2("span", { style: { fontSize: 12, color: "#6b7280", marginLeft: 6 }, children: [
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" }),
+      maxSelections && /* @__PURE__ */ jsxs2("span", { className: "rv-label__hint", children: [
         "(pick up to ",
         maxSelections,
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: options.map((opt) => {
+    /* @__PURE__ */ jsx2("div", { className: "rv-options", children: options.map((opt) => {
       const checked = selected.includes(opt);
       const disabled = !checked && !!maxSelections && selected.length >= maxSelections;
-      return /* @__PURE__ */ jsxs2("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: disabled ? "not-allowed" : "pointer", fontSize: 14, opacity: disabled ? 0.5 : 1 }, children: [
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            type: "checkbox",
-            checked,
-            disabled,
-            onChange: () => toggle(opt)
-          }
-        ),
+      return /* @__PURE__ */ jsxs2("label", { className: `rv-option-pill${checked ? " rv-option-pill--checked" : ""}${disabled ? " rv-option-pill--disabled" : ""}`, children: [
+        /* @__PURE__ */ jsx2("input", { type: "checkbox", checked, disabled, onChange: () => toggle(opt) }),
         opt
       ] }, opt);
     }) })
@@ -226,49 +201,43 @@ function ScaleField({ field, value, onChange }) {
   const { min = 1, max = 10, minLabel, maxLabel } = cfg(field);
   const current = value;
   const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i);
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2("label", { children: field.label }),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 4, flexWrap: "wrap" }, children: steps.map((val) => /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => onChange(val),
-          "aria-label": String(val),
-          "aria-pressed": current === val,
-          style: {
-            width: 36,
-            height: 36,
-            border: "1px solid",
-            borderColor: current === val ? "#111827" : "#d1d5db",
-            borderRadius: 6,
-            background: current === val ? "#111827" : "#fff",
-            color: current === val ? "#fff" : "#374151",
-            cursor: "pointer",
-            fontSize: 13,
-            fontWeight: current === val ? 600 : 400
-          },
-          children: val
-        },
-        val
-      )) }),
-      (minLabel || maxLabel) && /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", fontSize: 11, color: "#6b7280" }, children: [
-        /* @__PURE__ */ jsx2("span", { children: minLabel }),
-        /* @__PURE__ */ jsx2("span", { children: maxLabel })
-      ] })
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "rv-scale", children: steps.map((val) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": current === val,
+        "aria-label": String(val),
+        className: `rv-scale__btn${current === val ? " rv-scale__btn--active" : ""}`,
+        onClick: () => onChange(val),
+        children: val
+      },
+      val
+    )) }),
+    (minLabel || maxLabel) && /* @__PURE__ */ jsxs2("div", { className: "rv-scale__labels", children: [
+      /* @__PURE__ */ jsx2("span", { children: minLabel }),
+      /* @__PURE__ */ jsx2("span", { children: maxLabel })
     ] })
   ] });
 }
 function TextShortField({ field, value, onChange }) {
   const { placeholder } = cfg(field);
-  const id = `revova-${field.id}`;
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2("label", { htmlFor: id, children: field.label }),
+  const id = `rv-f-${field.id}`;
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", htmlFor: id, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
+    ] }),
     /* @__PURE__ */ jsx2(
       "input",
       {
         id,
         type: "text",
+        className: "rv-input",
         placeholder,
         required: field.required,
         value: String(value ?? ""),
@@ -279,13 +248,17 @@ function TextShortField({ field, value, onChange }) {
 }
 function TextLongField({ field, value, onChange }) {
   const { placeholder, minLength } = cfg(field);
-  const id = `revova-${field.id}`;
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx2("label", { htmlFor: id, children: field.label }),
+  const id = `rv-f-${field.id}`;
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", htmlFor: id, children: [
+      field.label,
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
+    ] }),
     /* @__PURE__ */ jsx2(
       "textarea",
       {
         id,
+        className: "rv-textarea",
         rows: 4,
         placeholder,
         required: field.required,
@@ -297,74 +270,52 @@ function TextLongField({ field, value, onChange }) {
   ] });
 }
 function BooleanField({ field, value, onChange }) {
-  const id = `revova-${field.id}`;
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+  const on = value === true;
+  const id = `rv-f-${field.id}`;
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-toggle-row", children: [
     /* @__PURE__ */ jsx2(
       "button",
       {
         id,
         type: "button",
         role: "switch",
-        "aria-checked": value === true,
-        onClick: () => onChange(value === true ? false : true),
-        style: {
-          width: 44,
-          height: 24,
-          borderRadius: 999,
-          border: "none",
-          background: value === true ? "#111827" : "#d1d5db",
-          cursor: "pointer",
-          position: "relative",
-          transition: "background 0.2s",
-          flexShrink: 0
-        },
-        children: /* @__PURE__ */ jsx2(
-          "span",
-          {
-            style: {
-              position: "absolute",
-              top: 3,
-              left: value === true ? 23 : 3,
-              width: 18,
-              height: 18,
-              borderRadius: "50%",
-              background: "#fff",
-              transition: "left 0.2s"
-            }
-          }
-        )
+        "aria-checked": on,
+        className: `rv-toggle${on ? " rv-toggle--on" : ""}`,
+        onClick: () => onChange(!on),
+        children: /* @__PURE__ */ jsx2("span", { className: "rv-toggle__knob" })
       }
     ),
-    /* @__PURE__ */ jsx2("label", { htmlFor: id, style: { cursor: "pointer", fontSize: 14 }, children: field.label })
+    /* @__PURE__ */ jsx2("label", { htmlFor: id, className: "rv-toggle__label", children: field.label })
   ] });
 }
 function MediaUploadField({ field, value, onChange }) {
   const { maxFiles = 1, maxSizeMb = 2, allowVideo = false } = cfg(field);
   const files = Array.isArray(value) ? value : [];
-  const id = `revova-${field.id}`;
+  const id = `rv-f-${field.id}`;
   const accept = allowVideo ? "image/*,video/*" : "image/*";
   function handleChange(e) {
-    const selected = Array.from(e.target.files ?? []).slice(0, maxFiles);
-    const tooBig = selected.filter((f) => f.size > maxSizeMb * 1024 * 1024);
-    if (tooBig.length > 0) {
+    const sel = Array.from(e.target.files ?? []).slice(0, maxFiles);
+    if (sel.some((f) => f.size > maxSizeMb * 1024 * 1024)) {
       alert(`Each file must be under ${maxSizeMb}MB.`);
       return;
     }
-    onChange(selected);
+    onChange(sel);
+  }
+  function removeFile(i) {
+    onChange(files.filter((_, idx) => idx !== i));
   }
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsxs2("label", { htmlFor: id, children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+    /* @__PURE__ */ jsxs2("label", { className: "rv-label", htmlFor: id, children: [
       field.label,
-      /* @__PURE__ */ jsxs2("span", { style: { fontSize: 12, color: "#6b7280", marginLeft: 6 }, children: [
-        "(max ",
+      field.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" }),
+      /* @__PURE__ */ jsxs2("span", { className: "rv-label__hint", children: [
+        "(",
         maxFiles,
         " file",
         maxFiles > 1 ? "s" : "",
-        ", ",
+        " max, ",
         maxSizeMb,
-        "MB each",
-        allowVideo ? ", photos & videos" : ", photos only",
-        ")"
+        "MB)"
       ] })
     ] }),
     /* @__PURE__ */ jsx2(
@@ -374,11 +325,18 @@ function MediaUploadField({ field, value, onChange }) {
         type: "file",
         accept,
         multiple: maxFiles > 1,
-        required: field.required,
+        required: field.required && files.length === 0,
+        style: { display: "none" },
         onChange: handleChange
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsx2("ul", { style: { listStyle: "none", padding: 0, margin: "6px 0 0", display: "flex", gap: 6, flexWrap: "wrap" }, children: files.map((file, i) => /* @__PURE__ */ jsx2("li", { style: { fontSize: 12, color: "#374151" }, children: file.name }, i)) })
+    /* @__PURE__ */ jsxs2("div", { className: "rv-photo-strip", children: [
+      files.map((file, i) => /* @__PURE__ */ jsxs2("div", { className: "rv-photo-cell rv-photo-cell--filled", children: [
+        file.type.startsWith("image/") ? /* @__PURE__ */ jsx2("img", { src: URL.createObjectURL(file), alt: "" }) : /* @__PURE__ */ jsx2("span", { style: { fontSize: 28 }, children: "\u{1F3A5}" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", className: "rv-photo-remove", onClick: () => removeFile(i), "aria-label": "Remove", children: "\u2715" })
+      ] }, i)),
+      files.length < maxFiles && /* @__PURE__ */ jsx2("button", { type: "button", className: "rv-photo-cell", onClick: () => document.getElementById(id)?.click(), "aria-label": "Add photo", children: /* @__PURE__ */ jsx2("span", { className: "rv-photo-add-icon", children: "+" }) })
+    ] })
   ] });
 }
 function FieldRenderer(props) {
@@ -399,18 +357,9 @@ function FieldRenderer(props) {
       return /* @__PURE__ */ jsx2(BooleanField, { ...props });
     case "MEDIA_UPLOAD":
       return /* @__PURE__ */ jsx2(MediaUploadField, { ...props });
-    // VERIFIED_ONLY is a wrapper — render its inner fields inline
     case "VERIFIED_ONLY": {
       const inner = cfg(props.field).fields ?? [];
-      return /* @__PURE__ */ jsx2(Fragment, { children: inner.map((f) => /* @__PURE__ */ jsx2(
-        FieldRenderer,
-        {
-          field: f,
-          value: props.value,
-          onChange: props.onChange
-        },
-        f.id
-      )) });
+      return /* @__PURE__ */ jsx2(Fragment, { children: inner.map((f) => /* @__PURE__ */ jsx2(FieldRenderer, { field: f, value: props.value, onChange: props.onChange }, f.id)) });
     }
     default:
       return null;
@@ -420,88 +369,116 @@ function ReviewForm({ apiUrl, shop, apiToken, productId, form, onSuccess, classN
   const { submit, submitting, success, error, result } = useSubmitReview({ apiUrl, shop, apiToken });
   const [answers, setAnswers] = useState3({});
   const [email, setEmail] = useState3("");
+  const [isAnon, setIsAnon] = useState3(false);
   const starField = form.fields.find((f) => f.type === "STAR_RATING");
   const titleField = form.fields.find((f) => f.type === "TITLE");
   const descField = form.fields.find((f) => f.type === "DESCRIPTION");
   const customFields = form.fields.filter(
     (f) => !["STAR_RATING", "TITLE", "DESCRIPTION"].includes(f.type)
   );
+  const starRating = Number(answers[starField?.id ?? ""] ?? 0);
+  const STAR_HINTS = ["", "Terrible", "Bad", "Okay", "Good", "Excellent"];
   function setAnswer(fieldId, value) {
     setAnswers((prev) => ({ ...prev, [fieldId]: value }));
   }
   async function handleSubmit(e) {
     e.preventDefault();
     const fieldAnswers = Object.entries(answers).map(([fieldId, value]) => ({ fieldId, value }));
-    await submit({ productId, email, formId: form.id, fieldAnswers });
+    await submit({ productId, email, formId: form.id, fieldAnswers, isAnonymous: isAnon });
     onSuccess?.();
   }
   if (success && result) {
-    return /* @__PURE__ */ jsx2("div", { className, children: /* @__PURE__ */ jsx2("p", { children: result.requiresEmailVerification ? result.message ?? "Check your email to verify your review." : "Thanks for your review!" }) });
+    return /* @__PURE__ */ jsxs2("div", { className: `rv-success${className ? ` ${className}` : ""}`, children: [
+      /* @__PURE__ */ jsx2("div", { className: "rv-success__icon", children: "\u{1F389}" }),
+      /* @__PURE__ */ jsx2("div", { className: "rv-success__title", children: result.requiresEmailVerification ? "Check your email" : "Thank you!" }),
+      /* @__PURE__ */ jsx2("p", { className: "rv-success__sub", children: result.requiresEmailVerification ? result.message ?? "Check your email to verify and publish your review." : "Your review has been submitted." })
+    ] });
   }
-  return /* @__PURE__ */ jsxs2("form", { className, onSubmit: handleSubmit, style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
-    starField && /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsxs2("label", { children: [
-        "Rating ",
-        starField.required && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: "*" })
+  return /* @__PURE__ */ jsxs2("form", { className: `rv-form${className ? ` ${className}` : ""}`, onSubmit: handleSubmit, noValidate: true, children: [
+    starField && /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "rv-label", children: [
+        "Your Rating ",
+        /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
       ] }),
-      /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 4 }, children: [1, 2, 3, 4, 5].map((val) => /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          onClick: () => setAnswer(starField.id, val),
-          "aria-label": `${val} star`,
-          style: { background: "none", border: "none", cursor: "pointer", padding: 2 },
-          children: /* @__PURE__ */ jsx2(
-            StarRating,
-            {
-              rating: val <= Number(answers[starField.id] ?? 0) ? 1 : 0,
-              size: 28
-            }
-          )
-        },
-        val
-      )) })
+      /* @__PURE__ */ jsxs2("div", { className: "rv-star-input", children: [
+        [1, 2, 3, 4, 5].map((val) => /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: "rv-star-btn",
+            onClick: () => setAnswer(starField.id, val),
+            "aria-label": `${val} star${val > 1 ? "s" : ""}`,
+            children: /* @__PURE__ */ jsx2("svg", { width: "32", height: "32", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
+              "path",
+              {
+                d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
+                fill: val <= starRating ? "#f59e0b" : "#e5e7eb",
+                stroke: val <= starRating ? "#f59e0b" : "#e5e7eb",
+                strokeWidth: "0.5"
+              }
+            ) })
+          },
+          val
+        )),
+        starRating > 0 && /* @__PURE__ */ jsx2("span", { className: "rv-star-input__hint", children: STAR_HINTS[starRating] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2("label", { htmlFor: "revova-email", children: "Email *" }),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          id: "revova-email",
-          type: "email",
-          required: true,
-          value: email,
-          onChange: (e) => setEmail(e.target.value)
-        }
-      )
+    /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "rv-label", htmlFor: "rv-form-email", children: [
+        "Email ",
+        /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "rv-input-wrap", children: [
+        /* @__PURE__ */ jsxs2("svg", { className: "rv-input-wrap__icon", width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx2("rect", { x: "2", y: "4", width: "16", height: "12", rx: "2" }),
+          /* @__PURE__ */ jsx2("path", { d: "M2 7l8 5 8-5" })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "input",
+          {
+            id: "rv-form-email",
+            type: "email",
+            className: "rv-input rv-input--icon",
+            required: true,
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "your@email.com",
+            autoComplete: "email"
+          }
+        )
+      ] })
     ] }),
-    titleField && /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsxs2("label", { htmlFor: `revova-${titleField.id}`, children: [
+    titleField && /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "rv-label", htmlFor: `rv-f-${titleField.id}`, children: [
         titleField.label ?? "Title",
-        titleField.required && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: " *" })
+        titleField.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
       ] }),
       /* @__PURE__ */ jsx2(
         "input",
         {
-          id: `revova-${titleField.id}`,
+          id: `rv-f-${titleField.id}`,
           type: "text",
+          className: "rv-input",
           required: titleField.required,
+          placeholder: "Sum up your experience",
           value: String(answers[titleField.id] ?? ""),
           onChange: (e) => setAnswer(titleField.id, e.target.value)
         }
       )
     ] }),
-    descField && /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsxs2("label", { htmlFor: `revova-${descField.id}`, children: [
-        descField.label ?? "Review",
-        descField.required && /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: " *" })
+    descField && /* @__PURE__ */ jsxs2("div", { className: "rv-field", children: [
+      /* @__PURE__ */ jsxs2("label", { className: "rv-label", htmlFor: `rv-f-${descField.id}`, children: [
+        descField.label ?? "Your Review",
+        descField.required && /* @__PURE__ */ jsx2("span", { className: "rv-label__required", children: "*" })
       ] }),
       /* @__PURE__ */ jsx2(
         "textarea",
         {
-          id: `revova-${descField.id}`,
-          required: descField.required,
+          id: `rv-f-${descField.id}`,
+          className: "rv-textarea",
           rows: 4,
+          required: descField.required,
+          placeholder: "Tell others about your experience\u2026",
           value: String(answers[descField.id] ?? ""),
           onChange: (e) => setAnswer(descField.id, e.target.value)
         }
@@ -512,22 +489,286 @@ function ReviewForm({ apiUrl, shop, apiToken, productId, form, onSuccess, classN
       {
         field,
         value: answers[field.id],
-        onChange: (val) => setAnswer(field.id, val)
+        onChange: (v) => setAnswer(field.id, v)
       },
       field.id
     )),
-    error && /* @__PURE__ */ jsx2("p", { style: { color: "red", margin: 0 }, children: error }),
-    /* @__PURE__ */ jsx2("button", { type: "submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit Review" })
+    /* @__PURE__ */ jsxs2("label", { className: "rv-anon", children: [
+      /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: isAnon, onChange: (e) => setIsAnon(e.target.checked) }),
+      "Post anonymously"
+    ] }),
+    error && /* @__PURE__ */ jsx2("p", { className: "rv-error", children: error }),
+    /* @__PURE__ */ jsx2("button", { type: "submit", className: "rv-btn--submit", disabled: submitting, children: submitting ? "Submitting\u2026" : "Submit Review" })
   ] });
 }
 
+// src/rkStyles.ts
+var AVATAR_PALETTE = [
+  "#6366f1",
+  "#f97316",
+  "#10b981",
+  "#3b82f6",
+  "#a855f7",
+  "#ef4444",
+  "#f59e0b",
+  "#ec4899"
+];
+function avatarColor(initial) {
+  return AVATAR_PALETTE[initial.toUpperCase().charCodeAt(0) % AVATAR_PALETTE.length] ?? "#6366f1";
+}
+function formatDate(iso) {
+  return new Date(iso).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+var CheckSvg = () => (
+  // biome-ignore lint: inline SVG
+  ` <svg width="12" height="12" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M2 7l3 3 7-6" />
+  </svg>`
+);
+var ThumbSvg = () => (
+  // biome-ignore lint: inline SVG
+  ` <svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <path d="M7 11V5a2 2 0 014 0v3h4a1 1 0 011 1l-1.5 6A1 1 0 0113.5 16H5a2 2 0 01-2-2v-3a2 2 0 012-2h2z" />
+  </svg>`
+);
+
 // src/components/ReviewWidget.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function RatingSummary({
+  reviews,
+  total,
+  productId
+}) {
+  if (total === 0) return null;
+  const avg = reviews.length > 0 ? reviews.reduce((s, r2) => s + r2.rating, 0) / reviews.length : 0;
+  const dist = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
+  reviews.forEach((r2) => {
+    const k = Math.round(r2.rating);
+    if (k >= 1 && k <= 5) dist[k] = (dist[k] ?? 0) + 1;
+  });
+  const r = 48, circ = 2 * Math.PI * r;
+  const totalArc = circ * 0.75;
+  const valueDash = (totalArc * Math.min(avg / 5, 1)).toFixed(2);
+  const gradId = `rv-arc-${productId.replace(/\W/g, "")}`;
+  return /* @__PURE__ */ jsxs3("div", { className: "rv-summary", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "rv-summary__gauge", children: [
+      /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 120 120", width: "120", height: "120", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: gradId, x1: "0%", y1: "100%", x2: "100%", y2: "0%", children: [
+          /* @__PURE__ */ jsx3("stop", { offset: "0%", stopColor: "#ef4444" }),
+          /* @__PURE__ */ jsx3("stop", { offset: "45%", stopColor: "#f97316" }),
+          /* @__PURE__ */ jsx3("stop", { offset: "100%", stopColor: "#f59e0b" })
+        ] }) }),
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: "60",
+            cy: "60",
+            r,
+            fill: "none",
+            stroke: "#e5e7eb",
+            strokeWidth: "9",
+            strokeDasharray: `${totalArc.toFixed(2)} ${(circ - totalArc).toFixed(2)}`,
+            strokeLinecap: "round",
+            transform: "rotate(135 60 60)"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "circle",
+          {
+            cx: "60",
+            cy: "60",
+            r,
+            fill: "none",
+            stroke: `url(#${gradId})`,
+            strokeWidth: "9",
+            strokeDasharray: `${valueDash} ${(circ - Number(valueDash)).toFixed(2)}`,
+            strokeLinecap: "round",
+            transform: "rotate(135 60 60)"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "rv-summary__gauge-inner", children: [
+        /* @__PURE__ */ jsx3("span", { className: "rv-summary__score", children: avg.toFixed(1) }),
+        /* @__PURE__ */ jsx3("span", { className: "rv-summary__out-of", children: "Out of 5" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "rv-summary__info", children: [
+      /* @__PURE__ */ jsx3(StarRating, { rating: avg, size: 20 }),
+      /* @__PURE__ */ jsxs3("p", { className: "rv-summary__count", children: [
+        total,
+        " review",
+        total !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs3("span", { className: "rv-summary__verified", children: [
+        /* @__PURE__ */ jsx3(CheckSvg, {}),
+        " Based on verified reviews"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "rv-summary__divider", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx3("div", { className: "rv-dist", children: [5, 4, 3, 2, 1].map((star) => {
+      const count = dist[star] ?? 0;
+      const pct = reviews.length > 0 ? Math.round(count / reviews.length * 100) : 0;
+      return /* @__PURE__ */ jsxs3("div", { className: "rv-dist__row", children: [
+        /* @__PURE__ */ jsx3("span", { children: star }),
+        /* @__PURE__ */ jsx3("div", { className: "rv-dist__bar-wrap", children: /* @__PURE__ */ jsx3("div", { className: "rv-dist__bar", style: { width: `${pct}%` } }) }),
+        /* @__PURE__ */ jsx3("span", { className: "rv-dist__count", children: count })
+      ] }, star);
+    }) })
+  ] });
+}
+var VOTED_KEY = "rv_helpful_votes";
+function getVotedIds() {
+  try {
+    return new Set(JSON.parse(localStorage.getItem(VOTED_KEY) ?? "[]"));
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function saveVotedId(id) {
+  try {
+    const s = getVotedIds();
+    s.add(id);
+    localStorage.setItem(VOTED_KEY, JSON.stringify([...s]));
+  } catch {
+  }
+}
+function ReviewCard({
+  review,
+  starColor,
+  onVote
+}) {
+  const name = review.isAnonymous ? "Anonymous" : review.email?.split("@")[0] ?? "Customer";
+  const initial = name[0]?.toUpperCase() ?? "?";
+  const voted = getVotedIds().has(review.id);
+  const [helpfulCount, setHelpfulCount] = useState4(review.helpfulCount);
+  const [hasVoted, setHasVoted] = useState4(voted);
+  const textAnswers = review.fieldAnswers.filter(
+    (fa) => fa.field.type === "TEXT_LONG" || fa.field.type === "TEXT_SHORT"
+  );
+  const tagAnswers = review.fieldAnswers.filter(
+    (fa) => ![
+      "STAR_RATING",
+      "MEDIA_UPLOAD",
+      "VERIFIED_ONLY",
+      "TEXT_LONG",
+      "TEXT_SHORT"
+    ].includes(fa.field.type)
+  );
+  const displayTitle = review.translatedTitle ?? review.title;
+  const displayBody = review.translatedBody ?? review.body ?? (textAnswers[0] ? String(textAnswers[0].value) : null);
+  async function handleHelpful() {
+    if (hasVoted) return;
+    setHasVoted(true);
+    saveVotedId(review.id);
+    try {
+      await onVote(review.id);
+      setHelpfulCount((c) => c + 1);
+    } catch {
+      setHasVoted(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs3("article", { className: "rv-card", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: "rv-card__avatar",
+        style: { background: avatarColor(initial) },
+        children: initial
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "rv-card__content", children: [
+      /* @__PURE__ */ jsx3("div", { className: "rv-card__top", children: /* @__PURE__ */ jsxs3("div", { className: "rv-card__author-col", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "rv-card__author-row", children: [
+          /* @__PURE__ */ jsx3("span", { className: "rv-card__author", children: name }),
+          /* @__PURE__ */ jsx3("span", { className: "rv-card__dot", children: "\xB7" }),
+          /* @__PURE__ */ jsx3("span", { className: "rv-card__date", children: formatDate(review.createdAt) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "rv-card__badges", children: [
+          review.verifiedBuyer && /* @__PURE__ */ jsxs3("span", { className: "rv-badge--verified", children: [
+            /* @__PURE__ */ jsx3(CheckSvg, {}),
+            " Verified Buyer"
+          ] }),
+          review.isPinned && /* @__PURE__ */ jsx3("span", { className: "rv-badge--pinned", children: "\u{1F4CC} Pinned" })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx3(
+        StarRating,
+        {
+          rating: review.rating,
+          size: 15,
+          ...starColor !== void 0 ? { color: starColor } : {}
+        }
+      ),
+      displayTitle && /* @__PURE__ */ jsx3("p", { className: "rv-card__title", children: displayTitle }),
+      displayBody && /* @__PURE__ */ jsx3("p", { className: "rv-card__body", children: displayBody }),
+      (review.translatedTitle !== void 0 || review.translatedBody !== void 0) && /* @__PURE__ */ jsx3("p", { className: "rv-card__translated", children: "\u{1F310} Translated" }),
+      review.variantTitle && /* @__PURE__ */ jsxs3("p", { className: "rv-card__variant", children: [
+        "Variant: ",
+        review.variantTitle
+      ] }),
+      review.media.length > 0 && /* @__PURE__ */ jsx3("div", { className: "rv-card__media", children: review.media.map(
+        (m, i) => m.mimeType.startsWith("video/") ? /* @__PURE__ */ jsx3(
+          "video",
+          {
+            className: "rv-card__media-vid",
+            src: m.url,
+            controls: true,
+            preload: "metadata"
+          },
+          i
+        ) : /* @__PURE__ */ jsx3(
+          "img",
+          {
+            className: "rv-card__media-img",
+            src: m.url,
+            alt: `Review photo ${i + 1}`,
+            loading: "lazy"
+          },
+          i
+        )
+      ) }),
+      tagAnswers.length > 0 && /* @__PURE__ */ jsx3("div", { className: "rv-card__tags", children: tagAnswers.map((fa) => /* @__PURE__ */ jsx3("span", { className: "rv-tag", children: /* @__PURE__ */ jsxs3("span", { children: [
+        fa.field.label,
+        ": ",
+        String(fa.value)
+      ] }) }, fa.fieldId)) }),
+      review.reply && /* @__PURE__ */ jsxs3("div", { className: "rv-card__reply", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "rv-card__reply-label", children: [
+          "Response from store \xB7 ",
+          formatDate(review.reply.createdAt)
+        ] }),
+        /* @__PURE__ */ jsx3("p", { style: { margin: 0 }, children: review.reply.body })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "rv-card__footer", children: [
+        /* @__PURE__ */ jsx3("div", {}),
+        /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            className: `rv-helpful${hasVoted ? " rv-helpful--voted" : ""}`,
+            onClick: handleHelpful,
+            disabled: hasVoted,
+            "aria-label": "Mark as helpful",
+            children: [
+              /* @__PURE__ */ jsx3(ThumbSvg, {}),
+              helpfulCount > 0 ? `Helpful \xB7 ${helpfulCount}` : "Helpful"
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 function ReviewWidget({
   apiUrl,
   shop,
   apiToken,
   productId,
+  productTitle,
+  productImage,
   locale,
   pageSize = 10,
   showForm = true,
@@ -535,94 +776,218 @@ function ReviewWidget({
   className
 }) {
   const creds = { apiUrl, shop, apiToken };
-  const [showingForm, setShowingForm] = useState4(false);
+  const [showModal, setShowModal] = useState4(false);
   const { data, loading, error, setPage, setSort, currentPage, currentSort } = useReviews({
     ...creds,
     productId,
     limit: pageSize,
     ...locale !== void 0 ? { locale } : {}
   });
-  if (loading) return /* @__PURE__ */ jsx3("div", { className, children: "Loading reviews\u2026" });
-  if (error) return /* @__PURE__ */ jsx3("div", { className, children: "Could not load reviews." });
+  async function handleVote(_id) {
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx3("div", { className: `rv-widget${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs3("div", { className: "rv-loading", children: [
+      /* @__PURE__ */ jsx3("span", { className: "rv-spinner" }),
+      "Loading reviews\u2026"
+    ] }) });
+  }
+  if (error)
+    return /* @__PURE__ */ jsx3("div", { className: `rv-widget${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx3("p", { className: "rv-empty", children: "Could not load reviews." }) });
   if (!data) return null;
   const { reviews, pagination, form } = data;
-  return /* @__PURE__ */ jsxs3("div", { className, children: [
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsxs3("strong", { children: [
-        pagination.total,
-        " review",
-        pagination.total !== 1 ? "s" : ""
-      ] }) }),
-      /* @__PURE__ */ jsxs3(
-        "select",
+  const FilterSvg = () => /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx3("path", { d: "M3 5h14M6 10h8M9 15h2" })
+    }
+  );
+  const ChevronSvg = () => /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx3("path", { d: "M5 8l5 5 5-5" })
+    }
+  );
+  const PencilSvg = () => /* @__PURE__ */ jsx3(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx3("path", { d: "M13.5 2.5a2.121 2.121 0 013 3L7 15l-4 1 1-4 12.5-12.5z" })
+    }
+  );
+  return /* @__PURE__ */ jsxs3("div", { className: `rv-widget${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx3(
+      RatingSummary,
+      {
+        reviews,
+        total: pagination.total,
+        productId
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "rv-toolbar", children: [
+      /* @__PURE__ */ jsxs3("label", { className: "rv-sort-wrap", htmlFor: `rv-sort-${productId}`, children: [
+        /* @__PURE__ */ jsx3(FilterSvg, {}),
+        /* @__PURE__ */ jsxs3(
+          "select",
+          {
+            id: `rv-sort-${productId}`,
+            value: currentSort,
+            onChange: (e) => setSort(e.target.value),
+            "aria-label": "Sort reviews",
+            children: [
+              /* @__PURE__ */ jsx3("option", { value: "recent", children: "Most Recent" }),
+              /* @__PURE__ */ jsx3("option", { value: "helpful", children: "Most Helpful" }),
+              /* @__PURE__ */ jsx3("option", { value: "rating_high", children: "Highest Rating" }),
+              /* @__PURE__ */ jsx3("option", { value: "rating_low", children: "Lowest Rating" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx3(ChevronSvg, {})
+      ] }),
+      showForm && form && /* @__PURE__ */ jsxs3(
+        "button",
         {
-          value: currentSort,
-          onChange: (e) => setSort(e.target.value),
-          "aria-label": "Sort reviews",
+          className: "rv-btn rv-btn--primary",
+          onClick: () => setShowModal(true),
           children: [
-            /* @__PURE__ */ jsx3("option", { value: "recent", children: "Most Recent" }),
-            /* @__PURE__ */ jsx3("option", { value: "helpful", children: "Most Helpful" }),
-            /* @__PURE__ */ jsx3("option", { value: "rating_high", children: "Highest Rated" }),
-            /* @__PURE__ */ jsx3("option", { value: "rating_low", children: "Lowest Rated" })
+            /* @__PURE__ */ jsx3(PencilSvg, {}),
+            " Write a Review"
           ]
         }
       )
     ] }),
-    showForm && form && !showingForm && /* @__PURE__ */ jsx3("button", { onClick: () => setShowingForm(true), style: { marginBottom: 16 }, children: "Write a Review" }),
-    showingForm && form && /* @__PURE__ */ jsx3("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx3(
-      ReviewForm,
+    reviews.length === 0 ? /* @__PURE__ */ jsx3("p", { className: "rv-empty", children: "No reviews yet. Be the first!" }) : /* @__PURE__ */ jsx3(
+      "ul",
       {
-        ...creds,
-        productId,
-        form,
-        onSuccess: () => setShowingForm(false)
-      }
-    ) }),
-    reviews.length === 0 ? /* @__PURE__ */ jsx3("p", { children: "No reviews yet. Be the first!" }) : /* @__PURE__ */ jsx3("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: reviews.map((review) => /* @__PURE__ */ jsxs3("li", { style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 16, marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsx3(StarRating, { rating: review.rating, ...starColor !== void 0 ? { color: starColor } : {} }),
-      review.isPinned && /* @__PURE__ */ jsx3("span", { children: "Pinned" }),
-      review.verifiedBuyer && /* @__PURE__ */ jsx3("span", { children: "Verified Buyer" }),
-      review.title && /* @__PURE__ */ jsx3("strong", { style: { display: "block", marginTop: 4 }, children: review.translatedTitle ?? review.title }),
-      review.body && /* @__PURE__ */ jsx3("p", { style: { margin: "4px 0" }, children: review.translatedBody ?? review.body }),
-      /* @__PURE__ */ jsxs3("small", { children: [
-        review.isAnonymous ? "Anonymous" : review.email,
-        " \xB7",
-        " ",
-        new Date(review.createdAt).toLocaleDateString(),
-        review.variantTitle ? ` \xB7 ${review.variantTitle}` : ""
-      ] }),
-      review.media.length > 0 && /* @__PURE__ */ jsx3("div", { style: { display: "flex", gap: 8, marginTop: 8 }, children: review.media.map(
-        (m, i) => m.mimeType.startsWith("image") ? /* @__PURE__ */ jsx3(
-          "img",
+        className: "rv-list",
+        style: { listStyle: "none", padding: 0, margin: 0 },
+        children: reviews.map((review) => /* @__PURE__ */ jsx3("li", { children: /* @__PURE__ */ jsx3(
+          ReviewCard,
           {
-            src: m.url,
-            alt: `Review image ${i + 1}`,
-            width: 80,
-            height: 80,
-            style: { objectFit: "cover", borderRadius: 4 }
-          },
-          i
-        ) : null
-      ) }),
-      review.reply && /* @__PURE__ */ jsxs3("div", { style: { marginTop: 8, paddingLeft: 12, borderLeft: "2px solid #e5e7eb" }, children: [
-        /* @__PURE__ */ jsxs3("small", { children: [
-          /* @__PURE__ */ jsx3("strong", { children: "Store Reply" }),
-          " \xB7 ",
-          new Date(review.reply.createdAt).toLocaleDateString()
-        ] }),
-        /* @__PURE__ */ jsx3("p", { style: { margin: "2px 0" }, children: review.reply.body })
-      ] })
-    ] }, review.id)) }),
-    pagination.totalPages > 1 && /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx3("button", { onClick: () => setPage(currentPage - 1), disabled: currentPage <= 1, children: "Previous" }),
-      /* @__PURE__ */ jsxs3("span", { children: [
+            review,
+            ...starColor !== void 0 && { starColor },
+            onVote: handleVote
+          }
+        ) }, review.id))
+      }
+    ),
+    pagination.totalPages > 1 && /* @__PURE__ */ jsxs3("div", { className: "rv-pagination", children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          className: "rv-btn rv-btn--outline rv-btn--sm",
+          onClick: () => setPage(currentPage - 1),
+          disabled: currentPage <= 1,
+          children: "\u2190 Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxs3("span", { className: "rv-pagination__info", children: [
         "Page ",
         currentPage,
         " of ",
         pagination.totalPages
       ] }),
-      /* @__PURE__ */ jsx3("button", { onClick: () => setPage(currentPage + 1), disabled: currentPage >= pagination.totalPages, children: "Next" })
-    ] })
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          className: "rv-btn rv-btn--outline rv-btn--sm",
+          onClick: () => setPage(currentPage + 1),
+          disabled: currentPage >= pagination.totalPages,
+          children: "Next \u2192"
+        }
+      )
+    ] }),
+    showModal && form && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `rv-overlay rv-overlay--open`,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) setShowModal(false);
+        },
+        role: "presentation",
+        children: /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: "rv-modal",
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": "Write a review",
+            children: [
+              /* @__PURE__ */ jsxs3("div", { className: "rv-modal__nav", children: [
+                /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    className: "rv-modal__nav-btn",
+                    "aria-label": "Close",
+                    onClick: () => setShowModal(false),
+                    children: /* @__PURE__ */ jsx3(
+                      "svg",
+                      {
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        "aria-hidden": "true",
+                        children: /* @__PURE__ */ jsx3("path", { d: "M4 4l12 12M16 4L4 16" })
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx3("span", { className: "rv-modal__nav-title", children: "Write a Review" }),
+                /* @__PURE__ */ jsx3("div", { style: { width: 36 } })
+              ] }),
+              (productTitle || productImage) && /* @__PURE__ */ jsxs3("div", { className: "rv-product-strip", children: [
+                productImage && /* @__PURE__ */ jsx3(
+                  "img",
+                  {
+                    className: "rv-product-strip__img",
+                    src: productImage,
+                    alt: ""
+                  }
+                ),
+                productTitle && /* @__PURE__ */ jsx3("div", { children: /* @__PURE__ */ jsx3("div", { className: "rv-product-strip__name", children: productTitle }) })
+              ] }),
+              /* @__PURE__ */ jsx3("div", { className: "rv-modal__body", children: /* @__PURE__ */ jsx3(
+                ReviewForm,
+                {
+                  ...creds,
+                  productId,
+                  form,
+                  onSuccess: () => setShowModal(false)
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    )
   ] });
 }
 
@@ -654,10 +1019,11 @@ function ReviewCount({ apiUrl, shop, apiToken, starColor, starSize, className })
   const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken });
   if (loading || !data?.stats?.averageRating) return null;
   const avg = parseFloat(data.stats.averageRating);
-  return /* @__PURE__ */ jsxs4("span", { className, style: { display: "inline-flex", alignItems: "center", gap: 6 }, children: [
-    /* @__PURE__ */ jsx4(StarRating, { rating: avg, color: starColor, size: starSize }),
-    /* @__PURE__ */ jsx4("span", { children: data.stats.averageRating }),
-    /* @__PURE__ */ jsxs4("span", { children: [
+  const starProps = starColor !== void 0 ? { color: starColor } : {};
+  return /* @__PURE__ */ jsxs4("span", { className: `rv-count-badge${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx4(StarRating, { rating: avg, ...starSize !== void 0 && { size: starSize }, ...starProps }),
+    /* @__PURE__ */ jsx4("span", { className: "rv-count-badge__score", children: data.stats.averageRating }),
+    /* @__PURE__ */ jsxs4("span", { className: "rv-count-badge__total", children: [
       "(",
       data.stats.totalReviews,
       ")"
@@ -666,7 +1032,7 @@ function ReviewCount({ apiUrl, shop, apiToken, starColor, starSize, className })
 }
 
 // src/components/ReviewCarousel.tsx
-import React3, { useState as useState6 } from "react";
+import { useState as useState6, useEffect as useEffect3 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ReviewCarousel({
   apiUrl,
@@ -681,41 +1047,44 @@ function ReviewCarousel({
   const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const [index, setIndex] = useState6(0);
   const reviews = data?.reviews ?? [];
-  React3.useEffect(() => {
+  useEffect3(() => {
     if (!autoPlay || reviews.length < 2) return;
     const id = setInterval(() => setIndex((i) => (i + 1) % reviews.length), intervalMs);
     return () => clearInterval(id);
   }, [autoPlay, intervalMs, reviews.length]);
-  if (loading) return /* @__PURE__ */ jsx5("div", { className, children: "Loading\u2026" });
+  if (loading) {
+    return /* @__PURE__ */ jsx5("div", { className: `rv-widget${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: "rv-loading", children: [
+      /* @__PURE__ */ jsx5("span", { className: "rv-spinner" }),
+      "Loading\u2026"
+    ] }) });
+  }
   if (reviews.length === 0) return null;
+  const review = reviews[index];
+  const name = review.authorName;
+  const initial = name[0]?.toUpperCase() ?? "?";
   const prev = () => setIndex((i) => (i - 1 + reviews.length) % reviews.length);
   const next = () => setIndex((i) => (i + 1) % reviews.length);
-  const review = reviews[index];
-  return /* @__PURE__ */ jsxs5("div", { className, style: { position: "relative", overflow: "hidden" }, children: [
-    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-      /* @__PURE__ */ jsx5("button", { onClick: prev, "aria-label": "Previous review", style: { flexShrink: 0 }, children: "\u2039" }),
-      /* @__PURE__ */ jsxs5("div", { style: { flex: 1, textAlign: "center", padding: "8px 0" }, children: [
-        /* @__PURE__ */ jsx5(StarRating, { rating: review.rating, color: starColor }),
-        review.title && /* @__PURE__ */ jsx5("strong", { style: { display: "block", marginTop: 8 }, children: review.title }),
-        review.body && /* @__PURE__ */ jsx5("p", { style: { margin: "6px 0" }, children: review.body }),
-        /* @__PURE__ */ jsx5("small", { children: review.authorName })
+  return /* @__PURE__ */ jsxs5("div", { className: `rv-widget rv-carousel${className ? ` ${className}` : ""}`, style: { padding: "0 22px" }, children: [
+    /* @__PURE__ */ jsx5("div", { className: "rv-carousel__inner", children: /* @__PURE__ */ jsx5("div", { className: "rv-carousel__slide", children: /* @__PURE__ */ jsxs5("div", { className: "rv-card", style: { flexDirection: "column", alignItems: "flex-start" }, children: [
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", gap: 12, alignItems: "center", marginBottom: 10 }, children: [
+        /* @__PURE__ */ jsx5("div", { className: "rv-card__avatar", style: { background: avatarColor(initial) }, children: initial }),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsx5("div", { className: "rv-card__author", children: name }),
+          /* @__PURE__ */ jsx5("div", { className: "rv-card__date", children: formatDate(review.createdAt) })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx5("button", { onClick: next, "aria-label": "Next review", style: { flexShrink: 0 }, children: "\u203A" })
-    ] }),
-    /* @__PURE__ */ jsx5("div", { style: { display: "flex", justifyContent: "center", gap: 6, marginTop: 8 }, children: reviews.map((_, i) => /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx5(StarRating, { rating: review.rating, size: 16, ...starColor !== void 0 ? { color: starColor } : {} }),
+      review.title && /* @__PURE__ */ jsx5("p", { className: "rv-card__title", children: review.title }),
+      review.body && /* @__PURE__ */ jsx5("p", { className: "rv-card__body", style: { WebkitLineClamp: 4, display: "-webkit-box", WebkitBoxOrient: "vertical", overflow: "hidden" }, children: review.body })
+    ] }) }) }),
+    /* @__PURE__ */ jsx5("button", { className: "rv-carousel__nav rv-carousel__nav--prev", onClick: prev, "aria-label": "Previous review", children: /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M13 16l-6-6 6-6" }) }) }),
+    /* @__PURE__ */ jsx5("button", { className: "rv-carousel__nav rv-carousel__nav--next", onClick: next, "aria-label": "Next review", children: /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx5("path", { d: "M7 4l6 6-6 6" }) }) }),
+    /* @__PURE__ */ jsx5("div", { className: "rv-carousel__dots", children: reviews.map((_, i) => /* @__PURE__ */ jsx5(
       "button",
       {
+        className: `rv-carousel__dot${i === index ? " rv-carousel__dot--active" : ""}`,
         onClick: () => setIndex(i),
-        "aria-label": `Go to review ${i + 1}`,
-        style: {
-          width: 8,
-          height: 8,
-          borderRadius: "50%",
-          border: "none",
-          cursor: "pointer",
-          background: i === index ? "#374151" : "#d1d5db",
-          padding: 0
-        }
+        "aria-label": `Go to review ${i + 1}`
       },
       i
     )) })
@@ -737,38 +1106,37 @@ function ReviewGallery({
   const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
   const [lightbox, setLightbox] = useState7(null);
   const items = (data?.reviews ?? []).filter((r) => r.image).map((r) => ({ url: r.image, review: r })).slice(0, limit);
-  if (loading) return /* @__PURE__ */ jsx6("div", { className, children: "Loading gallery\u2026" });
+  if (loading) {
+    return /* @__PURE__ */ jsx6("div", { className: `rv-widget${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs6("div", { className: "rv-loading", children: [
+      /* @__PURE__ */ jsx6("span", { className: "rv-spinner" }),
+      "Loading gallery\u2026"
+    ] }) });
+  }
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
     /* @__PURE__ */ jsx6(
       "div",
       {
-        className,
+        className: `rv-widget rv-gallery${className ? ` ${className}` : ""}`,
         style: { columns, columnGap: 8 },
-        children: items.map((item, i) => /* @__PURE__ */ jsx6(
+        children: items.map((item, i) => /* @__PURE__ */ jsxs6(
           "button",
           {
+            className: "rv-gallery__item",
             onClick: () => setLightbox(item),
-            style: {
-              display: "block",
-              width: "100%",
-              marginBottom: 8,
-              border: "none",
-              padding: 0,
-              cursor: "pointer",
-              background: "none",
-              breakInside: "avoid"
-            },
             "aria-label": `View review photo ${i + 1}`,
-            children: /* @__PURE__ */ jsx6(
-              "img",
-              {
-                src: item.url,
-                alt: `Review photo ${i + 1}`,
-                style: { width: "100%", display: "block", borderRadius: 4 },
-                loading: "lazy"
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx6(
+                "img",
+                {
+                  src: item.url,
+                  alt: `Review photo ${i + 1}`,
+                  className: "rv-gallery__img",
+                  loading: "lazy"
+                }
+              ),
+              /* @__PURE__ */ jsx6("div", { className: "rv-gallery__overlay", children: /* @__PURE__ */ jsx6(StarRating, { rating: item.review.rating, size: 13, ...starColor !== void 0 ? { color: starColor } : {} }) })
+            ]
           },
           i
         ))
@@ -777,66 +1145,53 @@ function ReviewGallery({
     lightbox && /* @__PURE__ */ jsx6(
       "div",
       {
+        className: "rv-overlay rv-overlay--open rv-lightbox",
         role: "dialog",
         "aria-modal": "true",
         "aria-label": "Review photo",
-        style: {
-          position: "fixed",
-          inset: 0,
-          background: "rgba(0,0,0,0.85)",
-          zIndex: 99999,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 16
-        },
         onClick: () => setLightbox(null),
         children: /* @__PURE__ */ jsxs6(
           "div",
           {
-            style: {
-              background: "#fff",
-              borderRadius: 12,
-              maxWidth: 540,
-              width: "100%",
-              overflow: "hidden"
-            },
+            className: "rv-lightbox__card",
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsx6(
-                "img",
+                "button",
                 {
-                  src: lightbox.url,
-                  alt: "Review",
-                  style: { width: "100%", display: "block", maxHeight: 320, objectFit: "cover" }
+                  className: "rv-lightbox__close",
+                  onClick: () => setLightbox(null),
+                  "aria-label": "Close",
+                  children: /* @__PURE__ */ jsx6("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx6("path", { d: "M4 4l12 12M16 4L4 16" }) })
                 }
               ),
-              /* @__PURE__ */ jsxs6("div", { style: { padding: 16 }, children: [
-                /* @__PURE__ */ jsx6(StarRating, { rating: lightbox.review.rating, color: starColor }),
-                lightbox.review.title && /* @__PURE__ */ jsx6("strong", { style: { display: "block", marginTop: 6 }, children: lightbox.review.title }),
-                lightbox.review.body && /* @__PURE__ */ jsx6("p", { style: { margin: "6px 0" }, children: lightbox.review.body }),
-                /* @__PURE__ */ jsx6("small", { children: lightbox.review.authorName })
-              ] }),
               /* @__PURE__ */ jsx6(
-                "button",
+                "img",
                 {
-                  onClick: () => setLightbox(null),
-                  style: {
-                    position: "absolute",
-                    top: 12,
-                    right: 12,
-                    background: "#fff",
-                    border: "none",
-                    borderRadius: "50%",
-                    width: 32,
-                    height: 32,
-                    cursor: "pointer",
-                    fontSize: 18
-                  },
-                  "aria-label": "Close",
-                  children: "\xD7"
+                  src: lightbox.url,
+                  alt: "Review",
+                  className: "rv-lightbox__img"
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxs6("div", { className: "rv-lightbox__body", children: [
+                /* @__PURE__ */ jsxs6("div", { style: { display: "flex", gap: 10, alignItems: "center", marginBottom: 8 }, children: [
+                  /* @__PURE__ */ jsx6(
+                    "div",
+                    {
+                      className: "rv-card__avatar",
+                      style: { background: avatarColor(lightbox.review.authorName[0]?.toUpperCase() ?? "?"), width: 36, height: 36, fontSize: 14 },
+                      children: lightbox.review.authorName[0]?.toUpperCase() ?? "?"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs6("div", { children: [
+                    /* @__PURE__ */ jsx6("div", { className: "rv-card__author", children: lightbox.review.authorName }),
+                    /* @__PURE__ */ jsx6("div", { className: "rv-card__date", children: formatDate(lightbox.review.createdAt) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx6(StarRating, { rating: lightbox.review.rating, size: 15, ...starColor !== void 0 ? { color: starColor } : {} }),
+                lightbox.review.title && /* @__PURE__ */ jsx6("p", { className: "rv-card__title", style: { marginTop: 8 }, children: lightbox.review.title }),
+                lightbox.review.body && /* @__PURE__ */ jsx6("p", { className: "rv-card__body", children: lightbox.review.body })
+              ] })
             ]
           }
         )
@@ -849,7 +1204,7 @@ function ReviewGallery({
 import { useState as useState9 } from "react";
 
 // src/hooks/useQnA.ts
-import { useEffect as useEffect3, useState as useState8, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect4, useState as useState8, useCallback as useCallback3 } from "react";
 var INITIAL_SUBMIT = { submitting: false, success: false, error: null };
 function useQnA({ apiUrl, shop, apiToken, productId, page: initialPage = 1, sort = "recent" }) {
   const creds = { apiUrl, shop, apiToken };
@@ -858,7 +1213,7 @@ function useQnA({ apiUrl, shop, apiToken, productId, page: initialPage = 1, sort
   const [state, setState] = useState8({ data: null, loading: true, error: null });
   const [submitState, setSubmitState] = useState8(INITIAL_SUBMIT);
   const refetch = useCallback3(() => setTick((t) => t + 1), []);
-  useEffect3(() => {
+  useEffect4(() => {
     let cancelled = false;
     setState((s) => ({ ...s, loading: true, error: null }));
     apiFetch(creds, "/api/qna", { productId, page: String(page), sort }).then((res) => {
@@ -922,82 +1277,166 @@ function QnAWidget({ apiUrl, shop, apiToken, productId, className }) {
     setBody("");
     setEmail("");
     setDisplayName("");
-    setShowForm(false);
   }
-  if (loading) return /* @__PURE__ */ jsx7("div", { className, children: "Loading Q&A\u2026" });
-  if (error) return /* @__PURE__ */ jsx7("div", { className, children: "Could not load Q&A." });
+  if (loading) {
+    return /* @__PURE__ */ jsx7("div", { className: `rv-widget rv-qna${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "rv-loading", children: [
+      /* @__PURE__ */ jsx7("span", { className: "rv-spinner" }),
+      "Loading Q&A\u2026"
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx7("div", { className: `rv-widget rv-qna${className ? ` ${className}` : ""}`, children: /* @__PURE__ */ jsx7("p", { className: "rv-empty", children: "Could not load Q&A." }) });
+  }
   if (!data) return null;
   const { questions, pagination } = data;
-  return /* @__PURE__ */ jsxs7("div", { className, children: [
-    /* @__PURE__ */ jsxs7("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsx7("h3", { style: { margin: 0 }, children: "Questions & Answers" }),
-      /* @__PURE__ */ jsx7("button", { onClick: () => {
-        setShowForm((s) => !s);
-        resetSubmit();
-      }, children: "Ask a Question" })
+  return /* @__PURE__ */ jsxs7("div", { className: `rv-widget rv-qna${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsxs7("div", { className: "rv-qna__header", children: [
+      /* @__PURE__ */ jsx7("h3", { className: "rv-qna__title", children: "Questions & Answers" }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: "rv-btn rv-btn--primary",
+          onClick: () => {
+            setShowForm((s) => !s);
+            resetSubmit();
+          },
+          children: "Ask a Question"
+        }
+      )
     ] }),
-    showForm && /* @__PURE__ */ jsx7("form", { onSubmit: handleAsk, style: { marginBottom: 24 }, children: submitState.success ? /* @__PURE__ */ jsx7("p", { children: "Thanks! Your question has been submitted." }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx7("label", { htmlFor: "qna-email", children: "Email" }),
-        /* @__PURE__ */ jsx7("input", { id: "qna-email", type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value) })
+    showForm && /* @__PURE__ */ jsx7("form", { className: "rv-qna__form", onSubmit: handleAsk, noValidate: true, children: submitState.success ? /* @__PURE__ */ jsxs7("div", { className: "rv-success", children: [
+      /* @__PURE__ */ jsx7("div", { className: "rv-success__icon", children: "\u2713" }),
+      /* @__PURE__ */ jsx7("div", { className: "rv-success__title", children: "Thanks!" }),
+      /* @__PURE__ */ jsx7("p", { className: "rv-success__sub", children: "Your question has been submitted." })
+    ] }) : /* @__PURE__ */ jsxs7(Fragment3, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rv-field", children: [
+        /* @__PURE__ */ jsxs7("label", { className: "rv-label", htmlFor: "qna-email", children: [
+          "Email ",
+          /* @__PURE__ */ jsx7("span", { className: "rv-label__required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "rv-input-wrap", children: [
+          /* @__PURE__ */ jsxs7("svg", { className: "rv-input-wrap__icon", width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx7("rect", { x: "2", y: "4", width: "16", height: "12", rx: "2" }),
+            /* @__PURE__ */ jsx7("path", { d: "M2 7l8 5 8-5" })
+          ] }),
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              id: "qna-email",
+              type: "email",
+              className: "rv-input rv-input--icon",
+              required: true,
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              placeholder: "your@email.com",
+              autoComplete: "email"
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx7("label", { htmlFor: "qna-name", children: "Name (optional)" }),
-        /* @__PURE__ */ jsx7("input", { id: "qna-name", type: "text", value: displayName, onChange: (e) => setDisplayName(e.target.value) })
+      /* @__PURE__ */ jsxs7("div", { className: "rv-field", children: [
+        /* @__PURE__ */ jsx7("label", { className: "rv-label", htmlFor: "qna-name", children: "Name (optional)" }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            id: "qna-name",
+            type: "text",
+            className: "rv-input",
+            value: displayName,
+            onChange: (e) => setDisplayName(e.target.value),
+            placeholder: "Your name"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxs7("div", { children: [
-        /* @__PURE__ */ jsx7("label", { htmlFor: "qna-body", children: "Your Question" }),
+      /* @__PURE__ */ jsxs7("div", { className: "rv-field", children: [
+        /* @__PURE__ */ jsxs7("label", { className: "rv-label", htmlFor: "qna-body", children: [
+          "Your Question ",
+          /* @__PURE__ */ jsx7("span", { className: "rv-label__required", children: "*" })
+        ] }),
         /* @__PURE__ */ jsx7(
           "textarea",
           {
             id: "qna-body",
+            className: "rv-textarea",
             required: true,
             rows: 3,
             value: body,
-            onChange: (e) => setBody(e.target.value)
+            onChange: (e) => setBody(e.target.value),
+            placeholder: "What would you like to know?"
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs7("label", { children: [
-        /* @__PURE__ */ jsx7("input", { type: "checkbox", checked: isAnonymous, onChange: (e) => setIsAnonymous(e.target.checked) }),
-        " ",
+      /* @__PURE__ */ jsxs7("label", { className: "rv-anon", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "checkbox",
+            checked: isAnonymous,
+            onChange: (e) => setIsAnonymous(e.target.checked)
+          }
+        ),
         "Post anonymously"
       ] }),
-      submitState.error && /* @__PURE__ */ jsx7("p", { style: { color: "red" }, children: submitState.error }),
-      /* @__PURE__ */ jsx7("button", { type: "submit", disabled: submitState.submitting, children: submitState.submitting ? "Submitting\u2026" : "Submit Question" })
+      submitState.error && /* @__PURE__ */ jsx7("p", { className: "rv-error", children: submitState.error }),
+      /* @__PURE__ */ jsx7("button", { type: "submit", className: "rv-btn--submit", disabled: submitState.submitting, children: submitState.submitting ? "Submitting\u2026" : "Submit Question" })
     ] }) }),
-    questions.length === 0 ? /* @__PURE__ */ jsx7("p", { children: "No questions yet. Be the first to ask!" }) : /* @__PURE__ */ jsx7("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: questions.map((q) => /* @__PURE__ */ jsxs7("li", { style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 16, marginBottom: 16 }, children: [
-      /* @__PURE__ */ jsxs7("p", { style: { fontWeight: 600, margin: "0 0 4px" }, children: [
-        "Q: ",
-        q.body
-      ] }),
-      /* @__PURE__ */ jsxs7("small", { children: [
-        q.displayName,
-        q.verifiedBuyer ? " \xB7 Verified Buyer" : ""
+    questions.length === 0 ? /* @__PURE__ */ jsx7("p", { className: "rv-empty", children: "No questions yet. Be the first to ask!" }) : /* @__PURE__ */ jsx7("ul", { className: "rv-qna__list", children: questions.map((q) => /* @__PURE__ */ jsxs7("li", { className: "rv-qna__item", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rv-qna__question-row", children: [
+        /* @__PURE__ */ jsx7("span", { className: "rv-qna__q-mark", children: "Q" }),
+        /* @__PURE__ */ jsxs7("div", { className: "rv-qna__question-body", children: [
+          /* @__PURE__ */ jsx7("p", { className: "rv-qna__question-text", children: q.body }),
+          /* @__PURE__ */ jsxs7("span", { className: "rv-qna__meta", children: [
+            q.displayName,
+            q.verifiedBuyer ? " \xB7 Verified Buyer" : "",
+            " \xB7 ",
+            formatDate(q.createdAt)
+          ] })
+        ] })
       ] }),
-      q.answers.length > 0 && /* @__PURE__ */ jsx7("ul", { style: { listStyle: "none", padding: "8px 0 0 16px", margin: 0 }, children: q.answers.map((a) => /* @__PURE__ */ jsxs7("li", { style: { marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsxs7("p", { style: { margin: "0 0 2px" }, children: [
-          a.isAdminReply && /* @__PURE__ */ jsx7("strong", { children: "Store: " }),
-          a.body
-        ] }),
-        /* @__PURE__ */ jsx7("small", { children: a.displayName })
+      q.answers.length > 0 && /* @__PURE__ */ jsx7("ul", { className: "rv-qna__answers", children: q.answers.map((a) => /* @__PURE__ */ jsxs7("li", { className: "rv-qna__answer", children: [
+        /* @__PURE__ */ jsx7("span", { className: `rv-qna__a-mark${a.isAdminReply ? " rv-qna__a-mark--store" : ""}`, children: "A" }),
+        /* @__PURE__ */ jsxs7("div", { className: "rv-qna__answer-body", children: [
+          a.isAdminReply && /* @__PURE__ */ jsx7("span", { className: "rv-qna__store-label", children: "Store \xB7 " }),
+          /* @__PURE__ */ jsx7("p", { className: "rv-qna__answer-text", children: a.body }),
+          /* @__PURE__ */ jsxs7("span", { className: "rv-qna__meta", children: [
+            a.displayName,
+            " \xB7 ",
+            formatDate(a.createdAt)
+          ] })
+        ] })
       ] }, a.id)) })
     ] }, q.id)) }),
-    pagination.totalPages > 1 && /* @__PURE__ */ jsxs7("div", { style: { display: "flex", gap: 8, alignItems: "center", marginTop: 16 }, children: [
-      /* @__PURE__ */ jsx7("button", { onClick: () => setPage(currentPage - 1), disabled: currentPage <= 1, children: "Previous" }),
-      /* @__PURE__ */ jsxs7("span", { children: [
+    pagination.totalPages > 1 && /* @__PURE__ */ jsxs7("div", { className: "rv-pagination", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: "rv-btn rv-btn--outline rv-btn--sm",
+          onClick: () => setPage(currentPage - 1),
+          disabled: currentPage <= 1,
+          children: "\u2190 Prev"
+        }
+      ),
+      /* @__PURE__ */ jsxs7("span", { className: "rv-pagination__info", children: [
         "Page ",
         currentPage,
         " of ",
         pagination.totalPages
       ] }),
-      /* @__PURE__ */ jsx7("button", { onClick: () => setPage(currentPage + 1), disabled: currentPage >= pagination.totalPages, children: "Next" })
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: "rv-btn rv-btn--outline rv-btn--sm",
+          onClick: () => setPage(currentPage + 1),
+          disabled: currentPage >= pagination.totalPages,
+          children: "Next \u2192"
+        }
+      )
     ] })
   ] });
 }
 
 // src/components/SocialProofPopup.tsx
-import { useEffect as useEffect4, useState as useState10 } from "react";
+import { useEffect as useEffect5, useState as useState10 } from "react";
 import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function SocialProofPopup({
   apiUrl,
@@ -1013,7 +1452,7 @@ function SocialProofPopup({
   const [current, setCurrent] = useState10(null);
   const [visible, setVisible] = useState10(false);
   const [dismissed, setDismissed] = useState10(false);
-  useEffect4(() => {
+  useEffect5(() => {
     const reviews = data?.reviews;
     if (!reviews || reviews.length === 0 || dismissed) return;
     let idx = 0;
@@ -1026,33 +1465,20 @@ function SocialProofPopup({
         setTimeout(() => setVisible(false), displayMs);
       }
     }
-    const initial = setTimeout(show, 2e3);
+    const initial2 = setTimeout(show, 2e3);
     const interval = setInterval(show, intervalMs);
     return () => {
-      clearTimeout(initial);
+      clearTimeout(initial2);
       clearInterval(interval);
     };
   }, [data, intervalMs, displayMs, dismissed]);
   if (!current || !visible) return null;
-  const posStyle = position === "bottom-right" ? { bottom: 20, right: 20 } : { bottom: 20, left: 20 };
+  const initial = current.authorName[0]?.toUpperCase() ?? "?";
   return /* @__PURE__ */ jsxs8(
     "div",
     {
-      className,
-      style: {
-        position: "fixed",
-        zIndex: 99999,
-        ...posStyle,
-        background: "#fff",
-        borderRadius: 12,
-        boxShadow: "0 4px 20px rgba(0,0,0,0.12)",
-        padding: "12px 16px",
-        maxWidth: 280,
-        display: "flex",
-        gap: 10,
-        alignItems: "flex-start",
-        animation: "fadeInUp 0.3s ease"
-      },
+      className: `rv-popup rv-popup--${position}${className ? ` ${className}` : ""}`,
+      style: { animation: "rv-fade-up 0.35s ease" },
       role: "status",
       "aria-live": "polite",
       children: [
@@ -1061,31 +1487,20 @@ function SocialProofPopup({
           {
             src: current.image,
             alt: "",
-            width: 44,
-            height: 44,
-            style: { borderRadius: "50%", objectFit: "cover", flexShrink: 0 }
+            className: "rv-popup__avatar rv-popup__avatar--img"
           }
         ) : /* @__PURE__ */ jsx8(
           "div",
           {
-            style: {
-              width: 44,
-              height: 44,
-              borderRadius: "50%",
-              background: "#e5e7eb",
-              flexShrink: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 18
-            },
-            children: current.authorName[0]?.toUpperCase() ?? "?"
+            className: "rv-popup__avatar",
+            style: { background: avatarColor(initial) },
+            children: initial
           }
         ),
-        /* @__PURE__ */ jsxs8("div", { style: { flex: 1, minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx8(StarRating, { rating: current.rating, size: 13, color: starColor }),
-          current.body && /* @__PURE__ */ jsx8("p", { style: { margin: "4px 0", fontSize: 13, lineHeight: 1.4, overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }, children: current.body }),
-          /* @__PURE__ */ jsxs8("small", { style: { fontSize: 11, color: "#6b7280" }, children: [
+        /* @__PURE__ */ jsxs8("div", { className: "rv-popup__content", children: [
+          /* @__PURE__ */ jsx8(StarRating, { rating: current.rating, size: 13, ...starColor !== void 0 ? { color: starColor } : {} }),
+          current.body && /* @__PURE__ */ jsx8("p", { className: "rv-popup__body", children: current.body }),
+          /* @__PURE__ */ jsxs8("span", { className: "rv-popup__author", children: [
             current.authorName,
             current.verifiedBuyer ? " \xB7 Verified Buyer" : ""
           ] })
@@ -1093,13 +1508,13 @@ function SocialProofPopup({
         /* @__PURE__ */ jsx8(
           "button",
           {
+            className: "rv-popup__dismiss",
             onClick: () => {
               setVisible(false);
               setDismissed(true);
             },
             "aria-label": "Dismiss",
-            style: { background: "none", border: "none", cursor: "pointer", fontSize: 16, color: "#9ca3af", padding: 0, flexShrink: 0 },
-            children: "\xD7"
+            children: /* @__PURE__ */ jsx8("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("path", { d: "M4 4l12 12M16 4L4 16" }) })
           }
         )
       ]
@@ -1108,7 +1523,6 @@ function SocialProofPopup({
 }
 
 // src/components/ReviewTicker.tsx
-import { useRef } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function ReviewTicker({
   apiUrl,
@@ -1120,58 +1534,43 @@ function ReviewTicker({
   className
 }) {
   const { data, loading } = useWidgetGlobals({ apiUrl, shop, apiToken, limit });
-  const trackRef = useRef(null);
   const reviews = data?.reviews ?? [];
   if (loading || reviews.length === 0) return null;
   const items = [...reviews, ...reviews];
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
-      className,
-      style: { overflow: "hidden", position: "relative" },
+      className: `rv-ticker-wrap${className ? ` ${className}` : ""}`,
       "aria-label": "Review ticker",
-      children: [
-        /* @__PURE__ */ jsx9("style", { children: `
-        @keyframes rvTicker {
-          from { transform: translateX(0); }
-          to   { transform: translateX(-50%); }
+      children: /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "rv-ticker__track",
+          style: { animation: `rv-ticker ${speedSeconds}s linear infinite` },
+          children: items.map((review, i) => {
+            const initial = review.authorName[0]?.toUpperCase() ?? "?";
+            return /* @__PURE__ */ jsxs9("div", { className: "rv-ticker__item", children: [
+              /* @__PURE__ */ jsx9(
+                "div",
+                {
+                  className: "rv-ticker__avatar",
+                  style: { background: avatarColor(initial) },
+                  children: initial
+                }
+              ),
+              /* @__PURE__ */ jsxs9("div", { className: "rv-ticker__content", children: [
+                /* @__PURE__ */ jsx9(StarRating, { rating: review.rating, size: 13, ...starColor !== void 0 ? { color: starColor } : {} }),
+                review.body && /* @__PURE__ */ jsxs9("p", { className: "rv-ticker__body", children: [
+                  "\u201C",
+                  review.body,
+                  "\u201D"
+                ] }),
+                /* @__PURE__ */ jsx9("span", { className: "rv-ticker__author", children: review.authorName })
+              ] })
+            ] }, `${review.id}-${i}`);
+          })
         }
-      ` }),
-        /* @__PURE__ */ jsx9(
-          "div",
-          {
-            ref: trackRef,
-            style: {
-              display: "flex",
-              gap: 32,
-              animation: `rvTicker ${speedSeconds}s linear infinite`,
-              width: "max-content"
-            },
-            children: items.map((review, i) => /* @__PURE__ */ jsxs9(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 4,
-                  minWidth: 220,
-                  flexShrink: 0
-                },
-                children: [
-                  /* @__PURE__ */ jsx9(StarRating, { rating: review.rating, size: 14, color: starColor }),
-                  review.body && /* @__PURE__ */ jsxs9("p", { style: { margin: 0, fontSize: 13, overflow: "hidden", whiteSpace: "nowrap", maxWidth: 220, textOverflow: "ellipsis" }, children: [
-                    "\u201C",
-                    review.body,
-                    "\u201D"
-                  ] }),
-                  /* @__PURE__ */ jsx9("small", { style: { fontSize: 11, color: "#6b7280" }, children: review.authorName })
-                ]
-              },
-              `${review.id}-${i}`
-            ))
-          }
-        )
-      ]
+      )
     }
   );
 }
@@ -1194,71 +1593,70 @@ function FloatingReviewsTab({
   const [open, setOpen] = useState11(false);
   const reviews = data?.reviews ?? [];
   const stats = data?.stats;
-  const sideStyle = position === "right" ? { right: 0, top: "50%", transform: "translateY(-50%)" } : { left: 0, top: "50%", transform: "translateY(-50%)" };
-  const panelStyle = position === "right" ? { right: 0, top: "50%", transform: "translateY(-50%)" } : { left: 0, top: "50%", transform: "translateY(-50%)" };
+  const starProps = starColor !== void 0 ? { color: starColor } : {};
   return /* @__PURE__ */ jsxs10(Fragment4, { children: [
     /* @__PURE__ */ jsx10(
       "button",
       {
-        className,
+        className: `rv-tab__btn rv-tab__btn--${position}${className ? ` ${className}` : ""}`,
+        style: { background: color },
         onClick: () => setOpen((s) => !s),
         "aria-expanded": open,
         "aria-label": `${label} panel`,
-        style: {
-          position: "fixed",
-          zIndex: 9999,
-          ...sideStyle,
-          background: color,
-          color: "#fff",
-          border: "none",
-          cursor: "pointer",
-          padding: "10px 14px",
-          writingMode: "vertical-rl",
-          textOrientation: "mixed",
-          transform: `translateY(-50%) rotate(${position === "right" ? 180 : 0}deg)`,
-          borderRadius: position === "right" ? "8px 0 0 8px" : "0 8px 8px 0",
-          fontSize: 13,
-          fontWeight: 600
-        },
         children: label
       }
     ),
-    open && /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs10(
       "div",
       {
+        className: `rv-tab__panel rv-tab__panel--${position}${open ? " rv-tab__panel--open" : ""}`,
         role: "dialog",
         "aria-label": label,
-        style: {
-          position: "fixed",
-          zIndex: 99999,
-          ...panelStyle,
-          background: "#fff",
-          boxShadow: "0 8px 32px rgba(0,0,0,0.16)",
-          width: 300,
-          maxHeight: "80vh",
-          overflowY: "auto",
-          padding: 20,
-          borderRadius: 8
-        },
+        "aria-hidden": !open,
         children: [
-          /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }, children: [
-            /* @__PURE__ */ jsx10("strong", { children: label }),
-            /* @__PURE__ */ jsx10("button", { onClick: () => setOpen(false), "aria-label": "Close", style: { background: "none", border: "none", cursor: "pointer", fontSize: 18 }, children: "\xD7" })
+          /* @__PURE__ */ jsxs10("div", { className: "rv-tab__panel-header", children: [
+            /* @__PURE__ */ jsx10("strong", { className: "rv-tab__panel-title", children: label }),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                className: "rv-modal__nav-btn",
+                onClick: () => setOpen(false),
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsx10("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx10("path", { d: "M4 4l12 12M16 4L4 16" }) })
+              }
+            )
           ] }),
-          stats && /* @__PURE__ */ jsxs10("div", { style: { marginBottom: 12, display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ jsx10(StarRating, { rating: parseFloat(stats.averageRating ?? "0"), color: starColor }),
-            /* @__PURE__ */ jsxs10("span", { style: { fontSize: 13 }, children: [
+          stats && /* @__PURE__ */ jsxs10("div", { className: "rv-tab__stats", children: [
+            /* @__PURE__ */ jsx10(StarRating, { rating: parseFloat(stats.averageRating ?? "0"), size: 16, ...starProps }),
+            /* @__PURE__ */ jsxs10("span", { className: "rv-tab__stats-text", children: [
               stats.averageRating,
-              " (",
+              " \xB7 ",
               stats.totalReviews,
-              ")"
+              " review",
+              stats.totalReviews !== 1 ? "s" : ""
             ] })
           ] }),
-          /* @__PURE__ */ jsx10("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: reviews.map((r) => /* @__PURE__ */ jsxs10("li", { style: { borderBottom: "1px solid #f3f4f6", paddingBottom: 12, marginBottom: 12 }, children: [
-            /* @__PURE__ */ jsx10(StarRating, { rating: r.rating, size: 13, color: starColor }),
-            r.body && /* @__PURE__ */ jsx10("p", { style: { margin: "4px 0", fontSize: 13 }, children: r.body }),
-            /* @__PURE__ */ jsx10("small", { style: { fontSize: 11, color: "#6b7280" }, children: r.authorName })
-          ] }, r.id)) })
+          /* @__PURE__ */ jsx10("ul", { className: "rv-tab__list", children: reviews.map((r) => {
+            const initial = r.authorName[0]?.toUpperCase() ?? "?";
+            return /* @__PURE__ */ jsxs10("li", { className: "rv-tab__item", children: [
+              /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }, children: [
+                /* @__PURE__ */ jsx10(
+                  "div",
+                  {
+                    className: "rv-card__avatar",
+                    style: { background: avatarColor(initial), width: 30, height: 30, fontSize: 12 },
+                    children: initial
+                  }
+                ),
+                /* @__PURE__ */ jsxs10("div", { children: [
+                  /* @__PURE__ */ jsx10("div", { className: "rv-card__author", style: { fontSize: 13 }, children: r.authorName }),
+                  /* @__PURE__ */ jsx10("div", { className: "rv-card__date", children: formatDate(r.createdAt) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx10(StarRating, { rating: r.rating, size: 13, ...starProps }),
+              r.body && /* @__PURE__ */ jsx10("p", { className: "rv-card__body", style: { marginTop: 4, fontSize: 13 }, children: r.body })
+            ] }, r.id);
+          }) })
         ]
       }
     )
@@ -1272,11 +1670,12 @@ function TrustBadge({ apiUrl, shop, apiToken, style: badgeStyle = "pill", starCo
   if (loading || !data?.stats?.averageRating) return null;
   const avg = parseFloat(data.stats.averageRating);
   const count = data.stats.totalReviews;
+  const starProps = starColor !== void 0 ? { color: starColor } : {};
   if (badgeStyle === "inline") {
-    return /* @__PURE__ */ jsxs11("span", { className, style: { display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14 }, children: [
-      /* @__PURE__ */ jsx11(StarRating, { rating: avg, color: starColor, size: 14 }),
+    return /* @__PURE__ */ jsxs11("span", { className: `rv-trust-badge--inline${className ? ` ${className}` : ""}`, children: [
+      /* @__PURE__ */ jsx11(StarRating, { rating: avg, size: 14, ...starProps }),
       /* @__PURE__ */ jsx11("strong", { children: data.stats.averageRating }),
-      /* @__PURE__ */ jsxs11("span", { style: { color: "#6b7280" }, children: [
+      /* @__PURE__ */ jsxs11("span", { className: "rv-trust-badge__count", children: [
         "(",
         count,
         " review",
@@ -1286,68 +1685,34 @@ function TrustBadge({ apiUrl, shop, apiToken, style: badgeStyle = "pill", starCo
     ] });
   }
   if (badgeStyle === "card") {
-    return /* @__PURE__ */ jsxs11(
-      "div",
-      {
-        className,
-        style: {
-          display: "inline-flex",
-          flexDirection: "column",
-          alignItems: "center",
-          gap: 6,
-          padding: "16px 24px",
-          background: "#fff",
-          borderRadius: 12,
-          boxShadow: "0 2px 12px rgba(0,0,0,0.08)",
-          textAlign: "center"
-        },
-        children: [
-          /* @__PURE__ */ jsx11("strong", { style: { fontSize: 32, lineHeight: 1 }, children: data.stats.averageRating }),
-          /* @__PURE__ */ jsx11(StarRating, { rating: avg, size: 20, color: starColor }),
-          /* @__PURE__ */ jsxs11("span", { style: { fontSize: 13, color: "#6b7280" }, children: [
-            count,
-            " review",
-            count !== 1 ? "s" : ""
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs11(
-    "span",
-    {
-      className,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 6,
-        background: "#fff",
-        border: "1px solid #e5e7eb",
-        borderRadius: 999,
-        padding: "4px 12px",
-        fontSize: 13,
-        fontWeight: 600
-      },
-      children: [
-        /* @__PURE__ */ jsx11(StarRating, { rating: avg, size: 13, color: starColor }),
-        data.stats.averageRating,
-        " \xB7 ",
+    return /* @__PURE__ */ jsxs11("div", { className: `rv-trust-badge--card${className ? ` ${className}` : ""}`, children: [
+      /* @__PURE__ */ jsx11("strong", { className: "rv-trust-badge__score", children: data.stats.averageRating }),
+      /* @__PURE__ */ jsx11(StarRating, { rating: avg, size: 20, ...starProps }),
+      /* @__PURE__ */ jsxs11("span", { className: "rv-trust-badge__count", children: [
         count,
         " review",
         count !== 1 ? "s" : ""
-      ]
-    }
-  );
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs11("span", { className: `rv-trust-badge--pill${className ? ` ${className}` : ""}`, children: [
+    /* @__PURE__ */ jsx11(StarRating, { rating: avg, size: 13, ...starProps }),
+    data.stats.averageRating,
+    " \xB7 ",
+    count,
+    " review",
+    count !== 1 ? "s" : ""
+  ] });
 }
 
 // src/components/FloatingReviewButton.tsx
 import { useState as useState13 } from "react";
 
 // src/hooks/useForm.ts
-import { useEffect as useEffect5, useState as useState12 } from "react";
+import { useEffect as useEffect6, useState as useState12 } from "react";
 function useForm(creds, productId) {
   const [state, setState] = useState12({ form: null, loading: true, error: null });
-  useEffect5(() => {
+  useEffect6(() => {
     let cancelled = false;
     apiFetch(creds, "/api/reviews", { productId, limit: "1", page: "1" }).then((res) => {
       if (!res.ok) throw new Error(`Revova: form fetch failed (${res.status})`);
@@ -1373,40 +1738,25 @@ function FloatingReviewButton({
   apiToken,
   productId,
   text = "Write a Review",
-  color = "#111827",
+  color = "#1a6b3c",
   position = "bottom-right",
   className
 }) {
   const creds = { apiUrl, shop, apiToken };
   const [open, setOpen] = useState13(false);
   const { form, loading } = useForm(creds, productId);
-  const posStyle = position === "bottom-right" ? { bottom: 24, right: 24 } : { bottom: 24, left: 24 };
   if (!loading && !form) return null;
   return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     /* @__PURE__ */ jsxs12(
       "button",
       {
-        className,
+        className: `rv-fab rv-fab--${position}${className ? ` ${className}` : ""}`,
+        style: { background: color, opacity: loading ? 0.7 : 1 },
         onClick: () => setOpen(true),
         disabled: loading,
         "aria-label": text,
-        style: {
-          position: "fixed",
-          zIndex: 9998,
-          ...posStyle,
-          background: color,
-          color: "#fff",
-          border: "none",
-          borderRadius: 999,
-          padding: "12px 20px",
-          fontSize: 14,
-          fontWeight: 600,
-          cursor: loading ? "wait" : "pointer",
-          boxShadow: "0 4px 16px rgba(0,0,0,0.2)",
-          opacity: loading ? 0.7 : 1
-        },
         children: [
-          "\u270E ",
+          /* @__PURE__ */ jsx12("svg", { width: "15", height: "15", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { d: "M13.5 2.5a2.121 2.121 0 013 3L7 15l-4 1 1-4 12.5-12.5z" }) }),
           text
         ]
       }
@@ -1414,58 +1764,37 @@ function FloatingReviewButton({
     open && form && /* @__PURE__ */ jsx12(
       "div",
       {
+        className: "rv-overlay rv-overlay--open",
         role: "dialog",
         "aria-modal": "true",
         "aria-label": "Write a Review",
-        style: {
-          position: "fixed",
-          inset: 0,
-          background: "rgba(0,0,0,0.5)",
-          zIndex: 99999,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          padding: 16
+        onClick: (e) => {
+          if (e.target === e.currentTarget) setOpen(false);
         },
-        onClick: () => setOpen(false),
-        children: /* @__PURE__ */ jsxs12(
-          "div",
-          {
-            style: {
-              background: "#fff",
-              borderRadius: 12,
-              padding: 24,
-              maxWidth: 480,
-              width: "100%",
-              maxHeight: "90vh",
-              overflowY: "auto"
-            },
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsxs12("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }, children: [
-                /* @__PURE__ */ jsx12("h2", { style: { margin: 0, fontSize: 18 }, children: "Write a Review" }),
-                /* @__PURE__ */ jsx12(
-                  "button",
-                  {
-                    onClick: () => setOpen(false),
-                    "aria-label": "Close",
-                    style: { background: "none", border: "none", cursor: "pointer", fontSize: 20, lineHeight: 1 },
-                    children: "\xD7"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx12(
-                ReviewForm,
-                {
-                  ...creds,
-                  productId,
-                  form,
-                  onSuccess: () => setOpen(false)
-                }
-              )
-            ]
-          }
-        )
+        children: /* @__PURE__ */ jsxs12("div", { className: "rv-modal", children: [
+          /* @__PURE__ */ jsxs12("div", { className: "rv-modal__nav", children: [
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                className: "rv-modal__nav-btn",
+                "aria-label": "Close",
+                onClick: () => setOpen(false),
+                children: /* @__PURE__ */ jsx12("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { d: "M4 4l12 12M16 4L4 16" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx12("span", { className: "rv-modal__nav-title", children: "Write a Review" }),
+            /* @__PURE__ */ jsx12("div", { style: { width: 36 } })
+          ] }),
+          /* @__PURE__ */ jsx12("div", { className: "rv-modal__body", children: /* @__PURE__ */ jsx12(
+            ReviewForm,
+            {
+              ...creds,
+              productId,
+              form,
+              onSuccess: () => setOpen(false)
+            }
+          ) })
+        ] })
       }
     )
   ] });