diff --git a/app/components/AddToCartButton.tsx b/app/components/AddToCartButton.tsx
index 58f357c..c296f88 100644
--- a/app/components/AddToCartButton.tsx
+++ b/app/components/AddToCartButton.tsx
@@ -49,7 +49,15 @@ export function AddToCartButton({
   // into `base`, since appending on top can't rely on CSS source order
   // the way branching a whole className (AddToCartInlineButton's
   // approach) can when the base itself varies per caller.
-  const stateClasses = added ? "bg-success! hover:bg-success! text-white!" : "";
+  // Pale success-subtle fill + success text + a success-colored border, not
+  // a solid success-green fill with white text — same restrained pairing
+  // AddToCartInlineButton already uses (border-success + bg-success-subtle),
+  // a solid bright-green button read as too loud here. `border` (width) is
+  // added here too since `base` has none by default, unlike
+  // AddToCartInlineButton's own base which already carries a plain border.
+  const stateClasses = added
+    ? "border border-success! bg-success-subtle! hover:bg-success-subtle! text-success!"
+    : "";
 
   return (
     <button