diff --git a/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html b/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html
index 57060104fee..cea53d5837f 100644
--- a/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html
+++ b/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html
@@ -27,6 +27,7 @@
   </ng-container>
 
   <button
+    #addToCartDialogTriggerEl
     *ngIf="hasStock"
     [ngClass]="
       options?.displayAddToCart
diff --git a/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.ts b/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.ts
index ab786e879da..e3d92ed3acd 100644
--- a/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.ts
+++ b/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.ts
@@ -9,11 +9,13 @@ import {
   ChangeDetectorRef,
   Component,
   ComponentRef,
+  ElementRef,
   HostListener,
   Input,
   OnDestroy,
   OnInit,
   Optional,
+  ViewChild,
   inject,
 } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@@ -55,6 +57,11 @@ export class AddToCartComponent implements OnInit, OnDestroy {
    */
   @Input() product: Product;
 
+  /**
+   * Element responsible for opening the modal. The reference is used to refocus the modal after it closes.
+   */
+  @ViewChild('addToCartDialogTriggerEl') addToCartDialogTriggerEl: ElementRef;
+
   maxQuantity: number;
 
   hasStock: boolean = false;
@@ -77,9 +84,7 @@ export class AddToCartComponent implements OnInit, OnDestroy {
 
   iconTypes = ICON_TYPE;
 
-  @Optional() featureConfigService = inject(FeatureConfigService, {
-    optional: true,
-  });
+  private featureConfigService = inject(FeatureConfigService);
 
   /**
    * We disable the dialog launch on quantity input,
@@ -228,6 +233,9 @@ export class AddToCartComponent implements OnInit, OnDestroy {
     newEvent.quantity = quantity;
     newEvent.numberOfEntriesBeforeAdd = numberOfEntriesBeforeAdd;
     newEvent.pickupStoreName = storeName;
+    if (this.featureConfigService.isEnabled('a11yDialogTriggerRefocus')) {
+      newEvent.triggerElementRef = this.addToCartDialogTriggerEl;
+    }
     return newEvent;
   }
 
diff --git a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog-event.listener.ts b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog-event.listener.ts
index 59fb7509eed..39c5d7450da 100644
--- a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog-event.listener.ts
+++ b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog-event.listener.ts
@@ -56,7 +56,7 @@ export class AddedToCartDialogEventListener implements OnDestroy {
 
     const dialog = this.launchDialogService.openDialog(
       LAUNCH_CALLER.ADDED_TO_CART,
-      undefined,
+      event?.triggerElementRef,
       undefined,
       addToCartData
     );
diff --git a/feature-libs/cart/base/root/events/cart.events.ts b/feature-libs/cart/base/root/events/cart.events.ts
index 253b7ba9285..eeb4de4ec8a 100644
--- a/feature-libs/cart/base/root/events/cart.events.ts
+++ b/feature-libs/cart/base/root/events/cart.events.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { ElementRef } from '@angular/core';
 import { CxEvent } from '@spartacus/core';
 import { OrderEntry } from '../models/cart.model';
 
@@ -127,6 +128,11 @@ export class CartUiEventAddToCart extends CxEvent {
   quantity: number;
   numberOfEntriesBeforeAdd: number;
   pickupStoreName?: string;
+  /**
+   * Since the event can be used to open a dialog, we need to know which element triggered it.
+   * This way we can refocus on it after the dialog is closed.
+   */
+  triggerElementRef?: ElementRef;
 }
 
 /**
diff --git a/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.html b/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.html
index 45914c3b975..31c10993406 100644
--- a/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.html
+++ b/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.html
@@ -3,6 +3,6 @@
     [selectedOption]="pickupOption$ | async"
     [displayPickupLocation]="displayPickupLocation$ | async"
     (pickupOptionChange)="onPickupOptionChange($event)"
-    (pickupLocationChange)="openDialog()"
+    (pickupLocationChange)="openDialog($event)"
   ></cx-pickup-options>
 </ng-container>
diff --git a/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.spec.ts b/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.spec.ts
index bcdf9eb1290..5dc87103d57 100644
--- a/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.spec.ts
+++ b/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.spec.ts
@@ -2,7 +2,11 @@ import { CommonModule } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { I18nTestingModule, Product } from '@spartacus/core';
+import {
+  FeatureConfigService,
+  I18nTestingModule,
+  Product,
+} from '@spartacus/core';
 
 import {
   AugmentedPointOfService,
@@ -13,8 +17,8 @@ import {
 } from '@spartacus/pickup-in-store/root';
 import {
   CurrentProductService,
-  LaunchDialogService,
   LAUNCH_CALLER,
+  LaunchDialogService,
 } from '@spartacus/storefront';
 import { Observable, of, Subscription } from 'rxjs';
 import { PdpPickupOptionsContainerComponent } from './pdp-pickup-options-container.component';
@@ -80,6 +84,12 @@ class MockCurrentLocationService {
   }
 }
 
+class MockFeatureConfigService {
+  isEnabled() {
+    return true;
+  }
+}
+
 describe('PdpPickupOptionsComponent', () => {
   let component: PdpPickupOptionsContainerComponent;
   let fixture: ComponentFixture<PdpPickupOptionsContainerComponent>;
@@ -118,6 +128,10 @@ describe('PdpPickupOptionsComponent', () => {
           provide: CurrentLocationService,
           useClass: MockCurrentLocationService,
         },
+        {
+          provide: FeatureConfigService,
+          useClass: MockFeatureConfigService,
+        },
       ],
     });
 
diff --git a/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.ts b/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.ts
index 8a132982801..9521bb3af46 100644
--- a/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.ts
+++ b/feature-libs/pickup-in-store/components/container/pdp-pickup-options-container/pdp-pickup-options-container.component.ts
@@ -7,12 +7,13 @@
 import {
   Component,
   ElementRef,
+  inject,
   OnDestroy,
   OnInit,
   ViewChild,
   ViewContainerRef,
 } from '@angular/core';
-import { Product } from '@spartacus/core';
+import { FeatureConfigService, Product } from '@spartacus/core';
 
 import {
   AugmentedPointOfService,
@@ -26,8 +27,8 @@ import {
 } from '@spartacus/pickup-in-store/root';
 import {
   CurrentProductService,
-  LaunchDialogService,
   LAUNCH_CALLER,
+  LaunchDialogService,
 } from '@spartacus/storefront';
 import { combineLatest, iif, Observable, of, Subscription } from 'rxjs';
 import {
@@ -55,6 +56,12 @@ function isProductWithCode(
   templateUrl: 'pdp-pickup-options-container.component.html',
 })
 export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
+  // TODO: Remove element reference once 'a11yDialogTriggerRefocus' feature flag is removed.
+  /**
+   * @deprecated since 2211.28.0
+   * This reference does not point to any element and will be removed at earliest convinience.
+   * The 'triggerElement' is passed through 'PickupOptionChange' event instead.
+   */
   @ViewChild('open') element: ElementRef;
   subscription = new Subscription();
 
@@ -65,6 +72,7 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
   private productCode: string;
   private displayNameIsSet = false;
 
+  private featureConfigService = inject(FeatureConfigService);
   constructor(
     protected currentProductService: CurrentProductService,
     protected intendedPickupLocationService: IntendedPickupLocationFacade,
@@ -160,10 +168,17 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
     this.subscription.unsubscribe();
   }
 
-  openDialog(): void {
+  // TODO: Make argument required once 'a11yDialogTriggerRefocus' feature flag is removed.
+  /**
+   * @deprecated since 2211.28.0 - The use of TriggerElement param will become mandatory.
+   * @param triggerElement - The reference of element that triggered the dialog. Used to refocus on it after the dialog is closed.
+   */
+  openDialog(triggerElement?: ElementRef): void {
     const dialog = this.launchDialogService.openDialog(
       LAUNCH_CALLER.PICKUP_IN_STORE,
-      this.element,
+      this.featureConfigService.isEnabled('a11yDialogTriggerRefocus')
+        ? triggerElement
+        : this.element,
       this.vcr,
       { productCode: this.productCode }
     );
@@ -173,16 +188,46 @@ export class PdpPickupOptionsContainerComponent implements OnInit, OnDestroy {
     }
   }
 
-  onPickupOptionChange(option: PickupOption) {
-    this.intendedPickupLocationService.setPickupOption(
-      this.productCode,
-      option
-    );
-    if (option === 'delivery') {
-      return;
-    }
-    if (!this.displayNameIsSet) {
-      this.openDialog();
+  // TODO: Remove 'PickupOption' argument type once 'a11yDialogTriggerRefocus' feature flag is removed.
+  /**
+   * @deprecated since 2211.28.0 - Use event param instead of option.
+   * @param event - Object containing the selected option and the element that triggered the change.
+   */
+  onPickupOptionChange(option: PickupOption): void;
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  onPickupOptionChange(event: {
+    option: PickupOption;
+    triggerElement: ElementRef;
+  }): void;
+  onPickupOptionChange(
+    event: { option: PickupOption; triggerElement: ElementRef } | PickupOption
+  ): void {
+    if (
+      this.featureConfigService.isEnabled('a11yDialogTriggerRefocus') &&
+      typeof event === 'object'
+    ) {
+      const { option, triggerElement = undefined } = event;
+      this.intendedPickupLocationService.setPickupOption(
+        this.productCode,
+        option
+      );
+      if (option === 'delivery') {
+        return;
+      }
+      if (!this.displayNameIsSet) {
+        this.openDialog(triggerElement);
+      }
+    } else if (typeof event === 'string') {
+      this.intendedPickupLocationService.setPickupOption(
+        this.productCode,
+        event
+      );
+      if (event === 'delivery') {
+        return;
+      }
+      if (!this.displayNameIsSet) {
+        this.openDialog();
+      }
     }
   }
 }
diff --git a/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.html b/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.html
index 6d39b19c23c..2c2b3da2cfa 100644
--- a/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.html
+++ b/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.html
@@ -43,6 +43,7 @@
           |
           <button
             *cxFeature="'a11yUseButtonsForBtnLinks'"
+            #dialogTriggerEl
             [attr.data-store-location-link]="
               displayPickupLocation ? 'change' : 'select'
             "
@@ -59,6 +60,7 @@
           <a
             *cxFeature="'!a11yUseButtonsForBtnLinks'"
             role="button"
+            #dialogTriggerEl
             [attr.data-store-location-link]="
               displayPickupLocation ? 'change' : 'select'
             "
@@ -119,6 +121,7 @@
           |
           <button
             *cxFeature="'a11yUseButtonsForBtnLinks'"
+            #dialogTriggerEl
             [attr.data-store-location-link]="
               displayPickupLocation ? 'change' : 'select'
             "
@@ -134,6 +137,7 @@
           </button>
           <a
             *cxFeature="'!a11yUseButtonsForBtnLinks'"
+            #dialogTriggerEl
             role="button"
             [attr.data-store-location-link]="
               displayPickupLocation ? 'change' : 'select'
diff --git a/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.spec.ts b/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.spec.ts
index d6844809964..f0c52beea08 100644
--- a/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.spec.ts
+++ b/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.spec.ts
@@ -2,12 +2,18 @@ import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { I18nTestingModule } from '@spartacus/core';
+import { FeatureConfigService, I18nTestingModule } from '@spartacus/core';
 import { PickupOption } from '@spartacus/pickup-in-store/root';
 import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { Observable } from 'rxjs';
 import { PickupOptionsComponent } from './pickup-options.component';
 
+class MockFeatureConfigService {
+  isEnabled() {
+    return true;
+  }
+}
+
 describe('PickupOptionsComponent', () => {
   let component: PickupOptionsComponent;
   let fixture: ComponentFixture<PickupOptionsComponent>;
@@ -16,6 +22,9 @@ describe('PickupOptionsComponent', () => {
     TestBed.configureTestingModule({
       declarations: [PickupOptionsComponent, MockFeatureDirective],
       imports: [CommonModule, I18nTestingModule, ReactiveFormsModule],
+      providers: [
+        { provide: FeatureConfigService, useClass: MockFeatureConfigService },
+      ],
     });
     fixture = TestBed.createComponent(PickupOptionsComponent);
     component = fixture.componentInstance;
@@ -43,7 +52,10 @@ describe('PickupOptionsComponent', () => {
     spyOn(component.pickupOptionChange, 'emit');
     component.onPickupOptionChange('delivery');
 
-    expect(component.pickupOptionChange.emit).toHaveBeenCalledWith('delivery');
+    expect(component.pickupOptionChange.emit).toHaveBeenCalledWith({
+      option: 'delivery',
+      triggerElement: component.triggerElement,
+    });
   });
 
   it('should emit on onPickupLocationChange', () => {
diff --git a/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.ts b/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.ts
index 7cb40e0cf54..a3a310639c3 100644
--- a/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.ts
+++ b/feature-libs/pickup-in-store/components/presentational/pickup-options/pickup-options.component.ts
@@ -6,13 +6,16 @@
 
 import {
   Component,
+  ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   Output,
+  ViewChild,
 } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
-import { useFeatureStyles } from '@spartacus/core';
+import { FeatureConfigService, useFeatureStyles } from '@spartacus/core';
 import { PickupOption } from '@spartacus/pickup-in-store/root';
 
 /**
@@ -32,9 +35,18 @@ export class PickupOptionsComponent implements OnChanges {
   @Input() disableControls = false;
 
   /** Emitted when the selected option is changed. */
-  @Output() pickupOptionChange = new EventEmitter<PickupOption>();
+  // TODO: Remove the 'PickupOption' type when the `a11yDialogTriggerRefocus` feature flag is removed.
+  @Output() pickupOptionChange = new EventEmitter<
+    { option: PickupOption; triggerElement: ElementRef } | PickupOption
+  >();
+
   /** Emitted when a new store should be selected. */
-  @Output() pickupLocationChange = new EventEmitter<undefined>();
+  // TODO: Remove the undefined type when the `a11yDialogTriggerRefocus` feature flag is removed.
+  @Output() pickupLocationChange = new EventEmitter<ElementRef | undefined>();
+
+  @ViewChild('dialogTriggerEl') triggerElement: ElementRef;
+
+  private featureConfigService = inject(FeatureConfigService);
 
   pickupId = `pickup-id:${Math.random().toString(16)}`;
   deliveryId = `delivery-id:${Math.random().toString(16)}`;
@@ -57,12 +69,23 @@ export class PickupOptionsComponent implements OnChanges {
 
   /** Emit a new selected option. */
   onPickupOptionChange(option: PickupOption): void {
-    this.pickupOptionChange.emit(option);
+    if (this.featureConfigService.isEnabled('a11yDialogTriggerRefocus')) {
+      this.pickupOptionChange.emit({
+        option,
+        triggerElement: this.triggerElement,
+      });
+    } else {
+      this.pickupOptionChange.emit(option);
+    }
   }
 
   /** Emit to indicate a new store should be selected. */
   onPickupLocationChange(): boolean {
-    this.pickupLocationChange.emit();
+    if (this.featureConfigService.isEnabled('a11yDialogTriggerRefocus')) {
+      this.pickupLocationChange.emit(this.triggerElement);
+    } else {
+      this.pickupLocationChange.emit();
+    }
     // Return false to stop `onPickupOptionChange` being called after this
     return false;
   }
diff --git a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-single-selection-bundle-dropdown.scss b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-single-selection-bundle-dropdown.scss
index 429576a9a07..04f02a344b9 100644
--- a/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-single-selection-bundle-dropdown.scss
+++ b/feature-libs/product-configurator/rulebased/styles/_configurator-attribute-single-selection-bundle-dropdown.scss
@@ -26,6 +26,13 @@
       width: 100%;
     }
 
+    .cx-product-card {
+      @include media-breakpoint-down(sm) {
+        padding-inline-start: 0px;
+        padding-inline-end: 0px;
+      }
+    }
+
     &:first-of-type {
       .cx-product-card-rows {
         padding-inline-start: 0px;
diff --git a/integration-libs/cds/assets/translations/en/index.ts b/integration-libs/cds/assets/translations/en/index.ts
index 69c33bbbee1..28b90c44510 100644
--- a/integration-libs/cds/assets/translations/en/index.ts
+++ b/integration-libs/cds/assets/translations/en/index.ts
@@ -5,6 +5,8 @@
  */
 
 import recentSearches from './recentSearches.json';
+import trendingSearches from './trendingSearches.json';
 export const en = {
   cdsRecentSearches: recentSearches,
+  cdsTrendingSearches: trendingSearches,
 };
diff --git a/integration-libs/cds/assets/translations/en/trendingSearches.json b/integration-libs/cds/assets/translations/en/trendingSearches.json
new file mode 100644
index 00000000000..9b0b842b1f3
--- /dev/null
+++ b/integration-libs/cds/assets/translations/en/trendingSearches.json
@@ -0,0 +1,6 @@
+{
+  "cdsTrendingSearches": {
+    "trendingSearches": "Trending Searches",
+    "ariaTrendingSearches": "typing trending searches"
+  }
+}
diff --git a/integration-libs/cds/assets/translations/translations.ts b/integration-libs/cds/assets/translations/translations.ts
index ece16fa3ced..e38e850b0bd 100644
--- a/integration-libs/cds/assets/translations/translations.ts
+++ b/integration-libs/cds/assets/translations/translations.ts
@@ -13,4 +13,5 @@ export const cdsTranslations: TranslationResources = {
 
 export const cdsTranslationChunksConfig: TranslationChunksConfig = {
   cdsRecentSearches: ['cdsRecentSearches'],
+  cdsTrendingSearches: ['cdsTrendingSearches'],
 };
diff --git a/integration-libs/cds/src/cds-models/cds-endpoints.model.ts b/integration-libs/cds/src/cds-models/cds-endpoints.model.ts
index dd55ca20cf1..87aa6263d5c 100644
--- a/integration-libs/cds/src/cds-models/cds-endpoints.model.ts
+++ b/integration-libs/cds/src/cds-models/cds-endpoints.model.ts
@@ -11,4 +11,5 @@ export interface CdsEndpoints {
    * @member {string}
    */
   strategyProducts: string;
+  searchIntelligence: string;
 }
diff --git a/integration-libs/cds/src/cds.module.ts b/integration-libs/cds/src/cds.module.ts
index 13b94d6ec45..fa72109fb6d 100644
--- a/integration-libs/cds/src/cds.module.ts
+++ b/integration-libs/cds/src/cds.module.ts
@@ -14,6 +14,7 @@ import {
   TrackingModule,
 } from './profiletag';
 import { RecentSearchesModule } from './recent-searches/recent-searches.module';
+import { TrendingSearchesModule } from './trending-searches/trending-searches.module';
 
 @NgModule({
   imports: [
@@ -21,6 +22,7 @@ import { RecentSearchesModule } from './recent-searches/recent-searches.module';
     TrackingModule,
     MerchandisingModule,
     RecentSearchesModule,
+    TrendingSearchesModule,
   ],
 })
 export class CdsModule {
diff --git a/integration-libs/cds/src/config/cds-config-validator.spec.ts b/integration-libs/cds/src/config/cds-config-validator.spec.ts
index 1939746646b..a0b25a83b5e 100644
--- a/integration-libs/cds/src/config/cds-config-validator.spec.ts
+++ b/integration-libs/cds/src/config/cds-config-validator.spec.ts
@@ -82,6 +82,7 @@ describe('cdsConfigValidator', () => {
         baseUrl: '',
         endpoints: {
           strategyProducts: undefined,
+          searchIntelligence: undefined,
         },
       },
     };
@@ -95,6 +96,7 @@ describe('cdsConfigValidator', () => {
         baseUrl: '',
         endpoints: {
           strategyProducts: '',
+          searchIntelligence: '',
         },
       },
     };
diff --git a/integration-libs/cds/src/config/default-cds-config.ts b/integration-libs/cds/src/config/default-cds-config.ts
index a627c3254b2..18d10cfc9df 100644
--- a/integration-libs/cds/src/config/default-cds-config.ts
+++ b/integration-libs/cds/src/config/default-cds-config.ts
@@ -12,6 +12,8 @@ export const DEFAULT_CDS_CONFIG: CdsConfig = {
     baseUrl: '',
     endpoints: {
       strategyProducts: '/strategy/${tenant}/strategies/${strategyId}/products',
+      searchIntelligence:
+        '/search-intelligence/v1/sites/${cdsSiteId}/trendingSearches',
     },
     merchandising: {
       defaultCarouselViewportThreshold: 80,
diff --git a/integration-libs/cds/src/profiletag/services/profiletag-event.service.spec.ts b/integration-libs/cds/src/profiletag/services/profiletag-event.service.spec.ts
index 2a69bd44eff..8321bb79a6e 100644
--- a/integration-libs/cds/src/profiletag/services/profiletag-event.service.spec.ts
+++ b/integration-libs/cds/src/profiletag/services/profiletag-event.service.spec.ts
@@ -18,6 +18,8 @@ const mockCDSConfig: CdsConfig = {
     baseUrl: 'example.com',
     endpoints: {
       strategyProducts: 'example',
+      searchIntelligence:
+        '/search-intelligence/v1/sites/${cdsSiteId}/trendingSearches',
     },
     profileTag: {
       javascriptUrl: 'https:tag.static.eu.context.cloud.sap',
diff --git a/integration-libs/cds/src/recent-searches/recent-searches.component.spec.ts b/integration-libs/cds/src/recent-searches/recent-searches.component.spec.ts
index f58504d4052..966c59e8d94 100644
--- a/integration-libs/cds/src/recent-searches/recent-searches.component.spec.ts
+++ b/integration-libs/cds/src/recent-searches/recent-searches.component.spec.ts
@@ -53,6 +53,7 @@ describe('RecentSearchesComponent', () => {
   const searchBoxComponentServiceMock = {
     changeSelectedWord: jasmine.createSpy('changeSelectedWord'),
     shareEvent: jasmine.createSpy('shareEvent'),
+    setRecentSearches: (enabled: boolean = false) => of(enabled),
   };
 
   beforeEach(async () => {
diff --git a/integration-libs/cds/src/recent-searches/recent-searches.component.ts b/integration-libs/cds/src/recent-searches/recent-searches.component.ts
index e413d0ee77c..a5b999284d6 100644
--- a/integration-libs/cds/src/recent-searches/recent-searches.component.ts
+++ b/integration-libs/cds/src/recent-searches/recent-searches.component.ts
@@ -16,8 +16,8 @@ import {
   SearchBoxComponentService,
 } from '@spartacus/storefront';
 import { RecentSearchesService } from './recent-searches.service';
-import { map, switchMap } from 'rxjs/operators';
-import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+import { combineLatest, Observable } from 'rxjs';
 
 export interface SearchBoxOutlet {
   search: string;
@@ -26,35 +26,40 @@ export interface SearchBoxOutlet {
 }
 
 const MAX_RECENT_SEARCHES = 5;
+
 @Component({
   selector: 'cx-recent-searches',
   templateUrl: './recent-searches.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RecentSearchesComponent implements OnInit {
+  public result$: Observable<string[]>;
+  public outletContext$: Observable<SearchBoxOutlet>;
   protected recentSearchesService = inject(RecentSearchesService);
   protected searchBoxComponentService = inject(SearchBoxComponentService);
-  result$ = this.outletContext?.context$.pipe(
-    switchMap((context: SearchBoxOutlet) =>
-      this.recentSearchesService.recentSearches$.pipe(
-        map((recentSearches: string[]) =>
-          recentSearches
-            .filter(
-              (phrase) =>
-                phrase.toLowerCase().indexOf(context.search.toLowerCase()) >= 0
-            )
-            .slice(0, context.maxRecentSearches ?? MAX_RECENT_SEARCHES)
-        )
-      )
-    )
-  );
-  outletContext$: Observable<SearchBoxOutlet>;
 
   constructor(
     @Optional() protected outletContext: OutletContextData<SearchBoxOutlet>
   ) {}
 
   ngOnInit() {
+    this.result$ = combineLatest([
+      this.outletContext?.context$,
+      this.recentSearchesService.recentSearches$,
+    ]).pipe(
+      map(([context, recentSearches]: [SearchBoxOutlet, string[]]) =>
+        recentSearches
+          .filter(
+            (phrase) =>
+              phrase.toLowerCase().indexOf(context.search.toLowerCase()) >= 0
+          )
+          .slice(0, context.maxRecentSearches ?? MAX_RECENT_SEARCHES)
+      ),
+      tap((results) => {
+        this.searchBoxComponentService.setRecentSearches(!!results.length);
+      })
+    );
+
     this.outletContext$ = this.outletContext.context$;
   }
 
diff --git a/integration-libs/cds/src/trending-searches/model/index.ts b/integration-libs/cds/src/trending-searches/model/index.ts
new file mode 100644
index 00000000000..1fbe49e17e0
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/model/index.ts
@@ -0,0 +1,7 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export * from './trending-searches.model';
diff --git a/integration-libs/cds/src/trending-searches/model/trending-searches.model.ts b/integration-libs/cds/src/trending-searches/model/trending-searches.model.ts
new file mode 100644
index 00000000000..404f2eca74c
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/model/trending-searches.model.ts
@@ -0,0 +1,13 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface SearchPhrases {
+  searchPhrase: string;
+  count: number;
+}
+export interface SearchBoxOutletTrendingSearches {
+  maxTrendingSearches?: number;
+}
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.html b/integration-libs/cds/src/trending-searches/trending-searches.component.html
new file mode 100644
index 00000000000..166d28f54bf
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/trending-searches.component.html
@@ -0,0 +1,26 @@
+<ng-container *ngIf="searchPhrases$ | async as searchPhrases">
+  <ng-container *ngIf="searchPhrases?.length">
+    <div class="message">
+      {{ 'cdsTrendingSearches.trendingSearches' | cxTranslate }}
+    </div>
+
+    <ul
+      class="recent-searches"
+      [ariaLabel]="'cdsTrendingSearches.ariaTrendingSearches' | cxTranslate"
+    >
+      <li *ngFor="let phrase of searchPhrases">
+        <a
+          role="option"
+          [routerLink]="
+            {
+              cxRoute: 'search',
+              params: { query: phrase.searchPhrase },
+            } | cxUrl
+          "
+        >
+          {{ phrase.searchPhrase }}
+        </a>
+      </li>
+    </ul>
+  </ng-container>
+</ng-container>
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.spec.ts b/integration-libs/cds/src/trending-searches/trending-searches.component.spec.ts
new file mode 100644
index 00000000000..fb65c509db9
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/trending-searches.component.spec.ts
@@ -0,0 +1,71 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  OutletContextData,
+  SearchBoxComponentService,
+} from '@spartacus/storefront';
+import { BehaviorSubject, of } from 'rxjs';
+import { I18nTestingModule } from '@spartacus/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TrendingSearchesComponent } from './trending-searches.component';
+import { SearchBoxOutletTrendingSearches } from './model';
+import { TrendingSearchesService } from './trending-searches.service';
+
+describe('TrendingSearchesComponent', () => {
+  let component: TrendingSearchesComponent;
+  let fixture: ComponentFixture<TrendingSearchesComponent>;
+  let context$ = new BehaviorSubject<SearchBoxOutletTrendingSearches>({
+    maxTrendingSearches: 5,
+  });
+  let trendingSearchesServiceMock = {
+    getTrendingSearches: () => of([]),
+  };
+  let searchBoxComponentServiceMock = {
+    setTrendingSearches: (enabled: boolean = false) => of(enabled),
+  };
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [I18nTestingModule, RouterTestingModule],
+      declarations: [TrendingSearchesComponent],
+      providers: [
+        {
+          provide: TrendingSearchesService,
+          useValue: trendingSearchesServiceMock,
+        },
+        {
+          provide: SearchBoxComponentService,
+          useValue: searchBoxComponentServiceMock,
+        },
+        { provide: OutletContextData, useValue: { context$ } },
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TrendingSearchesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit the correct $context value through contextObservable', () => {
+    component.contextObservable.subscribe((value) => {
+      expect(value).toEqual({ maxTrendingSearches: 5 });
+    });
+  });
+
+  it('should not display any trending searches when none are available', () => {
+    expect(fixture.nativeElement.querySelector('.message')).toBeNull();
+  });
+});
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.ts b/integration-libs/cds/src/trending-searches/trending-searches.component.ts
new file mode 100644
index 00000000000..9c980a6d0d1
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/trending-searches.component.ts
@@ -0,0 +1,63 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+  Component,
+  OnInit,
+  inject,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import {
+  OutletContextData,
+  SearchBoxComponentService,
+} from '@spartacus/storefront';
+import { TrendingSearchesService } from './trending-searches.service';
+import { map, switchMap, tap } from 'rxjs/operators';
+import { EMPTY, Observable } from 'rxjs';
+import { SearchBoxOutletTrendingSearches, SearchPhrases } from './model';
+
+const MAX_TRENDING_SEARCHES = 5;
+
+@Component({
+  selector: 'cx-trending-searches',
+  templateUrl: './trending-searches.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TrendingSearchesComponent implements OnInit {
+  public searchPhrases$: Observable<SearchPhrases[]>;
+
+  protected searchBoxComponentService = inject(SearchBoxComponentService);
+  protected trendingSearchesService = inject(TrendingSearchesService);
+  protected outletContext = inject(OutletContextData, {
+    optional: true,
+  }) as OutletContextData | null;
+
+  ngOnInit() {
+    this.searchPhrases$ = this.getSearchPhrases().pipe(
+      tap((searchPhrases) => {
+        this.searchBoxComponentService.setTrendingSearches(
+          !!searchPhrases.length
+        );
+      })
+    );
+  }
+
+  protected getSearchPhrases(): Observable<SearchPhrases[]> {
+    return this.contextObservable.pipe(
+      switchMap((context: SearchBoxOutletTrendingSearches) => {
+        const maxSearches =
+          context?.maxTrendingSearches ?? MAX_TRENDING_SEARCHES;
+        return this.trendingSearchesService
+          .getTrendingSearches()
+          .pipe(map((data) => (data ? data.slice(0, maxSearches) : [])));
+      })
+    );
+  }
+
+  get contextObservable() {
+    return this.outletContext?.context$ ?? EMPTY;
+  }
+}
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.module.ts b/integration-libs/cds/src/trending-searches/trending-searches.module.ts
new file mode 100644
index 00000000000..958a8451145
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/trending-searches.module.ts
@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import {
+  OutletPosition,
+  provideOutlet,
+  SearchBoxModule,
+  SearchBoxOutlets,
+} from '@spartacus/storefront';
+import { I18nModule, UrlModule } from '@spartacus/core';
+import { TrendingSearchesComponent } from './trending-searches.component';
+
+@NgModule({
+  exports: [],
+  declarations: [TrendingSearchesComponent],
+  imports: [CommonModule, I18nModule, SearchBoxModule, UrlModule, RouterModule],
+  providers: [
+    provideOutlet({
+      id: SearchBoxOutlets.TRENDING_SEARCHES,
+      component: TrendingSearchesComponent,
+      position: OutletPosition.AFTER,
+    }),
+  ],
+})
+export class TrendingSearchesModule {}
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.service.spec.ts b/integration-libs/cds/src/trending-searches/trending-searches.service.spec.ts
new file mode 100644
index 00000000000..5aaefb080ec
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/trending-searches.service.spec.ts
@@ -0,0 +1,138 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ */
+
+import {
+  fakeAsync,
+  TestBed,
+  tick,
+  discardPeriodicTasks,
+} from '@angular/core/testing';
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing';
+import { BaseSiteService, WindowRef } from '@spartacus/core';
+import { TrendingSearchesService } from './trending-searches.service';
+import { Observable, of } from 'rxjs';
+import { SearchPhrases } from './model';
+import { CdsConfig } from '@spartacus/cds';
+
+const mockCDSConfig: CdsConfig = {
+  cds: {
+    tenant: 'storksfront',
+    baseUrl: 'https://api.stage.context.cloud.sap',
+    endpoints: {
+      strategyProducts: '',
+      searchIntelligence:
+        '/search-intelligence/v1/sites/${cdsSiteId}/trendingSearches',
+    },
+  },
+};
+
+class MockBaseSiteService {
+  getActive(): Observable<string> {
+    return of('main');
+  }
+}
+
+describe('TrendingSearchesService', () => {
+  let service: TrendingSearchesService;
+  let httpMock: HttpTestingController;
+  let windowRef: WindowRef;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        TrendingSearchesService,
+        { provide: BaseSiteService, useClass: MockBaseSiteService },
+        { provide: CdsConfig, useValue: mockCDSConfig },
+        WindowRef,
+      ],
+    });
+
+    service = TestBed.inject(TrendingSearchesService);
+    httpMock = TestBed.inject(HttpTestingController);
+    windowRef = TestBed.inject(WindowRef);
+
+    // Set up window mock
+    (<any>windowRef.nativeWindow).Y_TRACKING = {
+      config: {
+        cdsSiteId: 'main',
+      },
+    };
+  });
+
+  afterEach(() => {
+    httpMock.verify();
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should emit trending searches when available', fakeAsync(() => {
+    const mockSearchPhrases: SearchPhrases[] = [
+      { searchPhrase: 'test1', count: 10 },
+      { searchPhrase: 'test2', count: 15 },
+    ];
+
+    let result: SearchPhrases[] | undefined;
+    const subscription = service
+      .getTrendingSearches()
+      .subscribe((searchPhrases) => {
+        result = searchPhrases;
+      });
+
+    // Fast-forward through the availability check
+    tick(250);
+
+    // Handle the HTTP request
+    const req = httpMock.expectOne(
+      'https://storksfront-main.api.stage.context.cloud.sap/search-intelligence/v1/sites/main/trendingSearches'
+    );
+    expect(req.request.method).toBe('GET');
+    req.flush({ searchPhrases: mockSearchPhrases });
+
+    // Verify the result
+    expect(result).toEqual(mockSearchPhrases);
+
+    // Clean up
+    subscription.unsubscribe();
+    service.ngOnDestroy();
+
+    // Discard any remaining periodic timers
+    discardPeriodicTasks();
+  }));
+
+  it('should not emit when cdsSiteId is not available', fakeAsync(() => {
+    // Reset window mock
+    (<any>windowRef.nativeWindow).Y_TRACKING = {
+      config: {
+        cdsSiteId: undefined,
+      },
+    };
+
+    let emitted = false;
+    const subscription = service.getTrendingSearches().subscribe(() => {
+      emitted = true;
+    });
+
+    for (let i = 0; i < 100; i++) {
+      tick(250);
+    }
+
+    expect(emitted).toBeFalse();
+
+    // Clean up
+    subscription.unsubscribe();
+    service.ngOnDestroy();
+
+    // Discard any remaining periodic timers
+    discardPeriodicTasks();
+  }));
+});
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.service.ts b/integration-libs/cds/src/trending-searches/trending-searches.service.ts
new file mode 100644
index 00000000000..949dbce9596
--- /dev/null
+++ b/integration-libs/cds/src/trending-searches/trending-searches.service.ts
@@ -0,0 +1,93 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { inject, Injectable, OnDestroy } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { CdsEndpointsService } from '../services';
+import { CdsConfig } from '../config';
+import { BaseSiteService, WindowRef } from '@spartacus/core';
+import {
+  BehaviorSubject,
+  Observable,
+  timer,
+  switchMap,
+  map,
+  takeWhile,
+  take,
+  shareReplay,
+  EMPTY,
+  catchError,
+  filter,
+} from 'rxjs';
+import { SearchPhrases } from './model';
+
+const AVAILABILITY_CHECK_INTERVAL = 250;
+const MAX_AVAILABILITY_CHECKS = 100;
+const POLL_INTERVAL = 15 * 60000; // 15 minutes
+const TRENDING_SEARCHES_ENDPOINT_KEY = 'searchIntelligence';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TrendingSearchesService implements OnDestroy {
+  protected baseSiteService = inject(BaseSiteService);
+  protected cdsConfig = inject(CdsConfig);
+  protected cdsEndpointsService = inject(CdsEndpointsService);
+  protected httpClient = inject(HttpClient);
+  protected winRef = inject(WindowRef);
+
+  private destroy$ = new BehaviorSubject<boolean>(false);
+  private trendingSearches$ = this.initTrendingSearches().pipe(shareReplay(1));
+
+  protected checkAvailability(): Observable<string> {
+    return timer(0, AVAILABILITY_CHECK_INTERVAL).pipe(
+      map(
+        () => (this.winRef.nativeWindow as any)?.Y_TRACKING?.config?.cdsSiteId
+      ),
+      takeWhile((cdsSiteId) => !cdsSiteId, true),
+      take(MAX_AVAILABILITY_CHECKS),
+      filter((cdsSiteId): cdsSiteId is string => !!cdsSiteId)
+    );
+  }
+
+  protected constructTrendingSearchUrl(cdsSiteId: string): string {
+    const originalEndpointUrl = this.cdsEndpointsService
+      .getUrl(TRENDING_SEARCHES_ENDPOINT_KEY)
+      .replaceAll('${cdsSiteId}', cdsSiteId);
+    const httpsPrefix = `https://${this.cdsConfig.cds.tenant}-${cdsSiteId}.`;
+    return originalEndpointUrl.replace(/https:\/\//g, httpsPrefix);
+  }
+
+  protected fetchTrendingSearches(url: string): Observable<SearchPhrases[]> {
+    return this.httpClient.get<any>(url).pipe(
+      map((data) => data?.searchPhrases),
+      catchError(() => {
+        return EMPTY;
+      })
+    );
+  }
+
+  protected initTrendingSearches(): Observable<SearchPhrases[]> {
+    return this.checkAvailability().pipe(
+      switchMap((cdsSiteId) => {
+        const url = this.constructTrendingSearchUrl(cdsSiteId);
+        return timer(0, POLL_INTERVAL).pipe(
+          switchMap(() => this.fetchTrendingSearches(url)),
+          takeWhile(() => !this.destroy$.value)
+        );
+      })
+    );
+  }
+
+  getTrendingSearches(): Observable<SearchPhrases[]> {
+    return this.trendingSearches$;
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d5889b11387..d63f1c4438c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -98,6 +98,8 @@
         "jasmine-core": "~5.1.2",
         "jasmine-marbles": "^0.9.2",
         "jest": "^29.0.0",
+        "jest-circus": "^29.0.0",
+        "jest-environment-node": "^29.0.0",
         "jest-preset-angular": "13.1.6",
         "jsonc-parser": "~3.2.1",
         "karma": "~6.4.1",
diff --git a/package.json b/package.json
index 6d24e653bb8..6fc3e9599a3 100644
--- a/package.json
+++ b/package.json
@@ -209,6 +209,8 @@
     "jasmine-core": "~5.1.2",
     "jasmine-marbles": "^0.9.2",
     "jest": "^29.0.0",
+    "jest-circus": "^29.0.0",
+    "jest-environment-node": "^29.0.0",
     "jest-preset-angular": "13.1.6",
     "jsonc-parser": "~3.2.1",
     "karma": "~6.4.1",
@@ -238,4 +240,4 @@
     "webpack": "~5.94.0",
     "webpack-cli": "^5.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
index 45cd3f21b6e..a7704a7c719 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -71,6 +71,11 @@ export interface FeatureTogglesInterface {
    */
   recentSearches?: boolean;
 
+  /**
+   * In `SearchBoxComponent` it shows the trending searches.
+   */
+  trendingSearches?: boolean;
+
   /**
    * In `InvoicesListComponent` it sorts invoices by the date of the invoice itself.
    * Previously the sorting was done by the date of creating an invoice entry.
@@ -555,6 +560,12 @@ export interface FeatureTogglesInterface {
    */
   a11yDialogsHeading?: boolean;
 
+  /**
+   * When enabled, the focus will be returned to the trigger element after the dialog is closed.
+   * Affected components: 'AddtoCartComponent', 'PickupOptionsComponent'
+   */
+  a11yDialogTriggerRefocus?: boolean;
+
   /**
    * The 'AddToWishListComponent' will restore focus to the button after adding or removing an item from the wishlist.
    */
@@ -628,6 +639,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   showDownloadProposalButton: false,
   showPromotionsInPDP: true,
   recentSearches: true,
+  trendingSearches: false,
   pdfInvoicesSortByInvoiceDate: false,
   storeFrontLibCardParagraphTruncated: true,
   useProductCarouselBatchApi: false,
@@ -703,6 +715,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yQuickOrderAriaControls: false,
   a11yRemoveStatusLoadedRole: false,
   a11yDialogsHeading: false,
+  a11yDialogTriggerRefocus: false,
   a11yAddToWishlistFocus: false,
   a11ySearchBoxFocusOnEscape: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
diff --git a/projects/schematics/src/dependencies.json b/projects/schematics/src/dependencies.json
index c32de33baee..614651107a5 100644
--- a/projects/schematics/src/dependencies.json
+++ b/projects/schematics/src/dependencies.json
@@ -25,7 +25,9 @@
   },
   "ssr-tests": {
     "@spartacus/core": "2211.29.1",
-    "http-proxy": "^1.18.1"
+    "http-proxy": "^1.18.1",
+    "jest-circus": "^29.0.0",
+    "jest-environment-node": "^29.0.0"
   },
   "storefrontapp-e2e-cypress": {},
   "@spartacus/storefront": {
diff --git a/projects/ssr-tests/jest.config.js b/projects/ssr-tests/jest.config.js
index 5753f3804ac..9216d61df84 100644
--- a/projects/ssr-tests/jest.config.js
+++ b/projects/ssr-tests/jest.config.js
@@ -1,23 +1,14 @@
 const { pathsToModuleNameMapper } = require('ts-jest');
 const { compilerOptions } = require('./tsconfig.json');
-const { defaultTransformerOptions } = require('jest-preset-angular/presets');
 
 /** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 module.exports = {
-  preset: 'jest-preset-angular',
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths || {}, {
     prefix: '<rootDir>/',
   }),
-  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
   testMatch: ['**/+(*.)+(spec).+(ts)'],
   transform: {
-    '^.+\\.(ts|js|mjs|html|svg)$': [
-      'jest-preset-angular',
-      {
-        ...defaultTransformerOptions,
-        tsconfig: '<rootDir>/tsconfig.json',
-      },
-    ],
+    '^.+\\.(ts|js|mjs)$': ['ts-jest'],
   },
 
   collectCoverage: false,
@@ -31,4 +22,6 @@ module.exports = {
       lines: 90,
     },
   },
+  testEnvironment: './src/environments/custom-test-environment.ts',
+  globalSetup: './validate-ssr-build.ts',
 };
diff --git a/projects/ssr-tests/package.json b/projects/ssr-tests/package.json
index b6f6097cfa6..2ae4e1825d2 100644
--- a/projects/ssr-tests/package.json
+++ b/projects/ssr-tests/package.json
@@ -18,6 +18,8 @@
   },
   "peerDependencies": {
     "@spartacus/core": "2211.29.1",
-    "http-proxy": "^1.18.1"
+    "http-proxy": "^1.18.1",
+    "jest-circus": "^29.0.0",
+    "jest-environment-node": "^29.0.0"
   }
 }
diff --git a/projects/ssr-tests/setup-jest.ts b/projects/ssr-tests/setup-jest.ts
deleted file mode 100644
index 2b340f94b88..00000000000
--- a/projects/ssr-tests/setup-jest.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2023 SAP Spartacus team <spartacus-team@sap.com>
- * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
- *
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import 'jest-preset-angular/setup-jest';
-import 'zone.js';
diff --git a/projects/ssr-tests/src/environments/custom-test-environment.ts b/projects/ssr-tests/src/environments/custom-test-environment.ts
new file mode 100644
index 00000000000..22c6a7adf69
--- /dev/null
+++ b/projects/ssr-tests/src/environments/custom-test-environment.ts
@@ -0,0 +1,61 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Event, State } from 'jest-circus';
+import { TestEnvironment as NodeEnvironment } from 'jest-environment-node';
+import { getRawLogsPretty } from '../utils/log.utils';
+
+/**
+ * This is a custom Jest environment that adds the SSR logs to the test errors.
+ * The logs are added to the error `cause` property for failed tests,
+ * so those logs will be printed by Jest along with the test error.
+ */
+export default class CustomTestEnvironment extends NodeEnvironment {
+  // For comparison, see the original source code of Jest-Circus:
+  // https://github.com/jestjs/jest/blob/bd1c6db7c15c23788ca3e09c919138e48dd3b28a/packages/jest-circus/src/formatNodeAssertErrors.ts#L45
+  async handleTestEvent(event: Event, _state: State) {
+    if (event.name === 'test_done') {
+      event.test.errors = event.test.errors.map((errors) => {
+        if (Array.isArray(errors)) {
+          const [originalError, asyncError] = errors;
+
+          const ssrLogs = getSsrLogs();
+          // Error's `cause` property is the only property printed by Jest
+          // besides `message` that we can utilize for attaching logs.
+          // No other custom properties are printed by Jest.
+          // See their source code of their function `formatExecError`:
+          // https://github.com/jestjs/jest/blob/bd1c6db7c15c23788ca3e09c919138e48dd3b28a/packages/jest-message-util/src/index.ts#L436
+          addCauseToError({
+            error: originalError, // e.g. error when an expect() fails
+            cause: ssrLogs,
+          });
+          addCauseToError({
+            error: asyncError, // e.g. error when a test timeout happens
+            cause: ssrLogs,
+          });
+        }
+        return errors;
+      });
+    }
+  }
+}
+
+function addCauseToError({ error, cause }: { error: any; cause: any }) {
+  // in some cases, the error might be a string, not an object
+  if (
+    typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    'stack' in error
+  ) {
+    error.cause = cause;
+  }
+}
+
+function getSsrLogs() {
+  const readableLogs = getRawLogsPretty().join('\n');
+  return `(more context below)\n--- SSR LOGS (with JSONs pretty-printed) ---\n${readableLogs}\n--- SSR LOGS END ---`;
+}
diff --git a/projects/ssr-tests/src/ssr-testing.spec.ts b/projects/ssr-tests/src/ssr-testing.spec.ts
index 335d1514185..3f696fedc02 100644
--- a/projects/ssr-tests/src/ssr-testing.spec.ts
+++ b/projects/ssr-tests/src/ssr-testing.spec.ts
@@ -19,13 +19,12 @@ describe('SSR E2E', () => {
 
   describe('With SSR error handling', () => {
     describe('Common behavior', () => {
-      beforeEach(async () => {
-        await SsrUtils.startSsrServer();
-      });
+      describe('With default SSR request timeout', () => {
+        beforeEach(async () => {
+          await SsrUtils.startSsrServer();
+        });
 
-      it(
-        'should receive success response with request',
-        LogUtils.attachLogsToErrors(async () => {
+        it('should receive success response with request', async () => {
           backendProxy = await ProxyUtils.startBackendProxyServer({
             target: BACKEND_BASE_URL,
           });
@@ -39,12 +38,9 @@ describe('SSR E2E', () => {
           expect(logsMessages).toContain(
             `Request is waiting for the SSR rendering to complete (${REQUEST_PATH})`
           );
-        })
-      );
+        });
 
-      it(
-        'should receive response with 404 when page does not exist',
-        LogUtils.attachLogsToErrors(async () => {
+        it('should receive response with 404 when page does not exist', async () => {
           backendProxy = await ProxyUtils.startBackendProxyServer({
             target: BACKEND_BASE_URL,
           });
@@ -52,44 +48,87 @@ describe('SSR E2E', () => {
             path: REQUEST_PATH + 'not-existing-page',
           });
           expect(response.statusCode).toEqual(404);
-        })
-      );
+        });
 
-      it(
-        'should receive response with status 404 if HTTP error occurred when calling cms/pages API URL',
-        LogUtils.attachLogsToErrors(async () => {
+        it('should receive response with status 404 if HTTP error occurred when calling cms/pages API URL', async () => {
           backendProxy = await ProxyUtils.startBackendProxyServer({
             target: BACKEND_BASE_URL,
-            callback: (proxyRes, req) => {
+            responseInterceptor: ({ res, req, body }) => {
               if (req.url?.includes('cms/pages')) {
-                proxyRes.statusCode = 404;
+                res.statusCode = 404;
               }
+              res.end(body);
             },
           });
           const response = await HttpUtils.sendRequestToSsrServer({
             path: REQUEST_PATH,
           });
           expect(response.statusCode).toEqual(404);
-        })
-      );
+        });
 
-      it.skip(
-        'should receive response with status 500 if HTTP error occurred when calling other than cms/pages API URL',
-        LogUtils.attachLogsToErrors(async () => {
+        it('should receive response with status 500 if HTTP error occurred when calling other than cms/pages API URL', async () => {
           backendProxy = await ProxyUtils.startBackendProxyServer({
             target: BACKEND_BASE_URL,
-            callback: (proxyRes, req) => {
+            responseInterceptor: ({ res, req, body }) => {
               if (req.url?.includes('cms/components')) {
-                proxyRes.statusCode = 404;
+                res.statusCode = 404;
               }
+              res.end(body);
             },
           });
           const response = await HttpUtils.sendRequestToSsrServer({
             path: REQUEST_PATH,
           });
           expect(response.statusCode).toEqual(500);
-        })
-      );
+        });
+      });
+
+      describe('With long SSR request timeout', () => {
+        beforeEach(async () => {
+          // The SSR in the following tests might take longer than the default SSR request timeout.
+          // So to avoid getting a "CSR fallback" response, we're increasing the SSR request timeout to 20 seconds.
+          await SsrUtils.startSsrServer({ timeout: 20_000 });
+        });
+
+        it('should receive response with status 500 if HTTP call to backend timeouted', async () => {
+          /**
+           * We're configuring a custom time limit for the Backend API calls in Spartacus.
+           * This is to speed up the test. Otherwise, we would need to delay the call to /languages
+           * for 20 seconds (which is the default Backend Timeout in Spartacus) to get an error.
+           */
+          const BACKEND_TIMEOUT_TIME_LIMIT = 4000;
+          const API_DELAY = BACKEND_TIMEOUT_TIME_LIMIT + 1;
+
+          backendProxy = await ProxyUtils.startBackendProxyServer({
+            target: BACKEND_BASE_URL,
+            responseInterceptor: ({ res, req, body }) => {
+              // Delay the response from Backend API, but only for for the /languages endpoint.
+              // We want Spartacus to consider this Backend API request as Timeouted (therefore failed).
+              if (req.url?.includes('languages')) {
+                setTimeout(() => res.end(body), API_DELAY);
+              } else {
+                res.end(body);
+              }
+            },
+          });
+
+          const response = await HttpUtils.sendRequestToSsrServer({
+            path: REQUEST_PATH,
+            testConfig: {
+              backend: { timeout: { server: BACKEND_TIMEOUT_TIME_LIMIT } },
+            },
+          });
+
+          expect(response.statusCode).toEqual(500);
+
+          const logsMessages = LogUtils.getLogsMessages();
+          expect(logsMessages.join('\n')).toMatch(
+            new RegExp(
+              `Error: Request to URL '[^']*\/languages' exceeded expected time of ${BACKEND_TIMEOUT_TIME_LIMIT}ms and was aborted`
+            )
+          );
+        });
+      });
     });
 
     describe('With caching enabled', () => {
@@ -99,7 +138,7 @@ describe('SSR E2E', () => {
 
       it(
         'should take the response from cache for the next request if previous render succeeded',
-        LogUtils.attachLogsToErrors(async () => {
+        async () => {
           backendProxy = await ProxyUtils.startBackendProxyServer({
             target: BACKEND_BASE_URL,
           });
@@ -123,19 +162,20 @@ describe('SSR E2E', () => {
           expect(logsMessages2).toContain(
             `Render from cache (${REQUEST_PATH})`
           );
-        }),
+        },
         2 * SsrUtils.DEFAULT_SSR_TIMEOUT // increase timeout for this test as it calls the SSR server twice
       );
 
       it(
         'should render for the next request if previous render failed',
-        LogUtils.attachLogsToErrors(async () => {
+        async () => {
           backendProxy = await ProxyUtils.startBackendProxyServer({
             target: BACKEND_BASE_URL,
-            callback: (proxyRes, req) => {
+            responseInterceptor: ({ res, req, body }) => {
               if (req.url?.includes('cms/pages')) {
-                proxyRes.statusCode = 404;
+                res.statusCode = 404;
               }
+              res.end(body);
             },
           });
           let response: HttpUtils.SsrResponse;
@@ -152,7 +192,7 @@ describe('SSR E2E', () => {
           expect(logsMessages).not.toContain(
             `Render from cache (${REQUEST_PATH})`
           );
-        }),
+        },
         2 * SsrUtils.DEFAULT_SSR_TIMEOUT // increase timeout for this test as it calls the SSR server twice
       );
     });
@@ -205,10 +245,11 @@ describe('SSR E2E', () => {
       it('should receive response with status 500 even if HTTP error occurred when calling backend API URL', async () => {
         backendProxy = await ProxyUtils.startBackendProxyServer({
           target: BACKEND_BASE_URL,
-          callback: (proxyRes, req) => {
+          responseInterceptor: ({ res, req, body }) => {
             if (req.url?.includes('cms/components')) {
-              proxyRes.statusCode = 400;
+              res.statusCode = 400;
             }
+            res.end(body);
           },
         });
         const response = await HttpUtils.sendRequestToSsrServer({
diff --git a/projects/ssr-tests/src/utils/log.utils.ts b/projects/ssr-tests/src/utils/log.utils.ts
index 9ddc2c3a6cb..ec4b814e1f6 100644
--- a/projects/ssr-tests/src/utils/log.utils.ts
+++ b/projects/ssr-tests/src/utils/log.utils.ts
@@ -25,42 +25,14 @@ export function clearSsrLogFile(): void {
   fs.writeFileSync(SSR_LOG_PATH, '');
 }
 
-/**
- * Validates that all lines starting with `{` are valid JSON objects.
- * Otherwise it throws an error.
- *
- * Note: multi-line JSONs (printed by SSR in dev mode) cannot be parsed by `JSON.parse`.
- *       That's why we need to to run SSR in prod mode to get single line JSON logs.
- */
-function validateJsonsInLogs(logs: string[]): void {
-  logs.forEach((text) => {
-    if (text.charAt(0) === '{') {
-      try {
-        JSON.parse(text);
-      } catch (error) {
-        throw new Error(
-          `Encountered in SSR Logs a line starting with \`{\` that could not be parsed as JSON.
-          Perhaps its a multi-line JSON log from SSR dev mode.
-          Please make sure to build Spartacus SSR in prod mode - to get single line JSONs that can be parsed in tests.`
-        );
-      }
-    }
-  });
-}
-
 /**
  * Returns raw logs as an array of strings.
  *
  * Note: Non-JSON log entries are also included in the returned array.
- *
- * It also validates whether each line starting with `{` is a valid JSON object.
- * Otherwise it throws an error.
  */
 export function getRawLogs(): string[] {
   const data = fs.readFileSync(SSR_LOG_PATH).toString();
-  const logs = data.toString().split('\n');
-  validateJsonsInLogs(logs);
-  return logs;
+  return data.toString().split('\n');
 }
 
 /**
@@ -126,43 +98,3 @@ export async function waitUntilLogContainsText(
     );
   });
 }
-
-/**
- * A higher-order function that wraps a test callback and includes SSR logs
- * in any error thrown during the test execution. The logs are put into the `cause`
- * property of the Error.
- *
- * @param testFn - The original test function to be wrapped.
- * @returns A new function that can be passed to Jest's `it()` or `test()`.
- *
- * @example
- * it('should perform SSR correctly', attachLogsToErrors(async () => {
- *   // Your test code here
- * }));
- */
-export function attachLogsToErrors(
-  testFn: () => Promise<void> | void
-): () => Promise<void> {
-  return async () => {
-    try {
-      await testFn();
-    } catch (error: unknown) {
-      const readableLogs = getRawLogsPretty().join('\n');
-      const ssrLogs = `(more context below)\n--- SSR LOGS (with JSONs pretty-printed) ---\n${readableLogs}\n--- SSR LOGS END ---`;
-
-      if (error instanceof Error) {
-        // Error's `cause` property is the only property printed by Jest
-        // besides `message` that we can utilize for attaching logs.
-        // No other custom properties are printed by Jest.
-        // See their source code of their function `formatExecError`:
-        // https://github.com/jestjs/jest/blob/bd1c6db7c15c23788ca3e09c919138e48dd3b28a/packages/jest-message-util/src/index.ts#L436
-
-        error.cause = ssrLogs;
-      } else {
-        throw new Error(error as string, { cause: ssrLogs });
-      }
-
-      throw error;
-    }
-  };
-}
diff --git a/projects/ssr-tests/src/utils/proxy.utils.ts b/projects/ssr-tests/src/utils/proxy.utils.ts
index 931ef6ccfd0..29d8be7d82a 100644
--- a/projects/ssr-tests/src/utils/proxy.utils.ts
+++ b/projects/ssr-tests/src/utils/proxy.utils.ts
@@ -16,14 +16,31 @@ interface ProxyOptions {
    * The url to reroute requests to.
    */
   target: string;
-  /**
-   * Number of seconds to delay requests before sending.
-   */
-  delay?: number;
-  /**
-   * Callback to be executed if the request to the target got a response.
-   */
-  callback?: httpProxy.ProxyResCallback;
+
+  responseInterceptor?: (params: {
+    /**
+     * The body of the response from the upstream server.
+     *
+     * Note: we're exposing separately from the `proxyRes` object for convenience
+     *       (because extracting it manually from `proxyRes` is very cumbersome)
+     */
+    body: string;
+
+    /**
+     * The response from the upstream server.
+     */
+    proxyRes: http.IncomingMessage;
+
+    /**
+     * The request that was sent to the upstream server.
+     */
+    req: http.IncomingMessage;
+
+    /**
+     * The response that will be sent to the client.
+     */
+    res: http.ServerResponse;
+  }) => void;
 }
 
 /**
@@ -34,24 +51,36 @@ export async function startBackendProxyServer(
 ): Promise<http.Server> {
   const proxy = httpProxy.createProxyServer({
     secure: false,
+    selfHandleResponse: !!options.responseInterceptor,
   });
+  if (options.responseInterceptor) {
+    proxy.on('proxyRes', (proxyRes, req, res) => {
+      // We have to buffer the response body before passing it to the interceptor
+      const bodyBuffer: Buffer[] = [];
+      proxyRes.on('data', (chunk) => {
+        bodyBuffer.push(chunk);
+      });
+      proxyRes.on('end', () => {
+        const body = Buffer.concat(bodyBuffer).toString();
+
+        // Pass the body to the interceptor
+        if (options.responseInterceptor) {
+          options.responseInterceptor({
+            body,
+            proxyRes,
+            res,
+            req,
+          });
+        } else {
+          res.end(body);
+        }
+      });
+    });
+  }
+
   return new Promise((resolve) => {
     const server = http.createServer((req, res) => {
-      const forwardRequest = () =>
-        proxy.web(req, res, { target: options.target });
-
-      if (options.callback) {
-        // Add one-time listener for the proxy response that stays until `proxyRes` event is triggered next time.
-        proxy.once('proxyRes', options.callback);
-      }
-
-      if (options.delay) {
-        setTimeout(() => {
-          forwardRequest();
-        }, options.delay);
-      } else {
-        forwardRequest();
-      }
+      proxy.web(req, res, { target: options.target });
     });
 
     server.listen(9002, () => {
diff --git a/projects/ssr-tests/validate-ssr-build.ts b/projects/ssr-tests/validate-ssr-build.ts
new file mode 100644
index 00000000000..5ff1f6503d6
--- /dev/null
+++ b/projects/ssr-tests/validate-ssr-build.ts
@@ -0,0 +1,140 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Verify that the SSR app under tests meets the following criteria:
+ *
+ * 1. The app us built in prod mode.
+ *
+ *    Why it's needed:
+ *      Some tests require parsing single-line JSON log entries appearing in the SSR logs.
+ *      In an app built in prod mode, the JSON objects are printed single-line that can be easily parsed in tests.
+ *      In an app built in dev mode, the JSON objects are printed multi-line (to be more human-readable),
+ *      but cannot be parsed in tests so it makes some tests to fail.
+ *
+ * 2. The app has configured a base OCC url being a local backend proxy, instead of a real backend.
+ *
+ *    Why it's needed:
+ *      Some tests require mocking the behavior of the backend using a local backend http proxy.
+ *      If the app is not calling a local backend proxy as a base OCC url, some tests will fail.
+ *
+ * 3. No other process is already listening on the HTTP port used by the SSR server.
+ *
+ *    Why it's needed:
+ *      In tests we start a new SSR server process listening on a specific port.
+ *      If anything is listening on that port, the tests will fail.
+ *
+ * In this file we'll validate the build of the app before running the tests.
+ */
+
+import * as fs from 'fs';
+import * as http from 'http';
+import * as path from 'path';
+
+/**
+ * The port the SSR server will listen on.
+ */
+const SSR_PORT = 4000;
+
+/**
+ * String that always appears in the `main.js` file of the SSR app when built with a local backend proxy.
+ */
+const USING_PROXY_BACKEND_MARKER = `CX_BASE_URL:"http://localhost:9002"`;
+
+/**
+ * String that always appears in the `main.js` file of the SSR app when built in dev mode.
+ */
+const USING_DEV_MODE_MARKER = `ngDevMode`;
+
+/**
+ * Path to the `main.js` file of the built SSR app.
+ */
+const SSR_APP_PATH = path.join(
+  __dirname,
+  '../../dist/storefrontapp-server/main.js'
+);
+
+/**
+ * Advice to the user on how to build the SSR app in prod mode to use a local backend proxy.
+ */
+const BUILD_COMMAND_ADVICE =
+  colorToYellow('Please build the SSR app with the following command\n') +
+  colorToYellow('> npm run build && npm run build:ssr:local-http-backend\n');
+
+/**
+ * Advice to the user on how to kill the process listening on the port.
+ */
+export const KILL_PORT_ADVICE =
+  colorToYellow(
+    `Please kill the process listening on port ${SSR_PORT} to free the port for the SSR server.\n`
+  ) +
+  // include 2 commands that will work both on Mac and Linux for port 4000
+  colorToYellow('a) on Mac/Linux run:\n') +
+  colorToYellow(`   > kill -9 $(lsof -t -i :${SSR_PORT})\n`) +
+  colorToYellow(
+    'b) on Windows run 2 commands (to find PID and then to kill it): \n'
+  ) +
+  colorToYellow(`   > netstat -ano | findstr :${SSR_PORT}\n`) +
+  colorToYellow(`   > taskkill /f /pid <THE_PID__ABOVE> \n`);
+
+export default async function validateSsrBuild() {
+  if (!fs.existsSync(SSR_APP_PATH)) {
+    throw new Error(
+      `
+SSR app not found at the expected path '${SSR_APP_PATH}'. 
+${BUILD_COMMAND_ADVICE}`
+    );
+  }
+
+  const fileContents = fs.readFileSync(SSR_APP_PATH, 'utf8');
+  if (!fileContents.includes(USING_PROXY_BACKEND_MARKER)) {
+    throw new Error(
+      `
+SSR app is not using a local backend proxy as a base OCC url.
+${BUILD_COMMAND_ADVICE}`
+    );
+  }
+
+  if (fileContents.includes(USING_DEV_MODE_MARKER)) {
+    throw new Error(
+      `
+SSR app is not using prod mode.
+${BUILD_COMMAND_ADVICE}`
+    );
+  }
+
+  if (!(await isHttpPortFree(SSR_PORT))) {
+    throw new Error(
+      `
+Port ${SSR_PORT} is already in use.
+${KILL_PORT_ADVICE}`
+    );
+  }
+}
+
+function colorToYellow(text: string) {
+  return `\x1b[33m${text}\x1b[0m`;
+}
+
+async function isHttpPortFree(port: number): Promise<boolean> {
+  return new Promise((resolve) => {
+    const server = http.createServer();
+
+    server.listen(port, () => {
+      server.close(() => {
+        resolve(true);
+      });
+    });
+
+    server.once('error', (error: NodeJS.ErrnoException) => {
+      if (error.code === 'EADDRINUSE') {
+        resolve(false);
+      } else {
+        resolve(true);
+      }
+    });
+  });
+}
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/focus-management.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/focus-management.e2e.cy.ts
index f89206d5997..3dea1a4b423 100644
--- a/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/focus-management.e2e.cy.ts
+++ b/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/focus-management.e2e.cy.ts
@@ -23,4 +23,22 @@ describe('Focus managment for a11y', () => {
       });
     });
   });
+
+  context('Add to cart modal', () => {
+    it('Should re-focus the element triggering the modal after it closes', () => {
+      cy.visit(`/product/266685`);
+      cy.contains('Add to cart').click();
+      cy.get('[aria-label="Close Modal"]').click();
+      cy.contains('Add to cart').should('have.focus');
+    });
+  });
+
+  context('Pick up in store modal', () => {
+    it('Should re-focus the element triggering the modal after it closes', () => {
+      cy.visit(`/product/266685`);
+      cy.contains('Select Store').click();
+      cy.get('[aria-label="Close"]').click();
+      cy.contains('Select Store').should('have.focus');
+    });
+  });
 });
diff --git a/projects/storefrontapp/src/app/spartacus/features/cds/cds-feature.module.ts b/projects/storefrontapp/src/app/spartacus/features/cds/cds-feature.module.ts
index 5c347cdf7a7..f4ebfffa797 100644
--- a/projects/storefrontapp/src/app/spartacus/features/cds/cds-feature.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/features/cds/cds-feature.module.ts
@@ -24,6 +24,8 @@ const cds1: CdsConfig = {
     baseUrl: 'https://api.stage.context.cloud.sap',
     endpoints: {
       strategyProducts: '/strategy/${tenant}/strategies/${strategyId}/products',
+      searchIntelligence:
+        '/search-intelligence/v1/sites/${cdsSiteId}/trendingSearches',
     },
     merchandising: {
       defaultCarouselViewportThreshold: 80,
@@ -50,6 +52,8 @@ const cds2 = {
     baseUrl: 'A_CDS_BASE_URL',
     endpoints: {
       strategyProducts: '/strategy/${tenant}/strategies/${strategyId}/products',
+      searchIntelligence:
+        '/search-intelligence/v1/sites/${cdsSiteId}/trendingSearches',
     },
     merchandising: {
       defaultCarouselViewportThreshold: 80,
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index 094cbdd2de7..844c1b5547d 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -295,6 +295,7 @@ if (environment.cpq) {
         showDownloadProposalButton: false,
         showPromotionsInPDP: false,
         recentSearches: true,
+        trendingSearches: false,
         pdfInvoicesSortByInvoiceDate: false,
         storeFrontLibCardParagraphTruncated: true,
         useProductCarouselBatchApi: true,
@@ -372,6 +373,7 @@ if (environment.cpq) {
         a11yQuickOrderAriaControls: true,
         a11yRemoveStatusLoadedRole: true,
         a11yDialogsHeading: true,
+        a11yDialogTriggerRefocus: true,
         a11yAddToWishlistFocus: true,
         a11ySearchBoxFocusOnEscape: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box-component.service.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box-component.service.ts
index ef480e569ea..0aedb1e8c5f 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box-component.service.ts
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box-component.service.ts
@@ -31,6 +31,9 @@ export class SearchBoxComponentService {
   chosenWord = new ReplaySubject<string>();
   sharedEvent = new ReplaySubject<KeyboardEvent>();
 
+  protected enableRecentSearches: boolean = false;
+  protected enableTrendingSearches: boolean = false;
+
   constructor(
     public searchService: SearchboxService,
     protected routingService: RoutingService,
@@ -45,11 +48,14 @@ export class SearchBoxComponentService {
    * products or suggestions.
    */
   search(query: string, config: SearchBoxConfig): void {
-    if (!query || query === '') {
+    if (
+      !this.enableRecentSearches &&
+      !this.enableTrendingSearches &&
+      (!query || query === '')
+    ) {
       this.clearResults();
       return;
     }
-
     if (
       config.minCharactersBeforeRequest &&
       query.length < config.minCharactersBeforeRequest
@@ -277,4 +283,12 @@ export class SearchBoxComponentService {
   shareEvent($event: KeyboardEvent) {
     this.sharedEvent.next($event);
   }
+
+  setTrendingSearches(enabled: boolean = false) {
+    this.enableTrendingSearches = enabled;
+  }
+
+  setRecentSearches(enabled: boolean = false) {
+    this.enableRecentSearches = enabled;
+  }
 }
diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box-features.model.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box-features.model.ts
index ccc9001a1a1..3f7b7d02ec3 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box-features.model.ts
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box-features.model.ts
@@ -6,4 +6,5 @@
 
 export enum SearchBoxFeatures {
   RECENT_SEARCHES_FEATURE = 'recentSearches',
+  TRENDING_SEARCHES_FEATURE = 'trendingSearches',
 }
diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box-outlets.model.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box-outlets.model.ts
index 3f110f75b04..9b98bc0df05 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box-outlets.model.ts
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box-outlets.model.ts
@@ -6,4 +6,5 @@
 
 export enum SearchBoxOutlets {
   RECENT_SEARCHES = 'SearchBoxOutlets.RECENT_SEARCHES',
+  TRENDING_SEARCHES = 'SearchBoxOutlets.TRENDING_SEARCHES',
 }
diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
index fbe26ce6522..7e2acbca3cc 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
@@ -11,8 +11,8 @@
         a11ySearchBoxMobileFocusEnabled ? getTabIndex(isMobile | async) : null
       "
       [attr.aria-label]="'searchBox.placeholder' | cxTranslate"
+      (click)="search(searchInput.value)"
       (focus)="a11ySearchBoxMobileFocusEnabled ? null : open()"
-      (click)="open()"
       (input)="search(searchInput.value)"
       (blur)="close($any($event))"
       (keydown.tab)="
@@ -71,7 +71,7 @@
     [innerHTML]="result.message"
   ></div>
   <!--RESULT  SUGGESTIONS-->
-  <ng-container *cxFeature="searchBoxFeatures.RECENT_SEARCHES_FEATURE">
+  <ng-container>
     <div class="message" *ngIf="result?.suggestions?.length">
       {{ 'searchBox.suggestions' | cxTranslate }}
     </div>
@@ -123,8 +123,21 @@
     ></ng-template>
   </ng-container>
 
+  <!--  TRENDING SEARCHES-->
+  <ng-container *ngIf="searchInput?.value?.length === 0">
+    <ng-container *cxFeature="searchBoxFeatures.TRENDING_SEARCHES_FEATURE">
+      <ng-template
+        *ngIf="config.trendingSearches"
+        [cxOutlet]="searchBoxOutlets.TRENDING_SEARCHES"
+        [cxOutletContext]="{
+          maxTrendingSearches: config.maxTrendingSearches,
+        }"
+      ></ng-template>
+    </ng-container>
+  </ng-container>
+
   <!--RESULT  PRODUCTS-->
-  <ng-container *cxFeature="searchBoxFeatures.RECENT_SEARCHES_FEATURE">
+  <ng-container>
     <div class="message" *ngIf="result.products?.length">
       {{ 'searchBox.products' | cxTranslate }}
     </div>
diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts
index 4c39db57e02..ff886fe4209 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.ts
@@ -47,6 +47,8 @@ const DEFAULT_SEARCH_BOX_CONFIG: SearchBoxConfig = {
   displayProductImages: true,
   recentSearches: true,
   maxRecentSearches: 5,
+  trendingSearches: true,
+  maxTrendingSearches: 5,
 };
 const SEARCHBOX_IS_ACTIVE = 'searchbox-is-active';
 
diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box.model.ts b/projects/storefrontlib/cms-components/navigation/search-box/search-box.model.ts
index 3544fc07e35..b6087ab03e9 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box.model.ts
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box.model.ts
@@ -13,6 +13,8 @@ export interface SearchBoxConfig {
   minCharactersBeforeRequest?: number;
   recentSearches?: boolean | string;
   maxRecentSearches?: number;
+  trendingSearches?: boolean | string;
+  maxTrendingSearches?: number;
 }
 
 export interface SearchResults {
diff --git a/projects/storefrontstyles/scss/_mixins.scss b/projects/storefrontstyles/scss/_mixins.scss
index 5e6ed09bbd0..71fef98a7cc 100644
--- a/projects/storefrontstyles/scss/_mixins.scss
+++ b/projects/storefrontstyles/scss/_mixins.scss
@@ -1 +1,2 @@
 @import 'cxbase/mixins';
+@import 'theme/high-contrast/mixins/mixins';
diff --git a/projects/storefrontstyles/scss/_site-theme.scss b/projects/storefrontstyles/scss/_site-theme.scss
new file mode 100644
index 00000000000..a473cd3f76b
--- /dev/null
+++ b/projects/storefrontstyles/scss/_site-theme.scss
@@ -0,0 +1,3 @@
+@import 'theme/high-contrast/dark/variables';
+@import 'theme/high-contrast/light/variables';
+@import 'theme/high-contrast/high-contrast';
diff --git a/projects/storefrontstyles/scss/_theme.scss b/projects/storefrontstyles/scss/_theme.scss
index d5ff3b7ac88..ab0c0ba9639 100644
--- a/projects/storefrontstyles/scss/_theme.scss
+++ b/projects/storefrontstyles/scss/_theme.scss
@@ -8,9 +8,5 @@
 
 //old theme to be commented out on next major or with impex
 @import 'theme/santorini/variables';
-@import 'theme/high-contrast/dark/variables';
-@import 'theme/high-contrast/light/variables';
-@import 'theme/high-contrast/high-contrast';
-@import 'theme/high-contrast/mixins/mixins';
 // new theme below to uncomment on next major or with impex
 // @import 'theme/santorini-updated/variables';
diff --git a/projects/storefrontstyles/scss/app.scss b/projects/storefrontstyles/scss/app.scss
index bd0b56afc40..9d6f517ff00 100644
--- a/projects/storefrontstyles/scss/app.scss
+++ b/projects/storefrontstyles/scss/app.scss
@@ -45,3 +45,4 @@
 @import 'misc/hamburger';
 @import 'misc/dialog';
 @import 'misc/table';
+@import 'site-theme';
diff --git a/projects/storefrontstyles/scss/components/myaccount/_consent-management.scss b/projects/storefrontstyles/scss/components/myaccount/_consent-management.scss
index c46dbca3d95..cd4228adb26 100644
--- a/projects/storefrontstyles/scss/components/myaccount/_consent-management.scss
+++ b/projects/storefrontstyles/scss/components/myaccount/_consent-management.scss
@@ -1,5 +1,3 @@
-@import '../../theme';
-
 %cx-consent-management {
   .cx-consent-action-links {
     text-align: end;
diff --git a/projects/storefrontstyles/scss/components/myaccount/_cx-my-account-v2-notification-preference.scss b/projects/storefrontstyles/scss/components/myaccount/_cx-my-account-v2-notification-preference.scss
index 22796de0879..44c845c653d 100644
--- a/projects/storefrontstyles/scss/components/myaccount/_cx-my-account-v2-notification-preference.scss
+++ b/projects/storefrontstyles/scss/components/myaccount/_cx-my-account-v2-notification-preference.scss
@@ -1,5 +1,3 @@
-@import '../../theme';
-
 %cx-my-account-v2-notification-preference {
   .np-content-center {
     -ms-flex-pack: center;
diff --git a/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss b/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss
index 7f070c10926..5839ddbbd96 100644
--- a/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss
+++ b/projects/storefrontstyles/scss/components/myaccount/anonymous-consent/_anonymous-consent-dialog.scss
@@ -1,5 +1,3 @@
-@import '../../../theme';
-
 %cx-anonymous-consent-dialog {
   color: var(--cx-color-text);
   background-color: rgba(0, 0, 0, 0.5);
diff --git a/projects/storefrontstyles/scss/components/product/search/_searchbox.scss b/projects/storefrontstyles/scss/components/product/search/_searchbox.scss
index d3cf2e04ded..d28cef271a2 100644
--- a/projects/storefrontstyles/scss/components/product/search/_searchbox.scss
+++ b/projects/storefrontstyles/scss/components/product/search/_searchbox.scss
@@ -1,5 +1,3 @@
-@import '../../../theme';
-
 // To control visual effects while searching the searchbox requires
 // some CSS rules to the outer elements.
 %cx-searchbox__body {
@@ -203,7 +201,6 @@
     a {
       text-decoration: none;
       cursor: pointer;
-
       font-weight: 800;
 
       .highlight,
@@ -224,6 +221,7 @@
       list-style: none;
       padding-inline-start: 0;
       margin-bottom: 0;
+
       li,
       a {
         flex: 100%;
@@ -238,7 +236,7 @@
       list-style: none;
       padding-inline-start: 0;
       margin-bottom: 0;
-      border-top: solid 1px var(--cx-color-light);
+
       li,
       a {
         flex: 100%;
@@ -265,8 +263,6 @@
           grid-template-columns: 50px 1fr;
         }
 
-        border-top: solid 1px var(--cx-color-light);
-
         cx-media {
           grid-row: 1 / 3;
         }
@@ -294,6 +290,14 @@
         }
       }
     }
+
+    .message {
+      border-bottom: solid 1px var(--cx-color-medium);
+      font-size: var(--cx-font-small, 0.9rem);
+      font-weight: 600;
+      padding-top: 16px;
+      padding-bottom: 5px;
+    }
   }
 
   @include cx-highContrastTheme {
diff --git a/projects/storefrontstyles/scss/components/pwa/add-to-home-screen-banner/_add-to-home-screen-banner.scss b/projects/storefrontstyles/scss/components/pwa/add-to-home-screen-banner/_add-to-home-screen-banner.scss
index 301fac5b6e8..de3178097b7 100644
--- a/projects/storefrontstyles/scss/components/pwa/add-to-home-screen-banner/_add-to-home-screen-banner.scss
+++ b/projects/storefrontstyles/scss/components/pwa/add-to-home-screen-banner/_add-to-home-screen-banner.scss
@@ -1,5 +1,3 @@
-@import '../../../theme';
-
 %cx-add-to-home-screen-banner {
   .cx-add-to-home-screen-banner {
     background-color: var(--cx-color-background);
diff --git a/projects/storefrontstyles/scss/cxbase/_mixins.scss b/projects/storefrontstyles/scss/cxbase/_mixins.scss
index 8cb54bc1f8a..4d2ba07742d 100644
--- a/projects/storefrontstyles/scss/cxbase/_mixins.scss
+++ b/projects/storefrontstyles/scss/cxbase/_mixins.scss
@@ -2,8 +2,6 @@
 // lower level bootstrap variables. Hence we import the variables here,
 // to make the mixins reusable. In order to have the right variables
 // we load variables through the theme import.  */
-@import '../theme';
-
 @import 'bootstrap/scss/_mixins';
 
 @import './mixins/reset';
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/accordion.scss b/projects/storefrontstyles/scss/cxbase/blocks/accordion.scss
index f9ae34a0e38..a22cbdcb76e 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/accordion.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/accordion.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import '../../functions';
 @import '../../mixins';
 .accordion {
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/alert.scss b/projects/storefrontstyles/scss/cxbase/blocks/alert.scss
index 88505265d0c..84948e38bd5 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/alert.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/alert.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import '../../mixins';
 @import 'bootstrap/scss/alert';
 
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss b/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss
index ade3f546c5d..93dc1341928 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/buttons.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import 'bootstrap/scss/buttons';
 
 button {
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/card.scss b/projects/storefrontstyles/scss/cxbase/blocks/card.scss
index ac88b5e311a..33885dad6ed 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/card.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/card.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import 'bootstrap/scss/card';
 
 .card {
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/carousel.scss b/projects/storefrontstyles/scss/cxbase/blocks/carousel.scss
index e311e144c3b..59265646bad 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/carousel.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/carousel.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import '../../mixins';
 
 // None of the styles here below are customizable at component level
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/dropdown.scss b/projects/storefrontstyles/scss/cxbase/blocks/dropdown.scss
index 88e7303113d..4c0dde3d729 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/dropdown.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/dropdown.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import 'bootstrap/scss/dropdown';
 
 $cx-dropdown-toggle-border-color: 'inverse' !important;
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/forms.scss b/projects/storefrontstyles/scss/cxbase/blocks/forms.scss
index 4981053ce73..50240ed2934 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/forms.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/forms.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import 'bootstrap/scss/forms';
 @import 'bootstrap/scss/custom-forms';
 
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/message.scss b/projects/storefrontstyles/scss/cxbase/blocks/message.scss
index efe05f923d1..dabdb85beec 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/message.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/message.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import '../../mixins';
 
 .cx-message {
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/modal.scss b/projects/storefrontstyles/scss/cxbase/blocks/modal.scss
index c4fecd9c179..8abc0778a14 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/modal.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/modal.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import 'bootstrap/scss/modal';
 @import 'bootstrap/scss/close';
 
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/tables.scss b/projects/storefrontstyles/scss/cxbase/blocks/tables.scss
index 598ea5712a0..0a067915a69 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/tables.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/tables.scss
@@ -1,5 +1,3 @@
-@import '../../theme';
-
 .table {
   width: 100%;
 
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/tabs.scss b/projects/storefrontstyles/scss/cxbase/blocks/tabs.scss
index 6d462eb2bde..d95625fab01 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/tabs.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/tabs.scss
@@ -1,5 +1,3 @@
-@import '../../theme';
-
 ul[role='tablist'] {
   .nav-link {
     border: none;
diff --git a/projects/storefrontstyles/scss/cxbase/blocks/tooltip.scss b/projects/storefrontstyles/scss/cxbase/blocks/tooltip.scss
index a5213a283ed..278aa148553 100644
--- a/projects/storefrontstyles/scss/cxbase/blocks/tooltip.scss
+++ b/projects/storefrontstyles/scss/cxbase/blocks/tooltip.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import 'bootstrap/scss/tooltip';
 
 .bs-tooltip-left {
diff --git a/projects/storefrontstyles/scss/cxbase/layout/app.scss b/projects/storefrontstyles/scss/cxbase/layout/app.scss
index 50feb2f520e..1b7ecd314cd 100644
--- a/projects/storefrontstyles/scss/cxbase/layout/app.scss
+++ b/projects/storefrontstyles/scss/cxbase/layout/app.scss
@@ -1,4 +1,3 @@
-@import '../../theme';
 @import '../../functions';
 @import '../../mixins';
 
diff --git a/projects/storefrontstyles/scss/cxbase/layout/page.scss b/projects/storefrontstyles/scss/cxbase/layout/page.scss
index eaf931436f6..b42db7bfcc0 100644
--- a/projects/storefrontstyles/scss/cxbase/layout/page.scss
+++ b/projects/storefrontstyles/scss/cxbase/layout/page.scss
@@ -1,5 +1,3 @@
-@import '../../theme';
-
 .cx-page {
   padding-bottom: 120px;
 }
diff --git a/projects/storefrontstyles/scss/cxbase/layout/section.scss b/projects/storefrontstyles/scss/cxbase/layout/section.scss
index 0a7b2a563b5..2dc8d6957c8 100644
--- a/projects/storefrontstyles/scss/cxbase/layout/section.scss
+++ b/projects/storefrontstyles/scss/cxbase/layout/section.scss
@@ -1,5 +1,3 @@
-@import '../../theme';
-
 .cx-section {
   margin-bottom: var(--cx-margin-bottom, 50px);
   &:last-child {
diff --git a/projects/storefrontstyles/scss/root.scss b/projects/storefrontstyles/scss/root.scss
index 9a039496cd2..bbe9f5c678a 100644
--- a/projects/storefrontstyles/scss/root.scss
+++ b/projects/storefrontstyles/scss/root.scss
@@ -1,5 +1,3 @@
-@import 'theme';
-
 :root {
   @each $color, $value in $theme-colors {
     --cx-color-#{$color}: #{$value};