fix(seller): make inline price editor obviously tappable on touch

The pencil hint was hover-only, so on phones the price read as plain text.
Style the display as an editable field (subtle border + grey fill) with an
always-visible pencil, and drop the negative margins that fought the border.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

app/components/seller/InlinePriceEditor.tsx

@@ -194,9 +194,13 @@ export function InlinePriceEditor({
       onClick={openEditor}
       disabled={isPending}
       aria-label={ariaLabel}
+      // Looks like an editable field (subtle border + grey fill) with an
+      // always-visible pencil, so it reads as tappable on touch devices where
+      // there is no hover to reveal the affordance.
       className={cn(
-        "group inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 min-h-[36px]",
+        "group inline-flex items-center gap-1.5 rounded-lg border border-GRAY3 bg-WHITE3 px-2.5 py-1.5 min-h-[36px]",
-        "transition-colors hover:bg-VITROWN_BLUE/5 cursor-pointer disabled:cursor-default",
+        "transition-colors hover:border-VITROWN_BLUE hover:bg-VITROWN_BLUE/5 active:bg-VITROWN_BLUE/10",
+        "cursor-pointer disabled:cursor-default disabled:opacity-70",
         alignClass,
         className
       )}
@@ -204,7 +208,7 @@ export function InlinePriceEditor({
       {isPending ? (
         <Loader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-VITROWN_BLUE" />
       ) : (
-        <Pencil className="h-3.5 w-3.5 shrink-0 text-GRAY opacity-0 transition-opacity group-hover:opacity-100" />
+        <Pencil className="h-3.5 w-3.5 shrink-0 text-VITROWN_BLUE/70 transition-colors group-hover:text-VITROWN_BLUE" />
       )}
       {hasValue ? (
         <span className={cn("font-semibold tabular-nums", sizeText)}>

app/routes/store.$storeId.products.tsx

@@ -104,7 +104,6 @@ function ProductAccordionItem({
                 size="sm"
                 align="start"
                 ariaLabel="ویرایش قیمت محصول"
-                className="-mr-2"
               />
             </div>
           </div>
@@ -221,7 +220,6 @@ function ProductAccordionItem({
                         size="sm"
                         align="start"
                         ariaLabel="ویرایش قیمت این تنوع"
-                        className="-mr-2"
                       />
                     </div>