Plethora of changes

web/app/ai-chat/page.js

@@ -595,12 +595,12 @@ function AiChatPage() {
                   </div>
                   <div style={{ display: "flex", gap: "0.5rem", width: isMobile ? "100%" : undefined }}>
                     {!isEscalated && !isClosed && (
-                      <button style={{ ...s.humanBtn, flex: isMobile ? 1 : undefined, fontSize: isMobile ? "0.75rem" : undefined, padding: isMobile ? "0.4rem 0.6rem" : undefined }} onClick={handleSwitchToHuman} title="Connect with a human support agent">
+                      <button style={isMobile ? { ...s.humanBtn, flex: 1 } : s.humanBtn} onClick={handleSwitchToHuman} title="Connect with a human support agent">
                         Chat with a Real Person
                       </button>
                     )}
                     {!isClosed && (
-                      <button style={{ ...s.closeConvBtn, flex: isMobile ? 1 : undefined, fontSize: isMobile ? "0.75rem" : undefined, padding: isMobile ? "0.4rem 0.6rem" : undefined }} onClick={handleCloseConversation} title="Close this conversation">
+                      <button style={isMobile ? { ...s.closeConvBtn, flex: 1 } : s.closeConvBtn} onClick={handleCloseConversation} title="Close this conversation">
                         Close Chat
                       </button>
                     )}
@@ -961,8 +961,8 @@ const s = {
     border: "2px solid #ff8c00",
     color: "#ff8c00",
     borderRadius: 8,
-    padding: "0.45rem 0.9rem",
-    fontSize: "0.82rem",
+    padding: "0.3rem 0.65rem",
+    fontSize: "0.72rem",
     fontWeight: 600,
     cursor: "pointer",
     whiteSpace: "nowrap",
@@ -1005,8 +1005,8 @@ const s = {
     border: "2px solid #c0392b",
     color: "#c0392b",
     borderRadius: 8,
-    padding: "0.45rem 0.9rem",
-    fontSize: "0.82rem",
+    padding: "0.3rem 0.65rem",
+    fontSize: "0.72rem",
     fontWeight: 600,
     cursor: "pointer",
     whiteSpace: "nowrap",

web/app/page.js

@@ -66,11 +66,11 @@ export default function Home() {
         </div>
         <div className="max-w-[1200px] mx-auto px-8 pb-6 grid grid-cols-3 gap-6 max-[768px]:grid-cols-1">
           <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
-            <h3 className="mt-0 mb-4 text-[#222]">What We Do</h3>
+            <h3 className="mt-0 mb-4 text-[#222] underline decoration-[#e68672] underline-offset-4 text-[1.3rem] font-bold">What We Do</h3>
             <p>Leon&apos;s Pet Store is a full-service pet shop offering adoptions, grooming, veterinary appointments, and a wide range of supplies to keep your pets happy and healthy.</p>
           </div>
           <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
-            <h3 className="mt-0 mb-4 text-[#222]">Our Focus</h3>
+            <h3 className="mt-0 mb-4 text-[#222] underline decoration-[#e68672] underline-offset-4 text-[1.3rem] font-bold">Our Focus</h3>
             <ul className="m-0 pl-5 grid gap-2 list-disc">
               <li>Support responsible pet adoption</li>
               <li>Provide grooming and care services</li>
@@ -79,7 +79,7 @@ export default function Home() {
             </ul>
           </div>
           <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
-            <h3 className="mt-0 mb-4 text-[#222]">Visit the Store</h3>
+            <h3 className="mt-0 mb-4 text-[#222] underline decoration-[#e68672] underline-offset-4 text-[1.3rem] font-bold">Visit the Store</h3>
             <p>Come visit us in person or explore our services online. Whether you&apos;re a first-time pet owner or a seasoned animal lover, we&apos;re here to help every step of the way.</p>
           </div>
         </div>

web/app/profile/page.js

@@ -444,7 +444,7 @@ export default function ProfilePage() {
           {fields.map(({ label, value }) => (
             <div key={label} className="flex gap-2 py-1">
               <dt className="text-[0.85rem] font-semibold text-[#888] min-w-[100px]">{label}</dt>
-              <dd className="text-[0.9rem] text-[#333] m-0">{value}</dd>
+              <dd className="text-[0.9rem] text-[#333] m-0 break-words min-w-0">{value}</dd>
             </div>
           ))}
         </dl>
@@ -552,7 +552,7 @@ export default function ProfilePage() {
                 </select>
               </label>
               <div className="flex gap-3">
-                <button type="submit" className={submitBtnCls} disabled={submitting}>
+                <button type="submit" className={`${submitBtnCls} px-5 py-2 text-[0.9rem]`} disabled={submitting}>
                   {submitting ? "Saving..." : editingPet ? "Save Changes" : "Add Pet"}
                 </button>
                 <button type="button" className="px-4 py-2 border border-[#ddd] rounded-lg bg-white text-[#555] text-[0.9rem] cursor-pointer hover:border-[#aaa] transition-colors" onClick={closeForm}>

web/components/Navigation.js

@@ -59,7 +59,7 @@ export default function DisplayNav() {
   return (
     <nav className="fixed top-0 left-0 w-full bg-[#e68672] shadow-[0_2px_10px_rgba(0,0,0,0.1)] z-[1000] px-8 py-2 grid [grid-template-columns:1fr_auto_1fr] items-center min-h-[70px] max-[1100px]:px-4">
       <Link href="/" onClick={closeMenu}>
-        <Image className="mx-3" src="/logo_simple.png" alt="store_logo" width={50} height={50} id="logo" loading="eager" />
+        <Image className="mx-3" src="/logo.png" alt="store_logo" width={50} height={50} id="logo" loading="eager" />
       </Link>
 
       {/* Desktop nav links */}

web/components/ProductProfile.js

@@ -97,11 +97,13 @@ export default function ProductProfile({ prodId, prodName, categoryName, prodDes
                 {adding ? "Adding…" : "Add to Cart"}
               </button>
 
-              {feedback && (
-                <p className={`mt-3 text-[0.9rem] rounded-lg px-4 py-[0.6rem] ${feedback.type === "success" ? "bg-[#f0fff4] border border-[#b2dfdb] text-[#1a7a3c]" : "bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b]"}`}>
-                  {feedback.message}
-                </p>
-              )}
+              <div className="mt-3 h-[44px] overflow-hidden">
+                {feedback && (
+                  <p className={`text-[0.9rem] rounded-lg px-4 py-[0.6rem] m-0 ${feedback.type === "success" ? "bg-[#f0fff4] border border-[#b2dfdb] text-[#1a7a3c]" : "bg-[#fff0f0] border border-[#f5c6c6] text-[#c0392b]"}`}>
+                    {feedback.message}
+                  </p>
+                )}
+              </div>
             </>
           )}
         </div>