4.2.1 final fixes

src/lib/components/TestimonialsSection.svelte

@@ -127,10 +127,6 @@
     <h2 class="section-heading">{heading}</h2>
     <div class="testimonials-intro">
       <p>{blurb}</p>
-      <a href={instagramHref} target="_blank" rel="noopener" class="testimonials-instagram-link">
-        <Icon name="fab fa-instagram" />
-        <span>{instagramLabel}</span>
-      </a>
     </div>
 
     {#if slides.length}
@@ -190,13 +186,39 @@
 
                 <div class="testimonial-divider"></div>
 
+                <div class="testimonial-mobile-controls" aria-label="Testimonial navigation">
+                  <button
+                    class="testimonial-arrow testimonial-arrow-inline"
+                    type="button"
+                    aria-label="Previous testimonial"
+                    on:click={showPrevious}
+                  >
+                    <Icon name="fas fa-chevron-left" />
+                  </button>
+
+                  <button
+                    class="testimonial-arrow testimonial-arrow-inline"
+                    type="button"
+                    aria-label="Next testimonial"
+                    on:click={showNext}
+                  >
+                    <Icon name="fas fa-chevron-right" />
+                  </button>
+                </div>
+
                 <a
                   class="testimonial-google"
                   href="https://g.page/r/CUsvrWPhkYrAEB0/"
                   target="_blank"
                   rel="noopener"
                 >
-                  <Icon name="fab fa-google" />
+                  <img
+                    class="testimonial-google-logo"
+                    src="/images/google-g-logo.svg"
+                    alt=""
+                    width="18"
+                    height="19"
+                  />
                   <span>30+ five-star Google reviews</span>
                 </a>
               </div>
@@ -214,6 +236,11 @@
         </button>
       </div>
     {/if}
+
+    <a href={instagramHref} target="_blank" rel="noopener" class="testimonials-instagram-link">
+      <Icon name="fab fa-instagram" />
+      <span>{instagramLabel}</span>
+    </a>
   </div>
 </section>
 
@@ -232,10 +259,11 @@
   }
 
   .testimonials-instagram-link {
-    display: inline-flex;
+    display: flex;
+    width: fit-content;
     align-items: center;
     gap: 10px;
-    margin-top: 18px;
+    margin: 18px auto 0;
     padding: 10px 16px;
     border-radius: 999px;
     background: rgba(33, 48, 33, 0.06);
@@ -283,7 +311,7 @@
     }
 
     .testimonials-instagram-link {
-      margin-top: 14px;
+      margin: 14px auto 0;
       padding: 9px 14px;
       font-size: 15px;
     }
@@ -443,14 +471,20 @@
     box-shadow: 0 0 0 1px rgba(10, 48, 78, 0.06);
   }
 
-  .testimonial-google :global(.icon) {
-    font-size: 20px;
+  .testimonial-google-logo {
+    width: 18px;
+    height: 19px;
+    flex: 0 0 auto;
   }
 
   .testimonial-google:hover {
     background: #efe6d5;
   }
 
+  .testimonial-mobile-controls {
+    display: none;
+  }
+
   .testimonial-woof {
     position: absolute;
     top: 40px;
@@ -559,7 +593,7 @@
 
     .testimonial-stage {
       min-height: unset;
-      padding-bottom: 116px;
+      padding-bottom: 0;
     }
 
     .testimonial-slide {
@@ -605,8 +639,24 @@
       margin-top: 28px;
     }
 
+    .testimonial-mobile-controls {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .testimonial-arrow-inline {
+      position: static;
+      width: 48px;
+      height: 48px;
+      font-size: 18px;
+      transform: none;
+      box-shadow: 0 10px 22px rgba(20, 24, 20, 0.08);
+    }
+
     .testimonial-google {
-      margin-top: 28px;
+      margin-top: 20px;
       font-size: 16px;
       gap: 10px;
       padding: 10px 14px;
@@ -649,21 +699,9 @@
       height: 8px;
     }
 
-    .testimonial-arrow {
-      top: auto;
-      bottom: 24px;
-      width: 54px;
-      height: 54px;
-      font-size: 20px;
-      transform: none;
-    }
-
-    .testimonial-arrow-left {
-      left: 20px;
-    }
-
+    .testimonial-arrow-left,
     .testimonial-arrow-right {
-      right: 20px;
+      display: none;
     }
   }
 </style>