tuanphan

Add to Design > Custom CSS
/* hide lemon on mobile */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1688813554529_8064 { visibility: hidden; } }  

Change your first code, from this
.gallery-caption { position: absolute; top: 0; left: 0; background: rgba(32,28,105,0.9); /* overlay color */ height: 100%; padding: 0; opacity: 0; } to this
.gallery-caption { position: absolute; top: 0; left: 0; background: rgba(32,28,105,0.9); /* overlay color */ height: 100%; padding: 0; opacity: 0; pointer-events: none; } (I added pointer-events: none;)

You can add this to Design > Custom CSS
/* center related products heading */ h2.ProductItem-related-label { text-align: center; }  

You can add this to Design > Custom CSS
/* p1 */ p.sqsrte-large { line-height: 30px !important; } /* p3 */ p.sqsrte-small { line-height: 29px !important; }  

You can use this CSS
nav>ul>li:last-child>a { background-color: black; color: white !important; padding: 10px 20px; } nav.main-nav>ul { display: flex; align-items: center; }

Add to Design > Custom CSS
/* Resize Mobile Image */ @media screen and (max-width:767px) { [data-section-id="621e759c2bfe171a388715e4"] { min-height: unset !important; height: 40vh; } [data-section-id="621e759c2bfe171a388715e4"] * { font-size: 28px; } }  

You can add this to Design > Custom CSS
body.homepage .desc-wrapper p:not(:last-child) *, body.homepage .desc-wrapper p { color: black !important; }

You can add this to Design > Custom CSS to fix problem
/* Mobile header button hover */ a.theme-btn--primary.btn:hover { color: white !important; }  

You can use this CSS code
div.header-nav-item a:after { display: none; }  

Sent the code. You can check

Add this code under
<style> /* Hide join here orange button */ @media screen and (min-width:641px) { div#block-yui_3_17_2_1_1590057489722_4915 { display: none; } } /* hide mobile donate button */ nav.Mobile-overlay-nav.Mobile-overlay-nav--secondary { display: none; } </style>  

I just tried adding this code & credit code still works & you still able to edit image. You try checking again.
(I keep code at bottom of Code Injection)

You have incorrect code. And you need to add it to About Page Header, Not Custom CSS
<style> header#header img { content: url("https://static1.squarespace.com/static/616448878db4ba5c32bc74c2/t/63e101ed9e6cd3537d676158/1675690477827/Z_Mark_Logo_v3.png"); } </style>  

try change 
position: FIXED;
to
position: absolute;

Add this code to Design > Custom CSS. You can replace whatsapp icon in the code with new url (because we can't use code to change its color, so if you need to change to blue, you can send new icon, I will give new code)
/* Whatsapp */ header#header [href*="whatsapp"] { background-image: url(https://i.ibb.co/xKZkYDB/whatsapp-icon.png); background-position: center center; background-size: contain; background-repeat: no-repeat; } header#header [href*="whatsapp"] svg { display: none; }  

You can add this to Design > Custom CSS
/* Mobile 2 columns */ @media screen and (max-width:640px) { section#les-archives-index .span-4 { width: 50% !important; float: left !important; } }  

Don't remove any code in your current code
Add to Design > Custom CSS
body:not(.homepage).header--menu-open div.header-title-logo a { content: unset !important; }  

To reduce height, add this to Design > Custom CSS
/* Our Clients slideshow */ @media screen and (min-width:768px) { [data-section-id="649bfda737074c7c04a8a2af"] .gallery-reel { height: 10vh !important; } }  

Add to Design > Custom CSS
ul.portfolio-hover-items-list { padding-bottom: 0px !important; padding-left: 0 !important; padding-right: 0px !important; justify-content: space-between !important; width: 100% !important; } .portfolio-hover-display { padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; }  

You have invalid url. You try checking it again

Add to Design > Custom CSS
/* align boxes */ .user-items-list-item-container[data-section-id="649f4fd006d44556b81210e1"] { @media screen and (min-width:1275px) { li { background-color: #253551; } .list-item-content__description { min-height: 190px; } } @media screen and (max-width:1274px) and (min-width:768px) { h2 { min-height: 80px; } .list-item-content__description { min-height: 220px; } a.list-item-content__button { min-height: 80px; display: flex; align-items:center; justify-content: center; }}}  

Add to Design > Custom CSS
.yui3-lightbox2 .sqs-lightbox-meta { opacity: 1 !important; background-color: transparent !important; padding: 0px !important; } .sqs-lightbox-slideshow .sqs-gallery-design-stacked-slide img { top: -30px !important; } .yui3-lightbox2 .sqs-lightbox-meta * { color: black !important; }  

See this video to know how to edit Header button size & color
 

Use this code for mobile
.header-display-mobile .header-title-nav-wrapper:before { content: "25% Off Your First Clean--Use Code NEW25 at Checkout"; display: inline-block; font-size: 20px; color: pink; position: absolute; top: 0; text-align: center; background-color: rgba(255,172,172,.2); }  

Yes, just repeat the code & change to 2, 3, 4...
Slower, I guess not possible, but you try this code
div#block-yui_3_17_2_1_1688340999924_3167 .slide:hover img, div#block-yui_3_17_2_1_1688340999924_3167 img { transition: all ease-in-out 0.3s !important; }