fix(pwa): apply top safe-area inset to page headers (iOS notch)

MyLayout only pads the bottom inset globally; each top bar must add its own
top inset. Several inline page headers omitted it, so their content slid
under the notch in the iOS standalone PWA (home was fine — its bar has it).

Wrap the back-button headers the same way ProfilePagesHeader already does
(outer sticky element carries pt-[env(safe-area-inset-top)]; inner relative
bar holds the content) so the absolute back arrow stays out of the notch.
Fixed: /profile hub, /discounts, /collections, /collection/:id, /sellers,
seller store index, and financial transactions.

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

app/routes/collection.$id.tsx

@@ -61,13 +61,15 @@ export default function CollectionDetail() {
     return (
       <div className="flex flex-col min-h-screen bg-WHITE pb-20">
         {/* Header */}
-        <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
+        <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+          <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
             <ArrowRight
               onClick={handleBack}
               className="absolute top-5 right-5 cursor-pointer"
             />
             <p className="text-B16 font-bold">جزئیات کالکشن</p>
           </div>
+        </div>
 
         {/* Loading Skeleton */}
         <div className="flex flex-col gap-4 p-4">
@@ -94,13 +96,15 @@ export default function CollectionDetail() {
     return (
       <div className="flex flex-col min-h-screen bg-WHITE pb-20">
         {/* Header */}
-        <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
+        <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+          <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
             <ArrowRight
               onClick={handleBack}
               className="absolute top-5 right-5 cursor-pointer"
             />
             <p className="text-B16 font-bold">جزئیات کالکشن</p>
           </div>
+        </div>
 
         {/* Error State */}
         <div className="flex flex-col items-center justify-center py-20 px-4">
@@ -130,13 +134,15 @@ export default function CollectionDetail() {
   return (
     <div className="flex flex-col min-h-screen bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
           <ArrowRight
             onClick={handleBack}
             className="absolute top-5 right-5 cursor-pointer"
           />
           <p className="text-B16 font-bold">جزئیات کالکشن</p>
         </div>
+      </div>
 
       {/* Content */}
       <div className="flex flex-col lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8 lg:pt-6">

app/routes/collections.tsx

@@ -118,13 +118,15 @@ export default function Collections() {
   return (
     <div className="flex flex-col bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
           <ArrowRight
             onClick={handleBack}
             className="absolute top-5 right-5 cursor-pointer"
           />
           <p className="text-B16 font-bold">کالکشن‌ها</p>
         </div>
+      </div>
 
       {/* Content */}
       <div className="flex flex-col py-6 lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8">

app/routes/discounts.tsx

@@ -25,13 +25,15 @@ export default function Discounts() {
   return (
     <div className="flex flex-col bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
           <ArrowRight
             onClick={handleBack}
             className="absolute top-5 right-5 cursor-pointer"
           />
           <p className="text-B16 font-bold">تخفیف‌ها</p>
         </div>
+      </div>
 
       {/* Content */}
       <div className="flex flex-col py-6 lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8">

app/routes/profile._index.tsx

@@ -199,7 +199,7 @@ export default function Profile() {
       {/* Mobile: account hub */}
       <div className="flex flex-col gap-0 lg:hidden">
         {/* Header: avatar + name + phone + edit */}
-        <div className="flex items-center gap-3.5 px-4 pt-4 pb-3">
+        <div className="flex items-center gap-3.5 px-4 pt-[calc(1rem_+_env(safe-area-inset-top))] pb-3">
           <CircleUserRound size={56} className="text-GRAY shrink-0" />
           <div className="min-w-0 flex-1">
             <h2 className="text-B16 font-bold truncate">

app/routes/sellers.tsx

@@ -62,13 +62,15 @@ export default function Sellers() {
   return (
     <div className="flex flex-col bg-WHITE pb-20">
       {/* Header (mobile) */}
-      <div className="lg:hidden flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border">
+      <div className="lg:hidden sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border">
           <ArrowRight
             onClick={handleBack}
             className="absolute top-5 right-5 cursor-pointer"
           />
           <p className="text-B16 font-bold">فروشگاه‌ها</p>
         </div>
+      </div>
 
       {/* Content */}
       <div className="flex flex-col py-6 lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8">

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

@@ -558,7 +558,7 @@ function SellerDetailHeader({
   };
 
   return (
-    <div className="flex px-4 w-full justify-between items-center sticky top-0 z-30 bg-WHITE">
+    <div className="flex px-4 w-full justify-between items-center sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)]">
       <ArrowRight size={24} onClick={() => safeGoBack(navigate)} />
       <div className="flex flex-col gap-2 py-4 items-center">
         <SellerLogo src={sellerData?.storeLogo} alt="Seller Logo" />

app/routes/store.$storeId.financial-dashboard.transactions.tsx

@@ -136,7 +136,8 @@ export default function Transactions() {
   return (
     <div className="bg-WHITE lg:max-w-[900px] lg:mx-auto lg:w-full lg:pt-6">
       {/* Header (keeps the filter button; just constrained on desktop) */}
-      <div className="flex flex-row h-[65px] sticky top-0 z-30 bg-WHITE w-full items-center justify-center border-b border-inner-border lg:static lg:justify-start lg:gap-3">
+      <div className="sticky top-0 z-30 bg-WHITE pt-[env(safe-area-inset-top)] lg:static lg:pt-0">
+        <div className="relative flex flex-row h-[65px] w-full items-center justify-center border-b border-inner-border lg:justify-start lg:gap-3">
           <ArrowRight onClick={handleBack} className="absolute top-5 right-5 lg:hidden" />
           <p className={"text-B16 lg:text-[28px] font-bold lg:font-extrabold"}>لیست تراکنش‌ها</p>
           <div
@@ -159,6 +160,7 @@ export default function Transactions() {
             />
           </div>
         </div>
+      </div>
       <div className="flex flex-col w-full">
         {isLoading ? (
           <div className="flex items-center justify-center py-8">