simpo-component-library 3.6.894 → 3.6.896

package/fesm2022/simpo-component-library.mjs

@@ -5,7 +5,7 @@ import { Component, Input, EventEmitter, Injectable, Directive, HostListener, El
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { fromEvent, debounceTime, map, forkJoin, firstValueFrom, startWith, distinctUntilChanged, switchMap, filter, interval, catchError, of } from 'rxjs';
+import { fromEvent, debounceTime, map, forkJoin, firstValueFrom, startWith, distinctUntilChanged, switchMap, interval, catchError, of } from 'rxjs';
 import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormArray, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
@@ -317,11 +317,25 @@ var Header_Type;
     Header_Type["HEADER3"] = "Header3";
     Header_Type["HEADER4"] = "Header4";
 })(Header_Type || (Header_Type = {}));
+var Sticky_Type;
+(function (Sticky_Type) {
+    Sticky_Type["NONE"] = "None";
+    Sticky_Type["STICKY"] = "Sticky";
+    Sticky_Type["SHRINK_ON_SCROLL"] = "ShrinkOnScroll";
+    Sticky_Type["TRANSPARENT_ON_SCROLL"] = "TransparentOnScroll";
+    Sticky_Type["STICKY_AFTER_SCROLL"] = "StickyAfterScroll";
+})(Sticky_Type || (Sticky_Type = {}));
 var Menu_Type;
 (function (Menu_Type) {
     Menu_Type["MEGA_MENU"] = "MEGA_MENU";
     Menu_Type["DROP_DOWN"] = "DROPDOWN_MENU";
 })(Menu_Type || (Menu_Type = {}));
+var Mobile_Menu_Type;
+(function (Mobile_Menu_Type) {
+    Mobile_Menu_Type["HAMBURGER"] = "HAMBURGER";
+    Mobile_Menu_Type["FULL_SCREEN"] = "FULL_SCREEN";
+    Mobile_Menu_Type["BOTTOM_STICKY"] = "BOTTOM_STICKY";
+})(Mobile_Menu_Type || (Mobile_Menu_Type = {}));
 var TEXT_SIZE;
 (function (TEXT_SIZE) {
     TEXT_SIZE["Small"] = "Small";
@@ -7161,7 +7175,7 @@ class VideoSectionComponent extends BaseSection {
         }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{object-fit:cover;aspect-ratio:16/9}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row mob-mx-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{object-fit:cover;aspect-ratio:16/9}.mob-mx-0{margin-left:0!important;margin-right:0!important}.video-section{padding-left:0!important;padding-right:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: VideoSectionComponent, decorators: [{
             type: Component,
@@ -7191,7 +7205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         SpacingHorizontalDirective
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{object-fit:cover;aspect-ratio:16/9}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n      [simpoLayout]=\"style?.layout\" [spacingHorizontal]=\"stylesLayout\" [ngClass]=\"{'px-0 py-0': style?.fullWidth}\">\r\n      <div class=\"row mob-mx-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n        <!-- <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large content-side\"\r\n          [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n        </div> -->\r\n\r\n\r\n        <div class=\"video-section\" [ngClass]=\"{'h-100 w-100': style?.layout?.fit === 'screen'}\">\r\n          <iframe class=\"video\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content', \r\n          'h-100 w-100': style?.layout?.fit === 'screen'\r\n        }\" [src]=\"getVideoUrl(content?.videoLink?.url ?? '')\" frameborder=\"0\" allowfullscreen *ngIf=\"!content?.videoLink?.url?.includes('.mp4')\"></iframe>\r\n        <ng-container *ngIf=\"content?.videoLink?.url?.includes('.mp4')\">\r\n          <video class=\"video w-100\" [ngClass]=\"{\r\n          'vh-60 w-100': style?.layout?.fit === 'content',\r\n          'h-100 w-100': style?.layout?.fit === 'screen'  }\" controls autoplay infinite>\r\n          <source [src]=\"content?.videoLink?.url\" type=\"video/mp4\">\r\n        </video>\r\n        </ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.video{object-fit:cover;aspect-ratio:16/9}.mob-mx-0{margin-left:0!important;margin-right:0!important}.video-section{padding-left:0!important;padding-right:0!important}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -7244,69 +7258,143 @@ class SimpoStickyDirective {
         this.el = el;
         this.router = router;
         this.platformId = platformId;
+        this.stickyScrolled = new EventEmitter();
         this.isBrowser = false;
         this.isBrowser = isPlatformBrowser(this.platformId);
     }
+    get resolvedType() {
+        let type;
+        if (typeof this.stickyType === 'boolean') {
+            type = this.stickyType ? Sticky_Type.STICKY : Sticky_Type.NONE;
+        }
+        else {
+            type = this.stickyType ?? Sticky_Type.NONE;
+        }
+        // On mobile, animated types degrade to plain STICKY
+        if (this.isMobile && (type === Sticky_Type.STICKY_AFTER_SCROLL || type === Sticky_Type.TRANSPARENT_ON_SCROLL)) {
+            return Sticky_Type.STICKY;
+        }
+        return type;
+    }
+    get isMobile() {
+        return this.isBrowser ? window.innerWidth < 475 : false;
+    }
     ngOnChanges() {
-        if (this.simpoSticky) {
-            this.el.nativeElement.style.setProperty("position", "fixed");
-            this.el.nativeElement.style.setProperty("top", "0px");
-            this.el.nativeElement.style.setProperty("left", '0px');
-            if (this.isBrowser && localStorage.getItem('REQUEST_FROM') == 'USER')
-                this.el.nativeElement.style.setProperty("z-index", "10000002");
+        this.applyType();
+    }
+    ngAfterViewInit() {
+        if (!this.isBrowser)
+            return;
+        this.scrollListener = () => this.onScroll();
+        this.resizeListener = () => {
+            this.applyType();
+            this.onScroll();
+        };
+        window.addEventListener('scroll', this.scrollListener, { passive: true });
+        window.addEventListener('resize', this.resizeListener, { passive: true });
+        this.onScroll();
+    }
+    onScroll() {
+        if (!this.isBrowser)
+            return;
+        const scrollY = window.scrollY;
+        const type = this.resolvedType;
+        const el = this.el.nativeElement;
+        if (type === Sticky_Type.SHRINK_ON_SCROLL) {
+            el.classList.toggle('header--scrolled', scrollY > 50);
+        }
+        if (type === Sticky_Type.STICKY_AFTER_SCROLL) {
+            const h = el.getBoundingClientRect().height || 80;
+            const revealed = scrollY > h;
+            el.style.setProperty('position', revealed ? 'fixed' : 'relative');
+            if (revealed) {
+                el.style.setProperty('top', '0px');
+                el.style.setProperty('left', '0px');
+            }
             else {
-                let url = this.router.url;
-                this.el.nativeElement.style.setProperty("z-index", "108");
-                if (url.includes('website-editor'))
-                    this.el.nativeElement.style.setProperty("margin-top", "45px");
-                else if (url.includes('v3-generator'))
-                    this.el.nativeElement.style.setProperty("margin-top", "70px");
-                else
-                    this.el.nativeElement.style.setProperty("margin-top", "0px");
+                el.style.removeProperty('top');
+                el.style.removeProperty('left');
             }
-            // setTimeout(() => {
-            //   if (this.isBrowser && window.innerWidth > 475) {
-            //     this.addParentMargin();
-            //   }
-            // }, 0);
+            el.classList.toggle('simpo-sticky-revealed', revealed);
+            this.stickyScrolled.emit(revealed);
+            return;
         }
-        else {
-            this.el.nativeElement.style.setProperty("position", "relative");
-            // this.removeParentMargin();
+        if (type !== Sticky_Type.NONE) {
+            this.stickyScrolled.emit(scrollY > 50);
         }
     }
-    ngAfterViewInit() {
-        if (!this.isBrowser || typeof ResizeObserver === 'undefined')
+    applyType() {
+        if (!this.isBrowser)
             return;
-        // this.resizeObserver = new ResizeObserver(() => {
-        //   setTimeout(() => {
-        //     if (window.innerWidth > 475 && this.simpoSticky) {
-        //       this.addParentMargin();
-        //     }
-        //   }, 0);
-        // });
-        // this.resizeObserver.observe(this.el.nativeElement);
-    }
-    // private addParentMargin() {
-    //   const nativeElement = this.el.nativeElement as HTMLElement;
-    //   let headerHeight = Math.ceil(nativeElement.getBoundingClientRect().height || nativeElement.offsetHeight || 0);
-    //   const parent = this.el.nativeElement.parentElement;
-    //   if (parent && headerHeight > 0) {
-    //     parent.style.marginBottom = (headerHeight) + 'px';
-    //   }
-    // }
-    // private removeParentMargin() {
-    //   const parent = this.el.nativeElement.parentElement;
-    //   if (parent) {
-    //     parent.style.marginBottom = '0px';
-    //   }
-    // }
+        const el = this.el.nativeElement;
+        const type = this.resolvedType;
+        // Reset all managed classes
+        el.classList.remove('header--scrolled', 'simpo-sticky-revealed');
+        switch (type) {
+            case Sticky_Type.NONE:
+                el.classList.remove('simpo-transparent-type');
+                el.style.setProperty('position', 'relative');
+                el.style.removeProperty('top');
+                el.style.removeProperty('left');
+                el.style.removeProperty('z-index');
+                el.style.removeProperty('margin-top');
+                break;
+            case Sticky_Type.STICKY:
+            case Sticky_Type.SHRINK_ON_SCROLL:
+                el.classList.remove('simpo-transparent-type');
+                this.applyFixed();
+                break;
+            case Sticky_Type.TRANSPARENT_ON_SCROLL:
+                el.classList.add('simpo-transparent-type');
+                this.applyFixed();
+                break;
+            case Sticky_Type.STICKY_AFTER_SCROLL:
+                el.classList.remove('simpo-transparent-type');
+                el.style.setProperty('position', 'relative');
+                el.style.removeProperty('top');
+                el.style.removeProperty('left');
+                this.applyZIndex();
+                break;
+        }
+        // Apply current scroll state immediately
+        this.onScroll();
+    }
+    applyFixed() {
+        const el = this.el.nativeElement;
+        el.style.setProperty('position', 'fixed');
+        el.style.setProperty('top', '0px');
+        el.style.setProperty('left', '0px');
+        this.applyZIndex();
+    }
+    applyZIndex() {
+        const el = this.el.nativeElement;
+        if (localStorage.getItem('REQUEST_FROM') === 'USER') {
+            el.style.setProperty('z-index', '10000002');
+        }
+        else {
+            el.style.setProperty('z-index', '108');
+            const url = this.router.url;
+            if (url.includes('website-editor')) {
+                el.style.setProperty('margin-top', '45px');
+            }
+            else if (url.includes('v3-generator')) {
+                el.style.setProperty('margin-top', '70px');
+            }
+            else {
+                el.style.setProperty('margin-top', '0px');
+            }
+        }
+    }
     ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        // this.removeParentMargin();
+        if (this.scrollListener) {
+            window.removeEventListener('scroll', this.scrollListener);
+        }
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoStickyDirective, deps: [{ token: i0.ElementRef }, { token: i2$2.Router }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SimpoStickyDirective, isStandalone: true, selector: "[simpoSticky]", inputs: { simpoSticky: "simpoSticky", categoryHeader: "categoryHeader" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SimpoStickyDirective, isStandalone: true, selector: "[simpoSticky]", inputs: { stickyType: ["simpoSticky", "stickyType"], categoryHeader: "categoryHeader" }, outputs: { stickyScrolled: "stickyScrolled" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SimpoStickyDirective, decorators: [{
             type: Directive,
@@ -7317,12 +7405,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i2$2.Router }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
-                }] }], propDecorators: { simpoSticky: [{
+                }] }], propDecorators: { stickyType: [{
                 type: Input,
                 args: ['simpoSticky']
             }], categoryHeader: [{
                 type: Input,
                 args: ['categoryHeader']
+            }], stickyScrolled: [{
+                type: Output
             }] } });
 
 class GenderIcon {
@@ -11301,8 +11391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class NavbarSectionComponent {
-    // matDialog = inject(MatDialog);
-    constructor(_eventService, router, activatedRoute, matDialog, bottomSheet, cookieService, storageService, restService) {
+    constructor(_eventService, router, activatedRoute, matDialog, bottomSheet, cookieService, storageService, restService, platformId) {
         this._eventService = _eventService;
         this.router = router;
         this.activatedRoute = activatedRoute;
@@ -11311,16 +11400,21 @@ class NavbarSectionComponent {
         this.cookieService = cookieService;
         this.storageService = storageService;
         this.restService = restService;
+        this.platformId = platformId;
         this.edit = false;
-        this.scrollValue = 0;
+        this.isScrolled = false;
         this.color = '#000000';
         this.searchText = "";
         this.theme = ProductCardTheme;
         this.HeaderStyling = HEADER_STYLING;
+        this.StickyType = Sticky_Type;
+        // matDialog = inject(MatDialog);
+        this.isBrowser = false;
         this.isNavbarOpen = false;
         this.screenWidth = 475;
         this.showEditors = false;
         this.showSearchBar = false;
+        this.isBrowser = isPlatformBrowser(this.platformId);
         this.getScreenSize();
         this.storageService.updateAllData();
     }
@@ -11356,8 +11450,8 @@ class NavbarSectionComponent {
         value = value[0]?.replace(" ", "_");
         this.router.navigate(['/list'], { queryParams: { [type]: value } });
     }
-    onScroll(event) {
-        this.scrollValue = event.currentTarget.pageYOffset / 100;
+    onStickyScrolled(scrolled) {
+        this.isScrolled = scrolled;
     }
     ngOnInit() {
         this.content = this.data?.content;
@@ -11403,8 +11497,17 @@ class NavbarSectionComponent {
             return;
         this.router.navigate(['']);
     }
+    get resolvedStickyType() {
+        if (this.style?.stickyType)
+            return this.style.stickyType;
+        if ((this.style?.sticky || this.isEcommerceWebsite) && this.style?.shrinkOnScroll)
+            return Sticky_Type.SHRINK_ON_SCROLL;
+        if (this.style?.sticky || this.isEcommerceWebsite)
+            return Sticky_Type.STICKY;
+        return Sticky_Type.NONE;
+    }
     get isHeaderSticky() {
-        return this.data?.styles?.sticky || this.isEcommerceWebsite;
+        return this.resolvedStickyType !== Sticky_Type.NONE;
     }
     get backgroundInfo() {
         let background = {};
@@ -11415,16 +11518,22 @@ class NavbarSectionComponent {
                 color: "transparent"
             };
         }
-        return this.nextComponent?.styles?.merge ? (this.scrollValue > 0 ? { ...this.nextComponent.styles.background, color: this.style?.background.color } : { ...background }) : { ...this.data?.styles.background };
+        return this.nextComponent?.styles?.merge
+            ? (this.isScrolled ? { ...this.nextComponent.styles.background, color: this.style?.background.color } : { ...background })
+            : { ...this.data?.styles.background };
     }
     get simpoColor() {
-        return this.nextComponent?.styles?.merge ? (this.scrollValue > 0 ? this.style?.background.color : this.nextComponent.styles?.background?.color) : this.style?.background?.color;
+        return this.nextComponent?.styles?.merge
+            ? (this.isScrolled ? this.style?.background.color : this.nextComponent.styles?.background?.color)
+            : this.style?.background?.color;
     }
     get accentColor() {
-        return this.nextComponent?.styles?.merge ? (this.scrollValue > 0 ? this.style?.background?.accentColor : this.nextComponent.styles?.background?.accentColor) : this.style?.background?.accentColor;
+        return this.nextComponent?.styles?.merge
+            ? (this.isScrolled ? this.style?.background?.accentColor : this.nextComponent.styles?.background?.accentColor)
+            : this.style?.background?.accentColor;
     }
     get isTransparent() {
-        return this.nextComponent?.styles?.merge && this.scrollValue == 0;
+        return this.nextComponent?.styles?.merge && !this.isScrolled;
     }
     redirectTo(content) {
         this._eventService.buttonRedirection.emit({ data: content });
@@ -11479,8 +11588,8 @@ class NavbarSectionComponent {
         }
         return page;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$2.MatDialog }, { token: i8$2.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n              [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$2.MatDialog }, { token: i8$2.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n              [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -11516,8 +11625,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatButtonModule,
                         MatMenuModule,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n              [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$2.MatDialog }, { type: i8$2.MatBottomSheet }, { type: i2$1.CookieService }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
+                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n          [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n              [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$2.MatDialog }, { type: i8$2.MatBottomSheet }, { type: i2$1.CookieService }, { type: StorageServiceService }, { type: RestService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
                 type: Input
@@ -11530,9 +11642,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], childContainer: [{
                 type: ViewChild,
                 args: ["childContainer"]
-            }], onScroll: [{
-                type: HostListener,
-                args: ['window:scroll', ['$event']]
             }], getScreenSize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -17957,6 +18066,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+class CountdownBannerComponent extends BaseSection {
+    constructor(eventService, platformId) {
+        super();
+        this.eventService = eventService;
+        this.platformId = platformId;
+        this.days = '00';
+        this.hours = '00';
+        this.minutes = '00';
+        this.seconds = '00';
+        this.bannerText = '';
+        this.targetDate = "2026-02-17T00:00:00";
+        this.currentTime = Date.now();
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
+        this.bannerText = this.content?.inputText[0].value ?? '';
+        if (isPlatformBrowser(this.platformId)) {
+            this.interval = setInterval(() => {
+                this.currentTime = Date.now();
+            }, 1000);
+        }
+    }
+    ngOnDestroy() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    }
+    getDays(dateString) {
+        if (!dateString)
+            return 0;
+        const target = new Date(dateString).getTime();
+        if (isNaN(target))
+            return 0;
+        const difference = target - this.currentTime;
+        if (difference <= 0)
+            return 0;
+        return Math.floor(difference / (1000 * 60 * 60 * 24));
+    }
+    getHours(dateString) {
+        if (!dateString)
+            return 0;
+        const target = new Date(dateString).getTime();
+        if (isNaN(target))
+            return 0;
+        const difference = target - this.currentTime;
+        if (difference <= 0)
+            return 0;
+        return Math.floor((difference / (1000 * 60 * 60)) % 24);
+    }
+    getMinutes(dateString) {
+        if (!dateString)
+            return 0;
+        const target = new Date(dateString).getTime();
+        if (isNaN(target))
+            return 0;
+        const difference = target - this.currentTime;
+        if (difference <= 0)
+            return 0;
+        return Math.floor((difference / (1000 * 60)) % 60);
+    }
+    getSeconds(dateString) {
+        if (!dateString)
+            return 0;
+        const target = new Date(dateString).getTime();
+        if (isNaN(target))
+            return 0;
+        const difference = target - this.currentTime;
+        if (difference <= 0)
+            return 0;
+        return Math.floor((difference / 1000) % 60);
+    }
+    get stylesLayout() {
+        return { ...this.style?.layout };
+    }
+    getContrastColor(bgColor) {
+        if (!bgColor)
+            return '#000000';
+        let colorToCheck = bgColor;
+        // If gradient → extract first color inside linear-gradient(...)
+        if (bgColor.includes('linear-gradient')) {
+            const match = bgColor.match(/(#[0-9A-Fa-f]{6}|rgb\([^)]+\))/);
+            if (match) {
+                colorToCheck = match[0];
+            }
+        }
+        let r = 0, g = 0, b = 0;
+        // HEX format
+        if (colorToCheck.startsWith('#')) {
+            const hex = colorToCheck.replace('#', '');
+            r = parseInt(hex.substring(0, 2), 16);
+            g = parseInt(hex.substring(2, 4), 16);
+            b = parseInt(hex.substring(4, 6), 16);
+        }
+        // RGB format
+        else if (colorToCheck.startsWith('rgb')) {
+            const values = colorToCheck.match(/\d+/g);
+            if (values) {
+                r = +values[0];
+                g = +values[1];
+                b = +values[2];
+            }
+        }
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+        return brightness > 128 ? '#000000' : '#ffffff';
+    }
+    getAccentBackground() {
+        const bg = this.style?.background;
+        if (!bg)
+            return '';
+        if (bg.accentBackgroundType === 'Solid') {
+            return bg.accentColor;
+        }
+        const angle = this.getGradientDirection(bg.gradientDirection);
+        return angle
+            ? `linear-gradient(${angle}, ${bg.accentColor}, ${bg.secondaryAccentColor})`
+            : `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
+    }
+    getGradientDirection(direction) {
+        switch (direction) {
+            case 'DOWN':
+                return ''; // default top → bottom (no angle needed)
+            case 'RIGHT':
+                return '90deg';
+            case 'DIAGONAL_RIGHT':
+                return '45deg';
+            case 'DIAGONAL_LEFT':
+                return '135deg';
+            default:
+                return ''; // fallback
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountdownBannerComponent, isStandalone: true, selector: "simpo-countdown-banner", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n        [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n        <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n            class=\"sale-bar\">\r\n            <!-- LEFT TEXT -->\r\n            <div class=\"sale-text\">\r\n                <simpo-text-editor *ngIf=\"content?.inputText?.[0] as countdownText\" [(value)]=\"countdownText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\r\n            </div>\r\n\r\n            <!-- TIMER -->\r\n            <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getDays(content?.endDate)}}</span>\r\n                    <small>DAY</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getHours(content?.endDate) }}</span>\r\n                    <small>HOUR</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getMinutes(content?.endDate) }}</span>\r\n                    <small>MIN</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getSeconds(content?.endDate) }}</span>\r\n                    <small>SEC</small>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RIGHT ACTION -->\r\n            <div class=\"sale-action\">\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n                            [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Divider -->\r\n        <ng-container *ngIf=\"style?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n\r\n        <!-- EDIT SELECTOR -->\r\n        <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <!-- DELETE SELECTOR -->\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:28px 50px}.sale-text{font-size:26px;font-weight:600}.sale-timer{display:flex;gap:18px}.time-card{background-color:#fff;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-countdown-banner', standalone: true, imports: [
+                        SimpoElementsModule,
+                        SimpoComponentModule,
+                        CommonModule,
+                        TextEditorComponent,
+                        BackgroundDirective,
+                        HoverDirective,
+                        OverlayDirective,
+                        SpacingHorizontalDirective,
+                        BorderDirective,
+                        ContentFitDirective
+                    ], template: "<section>\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n        [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n        <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n            class=\"sale-bar\">\r\n            <!-- LEFT TEXT -->\r\n            <div class=\"sale-text\">\r\n                <simpo-text-editor *ngIf=\"content?.inputText?.[0] as countdownText\" [(value)]=\"countdownText.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\r\n            </div>\r\n\r\n            <!-- TIMER -->\r\n            <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getDays(content?.endDate)}}</span>\r\n                    <small>DAY</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getHours(content?.endDate) }}</span>\r\n                    <small>HOUR</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getMinutes(content?.endDate) }}</span>\r\n                    <small>MIN</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getSeconds(content?.endDate) }}</span>\r\n                    <small>SEC</small>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RIGHT ACTION -->\r\n            <div class=\"sale-action\">\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n                            [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Divider -->\r\n        <ng-container *ngIf=\"style?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n\r\n        <!-- EDIT SELECTOR -->\r\n        <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <!-- DELETE SELECTOR -->\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:28px 50px}.sale-text{font-size:26px;font-weight:600}.sale-timer{display:flex;gap:18px}.time-card{background-color:#fff;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }], propDecorators: { edit: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], nextComponentColor: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
 class HeaderSectionComponent {
     constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService, storage, platformId, document
     // private cdRef: ChangeDetectorRef
@@ -17973,17 +18248,19 @@ class HeaderSectionComponent {
         this.document = document;
         this.edit = true;
         this.isBrowser = false;
-        this.scrollValue = 0;
         this.isOffcanvasOpen = false;
+        this.isFullScreenMenuOpen = false;
         this.color = '#000000';
         this.searchText = "";
         this.theme = ProductCardTheme;
         this.HeaderStyling = Header_Type;
-        this.parentHeight = 70; // Default height
-        // matDialog = inject(MatDialog);
+        this.StickyType = Sticky_Type;
+        this.MobileMenuType = Mobile_Menu_Type;
+        this.parentHeight = 70;
         this.currentPlaceholder = '';
         this.placeholderIndex = 0;
         this.animatePlaceholder = false;
+        this.isScrolled = false;
         this._eventSubscriber = null;
         this.toShowInJewellery = false;
         this.passbookAppStatus = false;
@@ -17993,7 +18270,6 @@ class HeaderSectionComponent {
         this.screenWidth = 475;
         this.showEditors = false;
         this.showSearchBar = false;
-        this.isScrolled = false;
         this.showList = false;
         this.dropdownLeft = 0;
         this.dropdownTop = 0;
@@ -18110,11 +18386,6 @@ class HeaderSectionComponent {
         value = value[0]?.replace(" ", "_");
         this.router.navigate(['/list'], { queryParams: { [type]: value } });
     }
-    onScroll(event) {
-        if (!this.isBrowser)
-            return;
-        this.syncScrollState();
-    }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
@@ -18122,15 +18393,6 @@ class HeaderSectionComponent {
         this.queryParamSubscription = this.activatedRoute.queryParams.subscribe((qParam) => {
             this.searchText = qParam["searchTxt"];
         });
-        if (this.isBrowser) {
-            this.routerSubscription = this.router.events
-                .pipe(filter((event) => event instanceof NavigationEnd))
-                .subscribe(() => {
-                this.syncScrollState();
-                this.scheduleParentHeightCalculation();
-            });
-            this.syncScrollState();
-        }
         this.getMenuItems();
         // this.eventService.activateSmartSearch.subscribe((res: boolean) => {
         //   if (this.style?.searchBarPlaceholderList?.length > 0 && res) {
@@ -18174,12 +18436,15 @@ class HeaderSectionComponent {
             offcanvasElement.addEventListener('shown.bs.offcanvas', this.offcanvasShownHandler);
             offcanvasElement.addEventListener('hidden.bs.offcanvas', this.offcanvasHiddenHandler);
         }
+        if (this.isBrowser && this.resolvedMobileMenuType === Mobile_Menu_Type.BOTTOM_STICKY) {
+            this.document.documentElement.style.setProperty('--bottom-nav-height', 'calc(64px + env(safe-area-inset-bottom))');
+        }
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
         this.queryParamSubscription?.unsubscribe();
-        this.routerSubscription?.unsubscribe();
         this.document.body.style.overflow = '';
+        this.document.documentElement.style.removeProperty('--bottom-nav-height');
         if (this.mobileOffcanvas?.nativeElement) {
             const offcanvasElement = this.mobileOffcanvas.nativeElement;
             if (this.offcanvasShownHandler) {
@@ -18210,11 +18475,8 @@ class HeaderSectionComponent {
             return;
         setTimeout(() => this.getParentHeight(), 0);
     }
-    syncScrollState() {
-        if (!this.isBrowser)
-            return;
-        this.scrollValue = window.scrollY;
-        this.isScrolled = this.scrollValue > 50;
+    onStickyScrolled(scrolled) {
+        this.isScrolled = scrolled;
     }
     getParentHeight() {
         if (!this.isBrowser || !this.childContainer?.nativeElement)
@@ -18245,21 +18507,79 @@ class HeaderSectionComponent {
             return;
         this.router.navigate(['']);
     }
+    get resolvedMobileMenuType() {
+        return this.style?.mobileMenuType ?? Mobile_Menu_Type.HAMBURGER;
+    }
+    get bottomStickyNavItems() {
+        const items = this.footerMenu?.length ? this.footerMenu : (this.content?.navbarButtons ?? []);
+        return items.filter((item) => item.showHeader !== false).slice(0, 5);
+    }
+    isNavItemActive(item) {
+        const url = (this.router.url || '').split('?')[0];
+        const target = (item?.redirectionUrl ?? item?.redirectionalUrl ?? '').split('?')[0];
+        if (item?.type === 'HOME_PAGE')
+            return url === '' || url === '/';
+        if (!target)
+            return false;
+        return url === target || (target !== '/' && url.startsWith(target));
+    }
+    get activeBottomNavIndex() {
+        return (this.bottomStickyNavItems || []).findIndex((it) => this.isNavItemActive(it));
+    }
+    openFullScreenMenu() {
+        this.isFullScreenMenuOpen = true;
+        this.selectedMobileMenu = null;
+        if (this.isBrowser)
+            this.document.body.style.overflow = 'hidden';
+    }
+    closeFullScreenMenu() {
+        this.isFullScreenMenuOpen = false;
+        this.selectedMobileMenu = null;
+        if (this.isBrowser)
+            this.document.body.style.overflow = '';
+    }
+    /** Full-screen menu item tap: drill into submenu if it has children, else navigate + close. */
+    onFullScreenItemClick(item) {
+        if (item?.children?.length) {
+            this.selectMobileMenu(item);
+        }
+        else {
+            this.redirectionsOfMenu(item);
+            this.closeFullScreenMenu();
+        }
+    }
+    get resolvedStickyType() {
+        if (this.style?.stickyType)
+            return this.style.stickyType;
+        if (this.style?.sticky && this.style?.shrinkOnScroll)
+            return Sticky_Type.SHRINK_ON_SCROLL;
+        if (this.style?.sticky)
+            return Sticky_Type.STICKY;
+        return Sticky_Type.NONE;
+    }
     get isHeaderSticky() {
-        return this.data?.styles?.sticky;
+        return this.resolvedStickyType !== Sticky_Type.NONE;
     }
     get backgroundInfo() {
-        let background = {};
-        return this.nextComponent?.styles?.merge && this.scrollValue == 0 && !this.isMobile ? { ...this.nextComponent.styles.background } : { ...this.data?.styles.background };
+        if (this.resolvedStickyType === Sticky_Type.TRANSPARENT_ON_SCROLL && !this.isScrolled && !this.isMobile) {
+            return { ...this.data?.styles.background, color: 'transparent', showImage: false };
+        }
+        return this.nextComponent?.styles?.merge && !this.isScrolled && !this.isMobile
+            ? { ...this.nextComponent.styles.background }
+            : { ...this.data?.styles.background };
     }
     get simpoColor() {
-        return this.nextComponent?.styles?.merge ? (this.scrollValue > 0 ? this.style?.background.color : this.nextComponent.styles?.background?.color) : this.style?.background?.color;
+        return this.nextComponent?.styles?.merge
+            ? (this.isScrolled ? this.style?.background.color : this.nextComponent.styles?.background?.color)
+            : this.style?.background?.color;
     }
     get accentColor() {
-        return this.nextComponent?.styles?.merge ? (this.scrollValue > 0 ? this.style?.background?.accentColor : this.nextComponent.styles?.background?.accentColor) : this.style?.background?.accentColor;
+        return this.nextComponent?.styles?.merge
+            ? (this.isScrolled ? this.style?.background?.accentColor : this.nextComponent.styles?.background?.accentColor)
+            : this.style?.background?.accentColor;
     }
     get isTransparent() {
-        return this.nextComponent?.styles?.merge && this.scrollValue == 0;
+        return this.nextComponent?.styles?.merge && !this.isScrolled;
     }
     redirectTo(content) {
         this._eventService.buttonRedirection.emit({ data: content });
@@ -18277,8 +18597,11 @@ class HeaderSectionComponent {
         return this.isEcommerceWebsite;
     }
     get shouldReserveMobileHeaderSpace() {
-        if (!this.isHeaderSticky)
+        const type = this.resolvedStickyType;
+        if (type === Sticky_Type.NONE)
             return false;
+        if (type === Sticky_Type.STICKY_AFTER_SCROLL)
+            return this.isScrolled;
         if (this.isMobile)
             return !this.shouldShowMobileCategoryHeader;
         return true;
@@ -18351,6 +18674,7 @@ class HeaderSectionComponent {
         }
         return page;
     }
+    // isScrolled: boolean = false;
     // @HostListener('window:scroll', [])
     // onWindowScroll() {
     //   this.isScrolled =  window.scrollY > 50;
@@ -18523,7 +18847,7 @@ class HeaderSectionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$2.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n      [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\"\r\n      [class.dropdown-open]=\"showList\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\r\n      <div class=\"dropdown_menu_static w-100\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <ng-container *ngFor=\"let item of footerMenu\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <div class=\"dd-tab-wrap\">\r\n                  <button type=\"button\" class=\"dd-tab\"\r\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\r\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\r\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\r\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                        d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                        fill=\"#000000\" />\r\n                    </svg>\r\n                  </button>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #pageLinksDefault>\r\n      <div class=\"page-links-nav\">\r\n        <div class=\"d-flex gap-3\"\r\n          [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n          <ng-container *ngFor=\"let item of footerMenu\">\r\n            <ng-container *ngIf=\"item.showHeader\">\r\n              <div class=\"page-links-tab\" style=\"display: contents;\">\r\n                <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n                  [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n                  [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('LOGIN')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;\r\n    Login</button>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('PROFILE')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getWishlistItemsCount}}</div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  data-bs-backdrop=\"false\"\r\n  [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n  <!-- <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container> -->\r\n  <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n  <!-- <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div> -->\r\n  <div class=\"offcanvas-body\">\r\n    <ng-container *ngIf=\"isEcommerceWebsite\">\r\n      <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n      <div class=\"pages\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n        {{ele?.label}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- [class.hide-dropdown]=\"!showList\" -->\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\r\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n            ]\">\r\n\r\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n              </div>\r\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n                {{ele?.label | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n              *ngIf=\"ele?.children?.length > 0\">\r\n              {{ele?.label | titlecase}}\r\n            </div>\r\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n              <div class=\"d-flex flex-column gap-3 list-item\">\r\n                <ng-container *ngFor=\"let child of ele?.children\">\r\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n                    {{child?.label | titlecase}}\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n  <div class=\"mobile-menu-container\">\r\n\r\n    <div class=\"mobile-menu-grid\" *ngIf=\"!selectedMobileMenu\">\r\n      <div class=\"mobile-menu-item\" *ngFor=\"let ele of megaMenu\"\r\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n        <span class=\"mobile-menu-label\">{{ele?.label | uppercase}}</span>\r\n        <mat-icon class=\"mobile-menu-arrow\" *ngIf=\"ele?.children?.length\">chevron_right</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-detail\" *ngIf=\"selectedMobileMenu\">\r\n      <div class=\"mobile-menu-back\" (click)=\"goBackMobileMenu()\">\r\n        <mat-icon>chevron_left</mat-icon>\r\n        <span>{{selectedMobileMenu?.label | titlecase}}</span>\r\n      </div>\r\n\r\n      <div class=\"mobile-submenu-sections\">\r\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n          <div class=\"mobile-submenu-section\">\r\n            <ng-container\r\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n                *ngIf=\"child.imageUrl\">\r\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container\r\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n              <div class=\"mobile-submenu-header\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n                {{child?.label | uppercase}}</div>\r\n\r\n              <div class=\"mobile-submenu-grid\" *ngIf=\"child?.children?.length\">\r\n                <div class=\"mobile-submenu-item\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n                  data-bs-dismiss=\"offcanvas\">\r\n                  {{sub?.label | titlecase}}\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n      </div>\r\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n          (click)=\"goBackMobileMenu()\">\r\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\"\r\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Dropdown menu style -->\r\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n              <button type=\"button\" class=\"dd-tab\"\r\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\r\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                    d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                    fill=\"#000000\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n\r\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n          <a class=\"action-link icon-only dropdown-search-toggle\"\r\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n          </a>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"storeAvaiable\">\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n            *ngIf=\"!getPincode\">\r\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n              <path\r\n                d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n                fill=\"#000000\" />\r\n            </svg> -->\r\n\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n              <g>\r\n                <path\r\n                  d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n                </path>\r\n                <path\r\n                  d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n                </path>\r\n              </g>\r\n            </svg>\r\n\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n          </a>\r\n\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n              <path d=\"M2 7h20\"></path>\r\n              <path\r\n                d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n              </path>\r\n            </svg>\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n              getPincode}}</span>\r\n\r\n          </a>\r\n\r\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n              Your PIN Code unlocks\r\n            </div>\r\n            <div class=\"sub-text text-center f-14 pincode-text\">\r\n              Fastest delivery date, Try-at-Home availability,\r\n              Nearest store and In-store design!\r\n            </div>\r\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n              [class.error-border]=\"pinError\">\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n                class=\"w-75 p-0\">\r\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n            </div>\r\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n              Please enter a valid pincode\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n\r\n        <div class=\"dropdown-search-expand\"\r\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n          <div class=\"dropdown-search-box\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-icon\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n              aria-label=\"Search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:100%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:var(--margin-top, 0px)!important;height:calc(100vh - var(--margin-top, 0px))!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:88%}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:10%}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n    <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\r\n      [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n      [class.dropdown-open]=\"showList\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"style?.countdown?.display\">\r\n        <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\">\r\n        </simpo-countdown-banner>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n\r\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\r\n    <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\r\n      <div class=\"dropdown_menu_static w-100\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <ng-container *ngFor=\"let item of footerMenu\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <div class=\"dd-tab-wrap\">\r\n                  <button type=\"button\" class=\"dd-tab\"\r\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\r\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\r\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\r\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                        d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                        fill=\"#000000\" />\r\n                    </svg>\r\n                  </button>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #pageLinksDefault>\r\n      <div class=\"drawer-rows\">\r\n        <ng-container *ngFor=\"let item of footerMenu\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\r\n              <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\r\n              <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\r\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </ng-template>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('LOGIN')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;\r\n    Login</button>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('PROFILE')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getWishlistItemsCount}}</div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\r\n  <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n    data-bs-backdrop=\"false\"\r\n    [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n\r\n    <!-- TOP BAR -->\r\n    <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\r\n      <div class=\"drawer-logo\">\r\n        <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n      </div>\r\n      <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- BODY -->\r\n    <div class=\"offcanvas-body drawer-body\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- DIVIDER + QUICK ACTIONS -->\r\n    <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\r\n      <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\r\n      <div class=\"drawer-actions\">\r\n        <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\r\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n        {{ele?.label}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- [class.hide-dropdown]=\"!showList\" -->\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\r\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n            ]\">\r\n\r\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n              </div>\r\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n                {{ele?.label | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n              *ngIf=\"ele?.children?.length > 0\">\r\n              {{ele?.label | titlecase}}\r\n            </div>\r\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n              <div class=\"d-flex flex-column gap-3 list-item\">\r\n                <ng-container *ngFor=\"let child of ele?.children\">\r\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n                    {{child?.label | titlecase}}\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n  <div class=\"mobile-menu-container\">\r\n\r\n    <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\r\n      <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\r\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n        <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\r\n        <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\" [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\r\n      <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\r\n        <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\r\n        <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\r\n      </div>\r\n\r\n      <div class=\"drawer-detail-sections\">\r\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n          <div class=\"drawer-detail-section\">\r\n            <ng-container\r\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n                *ngIf=\"child.imageUrl\">\r\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container\r\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n              <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n                <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\r\n              </div>\r\n\r\n              <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\r\n                <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n                  data-bs-dismiss=\"offcanvas\">\r\n                  {{sub?.label | titlecase}}\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n      </div>\r\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\"\r\n    [ngClass]=\"{\r\n      'ecom-header1': style?.styling === 'Header1',\r\n      'ecom-header2': style?.styling === 'Header2',\r\n      'ecom-header3': style?.styling === 'Header3',\r\n      'ecom-header4': style?.styling === 'Header4'\r\n    }\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <!-- HAMBURGER -->\r\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n          for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n          (click)=\"goBackMobileMenu()\">\r\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n          </svg>\r\n        </label>\r\n        <!-- FULL SCREEN -->\r\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\"\r\n          class=\"mobile-menu-btn\" aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\"\r\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Dropdown menu style -->\r\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n              <button type=\"button\" class=\"dd-tab\"\r\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\r\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                    d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                    fill=\"#000000\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n\r\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n          <a class=\"action-link icon-only dropdown-search-toggle\"\r\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n          </a>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"storeAvaiable\">\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n            *ngIf=\"!getPincode\">\r\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n              <path\r\n                d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n                fill=\"#000000\" />\r\n            </svg> -->\r\n\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n              <g>\r\n                <path\r\n                  d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n                </path>\r\n                <path\r\n                  d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n                </path>\r\n              </g>\r\n            </svg>\r\n\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n          </a>\r\n\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n              <path d=\"M2 7h20\"></path>\r\n              <path\r\n                d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n              </path>\r\n            </svg>\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n              getPincode}}</span>\r\n\r\n          </a>\r\n\r\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n              Your PIN Code unlocks\r\n            </div>\r\n            <div class=\"sub-text text-center f-14 pincode-text\">\r\n              Fastest delivery date, Try-at-Home availability,\r\n              Nearest store and In-store design!\r\n            </div>\r\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n              [class.error-border]=\"pinError\">\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n                class=\"w-75 p-0\">\r\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n            </div>\r\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n              Please enter a valid pincode\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n\r\n        <div class=\"dropdown-search-expand\"\r\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n          <div class=\"dropdown-search-box\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-icon\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n              aria-label=\"Search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenMenuTemplate>\r\n  <div class=\"fs-menu\">\r\n    <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\r\n    <div class=\"fs-menu-inner\">\r\n      <div class=\"fs-menu-head\">\r\n        <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\r\n          <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n        </div>\r\n        <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\r\n          <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <!-- Main level -->\r\n      <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\r\n        <ng-container *ngFor=\"let item of footerMenu\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\r\n              (click)=\"onFullScreenItemClick(item)\">\r\n              <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\r\n              <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\r\n              <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\" [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\r\n            </a>\r\n          </ng-container>\r\n        </ng-container>\r\n      </nav>\r\n\r\n      <!-- Submenu (drill-in) level -->\r\n      <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\r\n        <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\r\n          <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\r\n          <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\r\n        </button>\r\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n          <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\r\n            (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\r\n            <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\r\n          </a>\r\n          <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\r\n            (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\r\n        </ng-container>\r\n      </nav>\r\n      <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\r\n        <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\r\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #bottomStickyNavTemplate>\r\n  <nav class=\"bs-nav\">\r\n    <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\r\n      <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\r\n        [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\r\n        <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\r\n          [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:-13px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }, { kind: "component", type: CountdownBannerComponent, selector: "simpo-countdown-banner", inputs: ["edit", "data", "customClass", "nextComponentColor", "index", "delete"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
             type: Component,
@@ -18546,8 +18870,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatMenuModule,
                         SpacingHorizontalDirective,
                         MovingTextComponent,
+                        CountdownBannerComponent,
                         ContentFitDirective,
-                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n    <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n      [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\"\r\n      [class.dropdown-open]=\"showList\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n        aria-controls=\"offcanvasRight\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n      aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\r\n      <div class=\"dropdown_menu_static w-100\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <ng-container *ngFor=\"let item of footerMenu\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <div class=\"dd-tab-wrap\">\r\n                  <button type=\"button\" class=\"dd-tab\"\r\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\r\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\r\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\r\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                        d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                        fill=\"#000000\" />\r\n                    </svg>\r\n                  </button>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #pageLinksDefault>\r\n      <div class=\"page-links-nav\">\r\n        <div class=\"d-flex gap-3\"\r\n          [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n          <ng-container *ngFor=\"let item of footerMenu\">\r\n            <ng-container *ngIf=\"item.showHeader\">\r\n              <div class=\"page-links-tab\" style=\"display: contents;\">\r\n                <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n                  [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n                  [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n              </div>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('LOGIN')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;\r\n    Login</button>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('PROFILE')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getWishlistItemsCount}}</div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n  data-bs-backdrop=\"false\"\r\n  [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n  <!-- <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n    <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container> -->\r\n  <!-- <button type=\"button\" class=\"btn-close\"  aria-label=\"Close\"></button> -->\r\n  <!-- <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n  </div> -->\r\n  <div class=\"offcanvas-body\">\r\n    <ng-container *ngIf=\"isEcommerceWebsite\">\r\n      <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n      <div class=\"pages\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"offcanvas-footer\">\r\n    <div class=\"canvas-button\">\r\n      <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n        {{ele?.label}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- [class.hide-dropdown]=\"!showList\" -->\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\r\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n            ]\">\r\n\r\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n              </div>\r\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n                {{ele?.label | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n              *ngIf=\"ele?.children?.length > 0\">\r\n              {{ele?.label | titlecase}}\r\n            </div>\r\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n              <div class=\"d-flex flex-column gap-3 list-item\">\r\n                <ng-container *ngFor=\"let child of ele?.children\">\r\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n                    {{child?.label | titlecase}}\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n  <div class=\"mobile-menu-container\">\r\n\r\n    <div class=\"mobile-menu-grid\" *ngIf=\"!selectedMobileMenu\">\r\n      <div class=\"mobile-menu-item\" *ngFor=\"let ele of megaMenu\"\r\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n        <span class=\"mobile-menu-label\">{{ele?.label | uppercase}}</span>\r\n        <mat-icon class=\"mobile-menu-arrow\" *ngIf=\"ele?.children?.length\">chevron_right</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"mobile-menu-detail\" *ngIf=\"selectedMobileMenu\">\r\n      <div class=\"mobile-menu-back\" (click)=\"goBackMobileMenu()\">\r\n        <mat-icon>chevron_left</mat-icon>\r\n        <span>{{selectedMobileMenu?.label | titlecase}}</span>\r\n      </div>\r\n\r\n      <div class=\"mobile-submenu-sections\">\r\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n          <div class=\"mobile-submenu-section\">\r\n            <ng-container\r\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n                *ngIf=\"child.imageUrl\">\r\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container\r\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n              <div class=\"mobile-submenu-header\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n                {{child?.label | uppercase}}</div>\r\n\r\n              <div class=\"mobile-submenu-grid\" *ngIf=\"child?.children?.length\">\r\n                <div class=\"mobile-submenu-item\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n                  data-bs-dismiss=\"offcanvas\">\r\n                  {{sub?.label | titlecase}}\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n      </div>\r\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n          (click)=\"goBackMobileMenu()\">\r\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\"\r\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Dropdown menu style -->\r\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n              <button type=\"button\" class=\"dd-tab\"\r\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\r\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                    d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                    fill=\"#000000\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n\r\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n          <a class=\"action-link icon-only dropdown-search-toggle\"\r\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n          </a>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"storeAvaiable\">\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n            *ngIf=\"!getPincode\">\r\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n              <path\r\n                d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n                fill=\"#000000\" />\r\n            </svg> -->\r\n\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n              <g>\r\n                <path\r\n                  d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n                </path>\r\n                <path\r\n                  d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n                </path>\r\n              </g>\r\n            </svg>\r\n\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n          </a>\r\n\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n              <path d=\"M2 7h20\"></path>\r\n              <path\r\n                d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n              </path>\r\n            </svg>\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n              getPincode}}</span>\r\n\r\n          </a>\r\n\r\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n              Your PIN Code unlocks\r\n            </div>\r\n            <div class=\"sub-text text-center f-14 pincode-text\">\r\n              Fastest delivery date, Try-at-Home availability,\r\n              Nearest store and In-store design!\r\n            </div>\r\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n              [class.error-border]=\"pinError\">\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n                class=\"w-75 p-0\">\r\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n            </div>\r\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n              Please enter a valid pincode\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n\r\n        <div class=\"dropdown-search-expand\"\r\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n          <div class=\"dropdown-search-box\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-icon\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n              aria-label=\"Search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:100%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:var(--margin-top, 0px)!important;height:calc(100vh - var(--margin-top, 0px))!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:88%}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:10%}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}\n"] }]
+                        SociaIconsComponent,
+                    ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n  <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n    [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\r\n    <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\r\n      [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n      [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n      simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\r\n      (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n      [class.dropdown-open]=\"showList\">\r\n      <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n      <ng-container *ngIf=\"style?.headline?.display\">\r\n        <div>\r\n          <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"style?.countdown?.display\">\r\n        <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\">\r\n        </simpo-countdown-banner>\r\n      </ng-container>\r\n\r\n      <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n      </div>\r\n      <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n        [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\r\n        [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\r\n        <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n      </div>\r\n\r\n      <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n        [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n        <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n      </div>\r\n\r\n      <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"style?.background?.color\">search</mat-icon>\r\n      </div> -->\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n        <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n      </ng-container>\r\n      <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n      </div>\r\n    </div>\r\n\r\n    <ng-container\r\n      *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\r\n      <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n\r\n  <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n    <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n  </ng-container> -->\r\n\r\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\r\n    <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\r\n  </ng-container>\r\n\r\n  <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\r\n    <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\r\n  </ng-container>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </div>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n  <div class=\"header1\">\r\n    <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n  <div class=\"header1\">\r\n    <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n    </ng-container>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n  <div class=\"header1\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n      <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n      <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container> </ng-container>\r\n    <!-- HAMBURGER -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n         data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <!-- FULL SCREEN -->\r\n    <div class=\"d-flex gap-15 align-center\"\r\n         *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\r\n      <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\r\n      [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\r\n      <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n    ((content?.logo?.size >= 60  && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n    [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\r\n    (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n    <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\r\n      <div class=\"dropdown_menu_static w-100\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <ng-container *ngFor=\"let item of footerMenu\">\r\n              <ng-container *ngIf=\"item.showHeader\">\r\n                <div class=\"dd-tab-wrap\">\r\n                  <button type=\"button\" class=\"dd-tab\"\r\n                    [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\r\n                    (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\r\n                    <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                      [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\r\n                    <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                      viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                      <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                        d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                        fill=\"#000000\" />\r\n                    </svg>\r\n                  </button>\r\n                </div>\r\n              </ng-container>\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n\r\n    <ng-template #pageLinksDefault>\r\n      <div class=\"drawer-rows\">\r\n        <ng-container *ngFor=\"let item of footerMenu\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\r\n              <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\r\n              <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\r\n                [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </ng-template>\r\n\r\n  </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n          [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n          [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n      </div>\r\n      <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n        (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n        <mat-icon>person_outline</mat-icon>\r\n        Login\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn && !isMobile\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('LOGIN')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;\r\n    Login</button>\r\n  <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\r\n    (click)=\"goToAccount('PROFILE')\">\r\n    <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <path\r\n        d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n      <path\r\n        d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\r\n        stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\r\n    </svg>\r\n    &nbsp;Account</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n    *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n    <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n      <div class=\"item-count fw-bold\">\r\n        {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n        <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n      </div>\r\n      <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n        View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n    [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n    <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n    </div> -->\r\n    <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n      <div class=\"input-group w-75 ml-2\">\r\n        <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n          [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n          [style.color]=\"backgroundInfo?.accentColor\">\r\n        <!-- <span class=\"animated-placeholder position-absolute\" \r\n          [class.animate]=\"animatePlaceholder\"\r\n          *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n          {{ currentPlaceholder }}\r\n        </span> -->\r\n        <mat-icon class=\"h-100\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' +  backgroundInfo?.accentColor + ' 0%' + ',' +  backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n          [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n      </div>\r\n      <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n          height=\"30\" version=\"1.1\">\r\n          <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n            <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\r\n              [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path\r\n              d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\r\n              [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n              stroke-opacity=\"1\" />\r\n            <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n            <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n              fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n          </g>\r\n        </svg>\r\n        <div [style.color]=\"accentColor\">Schemes</div>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-center\">\r\n      <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n        [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n        [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n        <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n        <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n        Pincode\r\n      </div>\r\n      <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n        [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n        getPincode}}</div>\r\n\r\n      <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n      <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your PIN Code unlocks\r\n        </div>\r\n        <div class=\"sub-text text-center f-14 pincode-text\">\r\n          Fastest delivery date, Try-at-Home availability,\r\n          Nearest store and In-store design!\r\n        </div>\r\n        <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n          [class.error-border]=\"pinError\">\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n            class=\"w-75 p-0\">\r\n          <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n        </div>\r\n        <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n          Please enter a valid pincode\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getWishlistItemsCount}}</div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n        <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n        <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n          [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?  backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n          {{getCartItemsCount}}</div>\r\n      </div>\r\n      <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n          <path\r\n            d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\r\n            fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n          <path\r\n            d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\r\n            stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n        </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n      </div>\r\n      <!-- (mouseleave)=\"showLogin = false\" -->\r\n      <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n        <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n          Your Account\r\n        </div>\r\n        <div class=\"sub-text text-center f-14\">\r\n          Access account & manage your orders.\r\n        </div>\r\n        <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n          <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n            [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n            [style.color]=\"style?.background?.color\">Sign Up</div>\r\n          <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n            [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n        *ngIf=\"loggedIn\">\r\n        <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n      </div>\r\n    </div>\r\n    <!-- <div> -->\r\n    <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n    <!-- </div> -->\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n    [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n            data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n            <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n              (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\r\n  <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n    data-bs-backdrop=\"false\"\r\n    [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n\r\n    <!-- TOP BAR -->\r\n    <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\r\n      <div class=\"drawer-logo\">\r\n        <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n      </div>\r\n      <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\r\n        <mat-icon>chevron_left</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <!-- BODY -->\r\n    <div class=\"offcanvas-body drawer-body\">\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <!-- DIVIDER + QUICK ACTIONS -->\r\n    <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\r\n      <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\r\n      <div class=\"drawer-actions\">\r\n        <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\r\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n  <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n    (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n    [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n    [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n  <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n    *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n    [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n  <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n    *ngIf=\"loggedIn\">\r\n    <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n  <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n    *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n    <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n    </div>\r\n    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n      <b>{{content?.siteName?.value}}</b>\r\n    </div>\r\n  </div>\r\n  <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n  <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n    *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n  <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n  <div class=\"categories-wrapper\"\r\n    *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n    (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n    <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n    <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n      [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n      <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n        [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n        (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n        {{ele?.label}}\r\n      </div>\r\n    </div>\r\n\r\n    <!-- [class.hide-dropdown]=\"!showList\" -->\r\n    <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n      <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n        <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\r\n          <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\r\n              ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\r\n              ele?.children?.length > 0 && !last ? 'has-right-border' : ''\r\n            ]\">\r\n\r\n            <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\r\n                <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\r\n              </div>\r\n              <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\r\n                {{ele?.label | titlecase}}\r\n              </div>\r\n            </ng-container>\r\n\r\n            <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\r\n              *ngIf=\"ele?.children?.length > 0\">\r\n              {{ele?.label | titlecase}}\r\n            </div>\r\n            <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n              <div class=\"d-flex flex-column gap-3 list-item\">\r\n                <ng-container *ngFor=\"let child of ele?.children\">\r\n                  <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n                    {{child?.label | titlecase}}\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileMenuListTemplate>\r\n  <div class=\"mobile-menu-container\">\r\n\r\n    <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\r\n      <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\r\n        (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\r\n        [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\r\n        <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\r\n        <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\" [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\r\n      <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\r\n        <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\r\n        <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\r\n      </div>\r\n\r\n      <div class=\"drawer-detail-sections\">\r\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n          <div class=\"drawer-detail-section\">\r\n            <ng-container\r\n              *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\r\n              <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\r\n                *ngIf=\"child.imageUrl\">\r\n                <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\r\n                <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\r\n              </div>\r\n            </ng-container>\r\n\r\n            <ng-container\r\n              *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\r\n              <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\r\n                <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\r\n              </div>\r\n\r\n              <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\r\n                <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\r\n                  data-bs-dismiss=\"offcanvas\">\r\n                  {{sub?.label | titlecase}}\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n  <div class=\"categories-header d-flex gap-3  py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n    [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n    <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n      [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n      <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n        <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"br-12 mobile-category-image\">\r\n      </div>\r\n      <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n  <header class=\"site-header\"\r\n    [ngClass]=\"{\r\n      'ecom-header1': style?.styling === 'Header1',\r\n      'ecom-header2': style?.styling === 'Header2',\r\n      'ecom-header3': style?.styling === 'Header3',\r\n      'ecom-header4': style?.styling === 'Header4'\r\n    }\">\r\n    <!-- Top Bar: Logo, Search, User Actions -->\r\n    <div class=\"top-bar\">\r\n\r\n      <!-- Mobile Menu Toggle -->\r\n      <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n        <!-- HAMBURGER -->\r\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\r\n          for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n          data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\"\r\n          (click)=\"goBackMobileMenu()\">\r\n          <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n          <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\r\n          </svg>\r\n        </label>\r\n        <!-- FULL SCREEN -->\r\n        <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\"\r\n          class=\"mobile-menu-btn\" aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n            [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\">\r\n            <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n            <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n            <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n          </svg>\r\n        </label>\r\n\r\n        <!-- Logo Section -->\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size  + 15\"\r\n            [height]=\"content?.logo?.size\">\r\n        </a>\r\n\r\n        <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && content?.logo?.text?.isIcon \r\n          && content?.logo?.text?.url\">\r\n\r\n          <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n            [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n          <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n\r\n        <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n          && content?.logo?.text?.isText \r\n          && !content?.logo?.text?.isIcon\">\r\n\r\n          <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n            {{ content?.siteName?.value }}\r\n          </span>\r\n        </a>\r\n      </div>\r\n\r\n      <!-- Search Bar -->\r\n      <div class=\"search-wrapper\"\r\n        *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n        <div class=\"search-bar\">\r\n          <!-- Search Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n          </svg>\r\n          <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n            aria-label=\"Search\">\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Dropdown menu style -->\r\n      <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n        (mouseleave)=\"showList = false; selectedCategory = null\">\r\n        <div class=\"dd-nav-scroll\">\r\n          <div class=\"dd-nav\">\r\n            <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\r\n              <button type=\"button\" class=\"dd-tab\"\r\n                [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n                (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\r\n                <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\r\n                  [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\r\n                <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\r\n                  viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\r\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                    d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\r\n                    fill=\"#000000\" />\r\n                </svg>\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\r\n          [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\r\n          <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\r\n            (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\r\n            <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n            <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n            <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\r\n              style=\"display: block;\">\r\n              <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n                (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n                <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <!-- Right Actions -->\r\n      <div class=\"user-actions\">\r\n\r\n        <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n          <a class=\"action-link icon-only dropdown-search-toggle\"\r\n            (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\r\n              stroke-linejoin=\"round\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n          </a>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"storeAvaiable\">\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n            *ngIf=\"!getPincode\">\r\n            <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n              <path\r\n                d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n                fill=\"#000000\" />\r\n            </svg> -->\r\n\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n              [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n              <g>\r\n                <path\r\n                  d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n                </path>\r\n                <path\r\n                  d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n                </path>\r\n              </g>\r\n            </svg>\r\n\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n          </a>\r\n\r\n          <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n            [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n              stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n              <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n              <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n              <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n              <path d=\"M2 7h20\"></path>\r\n              <path\r\n                d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n              </path>\r\n            </svg>\r\n            <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n              getPincode}}</span>\r\n\r\n          </a>\r\n\r\n          <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n            <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n              Your PIN Code unlocks\r\n            </div>\r\n            <div class=\"sub-text text-center f-14 pincode-text\">\r\n              Fastest delivery date, Try-at-Home availability,\r\n              Nearest store and In-store design!\r\n            </div>\r\n            <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n              [class.error-border]=\"pinError\">\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n                class=\"w-75 p-0\">\r\n              <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n            </div>\r\n            <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n              Please enter a valid pincode\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n          (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n          <!-- User Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n            <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n          </svg>\r\n        </a>\r\n\r\n        <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n          <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n            Your Account\r\n          </div>\r\n          <div class=\"sub-text text-center f-14\">\r\n            Access account & manage your orders.\r\n          </div>\r\n          <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n            <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n              [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ?   accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n              [style.color]=\"style?.background?.color\">Sign Up</div>\r\n            <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n              [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n          </div>\r\n        </div>\r\n\r\n        <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n          <!-- Heart Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path\r\n              d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n            </path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\r\n        </a>\r\n\r\n        <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n          <!-- Shopping Bag Icon SVG -->\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n            stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n            <path d=\"M3 6h18\"></path>\r\n            <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n          </svg>\r\n          <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n            *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n        </a>\r\n\r\n        <div class=\"dropdown-search-expand\"\r\n          *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n          <div class=\"dropdown-search-box\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-icon\">\r\n              <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n            </svg>\r\n            <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n              aria-label=\"Search\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n              stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n              class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n            </svg>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\r\n      <div class=\"search-bar\">\r\n        <!-- Search Icon SVG -->\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n          <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n        </svg>\r\n        <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n          aria-label=\"Search\">\r\n      </div>\r\n    </div>\r\n\r\n  </header>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenMenuTemplate>\r\n  <div class=\"fs-menu\">\r\n    <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\r\n    <div class=\"fs-menu-inner\">\r\n      <div class=\"fs-menu-head\">\r\n        <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\r\n          <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n        </div>\r\n        <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\r\n          <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <!-- Main level -->\r\n      <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\r\n        <ng-container *ngFor=\"let item of footerMenu\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\r\n              (click)=\"onFullScreenItemClick(item)\">\r\n              <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\r\n              <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\r\n              <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\" [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\r\n            </a>\r\n          </ng-container>\r\n        </ng-container>\r\n      </nav>\r\n\r\n      <!-- Submenu (drill-in) level -->\r\n      <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\r\n        <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\r\n          <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\r\n          <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\r\n        </button>\r\n        <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\r\n          <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\r\n            (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\r\n            <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\r\n          </a>\r\n          <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\r\n            (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\r\n        </ng-container>\r\n      </nav>\r\n      <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\r\n        <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\r\n          <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n            [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n            [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #bottomStickyNavTemplate>\r\n  <nav class=\"bs-nav\">\r\n    <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\r\n      <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\r\n        [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\r\n        <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\r\n          [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\r\n      </button>\r\n    </div>\r\n  </nav>\r\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:-13px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$2.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LOCAL_STORAGE]
@@ -18573,9 +18899,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], mobileOffcanvas: [{
                 type: ViewChild,
                 args: ['mobileOffcanvas']
-            }], onScroll: [{
-                type: HostListener,
-                args: ['window:scroll', ['$event']]
             }], getScreenSize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -26563,161 +26886,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
-class CountdownBannerComponent extends BaseSection {
-    constructor(eventService) {
-        super();
-        this.eventService = eventService;
-        this.days = '00';
-        this.hours = '00';
-        this.minutes = '00';
-        this.seconds = '00';
-        this.bannerText = '';
-        this.targetDate = "2026-02-17T00:00:00";
-        this.currentTime = Date.now();
-    }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-        this.bannerText = this.content?.inputText[0].value ?? '';
-        setInterval(() => {
-            this.currentTime = Date.now();
-        }, 1000);
-    }
-    getDays(dateString) {
-        if (!dateString)
-            return 0;
-        const target = new Date(dateString).getTime();
-        if (isNaN(target))
-            return 0;
-        const difference = target - this.currentTime;
-        if (difference <= 0)
-            return 0;
-        return Math.floor(difference / (1000 * 60 * 60 * 24));
-    }
-    getHours(dateString) {
-        if (!dateString)
-            return 0;
-        const target = new Date(dateString).getTime();
-        if (isNaN(target))
-            return 0;
-        const difference = target - this.currentTime;
-        if (difference <= 0)
-            return 0;
-        return Math.floor((difference / (1000 * 60 * 60)) % 24);
-    }
-    getMinutes(dateString) {
-        if (!dateString)
-            return 0;
-        const target = new Date(dateString).getTime();
-        if (isNaN(target))
-            return 0;
-        const difference = target - this.currentTime;
-        if (difference <= 0)
-            return 0;
-        return Math.floor((difference / (1000 * 60)) % 60);
-    }
-    getSeconds(dateString) {
-        if (!dateString)
-            return 0;
-        const target = new Date(dateString).getTime();
-        if (isNaN(target))
-            return 0;
-        const difference = target - this.currentTime;
-        if (difference <= 0)
-            return 0;
-        return Math.floor((difference / 1000) % 60);
-    }
-    get stylesLayout() {
-        return { ...this.style?.layout };
-    }
-    getContrastColor(bgColor) {
-        if (!bgColor)
-            return '#000000';
-        let colorToCheck = bgColor;
-        // If gradient → extract first color inside linear-gradient(...)
-        if (bgColor.includes('linear-gradient')) {
-            const match = bgColor.match(/(#[0-9A-Fa-f]{6}|rgb\([^)]+\))/);
-            if (match) {
-                colorToCheck = match[0];
-            }
-        }
-        let r = 0, g = 0, b = 0;
-        // HEX format
-        if (colorToCheck.startsWith('#')) {
-            const hex = colorToCheck.replace('#', '');
-            r = parseInt(hex.substring(0, 2), 16);
-            g = parseInt(hex.substring(2, 4), 16);
-            b = parseInt(hex.substring(4, 6), 16);
-        }
-        // RGB format
-        else if (colorToCheck.startsWith('rgb')) {
-            const values = colorToCheck.match(/\d+/g);
-            if (values) {
-                r = +values[0];
-                g = +values[1];
-                b = +values[2];
-            }
-        }
-        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-        return brightness > 128 ? '#000000' : '#ffffff';
-    }
-    getAccentBackground() {
-        const bg = this.style?.background;
-        if (!bg)
-            return '';
-        if (bg.accentBackgroundType === 'Solid') {
-            return bg.accentColor;
-        }
-        const angle = this.getGradientDirection(bg.gradientDirection);
-        return angle
-            ? `linear-gradient(${angle}, ${bg.accentColor}, ${bg.secondaryAccentColor})`
-            : `linear-gradient(${bg.accentColor}, ${bg.secondaryAccentColor})`;
-    }
-    getGradientDirection(direction) {
-        switch (direction) {
-            case 'DOWN':
-                return ''; // default top → bottom (no angle needed)
-            case 'RIGHT':
-                return '90deg';
-            case 'DIAGONAL_RIGHT':
-                return '45deg';
-            case 'DIAGONAL_LEFT':
-                return '135deg';
-            default:
-                return ''; // fallback
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CountdownBannerComponent, isStandalone: true, selector: "simpo-countdown-banner", inputs: { edit: "edit", data: "data", customClass: "customClass", nextComponentColor: "nextComponentColor", index: "index", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<!-- <section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" [ngClass]=\"{\r\n      'justify-content-center': style?.layout?.align === 'center',\r\n      'justify-content-start': style?.layout?.align === 'left',\r\n      'justify-content-end': style?.layout?.align === 'right'\r\n    }\">\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"w-50\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                        <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"countdown-container w-50\">\r\n                <div class=\"timer\">\r\n                    <div>   \r\n                        <span id=\"days\">{{days}}</span>\r\n                        <small>DAYS</small>\r\n                    </div>\r\n                    <div>\r\n                        <span id=\"hours\">{{hours}}</span>\r\n                        <small>HOURS</small>\r\n                    </div>\r\n                    <div>\r\n                        <span id=\"minutes\">{{minutes}}</span>\r\n                        <small>MINS</small>\r\n                    </div>\r\n                    <div>\r\n                        <span id=\"seconds\">{{seconds}}</span>\r\n                        <small>SECS</small>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section> -->\r\n\r\n\r\n<section>\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n        [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n        <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n            class=\"sale-bar\">\r\n            <!-- LEFT TEXT -->\r\n            <div class=\"sale-text\">\r\n                <simpo-text-editor [(value)]=\"bannerText\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\r\n            </div>\r\n\r\n            <!-- TIMER -->\r\n            <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getDays(content?.endDate)}}</span>\r\n                    <small>DAY</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getHours(content?.endDate) }}</span>\r\n                    <small>HOUR</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getMinutes(content?.endDate) }}</span>\r\n                    <small>MIN</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getSeconds(content?.endDate) }}</span>\r\n                    <small>SEC</small>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RIGHT ACTION -->\r\n            <div class=\"sale-action\">\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n                            [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Divider -->\r\n        <ng-container *ngIf=\"style?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n\r\n        <!-- EDIT SELECTOR -->\r\n        <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <!-- DELETE SELECTOR -->\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:28px 50px}.sale-text{font-size:26px;font-weight:600}.sale-timer{display:flex;gap:18px}.time-card{background-color:#fff;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CountdownBannerComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-countdown-banner', standalone: true, imports: [
-                        SimpoElementsModule,
-                        SimpoComponentModule,
-                        CommonModule,
-                        TextEditorComponent,
-                        BackgroundDirective,
-                        HoverDirective,
-                        OverlayDirective,
-                        SpacingHorizontalDirective,
-                        BorderDirective,
-                        ContentFitDirective
-                    ], template: "<!-- <section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\" [attr.style]=\"customClass\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\"\r\n        [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\" [ngClass]=\"{\r\n      'justify-content-center': style?.layout?.align === 'center',\r\n      'justify-content-start': style?.layout?.align === 'left',\r\n      'justify-content-end': style?.layout?.align === 'right'\r\n    }\">\r\n        <div class=\"d-flex align-items-center gap-3\">\r\n            <div class=\"w-50\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n                        <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"countdown-container w-50\">\r\n                <div class=\"timer\">\r\n                    <div>   \r\n                        <span id=\"days\">{{days}}</span>\r\n                        <small>DAYS</small>\r\n                    </div>\r\n                    <div>\r\n                        <span id=\"hours\">{{hours}}</span>\r\n                        <small>HOURS</small>\r\n                    </div>\r\n                    <div>\r\n                        <span id=\"minutes\">{{minutes}}</span>\r\n                        <small>MINS</small>\r\n                    </div>\r\n                    <div>\r\n                        <span id=\"seconds\">{{seconds}}</span>\r\n                        <small>SECS</small>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <ng-container *ngIf=\"style?.devider?.display\">\r\n        <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n            [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section> -->\r\n\r\n\r\n<section>\r\n    <div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"sale-wrapper total-container\"\r\n        [attr.style]=\"customClass\" [simpoBackground]=\"style?.background\" [simpoOverlay]=\"style?.background\">\r\n        <div #mainContainer [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"style?.layout\"\r\n            class=\"sale-bar\">\r\n            <!-- LEFT TEXT -->\r\n            <div class=\"sale-text\">\r\n                <simpo-text-editor [(value)]=\"bannerText\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\r\n            </div>\r\n\r\n            <!-- TIMER -->\r\n            <div class=\"sale-timer\" [style.color]=\"getContrastColor(style?.background?.accentColor)\">\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getDays(content?.endDate)}}</span>\r\n                    <small>DAY</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getHours(content?.endDate) }}</span>\r\n                    <small>HOUR</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getMinutes(content?.endDate) }}</span>\r\n                    <small>MIN</small>\r\n                </div>\r\n                <div class=\"time-card\" [ngStyle]=\"{'background':getAccentBackground() }\">\r\n                    <span>{{ getSeconds(content?.endDate) }}</span>\r\n                    <small>SEC</small>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- RIGHT ACTION -->\r\n            <div class=\"sale-action\">\r\n                <ng-container *ngIf=\"data?.action?.display\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n                            [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Divider -->\r\n        <ng-container *ngIf=\"style?.devider?.display\">\r\n            <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n                [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n        </ng-container>\r\n\r\n        <!-- EDIT SELECTOR -->\r\n        <div [ngClass]=\"{ hover_effect: edit }\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n\r\n        <!-- DELETE SELECTOR -->\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{ hover_effect: delete }\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</section>", styles: [".sale-wrapper{width:100%}.total-container{height:auto;position:relative}.sale-bar{width:100%;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:28px 50px}.sale-text{font-size:26px;font-weight:600}.sale-timer{display:flex;gap:18px}.time-card{background-color:#fff;padding:6px 14px;border-radius:8px;text-align:center;min-width:60px}.time-card span{display:block;font-size:18px;font-weight:600}.time-card small{font-size:11px;letter-spacing:1px;font-weight:500}.sale-action{display:flex;align-items:center;gap:20px}.shop-button{background-color:#fff;color:#1c2a39;border:none;padding:5px 14px;border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:.3s ease}.shop-button:hover{background-color:#f2f2f2}.close-icon{font-size:20px;cursor:pointer;opacity:.8}.close-icon:hover{opacity:1}@media (max-width: 768px){.sale-bar{flex-direction:column;gap:20px;text-align:center}.sale-action{justify-content:center}}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { edit: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], nextComponentColor: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], delete: [{
-                type: Input
-            }] } });
-
 class OverlappingImageComponent extends BaseSection {
     constructor() {
         super();
@@ -27258,5 +27426,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AddSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, BrandStorySectionComponent, ButtonDirectiveDirective, ButtonGridSectionComponent, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqColumnsCardsComponent, FaqSectionComponent, FeatureExperienceSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, Menu_Type, MergeHeaderDirective, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductInfoSectionComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RECOMMENDATION_URL, RecentBlogPostSectionComponent, RedirectionLinkType, ReferEarnComponent, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialMasonryComponent, TestimonialSectionComponent, TestimonialSliderComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextEditorComponent, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoCarouselSectionComponent, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
+export { API_URL, APPOINTMENT_URL, AddNewSectionComponent, AddSectionComponent, AlignContent, AlignmentDirective, AnimationDirective, AppointmentBookingComponent, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BUCKET_URL, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BookAppointmentComponent, BorderDirective, BrandStorySectionComponent, ButtonDirectiveDirective, ButtonGridSectionComponent, CMIS_URL, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, CondensedAndGradientComponent, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CountdownBannerComponent, CustomerReviewComponent, DeviderType, ECOMMERCE_URL, EndUserService, EnrollmentFormComponent, EventsService, FaqColumnsCardsComponent, FaqSectionComponent, FeatureExperienceSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterComponent, FooterSectionComponent, FooterType, FooterTypes, FourFeaturesCenteredImageComponent, GradientDirection, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderSectionComponent, HeaderTextComponent, Header_Type, HeightDirective, HoverAnimationDirective, HoverDirective, IconDirectiveDirective, ImageBackgroundComponent, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridHotspotComponent, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LOCAL_STORAGE, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, Menu_Type, MergeHeaderDirective, Mobile_Menu_Type, MovingTextComponent, NavbarSectionComponent, NewCollectionComponent, NewServicesComponent, NewTestimonialsComponent, NewsLetterComponentComponent, ObjectPositionDirective, OverlappingImageComponent, OverlayDirective, OverlayValue, PASSBOOK_URL, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductInfoSectionComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RECOMMENDATION_URL, RecentBlogPostSectionComponent, RedirectionLinkType, ReferEarnComponent, RegistrationFormComponent, RemoveCarouselDirective, ReturnsCalculatorComponent, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, SchemeDetailComponent, SchemesComponent, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, SpacingDirective, Sticky_Type, StoreListComponent, StorePageComponent, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialMasonryComponent, TestimonialSectionComponent, TestimonialSliderComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextEditorComponent, TextImageSectionComponent, TextPosition, TextSectionComponent, TranslateOnhoverDirective, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoCarouselSectionComponent, VideoGridSectionComponent, VideoRatio, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, checkItemAlreadyAdded, contentAlignment, fitContent, fitScreen, fontSize, headlineAnimationType, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData, syncItemToServerDBRequest };
 //# sourceMappingURL=simpo-component-library.mjs.map