Completed all assessment tasks:

src/js/scroll-indicator.js

@@ -0,0 +1,41 @@
+/**
+ * Scroll Indicator
+ * 
+ * This script adds functionality to the scroll indicator in the hero slider.
+ * When clicked, it scrolls the page down to the next section.
+ */
+
+class ScrollIndicator {
+  constructor() {
+    this.scrollIndicators = document.querySelectorAll('.swiper-scroll-indicator__indicator');
+    this.init();
+  }
+
+  init() {
+    if (this.scrollIndicators.length === 0) return;
+
+    this.scrollIndicators.forEach(indicator => {
+      indicator.addEventListener('click', this.scrollToNextSection.bind(this));
+    });
+  }
+
+  scrollToNextSection(event) {
+    event.preventDefault();
+
+    // Get the hero slider section
+    const heroSlider = event.target.closest('.shopify-section');
+
+    // Get the next section
+    const nextSection = heroSlider.nextElementSibling;
+
+    if (nextSection) {
+      // Scroll to the next section with smooth behavior
+      nextSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+}
+
+// Initialize the scroll indicator functionality
+document.addEventListener('DOMContentLoaded', () => {
+  new ScrollIndicator();
+});

src/scss/component/component-cart-icon-bubble.scss

@@ -8,6 +8,8 @@
     border: 0;
     position: relative;
     padding: rem(12);
+    min-width: rem(44);
+    min-height: rem(44);
     display: flex;
     flex-direction: row;
     align-items: center;

src/scss/component/component-collapsible.scss

@@ -37,6 +37,29 @@
       color: var(--color-brand-primary);
     }
   }
+
+  // Footer specific collapsible styles
+  .footer-block--menu & {
+    @include mqmax($bp-md) {
+      [data-collapsible-target] {
+        display: none;
+      }
+
+      [data-collapsible-group].collapsible-is-open {
+        [data-collapsible-target] {
+          display: block;
+        }
+
+        [data-collapsible-trigger] {
+          color: var(--color-brand-primary);
+
+          .icon {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+  }
   [data-collapsible-group] {
     border-bottom: 1px solid var(--color-border);
     &:first-child {

src/scss/component/component-menu-drawer.scss

@@ -303,6 +303,8 @@
     margin-left: rem(-4);
     position: relative;
     background-color: transparent;
+    min-width: rem(44);
+    min-height: rem(44);
   }
   // .menu-drawer__back-button
   &__back-button {

src/scss/component/component-products-slider-featured.scss

@@ -0,0 +1,8 @@
+@use '../mixins' as *;
+
+// Featured products slider specific styles
+.products-slider {
+  .swiper-wrapper {
+    align-items: center;
+  }
+}

src/scss/component/component-swiper.scss

@@ -7,8 +7,10 @@
   border: none;
   background: transparent;
   border-radius: 100%;
-  width: rem(40);
-  height: rem(40);
+  width: rem(48);
+  height: rem(48);
+  min-width: rem(44);
+  min-height: rem(44);
   padding: 0;
   transition: border-color var(--duration-short) linear;
   &:after {

src/scss/component/component-usp.scss

@@ -17,13 +17,25 @@
       padding-inline: var(--site-side-spacing-xxl);
     }
   }
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+  }
   &__title {
     margin-bottom: 0;
+    order: 1;
     @include mqmax($bp-md) {
       line-height: rem(26);
     }
     @include mqmin($bp-md) {
       margin-bottom: rem(10);
+      order: 0;
+    }
+  }
+  &__content {
+    order: 2;
+    @include mqmin($bp-md) {
+      order: 1;
     }
   }
   &__icon {
@@ -32,6 +44,10 @@
     margin: 0 auto calc(var(--element-spacing) * 3) auto;
     transform: scale(1);
     transition: transform var(--duration-default) ease-in-out;
+    order: 3;
+    @include mqmin($bp-md) {
+      order: -1;
+    }
     @include mqmin($bp-xl) {
       padding: rem(24);
     }
@@ -53,7 +69,8 @@
   &__link {
     text-decoration: none;
     transition: all var(--duration-default) ease-in-out;
-    display: block;
+    display: flex;
+    flex-direction: column;
     [fill="currentColor"] {
       transition: all var(--duration-default) ease-in-out;
     }
@@ -65,5 +82,23 @@
         transform: scale(1.2);
       }
     }
+    .usp__title {
+      order: 1;
+      @include mqmin($bp-md) {
+        order: 0;
+      }
+    }
+    .usp__content {
+      order: 2;
+      @include mqmin($bp-md) {
+        order: 1;
+      }
+    }
+    .usp__icon {
+      order: 3;
+      @include mqmin($bp-md) {
+        order: -1;
+      }
+    }
   }
 }

src/scss/section/section-hero-slider.scss

@@ -25,11 +25,14 @@
   &__content-wrapper {
     box-sizing: border-box;
     // padding left/right given to avoid overlap with the "swiper navigation arrows"
-    padding-block: 0 rem(100);
+    padding-block: rem(80) rem(100);
     @include mqmin($bp-md) {
-      padding-block: 0 rem(102);
+      padding-block: rem(120) rem(102);
       max-width: var(--site-center-narrow);
     }
+    @include mqmin($bp-lg) {
+      padding-top: rem(150);
+    }
     &.has-navigation {
       padding-left: 4rem;
       padding-right: 4rem;
@@ -142,15 +145,30 @@
       margin: rem(2) auto;
       background: var(--color-brand-primary);
       border-radius: 100%;
+      cursor: pointer;
+      transition: transform 0.3s ease, opacity 0.3s ease;
+
+      &:hover {
+        transform: scale(1.2);
+      }
+
       &:nth-of-type(2) {
         width: rem(10);
         height: rem(10);
         opacity: 50%;
+
+        &:hover {
+          opacity: 70%;
+        }
       }
       &:last-child {
         width: rem(8);
         height: rem(8);
         opacity: 20%;
+
+        &:hover {
+          opacity: 40%;
+        }
       }
     }
   }

src/scss/section/section-text-image-pane.scss

@@ -0,0 +1,165 @@
+@use '../mixins' as *;
+
+.section-text-image-pane {
+  .container {
+    margin-block: rem(60);
+    margin-bottom: 2%;
+    @include mqmin($bp-md) {
+      margin-block: rem(120);
+      margin-bottom: 2%;
+    }
+    @include mqmin($bp-lg) {
+      margin-block: rem(150);
+      margin-bottom: 2%;
+    }
+
+    &.site-side-spacing {
+      @include mqmax($bp-md) {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+    }
+  }
+  .text-image-pane {
+    @include mqmin($bp-md) {
+      padding-bottom: 11.45%;
+    }
+    @include mqmin($bp-lg) {
+      column-gap: rem(32);
+    }
+    @include mqmin($bp-xl) {
+      padding-bottom: 15%;
+    }
+    @include mqmin($bp-xxl) {
+      padding-bottom: 10.8%;
+    }
+    &__content {
+      padding-block: rem(10);
+      padding-inline: 0;
+
+      header {
+        margin-bottom: rem(5);
+      }
+
+      h2 {
+        font-size: rem(32);
+        line-height: 1.2;
+      }
+
+      @include mqmin($bp-md) {
+        padding-block: var(--spacing);
+        padding-right: rem(30);
+
+        header {
+          margin-bottom: rem(10);
+        }
+
+        h2 {
+          font-size: rem(42);
+          line-height: 1.3;
+        }
+      }
+      @include mqmin($bp-lg) {
+        padding-right: rem(40);
+        padding-top: rem(40);
+      }
+    }
+    &__text {
+      margin-top: rem(10);
+
+      p {
+        margin-bottom: rem(10);
+      }
+
+      @include mqmin($bp-md) {
+        font-size: rem(18);
+        margin-top: rem(24);
+        line-height: 1.6;
+
+        p {
+          margin-bottom: var(--element-spacing);
+        }
+      }
+
+      @include mqmin($bp-lg) {
+        font-size: rem(20);
+        line-height: 1.7;
+      }
+    }
+    &__button {
+      margin-top: rem(15);
+      @include mqmin($bp-md) {
+        margin-top: rem(40);
+      }
+    }
+    &__image {
+      position: relative;
+      margin-bottom: rem(20);
+      max-width: 100%;
+      overflow: hidden;
+      @include mqmin($bp-md) {
+        margin-bottom: 0;
+      }
+      figure {
+        position: relative;
+        z-index: 2;
+        border-radius: var(--border-radius);
+        margin-bottom: 0;
+        width: 100%;
+        height: auto;
+      }
+      img {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+        display: block;
+        border-radius: var(--border-radius);
+        @include mqmin($bp-md) {
+          max-height: 500px;
+        }
+        @include mqmin($bp-lg) {
+          max-height: 600px;
+        }
+      }
+      .colored-shape {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 1;
+        top: 10%;
+        bottom: 0;
+        left: 10%;
+        border-radius: var(--border-radius);
+        opacity: 0.8;
+        transform: scale(1.1);
+        @include mqmin($bp-md) {
+          top: 15%;
+          left: 15%;
+          opacity: 0.9;
+        }
+        @include mqmin($bp-lg) {
+          top: 20%;
+          left: 20%;
+        }
+        @include mqmin($bp-xxl) {
+          left: 25%;
+        }
+      }
+    }
+  }
+}
+
+// set stoov heatwave colors with a key and value
+$heatwave-colors: (
+  "heatwave-transparent": "../assets/heatwave-transparent.svg",
+  "heatwave-light-blue": "../assets/heatwave-light-blue.svg",
+  "heatwave-salmon": "../assets/heatwave-salmon.svg",
+  "heatwave-olive-green": "../assets/heatwave-olive-green.svg"
+);
+// loop the colors and assign a background
+@each $name, $color in $heatwave-colors {
+  .colored-shape--#{$name} {
+    background: url($color) no-repeat center / cover;
+  }
+}