diff --git a/assets/base.css b/assets/base.css
index 91012cce3..354234c7b 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -78,6 +78,7 @@ select {
 /* Editorial layout */
 .resource-list:not(.hidden--desktop) .collection-card--flexible-aspect-ratio,
 .resource-list:not(.hidden--desktop) .blog-post-card--flexible-aspect-ratio {
+
   .collection-card__image,
   .featured-blog-posts-card__image,
   .blog-placeholder-svg {
@@ -168,6 +169,7 @@ select {
 }
 
 @media (any-pointer: fine) and (prefers-reduced-motion: no-preference) {
+
   .card-hover-effect-lift .product-card:hover,
   .card-hover-effect-lift .collection-card:hover,
   .card-hover-effect-lift .resource-card:hover,
@@ -277,7 +279,7 @@ p:empty {
 }
 
 :first-child:is(p, h1, h2, h3, h4, h5, h6),
-:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
+:first-child:empty+ :where(p, h1, h2, h3, h4, h5, h6) {
   margin-block-start: 0;
 }
 
@@ -389,6 +391,7 @@ p:empty {
 }
 
 @media screen and (min-width: 750px) {
+
   .page-width-wide,
   .page-width-normal,
   .page-width-narrow,
@@ -425,19 +428,14 @@ p:empty {
    full-width background image even if the section content is constrained by the page width. Do not try
    to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
 .section {
-  --full-page-grid-central-column-width: min(
-    var(--page-width) - var(--page-margin) * 2,
-    calc(100% - var(--page-margin) * 2)
-  );
+  --full-page-grid-central-column-width: min(var(--page-width) - var(--page-margin) * 2,
+      calc(100% - var(--page-margin) * 2));
   --full-page-grid-margin: minmax(var(--page-margin), 1fr);
-  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
-    var(--full-page-grid-margin);
+  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width) var(--full-page-grid-margin);
 
   /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
-  --util-page-margin-offset: max(
-    var(--page-margin),
-    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
-  );
+  --util-page-margin-offset: max(var(--page-margin),
+      calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2));
 
   /* Offset for full-width sections to account for the page margin,
   used for Marquee — note that --util-page-margin-offset doesn't work here */
@@ -455,7 +453,7 @@ p:empty {
 }
 
 /* Place all direct children in the center column by default */
-.section > * {
+.section>* {
   grid-column: 2;
 }
 
@@ -476,28 +474,28 @@ p:empty {
 }
 
 /* For page-width sections, all content goes in the center column */
-.section--page-width > * {
+.section--page-width>* {
   grid-column: 2;
 }
 
 /* For full-width sections, content spans all columns */
-.section--full-width > * {
+.section--full-width>* {
   grid-column: 1 / -1;
 }
 
 @media screen and (max-width: 749px) {
-  .section--mobile-full-width > * {
+  .section--mobile-full-width>* {
     grid-column: 1 / -1;
   }
 }
 
 /* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
-.section--page-width.section--full-width-right > * {
+.section--page-width.section--full-width-right>* {
   grid-column: 2 / 4;
 }
 
 /* For full-width sections with margin, content still spans full width but with space on the sides */
-.section--full-width.section--full-width-margin > * {
+.section--full-width.section--full-width-margin>* {
   grid-column: 1 / -1;
 
   @media screen and (min-width: 750px) {
@@ -507,7 +505,7 @@ p:empty {
 }
 
 /* Some section content break out to full width of the page */
-.section > .force-full-width {
+.section>.force-full-width {
   grid-column: 1 / -1;
 }
 
@@ -542,6 +540,7 @@ p:empty {
 }
 
 @media screen and (max-width: 749px) {
+
   .hidden--mobile,
   .mobile\:hidden {
     /* stylelint-disable-next-line declaration-no-important */
@@ -550,6 +549,7 @@ p:empty {
 }
 
 @media screen and (min-width: 750px) {
+
   .hidden--desktop,
   .desktop\:hidden {
     /* stylelint-disable-next-line declaration-no-important */
@@ -623,11 +623,8 @@ p:empty {
 @media screen and (min-width: 1400px) {
   .grid {
     grid-template-columns:
-      1fr repeat(
-        var(--centered-column-number),
-        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
-      )
-      1fr;
+      1fr repeat(var(--centered-column-number),
+        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr;
   }
 }
 
@@ -733,7 +730,7 @@ p:empty {
   height: var(--icon-size-xs);
 }
 
-.svg-wrapper > svg {
+.svg-wrapper>svg {
   width: var(--icon-size-sm);
   height: var(--icon-size-sm);
 }
@@ -773,7 +770,7 @@ slideshow-component [data-placeholder='true'] * {
 /* Base text and heading styles */
 body,
 .paragraph:not(.button),
-.paragraph > *,
+.paragraph>*,
 .text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-paragraph--family);
   font-style: var(--font-paragraph--style);
@@ -787,6 +784,7 @@ body,
 
 /* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
 @media screen and (max-width: 1200px) {
+
   input.paragraph.paragraph,
   input.paragraph.paragraph:not([type]),
   textarea.paragraph.paragraph,
@@ -795,7 +793,7 @@ body,
   }
 }
 
-.paragraph > small {
+.paragraph>small {
   font-size: smaller;
 }
 
@@ -803,7 +801,7 @@ body,
 
 h1,
 .h1.h1,
-.text-block.h1 > *,
+.text-block.h1>*,
 .text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-h1--family);
   font-style: var(--font-h1--style);
@@ -816,6 +814,7 @@ h1,
 }
 
 @media screen and (max-width: 1200px) {
+
   input.h1.h1,
   textarea.h1.h1,
   select.h1.h1 {
@@ -825,7 +824,7 @@ h1,
 
 h2,
 .h2.h2,
-.text-block.h2 > *,
+.text-block.h2>*,
 .text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-h2--family);
   font-style: var(--font-h2--style);
@@ -838,6 +837,7 @@ h2,
 }
 
 @media screen and (max-width: 1200px) {
+
   input.h2.h2,
   textarea.h2.h2,
   select.h2.h2 {
@@ -848,7 +848,7 @@ h2,
 h3,
 .h3,
 .h3.h3,
-.text-block.h3 > *,
+.text-block.h3>*,
 .text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-h3--family);
   font-style: var(--font-h3--style);
@@ -861,6 +861,7 @@ h3,
 }
 
 @media screen and (max-width: 1200px) {
+
   input.h3,
   textarea.h3,
   select.h3 {
@@ -870,7 +871,7 @@ h3,
 
 h4,
 .h4.h4,
-.text-block.h4 > *,
+.text-block.h4>*,
 .text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-h4--family);
   font-style: var(--font-h4--style);
@@ -883,6 +884,7 @@ h4,
 }
 
 @media screen and (max-width: 1200px) {
+
   input.h4.h4,
   textarea.h4.h4,
   select.h4.h4 {
@@ -892,7 +894,7 @@ h4,
 
 h5,
 .h5.h5,
-.text-block.h5 > *,
+.text-block.h5>*,
 .text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-h5--family);
   font-style: var(--font-h5--style);
@@ -905,6 +907,7 @@ h5,
 }
 
 @media screen and (max-width: 1200px) {
+
   input.h5.h5,
   textarea.h5.h5,
   select.h5.h5 {
@@ -914,7 +917,7 @@ h5,
 
 h6,
 .h6.h6,
-.text-block.h6 > *,
+.text-block.h6>*,
 .text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
   font-family: var(--font-h6--family);
   font-style: var(--font-h6--style);
@@ -927,6 +930,7 @@ h6,
 }
 
 @media screen and (max-width: 1200px) {
+
   input.h6.h6,
   textarea.h6.h6,
   select.h6.h6 {
@@ -954,7 +958,7 @@ a {
     color var(--animation-speed) var(--animation-easing);
 }
 
-:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
+:is(h1, h2, h3, h4, h5, h6, p)>a:hover {
   --button-color: var(--color, var(--color-primary-hover));
 }
 
@@ -983,7 +987,7 @@ details:not([open]) .summary-open {
   display: none;
 }
 
-details[open] > summary .icon-animated > svg {
+details[open]>summary .icon-animated>svg {
   transform: rotate(180deg);
 }
 
@@ -993,17 +997,17 @@ summary::-webkit-details-marker {
 }
 
 /* When header is transparent, pull the first main content section up to sit under the floating header */
-body:has(.header[transparent]) .content-for-layout > .shopify-section:first-child {
+body:has(.header[transparent]) .content-for-layout>.shopify-section:first-child {
   margin-top: calc(var(--header-group-height) * -1);
 }
 
-body:has(.header[transparent]) #header-group > .header-section {
+body:has(.header[transparent]) #header-group>.header-section {
   z-index: var(--layer-sticky);
 }
 
 /* All other header group content should be beneath the floating header,
 but above the rest of the page content */
-body:has(.header[transparent]) #header-group > *:not(.header-section) {
+body:has(.header[transparent]) #header-group>*:not(.header-section) {
   z-index: calc(var(--layer-sticky) - 1);
 }
 
@@ -1085,13 +1089,13 @@ body:has(.header[transparent]) #header-group > *:not(.header-section) {
   }
 }
 
-.product-grid__card .group-block > * {
+.product-grid__card .group-block>* {
   @media screen and (max-width: 749px) {
     flex-direction: column;
   }
 }
 
-ul[product-grid-view='zoom-out'] .product-grid__card > * {
+ul[product-grid-view='zoom-out'] .product-grid__card>* {
   display: none;
 }
 
@@ -1099,21 +1103,17 @@ ul[product-grid-view='zoom-out'] .product-grid__card .card-gallery {
   display: block;
 }
 
-[product-grid-view='zoom-out']
-  .card-gallery
-  > :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
+[product-grid-view='zoom-out'] .card-gallery> :is(quick-add-component, .product-badges, slideshow-component > slideshow-controls) {
   display: none;
 }
 
-ul[product-grid-view='zoom-out'] .card-gallery > img {
+ul[product-grid-view='zoom-out'] .card-gallery>img {
   display: block;
 }
 
 [product-grid-view='zoom-out'] {
-  --product-grid-columns-desktop: repeat(
-    10,
-    minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr)
-  );
+  --product-grid-columns-desktop: repeat(10,
+      minmax(clamp(50px, calc(100% - 9 * var(--product-grid-gap)) / 10, 80px), 1fr));
 }
 
 .product-grid-view-zoom-out--details {
@@ -1136,15 +1136,15 @@ ul[product-grid-view='zoom-out'] .card-gallery > img {
   font-weight: 400;
 }
 
-.product-grid-view-zoom-out--details > span.h6,
-.product-grid-view-zoom-out--details > div.h6 > product-price {
+.product-grid-view-zoom-out--details>span.h6,
+.product-grid-view-zoom-out--details>div.h6>product-price {
   display: inline-block;
   line-height: 0;
   margin-top: var(--margin-2xs);
 }
 
-.product-grid-view-zoom-out--details > span.h6 > *,
-.product-grid-view-zoom-out--details > div.h6 > * > * {
+.product-grid-view-zoom-out--details>span.h6>*,
+.product-grid-view-zoom-out--details>div.h6>*>* {
   line-height: 1.2;
 }
 
@@ -1242,18 +1242,18 @@ results-list[initialized] {
   width: 100%;
 }
 
-.text-block > *:first-child,
-.text-block > *:first-child:empty + * {
+.text-block>*:first-child,
+.text-block>*:first-child:empty+* {
   margin-block-start: 0;
 }
 
-.text-block > *:last-child,
-.text-block > *:has(+ *:last-child:empty) {
+.text-block>*:last-child,
+.text-block>*:has(+ *:last-child:empty) {
   margin-block-end: 0;
 }
 
 /* This is to deal with the margin applied to the p when custom styles are enabled. The p isn't the first child anymore due to the style tag */
-.text-block > style + * {
+.text-block>style+* {
   margin-block-start: 0;
 }
 
@@ -1309,6 +1309,7 @@ results-list[initialized] {
   --dialog-drawer-opening-animation: move-and-fade;
   --dialog-drawer-closing-animation: move-and-fade;
 }
+
 /* stylelint-enable value-keyword-case */
 
 .dialog-drawer[open] {
@@ -1524,8 +1525,7 @@ shopify-accelerated-checkout-cart {
   --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
 }
 
-.product-form-buttons:has(.add-to-cart-button.button-secondary)
-  :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
+.product-form-buttons:has(.add-to-cart-button.button-secondary) :is(shopify-accelerated-checkout, shopify-accelerated-checkout-cart) {
   --shopify-accelerated-checkout-button-border-radius: var(--style-border-radius-buttons-secondary);
   --shopify-accelerated-checkout-button-block-size: var(--height-buy-buttons);
 }
@@ -1572,14 +1572,14 @@ summary .icon-plus :is(.horizontal, .vertical),
   opacity: 1;
 }
 
-details[open] > summary .icon-plus .horizontal,
-.details-open > summary .icon-plus .horizontal,
+details[open]>summary .icon-plus .horizontal,
+.details-open>summary .icon-plus .horizontal,
 .show-more:where([data-expanded='true']) .show-more__button .icon-plus .horizontal {
   transform: rotate(90deg);
 }
 
-details[open] > summary .icon-plus .vertical,
-.details-open > summary .icon-plus .vertical,
+details[open]>summary .icon-plus .vertical,
+.details-open>summary .icon-plus .vertical,
 .show-more:where([data-expanded='true']) .show-more__button .icon-plus .vertical {
   transform: rotate(90deg);
   opacity: 0;
@@ -1604,7 +1604,7 @@ media-gallery {
   }
 }
 
-:not(.dialog-zoomed-gallery) > .product-media-container {
+:not(.dialog-zoomed-gallery)>.product-media-container {
   --slide-width: 100%;
 
   display: flex;
@@ -1905,7 +1905,7 @@ zoom-dialog dialog {
 }
 
 /* If the product media is already providing an image cover, hide images provided by sibling deferred-media */
-.product-media__image ~ * .deferred-media__poster-image {
+.product-media__image~* .deferred-media__poster-image {
   display: none;
 }
 
@@ -1926,7 +1926,7 @@ zoom-dialog dialog {
 product-model model-viewer,
 /* Media that have a poster button sibling providing the size should be absolute-positioned.
 Otherwise, it should be a block to rely on its own size */
-:is(deferred-media, product-model) > .deferred-media__poster-button ~ *:not(template) {
+:is(deferred-media, product-model)>.deferred-media__poster-button~*:not(template) {
   display: block;
   position: absolute;
   top: 0;
@@ -1951,16 +1951,14 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_
 }
 
 @media screen and (max-width: 749px) {
-  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
-    .shopify-model-viewer-ui__controls-area {
+  slideshow-component:has(:not(.mobile\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area {
     /* Position the controls just above the counter */
     bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
   }
 }
 
 @media screen and (min-width: 750px) {
-  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter))
-    .shopify-model-viewer-ui__controls-area {
+  slideshow-component:has(:not(.desktop\:hidden) :is(.slideshow-controls__dots, .slideshow-controls__counter)) .shopify-model-viewer-ui__controls-area {
     /* Position the controls just above the counter */
     bottom: calc(var(--minimum-touch-target) + var(--padding-sm));
   }
@@ -1980,6 +1978,7 @@ slideshow-slide .shopify-model-viewer-ui__controls-area.shopify-model-viewer-ui_
 }
 
 deferred-media {
+
   /* The overflow hidden in the deferred-media won't let the button show the focus ring */
   &:has(:focus-visible) {
     outline: var(--focus-outline-width) solid currentcolor;
@@ -2067,7 +2066,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
   padding: var(--padding-md);
 }
 
-.button-shopify-xr > svg {
+.button-shopify-xr>svg {
   width: var(--icon-size-sm);
   height: var(--icon-size-sm);
   margin-inline-end: var(--margin-md);
@@ -2080,8 +2079,10 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
 /* Swatches */
 .swatch {
   --color-border: rgb(var(--color-foreground-rgb) / var(--style-border-swatch-opacity));
-  --min-width-unitless: 15.9999; /* want to avoid division by 0 */
-  --min-height-unitless: 15.9999; /* want to avoid division by 0 */
+  --min-width-unitless: 15.9999;
+  /* want to avoid division by 0 */
+  --min-height-unitless: 15.9999;
+  /* want to avoid division by 0 */
   --min-height: 16px;
   --min-width: 16px;
 
@@ -2110,27 +2111,19 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
     We also want the result to always be smaller than the input (pdp > everywhere else)
     by some scaling factor.
   */
-  --offset-scaled-width: calc(
-    var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size)
-  );
-  --offset-scaled-height: calc(
-    var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size)
-  );
+  --offset-scaled-width: calc(var(--scaling-factor) * var(--offset-swatch-width) / var(--offset-swatch-height) * var(--offset-max-swatch-size));
+  --offset-scaled-height: calc(var(--scaling-factor) * var(--offset-swatch-height) / var(--offset-swatch-width) * var(--offset-max-swatch-size));
   --offset-max-swatch-size: calc(var(--max-swatch-size) - var(--min-width));
 
   /* width = min(m + sU, (m + s * W'/H' * M'), M) */
-  --swatch-width: min(
-    calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
-    calc(var(--min-width) + var(--offset-scaled-width)),
-    var(--max-swatch-size)
-  );
+  --swatch-width: min(calc(var(--min-width) + var(--scaling-factor) * var(--offset-swatch-width) * 1px),
+      calc(var(--min-width) + var(--offset-scaled-width)),
+      var(--max-swatch-size));
 
   /* height = min(m + sV, (m + s * H'/W' * M'), M) */
-  --swatch-height: min(
-    calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
-    calc(var(--min-height) + var(--offset-scaled-height)),
-    var(--max-swatch-size)
-  );
+  --swatch-height: min(calc(var(--min-height) + var(--scaling-factor) * var(--offset-swatch-height) * 1px),
+      calc(var(--min-height) + var(--offset-scaled-height)),
+      var(--max-swatch-size));
 
   display: block;
   background: var(--swatch-background);
@@ -2201,7 +2194,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
   --variant-option-padding-inline: var(--padding-md);
 }
 
-.variant-option + .variant-option {
+.variant-option+.variant-option {
   margin-top: var(--padding-lg);
 }
 
@@ -2216,7 +2209,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
   }
 }
 
-.variant-option--swatches > overflow-list {
+.variant-option--swatches>overflow-list {
   justify-content: var(--product-swatches-alignment);
 
   @media screen and (max-width: 749px) {
@@ -2244,12 +2237,12 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
 }
 
 @media (prefers-reduced-motion: no-preference) {
+
   .variant-option__button-label,
   .variant-option__select-wrapper,
   .variant-option__button-label::before,
   .variant-option__button-label::after,
-  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
-    .variant-option__button-label__pill,
+  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill,
   .variant-option__button-label:not(.variant-option__button-label--has-swatch) svg line:last-of-type {
     transition-duration: var(--animation-speed);
     transition-timing-function: var(--animation-easing);
@@ -2263,8 +2256,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
     transition-property: clip-path;
   }
 
-  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true'])
-    .variant-option__button-label__pill {
+  .variant-option__button-label:has([data-previous-checked='true'], [data-current-checked='true']) .variant-option__button-label__pill {
     transition-property: transform;
   }
 
@@ -2357,8 +2349,8 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
     }
   }
 
-  &:has([data-previous-checked='true']) ~ label:has([data-current-checked='true']),
-  &:has(:checked) ~ label {
+  &:has([data-previous-checked='true'])~label:has([data-current-checked='true']),
+  &:has(:checked)~label {
     .variant-option__button-label__pill {
       left: 0;
       right: unset;
@@ -2369,20 +2361,17 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
     --pill-offset: calc(100% + 1px);
   }
 
-  &:has(:checked) ~ label {
+  &:has(:checked)~label {
     --pill-offset: calc(-100% - 1px);
   }
 
-  &:has([data-current-checked='true']):first-of-type
-    ~ label:last-of-type:not(.variant-option__button-label--has-swatch),
+  &:has([data-current-checked='true']):first-of-type~label:last-of-type:not(.variant-option__button-label--has-swatch),
   &:not(:has(:checked)):has(~ label > :checked):not(.variant-option__button-label--has-swatch) {
     --clip: 0 0 0 100%;
   }
 
-  &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(
-      .variant-option__button-label--has-swatch
-    ),
-  &:has(:checked) ~ label:not(.variant-option__button-label--has-swatch) {
+  &:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked):not(.variant-option__button-label--has-swatch),
+  &:has(:checked)~label:not(.variant-option__button-label--has-swatch) {
     --clip: 0 100% 0 0;
   }
 
@@ -2399,13 +2388,11 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
 
 /* the more complex selector rules here produce the wrap around effect for first/last variants */
 .variant-option--buttons:has(:nth-of-type(3)) {
-  .variant-option__button-label:has([data-current-checked='true']):first-of-type ~ label:last-of-type {
+  .variant-option__button-label:has([data-current-checked='true']):first-of-type~label:last-of-type {
     --pill-offset: calc(100% + 1px);
   }
 
-  .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(
-      ~ label:last-of-type > :checked
-    ) {
+  .variant-option__button-label:not(:has([data-current-checked='true'])):first-of-type:has(~ label:last-of-type > :checked) {
     --pill-offset: calc(-100% - 1px);
   }
 }
@@ -2498,6 +2485,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
 
 /* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */
 @supports not (background-color: rgb(from red 150 g b / alpha)) {
+
   /** There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround. **/
   .variant-option__button-label--has-swatch:has(:checked),
   .variant-option__button-label:has(:focus-visible) .swatch {
@@ -2578,8 +2566,9 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
 }
 
 @media screen and (min-width: 750px) {
+
   .sticky-content--desktop,
-  .sticky-content--desktop.full-height--desktop > .group-block {
+  .sticky-content--desktop.full-height--desktop>.group-block {
     position: sticky;
     top: var(--sticky-header-offset, 0);
     z-index: var(--layer-flat);
@@ -2604,7 +2593,7 @@ deferred-media[class] :is(.deferred-media__poster-button img, .deferred-media__p
   color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
 }
 
-product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
+product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6)>*:not(.tax-note) {
   margin-block: 0;
 }
 
@@ -2741,7 +2730,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
 
 /* Custom Typography style */
 .custom-typography,
-.custom-typography > * {
+.custom-typography>* {
   font-family: var(--font-family);
   font-weight: var(--font-weight);
   text-transform: var(--text-transform);
@@ -2767,12 +2756,12 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
 }
 
 .custom-font-size,
-.custom-font-size > * {
+.custom-font-size>* {
   font-size: var(--font-size);
 }
 
 .custom-font-weight,
-.custom-font-weight > * {
+.custom-font-weight>* {
   font-weight: var(--font-weight);
 }
 
@@ -2822,19 +2811,19 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
   .layout-panel-flex--row:not(.mobile-column) {
     flex-wrap: var(--flex-wrap-mobile);
 
-    > .menu {
+    >.menu {
       flex: 1 1 min-content;
     }
 
-    > .text-block {
+    >.text-block {
       flex: 1 1 var(--max-width--display-tight);
     }
 
-    > .image-block {
+    >.image-block {
       flex: 1 1 var(--size-style-width-mobile-min);
     }
 
-    > .button {
+    >.button {
       flex: 0 0 fit-content;
     }
   }
@@ -2906,7 +2895,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
   }
 
   :first-child:is(p, h1, h2, h3, h4, h5, h6),
-  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
+  :first-child:empty+ :is(p, h1, h2, h3, h4, h5, h6) {
     margin-block-start: 0;
   }
 
@@ -3003,17 +2992,17 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
     outline: none;
   }
 
-  &:focus-visible + .checkbox__label .icon-checkmark {
+  &:focus-visible+.checkbox__label .icon-checkmark {
     outline: var(--focus-outline-width) solid currentcolor;
     outline-offset: var(--focus-outline-offset);
   }
 
-  &:checked + .checkbox__label .icon-checkmark {
+  &:checked+.checkbox__label .icon-checkmark {
     background-color: var(--color-foreground);
     border-color: var(--color-foreground);
   }
 
-  &:disabled + .checkbox__label .icon-checkmark {
+  &:disabled+.checkbox__label .icon-checkmark {
     background-color: var(--input-disabled-background-color);
     border-color: var(--input-disabled-border-color);
   }
@@ -3049,7 +3038,7 @@ product-price.text-block:is(.h1, .h2, .h3, .h4, .h5, .h6) > *:not(.tax-note) {
   transition: opacity var(--animation-speed) var(--animation-easing);
 }
 
-.checkbox__input:disabled + .checkbox__label {
+.checkbox__input:disabled+.checkbox__label {
   color: var(--input-disabled-text-color);
 }
 
@@ -3167,15 +3156,15 @@ input[type='radio'] {
 }
 
 /* Shared styles for radio buttons and checkboxes */
-:where(input[type='radio']) + label,
-:where(input[type='checkbox']) + label {
+:where(input[type='radio'])+label,
+:where(input[type='checkbox'])+label {
   display: inline;
   vertical-align: middle;
   cursor: pointer;
 }
 
-:where(input[type='radio']):disabled + label,
-:where(input[type='checkbox']):disabled + label {
+:where(input[type='radio']):disabled+label,
+:where(input[type='checkbox']):disabled+label {
   color: var(--input-disabled-text-color);
   cursor: not-allowed;
 }
@@ -3394,7 +3383,7 @@ label:has(input[type='checkbox']:disabled) {
   }
 }
 
-.pills__pill > .svg-wrapper {
+.pills__pill>.svg-wrapper {
   --close-icon-opacity: 0.4;
   --icon-stroke-width: 1px;
 
@@ -3510,11 +3499,8 @@ fly-to-cart.fly-to-cart--sticky {
     --facets-vertical-col-width: 6;
 
     grid-template-columns:
-      1fr repeat(
-        var(--centered-column-number),
-        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
-      )
-      1fr;
+      1fr repeat(var(--centered-column-number),
+        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) 1fr;
   }
 
   @media screen and (min-width: 990px) {
@@ -3527,15 +3513,12 @@ fly-to-cart.fly-to-cart--sticky {
   @media screen and (min-width: 750px) {
     grid-column: 1 / -1;
     grid-template-columns:
-      minmax(var(--page-margin), 1fr) repeat(
-        var(--centered-column-number),
-        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
-      )
-      minmax(var(--page-margin), 1fr);
+      minmax(var(--page-margin), 1fr) repeat(var(--centered-column-number),
+        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))) minmax(var(--page-margin), 1fr);
   }
 }
 
-.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden) ~ .main-collection-grid {
+.collection-wrapper:has(.facets--vertical) .facets-block-wrapper--vertical:not(.hidden)~.main-collection-grid {
   @media screen and (min-width: 750px) {
     grid-column: var(--facets-vertical-col-width) / var(--full-width-column-number);
   }
@@ -3548,18 +3531,14 @@ fly-to-cart.fly-to-cart--sticky {
   }
 }
 
-:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
-  [product-grid-view='default']
-  .product-grid__card {
+:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='default'] .product-grid__card {
   @media screen and (max-width: 749px) {
     padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
     padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
   }
 }
 
-:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile)
-  [product-grid-view='mobile-single']
-  .product-grid__card {
+:is(.collection-wrapper--full-width, .collection-wrapper--full-width-on-mobile) [product-grid-view='mobile-single'] .product-grid__card {
   @media screen and (max-width: 749px) {
     padding-inline-start: max(var(--padding-xs), var(--padding-inline-start));
     padding-inline-end: max(var(--padding-xs), var(--padding-inline-end));
@@ -3748,6 +3727,29 @@ fly-to-cart.fly-to-cart--sticky {
   }
 }
 
+/* ============================================================================
+   Mobile Performance - Disabled Animations Override
+   ============================================================================ */
+@media screen and (max-width: 749px) {
+  body.animations-disabled-mobile * {
+    /* Disable all CSS Scroll-Driven reveals (native feature used heavily in this theme) */
+    animation-timeline: none !important;
+  }
+  
+  body.animations-disabled-mobile .slide__content {
+    /* Specifically prevent the slide reveal animation to load instantly */
+    animation: none !important;
+    opacity: 1 !important;
+    translate: 0 0 !important;
+  }
+
+  /* Disable costly View Transition animations on mobile */
+  body.animations-disabled-mobile::view-transition-old(*),
+  body.animations-disabled-mobile::view-transition-new(*) {
+    animation: none !important;
+  }
+}
+
 @keyframes search-element-slide-out-bottom {
   0% {
     transform: translateY(0);
@@ -3773,6 +3775,7 @@ fly-to-cart.fly-to-cart--sticky {
 }
 
 @keyframes thumbnail-selected {
+
   0%,
   100% {
     box-shadow: 0 0 0 2px transparent;
@@ -3863,7 +3866,8 @@ fly-to-cart.fly-to-cart--sticky {
   position: absolute;
   z-index: var(--layer-lowest);
   inset: 0;
-  clip-path: inset(-50px 0 0 0); /* stylelint-disable-line */
+  clip-path: inset(-50px 0 0 0);
+  /* stylelint-disable-line */
 }
 
 @media screen and (min-width: 750px) {
@@ -3878,7 +3882,8 @@ fly-to-cart.fly-to-cart--sticky {
   position: absolute;
   z-index: var(--layer-lowest);
   inset: 0;
-  clip-path: inset(0 0 -50px 0); /* stylelint-disable-line */
+  clip-path: inset(0 0 -50px 0);
+  /* stylelint-disable-line */
 }
 
 @media screen and (min-width: 750px) {
@@ -3894,11 +3899,11 @@ fly-to-cart.fly-to-cart--sticky {
   aspect-ratio: var(--size-style-aspect-ratio, auto);
 }
 
-:not(deferred-media) > .video-placeholder-wrapper {
+:not(deferred-media)>.video-placeholder-wrapper {
   width: var(--video-placeholder-width);
 }
 
-.video-placeholder-wrapper > * {
+.video-placeholder-wrapper>* {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -3941,7 +3946,8 @@ slideshow-component.slideshow--content-below-media slideshow-slide {
     animation-timeline: var(--slideshow-timeline);
   }
 
-  @media (prefers-reduced-motion) {
+  @media screen and (max-width: 749px),
+  (prefers-reduced-motion) {
     opacity: 1;
     animation: none;
   }
@@ -4059,12 +4065,10 @@ slideshow-slide.product-media-container--tallest {
 }
 
 @media screen and (max-width: 749px) {
+
   /* Media gallery has a peeking slide on the right side always, and on the left side when the current slide is the last one */
-  .media-gallery--hint
-    :is(
-      slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
-      slideshow-slide[aria-hidden='false'] + slideshow-slide
-    ) {
+  .media-gallery--hint :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']:last-of-type),
+    slideshow-slide[aria-hidden='false'] + slideshow-slide) {
     content-visibility: auto;
 
     slideshow-component[actioned] & {
@@ -4078,11 +4082,8 @@ slideshow-slide.product-media-container--tallest {
  * Card galleries preview the next or previous images on 'pointerenter', so we
  * try to kick load them beforehand (they are lazy loaded otherwise).
  */
-:is(.resource-list__carousel, .card-gallery)
-  :is(
-    slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
-    slideshow-slide[aria-hidden='false'] + slideshow-slide
-  ) {
+:is(.resource-list__carousel, .card-gallery) :is(slideshow-slide:has(+ slideshow-slide[aria-hidden='false']),
+  slideshow-slide[aria-hidden='false'] + slideshow-slide) {
   content-visibility: auto;
 
   slideshow-component[actioned] & {
@@ -4094,7 +4095,7 @@ slideshow-slide.product-media-container--tallest {
  * Be specific about HTML children structure to avoid targeting nested slideshows.
  * Ensure that the content is 'visible' while scrolling instead of 'auto' to avoid issues in Safari.
  */
-slideshow-component:is([dragging], [transitioning], :hover) > slideshow-container > slideshow-slides > slideshow-slide {
+slideshow-component:is([dragging], [transitioning], :hover)>slideshow-container>slideshow-slides>slideshow-slide {
   content-visibility: visible;
 }
 
@@ -4167,13 +4168,13 @@ slideshow-container {
 
 slideshow-component:is([autoplay]) {
   &:is([paused]) {
-    .icon-play > svg {
+    .icon-play>svg {
       display: block;
     }
   }
 
   &:not([paused]) {
-    .icon-pause > svg {
+    .icon-pause>svg {
       display: block;
     }
   }
@@ -4244,11 +4245,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
   }
 }
 
-:not(.media-gallery--carousel)
-  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
-  > slideshow-container
-  > slideshow-arrows
-  .slideshow-control {
+:not(.media-gallery--carousel)> :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))>slideshow-container>slideshow-arrows .slideshow-control {
   animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
 }
 
@@ -4301,11 +4298,10 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
   display: none;
 }
 
-:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
-:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
+:where(.section-resource-list.section--full-width) product-card[data-product-transition]>.group-block,
+:where(.section-carousel.section--full-width) product-card[data-product-transition]>.group-block {
   @media screen and (max-width: 749px) {
-    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
-      max(var(--padding-xs), var(--padding-inline-end));
+    padding-inline: max(var(--padding-xs), var(--padding-inline-start)) max(var(--padding-xs), var(--padding-inline-end));
   }
 }
 
@@ -4421,10 +4417,7 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
 
 @container resource-list-carousel (min-width: 750px) {
   .resource-list__carousel .resource-list__slide {
-    --section-slide-width: calc(
-      (100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) /
-        var(--column-count)
-    );
+    --section-slide-width: calc((100% - (var(--resource-list-column-gap) * (var(--column-count) - 1)) - var(--peek-next-slide-size)) / var(--column-count));
     --fallback-slide-width: clamp(150px, var(--mobile-card-size, 60cqw), var(--slide-width-max));
     --slide-width: var(--section-slide-width, var(--fallback-slide-width));
   }
@@ -4477,15 +4470,15 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
 }
 
 /* Flex behavior for width variants */
-.layout-panel-flex--row > .group-block--width-fit {
+.layout-panel-flex--row>.group-block--width-fit {
   flex: 0;
 }
 
-.layout-panel-flex--row > .group-block--width-fill {
+.layout-panel-flex--row>.group-block--width-fill {
   flex: 1;
 }
 
-.layout-panel-flex--row > .group-block--width-custom {
+.layout-panel-flex--row>.group-block--width-custom {
   flex-basis: var(--size-style-width);
 }
 
@@ -4500,20 +4493,21 @@ slideshow-arrows .slideshow-control.slideshow-control--style-none {
 }
 
 /* Flex behavior for height variants */
-.layout-panel-flex--column > .group-block--height-fit {
+.layout-panel-flex--column>.group-block--height-fit {
   flex: 0 1 auto;
 }
 
-.layout-panel-flex--column > .group-block--height-fill {
+.layout-panel-flex--column>.group-block--height-fill {
   flex: 1;
 }
 
-.layout-panel-flex--column > .group-block--height-custom {
+.layout-panel-flex--column>.group-block--height-custom {
   flex-basis: var(--size-style-height);
 }
 
 accordion-custom {
   details {
+
     &::details-content,
     .details-content {
       block-size: 0;
@@ -4533,6 +4527,7 @@ accordion-custom {
     }
 
     &:not([open]) {
+
       &::details-content,
       .details-content {
         padding-block: 0;
@@ -4540,6 +4535,7 @@ accordion-custom {
     }
 
     &[open] {
+
       &::details-content,
       .details-content {
         opacity: 1;
@@ -4589,12 +4585,10 @@ text-component {
     opacity: 0;
     transition: opacity var(--animation-speed-slow) var(--animation-easing);
     pointer-events: none;
-    background-image: linear-gradient(
-      -85deg,
-      var(--shimmer-text-color) 10%,
-      var(--shimmer-color-light) 50%,
-      var(--shimmer-text-color) 90%
-    );
+    background-image: linear-gradient(-85deg,
+        var(--shimmer-text-color) 10%,
+        var(--shimmer-color-light) 50%,
+        var(--shimmer-text-color) 90%);
     background-clip: text;
     background-size: 200% 100%;
     background-position: 100% 0;
@@ -4715,6 +4709,7 @@ text-component {
 
 /* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
 @media screen and (max-width: 1200px) {
+
   input,
   textarea,
   select,
@@ -4943,4 +4938,4 @@ product-recommendations:has([data-has-recommendations='false']) {
     opacity: var(--atc-opacity, 1);
     translate: 0px var(--atc-destination, 0px);
   }
-}
+}
\ No newline at end of file
diff --git a/assets/deferred-hydration.js b/assets/deferred-hydration.js
new file mode 100644
index 000000000..fc45fdcb6
--- /dev/null
+++ b/assets/deferred-hydration.js
@@ -0,0 +1,68 @@
+/**
+ * Deferred Hydration Utility
+ * Hydrates content when it enters the viewport on mobile.
+ */
+
+import { onDocumentReady } from '@theme/utilities';
+
+class DeferredHydration extends HTMLElement {
+  constructor() {
+    super();
+    this.observer = null;
+  }
+
+  connectedCallback() {
+    onDocumentReady(() => {
+      const mobileOnly = this.hasAttribute('mobile-only');
+      const isMobile = window.innerWidth < 750;
+
+      if (mobileOnly && !isMobile) {
+        this.hydrate();
+        return;
+      }
+
+      // If it's already in viewport or we want to be safe, use IntersectionObserver
+      this.observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.hydrate();
+            this.observer.disconnect();
+          }
+        });
+      }, { rootMargin: '200px' });
+
+      this.observer.observe(this);
+    });
+  }
+
+  hydrate() {
+    const template = this.querySelector('template');
+    if (template) {
+      const content = template.content.cloneNode(true);
+      this.appendChild(content);
+      // Remove template to avoid re-hydration
+      template.remove();
+      this.setAttribute('hydrated', '');
+      
+      // Look for any scripts that might need a nudge
+      this.querySelectorAll('script').forEach(script => {
+        const newScript = document.createElement('script');
+        Array.from(script.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
+        newScript.innerHTML = script.innerHTML;
+        if (script.parentNode) {
+          script.parentNode.replaceChild(newScript, script);
+        }
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+  }
+}
+
+if (!customElements.get('deferred-hydration')) {
+  customElements.define('deferred-hydration', DeferredHydration);
+}
diff --git a/assets/header.js b/assets/header.js
index a67565c26..90cab5a2b 100644
--- a/assets/header.js
+++ b/assets/header.js
@@ -192,7 +192,7 @@ class HeaderComponent extends Component {
       this.#observeStickyPosition(stickyMode === 'always');
 
       if (stickyMode === 'scroll-up' || stickyMode === 'always') {
-        document.addEventListener('scroll', this.#handleWindowScroll);
+        document.addEventListener('scroll', this.#handleWindowScroll, { passive: true });
       }
     }
   }
diff --git a/assets/localization.js b/assets/localization.js
index 6d47cbb96..e21cd5495 100644
--- a/assets/localization.js
+++ b/assets/localization.js
@@ -24,7 +24,7 @@ class LocalizationFormComponent extends Component {
 
     this.refs.search && this.refs.search.addEventListener('keydown', this.#onSearchKeyDown);
     this.refs.countryList && this.refs.countryList.addEventListener('keydown', this.#onContainerKeyDown);
-    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll);
+    this.refs.countryList && this.refs.countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
 
     // Resizing the language input can be expensive for browsers that don't support field-sizing: content.
     // Spliting it into separate tasks at least helps when there are multiple localization forms on the page.
@@ -515,7 +515,7 @@ class DrawerLocalizationComponent extends Component {
     const countryList = localizationForm.querySelector('.country-selector-form__wrapper');
 
     if (target.open) {
-      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll);
+      if (countryList) countryList.addEventListener('scroll', this.#onCountryListScroll, { passive: true });
       onAnimationEnd(target, localizationForm.focusSearchInput);
     } else {
       countryList?.removeEventListener('scroll', this.#onCountryListScroll);
diff --git a/assets/scrolling.js b/assets/scrolling.js
index 57739db13..db39e6e1a 100644
--- a/assets/scrolling.js
+++ b/assets/scrolling.js
@@ -89,7 +89,7 @@ export class Scroller {
     this.#onScrollEnd = options.onScrollEnd;
 
     this.element = element;
-    this.element.addEventListener('scroll', this.#handleScroll);
+    this.element.addEventListener('scroll', this.#handleScroll, { passive: true });
   }
 
   /**
@@ -342,25 +342,25 @@ export function scrollIntoView(element, { ancestor, behavior = 'smooth', block =
   const scrollTop =
     ancestor.scrollHeight > ancestor.clientHeight
       ? calculateScrollOffset(
-          block,
-          ancestorRect.top,
-          ancestor.clientHeight,
-          elemRect.top,
-          elemRect.height,
-          ancestor.scrollTop
-        )
+        block,
+        ancestorRect.top,
+        ancestor.clientHeight,
+        elemRect.top,
+        elemRect.height,
+        ancestor.scrollTop
+      )
       : ancestor.scrollTop;
 
   const scrollLeft =
     ancestor.scrollWidth > ancestor.clientWidth
       ? calculateScrollOffset(
-          inline,
-          ancestorRect.left,
-          ancestor.clientWidth,
-          elemRect.left,
-          elemRect.width,
-          ancestor.scrollLeft
-        )
+        inline,
+        ancestorRect.left,
+        ancestor.clientWidth,
+        elemRect.left,
+        elemRect.width,
+        ancestor.scrollLeft
+      )
       : ancestor.scrollLeft;
 
   ancestor.scrollTo({ top: scrollTop, left: scrollLeft, behavior });
@@ -372,7 +372,7 @@ class ScrollHint extends HTMLElement {
   #rafId = null;
 
   connectedCallback() {
-    this.addEventListener('scroll', this.#handleScroll);
+    this.addEventListener('scroll', this.#handleScroll, { passive: true });
     this.#resizeObserver.observe(this);
   }
 
diff --git a/assets/zoom-dialog.js b/assets/zoom-dialog.js
index acdff63ed..8fa54e27f 100644
--- a/assets/zoom-dialog.js
+++ b/assets/zoom-dialog.js
@@ -28,7 +28,7 @@ export class ZoomDialog extends Component {
 
   connectedCallback() {
     super.connectedCallback();
-    this.refs.dialog.addEventListener('scroll', this.handleScroll);
+    this.refs.dialog.addEventListener('scroll', this.handleScroll, { passive: true });
   }
 
   disconnectedCallback() {
@@ -275,7 +275,7 @@ function getMostVisibleElement(elements) {
           current.intersectionRatio > prev.intersectionRatio ? current : prev
         );
         observer.disconnect();
-        resolve(/** @type {HTMLElement} */ (mostVisible.target));
+        resolve(/** @type {HTMLElement} */(mostVisible.target));
       },
       {
         threshold: Array.from({ length: 100 }, (_, i) => i / 100),
diff --git a/blocks/_layered-slide.liquid b/blocks/_layered-slide.liquid
index ae2b12ace..010b9e2c7 100644
--- a/blocks/_layered-slide.liquid
+++ b/blocks/_layered-slide.liquid
@@ -28,15 +28,21 @@
       {%- liquid
         assign height = preview_image.width | divided_by: preview_image.aspect_ratio | round
         assign sizes = '100vw'
-        assign widths = '832, 1200, 1600, 1920, 2560, 3840'
+        assign widths = '375, 450, 660, 900, 1320, 1800, 2136, 2400, 3000, 3600, 3840'
         assign loading = 'lazy'
+        assign fetchpriority = 'auto'
+
+        if section.index == 1 and block_index == 0
+          assign loading = 'eager'
+          assign fetchpriority = 'high'
+        endif
       -%}
 
       {%- if block.settings.media_type_1 == 'image' -%}
         {{
           block.settings.image_1
           | image_url: width: 3840
-          | image_tag: height: height, sizes: sizes, widths: widths, class: 'layered-slideshow__image', loading: loading
+          | image_tag: height: height, sizes: sizes, widths: widths, class: 'layered-slideshow__image', loading: loading, fetchpriority: fetchpriority
         }}
       {%- else -%}
         {%- if block.settings.video_1.preview_image -%}
@@ -48,6 +54,7 @@
               sizes: sizes,
               widths: widths,
               loading: loading,
+              fetchpriority: fetchpriority,
               class: 'layered-slideshow__video-poster'
           }}
         {%- endif -%}
diff --git a/blocks/accordion.liquid b/blocks/accordion.liquid
index 7ae870224..b6dfc26c0 100644
--- a/blocks/accordion.liquid
+++ b/blocks/accordion.liquid
@@ -13,7 +13,11 @@
   "
   {{ block.shopify_attributes }}
 >
-  {% content_for 'blocks' %}
+  <deferred-hydration data-mobile-only="true">
+    <template>
+      {% content_for 'blocks' %}
+    </template>
+  </deferred-hydration>
 </div>
 
 {% stylesheet %}
diff --git a/blocks/product-recommendations.liquid b/blocks/product-recommendations.liquid
index 798365c38..c40dd06ca 100644
--- a/blocks/product-recommendations.liquid
+++ b/blocks/product-recommendations.liquid
@@ -24,149 +24,153 @@
   [data-section-id] {section.id} - used to fetch the product recommendations from the Section Rendering API
 {% endcomment %}
 
-<product-recommendations
-  id="product-recommendations-{{ block.id }}"
-  class="product-recommendations"
-  data-url="{{ routes.product_recommendations_url }}?limit={{ block_settings.max_products }}"
-  data-section-id="{{ section.id }}"
-  data-product-id="{{ closest.product.id }}"
-  data-intent="{{ block_settings.recommendation_type }}"
-  data-recommendations-performed="{{ recommendations.performed }}"
-  {% if request.visual_preview_mode %}
-    data-shopify-editor-preview
-  {% endif %}
-  data-testid="product-recommendations-block"
-  {{ block.shopify_attributes }}
->
-  <div
-    class="
-      {% if block_settings.inherit_color_scheme == false %}color-{{ block_settings.color_scheme }}{% endif %}
-      block-resource-list
-      spacing-style
-      gap-style
-    "
-    style="
-      {%  render 'spacing-style', settings: block_settings %}
-      {%  render 'gap-style', value: block_settings.gap %}
-      --resource-list-column-gap-desktop: {{ block_settings.columns_gap }}px;
-      --resource-list-row-gap-desktop: {{ block_settings.rows_gap }}px;
-      --resource-list-columns-mobile: repeat(auto-fill, minmax(9.25rem, 1fr));
-      --border-radius: {{ block_settings.border_radius }}px;
-    "
-  >
-    <div class="section-resource-list__content">
-      {% content_for 'blocks' %}
-    </div>
-
-    {%- if recommendations.performed or closest.product == blank -%}
-      {% liquid
-        assign products = recommendations.products
-
-        if closest.product == blank
-          # Onboarding mode: Show placeholder products
-          for i in (1..block_settings.max_products)
-            assign products = products | append: ', '
-            assign products = products | split: ','
-          endfor
-        elsif recommendations.performed and recommendations.products_count == 0
-          # No recommendations found, pull from catalog
-          if block_settings.recommendation_type == 'related'
-            assign products = collections.all.products | reject: 'id', closest.product.id
-          elsif block_settings.recommendation_type == 'complementary'
-            # Do not recommend the All collection as complementary products
-            assign products = null
-          endif
-        else
-          assign products = recommendations.products
-        endif
-      %}
-      {% capture list_items %}
-        {% for product in products limit: block_settings.max_products %}
-          <div class="resource-list__item">
-            {% content_for 'block',
-              type: '_product-card',
-              id: 'static-product-card',
-              closest.product: product
-            %}
-          </div>
-          {% if block_settings.layout_type == 'carousel' or block_settings.carousel_on_mobile %}
-            {% unless forloop.last %}
-              <!--@list/split-->
-            {% endunless %}
-          {% endif %}
-        {% endfor %}
-      {% endcapture %}
-
-      {% liquid
-        # Create an array from the list items to be used in the carousel
-        assign slide_content = list_items | strip
-        assign slides = slide_content | split: '<!--@list/split-->'
-
-        if products != blank and products.size > 0
-          assign has_recommendations = 'true'
-        else
-          assign has_recommendations = 'false'
-        endif
-      %}
-
+<deferred-hydration data-mobile-only="true">
+  <template>
+    <product-recommendations
+      id="product-recommendations-{{ block.id }}"
+      class="product-recommendations"
+      data-url="{{ routes.product_recommendations_url }}?limit={{ block_settings.max_products }}"
+      data-section-id="{{ section.id }}"
+      data-product-id="{{ closest.product.id }}"
+      data-intent="{{ block_settings.recommendation_type }}"
+      data-recommendations-performed="{{ recommendations.performed }}"
+      {% if request.visual_preview_mode %}
+        data-shopify-editor-preview
+      {% endif %}
+      data-testid="product-recommendations-block"
+      {{ block.shopify_attributes }}
+    >
       <div
         class="
-          resource-list
-          {% if block_settings.carousel_on_mobile and block_settings.layout_type != 'carousel' %}
-            hidden--mobile
-          {% endif %}
-          {{ classes }}
+          {% if block_settings.inherit_color_scheme == false %}color-{{ block_settings.color_scheme }}{% endif %}
+          block-resource-list
+          spacing-style
+          gap-style
+        "
+        style="
+          {%  render 'spacing-style', settings: block_settings %}
+          {%  render 'gap-style', value: block_settings.gap %}
+          --resource-list-column-gap-desktop: {{ block_settings.columns_gap }}px;
+          --resource-list-row-gap-desktop: {{ block_settings.rows_gap }}px;
+          --resource-list-columns-mobile: repeat(auto-fill, minmax(9.25rem, 1fr));
+          --border-radius: {{ block_settings.border_radius }}px;
         "
-        {% if block_settings.layout_type == 'grid' %}
-          data-testid="resource-list-grid"
-        {% endif %}
-        data-has-recommendations="{{ has_recommendations }}"
       >
-        {% case block_settings.layout_type %}
-          {% when 'grid' %}
-            {{ list_items }}
-          {% when 'carousel' %}
-            {% render 'resource-list-carousel',
-              ref: 'resourceListCarousel',
-              slides: slides,
-              slide_count: recommendations.products.size,
-              settings: block_settings
-            %}
-        {% endcase %}
-      </div>
+        <div class="section-resource-list__content">
+          {% content_for 'blocks' %}
+        </div>
+
+        {%- if recommendations.performed or closest.product == blank -%}
+          {% liquid
+            assign products = recommendations.products
 
-      {% if block_settings.carousel_on_mobile and block_settings.layout_type != 'carousel' %}
-        {% liquid
-          assign mobile_carousel_gap = block_settings.columns_gap
-        %}
-        <div
-          class="
-            resource-list
-            hidden--desktop
-            force-full-width
-          "
-          style="--resource-list-gap: {{ mobile_carousel_gap }}px;"
-        >
-          {% render 'resource-list-carousel',
-            ref: 'resourceListCarouselMobile',
-            slides: slides,
-            slide_count: recommendations.products.size,
-            settings: block_settings
+            if closest.product == blank
+              # Onboarding mode: Show placeholder products
+              for i in (1..block_settings.max_products)
+                assign products = products | append: ', '
+                assign products = products | split: ','
+              endfor
+            elsif recommendations.performed and recommendations.products_count == 0
+              # No recommendations found, pull from catalog
+              if block_settings.recommendation_type == 'related'
+                assign products = collections.all.products | reject: 'id', closest.product.id
+              elsif block_settings.recommendation_type == 'complementary'
+                # Do not recommend the All collection as complementary products
+                assign products = null
+              endif
+            else
+              assign products = recommendations.products
+            endif
           %}
-        </div>
-      {% endif %}
-    {%- else -%}
-      <div class="resource-list resource-list--grid">
-        {% for i in (1..block_settings.max_products) %}
+          {% capture list_items %}
+            {% for product in products limit: block_settings.max_products %}
+              <div class="resource-list__item">
+                {% content_for 'block',
+                  type: '_product-card',
+                  id: 'static-product-card',
+                  closest.product: product
+                %}
+              </div>
+              {% if block_settings.layout_type == 'carousel' or block_settings.carousel_on_mobile %}
+                {% unless forloop.last %}
+                  <!--@list/split-->
+                {% endunless %}
+              {% endif %}
+            {% endfor %}
+          {% endcapture %}
+
+          {% liquid
+            # Create an array from the list items to be used in the carousel
+            assign slide_content = list_items | strip
+            assign slides = slide_content | split: '<!--@list/split-->'
+
+            if products != blank and products.size > 0
+              assign has_recommendations = 'true'
+            else
+              assign has_recommendations = 'false'
+            endif
+          %}
+
           <div
-            class="resource-list__item product-recommendations__skeleton-item"
-            aria-label="{{ 'accessibility.loading_product_recommendations' | t }}"
-          ></div>
-        {% endfor %}
+            class="
+              resource-list
+              {% if block_settings.carousel_on_mobile and block_settings.layout_type != 'carousel' %}
+                hidden--mobile
+              {% endif %}
+              {{ classes }}
+            "
+            {% if block_settings.layout_type == 'grid' %}
+              data-testid="resource-list-grid"
+            {% endif %}
+            data-has-recommendations="{{ has_recommendations }}"
+          >
+            {% case block_settings.layout_type %}
+              {% when 'grid' %}
+                {{ list_items }}
+              {% when 'carousel' %}
+                {% render 'resource-list-carousel',
+                  ref: 'resourceListCarousel',
+                  slides: slides,
+                  slide_count: recommendations.products.size,
+                  settings: block_settings
+                %}
+            {% endcase %}
+          </div>
+
+          {% if block_settings.carousel_on_mobile and block_settings.layout_type != 'carousel' %}
+            {% liquid
+              assign mobile_carousel_gap = block_settings.columns_gap
+            %}
+            <div
+              class="
+                resource-list
+                hidden--desktop
+                force-full-width
+              "
+              style="--resource-list-gap: {{ mobile_carousel_gap }}px;"
+            >
+              {% render 'resource-list-carousel',
+                ref: 'resourceListCarouselMobile',
+                slides: slides,
+                slide_count: recommendations.products.size,
+                settings: block_settings
+              %}
+            </div>
+          {% endif %}
+        {%- else -%}
+          <div class="resource-list resource-list--grid">
+            {% for i in (1..block_settings.max_products) %}
+              <div
+                class="resource-list__item product-recommendations__skeleton-item"
+                aria-label="{{ 'accessibility.loading_product_recommendations' | t }}"
+              ></div>
+            {% endfor %}
+          </div>
+        {%- endif -%}
       </div>
-    {%- endif -%}
-  </div>
-</product-recommendations>
+    </product-recommendations>
+  </template>
+</deferred-hydration>
 
 {% stylesheet %}
   .block-resource-list {
diff --git a/blocks/review.liquid b/blocks/review.liquid
index 90c9f17c0..bbd503806 100644
--- a/blocks/review.liquid
+++ b/blocks/review.liquid
@@ -13,93 +13,79 @@
   endif
 -%}
 
-{%- if rating != blank -%}
-  {% liquid
-    assign star_count_rating = scale_max
-    assign decimal_rating = 0
-    assign decimal = rating | modulo: 1
-
-    if decimal >= 0.3 and decimal <= 0.7
-      assign decimal_rating = 0.5
-    elsif decimal > 0.7
-      assign decimal_rating = 1
-    endif
-
-    # this is used so I can tell how many stars I need to fill. When the decimal rating above is 0.5 or 1 I count it as one as the half star is dealt with with a SVG linear gradient.
-    assign decimal_rounded = decimal_rating | ceil
-
-    assign svg_filled_stars = rating | floor | plus: decimal_rounded
-  %}
-
-  <div
-    class="rating-wrapper rating-color--{{ block_settings.rating_color }} justify-{{ block_settings.alignment }} size-style"
-    style="{% render 'size-style', settings: block_settings %}"
-    {{ block.shopify_attributes }}
-  >
-    <svg
-      class="visually-hidden"
-      style="width: 0; height: 0;"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 32 32"
-      role="presentation"
-    >
-      <defs>
-        <linearGradient id="half" x1="0" x2="100%" y1="0" y2="0">
-          <stop offset="50%" stop-color="var(--star-fill-color)"></stop>
-          <stop offset="50%" stop-color="{% if block_settings.stars_style == "outline" %}transparent{% else %}rgb(var(--star-fill-color-rgb) / var(--opacity-20){% endif %}"></stop>
-        </linearGradient>
-
-        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="star">
-          <path d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z" />
-        </symbol>
-      </defs>
-    </svg>
-    <div
-      class="rating"
-      style="--star-size: calc(var(--font-{{ block_settings.type_preset }}--size) * 1.1);"
-      aria-label="{{ 'accessibility.rating' | t: rating: rating }}"
-    >
-      {% if block_settings.stars_style == 'single' %}
+  <deferred-hydration data-mobile-only="true">
+    <template>
+      <div
+        class="rating-wrapper rating-color--{{ block_settings.rating_color }} justify-{{ block_settings.alignment }} size-style"
+        style="{% render 'size-style', settings: block_settings %}"
+        {{ block.shopify_attributes }}
+      >
         <svg
-          class="stars {% if svg_filled_stars > 0 %}filled-star{% endif %}"
+          class="visually-hidden"
+          style="width: 0; height: 0;"
+          xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 32 32"
-          style="--empty-star-fill-color: rgb(var(--star-fill-color-rgb) / var(--opacity-20))"
           role="presentation"
         >
-          <use xlink:href="#star"></use>
+          <defs>
+            <linearGradient id="half" x1="0" x2="100%" y1="0" y2="0">
+              <stop offset="50%" stop-color="var(--star-fill-color)"></stop>
+              <stop offset="50%" stop-color="{% if block_settings.stars_style == "outline" %}transparent{% else %}rgb(var(--star-fill-color-rgb) / var(--opacity-20){% endif %}"></stop>
+            </linearGradient>
+
+            <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" id="star">
+              <path d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z" />
+            </symbol>
+          </defs>
         </svg>
-      {% else %}
-        {%- for star in (1..star_count_rating) -%}
-          <svg
-            class="stars {% if star <= svg_filled_stars %}filled-star{% endif %}"
-            viewBox="0 0 32 32"
-            style="--empty-star-fill-color:{% if block_settings.stars_style == 'outline' %}transparent{% else %}rgb(var(--star-fill-color-rgb) / var(--opacity-20)){% endif %}"
-            role="presentation"
-          >
-            <use xlink:href="#star"{% if decimal_rating == 0.5 and star == svg_filled_stars %} fill="url(#half)"{% endif %}></use>
-            {% if block_settings.stars_style == "outline" %}
-              <use xlink:href="#star" fill="none" stroke="var(--star-fill-color)" stroke-width="var(--icon-stroke-width)"></use>
-            {% endif %}
-          </svg>
-        {%- endfor -%}
-      {% endif %}
-    </div>
+        <div
+          class="rating"
+          style="--star-size: calc(var(--font-{{ block_settings.type_preset }}--size) * 1.1);"
+          aria-label="{{ 'accessibility.rating' | t: rating: rating }}"
+        >
+          {% if block_settings.stars_style == 'single' %}
+            <svg
+              class="stars {% if svg_filled_stars > 0 %}filled-star{% endif %}"
+              viewBox="0 0 32 32"
+              style="--empty-star-fill-color: rgb(var(--star-fill-color-rgb) / var(--opacity-20))"
+              role="presentation"
+            >
+              <use xlink:href="#star"></use>
+            </svg>
+          {% else %}
+            {%- for star in (1..star_count_rating) -%}
+              <svg
+                class="stars {% if star <= svg_filled_stars %}filled-star{% endif %}"
+                viewBox="0 0 32 32"
+                style="--empty-star-fill-color:{% if block_settings.stars_style == 'outline' %}transparent{% else %}rgb(var(--star-fill-color-rgb) / var(--opacity-20)){% endif %}"
+                role="presentation"
+              >
+                <use xlink:href="#star"{% if decimal_rating == 0.5 and star == svg_filled_stars %} fill="url(#half)"{% endif %}></use>
+                {% if block_settings.stars_style == "outline" %}
+                  <use xlink:href="#star" fill="none" stroke="var(--star-fill-color)" stroke-width="var(--icon-stroke-width)"></use>
+                {% endif %}
+              </svg>
+            {%- endfor -%}
+          {% endif %}
+        </div>
 
-    {%- if block_settings.show_number or block_settings.stars_style == 'single' -%}
-      <p class="rating-count {{ block_settings.type_preset }}">
-        {%- if block_settings.stars_style == 'single' -%}
-          <span aria-hidden="true">{{- rating | round: 1 }}</span>
-        {%- endif -%}
-        {%- if block_settings.stars_style == 'single' and block_settings.show_number -%}
-          <span class="rating-count-separator">|</span>
-        {%- endif -%}
-        {%- if block_settings.show_number -%}
-          {{- rating_count }}
-          {{ 'content.reviews' | t }}
+        {%- if block_settings.show_number or block_settings.stars_style == 'single' -%}
+          <p class="rating-count {{ block_settings.type_preset }}">
+            {%- if block_settings.stars_style == 'single' -%}
+              <span aria-hidden="true">{{- rating | round: 1 }}</span>
+            {%- endif -%}
+            {%- if block_settings.stars_style == 'single' and block_settings.show_number -%}
+              <span class="rating-count-separator">|</span>
+            {%- endif -%}
+            {%- if block_settings.show_number -%}
+              {{- rating_count }}
+              {{ 'content.reviews' | t }}
+            {%- endif -%}
+          </p>
         {%- endif -%}
-      </p>
-    {%- endif -%}
-  </div>
+      </div>
+    </template>
+  </deferred-hydration>
 {%- endif -%}
 
 {% stylesheet %}
diff --git a/commits.txt b/commits.txt
new file mode 100644
index 000000000..ba1570510
Binary files /dev/null and b/commits.txt differ
diff --git a/config/settings_schema.json b/config/settings_schema.json
index 9a27dce58..d299bd625 100644
--- a/config/settings_schema.json
+++ b/config/settings_schema.json
@@ -1403,6 +1403,13 @@
         "label": "t:settings.add_to_cart_animation",
         "default": true
       },
+      {
+        "type": "checkbox",
+        "id": "disable_animations_mobile",
+        "label": "Disable animations on mobile",
+        "info": "Improves performance by disabling scroll reveals and page transitions on small screens.",
+        "default": true
+      },
       {
         "type": "select",
         "id": "card_hover_effect",
diff --git a/layout/theme.liquid b/layout/theme.liquid
index 2b6b6a151..ead244064 100644
--- a/layout/theme.liquid
+++ b/layout/theme.liquid
@@ -25,6 +25,12 @@
     {% endif %}
 
     {%- render 'meta-tags' -%}
+
+    {% comment %} Preload LCP image if applicable {% endcomment %}
+    {% if template == 'index' %}
+      <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
+    {% endif %}
+
     {%- render 'stylesheets' -%}
     {%- render 'fonts' -%}
     {%- render 'scripts' -%}
@@ -38,7 +44,7 @@
     {{ content_for_header }}
   </head>
 
-  <body class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}">
+  <body class="page-width-{{ settings.page_width }} card-hover-effect-{{ settings.card_hover_effect }}{% if settings.disable_animations_mobile %} animations-disabled-mobile{% endif %}">
     {% render 'skip-to-content-link', href: '#MainContent', text: 'accessibility.skip_to_text' %}
     <div id="header-group">
       {% sections 'header-group' %}
diff --git a/sections/hero.liquid b/sections/hero.liquid
index 4abcf4726..dd5f298af 100644
--- a/sections/hero.liquid
+++ b/sections/hero.liquid
@@ -100,17 +100,19 @@
   endif
 
   assign sizes = '(min-width: 750px) ' | append: media_width_desktop | append: ', ' | append: media_width_mobile
-  assign widths = '832, 1200, 1600, 1920, 2560, 3840'
+  assign widths = '375, 450, 660, 900, 1320, 1800, 2136, 2400, 3000, 3600, 3840'
   assign sizes_mobile = media_width_mobile
-  assign mobile_widths = '416, 600, 800, 1200, 1600'
+  assign mobile_widths = '375, 450, 660, 900, 1320, 1800'
   assign mobile_widths_array = mobile_widths | split: ', '
 
   assign fetch_priority = 'auto'
+  assign loading_strategy = 'lazy'
 
   if section.index == 1
     assign fetch_priority = 'high'
+    assign loading_strategy = 'eager'
   endif
-%}
+-%}
 
 {% capture media_slot_1 %}
   {%- if media_1 == 'image' and media_1_mobile == 'image' -%}
@@ -141,6 +143,7 @@
           class: 'hero__media',
           sizes: sizes,
           fetchpriority: fetch_priority,
+          loading: loading_strategy,
           data-testid: 'hero-desktop-image-1'
       }}
     </picture>
@@ -157,6 +160,7 @@
           class: 'hero__media',
           sizes: sizes,
           fetchpriority: fetch_priority,
+          loading: loading_strategy,
           data-testid: 'hero-desktop-image-1'
       }}
     </div>
@@ -184,7 +188,7 @@
       <div class="{{ media_wrapper_mobile_class }}">
         {{
           section.settings.image_1_mobile
-          | image_url: width: 1600
+          | image_url: width: 1800
           | image_tag:
             width: section.settings.image_1_mobile.width,
             widths: mobile_widths,
@@ -193,6 +197,7 @@
             class: 'hero__media',
             sizes: sizes_mobile,
             fetchpriority: fetch_priority,
+            loading: loading_strategy,
             data-testid: 'hero-mobile-image-1'
         }}
       </div>
@@ -245,6 +250,7 @@
           class: 'hero__media',
           sizes: sizes,
           fetchpriority: fetch_priority,
+          loading: loading_strategy,
           data-testid: 'hero-desktop-image-2'
       }}
     </picture>
@@ -261,6 +267,7 @@
           class: 'hero__media',
           sizes: sizes,
           fetchpriority: fetch_priority,
+          loading: loading_strategy,
           data-testid: 'hero-desktop-image-2'
       }}
     </div>
@@ -288,7 +295,7 @@
       <div class="{{ media_wrapper_mobile_class }}">
         {{
           section.settings.image_2_mobile
-          | image_url: width: 1600
+          | image_url: width: 1800
           | image_tag:
             width: section.settings.image_2_mobile.width,
             widths: mobile_widths,
@@ -297,6 +304,7 @@
             class: 'hero__media',
             sizes: sizes_mobile,
             fetchpriority: fetch_priority,
+            loading: loading_strategy,
             data-testid: 'hero-mobile-image-2'
         }}
       </div>
@@ -340,7 +348,8 @@
         height: section.settings.image_1.height,
         alt: '',
         class: 'hero__media',
-        sizes: sizes
+        sizes: sizes,
+        loading: 'lazy'
     }}
   {% endif %}
   {% if media_2 == 'image' %}
@@ -353,7 +362,8 @@
         height: section.settings.image_2.height,
         alt: '',
         class: 'hero__media',
-        sizes: sizes
+        sizes: sizes,
+        loading: 'lazy'
     }}
   {% endif %}
   {% if media_count == 0 %}
diff --git a/snippets/card-gallery.liquid b/snippets/card-gallery.liquid
index 31de0c1e5..c3865a3ca 100644
--- a/snippets/card-gallery.liquid
+++ b/snippets/card-gallery.liquid
@@ -11,7 +11,7 @@
 {% liquid
   assign product = closest.product
   assign block_settings = block.settings
-  assign image_sizes = '(min-width: 750px) 50vw, 100vw'
+  assign image_sizes = '(min-width: 750px) 50vw, 50vw'
 
   # Check if product has badges and determine position
   assign has_badges = false
@@ -39,7 +39,7 @@
     assign image_sizes = sizes_attribute | strip
   elsif section.settings.columns and section.settings.layout_type != 'editorial'
     assign viewport_width = 100.0 | divided_by: section.settings.columns
-    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 100vw' | replace: '[viewport_width]', viewport_width
+    assign sizes_attribute = '(min-width: 750px) [viewport_width]vw, 50vw' | replace: '[viewport_width]', viewport_width
     assign image_sizes = sizes_attribute | strip
   endif
 
diff --git a/snippets/image.liquid b/snippets/image.liquid
index 2f220188f..6d66ef564 100644
--- a/snippets/image.liquid
+++ b/snippets/image.liquid
@@ -3,30 +3,46 @@
 
   @param {object} image - image object
   @param {number} [height] - custom image height
+  @param {number} [width] - custom image width
+  @param {string} [widths] - list of widths for srcset
+  @param {string} [sizes] - sizes attribute
   @param {string} [class] - additional classes
   @param {string} [text_fallback] - text to display if image is blank
   @param {boolean} [unset_image_tag] - if true, ignores the image focal point
   @param {string} [style] - additional styles
+  @param {string} [loading] - loading attribute (lazy|eager)
+  @param {string} [fetchpriority] - fetchpriority attribute (high|low|auto)
 
   @example
   {% render 'image', image: product.featured_image, height: 300, class: 'product-image' %}
 {%- enddoc -%}
 {% if image != blank %}
-  {% assign image_height = height | default: image.height %}
-  {% assign image_height_2x = height | default: image_height | times: 2 %}
-  {% assign image_height_3x = height | default: image_height | times: 3 %}
+  {%- liquid
+    assign image_width = width | default: image.width
+    assign image_height = height | default: image.height
+    
+    assign loading = loading | default: 'lazy'
+    assign fetchpriority = fetchpriority | default: 'auto'
+    
+    # Modern responsive widths for better DPR coverage
+    assign default_widths = '165, 360, 535, 750, 1070, 1500, 1780, 2000, 3000, 3840'
+    assign widths_list = widths | default: default_widths
+    
+    assign style_value = style | default: ''
 
-  {% capture image_srcset -%}
-    {{ image | image_url: height: image_height }} 1x, {{ image | image_url: height: image_height_2x }} 2x, {{ image | image_url: height: image_height_3x }} 3x
-  {%- endcapture %}
+    if unset_image_tag
+      assign style_value = style_value | append: 'object-position: inherit;'
+    endif
+  -%}
 
-  {% assign style_value = style | default: '' %}
-
-  {% if unset_image_tag %}
-    {% assign style_value = style_value | append: 'object-position: inherit;' %}
-  {% endif %}
-
-  {{ image | image_url: height: image_height | image_tag: class: class, srcset: image_srcset, style: style_value }}
+  {{ image | image_url: width: image_width, height: image_height | image_tag: 
+    class: class, 
+    widths: widths_list, 
+    sizes: sizes, 
+    loading: loading, 
+    fetchpriority: fetchpriority,
+    style: style_value 
+  }}
 {% elsif text_fallback %}
   {{ text_fallback }}
 {% endif %}
diff --git a/snippets/product-media.liquid b/snippets/product-media.liquid
index 37f46c10f..7f8f1811c 100644
--- a/snippets/product-media.liquid
+++ b/snippets/product-media.liquid
@@ -18,7 +18,7 @@
 {%- enddoc -%}
 
 {% liquid
-  assign widths = widths | default: '240, 352, 832, 1200, 1600, 1920, 2560, 3840'
+  assign widths = widths | default: '165, 360, 535, 750, 1070, 1500, 1920, 2560, 3840'
   assign ref_image_to_transition = ''
   if settings.transition_to_main_product
     assign ref_image_to_transition = 'imagesToTransition[]'
diff --git a/snippets/resource-card.liquid b/snippets/resource-card.liquid
index 5ffb95953..4195087e2 100644
--- a/snippets/resource-card.liquid
+++ b/snippets/resource-card.liquid
@@ -18,7 +18,7 @@
     assign ratio = image_aspect_ratio
   endif
   assign image_width = image_width | default: 1200
-  assign widths = '240, 352, 832, 1200'
+  assign widths = '165, 360, 535, 750, 1070, 1500'
   assign image_sizes = image_sizes | default: 'auto'
   assign single_thumbnail_collection = false
   if resource_type == 'collection' and collection_thumbnails != 'multiple'
diff --git a/snippets/scripts.liquid b/snippets/scripts.liquid
index 514fdbe70..4230bb1a6 100644
--- a/snippets/scripts.liquid
+++ b/snippets/scripts.liquid
@@ -151,6 +151,11 @@
   type="module"
   fetchpriority="low"
 ></script>
+<script
+  src="{{ 'deferred-hydration.js' | asset_url }}"
+  type="module"
+  fetchpriority="low"
+></script>
 <script
   src="{{ 'accordion-custom.js' | asset_url }}"
   type="module"
diff --git a/snippets/search-modal.liquid b/snippets/search-modal.liquid
index 26ade7e56..24ab4b15e 100644
--- a/snippets/search-modal.liquid
+++ b/snippets/search-modal.liquid
@@ -3,12 +3,6 @@
   type="module"
 ></script>
 
-<script
-  src="{{ 'predictive-search.js' | asset_url }}"
-  type="module"
-  fetchpriority="low"
-></script>
-
 <dialog-component
   id="search-modal"
   class="search-modal"
@@ -126,10 +120,55 @@
           </div>
         </div>
       </form>
-    </predictive-search-component>
-  </dialog>
 </dialog-component>
 
+<script>
+  (function() {
+    let predictiveSearchLoaded = false;
+    const url = "{{ 'predictive-search.js' | asset_url }}";
+
+    function loadPredictiveSearch() {
+      if (predictiveSearchLoaded) return;
+      predictiveSearchLoaded = true;
+      const script = document.createElement('script');
+      script.src = url;
+      script.type = 'module';
+      document.body.appendChild(script);
+
+      // Clean up listeners
+      removeListeners();
+    }
+
+    function addListeners() {
+      const triggers = document.querySelectorAll('.search-action, #search-modal, .search-input, .predictive-search__search-button');
+      triggers.forEach(trigger => {
+        trigger.addEventListener('mouseover', loadPredictiveSearch, { once: true });
+        trigger.addEventListener('focus', loadPredictiveSearch, { once: true });
+        trigger.addEventListener('touchstart', loadPredictiveSearch, { once: true, passive: true });
+        trigger.addEventListener('click', loadPredictiveSearch, { once: true });
+      });
+    }
+
+    function removeListeners() {
+      const triggers = document.querySelectorAll('.search-action, #search-modal, .search-input, .predictive-search__search-button');
+      triggers.forEach(trigger => {
+        trigger.removeEventListener('mouseover', loadPredictiveSearch);
+        trigger.removeEventListener('focus', loadPredictiveSearch);
+        trigger.removeEventListener('touchstart', loadPredictiveSearch);
+        trigger.removeEventListener('click', loadPredictiveSearch);
+      });
+    }
+
+    addListeners();
+    // Also bind to any new search actions that might be injected (like cart drawers or predictive search triggers)
+    document.addEventListener('mouseover', function(e) {
+      if (!predictiveSearchLoaded && e.target.closest && (e.target.closest('.search-action') || e.target.closest('.search-input') || e.target.closest('#search-modal'))) {
+        loadPredictiveSearch();
+      }
+    });
+  })();
+</script>
+
 {% stylesheet %}
   /* Search modal style */
   .search-modal {
diff --git a/snippets/util-autofill-img-size-attr.liquid b/snippets/util-autofill-img-size-attr.liquid
index 08d0b8b0d..1a0e5af44 100644
--- a/snippets/util-autofill-img-size-attr.liquid
+++ b/snippets/util-autofill-img-size-attr.liquid
@@ -66,7 +66,7 @@
   endif
   assign sizes_attr = sizes_attr | append: '(min-width: ' | append: min_breakpoint | append: 'px) 50vw'
 
-  assign sizes_attr = sizes_attr | append: ', 100vw'
+  assign sizes_attr = sizes_attr | append: ', 50vw'
 
   # Echo the sizes attribute
   echo sizes_attr
diff --git a/snippets/util-product-media-sizes-attr.liquid b/snippets/util-product-media-sizes-attr.liquid
index 8458af158..5b4f1b820 100644
--- a/snippets/util-product-media-sizes-attr.liquid
+++ b/snippets/util-product-media-sizes-attr.liquid
@@ -50,16 +50,16 @@
   if calculate_single_column
     # Default for carousel or single column grid (or first image in large_first_image mode)
     if section.settings.equal_columns == false
-      assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+      assign default_sizes = '(min-width: 750px) calc(100vw - 25rem - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
     else
-      assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), 100vw' | replace: '[gap_half]', gap_half
+      assign default_sizes = '(min-width: 750px) calc(50vw - [gap_half]), calc(100vw - 3rem)' | replace: '[gap_half]', gap_half
     endif
   else
     # Default for two column grid - includes image gap and quarter section gap
     if section.settings.equal_columns == false
-      assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+      assign default_sizes = '(min-width: 750px) calc((100vw - 25rem) / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
     else
-      assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), 100vw' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
+      assign default_sizes = '(min-width: 750px) calc(50vw / 2 - [gap_quarter] - [image_gap_half]), calc(100vw - 3rem)' | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
     endif
   endif
 
@@ -116,7 +116,7 @@
       else
         assign medium_size = 'calc([medium_base] - [page_margin] - [gap_quarter] - [image_gap_half])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_quarter]', gap_quarter | replace: '[image_gap_half]', image_gap_half
       endif
-      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
     else
       # Single column calculation
       if block_settings.extend_media
@@ -130,7 +130,7 @@
       else
         assign medium_size = 'calc([medium_base] - [page_margin] - [gap_half] - [page_margin])' | replace: '[medium_base]', medium_base | replace: '[page_margin]', page_margin | replace: '[gap_half]', gap_half
       endif
-      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], 100vw' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
+      assign sizes = '(min-width: [breakpoint]) [large_size], (min-width: 750px) [medium_size], calc(100vw - 3rem)' | replace: '[breakpoint]', breakpoint | replace: '[large_size]', large_size | replace: '[medium_size]', medium_size
     endif
   else
     # Use default sizes
diff --git a/themes.txt b/themes.txt
new file mode 100644
index 000000000..46b134b19
--- /dev/null
+++ b/themes.txt
@@ -0,0 +1 @@
+ÿþ
\ No newline at end of file
diff --git a/themes_utf8.txt b/themes_utf8.txt
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/themes_utf8.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/tmp_diff.txt b/tmp_diff.txt
new file mode 100644
index 000000000..e69de29bb
diff --git a/tmp_log.txt b/tmp_log.txt
new file mode 100644
index 000000000..46b134b19
--- /dev/null
+++ b/tmp_log.txt
@@ -0,0 +1 @@
+ÿþ
\ No newline at end of file
diff --git a/tmp_log_utf8.txt b/tmp_log_utf8.txt
new file mode 100644
index 000000000..5f282702b
--- /dev/null
+++ b/tmp_log_utf8.txt
@@ -0,0 +1 @@
+
\ No newline at end of file